/* CSS Document */

* {margin: 0; padding: 0;}

img {border: 0;}

body {
	font: 11px "Lucida Grande", Geneva, sans-serif;
	color: #666;
	font-size:1em;
	background:#1b313a url(images/bg-shadow-logo.gif) top left repeat-x;
	 }
	 
#wrapper {
	position:relative;
	width:1000px;
	margin: 0 auto;
	background-color:#FFF;
	}

	.logo {
		position:absolute;
		top:0;
		left: 10px;
		}	

h1 {
	font: bold 24px Arial, Helvetica, sans-serif; 
	letter-spacing: 0;
	margin-top: 60px; 
	margin-bottom: 25px;
	border-bottom: 1px solid #ccc; 
	color:#e66b1e;
	width:700px;
	}

	h1 em {
		font-size: .7em;
		line-height:1.5em;
		font-style:normal; 
		font-weight:normal;
		}


h2 {
	padding-top:15px;
	font: bold 24px/1.1em Arial, Helvetica, sans-serif;
	color: #333;
		}
		
	h2 em{
		font: normal 16px/1.2em Arial, Helvetica, sans-serif;
		}

h3 {
	font: bold 16px Arial, Helvetica, sans-serif; 
	margin: 25px 0 5px 0;
	color: #5e7ba2; 
	text-align: left;
	}

h4 {
	text-align:left;
	font: bold 12px Arial, Helvetica, sans-serif; 
 	margin-top: 15px;
	margin-left:25px;
	}

	h4 a {
		color:#333; 
		text-decoration: none;
		}

	h4 em {
		font: normal 10px/1.3em Arial, Helvetica, sans-serif; 
		}

	h4 span {color: #e66b1e;}

p {margin-bottom: 1em;}


a {	
	color:#e66b1e; 
	text-decoration:none;
	}

	a:hover {color: #000;}

/*
============================================================= 
STRUCTURE
============================================================= 
*/	
	#topnav {
	height: 50px;
	background: #cccfb0;
	width: 1000px;
	}
	
	#topnav li {
		float: right;
		display: block;
		border-right: 1px dotted #fff;
		padding: 0px 10px;
		margin-top:15px;
		font-size: 14px;
		}
		
		#topnav li a {
			text-decoration:none;
			line-height: 16px;
			color: #333;
			}		
		
		#topnav li a.ON {color:#e66b1e;}

		#topnav li a:hover{
			color:#e66b1e;
			text-decoration: none;
			}

/*
============================================================= 
LEFT COLUMN STUFF
============================================================= 
*/	

#leftcol {
	float:left;
	width: 250px;
	text-align: center;
	padding-top: 150px;
	background-color:#fff;
	}

	
	#strategylist {width: 215px;}
	#strategylist li {
			text-align:left;
			font: bold 11px/1.3em Arial, Helvetica, sans-serif; 
 			margin-top: 15px;
			margin-left: 35px;
			list-style: decimal;
			}

	#strategylist li em{
		color:#333; 
		text-decoration: none;
		font: 10px/1.3em Arial, Helvetica, sans-serif; 
		}

/*
-----------------------------------------------------------
RIGHT COLUMN
-----------------------------------------------------------
*/



/*
============================================================= 
FORM
============================================================= 
*/

#signup {
	width: 200px;
	padding: 15px;
	}
	
input {
	width:165px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	}
	
.video img {margin:15px;}	

	
/*
============================================================= 
PORTFOLIO
============================================================= 
*/

#portfolio {
	float: left;
	width: 700px;
	padding-left: 25px;
	border-left: 1px dotted #cccfb0;
	padding-bottom: 25px;
	background: #fff;
	}

#portfolio p {
		width: 660px; 
		font-size: 12px;
		}
		
		#portfolio div.feature-section p {
		width: 100%;
		}
		
		#portfolio p.intro {
		font-size: 16px; 
		line-height: 1.2em;
		}
		
		#portfolio p.intro a{
			background:#eee;
			color:#000;
			}
		
		#portfolio p.intro a:hover{
			background:#fff;
			color:#e66b1e;
			}

	#portfolio h1.intro a {
		color: #e66b1e;
		text-transform: uppercase;
		letter-spacing: 1px;
		font: bold 10px Arial, sans-serif;
		padding: 5px;
		margin: 0 10px 0 0;
		height: 25px;
		}
	
		#portfolio h1.intro a.ON ,
		#portfolio h1.intro a:hover {
		color:#fff;
		background:#e66b1e;
		}

		#portfolio h1.intro span a  {
			font: bold 24px arial, Helvetica, sans-serif;
			text-transform: none;
			letter-spacing:0px;
			padding-left:0;			
			}

		#portfolio h1.intro span a:hover {
			height:	40px;
			}

#portfolio .logos img {
	padding: 5px;
	border:1px solid #fff;
	}

#portfolio .logos a:hover img {border: 1px dotted #e66b1e;}

/*
============================================================= 
CLIENT SECTION
============================================================= 
*/

#clientinfo {
	position: relative;
	width: 650px;
	}

	#clientinfo img {
		float: right;
		padding-right: 50px;
		}
	
	#clientinfo p {
		float:left;
		font: 11px/1.3em lucida grande, Arial, Helvetica, sans-serif;
		padding-bottom:25px;
		width: 375px;
		}
		
		#clientinfo p strong {
			color:#000000;
			}

#clientwork{
	position:relative;
	width:650px;
	text-align:center;
	} 
	
	#clientwork img {
		padding-bottom:25px;
		float: left;
		}

#clientlist {margin-left: 25px; width:215px;}

ul.clientlist {
	list-style-type: none;
	font: bold 10px/1.7em Arial, Helvetica, sans-serif;
	text-align: left;
	}
 
ul.clientlist li a {
	color:#333333;	
	text-decoration:none;
	}

ul.clientlist li a:hover {
	color:#e66b1e;	
	text-decoration:none;
	}

ul.clientlist li a.ON {color:#e66b1e;}


/*
============================================================= 
STRATEGY AND FREE TREATS
============================================================= 
*/

#strategy {
	position: relative;
	width: 700px;
	clear: both;
	}

.sheet {
	border-top: 1px solid #ccc;
	width: 675px;
	text-align:left;
	clear:both;
	height: 175px;
	}
	
	
	#strategy .sheet p {width: 350px;}
	#strategy .sheet img {float: right;}
	
	#strategy .sheet h3 {
		width: 350px;
		text-transform: capitalize;	
		float:left;
		}
	
	#strategy .sheet h4 {
		font: bold 10px Arial, Helvetica, sans-serif; 
		letter-spacing: 1px; 
		color:#e66b1e; 
		padding-top: 15px;
		}
	
	div.coolthing {
		margin: 0 15px 15px 0; 
		float:left; 
		width: 210px; 
		height:210px;
		}
	

/*
============================================================= 
MISCELLANEOUS
============================================================= 
*/

#backtotop {
	float:left;
	clear:both;
	width:650px;
	text-align: right;
	color:#e66b1e;
	font: bold 12px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	height:50px;
	}

h1 span.downloadbutton a:link,
h1 span.downloadbutton a:visited,
h1 span.downloadbutton a:hover,
h1 span.downloadbutton a:active {
	font: bold 10px/1.5em arial, helvetica, sans-serif; 
	letter-spacing: 1px; 
	color:#fff;
	background: #e66b1e;
	text-transform: uppercase;
	padding:2px 5px;
	float:right;
	}

h1 span.downloadbutton a:hover {
	color:#fff;
	background: #333;
	}


/*
============================================================= 
FOOTER
============================================================= 
*/

#footerbox {
	width:1000px;
	position: relative;
	background:#cccfb0;
	margin:0 auto;
	clear:both;
	}
#footerbox .contactinfo {
	padding: 25px;
	font: 12px arial, helvetica, sans-serif;
	color: #444;
	}
	#footerbox strong {color: #333;}

span.copyright {font-size: 10px; margin-top: 10px;}

#footerlinks {
	position:absolute;
	top:25px;
	right:25px;
	width:300px;
	text-align: right;
	}
	
	#footerlinks p {font-size:14px; padding-bottom: 3px; height: 25px; color: #444;}
	#footerbox div#footerlinks p a:link,
	#footerbox div#footerlinks p a:visited, 
	#footerbox div#footerlinks p a:hover,
	#footerbox div#footerlinks p a:active
		{color: #444;text-decoration: none;}
		
			#footerbox div#footerlinks p a:hover {text-decoration:none; color:#000;}
			
			#footerbox div#footerlinks p span {color: #fff;}
	
	}
.clearboth {clear:both;}

	
/*
============================================================= 
HOME PAGE
============================================================= 
*/	


#showcase {
	width:700px;
	}
	
	#showcase a:link img,
	#showcase a:visited img,
	#showcase a:hover img,
	#showcase a:active img
		{border:1px solid #fff;}

	
	#showcase a:hover img
		{border:1px solid #e66b1e;}

	div#feature-section {
		margin-top:25px;
		width: 450px;
		background: #fff;
		border: 1px solid #cccfb0;
		}

	#feature-section div.BCGheader{
		background: url(images/bcgheader.gif) top left repeat-x;;
		width: 450px;
		height: 85px;
		float: left;
		}
		
		.BCGheader h2 {
			margin-left: 75px;
			font-size:20px;
			line-height: 40px;
			}
		
		#portfolio div#feature-section p {
			float:left; 
			width: 250px; 
			padding:15px;
			}

		#portfolio div#feature-section h2,
		#portfolio div#feature-section h3 {
		padding-left:15px;}

#work div a{
	border: 1px solid #fff;
	padding:5px;
	float: left;
	}
	
	#work div a:hover {border:1px solid #e66b1e;}

li h1 {margin-top:5px;}
li h6 {margin-top:20px;font: 9px geneva, Arial, Helvetica, sans-serif; letter-spacing: 1px; color: #888888;}
	
.intro h2 {
	font: normal 18px Arial, Helvetica, sans-serif; 
	letter-spacing: 0;
	}