/*----------------------------------------------------------------
Proficient Balancing Company General Stylesheet 
Version:	1.0
Author:		Josh Southern
email:		josh@paradigmshiftinteractive.com
Updated:	9/2/08  2:30 PM
----------------------------------------------------------------*/
* {
	margin: 0;
}
html{
	font-size:62.5%;
	
}
body{
	background: #ff5800;
}
#container {
	margin:0px auto;
	font-size:100.01%;
	font-family:Gotham, Futura, Arial, sans-serif;
	background:#f60 url(../images/bg-body.gif) no-repeat;
	color:#000;
	width: 780px;
}
img{border:0;}

/* Basic Text Styles */
a{
	color:#fff;
	text-decoration:none;
}
a:hover{text-decoration:underline;}

h1 { /* To be used for the logo only */
	width:100%;
	height:61px;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/logo.gif) no-repeat top right;
	margin:0 0 8px 20px;
	clear:both;
}
h1 a, h1 a:hover{
	display:block;
	height:100%;
}
h2 { /* Main Page Headline */
	font-size:2.1em;
	color:#006;
	line-height:1em;
	font-family: Gotham, Futura, "Arial Black", Arial, sans-serif;
	font-weight: bold;
}
h3 {
	font-size: 1.5em;
	color: #fff;
	padding: 3px 0 3px 0;
}
h3.contact {
	font-size: 1.2em;
	color: #006;
	line-height: 1.4em;
	padding: 3px 0 0 0;
}
p {
	font-size: 1.2em;
	color: #006;
	line-height: 1.4em;
	padding: 3px 0 20px 0;
}
p.contactinfo {
	font-size: 1.5em;
	color: #fff;
}
p.centered {
	text-align: center;
}
p.skipintro {
	text-align: right;
	padding-right: 35px;
}
a.skipintro {
	color: #006;
}
a.skipintro:hover {
	color: #fff;
}
.clear {
	clear: both;
}
.callout {
	color: #fff;
}

/* General Page Elements */
#header{
	width:697px;
	overflow:hidden;
	margin:0 auto;
	padding:30px 38px 0 10px;
	position: relative;
}
#content-holder{
	width:716px;
	overflow:hidden;
	margin:0 auto;
	padding:12px 38px 12px 26px;
	position: relative;
	height: 1750px;
}
#content{
	float:left;
	width:475px;
	padding:5px 0 0;
	position: relative;
}
#flashintro {
	margin: 0px auto;
}
#column1 {
	width: 225px;
	float: left;
}
#column2 {
	width: 225px;
	float: right;
}



/* Top Navigation */
#top-nav{
	font-size:1.3em;
	font-weight:bold;
	line-height:1.1em;
	list-style:none;
	margin:0 37px 3px 0;
	padding:0;
	overflow:hidden;
	float:right;
}
#top-nav li{
	padding:0 19px 0 15px;
	float:right;
	margin:0 -10px 0 0;
	background:url(../images/topnav-separator.gif) no-repeat 100% 50%;
}

/* Big Navigation Elements at Top of Page */
#nav{
	width:100%;
	float:left;
	clear:both;
	margin:0 0 0 18px;
	padding:0;
	border:1px solid #0e0760;
	border-width:2px 0;
	list-style:none;
}
#nav li{
	padding:0;
	float:left;
	position: relative;
	left: -20px;
}
#nav li a {
	display: block;
	color:#006;
	font-size:12px;
	line-height:21px;
	font-weight:bold;
	text-decoration: none;
	position: relative;
	width: 200px;
	height: 55px;
	padding: 10px 0 0 20px;
}
#nav li a span {
	color: #fff;
}
#nav li a strong {
	font-size: 15px;
	color: #006;
	display: block;
	padding: 0;
}
#nav li a:hover {
	text-decoration: none;
	background:url(../images/blue-arrow.gif) no-repeat 0px 35px;
}
body.creative #nav li.creative a,
body.cost #nav li.cost a {
	text-decoration: none;
	background:url(../images/arrow.gif) no-repeat 0px 35px;
}
body.creative #nav li.creative a strong,
body.creative #nav li.creative a:hover  strong, 
body.cost #nav li.cost a strong,
body.cost #nav li.cost a:hover  strong {
	color: #fff;
}

/* Latest Link */
#latest{
	position: absolute;
	top: 75px;
	left: 8px;
	font-weight:bold;
	margin:0;
	padding:0;
	overflow:hidden;
	float:left;
}
#latest a {
	display: block;
	color:#006;
	font-size:12px;
	line-height:21px;
	font-weight:bold;
	text-decoration: none;
	position: relative;
	width: 200px;
	padding: 10px 0 0 20px;
}
#latest a span {
	color: #fff;
}
#latest a strong {
	font-size: 15px;
	color: #006;
	display: block;
	padding: 0;
}
#latest a:hover {
	text-decoration: none;
	background:url(../images/blue-arrow.gif) no-repeat 0px 13px;
}
body.latest #latest a {
	text-decoration: none;
	background:url(../images/arrow.gif) no-repeat 0px 13px;

}

/* Sidebar Navigation */
#sidebar {
	width:241px;
	float:left;
}
#sidebar ul {
	margin:0;
	padding:0;
	list-style:none;
	font:bold 1.3em/1.9em Gotham, Futura, Helvetica, Arial, sans-serif;
	width: 225px;
}
#sidebar ul li a{
	padding:0 0 0 19px;
	margin:0;
	display:block;
}
#sidebar ul li a span{
	color:#006;
}
#sidebar ul li a strong{
	color:#000;
}
#sidebar ul li a:hover {
	background:url(../images/blue-arrow.gif) no-repeat 0 50%;
	text-decoration:none;
}
body.work #sidebar ul li.work a, 
body.partners #sidebar ul li.partners a,
body.clients #sidebar ul li.clients a,
body.contact #sidebar ul li.contact a {
	background:url(../images/arrow.gif) no-repeat 0 50%;
	text-decoration:none;
}
body.work #sidebar ul li.work a span,
body.partners #sidebar ul li.partners a span,
body.clients #sidebar ul li.clients a span,
body.contact #sidebar ul li.contact a span {
	color: #fff;
}


/* Work Navigation */
.content-nav {
	margin: 0 0 20px 0;
	padding: 0 0 30px 0;
	width: 100%;
	list-style: none;
	font: bold 1.3em/1.2em Gotham, Futura, Helvetica, Arial, sans-serif;
	float: left;
	border-bottom: 2px solid #006;
	position: relative;
}
.content-nav li {
	float: left;
	padding: 2px 10px 2px 0;
}
.content-nav li ul li {
	float: left;
	padding: 2px 3px 2px 0;
}
.content-nav li a {
	color: #006;
}
.content-nav li a:hover,
.content-nav li.active a {
	color: #fff;
	text-decoration: none;
}
.content-nav li a img {
	filter: alpha(opacity=50);
	opacity: 0.5;
}
.content-nav li a:hover img {
	filter: alpha(opacity=100);
	opacity: 1;
}
.content-nav li ul li a,
.content-nav li.active ul li a,
body.ads .content-nav li.ads ul li a,
body.tv .content-nav li.tv ul li a,
body.design .content-nav li.design ul li a,
body.radio .content-nav li.radio ul li a,
body.web .content-nav li.web ul li a {
	display: block;
	height: 15px;
	width: 15px;
	padding: 0px;
	border: 1px solid #f60;
	background: #f60;
}
.content-nav li ul li a:hover,
.content-nav li ul li.active a,
body.ads .content-nav li.ads ul li a:hover,
body.tv .content-nav li.tv ul li a:hover,
body.design .content-nav li.design ul li a:hover,
body.radio .content-nav li.radio ul li a:hover,
body.web .content-nav li.web ul li a:hover {
	border: 1px solid #fff;
	background: #fff;
	text-decoration:none;
}
.content-nav li ul {
	display: none;
}
body.ads .content-nav li.ads ul,
body.tv .content-nav li.tv ul,
body.design .content-nav li.design ul,
body.radio .content-nav li.radio ul,
body.web .content-nav li.web ul {
	display: block;
	position: absolute;
	top: 20px;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 1em Gotham, Futura, Helvetica, Arial, sans-serif;
	float: left;
}
body.ads .content-nav li.ads a,
body.tv .content-nav li.tv a,
body.design .content-nav li.design a,
body.radio .content-nav li.radio a,
body.web .content-nav li.web a {
	color: #fff;
}
body.one .content-nav li ul li.one a,
body.two .content-nav li ul li.two a,
body.three .content-nav li ul li.three a,
body.four .content-nav li ul li.four a,
body.five .content-nav li ul li.five a,
body.six .content-nav li ul li.six a,
body.seven .content-nav li ul li.seven a,
body.eight .content-nav li ul li.eight a,
body.nine .content-nav li ul li.nine a,
body.ten .content-nav li ul li.ten a,
body.eleven .content-nav li ul li.eleven a,
body.twelve .content-nav li ul li.twelve a,
body.thirteen .content-nav li ul li.thirteen a,
body.fourteen .content-nav li ul li.fourteen a,
body.fifteen .content-nav li ul li.fifteen a,
body.sixteen .content-nav li ul li.sixteen a,
body.seventeen .content-nav li ul li.seventeen a,
body.eighteen .content-nav li ul li.eighteen a,
body.nineteen .content-nav li ul li.nineteen a,
body.twenty .content-nav li ul li.twenty a {
	border: 1px solid #fff;
}
body.one .content-nav li ul li.one a img,
body.two .content-nav li ul li.two a img,
body.three .content-nav li ul li.three a img,
body.four .content-nav li ul li.four a img,
body.five .content-nav li ul li.five a img,
body.six .content-nav li ul li.six a img,
body.seven .content-nav li ul li.seven a img,
body.eight .content-nav li ul li.eight a img,
body.nine .content-nav li ul li.nine a img,
body.ten .content-nav li ul li.ten a img,
body.eleven .content-nav li ul li.eleven a img,
body.twelve .content-nav li ul li.twelve a img,
body.thirteen .content-nav li ul li.thirteen a img,
body.fourteen .content-nav li ul li.fourteen a img,
body.fifteen .content-nav li ul li.fifteen a img,
body.sixteen .content-nav li ul li.sixteen a img,
body.seventeen .content-nav li ul li.seventeen a img,
body.eighteen .content-nav li ul li.eighteen a img,
body.nineteen .content-nav li ul li.nineteen a img,
body.twenty .content-nav li ul li.twenty a img {
	filter: alpha(opacity=100);
	opacity: 1;
}

#latest_nav {
	width: 100%;
	border-bottom: 2px solid #006;
	list-style: none;
	margin: -10px 0 15px 0;
	padding: 0 0 15px 0;
	float: left;
}
#latest_nav li {
	padding: 0;
	margin: 0;
	float: left;
}
#latest_nav li#latest_previous a, #latest_nav li#latest_next a {
	display: block;
	width: 11px;
	height: 11px;
	text-decoration: none;
	text-indent: -9000px;
	color: transparent;
}
#latest_nav li#latest_previous a {
	padding: 0 5px 0 0;
	background: transparent url(../images/blue-arrow-left.gif) no-repeat 0px 0px;
	border-right: 1px solid #006;
}
#latest_nav li#latest_previous a:hover {
	background: transparent url(../images/arrow-left.gif) no-repeat 0px 0px;
}
#latest_nav li#latest_next a {
	padding: 0 0 0 5px;
	background: transparent url(../images/blue-arrow.gif) no-repeat 5px 0px;
}
#latest_nav li#latest_next a:hover {
	background: transparent url(../images/arrow.gif) no-repeat 5px 0px;
}

/* Work */
#featureimage, #featureaudio {
	display: block;
	width: 260px;
	float: left;
	margin: 0 30px 0 0;
	padding: 0;
	text-align: right;
}
#featureimage.latest {
	padding-right: 15px;
}
#featureimage.latest img {
	padding-bottom: 15px;
}
#featureimage img {
	/*border: 1px solid #006;*/
}
#featureimage a {
	display: block;
	color: #006;
	font: 1.2em Gotham, Futura, Helvetica, Arial, sans-serif;
	padding: 5px 0;
}
#featureimage a:hover {
	color: #fff;
	text-decoration: underline;
}
#featuremovie {
	display: block;
	width: 460px;
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
}
#featureaudio {
	height: 300px;
}

/* Thumbnail Gallery Elements */
h3.work {
	margin: 0;
	padding: 0 0 10px 0;
	font: bold 1.3em/1.2em Gotham, Futura, Helvetica, Arial, sans-serif;
	color: #fff;
}
h3.latest {
	font: bold 1.3em/1.2em Gotham, Futura, Helvetica, Arial, sans-serif;
	color: #fff;
}
h4.work {
	margin: 0;
	padding: 5px 0 5px 0;
	font: 1.2em Gotham, Futura, Helvetica, Arial, sans-serif;
	color: #006;
}
ul.gallery {
	float: left;
	list-style-type: none;
	padding: 0;
	margin: 0 0 15px 0;
	width: 180px;
}
ul.gallery.long {
	width: auto;
	margin-right: 20px;
}
ul.gallery li {
	float: left;
	margin: 0 3px 3px 0;
	padding: 0;
	border: 0px none;
	position: relative;
}
ul.gallery a {
	display: block;
	height: 15px;
	width: 15px;
	border: 1px solid #f60;
}
ul.gallery a:hover,
ul.gallery li.active a {
	border: 1px solid #fff;
}	
ul.gallery img {
	/*border: 1px solid #006;*/
	margin: 0;
	padding: 0;
	filter: alpha(opacity=50);
	opacity: 0.5;
}
ul.gallery li a:hover img, ul.gallery li.active a img {
	filter: alpha(opacity=100);
	opacity: 1;
}


/* Clients Page Styles */
h3.clients {
	padding: 20px 0;
	border-bottom: 2px solid #000066;
}
#clients_area {
	width: 100%;
	padding: 20px 0;
	position: relative;
}
#clients_column_1 {
	float: left;
	position: relative;
	display: block;
}
#clients_column_2 {
	float: right;
	position: relative;
	display: block;
}
dl.client_list {
	display: block;
	margin: 0;
	padding: 0 0 20px 0; 
	width: 225px;
}
dl.client_list dt {
	font-size: 1.5em;
	color: #fff;
	padding: 3px 0 3px 0;
}
dl.client_list dd {
	font-size: 1.2em;
	color: #006;
	padding: 3px 0 3px 0;
}