/* 
URL: http://
Author: Matt Green   
Title: Web Developer/Flaxen Design 
Company: Flaxen Design

** Refer to the core files 'global.css' and 'reset.css' that are loaded before

[Table Of Contents] 

1- Global Selectors
2- Major Page Layout Elements
3- Header
4- Navigation 
5- Content 
6- Pages
7- Footer
*/

/* 1. Global Selectors 
-------------------------------------------------------------- */

body { background: url(../images/header_bg.jpg) #171312 repeat-x top center; }
p { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color:#8e8e8e; line-height: 18px; }
h1, h2, h3, h4 { font-family: Georgia, Times, serif; color: white; font-weight: normal; }
h2 { margin-bottom: 20px; font-size: 26px; }
a { color:#999; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }
a:hover { text-decoration: none; color: inherit; }
.clear { clear: both; }
.home_resize { width:75%; float:right; margin-right:60px; /* border:1px #7ac143 solid; */ }
.client_name { text-align:center; clear:both; text-transform: uppercase; font-weight:bold; padding-top:7px; text-indent:25px; }

#right_header h3 { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	margin-bottom: 5px; 
	font-size: 12px; 
	text-transform: uppercase; 
	color: #7ac143; 
	background: url(../images/heading_img.png) left no-repeat;
	text-indent: 35px;
}
 
div.clear {clear:both; }
strong { font-weight: bold; color:#fff; }

h2.headline { 
	font-family: Georgia, Times, serif; 
	font-size: 25px; 
	line-height: 35px;
	color:#6da943; 
	font-weight: normal; 
	text-align: center;
	margin-top: 90px;
	padding:0px;
} 


/* 2. Major Page Layout Elements 
-------------------------------------------------------------- */

#top {
	height:347px;
	background: url(../images/color_bar.jpg) repeat-x bottom center;
	width:100%;
}

#middle {
	min-height:347px;
	background: url(../images/footer_shadow.jpg) bottom center repeat-x #282727;
	width:100%;
	padding: 70px 0px 40px;
}

/* 3. Header 
-------------------------------------------------------------- */

#header {
	width:950px;
	height:337px; 
	margin:0 auto;
	position: relative;
}

#header_bg {
	position: absolute;
	width: 1066px;
	height: 337px;
	left: 0;
	top: 0;
	background: url(../images/flaxen_swirls.jpg) no-repeat left bottom;
	z-index: -2;
}

h1#branding a {
	background: url(../images/logo.png) no-repeat;
	width:311px;
	height:135px;
	text-indent: -9999px;
	position: absolute;
	bottom: -31px;
	left:154px;
	z-index: 400;
}

img.under_logo {
	position: absolute;
	left:-40px;
	top:347px;
}

div#procurement {
	position: absolute;
	z-index: 201;
	background: url(../images/newsletter_bg.jpg) bottom repeat-x #2a2a2a;
	cursor: pointer;
	border-bottom: 1px solid #2e570e;
	right:300px;
	width:275px;
	min-height: 25px;
}

div#procurement a {
	color: #efefef;
	text-transform: uppercase;
	font-size: 9px;
	font-family: Verdana, Arial, sans-serif;
	text-decoration: none;
	letter-spacing: .5px;
	display: block;
	text-align: center;
	padding: 5px 0px;
	cursor: pointer;
	text-decoration:underline;
}



/* newsletter */
div#newsletter {
	border-bottom: 1px solid #2e570e;
	right:8px;
	width:275px;
	min-height: 25px;
	background: url(../images/newsletter_bg.jpg) bottom repeat-x #2a2a2a;
	cursor: pointer;
	position: absolute;
	z-index: 200;
}

div#newsletter p#news  {
	color: #efefef;
	text-transform: uppercase;
	font-size: 9px;
	font-family: Verdana, Arial, sans-serif;
	text-decoration: none;
	letter-spacing: .5px;
	display: block;
	text-align: center;
	bottom:-15px;
	position: absolute;
	width:100%;
	padding: 5px 0px;
	cursor: pointer;
}

div#newsletter a:hover {
	color:#ccc;
}

div#newsletter a {
	text-decoration: underline;
	font-size: 9px;
	font-family: Verdana, Arial, sans-serif;
	color: #efefef;
}

div#news_content {
	padding:20px;
	display: none;
}

/* Email sign up form */
form#newsletter label { display: block; font-weight: normal; color:white; width:100%; }
form#newsletter input#email { border: none; height:12px; padding: 5px 5px; width:140px;}
input#submit { width:75px; height:22px; border:none; text-indent: -9999px; background: url(../images/submit.jpg) no-repeat; }

.top_left, .top_right {
	width: 250px;
	float: right;
	margin-top: 100px;
}

.top_left p, .top_right p {
	font-size: 11px;
	margin-left: 35px;
	line-height: 16px;
}

#right_header {
	position: absolute;
	right:0px;
	top:50px;
	width:600px;
	height:250px;
	z-index: 100;
}

#right_header_home {
	position: absolute;
	right:30px;
	top:56px;
	width:527px;
	height:281px;
	z-index: 100;
}

/* 4. Navigation and Subnavigation
-------------------------------------------------------------- */

ul#nav {
	padding:30px 0px 0px 60px;
	width: 165px;
	float: left;
	z-index: 1000;
}

ul#nav li { margin-bottom:3px; }	

ul#nav li a {
	width: 145px;
	height: 20px;
	display: block;
	text-indent: -9999px;
	cursor: pointer;
}

ul#nav li.about a { background: url(../images/btn_about.png) no-repeat; }
ul#nav li.creative a { background: url(../images/btn_creativesvcs.png) no-repeat; }
ul#nav li.marketing a { background: url(../images/btn_marketing.png) no-repeat; }
ul#nav li.xtratimes a { background: url(../images/btn_xtratimes.png) no-repeat; }
ul#nav li.contact a { background: url(../images/btn_contact.png) no-repeat; }

#topnavbuttons {
	position: absolute;
	z-index: 1000;
	left: 390px;
	top: 0px;
	width: 528px;
	height: 53px;
}

#xtrabuttons {
	position: absolute;
	z-index: 1000;
	left: 430px;
	top: -70px;
	width: 400px;
	height: 53px;
}

#creativesvcsbuttons {
	position: absolute;
	left: 480px;
	top: -70px;
	width: 400px;
	height: 53px;
}

/* 5. Content
-------------------------------------------------------------- */

#content {
	width:950px;
	margin:0 auto;
	position: relative;
	line-height: 18px;
}

.left { float: left; width: 50%; }
.right { float: left; width: 49%; }
.center { text-align: left; }

.left p, .left h2, .left div, .left ul, .left h3, 
.right p, .right h2, .right div, .right ul#work_samples, .right h3 { margin-left: 55px; }
.left ul, .right ul { font-size: 13px; color: #616262; margin:15px 0px; }
.left ul li, .right ul li { margin-bottom: 6px;}

.left h2#smaller {font-size: 15px;}

.right h2#smaller {font-size: 15px;}


h2.recent {
	float: left;
	width:144px;
	height:25px;
	margin-top: 30px;
	text-indent: -9999px;
	background: url(../images/recent_work.jpg) no-repeat;
}

a.view_all {
	color: white;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .5px;
	float: left;
	margin: 33px 0px 0px 10px;
}

ul#work_samples {
	clear: both;
	width:350px;
	margin-left: 40px;
}

ul#work_samples li {
	float: left;
	margin:0px 8px 4px 0px;
	cursor: pointer;
	position: relative;
	width:50px;
	height:50px;
}

ul#work_samples li img {
	width:50px;
	height:50px;
	position: absolute;
	top:0px;
	left:0px;
	border: 1px solid #555;
}

div.hello {
	position:absolute;
	width: 200px;
	height: 200px;
	background: red;
	display: none;
}

ul.marketing_list { padding-left: 120px;}

ul.newsletter_list { padding-left: 65px; line-height: 14px;}

.about_left .newsletter {
	padding: 0px;
}

.newsletter_left {
	position: relative;
	padding-left:0px;
	margin-right: 30px;
	float: left;
	width:345px;
}

.newsletter_left, .entry {
	margin-bottom: 30px;
}

li.year {
	font-size: 16px;
	color: #fff;
	margin-bottom: 5px;
}

li.issue {
	font-size: 12px;
	color: #666;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

li.subject {
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 5px;
	color: #fff;
}

div.panel img.award { margin-left: 0px; margin-bottom: 5px;}
img.award { float: left; }

/* 6. Pages
-------------------------------------------------------------- */

/* About Us */


.about_left {
	padding-left:45px;
	margin-right: 30px;
	float: left;
	width:345px;
}

.about_left img.matt {  }

.about_right {
	float: left;
	width:510px;
}

.about_right p {
	clear: both;
}

.about_left img {
	margin-bottom: 7px;
	float: left;
	margin-left: 7px;
	border:1px #7ac143 solid; 
}

.about_left div#lisa img {
	margin-bottom: 4px;
	margin-left: 4px;
}

h2#staff {
	width:200px;
	height:35px;
	background: url(../images/flaxen_crew.png) no-repeat;
	text-indent: -9999px;
}

ul#staff_nav {
	margin-bottom: 80px;
	width:100%;
}

ul#staff_nav li {
	float: left;
	margin-right: 10px;
}

ul#staff_nav a { 
	font-family: Georgia, Times, serif;
	text-decoration: none;
	font-size: 16px;
	padding: 0px 5px 10px 10px;
	width:100px;
}

ul#staff_nav a:hover, ul#staff_nav a.selected {
	color: #d58d39;
	background: url(../images/selected.png) no-repeat bottom;
} 

h3.staff {
	color: #d58d39;
	background: none;
	text-indent: 0px;
	text-transform: none;
	font-family: Georgia, Times, serif;
	font-size: 20px;
}

ul.social_networks {
	float: right;
	text-align: right;
	margin-top: 7px;
}

ul.social_networks li {
	float: left;
	text-align: right;
	color: #999;
	margin-right: 5px;
}

ul.social_networks li a { text-decoration: none; margin-right: 5px; }
ul.social_networks li a:hover { text-decoration: underline; }

div.divider {
	border-bottom: 1px solid #3e3d3d;
	margin:10px 0px 15px 0px;
	clear: both;
}

/* Creative Services */

/* nav bar */
ul#services_nav { position: absolute; top:1px; right:56px; width: 300px; } 
ul#services_nav li { float:left; margin-right: 2px; }
ul#services_nav a {
	text-transform: uppercase;
	text-decoration: none;
	color: #565656;
	background: url(../images/services_nav.jpg) repeat-x #0e0e0f;
	font-size: 10px;
	display: block;
	padding:5px 20px;
	border-top: 1px solid transparent;
}
ul#services_nav a:hover, 
ul#services_nav a.selected { color:#efefef; border-bottom: 1px solid #2e570e; }


/* community nav bar */
ul#community_nav { position: absolute; top:0px; left:85px; width:350px; } 
ul#community_nav li { float:left; margin-right: 2px; }
ul#community_nav a {
	text-transform: uppercase;
	text-decoration: none;
	color: #565656;
	background: url(../images/services_nav.jpg) repeat-x #0e0e0f;
	font-size: 10px;
	display: block;
	padding:5px 20px;
	border-top: 1px solid transparent;
}
ul#community_nav a:hover { color:#efefef; border-bottom: 1px solid #2e570e; }



/* for home - columns and everything within */
div.column { width:33.3%; float: left; }
.c1, .c2 { background: url(../images/border.jpg) top right repeat-y; }
.c1 h3, .c2 h3, .c3 h3, .c1 ul, .c2 ul, .c3 ul, .c1 a, .c2 a, .c3 a { margin:0px 40px 0px 60px; }
.c1 a, .c2 a, .c3 a { color: #6da943; font-weight: bold; }
.c1 h3, .c2 h3, .c3 h3 { margin-bottom: 10px; }
.c1 ul li, .c2 ul li, .c3 ul li { margin-bottom: 8px; }
.c1 ul, .c2 ul, .c3 ul { 
	font-size: 13px; 
	color: #616262; 
	padding-bottom: 40px; 
	margin-bottom: 10px;
	background: url(../images/divider.jpg) bottom right no-repeat; 
}
ul.sub { margin: 0px 0px 0px 15px; padding-bottom: 0px; background: none; }
ul.sub li { margin-bottom: 0px; }
h3.advertising a, h3.design a, h3.web a{
	text-indent: -9999px;
	width:175px;
	height:50px;
	background:top left no-repeat;
	display:block;
	margin-left:0px;
}
h3.advertising a { background-image: url(../images/services_advertising.png); }
h3.design a { background-image: url(../images/services_design.jpg); }
h3.web a { background-image: url(../images/services_web.jpg); }

.homeimg {
	float: left;
	margin: 10px 20px 10px 10px;
}

/* for body with tabs */
#slider {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
}

.scrollContainer div.panel {
  padding: 30px;
  width: 840px; /* change to 560px if not using JS to remove rh.scroll */
  color:white;
}

div.panel p { font-size: 12px; }
div.panel img.logo { margin-bottom: 15px; margin-left: 0px; }
div.panel img { margin-left: 15px; }

.scrollButtons { position: absolute; top: 150px; cursor: pointer; }
.scrollButtons.left_img { left: -20px; top: 175px; }
.scrollButtons.right_img { right: -20px; top:175px; }

ul.navigation { 
	height:43px;
	width:850px;
	background: url(../images/services_nav_bg.png) top no-repeat;
	padding:6px 20px 6px 0px;
	z-index: 700;
}
ul.web {
	background: url(../images/services_nav_bg_big.png) top no-repeat;
	height:100px;
	padding-top: 8px;
}

ul.advertising_nav { padding:6px 20px 6px 80px; width:850px; }
ul.design_nav { padding:6px 20px 6px 30px; width:880px; } 
ul.web_nav { padding:6px 20px 6px 80px; width:850px; }

ul.navigation li { float: left; margin-right: 6px; }

ul.navigation li a img { width:35px; height:35px; }
ul.navigation a { filter:alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; }
ul.navigation a:hover, ul.navigation a.selected { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; }


div.panel p.client { font-size: 22px; font-family: Georgia, Times, serif; margin: 60px 0px 10px 0px; line-height: 23px; }


/* Media */
h3.media {
	background: no-repeat top left;
	width: 239px;
	height: 53px;
	text-indent: -9999px;
}

h3.capabilities { background-image: url(../images/media_capabilities.png); margin-left: 115px; }
h3.channels { background-image: url(../images/media_channels.jpg); margin-left: 125px; }

/* Xtraordinary Times Newsletters Index */
h3.xtraordinarytimes {
	background: no-repeat top left;
	width: 261px;
	height: 115px;
	text-indent: -9999px;
}

h3.xtranewsletter { background-image: url(../images/xtratimesnwsltrhdr.png); margin-left: 45px; }

h3.newslettersummary {
	color: #c3b741;
	margin-top: 20px;
	margin-bottom: 15px;
	padding-bottom: 20px;
	border-bottom: 1px solid #3e3d3d;
	font-weight: normal;
}


/* Community Section */

.com_half {
	width: 47%;
	float: left;
}

.com_left { padding-right:3%; }
.com_right { padding-left:3%; }
.com_half .divider { margin-top: 15px; }

/*
.community_left {
	padding-left:45px;
	margin-right: 30px;
	float: left;
	width:300px;
}

.community_left img {
	margin-top: 20px;
	margin-bottom: 20px;
	float: left;
	margin-left: 7px;
	border:1px #7ac143 solid;
}

.community_left img.noborder {
	border: 0px;
}

.community_left p {
	margin-top: 20px;
}
*/

.about_right h4 {
	margin: 0px 0px 10px 0px;
}

h4.marketinglead {
	font-size: 12px;
	color:#999;
	line-height: 28px;
	margin-top: 35px;
	margin-top: 40px;
	padding:0px 20px;
	padding-top: 30px;
	text-align: center;
	font-family: Arial, Verdana, sans-serif;
}

.datestamp {
	margin: 20px 0px 3px 0px;
}

/* contact section */
.contactheadline {
	margin-top: 20px;
	margin-bottom: 15px;
	padding-bottom: 20px;
	border-bottom: 1px solid #3e3d3d;
}


/* 7. Footer 
-------------------------------------------------------------- */

#footer {
	width:950px;
	margin: 0px auto;
	text-align: center;
}

#footer p {
	color: #594d46;
}

/* The overlays and newsletters
-------------------------------------------------------------- */

.overlay { 
	background: #000;
	position: absolute;
	width:100%;
	height:100%;
	z-index: 1000;
	top:0px;
	left:0px;
	display: none;
}

.container { 
	z-index: 1001;
	position: absolute;
	width:626px;
	left:50%;
	margin-left: -313px;
	top:25px;
	display: none;
}

.newsimg { margin-left: 50px; }
.right img.wbenc { margin-left: 25px; position: relative; bottom:25px; }