/*
Author: BHW1
Project: BHW1.com
Description: BHW1.com main stylesheet
Updated: Thu Apr 3 09:23:17 PDT 2008
*/

/* COLOR PALLETTE
-----------------------
header orange:	#e7911a
text gray: 		rgb(204,204,204)
*/

/* =IMPORTS
-----------------------*/
@import url(reset.css);			/* Browser reset styling (clear canvas) */ 
@import url(typography.css);	/* Typography only styling */
@import url(layout.css);		/* Layout only styling */
@import url(glider.css); 		/* Styles for "Our Work" glider widget */
@import url(ourpeople.css); 	/* Spritemap for "Our People" page */
@import url(lightbox.css); 		/* Stylesheet for lightbox */

/* =LIGHTBOX - Popups for "Our People" 
-----------------------*/
#lightbox-container {
	padding: 1.5em;
}

/* =INLINELEMENTS - Links, images, etc. 
-----------------------*/
/* general link style*/
a:link, 
a:visited, 
a:active {
	color: grey; 
	text-decoration: none;


}
a:hover {
	color: #e7911a; 

}

a:hover, a:active, a:focus, a:active {
    outline: none;
    -moz-outline-style: none;
}
/* =MAIN-NAV Links
-----------------------*/
#main-nav-container li {
	display: inline;
	margin-left: 15px;
	text-transform: uppercase;
}

#intro-nav-container li {
	display: inline;
	margin-left: 15px;
	text-transform: uppercase; 
}

.vertical-separator {
	padding: 0px 0px 0px 15px;
	border-left: 1px solid black;	
}
.separator-fix
{
	padding:10px 0px 10px 16px;
}

#main-nav-container li a:link, 
#main-nav-container li a:visited,
#main-nav-container li a:active { 
	color: black;
}

#intro-nav-container li a:link, 
#intro-nav-container li a:visited,
#intro-nav-container li a:active { 
	color:#e7911a;
	display:block;
	width:110px;
	height:20px;
	float:left;

	
	}

#intro-nav-container li.play a {
		background: transparent url(../images/arrows.jpg) no-repeat top left;
		
	}
	

#intro-nav-container li.skip a {
		background: transparent url(../images/arrows.jpg) no-repeat bottom left;
	}
	


#main-nav-container li a:hover {
	color:#e7911a;
}

#intro-nav-container li.play a:hover {
	color:#999;
	background: transparent url(../images/arrows.jpg) no-repeat top right; 
}

#intro-nav-container li.skip a:hover {
	color:#999;
	background: transparent url(../images/arrows.jpg) no-repeat bottom right; 
}


/* clarity from chaos link */
a.clarity-from-chaos-nav:link, 
a.clarity-from-chaos-nav:visited, 
a.clarity-from-chaos-nav:active,
li.clarity-from-chaos-nav
{ 
	padding: 8px 20px 8px 20px;
	letter-spacing: .125em;
	text-transform: uppercase;
	font-weight: bold;
}
.clarity-from-chaos-nav-fix
{
	margin-right:-20px;
}
a.clarity-from-chaos-nav:hover {
	color:#e7911a; 
	background: transparent url(../images/triangle_off.png) left center no-repeat; 
}


/*COPY*/
#copy-container h2, 
#portfolio-container h2{ 
	margin: 30px 0 0 50px;
	color:#e7911a; 
	text-transform: uppercase;
	/* [] can't shorthand font properties, why? */
	font-size: 1em;
	line-height: 1.5em;
}

#our-people-container h2
{
	padding-top:30px;
	margin: 0px 0 5px 50px;
	color:#e7911a; 
	text-transform: uppercase;
	/* [] can't shorthand font properties, why? */
	font-size: 1em;
	line-height: 1.5em;
}
#our-people-container a
{
	color:#888888;
}
#our-people-container a:hover
{
	color:#e7911a;
}
#social-copy-container h2{
	margin:25px 0 0 34px;
	color:#e7911a; 
	text-transform: uppercase;
	font-size: 1em;
	line-height: 1.5em;
}



#lightbox-container h2 {
	text-transform: none; /*override above */
	margin:0;
	color:#e7911a; 
	text-transform: uppercase;
	/* [] can't shorthand font properties, why? */
	font-size: 1em;
	line-height: 1.5em;
}

.lightbox-list {
	list-style-position:inside;
	margin: 10px 50px;
}


#copy-container p, 
#portfolio-container p,
#our-people-container p{
	margin: 10px 50px 10px 50px;
	width: auto;
	color: #000;
	/* [] can't shorthand font properties, why? */
	font-size: 1em;
	line-height: 1.5em;
}

#lightbox-container p {
	font-size: 1em;
	line-height: 1.6em;
	margin:10px 0 15px;
	}


.collaborators-li
{
	margin-left:32px;
}
#copy-container h2 a:link, 
#copy-container h2 a:visited, 
#copy-container h2 a:active {
	color: #e7911a; 
	text-decoration: none;
	}
	
#copy-container h2 a:hover {
	color:grey; 
	}

/*sign-up form*/

#mc_embed_signup {
	position:relative;
	top:118px;
	left:265px;
	margin: 0 auto;
	width:500px;
	height:460px;
	background: transparent url(../images/portfolio_bckgrnd.jpg) no-repeat scroll center;
	}
	
#mc_embed_signup a{
	display:block;
	margin:0 0 20px 2px;
	}

	fieldset {
		margin:1em 0;
		padding:1em;
		height:460px;
		width:400px;
		border:1px solid #ccc;
		border:0px;
		padding:10px 0 0 50px;
		}
	
	legend {
		color:#E7911A;
		font-size:1em;
		line-height:1.5em;
		text-transform:uppercase;
		padding-top:20px;
		}

			
		.indicate-required{
			font-weight:bold;
			font-size:85%;
			text-align:right;
			}
			
			
		#mce-EMAIL, #mce-FNAME, #mce-LNAME {
			display:block;
			width:200px;
			}
			
		.mc-field-group {
			padding:.75em;
			border-top:1px solid #CCC;
			padding:.75em .75em .5em .75em;
			}
			
			
		.radio-field-group {
			}
			
				
			.input-group {
				padding:.5em;
				}
	
				
				
				.input-group ul li {
					padding:.2em;
					}
				
		.mce_inline_error {
			color:#E7911A;
			}	
			
		input.mce_inline_error {
			color:#000;
			}	
			
			
		#mce-error-response {
			
			}
			
		.input-group {
			padding-bottom:0;
			}
	
		ul {
			list-style-type:none;
			}
		
		
		#mce-EMAILTYPE-0, #mce-EMAILTYPE-1, #mce-EMAILTYPE-2{
			width:23px;
			}
			
			
		.strong{
			font-weight:bold;
			}
			
			#mce-success-response{
				padding-bottom:.5em;
				}


			#mc-embedded-subscribe 
			{
				border:1px solid #CCCCCC;
				color:#666;
				height:25px;
				margin:0 0 0 330px;
				padding:3px 8px 6px;
				text-transform:uppercase;
			}
			
				#mc-embedded-subscribe:hover
			{
				border:1px solid #CCCCCC;
				color:#333;
				height:25px;
				margin:0 0 0 330px;
				padding:3px 8px 6px;
				text-transform:uppercase;
			}
			
			
				#digs img {
				margin-right:6px;
			}


				#topLinks {
				/*background-image: url(../images/top-links.gif);*/

				width:229px; /*327px;*/
				height: 47px; /*491px;*/
			    position: relative;

			}
			#topLinks li {
				list-style: none;

				/*top: 0;*/
			}
			#topLinks a {
				display: block;
				position: absolute; 
				background-color:#fff;
				background-image: url(../images/top-links.jpg);
				background-position:top left;
				background-repeat:no-repeat;
				color:#888585;
				text-transform:uppercase;
				font-family:arial;
				font-size:10px;
				text-align:
			}



			/*#media a:hover, #media a:active, 
			#facebook a:hover, #facebook a:active,
			#newsroom a:hover, #newsroom a:active{
				background-image:url(../images/top-links.gif);
				background-repeat:no-repeat;
			}*/

			.digivox{
				font-size:16px;}

			#media a:link, #media a:visited {
				color:#592F11;
				font-size:10px;
				font-weight:bold;
				height:42px;
				left:4px;
				padding-left:2px;
				padding-top:2px;
				text-align:center;
				width:126px;
				}

			#media a:hover, #media a:active{
				background-position:0 -46px
			}

			#facebook a:link, #facebook a:visited{
				height:44px;
				top:0;
				left:132px;
				width:54px;
				background-position: -131px 0;
				text-indent:-9999px;
				}

			#facebook a:hover, #facebook a:active {
				background-position: -131px -46px;
				text-indent:0;
				padding-top:44px;
			}

			#newsroom a:link, #newsroom a:visited{
				height:44px;
				top:0;
				left:178px;
				width:54px;
				background-position: -178px 0;
				text-indent:-9999px;
				}

			#newsroom a:hover, #newsroom a:active {
				background-position: -178px -46px;
				text-indent:0;
				padding-top:44px;
			}


/*			#twitter a:link, #twitter a:visited {
				background-position:-236px 0;
				height:44px;
				left:234px;
				text-indent:-9999px;
				top:0;
				width:54px;
			}

			#twitter a:hover, #twitter a:active {
				background-position:-236px -46px;
				padding-top:44px;
				text-indent:0;
			}*/
			#seo-copy {
				bottom:-50px;
				color:#D5D5D5;
				left:120px;
				position:absolute;
				text-align:justify;
				text-transform:uppercase;
			/*	width:711px;
				padding-right:100px;
				background:url(../images/bbb.gif) no-repeat top right;*/
			}

			#seo-copy div{
				float:left;
width:590px;
				}
			#seo-copy a img{
				float:right;
margin-left:20px;}


			#seo-copy .normal-link:link, #seo-copy .normal-link:visited{
				color:#D5D5D5;
				}

			#seo-copy .normal-link:hover, #seo-copy .normal-link:active{
				color:#999999;
				}


			#copy-container .normal-link:link, #copy-container .normal-link:visited, #social-copy-container .normal-link:link, #social-copy-container .normal-link:visited{
				color:#000000;
				}

			#copy-container .normal-link:hover, #copy-container .normal-link:active, #social-copy-container .normal-link:hover, #social-copy-container .normal-link:active{
				color:#999999;
				}

/* ============== */
/* = jquery nav = */
/* ============== */

#nav {
	position:absolute;
	left:100px;
	top:320px;
	margin:0; 
	padding:0; 
	list-style:none;
}	

	/* make the LI display inline */
	/* it's position relative so that position absolute */
	/* can be used in submenu */
	#nav li {
		float:left; 
		display:block; 
		z-index:500; 
		margin:0;
		padding-bottom:2px;
	}
	
	/* this is the parent menu */
	#nav li a {
		display:block; 
		padding:8px 12px 0 12px; 
		font-weight:700;  
		height:23px; 
		text-decoration:none; 
		text-align:center; 
		color:#333;
	}

	#nav li .social-media-link
	{
		color:#e7911a;
		font-weight:normal;
		margin-top:-8px;
	}
	#nav li .social-media-link:hover
	{
		color:#999;
	}
	#nav li a:hover {
		color:#e7911a;
	}

	/* you can make a different style for default selected value */
	#nav a.selected {
		color:#f00;
	}

	/* submenu, it's hidden by default */
	#nav ul {
		position:absolute; 
		left:275px; 
		top:20px;
		width:500px;
		display:none; 
		margin:0 0 0 -1px; 
		padding:5px; 
		list-style:none;
	}
	
	#nav ul li {
		padding-top:10px;
		font-size:1em;
	}
	
	/* display block will make the link fill the whole area of LI */
	#nav ul {
		display:block;  
		height:15px;
		padding: 8px 25px 30px 25px; 
		color:#e7911a;
	}
	#nav ul li:hover{
		color:#999;
	}

	/* fix ie6 small issue */
	/* we should always avoid using hack like this */
	/* should put it into separate file : ) */
	*html #nav ul {
		margin:0 0 0 -2px;
	}
	.nav-list-item
	{
	font-weight: lighter !important;
	text-transform: uppercase;
	font-size:1.1em;
	}
#content
{
	margin:90px 0px 0px 180px;
	float:left;
	width:600px;
	min-height:400px;
	background-color:green;
}
.thumb
{
	width:150px;
	height:100px;
	background-color:#333;
	display:inline;
}
/* ============================================================== */
/* = funtionality for appearing and disappearing portfolio divs = */
/* ============================================================== */


.appear_print, .appear_tv, .appear_radio, .appear_interactive, .appear_logo, .appear_social
{
	padding:10px;
	cursor:pointer;
}

#print, #tv, #radio, #interactive, #logo, #social
{
	width:740px;
	height:500px;
	position:absolute;
	left:120px;
	top:100px;
	display:none;	
}
.client_logo
{
	float:left;
	width:105px;
	height:72px;
	margin:0 43px 40px 0px;
	padding:0px;
	background-color:#FFF;
	cursor:pointer;
}
.client_logo_web1, .client_logo_web2, .client_logo_web3, .client_logo_web4, .client_logo_web5, .client_logo_web6, 
.client_logo_web7, .client_logo_web8, .client_logo_web9, .client_logo_web10, .client_logo_web11, .client_logo_web12
{
	float:left;
	width:105px;
	height:72px;
	margin:0 43px 40px 0px;
	padding:0px;
	background-color:#FFF;
	cursor:pointer;
}
.web-link-1, .web-link-2, .web-link-3, .web-link-4, .web-link-5, .web-link-6, .web-link-7, .web-link-8, .web-link-9, .web-link-10, .web-link-11, .web-link-12
{
	display:none;
	float:left;
	position:relative;
	z-index:1;
	left:-25px;
	top:-15px;
	background-color:#FFF;
	padding:10px;
	width:200px;
}
.web-link-1 a, .web-link-2 a, .web-link-3 a, .web-link-4 a, .web-link-5 a, .web-link-6 a, .web-link-7 a, .web-link-8 a, .web-link-9 a, .web-link-10 a, .web-link-11 a, .web-link-12 a
{
	color: #e7911a; 
}
.web-link-1 a:hover, .web-link-2 a:hover, .web-link-3 a:hover, .web-link-4 a:hover, .web-link-5 a:hover, .web-link-6 a:hover, .web-link-7 a:hover, .web-link-8 a:hover, .web-link-9 a:hover, .web-link-10 a:hover, .web-link-11 a:hover, .web-link-12 a:hover
{
	color:#333;
}
#print ul, #tv ul, #radio ul, #interactive ul, #logo ul, #social ul
{
	padding:0px;
	margin:0px;
}
#tv-aow-1, #tv-rps-1, #tv-quest-1, #tv-george-gee-1, #tv-downtown-spokane-1, #tv-coaches-vs-cancer-1, #tv-whitworth-1, #tv-wtb-1, #tv-cvc-1, #tv-symphony-1
{
	width:105px;
	height:73px;
	position:absolute;
	left:0px;
	top:220px;
	display:none;
	background-color:#333;
}
#tv-aow-2, #tv-downtown-spokane-2, #tv-rps-2, #tv-downtown-spokane-2, #tv-whitworth-2
{
	width:105px;
	height:73px;
	position:absolute;
	left:295px;
	top:220px;
	display:none;
	background-color:#333;
}

#tv-rps-3, #tv-downtown-spokane-3, #tv-whitworth-3{
	width:105px;
	height:73px;
	position:absolute;
	left:0px;
	top:386px;
	display:none;
	background-color:#333;
	}
	
#tv-rps-4, #tv-whitworth-4{
	width:105px;
	height:73px;
	position:absolute;
	left:295px;
	top:386px;
	display:none;
	background-color:#333;
	}