@charset "utf-8";
/* CSS Document */

body {font-family: Helvetica, Arial, sans-serif; margin:0; padding:0; background: #333; height:100%; font-size:11px; color:#FFF;}



#pingPongScroller  img
{
	float: left;
	margin-left: -2px;
	margin-right: 5px;
	height: 217px;
	margin-top:44px
}

#pingPongScroller 
{
	
}

#workCon1{visibility:visible;background-color:#231f20; }
#workCon2{visibility:hidden;}
#workCon3{visibility:hidden;}

body.home a.home, body.about a.about, body.clients a.clients, body.services a.services, body.work a.work, body.team a.team, body.contact a.contact, body.news a.news  {color:#FC0!important;}
#wrapper{height:565px;min-height:100%;width:960px;margin: 27px auto 0px auto; background-color:#FFF}
#header{height:86px; width:100%; background: url(../images/TAW_topBar_4x86.jpg) repeat-x top left; position:relative; z-index:101;}
#logo{height:74px; width:159px; position:absolute; top:47px;}
#mainCont{height:402px; width:100%; overflow:hidden; background: #231f20}
#mainContW{height:402px; width:100%; overflow:hidden; background: #231f20 url(../images/TAW_workShad.jpg) repeat-x top left}
#footer{height:77px; width:100%; background:url(../images/TAW_btmBar_4x77.jpg) repeat-x bottom left; float:left}
#nav{height:100%; width:820px; position:absolute; top:56px; left:133px;}
ul#navItems li{display:inline; padding-right:17px;}
ul#navItems li a:link, ul#navItems li a:visited{ text-decoration:none;  color:#FFF;}
ul#navItems li a:hover,  ul#navItems li a:active{ color:#FC0;}
#cRight{padding:56px 0 0 23px; font-size:10px;}
#creds{ width:138px; height:33px; background:url(../images/TAW_mb_32x33.jpg) no-repeat 100% 0%; float:right;margin:-63px 30px 0 0;padding:19px 13px 0 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none;  color:#F00;} 
#creds a:hover{ color:#333;}
#creds span{padding:20px 0 0 0}

#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12, #t13, #t14, #t15, #t16, #t17, #t18, #t19, #t20, #t21, #t22{padding:50px 173px;height:240px;left:-172px;position:absolute;top:-107px;width:960px; display:none; background: #C03 url(../images/team_BG.jpg) repeat-x	top left;}
#t1 img, #t2 img, #t3 img, #t4 img, #t5 img, #t6 img, #t7 img, #t8 img, #t9 img, #t10 img, #t11 img, #t12 img, #t13 img, #t14 img, #t15 img, #t16 img, #t17 img, #t18 img, #t19 img, #t20 img, #t21 img, #t22 img{position:absolute;right:40%;top:0;}
#t1 h1, #t2 h1, #t3 h1, #t4 h1, #t5 h1, #t6 h1, #t7 h1, #t8 h1, #t9 h1, #t10 h1, #t11 h1, #t12 h1, #t13 h1, #t14 h1, #t15 h1, #t16 h1, #t17 h1, #t18 h1, #t19 h1, #t20 h1, #t21 h1, #t22 h1{ width:370px!important; color:#333; margin:0 !important;}
#t1 h2, #t2 h2, #t3 h2, #t4 h2, #t5 h2, #t6 h2, #t7 h2, #t8 h2, #t9 h2, #t10 h2, #t11 h2, #t12 h2, #t13 h2, #t14 h2, #t15 h2, #t16 h2, #t17 h2, #t18 h2, #t19 h2, #t20 h2, #t21 h2, #t22 h2{color:#ed1c24; font-size:12px}
#t1 h3, #t2 h3, #t3 h3, #t4 h3, #t5 h3, #t6 h3, #t7 h3, #t8 h3, #t9 h3, #t10 h3, #t11 h3, #t12 h3, #t13 h3, #t14 h3, #t15 h3, #t16 h3, #t17 h3, #t18 h3, #t19 h3, #t20 h3, #t21 h3, #t22 h3{color:#333333;}
#t1 p, #t2 p, #t3 p, #t4 p, #t5 p, #t6 p, #t7 p, #t8 p, #t9 p, #t10 p, #t11 p, #t12 p, #t13 p, #t14 p, #t15 p, #t16 p, #t17 p, #t18 p, #t19 p, #t20 p, #t21 p, #t22 p{color:#333333!important; width:415px!important;}

#contL{width:275px;margin:112px 0 0 172px; color:#fafafa}
#contL_cl, #contL_co, #contL_wo {width:295px;margin:55px 0 0 172px; color:#fafafa}
#contL_wo {margin:107px 0 0 172px; position:relative;}
#contL h1, #contL_cl h1, #contL_co h1, #contL_wo h1{width:270px; font-size:30px; line-height:25px; font-size:27px; margin-bottom:25px; letter-spacing:-0.2px;}
#contL_co h1, #contL_wo h1{width:217px; letter-spacing:-0.7px; line-height:24px; margin-bottom:60px}
#contL_wo h1{width:225px; margin-bottom:46px}
#contL p, #contL_cl p, #contL_co p, #contL_wo p  { font-family:Verdana, Geneva, sans-serif; font-size:11px; width:250px;}
#contL_co p  {margin-bottom:-2px;color:#999}
#contL_wo p  {width:211px}
#contL_co strong {margin-bottom:-2px;letter-spacing:0.3px; color:#FFF}
#contR{width:350px; margin:81px 81px 0}
#contR_cl{width:375px; margin:27px 0 0 111px;}
#contR_co{width:375px; margin:29px 0 0 90px;}
#contR_wo{width:375px; margin:18px 0 15px -20px;}
#contR_te{width:375px; margin:18px 0 50px -20px;}

#iLeft,#iRight{color:#333; float:left;}
#iLeft{width:240px}
#iRight{width:700px}
#tnInfo1 h3 {font-weight:normal; font-size:11px; margin: 6px 0px 0px 27px; padding:0px}
#tnInfo1 h1 {font-size:30px; margin: -3px 0px 0px 25px; padding:0px; line-height:26px}
#iLeft h2 {margin:0 0 0 25px;}
#iRight h4{font-weight:bold; margin:8px 0px 0px 0px; font-size:13px;}
#iRight p{margin:0}

.fLeft{float:left}
.fRight{float:right}

#contL_cl ul{line-height:18.8px;margin-right:19px;padding:0;}
#contL_cl li {list-style-type:none; padding:0;}

#btmNav{background-color:#efecec;clear:left;height:68px;padding-left:1px; width:742px; float:left;}
#btmNav img{margin:3px 0px 0 4px; float:left}	
#btmNavTeam{background-color:#efecec;height:62px;padding-left:1px; width:761px; float:left; overflow-x:auto; overflow-y:hidden;}
#btmNavTeam img{margin:4px 0px 0 4px; float:left; height:40px}	

#tnInfo{background-color:#FF0000;float:left;height:61px;width:217px; position:relative; border-top: 3px solid #efecec; border-bottom: 4px solid #efecec;}
#tnInfo1{background-color:#FFF;float:left;height:75px; width:100%; position:relative}

#tnInfo h2 {font-size:15px; margin:1px 0 0 3px;}
#tnInfo p {margin:0 0 0 3px; line-height:10px; font-size:10px}

#tnInfoTeam{background-color:#FF0000;float:left;height:55px;width:195px; position:relative; border-top: 3px solid #efecec; border-bottom: 4px solid #efecec;border-left:3px solid #EFECEC;}
#tnInfoTeam h2 {font-size:15px; margin:1px 0 0 3px;}
#tnInfoTeam p {margin:0 0 0 3px; line-height:10px; font-size:10px}

#info1, #info2, #info3, #info4, #info5, #info6, #info7, #info8, #info9, #info10, #info11, #info12, #info13, #info14, #info15, #info16, #info17, #info18, #info19, #info20, #info21, #info22{position:absolute; visibility: hidden}

/*#workInfo{position:absolute; top:0; left:0; width:350px; height:450px; background:#960;}

/*THe following is for the sliding panel images*/

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  When positioning the mouse over one of the hot spots, the cursor should change.
	I've noticed that this varies from browser to browser though. */
	cursor: url(../images/cursors/cursor_arrow_left.cur), w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

#imgList {
        list-style-type: none;
        list-image-type: none;
        margin: 0;
        padding:0;
    }

    #imgList li {
        display: inline;
    }
	
#scrolling{width:1080px; height:46px; }

#scrollbox {width:400px; height:80px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:3px; float:left; font-size:11px;}



a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec; z-index:100; font-size:11px;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}

a.gallery:hover span {display:block; position:absolute; width:402px; height:280px; top:49px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;}
a.gallery:active {border:1px solid #eee;}
a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:402px; height:280px; top:49px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:50;}

#thumbs {width:840px; height:60px;}

.dim{color:#999; float:right}
.twt{float:left;margin-left:25px;margin-top:4px;}
.twt img, .face img {border:none; height:35px}

.face{float:left;margin-left:25px;margin-top:4px;}
.news2{overflow:scroll!important; overflow-x:hidden!important; color:#333;}