/*The Blanco Group Website screen style sheet*/
/**************************************************************************************
date:   	3/3/09
author:    	Laura Yeffeth
email:     	laura@laurayeffeth.com
domain:   	http://www.jodee-theblancogroup.com/

/* =TABLE OF CONTENTS *****************************************************************

/* =COLOR SCHEME **********************************************************************

Main Text:							#4c4c4c	    GRAY
Page Title:							#333	    DARK GRAY
Form field borders					#999		LIGHT GRAY
Primary Navigation					#28556f		DARK BLUE
Secondary Navigation/h3 headings:	#27abeb	    BLUE
Content Background					#F0F2DD		TINT OF GRAY

/***** =LAYOUT ************************************************************************/
body {  
	text-align: center; /* This centers the container in IE 5* browsers*/
	z-index: 1;
}
div#container {
	position: relative;
	text-align: left; /* This overrides the text-align: center on the body element. */
	background: transparent url(../media/background.gif)  0 177px repeat-x; /*navbar strip*/
}
#content {
	position: relative;
	width: 600px;
	margin: 40px auto 0;
	padding: 2em;
	background-color: #F0F2DD;
	z-index: 0; /*Enables heading text to show if images are turned off above background color*/
}
#home #content, #motivation #content, #contact #content {
	margin: 100px auto 0;
}
/***** =TYPOGRAPHY ********************************************************************/
html {font-size: 100%}
body {  
	font: 62.5%/1.8 Georgia, Utopia, Palatino,'Palatino Linotype',serif;
	color: #333;
}
h1, h3, p, ul, ol, li {
	margin: .75em 0;
}
h1, h2, h3 {
	font-family: "lucida grande","lucida sans unicode", sans-serif;
}
h1 { /*Logo*/
	color: #28556f;
	font-size: 2.4em; 
}
h2 { /*Page Title Headings*/
	background-repeat: no-repeat;
	color: #333; 
	font-size: 1.8em; 
	font-weight: 100;
	height: 60px;
	line-height: 1.4em; 
	text-transform: uppercase;
	text-indent: 2px;
	width: 600px;
}
#ourteam h2 {background: transparent url(../media/h2.png) 0 0px;}
#jodee_blanco h2 {background: transparent url(../media/h2.png) 0 -60px;}
#kent_carroll h2 {background: transparent url(../media/h2.png) 0 -120px;}
#cb h2 {background: transparent url(../media/h2.png) 0 -180px;}
#cb_works h2 {background: transparent url(../media/h2.png) 0 -240px;}
#cb_authors h2 {background: transparent url(../media/h2.png) 0 -300px;}
#cb_packages h2 {background: transparent url(../media/h2.png) 0 -360px;}
#cb_faq h2 {background: transparent url(../media/h2.png) 0 -420px;}
#cb_successes h2 {background: transparent url(../media/h2.png) 0 -480px;}
#pr h2 {background: transparent url(../media/h2.png) 0 -540px;}
#pr_development h2 {background: transparent url(../media/h2.png) 0 -600px;}
#pr_training h2 {background: transparent url(../media/h2.png) 0 -660px;}
#pr_inhouse h2 {background: transparent url(../media/h2.png) 0 -720px;}
#motivation h2 {background: transparent url(../media/h2.png) 0 -780px;}
#contact h2 {background: transparent url(../media/h2.png) 0 -840px;}
h3 {
	font-size: 2.2em; 
	color: #27abeb; 
	line-height: 1.4em; 
	margin: .5em 0;
	font-weight: 100;
}
h4, p, ul, ol {
	font-size: 1.6em;
	text-align: justify;
}
h4 {
	font-weight: 600;
}
#navList, #subNav {
	font-size: 1.4em;
}
p.note {
	font-style: italic;
	font-size: 1.4em;
}
#cb_faq p {
	line-height: 1.6em;
}
p.question {
	padding-top: 1em;
	font-weight: 600; 
}
p.answer {
	font-style: italic;
}
#intro p {
	font-weight: 700;
}
#intro strong {
	text-transform: uppercase;
	font-weight: 700;
	color: #27abeb;
}
/* LISTS */
#content ul {list-style: disc inside;}
#content ol {list-style: decimal inside;}
#contact #content ul, #home #content ul  {list-style: none outside;}

/***** =IMAGE REPLACEMENT *************************************************************

Neal Image Replacement by Neal Venditto:  http://neal.venditto.org/
This technique allows for text to show up in place of images when style sheets 
are disable or when images are turned off.

In your html, add class "replace" to any text element you want to replace with an image.
Then surround the text with <span> tags. */

.replace span {
	position: relative;
	z-index:-1;
}
.replace a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
/***** =LINKS *************************************************************************/
a:link, a:visited {
	text-decoration: none; 
	color: #4c4c4c; 
	border-bottom: 2px solid #666;
}
a:hover, a:active {
	text-decoration: none; 
	color: #27abeb; 
	border-bottom: 2px solid #27abeb;
}
li.navMenu a, li.subMenu a, h1#logo a{
	border-bottom: none;
}
/***** =HEADER ***********************************************************************/
#header {
	padding-top: 30px;
	height: 197px;
}
h1#logo {
	display: block;
	font-size: 3.6em;
	height: 117px;
	margin: 0 auto 30px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 600px;
}
h1#logo span.home {
	position: absolute;
	right: -20px;
	top: 271px;
}
h1#logo span a { /* Image Replacement of HOME link*/
	background: transparent url(../media/home.gif) 0 0 no-repeat;
	font-size: .45em;
	height: 25px;
	text-align: center;
	text-transform: uppercase;
	width: 60px;
}
#home h1#logo span a {
	display: none;
}
h1#logo span a:hover {
	background: transparent url(../media/home.gif) 0 -25px no-repeat;
}
/***** =NAVIGATION *******************************************************************/
/*=PRIMARY NAVIGATION*/
#navBar {
	height: 60px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
}
#navList  {
	position: relative;
	width: 960px;
	height: 60px;
	margin: 0 auto;
	background: transparent url(../media/navigation.png) no-repeat;
	overflow: hidden;
}
li.navMenu {
	position: absolute;
	top: 0;
	display: block; /*eliminates any flickering of the hover images*/
	height: 60px; 
	margin: 0;
}
li.teamMain {width: 95px; left: 0;}
li.carrollMain {width: 141px; left: 95px;}
li.prMain {width: 365px; left: 236px;}
li.motivationMain {width: 248px; left: 601px;}
li.contactMain {width: 111px; left: 849px;}

li.teamMain a {background: transparent url(../media/navigation.png) 0 0px;}
li.carrollMain a {background: transparent url(../media/navigation.png) -95px 0px;}
li.prMain a {background: transparent url(../media/navigation.png) -236px 0px;}
li.motivationMain a {background: transparent url(../media/navigation.png) -601px 0px;}
li.contactMain  a {background: transparent url(../media/navigation.png) -849px 0px;}

li.teamMain a:hover {background: transparent url(../media/navigation.png) 0  -60px;}
li.carrollMain a:hover {background: transparent url(../media/navigation.png) -95px -60px;}
li.prMain a:hover {background: transparent url(../media/navigation.png) -236px -60px;}
li.motivationMain a:hover {background: transparent url(../media/navigation.png) -601px -60px;}
li.contactMain  a:hover {background: transparent url(../media/navigation.png) -849px -60px;}

/*The following code causes the active page to be highlighted in the navBar*/
#ourteam li.teamMain a, #jodee_blanco li.teamMain a, #kent_carroll li.teamMain a {
	background: transparent url(../media/navigation.png) 0 -120px; color: #28556f;}
#cb li.carrollMain a,  #cb_works li.carrollMain a,  #cb_authors li.carrollMain a,  #cb_packages li.carrollMain a,  #cb_faq li.carrollMain a,  #cb_successes li.carrollMain a {
	background: transparent url(../media/navigation.png) -95px -450px; color: #28556f;}
#pr li.prMain a, #pr_development li.prMain a, #pr_training li.prMain a, #pr_inhouse li.prMain a {
	background: transparent url(../media/navigation.png) -236px -1110px; color: #28556f;}
#motivation li.motivationMain a {
	background: transparent url(../media/navigation.png) -601px -1550px; color: #28556f;}
#contact li.contactMain a {
	background: transparent url(../media/navigation.png) -849px -1610px; color: #28556f;}

/*The following code causes the active page's tab to be highlighted in the navBar when rolled over*/
#ourteam li.teamMain a:hover, #jodee_blanco li.teamMain a:hover, #kent_carroll li.teamMain a:hover {
	background: transparent url(../media/navigation.png) 0 -60px;}
#cb li.carrollMain a:hover, #cb_works li.carrollMain a:hover, #cb_authors li.carrollMain a:hover,  
#cb_packages li.carrollMain a:hover, #cb_faq li.carrollMain a:hover, #cb_successes li.carrollMain a:hover {
	background: transparent url(../media/navigation.png) -95px -60px;}
#pr li.prMain a:hover, #pr_development li.prMain a:hover, #pr_training li.prMain a:hover, 
#pr_inhouse li.prMain a:hover {
	background: transparent url(../media/navigation.png) -236px -60px;}
#motivation li.motivationMain a:hover {
	background: transparent url(../media/navigation.png) -601px -60px;}
#contact li.contactMain a:hover {
	background: transparent url(../media/navigation.png) -849px -60px;}

/* STYLING OF THE TEXT REPLACEMENT FOR THE NAVIGATION LINKS */
li.navMenu a {
	color: #454545;
	display: block;
	font-size: .76em;
	font-weight: 700;
	line-height: 1.34em;
	text-align: center;
	text-transform: uppercase;
}
li.navMenu a:hover {
	border-bottom: none;
	color: #28556f;
}
/*=SECONDARY NAVIGATION*/
#subnavBar {
	position: relative;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	height: 60px;
	clear: both;
	margin: 0 auto;
	width: 960px;
}
#subNav {
	position: absolute;
	margin: 0;
	top: 0;
	height: 60px;
	overflow: hidden;
	width: 960px;
}
#ourteam #subNav {background: transparent url(../media/navigation.png) 0 -170px no-repeat;}
#cb #subNav {background: transparent url(../media/navigation.png) 0 -500px no-repeat;}
#pr #subNav {background: transparent url(../media/navigation.png) 0 -1160px no-repeat;}

li.subMenu {
	position: absolute;
	display: block; /*eliminates any flickering of the hover images*/
	height: 60px; 
	margin: 0;
}
#subNav li.jodee {left: 11px; width: 99px;}
#subNav li.kent {left: 110px; width: 99px;}
#subNav li.works {left: 106px; width: 152px;}
#subNav li.authors {left: 258px; width: 153px;}
#subNav li.packages {left: 412px; width: 224px;}
#subNav li.faq {left: 636px; width: 197px;}
#subNav li.successes {left: 833px; width: 127px;}
#subNav li.development {left: 247px; width: 242px;}
#subNav li.training {left: 489px; width: 215px;}
#subNav li.inhouse {left: 704px; width: 256px;}

#subNav li.jodee a {background: transparent url(../media/navigation.png) -11px -170px;}
#subNav li.kent a {background: transparent url(../media/navigation.png) -110px -170px;}
#subNav li.works a {background: transparent url(../media/navigation.png) -106px -500px;}
#subNav li.authors a {background: transparent url(../media/navigation.png) -258px -500px;}
#subNav li.packages a {background: transparent url(../media/navigation.png) -412px -500px;}
#subNav li.faq a {background: transparent url(../media/navigation.png) -636px -500px;}
#subNav li.successes a {background: transparent url(../media/navigation.png) -833px -500px;}
#subNav li.development a {background: transparent url(../media/navigation.png) -247px -1160px;}
#subNav li.training a {background: transparent url(../media/navigation.png) -489px -1160px;}
#subNav li.inhouse a {background: transparent url(../media/navigation.png) -704px -1160px;}

/*The following code causes the active page, and rollover tab to be highlighted in the navBar*/
#subNav li.jodee a:hover, #jodee_blanco li.jodee a {
	background: transparent url(../media/navigation.png) -11px -280px; color: #27abeb;}
#subNav li.kent a:hover, #kent_carroll li.kent a {
	background: transparent url(../media/navigation.png) -110px -390px; color: #27abeb;}
#subNav li.works a:hover, #cb_works li.works a {
	background: transparent url(../media/navigation.png) -106px -610px; color: #27abeb;}
#subNav li.authors a:hover, #cb_authors li.authors a {
	background: transparent url(../media/navigation.png) -258px -720px; color: #27abeb;}
#subNav li.packages a:hover, #cb_packages li.packages a {
	background: transparent url(../media/navigation.png) -412px -830px; color: #27abeb;}
#subNav li.faq a:hover, #cb_faq li.faq a {
	background: transparent url(../media/navigation.png) -636px -940px; color: #27abeb;}
#subNav li.successes a:hover, #cb_successes li.successes a {
	background: transparent url(../media/navigation.png) -833px -1050px; color: #27abeb;}
#subNav li.development a:hover, #pr_development li.development a {
	background: transparent url(../media/navigation.png) -247px -1270px; color: #27abeb;}
#subNav li.training a:hover, #pr_training li.training a {
	background: transparent url(../media/navigation.png) -489px -1380px; color: #27abeb;}
#subNav li.inhouse a:hover, #pr_inhouse li.inhouse a {
	background: transparent url(../media/navigation.png) -704px -1490px; color: #27abeb;}

/* STYLING OF THE TEXT REPLACEMENT FOR THE NAVIGATION LINKS */
li.subMenu a {
	color: #454545;
	display: block;
	font-size: .76em; 
	line-height: 1.34em;
	text-align: center;
	text-transform: uppercase;
}
li.subMenu a:hover {
	border-bottom: none;
	color: #27abeb;
}
/***** =IMAGES ***********************************************************************/
#jodee_blanco #content img {
	border: 2px solid #999;
	float: left;
	margin: 20px 20px 0 0;
}
p.photocredit {
	clear: left;
	float: left;
	font-family: verdana, arial, sans-serif;
	font-size: 1.2em;
	margin-left: 4px;
	width: 240px;
	margin-bottom:.25em;
}
 a.download {
	clear: left;
	float: left;
	font-family: verdana, arial, sans-serif;
	margin-left: 4px;
	width: 240px;
	text-transform:uppercase;
	border-bottom:none;
}
/***** =FORM *************************************************************************/
.contactInfo {
	margin-left: 40px;
}
.contactInfo p, .contactInfo ul, .contactInfo form {
	margin-bottom: 2em;
}
.contactInfo form ul li {
	margin: 0;
}
.contactInfo .link {
margin-right: 40px;
line-height: 1.2em;
text-align: left;
}
input {
	width: 300px;
	font-size: 1em;
	margin-bottom: 1em;
}
input.name, input.phone, input.email {
	height: 20px;
	border: 1px solid #999;
}
input.button {
	margin-top: 20px;
	width: 50px;
	font-size: .85em;
	font-family: Georgia, Utopia, Palatino,'Palatino Linotype',serif;
}
textarea {
	border: 1px solid #999;
	font-family: "lucida grande","lucida sans unicode", sans-serif;
	font-size: 1em;
	width: 520px;
}
form em {
	font-size: .9em;
	font-style: italic;
}
.warning {color: red;}
.confirmation {color: #27abeb;}
/***** =FOOTER ***********************************************************************/
#footer {
	width: 620px;
	margin: 0 auto;
}
#footer p {
	font: 1.1em/ 1em arial, verdana, sans-serif;
	color: #999;
	text-transform: uppercase;
	padding-bottom: 20px;
}
#footer p.copyright {
	float: left;
}
#footer p.design {
	float: right; 
}
#footer img {
	display: inline;
	float: left;
	margin: 0;
	border: 0;
}
#footer a {
display: block;
height: 11px;
}
#footer a:link, #footer a:visited  {
	text-decoration: none; color: #4c4c4c; 
	border-bottom: none;
}
#footer a:hover,#footer  a:active {
	text-decoration: none; 
	color: #27abeb; 
	border-bottom: 1px solid #27abeb;
}