/*-------------------------

Author: Andrew Sherman
Company: Visual Blaze 
Client: BlastMedia
Date: 06/29/09

-------------------------*/

/*------------------------
TOC
=includes
=main styles
	=main
		=content container
		=nav
		=contactform+quotes col
			=quotebox
			=ctaAddress -> only present on contactAlt.php
	=socialbar
	=footer
		=blogFooter + marketplaceFooter
		=tweetFooter
		=tweet+blog shared styles
		=spotLightClient[home] specific
	=breadcrumb
=clearfix
=page specific styling
	=content styling [general]
	=home page video
	=team page styling
		=group boxes
		=thumb defaults
=global/general styles
-------------------------*/


/*=includes*/
@import url(reset.css);
@import url(typography.css);


/*----------
=main styles
----------*/

html, body, #wrapper {/*used for positioning to accomodate sticky footer*/
	height: 100%;
}

body {
	font-family: arial;
	font-size: 12px;
	/*req. for auto marg center technique*/
	text-align: center;
	/*req. for centering..*/
	min-width: 800px;
	/*background: #E4E5E6 url(../images/bodyBgTile.png) repeat;*//*[greyTheme]*/
}

body > div#wrapper {/*used for positioning to accomodate sticky footer*/
	height: auto; 
	min-height: 100%;
}

div#wrapper {
	position: relative;
	width: 800px;
	/*req. centering..*/
	margin: 0 auto;
	/*req. centering..*/
	text-align: left;
	/*background: #ff0000;*/
}

/*-----------------------------------------------------------------
=main content space -> used to enable sticky footer positioning
------------------------------------------------------------------*/

div#main {
	min-height: 490px;/*stops main content area being smaller then dongle image bg + fixes float issue in ff/chrome*/
	padding-bottom: 280px;/* must be same height as the footer */
	background: url(../images/mainBg2.png) no-repeat 150px top;
} 


/*---------------
=content container
----------------*/

div#content {
	display: inline;
	width: 300px;
	/*margin-top: 75px;*//*home margin-top*/
	margin-top: 150px;
	margin-left: 244px;
	font-size: 12px;
	/*background: #333;*/
	float: left;
}
/*home + team specific content layout*/
#home div#content {
	width: 550px;
	margin-top: 105px;
}
#team div#content {
	width: 560px;
	margin-top: 116px;
}



/*------
=nav
------*/

ul#nav {
	display: inline;
	/*width: 194px;*/
	width: 190px;
	height: 295px;
	margin-left: -544px;/*300+244*/
	margin-top: 140px;
	list-style: none;
	font-size: 15px;
	text-align: right;
	float: left;
	/*background: #00A6D3;*/
	}
	ul#nav li {
		margin-top: 16px;
		letter-spacing: 5px;
		}
		ul#nav li a {
			color: #000;
			text-decoration: none;
		}
		ul#nav li a:hover {
			/*color: #fff;*//*[greyTheme]*/
			color: #DDDDDD;
		}
		ul#nav li a.active {
			color: #04A2DD;
			
	}
	/*bottom links*/
	ul#nav li#navContactLink {
		margin-top: 30px;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #999;
	}
	ul#nav li#navPhoneNo {
		margin-top: 2px;
		letter-spacing: 2px;
		font-weight: bold;
	}
	ul#nav li#navEmailLink {
		margin-top: -2px;
		font-size: 11px;
		font-family: "arial black",arial;
		letter-spacing: 1px;
		text-transform: uppercase;
		}
		ul#nav li#navEmailLink a {
			color: #04A2DD;
			text-decoration: underline;
		}
		ul#nav li#navEmailLink a:hover {
			text-decoration: none;
}

/*home + team specific nav styles*/
#home ul#nav  {
	margin-left: -794px;/*550+244*/
}
#team ul#nav {
	margin-left: -804px;/*560+244*/
}
		
	
/*-----------------------------------------------------
=contactform+quotes col
- contactForm also includes styles for altContact DIV
------------------------------------------------------*/

div#CTACol {
	position: relative;
	display: inline;
	width: 250px;
	/*height: 200px;*/
	margin-top: 150px;
	margin-right: -750px;
	/*background: #ff0000;*/
	float: left;
}
div#contactFormDiv {
	position: absolute;
	z-index: 500;/*position above quote box*/
	width: 222px;
	height: 331px;
	margin-left: 10px;
	overflow: hidden;
	}
	div#contactFormDiv p#contactHeader {
		position: absolute;
		z-index: 1000;/*needed to make visible in ie6*/
		width: 207px;
		height: 38px;
		left: 7px;
		background: url(../images/contactFormHeader2.png) no-repeat top left;
		}
		div#contactFormDiv p#contactHeader a {
			display: block;
			padding-top: 6px;
			letter-spacing: 6px;
			font-size: 15px;
			text-align: center;
			text-transform: uppercase;	
			text-decoration: none;
		}
		div#contactFormDiv p#contactHeader a:hover {
			color: #DDD;
	}
	div#contactFormDiv form {
		position: absolute;
		/*width: 202px;*/
		width: 222px;
		height: 293px;/*331-38*/
		margin-top: -320px;/*SET TO CREATE ANIMATION in core.js*/
		padding-top: 38px;
		background:  url(../images/contactFormBg2.png) no-repeat bottom left;
		/*float: left;*//*can't use float as caused issues with ie6 and header showing*/
		}
		div#contactFormDiv form label, div#contactFormDivAlt form label{
			display: block;
			margin-left: 20px;
			font-size: 11px;
			text-transform: uppercase;
			color: #888889;
			}
			div#contactFormDiv form label span, div#contactFormDivAlt form label span {
				font-size: 12px;
				color: #ff0000;
			}
			div#contactFormDiv form label span.formReqMsg {/*validation err msg*/
				display: none;
				margin-left: 90px;
				font-size: 10px;
				text-transform: none;
		}
		div#contactFormDiv form input, div#contactFormDiv form textarea, div#contactFormDivAlt form input, div#contactFormDivAlt form textarea {
			width: 174px;
			margin-left: 20px;
			margin-bottom: 3px;
			border: 1px solid #C9C9C9;
			background: #F3F6F8;
		}
		div#contactFormDiv form textarea, div#contactFormDivAlt form input, div#contactFormDiv form textarea {
			font-family: arial;
			font-size: 11px;
		}
		div#contactFormDiv form input#contactSubmitBtn, div#contactFormDivAlt form input#contactSubmitBtn {
			width: 59px;
			height: 18px;
			margin-right: 28px;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			cursor: pointer;
			border: none;
			font-weight: bold;
			color: #fff;
			background: #04A2DD;
			float: right;
			}
			div#contactFormDiv form input#contactSubmitBtn.disable {/*disabled button style -> added with js*/
				background: #999;
		}
		div#contactFormDivAlt form input#contactSubmitBtn {/*alt styles*/
			margin-right: 110px;
		}
		div#contactFormDiv form input#hP, div#contactFormDivAlt form input#hP  {
			display: none;
		}
		div#contactFormDiv form a#formCloseBtn {
			/*display: block;*/
			/*width: 59px;
			height: 15px;/*18-3*/
			/*margin-left: 25px;
			padding-top: 3px;*/
			/*-moz-border-radius: 20px;
			-webkit-border-radius: 20px;*/
			margin-top: 5px;
			margin-left: 20px;
			font-weight: bold;
			font-size: 11px;
			text-transform: uppercase;
			/*text-decoration: none;*/
			/*text-align: center;*/
			color: #999;
			/*background: #FF0000;*/
			float: left;
		}
		div#contactFormDiv form p#contactResponse {
			position: absolute;
			display: none;
			width: 126px;
			height: 59px;
			bottom: 52px;
			right: 40px;
			background: url(../images/contactFormSendMsgBg2.png) no-repeat top left;
			}
			div#contactFormDiv form p#contactResponse span {
				display: block;
				margin-top: 15px;
				text-align: center;
				font-weight: bold;
				color: #E2E2E2;
			
}
/*alt form error message*/
div#contactFormDivAlt p.altErrorMsg {
	margin-left: 25px;
	color: #ff0000;
}


/*=quotebox*/
div#quotesBox {
	position: absolute;
	width: 217px;
	/*height: 88px;*/
	margin-top: 65px;
	margin-left: 10px;
	/*background: url(../images/quotePH.png) no-repeat top left;*/

}

/*=ctaAddress*/
div#ctaAddress {
	}
	div#ctaAddress h2 {
		margin-bottom: 5px;
		margin-top: 5px;
		color: #DC712F;
	}
	div#ctaAddress p {
		color: #444;
		font-size: 13px;
	}

/*---------
=socialbar 
---------*/

div#socialBar {
	position: absolute;
	top: 0;
	right:0;
	font-size: 9px;
	color: #797f81;
	/*background: #66EF26;*/
	}
	div#socialBar p {
		display: inline;
		margin-top: 7px;
		float: left;
	}
	div#socialBar ul {
		display: inline
		list-style: none;
		margin-left: 10px;
		float: left;
		}
		div#socialBar ul li {
			display: inline;
			float: left;
			}
			div#socialBar ul li a {
				display: block;
				width: 20px;
				height: 26px;
				text-indent: -9999px;
				overflow: hidden;
			}
			/*images*/
			div#socialBar ul li a.facebook {
				background: url(../images/socialMediaBtns/facebookBtn.png) no-repeat top left;
			}
			div#socialBar ul li a.twitter {
				background: url(../images/socialMediaBtns/twitterBtn.png) no-repeat top left;
			}
			div#socialBar ul li a.googleBM {
				background: url(../images/socialMediaBtns/googleBtn.png) no-repeat top left;
			}
			div#socialBar ul li a.delicious {
				background: url(../images/socialMediaBtns/delicBtn.png) no-repeat top left;
			}
			div#socialBar ul li a.digg {
				background: url(../images/socialMediaBtns/diggBtn.png) no-repeat top left;
			}
			div#socialBar ul li a.rss {
				background: url(../images/socialMediaBtns/rssBtn.png) no-repeat top left;
}

			


/*-----
=footer
------*/

#footer {
	/*width: 800px;*/
	/*min-height: 285px;*/
	/*margin: 0 auto;
	text-align: left;*/
	
	position: relative;
	margin-top: -280px; /* negative value of footer height */
	height: 280px;
	text-align: left;
	clear:both;
	/*background: #999;*/
	background: #fff;
	}
	#footer div#footerContent {
		/*width: 800px;*/
		width: 100%;
		height: 100%;
		margin: 0 auto;
		/*background: #666;*/
		/*background: #F3F6F8;*//*[greyTheme]*/
		}
		#footer div#footerContent div#footerBlogFeed, #footer div#footerContent div#footerTweetFeed, div#footerMarketChat  {
			display: inline;
			width: 49%;/*!!not 50 because ie breaks and puts tweet col on new line*/
			height: 100%;
			/*border-right: 1px solid #E4E5E6;*/
			float: left;
		}
		
		/*=blogFooter + marketplaceFooter*/
		#footer div#footerContent div#footerBlogFeed {
			background: #FFF url(../images/footerDividerBg.png) repeat-y top right;
			}
			#footer div#footerContent div#footerBlogFeed h3 {
				text-align: right;
				margin-right: 20px;
			}
			 #footer div#footerContent div#footerMarketChat h3 {
				text-align: left;
				margin-left: 20px;
			}
			#footer div#footerContent div#footerBlogFeed ul, #footer div#footerContent div#footerMarketChat ul, #footer div#footerContent div#footerBlogFeed div {
				display: inline;
				width: 315px;
				margin: 27px 20px 0 0;
				list-style: none;
				list-style-position: outside; /*fixes ie indent issue*/
				float: right;
			}
			 #footer div#footerContent div#footerMarketChat ul {/*align marketplace chatter right not left*/
					float: left;
					margin: 27px 0 0 20px;
				}
				#footer div#footerContent div#footerBlogFeed ul li, #footer div#footerContent div#footerMarketChat ul li {
					margin-bottom: 10px;
					}
					#footer div#footerContent div#footerBlogFeed ul li h4, #footer div#footerContent div#footerMarketChat ul li h4  {
						margin-bottom: 2px;
						color: #04A2DD;
						font-size: 12px;
						text-transform: uppercase; 
						}
						#footer div#footerContent div#footerBlogFeed ul li h4 a, #footer div#footerContent div#footerMarketChat ul li h4 a {
							text-decoration: none;
						}
						#footer div#footerContent div#footerBlogFeed ul li h4 a:hover, #footer div#footerContent div#footerMarketChat ul li h4 a:hover {
							text-decoration: underline;
					}
					#footer div#footerContent div#footerBlogFeed ul li p, #footer div#footerContent div#footerMarketChat ul li p {
						margin: 0;
						padding: 0;
						text-align: left;
					}
					#footer div#footerContent div#footerBlogFeed ul li p a, #footer div#footerContent div#footerMarketChat ul li p a {
						display: block;
		}
			
			
		/*=tweetFooter*/	
		#footer div#footerContent div#footerTweetFeed {
			/*background: #F3F6F8;*//*[greyTheme]*/
			}
			#footer div#footerContent div#footerTweetFeed h3 {
				text-align: left;
				margin-left: 20px;
			}
			div#footerTweetFeed ul {
				display: inline;
				width: 315px;
				margin: 27px 0 0 20px;
				list-style: none;
				list-style-position: outside; /*fixes ie indent issue*/
				float: left;
				}
				div#footerTweetFeed ul li {
					margin-bottom: 10px;
				}
					div#footerTweetFeed p {
						font-style: italic;
					}
					div#footerTweetFeed p.date {
						font-style: normal;
					}
					div#footerTweetFeed a.twitStatusLink {
						font-size:85%;
						color: #999;
					}
					
			
		/*=tweet+blog shared styles*/
		#footer div#footerContent div#footerBlogFeed h3, #footer div#footerContent div#footerTweetFeed h3, #footer div#footerContent div#footerMarketChat h3 {
			margin-top: 15px;
			text-transform: uppercase; 
			font-family: "arial black",arial;
			font-weight: bold;
			font-size: 12px;
			letter-spacing: 2px;
			color: #735A44;
		}
		div#footerBlogFeed p.date, div#footerTweetFeed p.date, div#footerMarketChat p.date {
			font-size: 11px;
			color: #04A2DD;
		}
	
		/*=spotLightClient[home] specific*/
		div#footerBlogFeed div {
			/**/
			}
			div#footerBlogFeed div h4 {
				margin-bottom: 10px;
				font-size: 18px;
				color: #DC712F;
				}
				div#footerBlogFeed div p {
					display: inline;
					width: 155px;
					font-size: 11px;
					float: left;
				}
				div#footerBlogFeed div p.img {
					display: inline;
					margin-top: -35px;
					float: right;
					}
					div#footerBlogFeed div p a {
						display: block;
						margin-top: 5px;
						color: #DC712F;
}


/*----------------------------------------
=breadcrumb
- only in client indiv pages at this point
-----------------------------------------*/

#breadcrumb {
	font-size: 14px !important;
	font-weight: bold;
	color: #DBDBDB;
	}
	#breadcrumb a {
		color: #DBDBDB;
		text-decoration: none;
	}
	#breadcrumb a:hover {
		text-decoration: underline;
	}
	#breadcrumb span {
		color: #DC712F;
	}	

/*------------------------------------------------------------
=clearfix -> allows stickyfooter to occur in certain browsers
-------------------------------------------------------------*/

/*clearFix if content inside of wrapper is going to be floated*/
clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */


/*-------------------
=page specific styling
-------------------*/

/*--------------
=content styling
-------------*/
div#content h1, div#content h2 {
	font-size: 18px;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	/*color: #735A44;*//*brown*/
	color: #dc712f;
}

div#content h2 {
	font-size: 13px;
	color: #000;
}

div#content ul {
	margin-bottom: 15px;
	list-style: none;
	}
	div#content ul li {
		min-height: 18px;/*23-5*/
		margin-bottom: 5px;
		padding: 1px 0px 0px 30px;
		background: url(../images/listBullet.png) no-repeat top left;
	}

div#content p {
	margin-bottom: 10px;
}


/*---------------
=home page video
---------------*/
#video {
	display: inline;
	margin-top: 20px;
	/*width: 448px;
	height: 336px;
	background: #000;*/
	float:right;
}

/*------------------
=team page styling
------------------*/

/*=group boxes*/
#execGroup, #coreGroup {
	margin-left: 12px;
	overflow: auto;/*clear inner floats*/
}
#coreGroup {
	margin-top: 45px;
	margin-bottom: 45px;
}


/*=thumb defaults*/
.thumb {
	position: relative;
	width: 176px;
	min-height: 108px;
	padding-bottom: 24px;
	background: url(../images/teamThumbBg.png) no-repeat bottom left;
	float: left;
	}
	.thumb img {
		margin-right: 3px;
		float: right;
	}
	/*general*/
	.thumb span {
		position: absolute;
		bottom: 5px;
		font-family: "arial black","arial";
		font-size: 13px;
		color: #4F4F4F;
		letter-spacing: 2px;
		text-decoration: none;
	}
	.thumb a  {
		text-decoration: none !important;
	}
	/*name specific*/
	.thumb span.name {
		left: 12px;
	}
	/*ext specific*/
	.thumb span + span {
		right: 5px !important;
		bottom: 7px;
		font-family: arial;
		font-weight: bold;
		font-size: 12px;
		letter-spacing: 1px;
		color: #9E9E9E;
	}






/*--------------------
=global/general styles
-------------------*/

/*float Classes*/
.floatLeft {
	display: inline;
	float: left;
}
.floatRight {
	display: inline;
	float: right;
}

/*clear Classes*/
.clear {
	clear: both;
}
.clearLeft {
	clear: left;
}
.clearRight {
	clear: right;
}

/*typography*/
.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.greyLightTxt {
	color: #666;
	font-style: italic;
}

.quoteTxt {
	color: #666;
	font-style: italic;
}

.hidden {
	display: none;
}