/*-----------------------------------------------------------------------------
Global StyleSheet (Color Communications, Inc.)

version:	1.0
author:		Rebecca Kemnitz
email:		rebecca@bytestudios.com
date:		8/24/2009
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* { margin: 0; padding: 0; }

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6 { margin: 0 0; font-weight: normal; }

/* Class for clearing floats */
.clear { clear: both; }

/* Remove border around linked images */
img { border: 0; margin: 0; }

ul, ol { list-style: none; }

/* Tables
-----------------------------------------------------------------------------*/
table { border-spacing: 0; border-collapse: collapse; }

td { font-weight: normal; }

/* Links
-----------------------------------------------------------------------------*/
a { outline: none; color: white; text-decoration: none; }

a:hover { outline: none; text-decoration: underline; }

a:active { outline: none; }
/* Forms
-----------------------------------------------------------------------------*/
/* Removes fieldset borders. even on Opea 7 */
fieldset { border: 1px solid transparent; }

input.text, textarea, select { }

.errorText { }

.errorText ul { }
/* Classes
-----------------------------------------------------------------------------*/
/* Typography
-----------------------------------------------------------------------------*/
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: white;
	text-align: center; 
	background: #1e1d18 url(/assets/img/bg_body.jpg) no-repeat center top;
}
/* Branding
-----------------------------------------------------------------------------*/
#header h1 { float: left; margin: 14px 0 0 -7px; }

#header h1 a {  
	width: 370px; 
	height: 19px; 
	background: url(/assets/img/color_communications_inc.gif) no-repeat;
	display: block;
}

#header h1 > a { background: url(/assets/img/color_communications_inc.png) no-repeat; }

/* Main Layout
-----------------------------------------------------------------------------*/
#container {
	width: 969px;
	margin: 0 auto;
	padding-bottom: 50px;
}

#header_wrap { width: 100%; margin:0 auto; height: 95px; }

#content { display: none; }

/* Header
-----------------------------------------------------------------------------*/
#header_inner_wrap { width: 969px; margin: 0 auto; }

#header_styling_left {
	background: url(/assets/img/bg_header_l.png) repeat-x;
	position: absolute;
	margin-left: -969px;
	width: 100%;
	height: 95px;
}
#header_styling_right {
	background:transparent url(/assets/img/bg_header_r.png) repeat-x scroll 0 0;
	position: absolute;
	width: 100%;
	height: 95px;
	z-index: -1;
}
#header_duplicate_bg {
	left:0;
	position: absolute;
	float: left;
	width: 969px;
	height: 95px;
	background: url(/assets/img/bg_body.jpg) no-repeat center top; 
}
#header {
	width: 969px;
	float: left;
	height: 95px;
	background: url(/assets/img/bg_header_center.png) repeat-x;
}
#header_corner_l {
	float: left;
	background: url(/assets/img/bg_header_l_corner.gif) no-repeat;
	height: 95px;
	width: 109px;
}
#header>#header_corner_l { background: url(/assets/img/bg_header_l_corner.png) no-repeat; }

#header_corner_r {
	float: right;
	background: url(/assets/img/bg_header_r_corner.png) no-repeat;
	height: 95px;
	width: 48px;
}

#top_nav { float: right; color: #cccccc; margin:11px 24px 0 0; line-height: 28px;  }

#top_nav li { float: left; margin-left: 5px; padding-left: 11px; }

#top_nav li.active{ background: #32312e url(/assets/img/top_nav_bg_l.png) no-repeat; }

#top_nav li a { display: inline-block; color: #cccccc; padding-right: 11px; text-decoration: none; }

#top_nav li.active a { background: url(/assets/img/top_nav_bg_r.png) no-repeat top right; color: #00a5d7; }

/* Footer
-----------------------------------------------------------------------------*/
#footer {
	float: right;
	width: 780px;
	text-align: right;
	font-size: 8pt;
	padding-right: 20px;
	color: #959595;
	margin-right: 45px;
}

/* Main Navigation
-----------------------------------------------------------------------------*/
#main_nav_wrapper {
	float: right;
	width: 969px;
	height: 130px;
	margin-top: -31px;
	position: absolute;
	left:0;
}

#main_nav_wrapper img#what_we_do { float: left; margin-top: 53px; position: absolute; }

#main_nav_wrapper > img#what_we_do { position: relative; }

#main_nav_wrapper h3 { font-size: 9pt; }

#main_nav_wrapper sup { font-size: 7pt; }

#main_nav { float: left; }

#main_nav li {
	float: left;
	width: 108px;
	height: 126px;
	margin-left: 31px;
	background: url(/assets/img/bg_main_nav.gif) no-repeat;
	cursor: pointer;
}

#main_nav li.first, #main_nav li.first.active, #main_nav li.first.active:hover, #main_nav.main li.first, #main_nav.main li.first.active, #main_nav.main li.first.active:hover { 
	opacity:1; 
	background: url(/assets/img/what_we_do.gif) center right no-repeat; 
	margin: 0px; 
	width:90px;
	height:122px;
}

#main_nav.main li { opacity:0.4; filter:alpha(opacity=40); }

#main_nav.main li.active, #main_nav li:hover { 
	opacity:1; 
	filter:alpha(opacity=100); 
	background: url(/assets/img/bg_main_nav_active.gif) no-repeat;
}

#main_nav li:first-child { margin-left: 0px; }

#main_nav li img { margin: 6px 0 5px 0; }

#main_nav li h3, #main_nav.main li.first.active h3, #main_nav li.first.active h3 { display: none; }

#main_nav.main li.active h3, #main_nav li:hover h3 { display: block; }

/* Left Navigation
-----------------------------------------------------------------------------*/
#left_nav_wrap {
	float: left;
	width: 115px;
	text-align: right;
	height: 369px;
	line-height: 12pt;
	margin-top: 123px;
	overflow-x: visible;
}

#container > #left_nav_wrap { margin-left: -10px; }

#left_nav_wrap ul { height: 369px; }

#left_nav_wrap ul li { padding: 7px 0; cursor: pointer; }

#left_nav_wrap ul li.active { color: #00a5d7; }

#left_nav_wrap ul.color_cards li.active { color: #c9dfad; }

#left_nav_wrap ul.color_systems li.active { color: #7fae18; }

#left_nav_wrap ul.auto li.active { color: #894ca2; }

#left_nav_wrap ul.r_d li.active { color: #fcdb00; }

#left_nav_wrap ul.colortac li.active { color: #078a9c; }

#left_nav_wrap ul.color_solutions li.active { color: #5fa37c; }

/* Buckets
-----------------------------------------------------------------------------*/
#bucket_wrapper {
	text-align: left;
	float: right;
	width: 800px;
	border-top: 1px solid #34332c;
	border-bottom: 1px solid #34332c;
	line-height: 14pt;
	margin: 0 45px 20px 0;
	overflow-y: visible;
}

.bucket { float: left; width: 210px; margin: 0 0 5px 38px; }

#bucket_wrapper > .bucket { margin: -13px 0 5px 77px; }

#bucket_wrapper > .bucket:first-child { margin-left: 16px; }

.bucket .headline {
	font-weight:bold;
	font-size: 11pt;
	line-height:10pt;
	display: inline-block;
	padding-right: 35px;
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top:20px;
}
.bucket a { color: #00a5d7; }

.bucket sup { font-size: 5pt; }

.bucket a.emphasized {
	text-transform:uppercase;
	font-weight:bold;
	line-height:16pt;
	display: inline-block; 
	clear: both;
}
/* Slider
-----------------------------------------------------------------------------*/
#slider_container_wrap {
	width: 807px;
	height: 369px;
	float: right;
	margin-top: 123px;
	margin-bottom: 29px;
	margin-right: 45px;
	background: url(/assets/img/bg_slider_container.gif) no-repeat;
}
#container>#slider_container_wrap {
	background: url(/assets/img/bg_slider_container.png) no-repeat;
}
#slider_container {
	float: right;
	position: relative;
	margin: 1px;
	width: 799px;
	height: 367px;
	overflow: hidden;
}



.section_wrapper {
	float: left;
	width: 799px;
/* 	min-height: 367px; */
	position: relative;
	margin-right: 40px;
}
.section_wrapper .page_container {
	width: 799px;
/* 	height: 367px; */
	overflow: hidden;
}

.section_wrapper .page_container img.headline { margin:13px 0 25px 0; }

.section_wrapper .page_container .headline { font-size: 12pt; }

.section_wrapper .page_container a { color: #00a5d7; }

.section_wrapper .page_container .left_col,.section_wrapper .page_container .right_col, .section_wrapper .page_container .no_col {
	float: left;
	height: 327px;
	float: left;
	margin: 0 0 0 20px;
	text-align: left;
	font-size: 10pt;
	line-height:2em;
	padding: 20px 0;
}
.section_wrapper .page_container .left_col { width: 390px; }

.section_wrapper .page_container .right_col { float: right; width: 350px; text-align: center; margin: 0 20px 0 0; }

.section_wrapper .page_container .no_col { width: 760px; }

.section_wrapper .page_containe .scrolley { height:244px; }

/* contact
-----------------------------------------------------------------------------*/
#contact_form { display: inline; text-align: left; font-size: 9pt; line-height:1.75em; }

#contact_form h5 { font-size: 10pt; margin: 15px 0 14px 76px; }

#contact_form h5.thanks { text-align: center; margin: 15px 0; }

#contact_form span { display: inline-block; float: left; text-align: right; width: 60px; }

#contact_form textarea { height: 176px; }

#contact_form input, #contact_form textarea { 
	float: right;
	background: #2c2a24; 
	border: 1px solid #00A5D7; 
	color: white; 
	width: 274px;
	padding: 2px 0;
}

#contact_form > input, #contact_form > textarea { background: url(/assets/img/form_bg.png); }

#contact_form button { 
	float: left; 
	border: none; 
	background: none; 
	color: #00A5D7; 
	text-transform: uppercase; 
	clear: both; 
	margin: 7px 0 0 72px;
	font-weight: bold;
	cursor: pointer;
	font-size: 10pt;
}