/* CSS Document - THE WHOLE CABOODLE - Dave Saunders */

/* body styles */
body{padding:0; text-align:left; margin:0 0 0 0; font-family: Arial, Helvetica, sans-serif, arial, helvetica, serif; font-size:70%; color:#111; background-color:#fff;}
h1,h2,h3,h4,h5,h6{font-size:110%; display:block; font-weight:bold; color:#fff; line-height:1.3em;}
h1{display:block; z-index:50000; font-weight:bold; margin:0 0 5px 0; font-size:200%; text-transform:uppercase;}
h2{display:block; margin:0 0 5px 0; font-weight:bold; text-transform:uppercase; font-size:140%;}
h3{display:block; margin:12px 0 2px 0; font-weight:bold; font-size:100%; }
h4{margin:10px 0 2px 0; font-size:90%;}

a{color:#000; text-decoration:none; font-weight:bold;}strong{font-weight:bold;}em{font-style:italic;}a:hover{text-decoration:underline;}

body#contact a{color:#fff;}



/* misc styles */
.hidden{display:none;}.skiplinks{display:none;}fieldset{border:0;}input{font-size:100%;}textarea{font-size:95%; width:270px; height:70px; font-family:Arial, Helvetica, sans-serif; font-weight:normal;}form{margin:0; padding:0; border:0;}table{font-size:100%;}
hr{height:1px; border:0; margin:10px 0 10px 0; color:#ddd; background-color:#ddd; line-height:1px; clear:left;}label{display:block; float:left;} p{line-height:1.1em; margin-bottom:15px;}caption{font-weight:bold; text-align:left; padding-bottom:4px;}.divclear{clear:both; height:1px; line-height:1px; font-size:1px; margin-top:-1px;}

/* container styles */
#container{display:block; margin:0 auto; width:960px; padding:0 0 0 0; text-align:left; }

/* header styles */
#header{display:block; padding:0 0 0 0; position:relative; margin:0 0 0 0; height:53px;}
#header #logo{padding:0; margin-top:15px; width:161px; height:19px; text-indent:-5000px; display:block; float:left;}
#header #logo a{display:block; color:#fff; background:url(../images/logo.gif) repeat-x; width:100%; height:100%;}
#header #logo img{vertical-align:middle;}

ul#nav{display:block; font-size:185%; z-index:200; position:absolute; top:14px; right:0; margin:0; padding:0;}
ul#nav li{display:block; float:left;}
ul#nav li a{display:block; color:#BCBEC0; float:left; padding:0 0 0 0; margin-right:5px; letter-spacing:-0.01em!important; font-weight:normal;}
ul#nav li a:hover{color:#000; text-decoration:none;}
ul#nav li.first a{}
ul#nav li.last a{margin-right:0;}
ul#nav li.active a,ul#nav li a.active{color:#000!important;}
 
/* middle styles */
#middle{clear:both; position:relative; height:437px!important; 
box-shadow: 0 0 10px #333; 
-webkit-box-shadow: 0 0 10px #333; 
-moz-box-shadow: 0 0 10px #333; 
-moz-border-radius:10px 10px 10px 10px; 
-webkit-border-radius:10px 10px 10px 10px;


z-index:1000; width:960px;
}
	body#home #middle{background:url(../images/bg_mid.jpg) no-repeat; background-color:#fff; }
	body#home #middle{background-color:#fff; }
	body#work #middle{background:url(../images/bg_mid_work.jpg) no-repeat; background-color:#fff; }
	body#people #middle{background:url(../images/bg_mid_people.jpg) no-repeat; background-color:#fff; }
	body#services #middle{background:url(../images/bg_mid_services.jpg) no-repeat; background-color:#fff; }
	body#clients #middle{background:url(../images/bg_mid_clients.jpg) no-repeat; background-color:#fff; }
	body#news #middle{background:url(../images/bg_mid_news.jpg) no-repeat; background-color:#fff; }
	body#careers #middle{background:url(../images/bg_mid_careers.jpg) no-repeat; background-color:#fff; }
	body#contact #middle{background-color:#fff;
	
-webkit-box-shadow:none; 
-moz-box-shadow:none; 
-moz-border-radius:none; 
-webkit-border-radius:none;	
	
	 }
	body#funstuff #middle{background:url(../images/bg_mid_funstuff.jpg) no-repeat; background-color:#fff; }

/* mid styles */
#mid{display:block; position:relative; padding:20px 25px; color:#fff!important;}
	body#contact #mid{display:block; position:absolute; z-index:30; padding:20px 25px; font-weight:bold!important; color:#fff!important;}
	body#contact #mid p{margin-bottom:7px;}

#tv{position:absolute; left:311px; top:73px; height:119px; width:212px; }
#tv a{width:100%; height:100%; display:block; float:left; position:relative; width:212px; height:119px; text-indent:-5000px; background:url(../images/work_tv.jpg) no-repeat; background-position:0 0;}
#tv a:hover{-webkit-box-shadow:0 0 10px #333; -moz-box-shadow: 0 0 10px #333; }

#radio{position:absolute; left:436px; top:194px; height:81px; width:100px;}
#radio a{width:100%; height:100%; display:block; float:left; position:relative; width:100px; height:81px; text-indent:-5000px; background:url(../images/radio.png) no-repeat; background-position:0 0;}
#radio a:hover{}

#printpress{position:absolute; left:317px; top:237px; height:29px; width:101px;}
#printpress a{width:100%; height:100%; display:block; float:left; position:relative; width:101px; height:29px; text-indent:-5000px; background:url(../images/printpress.png) no-repeat; background-position:0 0;}
#printpress a:hover{}

#envelope{position:absolute; left:640px; top:240px; height:60px; width:70px;}
#envelope a{width:100%; height:100%; display:block; float:left; position:relative; width:70px; height:60px; text-indent:-5000px; background:url(../images/envelope.png) no-repeat; background-position:center  center;}
#envelope a:hover{}



.simple-overlay {display:none; position:absolute!important; width:664px; height:390px;left:146px!important; top:22px!important; 
z-index:400;
  /* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 30px 5px #000;
	-webkit-box-shadow: 0 0 30px #000;
	
	}



body#careers .newsItems {display:none; position:absolute!important; width:544px; height:353px; left:350px!important; top:24px!important; 
z-index:400; opacity:0.95;
  /* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 30px 5px #000;
	-webkit-box-shadow: 0 0 30px #000;
	
	}
	
body#services .newsItems {display:none; position:absolute!important; width:470px; height:355px;left:30px!important; top:22px!important; 
z-index:400;
  /* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 30px 5px #333;
	-webkit-box-shadow: 0 0 30px #333;
	
	}


/* the overlayed element */ 
#flash{ 
position:absolute;left:0px!important; top:0px!important; 
z-index:500; background-color:#fff;  padding-top:0; width:664px; height:390px; overflow:hidden;

} 

#flashcontent{ 
position:absolute;left:-6px!important; top:-7px!important; 
z-index:500; background-color:#fff;  padding-top:0; width:971px; height:460px; overflow:hidden;

} 

#work .simple-overlay h2{position:absolute; width:100%; text-align:center; top:22px; z-index:650; color:#000;}
 
/* close button positioned on upper right corner */ 
.simple-overlay .close { 
    background-image:url(http://static.flowplayer.org/tools/img/overlay/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
	z-index:600!important; 
}

/* styling for elements inside overlay */ 
.details { 
    position:absolute; 
    top:15px; 
    right:15px; 
    font-size:11px; 
    color:#fff; 
    width:150px; 
} 
 
.details h3 { 
    color:#aba; 
    font-size:15px; 
    margin:0 0 -10px 0; 
}

#flash{ }

#newsList{position:relative; width:251px; padding-right:5px; height:230px; overflow:auto; display:block; text-align:left;}
#prevNext{position:relative; top:299px; left:407px; font-size:90%; width:300px;}
.newsItems{display:none; position:relative; left:45px!important; top:24px!important; padding:20px;  height:343px; background-color:#fff!important; float:left; width:463px;

z-index:2000;
  /* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 11px  #333;
	-webkit-box-shadow: 0 0 11px #333;

	
	
	}
	
	div.innerScroll { 
		height:344px;
		overflow-y:auto;
	}
	
.newsItems h2,.newsItems h3{margin:0 0 9px 0!important; color:#111;}

#careers h2{margin:0 0 9px 0!important; color:#111;}

.newsItems img{float:right; margin:0 0 10px 15px;}

#newsList hr{margin:0!important; padding:0!important;}
#newsList p{margin:0 0 5px 0!important; padding:0!important;}
#newsList h2,#newsList h3,#newsList h2 a,#newsList h3 a{margin:4px 0 0 0!important; color:#111;}
/* close button positioned on upper right corner */ 



.newsItems .close { 
    background-image:url(http://static.flowplayer.org/tools/img/overlay/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
	z-index:600!important; 
}	





.ytItems{display:none; position:absolute; left:175px!important; top:120px!important; padding:0;  height:173px; float:left; width:214px;

z-index:500;

	}


.ytItems object{z-index:100!important; position:absolute!important;}






.yt2{position:absolute; bottom:312px; left:-7px; padding-left:10px;}
.yt3{position:absolute; bottom:280px; left:12px; padding-left:10px;}
.yt4{position:absolute; bottom:253px; left:-10px; padding-left:10px;}
.yt5{position:absolute; bottom:219px; left:1px; padding-left:10px;}
.yt6{position:absolute; bottom:192px; left:3px; padding-left:10px;}
.yt7{position:absolute; bottom:163px; left:-11px; padding-left:10px;}
.yt8{position:absolute; bottom:131px; left:3px; padding-left:10px;}
.yt9{position:absolute; bottom:102px; left:-10px; padding-left:10px;}
.yt10{position:absolute; bottom:68px; left:5px; padding-left:10px;}
.yt11{position:absolute; bottom:40px; left:-5px; padding-left:10px;}
.yt12{position:absolute; bottom:5px; left:-10px; padding-left:10px;}






div.onAir{width:116px; height:55px; background:url(../images/onAir.gif) no-repeat; display:block; position:absolute; top:42px; left:574px; opacity:0; filter: alpha(opacity = 0);}
	
	
	
	#demotip { 
    display:none; 
    background:transparent url(../images/white_arrow.png); 
    font-size:11px;  font-weight:bold;
    height:20px; 
    width:110px;  text-align:center;
    padding:25px 5px; 
    color:#111;     
	z-index:5000;

}

	#demotip2 { 
    display:none; 
    background:transparent url(../images/demotiptv.png); 
    font-size:11px;  font-weight:bold;
    height:88px; 
    width:84px;  text-align:center;
    padding:20px 15px 0 15px; 
    color:#111;     
	z-index:5000; font-size:140%;

}

	#demotip4 { 
    display:none; 
    background:transparent url(../images/demotippp.png); 
    font-size:11px;  font-weight:bold;
    height:100px; 
    width:150px;  text-align:center;
    padding:0; 
    color:#111;     
	z-index:5000; font-size:140%;

}

	#demotip3 { 
    display:none; 
    background:transparent url(../images/demotipdig.png); 
    font-size:11px;  font-weight:bold;
    height:100px; 
    width:150px;  text-align:center;
    padding:0; 
    color:#111;     
	z-index:5000; font-size:140%;

}

	#demotip5 { 
    display:none; 
    background:transparent url(../images/demotipmail.png); 
    font-size:11px;  font-weight:bold;
    height:68px; 
    width:84px;  text-align:center;
    padding:40px 15px 0 15px; 
    color:#111;     
	z-index:5000; font-size:140%;

}

#midBot{position:absolute; bottom:5px; right:15px; text-align:right;}

#window{position:absolute; width:111px; height:137px; top:171px; left:-1px; z-index:1; background-color:#fff;}
#window2{position:absolute; width:178px; height:185px; top:114px; left:12px; z-index:1; background-color:#fff;}
#window3{position:absolute; width:227px; height:181px; top:116px; left:173px; z-index:500; background:url(../images/frame.png) no-repeat;}

#midBot a{padding-right:23px; padding-top:2px; background:url(../images/button.png) no-repeat; background-position:right 0; height:20px; display:block; float:right; margin-left:7px;}

#midExpose{background-color:#000; opacity:0.4; filter: alpha(opacity = 40); position:absolute; width:100%; height:100%; -moz-border-radius:10px 10px 10px 10px; border-radius:10px 10px 10px 10px; }
	body#work #midExpose{}
	body#home #midExpose{opacity:0; filter: alpha(opacity = 0); }
.hider{z-index:55;}
.shower{z-index:100;}


#formHolder{width:235px; position:absolute; left:40px; top:40px; z-index:100;}
#middle form{margin-top:15px;}
#middle label{display:block; float:none; margin-bottom:3px;}
#middle input{border:1px solid #111; padding:2px; width:70%; font-size:100%; font-family:Arial, Helvetica, sans-serif; display:block;}
#middle input.submit{border:1px solid #111; padding:2px; width:30%; margin-top:15px; margin-bottom:20px; font-size:100%; font-family:Arial, Helvetica, sans-serif; display:block;}
#formHolder p{margin-bottom:8px;}

#jobAds{width:235px; position:absolute; left:40px; bottom:40px; z-index:100;}


/* player style */
/* container has a background image */
a.player {margin-top:40px; display:block; background:url(../images/splash.png) no-repeat; width:425px; height:298px; padding:0 126px 75px 127px; text-align:center; color:#fff; text-decoration:none; cursor:pointer;}

/* splash image */
a.player img {margin-top:115px; border:0;}
#player {float:left;}	

/* playlist style */
#playlist {width:130px;	height:370px; position:relative;	overflow-y:auto;	overflow-x:hidden;	 margin-top:40px;	margin-right:330px;	float:right;}

/* playlist entry */
#playlist a {display:block; width:100px; float:left;	font-size:80%!important; padding:5px 10px!important;	 text-decoration:none; margin-bottom:6px;	color:#666;}

/* different states of a playlist entry */
#playlist a:hover { text-decoration:underline;}
#playlist a.progress {}
a.playing{font-weight:bold!important; text-decoration:underline!important;}
#playlist a.paused {}

/* elements inside playlist entry */
#playlist a img {}
#playlist a strong {}
#playlist a em {}


#service-wrapper{display:block; padding-left:20px; width:753px; height:300px; overflow:hidden; position:absolute; left:43px; padding:0 0 0 15px; margin:0; top:20px; position:relative;}
#service-wrapper h2{color:#000; font-size:130%;}
#service-wrapper .servicePanel{position:absolute; z-index:200; width:205px; height:220px; right:0; top:0; font-size:90%; padding:45px 10px 0 10px; text-align:right; display:none;}
#service-wrapper .button{
	list-style: none;
	list-style-type: none;
	padding: 42px 0 0 15px;
	margin: 35px 0 0 0;
	float:left;
	display:inline; cursor:pointer; text-align:center;
	width:70px; height:100px; overflow:hidden; 
}
#service-wrapper #s1{}
#service-wrapper #s2{padding-top:42px; padding-left:12px;}
#service-wrapper #s3{padding-top:42px; padding-left:7px;}
#service-wrapper #s4{padding-top:42px; padding-left:5px;}
#service-wrapper #s5{padding-top:42px; padding-left:7px;}
#service-wrapper #s6{padding-top:42px; padding-left:3px;}

#serviceDoor{width:224px; height:210px; position:absolute;  right:0; z-index:130; top:15px;}
#serviceDoor #serviceDoorTop{width:224px; height:25px; background:url(../images/serviceDoorTop.png) no-repeat;display:block; position:absolute; top:82px; }
#serviceDoor #serviceDoorBot{width:224px; height:25px; background:url(../images/serviceDoorBot.png) no-repeat;display:block; position:absolute; bottom:69px; }



#houseContact{
	margin: 0;
	padding: 0;
	position:absolute; z-index:20;
	width:100%; height:100%; overflow:hidden; 
	background:url(../images/houseContact.png) no-repeat; text-indent:-5000px;
}

#houseContactVid{
	margin: 0;
	padding: 0;
	position:absolute; z-index:1;
	width:100%; height:100%; overflow:hidden; 
}


#housePic{margin:0 0 0 0;}

p#socButtons{margin-top:15px;}



/* right styles */
#right{display:block; width:210px; padding:15px; border:1px dotted #ccc; background-color:#efefef; float:right; font-size:90%;}
#right hr{margin-bottom:25px;}

/* footer styles */
#footer{clear:both; display:block; text-align:left; font-size:110%;  padding:12px 0; margin:20px 0 20px 0!important; border-top:1px solid #000; border-bottom:1px solid #000;}
#footer p{margin:0; padding:0; line-height:1.25em;}
#footer #fLeft{float:left; width:470px; margin-right:20px;}
#footer #fRight{float:left; width:470px;}


/* tables */
#mid table{ border-collapse:collapse; border:1px solid #deded2; padding:0 0 0 0; margin:10px 0 20px 0; text-align: left; width:100%; font-size:95%;}
#mid table tr th{ border-collapse:collapse; border:1px solid #deded2;  background-color: #888; color:#fff; padding:8px 8px; font-weight:bold!important;}
#mid table tr .header {}
#mid table tr td{border-collapse:collapse; color: #444; border:1px solid #deded2; padding: 8px; background-color:#fff; vertical-align: middle; text-align:left!important;}
#mid table tr  p{margin:0!important; padding:0!important; text-align:left!important}
#mid table tr.alt td {background-color:#eee!important; color:#222;}

/* misc styles */
.dn,.hidden{display:none!important;}
#at15s_head,#at16pf{display:none!important;}
.clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
a{outline:none;}



/* root element for tabs  */
ul.tabs {  
	margin:0 !important;  position:absolute; top:261px; left:0;
	padding:0; height:100px;
}

/* single tab */
ul.tabs li {  
	float:left!important;	 
	width:330px; 
	height:120px;
padding:0; 
	margin:0;  
	list-style-type:none;	
}

ul.tabs li ul li{width:50px; height:50px; margin:0 5px 5px 0;}

/* link inside the tab. uses a background image */
ul.tabs a { 
	float:left;
	display:block;
	position:relative; margin-right:5px; border:0;
}
ul.tabs img{width:50px; height:50px; border:0;}
ul.tabs a:hover {}
	
/* selected tab */
ul.tabs a.current {}

.panes{width:400px; position:absolute; left:322px; top:60px; height:155px;}

/* tab pane */
.panes div img{ float:left; margin:0 25px 0 0;

}
.panes div h2{color:#111;}
.panes div{clear:both; display:none; position:absolute;}

#setSwitcher{position:absolute; top:382px; left:267px; background-color:#fff; color:#777; padding:4px; float:left; display:block; opacity:0.9; filter: alpha(opacity = 90);}
#setSwitcher a{color:#555;}
#setSwitcher a.sActive{color:#111; text-decoration:underline;}



/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	margin-left:313px;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px; top:260px; left:615px; position:absolute; z-index:5000;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; top:260px; left:295px; position:absolute; z-index:5000;} 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../images/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 325px;
	height:420px;

}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .tabs {	width:20000em;	position:absolute;	clear:both;}
.items div {	float:left;	width:400px;}
/* single scrollable item */
.scrollable img {}
/* active item */
.scrollable .active {	border:2px solid #000;	position:relative;	cursor:default;}

.twtr-tweet-text{font-size:90%;}
.twtr-tweet img{display:none!important;}

.textwidget{}

.person div{

	width: 380px;

}

.person .info{

	width: 260px;
	float: left

}

.person p{

	width: 270px;
	float: right;

}