@import "portfolio.css";
@import "footer.css";

body	{
	padding-top: 10px;
	font-family:verdana;
	font-size:100%;
    line-height:1.1em;
	background-color: #E0E9EE;
}

p,li	{
	font-size:0.775em;
}

li p	{
	font-size: 1em;
}
li li	{
	font-size: 1em;
}

img	{
	border: none;
}

a {
	color: #92D400;
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	outline: none;
}

div#container	{
	width: 965px;
	margin: auto;
	background: url(../img/main-bg.gif) 0 0 no-repeat;
}

div#site	{
	width: 920px;
	position: relative;
	left: 22px;
	padding-bottom: 0;
}

span.hr	{
	display: block;
	margin: auto;
	height: 1px;
	font-size: 0;
	width: 100%;
	background-color: #27ABDF;;
}

div#head	{
	height: 80px;
	position: relative;
}

div#head	h1	{
	width: 140px;
	height: 60px;
	position:absolute;
	overflow: hidden;
	right: 0px;
	top: 15px;
	padding: 0;
	margin: 0;
}

span.rep	{
	position:absolute;
	width: 100%;
	height: 100%;
}
div#head	h1	span	{
	background: url(../img/code9-logo.gif) 0 0 no-repeat;
}

span#underline	{
	display: block;
	width: 55px;
	height: 2px;
	background: url(../img/underline.gif) 0 0 no-repeat;
	position: absolute;
	bottom: 22px;
	left: 0px;
}

div#head	ul	{
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 35px;
	left: 0px;
	height: 25px;
	width: 400px;
}
div#head	ul	li	{
	position: absolute;
	display: block;
	height: 20px;
	font-size: 0.975em;
	
}

div#head	ul	li	a	{
	color: #a9abad;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-weight: 0;
}
div#head	ul	li	a:hover	{
	color: #7F7F7F;
}

li.home	{
	left: 0px;
	width: 53px;
}

li.portfolio	{
	left: 73px;
	width: 75px;
}
body.portfolio	span#underline	{
	left: 83px;
}
li.about	{
	left: 168px;
	width: 55px;
}
body.what-we-do	span#underline,	
body.who-we-are	span#underline,	
body.print	span#underline,	
body.web	span#underline,	
body.branding	span#underline,	
body.about	span#underline,	
body.sitemap	span#underline	{
	left: 168px;
}

li.jobs	{
	left: 243px;
	width: 42px;
}
body.jobs	span#underline	{
	left: 236px;
}

li.contact	{
	left: 305px;
	width: 70px;
}
body.contact	span#underline	{
	left: 310px;
}
li.blog	{
	left: 395px;
	width: 40px;
}

body.home 	li.home	a,
body.jobs	li.jobs	a,
body.portfolio 	li.portfolio	a,
body.what-we-do	li.about	a,
body.print	li.about	a,
body.web	li.about	a,
body.marketing	li.about	a,
body.faq	li.about	a,
body.about	li.about	a,
body.contact	li.contact	a,
body.sitemap li.sitemap,
body.blog	li.blog	a,
body.who-we-are	li.about	a	{
	border-bottom: 3px solid #92D400;
}	


div.what-we-do	{
	background: url(../img/blueprint-bg.jpg) 0 0 no-repeat #00436D;
}

div.fullpage-content	img.banner	{
	display: block;
	width: 920px;
	height: 200px;
}

div.sub-nav	{
	z-index: 100;
	background-color: black;
	height: 40px;
	color: #E1E1E1;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
div.sub-nav	ul	{
	padding: 0;
	height: 40px;
	margin: 0;
	list-style: none;
	overflow: hidden;	
}
div.sub-nav	ul	li	{
	float: left;
	clear: none;
	padding: 0;
	margin: 0;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
}
div.sub-nav	a	{
	color: #E1E1E1;
	display: block;
	font-size: 0.975em;
	font-weight: normal;
	padding-bottom: 2px;
}
div.sub-nav	a:hover	{	border-bottom: 2px solid #269F00; color: #A0A0A0;	}

body.what-we-do 	div.sub-nav	 li.what-we-do	a,		
body.print 	div.sub-nav	 li.print	a,		
body.web 	div.sub-nav	 li.web	a,		
div.branding-container 	div.sub-nav	 li.branding	a,		
div.illustration-container 	div.sub-nav	 li.illustration	a,		
div.marketing-container 	div.sub-nav	 li.marketing	a,		
div.faq-container	div.sub-nav	 li.faq	a,		
body.who-we-are 	div.sub-nav	 li.who-we-are	a,
body.gui	li.gui	a	{
	border-bottom: 2px solid #92D400;
}

div#what-we-do	{
	height:420px;
	left:298px;
	top:0;
	width:620px;
	position: absolute;
	overflow: hidden;
}
div#what-we-do	div	{
	width: 130px;
	height: 140px;
	position: absolute;
}
div#what-we-do	h2,	
div#what-we-do	h2	a	{
	width: 130px;
	height: 140px;
	display: block;
	color: white;
	text-align: center;
}

div.wwd-design	h2	a	{	background: url(../img/links/print-icon.jpg) left bottom no-repeat transparent;	}
div.wwd-web	h2	a	{	background: url(../img/links/web-icon.jpg) left bottom no-repeat transparent;	}
div.wwd-branding	h2	a	{	background: url(../img/links/branding-icon.jpg) left bottom no-repeat transparent;	}
div.wwd-illustration	h2	a	{	background: url(../img/links/illustration-icon.jpg) left bottom no-repeat transparent;	}
div.wwd-marketing	h2	a	{	background: url(../img/links/marketing-icon.jpg) left bottom no-repeat transparent;	}
div.wwd-gui	h2	a	{	background: url(../img/links/guivid-icon.jpg) left bottom no-repeat transparent;	}

div.wwd-design	{
	top: 55px;
	left: 77px;
}
div.wwd-web	{
	top: 54px;
	left: 258px;
}
div.wwd-branding	{
	top: 55px;
	left: 438px;
}

div.wwd-illustration	{
	top: 235px;
	left: 77px;
}


div.wwd-gui	{
	top: 234px;
	left: 258px;
}
div.wwd-marketing	{
	top: 234px;
	left: 437px;
}

div#what-we-do	h2	a:hover	{
	background-position: left top;
}
div#what-we-do	h2	{
	font-size: 0.9em; 
	padding: 0;
	margin: 0;
}
div#what-we-do	h2	span	{
	display: block;
	position: absolute;
	width: 130px;
	right: 0;
	bottom: 0;
	text-align: left;
}



/********************************************************
******	PRINT, WEB,BRADING, ILLUSTRATION	 	******
********************************************************/

div.fullpage-content	{
	overflow: hidden;
}

#banner-slideshow {
    position:relative;
    height:200px;
	width: 920px;
}

#banner-slideshow	IMG {
    position:absolute;
	height: 200px;
	width: 920px;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#banner-slideshow 	IMG.active {
    z-index:10;
    opacity:1.0;
}

#banner-slideshow	IMG.last-active {
    z-index:9;
}

div.fullpage-content	h1	{
	color: #27abdf;
	font-weight: normal;
	font-size:1.2em;
	line-height:1.636em;
	margin: 0;
	padding: 0;
	padding-top: 15px;
	padding-bottom: 8px;
}
p.head,	
div.fullpage-content	h3	{
	color: #27abdf;
	font-weight: normal;
	font-size: 0.975em;
	margin: 0;
	padding: 0;
	padding-top: 4px;
	padding-bottom: 4px;	
}

div.col	{
	float: left;
	clear: none;
	width: 440px;
}
div.col-a	{
	width: 550px;
	padding-right: 50px;
	padding-left: 20px;
}
div.col-b	{
	width: 280px;
	padding-top: 25px;
	padding-right: 20px;
	overflow: hidden;
}
div.col-a	ul	{
	padding-top: 0;
	margin-top: 0;
}
div.col-a	ul	li	{
	padding-top: 5px;
	padding-bottom: 5px;
}
div.col-a	ul	li	span	{
	color:#27ABDF;
	font-weight: bold;
}

div.section	{
	color: white;
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 0.9em;
}

div.section	h4	{
	padding: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0;
	font-weight: normal;
	font-size: 1.175em;
}

div.padding	{
	padding: 10px;
}

div.section-foot	{
	height: 10px;
	clear: both;
}
div#code9-section,	
div#grey	{
	background: url(../img/right-col-grey-top.gif) 0 0 no-repeat;
	background-color: #5d6f7b;
}
div#code9-section	div.section-foot,	
div#grey	div.section-foot	{
	background: url(../img/right-col-grey-bottom.gif) 0 0 no-repeat;
}

div#brochure-section	{
	background: url(../img/right-col-lgrey-top.gif) 0 0 no-repeat;
	background-color: #a2a4a6;
}
div#green	{
	background: url(../img/right-col-green-top.gif) 0 0 no-repeat;
	background-color: #44BD61;
}
div#brochure-section	div.section-foot	{
	background: url(../img/right-col-lgrey-bottom.gif) 0 0 no-repeat;
}	
div#green	div.section-foot	{
	background: url(../img/right-col-green-bottom.gif) 0 0 no-repeat;
}

div#client-testimonials-section,
div#blue	{
	background: url(../img/right-col-blue-top.gif) 0 0 no-repeat;
	background-color: #27abdf;
}
div#client-testimonials-section	div.section-foot,	
div#blue	div.section-foot	{
	background: url(../img/right-col-blue-bottom.gif) 0 0 no-repeat;
}

div#brochure-section	form	{
	padding-top: 15px;
	padding-bottom: 0px;
	background: url(../img/pdf-icon.jpg) 200px 20px no-repeat;
}

div.section	ul.links,	
div.section	ul.portfolio-links	{
	margin: 0;
	padding: 0;
	list-style: none;
}
div.section	ul.links	li	{
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
}
div.section	ul.links	li	a	{
	color: white;
	font-weight: normal;
	display: block;
	padding-left: 22px;
	padding-top: 3px;
	padding-bottom: 3px;
	background: url(../img/links/link_arrow.png) no-repeat;
	background-position: left center;
	font-size: 0.9em;
}

div.section	ul.portfolio-links	li	{
	width: 40px;
	height: 40px;
	float: left;
	clear: none;
	margin: 5px;
}
div.section	ul.portfolio-links	li	a	{
	width: 40px;
	height: 40px;
	display: block;
}
div.section	ul.portfolio-links	li	a:hover	{
	border: 1px solid #5d6f7b;
}

div.section	ul.links	li	a:hover	{
	background: url(../img/links/link_arrow-over.png) no-repeat;
	background-position: left center;
}

div#client-testimonials-section	p	{
	font-style: italic;
	font-size: 1em;
	line-height: 1.5em;
	font-size: 0.8225em;
}
div#client-testimonials-section	p	span	{
	font-style: normal;
	font-weight: bold;
	display: block;
	padding-top: 6px;
}

/*********************************
******		FORM	 	******
*********************************/

form	{
	overflow: hidden;
	padding: 0;
	margin: 0;
}

form div.row	{
	clear: both;
	overflow: hidden;
	padding-top: 4px;
	padding-bottom: 4px;
}

label	{
	float: left;
	display: block;
	clear: left;
	width: 100px;
	text-align: left;
	padding-right: 15px;
	font-size: 0.75em;
}
input	{
	display: block;
	float: left;
	clear: none;
	width: 100px;
	font-size: 0.75em;
}

select	{
	width: 180px;
	font-size: 0.75em;
}

input.hidden	{
	display: none;
}
div.section	label	{
	width: 40px;
	text-align: left;
}
div.section	input	{
	width: 130px;
}

input#submit 	{
	background: url(../img/send.png) no-repeat;
	background-position: top;
	border: 0;
	width: 62px;
	height: 22px;
	text-indent: -9999em;
	display: block;
	margin-left: 195px;
}
input#submit:hover 	{
	background-position: bottom;
}

form	div.checkbox-row	{
	padding-top: 15px;
	padding-bottom: 10px;
	overflow: hidden;
}

div.checkbox-row label	{
	width: 160px;
	float: left;
	clear: none;
	line-height: 1.3em;
	font-size: 0.6em;
}

div.checkbox-row input	{
	width: auto;
	display: inline;
	margin-top: 15px;
}

div.privacy-info	{
	background: url(../img/right-col-lgrey-line.gif) 0 0 no-repeat;
	padding-top: 10px;
	padding-bottom: 3px;
}
div.privacy-info	h4	{
	padding-left: 10px;
	padding-bottom: 0px;
	padding-top: 0px;
}
p.dp	{
	font-size: 0.6em;
	line-height: 1.3em;
	padding-bottom: 0;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0;
}

/*********************************
******		CONTACT	 	******
*********************************/

div.contact-container,
div.contact-thanks-container,
div.jobs-container {
	position: relative;
	height: 500px;
	overflow: hidden;
	background: url(../img/contact-bg.jpg) 0 0 no-repeat black;
}

div.jobs-container	{	background: url(../img/jobs-bg.jpg) 0 0 no-repeat black; }

div.contact-thanks-container	{	
	height: 460px;
	background: url(../img/wood-bg.gif) 0 0 no-repeat black;
	border-bottom: 40px solid #000000;
}


div#contact-form	{
	width: 480px;
	overflow: hidden;
	position: absolute;
	right: 50px;
	top: 20px;
}	

div#contact-form	div.col-a	{
	width: 230px;
	padding-right: 5px;
	overflow: hidden;
	padding-left: 0;
}
div#contact-form	div.col-b	{
	width: 195px;
	padding-left: 20px;
	padding-top: 0;
}

div#contact-form	div.form-bottom	{
	clear: both;
}

div#contact-form	label	{
	color: #27ABDF;
}
div#contact-form	div.col-a	{	padding-top: 10px; padding-bottom: 10px;	}
div#contact-form 	div.col-a	label	{	width: 60px;	}
div#contact-form 	div.col-a	input	{	width: 140px;	}
div#contact-form 	div.col-b	div.row	{
	padding-bottom: 4px;
}
div#contact-form 	div.col-b	label	{
	clear: both;
	float: none;
	width: 200px;
	padding-bottom: 5px;
}
div#contact-form	div.form-bottom	label	{	clear: both; float: none; padding-bottom: 5px; width: 300px;	}
div#contact-form	div.form-bottom	textarea	{
	clear: both;
	width: 440px;
	height: 80px;
}

div#contact-form	div.checkbox-row	{
	padding: 0;
	margin: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	overflow: hidden;
}

div#contact-form	div.checkbox-row	input#future_marketing_contact	{
	float: left;
	clear: none;
	width: auto;
	display: block;
	margin: 0;
	padding: 0;
}
div#contact-form	div.checkbox-row	label	{
	width: 430px;
	float: left;
	clear:  none;
	padding-left: 5px;
	padding-bottom: 0;
}


div.submit-row	{
	text-align: right;
}

div.submit-row	input	{
	float: right;
}

div#contact-form	div.submit-row	{
	padding-right: 30px;
	padding-top: 15px;
}
.jobs-container	div#contact-form	div.submit-row	{
	padding-right: 20px;
}


a#contact-brochure-img	{
	display: block;
	width: 620px; 
	height:461px;
	position: absolute;
	left: 300px;
	top: 0px;
}


/***************************
***		Job Specific 	 ***
****************************/


.jobs-container div#contact-form	h1	{
	padding-left: 34px;	
}

.jobs-container	div#contact-form	{
	/*background: url(../img/main-form-bg.png) 0 0 no-repeat;*/
	position: absolute;
	width: 515px;
	min-height: 473px;
	
}
.jobs-container	div#contact-form	form	{
	position: relative;
	width: 470px;
	left: 30px;
}

.jobs-container	div#contact-form	div.col-b	select	{
	width: 191px;
}

div#contact-form	div.rates	label	{
	width: 90px;
	float: left;
}
.jobs-container	div#contact-form	div.rates	input	{
	width: 80px;
	float: left;
}

div#contact-form	div.col-b	textarea	{
	width: 185px;
}

div#contact-form div.success-text	{
	padding-left: 30px;
	padding-right: 20px;
}


/*****************************/

div.testimonials	p	{
	font-style: italic;
}
div.testimonials	p	span	{
	font-weight: bold;
	display: block;
	padding-top: 5px;
	font-style: normal;
}

div#launch-announcement	{
	position: absolute;
	width: 159px;
	height: 125px;
	right: 10px;
	top: 20px;
	z-index: 200;
}
div#launch-announcement	a	{
	display: block;
	width: 159px;
	height: 125px;
	background: url(../img/announcement-postit.png) 0 0 no-repeat;
}
div#launch-announcement	a:hover	{
	background-position: 0px -125px;
}

/************************************************/

div#job-desc	{
	height: 450px;
	padding-left: 40px;
	padding-right: 30px;
}