/* CSS Document for Creative Eye */
/* 27/04/2005 */

/* This is my css file so get your grubby little mits off! ;-) */

/* helper Styles
******************************************************************************************************/

/* Set all element padding and margins to 0 in order to avoid specifying this a zillion times */

* {
	margin:0px;
	padding:0px;
}

.clear {
	clear:both;
}

.hide {
	display:none;
}

#message {
	display:none;
}

/* Layout
******************************************************************************************************/

body {
	background:#fff url(../img/bg9.gif) repeat-y center;
	font-size:72.5%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/* For IE to center page */
	text-align:center;
}
#wrapper {
	/* All that is needed for standards compliant browsers to center page*/
	margin:0px auto;
	width:760px;
	background:#fff;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
}

#header {
	width: 760px;
	height:100px;
	background:#039 url(../img/logo_creativeEye.gif);
	display:block;
	

}
#header h1 {
	width: 760px;
	height:100px;
	margin:0px;
	padding:0px;
	/*text-indent:-9999px; /* Hide text, especially important for IE 5.1 to display background image*/
}
#header span {
	display:none;
}
#nav {
	background:#f90 url(../img/bg_nav2.gif) repeat-x;
	width:760px;
	height:35px;
}
#banner {
	width: 760px;
	height:165px;
	text-align:left;
	background:#efefef url(../img/banner.jpg);
	display:block;
	
}
#banner h1 a:link, #banner h1 a:visited{
	display:block;
	width: 760px;
	height:165px;
	text-decoration:none;
}
#banner span {
	display:none;
}
#breadCrumb {
	
	background: #fff;
	text-align:left;
}

#outer{ 
 	border:solid white 0px; 
  	/*/*/ border-right-width: 260px; /* right column width. NN4 hack to hide borders */ 
	border-right-color: #fff;  /* right column colour */ 
	border-right-style: solid; 
  	background-color: #FFFFFF; /* center column colour */ 
	width: auto; 
 } 
 
#rightCol{
 	/*/*/ width:260px; /* hack keeps NN4 right column right? */ 
 	float:right; 
	position:relative; 
  	margin-right:-260px; 
 	margin-left:1px; 
 	text-align:left;
} 
 
#inner{margin:0; width:100%;}
 
#mainCol{ 
 	float: left; 
 	width: 100%; 
 	position: relative; 
 	margin: 0 -8px 0 -2px; 
 	text-align:left;
 }
 
#outer>#inner { border-bottom: 1px solid #FFFFFF;  }
 
.clr{clear:both;}
 
.content{padding:10px 10px 10px 15px;} /*padding for content this was set to 10px. Change if any bugs appear 05/05/2005 */ 
 
 
#footer {
	width: 760px;
	height:100px;
	text-align:left;
	/*background:#efefef url(../img/bg_footer.gif) no-repeat;*/
	border-top:1px solid #ccc;
	
}








/* Start Nav Styles 
******************************************************************************************************/
#nav ul li {
 	list-style-type: none;
	float: left;
	/*text-indent:-9999px;*/
}
#nav span {
 	display:none;
}
#nav li#home a:link, #nav li#home a:visited {
	float: left;
	text-decoration: none;
	display: block;
	width: 66px;
	height:35px;
	background:#f90 url("../img/nav/nav_home.gif") no-repeat;
}
#nav li#home a:hover, body#homeSection #nav li#home a:link, body#homeSection #nav li#home a:visited {
	text-decoration: none;
	background-position: 0 -35px;
}
#nav li#about a:link, #nav li#about a:visited{
	float: left;
	text-decoration: none;
	display: block;
	width: 135px;
	height:35px;
	background:#f90 url("../img/nav/nav_about.gif") no-repeat;
}
#nav li#about a:hover, body#aboutSection #nav li#home a:link, body#aboutSection #nav li#about a:visited{
	text-decoration: none;
	background-position: 0 -35px;
}
#nav li#caseStudies a:link, #nav li#caseStudies a:visited{
	float: left;
	text-decoration: none;
	display: block;
	width: 99px;
	height:35px;
	background:#f90 url("../img/nav/nav_caseStudies.gif") no-repeat;
}
#nav li#caseStudies a:hover, body#caseStudiesSection #nav li#caseStudies a:link, body#caseStudiesSection #nav li#caseStudies a:visited{
	text-decoration: none;
	background-position: 0 -35px;
}
#nav li#articles a:link, #nav li#articles a:visited{
	float: left;
	text-decoration: none;
	display: block;
	width: 68px;
	height:35px;
	background:#f90 url("../img/nav/nav_articles.gif") no-repeat;
}
#nav li#articles a:hover, body#articlesSection #nav li#articles a:link, body#articlesSection #nav li#articles a:visited{
	text-decoration: none;
	background-position: 0 -35px;
}
#nav li#training a:link, #nav li#training a:visited{
	float: left;
	text-decoration: none;
	display: block;
	width: 75px;
	height:35px;
	background:#f90 url("../img/nav/nav_training.gif") no-repeat;
}
#nav li#training a:hover, body#trainingSection #nav li#training a:link, body#trainingSection #nav li#training a:visited{
	text-decoration: none;
	background-position: 0 -35px;
}
#nav li#jointVentures a:link, #nav li#jointVentures a:visited{
	float: left;
	text-decoration: none;
	display: block;
	width: 115px;
	height:35px;
	background:#f90 url("../img/nav/nav_jointVentures.gif") no-repeat;
}
#nav li#jointVentures a:hover, body#jointVenturesSection #nav li#jointVentures a:link, body#jointVenturesSection #nav li#jointVentures a:visited{
	text-decoration: none;
	background-position: 0 -35px;
}
#nav li#recommendations a:link, #nav li#recommendations a:visited{
	float: left;
	text-decoration: none;
	display: block;
	width: 144px;
	height:35px;
	background:#f90 url("../img/nav/nav_recommendations.gif") no-repeat;
}
#nav li#recommendations a:hover, body#recommendationsSection #nav li#recommendations a:link, body#recommendationsSection #nav li#recommendations a:visited{
	text-decoration: none;
	background-position: 0 -35px;
}

#nav li#links a:link, #nav li#links a:visited{
	float: left;
	text-decoration: none;
	display: block;
	width: 58px;
	height:35px;
	background:#f90 url("../img/nav/nav_links.gif") no-repeat;
}
#nav li#links a:hover, body#linksSection #nav li#linkss a:link, body#linksSection #nav li#links a:visited{
	text-decoration: none;
	background-position: 0 -35px;
}






/* Panels in Right Column
******************************************************************************************************/

/* Yellow panels */
#rightCol .box {
width:238px;
padding:7px 0 0;
margin-bottom:8px;
text-align:left;
background:#ffc url(../img/panel_top.gif) no-repeat left top;
}
#rightCol .box h3 {
font-size:1.1em;
padding-bottom:2px;
border-bottom:1px solid #EAEAB5;
}
#rightCol .box p {
font-size:1.1em;
/* zero padding at bottom needed to display bottom curve in IE 6*/
padding:5px 0 0 0;

}
#rightCol .box label {
font-size:1.1em;
font-weight:bold;
}
#rightCol .box div {
background:url(../img/panel_bottom.gif) no-repeat left bottom;
padding:0 0 7px;
}
#rightCol .box div div {
background:url(../img/panel_middle.gif) repeat-y left top;
padding:0 10px 0;
}

/* Green panels */
#rightCol .greenBox {
width:238px;
padding:7px 0 0;
margin-bottom:8px;
text-align:left;
background:#ffc url(../img/panel_green_top.gif) no-repeat left top;
}
#rightCol .greenBox h3 {
font-size:1.1em;
padding-bottom:2px;
border-bottom:1px solid #D3E5AE;
}
#rightCol .greenBox p {
font-size:1.1em;
/* zero padding at bottom needed to display bottom curve in IE 6*/
padding:5px 0 0 0;

}
#rightCol .greenBox label {
font-size:1.1em;
font-weight:bold;
}
#rightCol .greenBox div {
background:url(../img/panel_green_bottom.gif) no-repeat left bottom;
padding:0 0 7px;
}
#rightCol .greenBox div div {
background:url(../img/panel_green_middle.gif) repeat-y left top;
padding:0 10px 0;
}





/* panels in Main Col
*************************************************************************************************** */

#mainCol .box {
width:400px;
padding:7px 0 0 0;
margin-bottom:8px;
margin:10px 0px 8px 30px;
text-align:left;
background:#ffc url(../img/panel2_top.gif) no-repeat left top;
}
#mainCol .box h3 {
font-size:1.1em;
padding-bottom:2px;
border-bottom:1px solid #EAEAB5;
}
#mainCol .box p {
font-size:1.1em;
/* zero padding at bottom needed to display bottom curve in IE 6*/
padding:5px 0 0 0;

}
#mainCol .box label {
font-size:1.1em;
font-weight:bold;
}
#mainCol .box div {
background:url(../img/panel2_bottom.gif) no-repeat left bottom;
padding:0 0 7px;
}
#mainCol .box div div {
background:url(../img/panel2_middle.gif) repeat-y left top;
padding:0 10px 0;
}





/* Link Styles 
******************************************************************************************************/

a:link, a:visited {
	text-decoration:underline;
	color:#0066CC;

}
a:hover {
	text-decoration:underline;
	color:#000;

}

.greenBox a:link, .greenBox a:visited {
	text-decoration:underline;
	color:#009966;
}
.greenBox a:hover {
	text-decoration:underline;
	color:#000;
}
.box a:link, .box a:visited {
	text-decoration:underline;
	color:#FF6600;
}
.box a:hover {
	text-decoration:underline;
	color:#000;
}
#footer a:link, #footer a:visited {
	text-decoration:underline;
	color:#0066CC;
}
#footer a:hover {
	text-decoration:underline;
	color:#000;
}
p#white a:link, p#white a:visited {
	text-decoration:underline;
	color:#fff;
}
p#white a:hover {
	text-decoration:underline;
	color:#fff;
}



/* Lists
******************************************************************************************************/

#mainCol ul {
list-style:none;
margin:10px 0 10px 10px;
padding:0;
}

#mainCol li{
	list-style:none;
	font-size:1.2em;
	line-height:1.8em;
	color:#333;
	padding:0 10px 10px 10px;
	
}

#rightCol ul {
	list-style:none;
	margin:0;
	padding:0;
	font-size:1.1em;
	line-height:17px;
}

#rightCol li {
	padding:0 0 0 1.1em;
	color:#595947;
	background:url(../img/blt01.gif) no-repeat left;
}


/* Typography
******************************************************************************************************/
#breadCrumb p {
	padding:4px 10px;
	color:#999999;
}

#mainCol h2{
	padding:0px;
	margin:10px 0px;
}
#mainCol h2 span {
	/* Using this instead of text-indent -9999 on all of the headers as that may cause SEo issues
	   and also IE 5.1 indents background image along with text */
	display:none;
}
h2#welcomeHeader {
	display:block;
	width:200px;
	height:17px;
	background:url(../img/headers/welcome.gif) no-repeat;
}
h2#aboutHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/aboutOurServices.gif) no-repeat;
}
h2#caseStudiesHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/caseStudies.gif) no-repeat;
}
h2#articlesHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/articles.gif) no-repeat;
}
h2#recommendationsHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/recommendations.gif) no-repeat;
}
h2#toolsAndProductsHeader {
	display:block;
	width:300px;
	height:17px;
	background:url(../img/headers/toolsAndProducts.gif) no-repeat;
}

h2#appraisalHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/freeWebsiteAppraisal.gif) no-repeat;
}
h2#contactHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/contactUs.gif) no-repeat;
}
h2#linksHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/links.gif) no-repeat;
}
h2#emailAFriendHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/emailAFriend.gif) no-repeat;
}
h2#thankyouHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/thankYou.gif) no-repeat;
}
h2#accessibilityStatementHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/accessibilityStatement.gif) no-repeat;
}
h2#siteMapHeader {
	display:block;
	width:189px;
	height:17px;
	background:url(../img/headers/siteMap.gif) no-repeat;
}
h2#newsletterHeader {
	display:block;
	width:205px;
	height:17px;
	background:url(../img/headers/newsletter.gif) no-repeat;
}
#jointVenturesHeader {
	display:block;
	width:205px;
	height:17px;
	background:url(../img/headers/jointVentures.gif) no-repeat;
}

#trainingHeader {
	display:block;
	width:205px;
	height:17px;
	background:url(../img/headers/training.gif) no-repeat;
}
#rssHeader {
	display:block;
	width:205px;
	height:17px;
	background:url(../img/headers/whatisrss.gif) no-repeat;
}
h2#errorHeader {
	display:block;
	width:205px;
	height:17px;
	background:url(../img/headers/error.gif) no-repeat;
}
/* sub headers used primarily on Case Studies section*/
#mainCol h3 {
	color:#003399;
	font-size:1.2em;
	line-height:1.8em;
	font-weight:bold;
	margin-top:10px;
}
#mainCol p{
	color:#333333;
	font-size:1.2em;
	line-height:1.8em;
	text-align:left;
	padding:4px 0px
}
#mainCol em{
	color:#039;

}
#mainCol strong {
	color:#003399;
}
#rightCol p {
	color:#333333;
	font-size:1.1em;
	line-height:1.8em;
	text-align:left;
	padding:4px 0px
}
#rssFeed h3{
	color:#333333;
	font-size:1.2em;
	font-weight:bold;
	line-height:1.8em;
	text-align:justify;
	padding:4px 0px
}

#mainCol dt {
	padding:4px 0px;
	font-size:1.2em;
	line-height:1.8em;
	color:#003399;
	font-weight:bold;
	/*border-bottom:1px dotted #003399;*/
}
#mainCol dd {
	font-size:1.2em;
	line-height:1.8em;
	padding:4px 0px;
	color:#333333;
}




/* Misc Styles
******************************************************************************************************/

#rssFeed {
	margin:5px 0px;
	color:#333333;
	font-size:1.2em;
}

#textAlert {
	width:332px;
	color:#FF3300;
	border:1px solid #FF3300;
	background-color:#FFFFCC;
	padding:10px;
	margin:5px 0;
}
#textAlert li, #textAlert p, #textAlert strong{
	color:#FF3300;
}
#textAlert2 {
	color:#FF3300;
}
#textAlert2 li, #textAlert p, #textAlert2 strong{
	color:#FF3300;
}
p#textAlert2 , p#textAlert2 strong {
	color:#FF3300;
}
#authorDetails {
	margin:10px 0px;
	padding:10px 0px;
	border-top:1px solid #ccc;
}
#author {
	float:left;
	padding:0px 10px 10px 10px;
	
}
#authorText span {
	font-size:1.1em;
	line-height:1.8em;
	font-style:italic;
	color:#666666;
}
#callToAction {
	width:400px;
	padding:10px;
	margin:10px 0px 10px 30px;
	border:1px solid #009966;
	background:#EBF7D2;
}
#callToAction p,  #callToAction strong {
	color:#009966;
}
#callToAction a:link, #callToAction a:visited {
	text-decoration:underline;
	color:#009966;
}
#callToAction a:hover {
	text-decoration:underline;
	color:#000;
}
#tableAccesskeys {
	width:400px;
}
#tableAccesskeys th, #tableAccesskeys td{
	padding:5px;
	font-size:12px;
	text-align:left;
	color:#039;
}
#tableAccesskeys caption {
	display:none;
}


/* Footer
******************************************************************************************************/

.footerContent{padding:10px;} /*padding for footer */ 

#footer li{
 	display:inline;
	margin:0px; 
 	padding:0 5px 0 0; 
	font-size:1.1em;
	color:#000;
	border-left:1px solid #ccc;
	padding-left:12px;
}
#footer li#footerHome {
	border:none;
	padding-left:0px;
}
#footer p {
	padding:6px 0px;
	font-size:1.1em;
	color:#666666;
}




/* Forms 
******************************************************************************************************/

formPanel {
	border:1px solid #ccc;
	background:#efefef url(../img/panel_forms.gif) repeat;
	padding:10px;
}

fieldset {
	border:none;
}

.newsletterInput {
	width:150px;
	font-size:1.1em;
	margin-left:5px;
	
}	
.newsletterInput2 {
	width:150px;
	font-size:1.1em;
	margin-left:7px;
	
}	
.newsletterButton {
	font-size:1.0em;
	margin-left:42px;
}
label {
	font-size:1.1em;
}
.frmInput2 {
	width:350px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:4px 0px;
}
.frmSelect {
	width:354px;
	font-size:1.1em;
	margin:4px 0px;
}
.frmCheckbox {
	margin-right:4px;
}
.frmButton {
	margin-top:4px;
	font-size:1.1em;

}

/* Case Study Styles
 ******************************************************************************************************* */
/* Box Model Hack used here to give nice border on all browsers including IE 5.1, 5.5
   http://tantek.com/CSS/Examples/boxmodelhack.html */
#caseStudyMainImage div {
	width:456px;
	padding:4px;
	margin:10px 0;
	border:1px solid #ccc;
	voice-family: "\"}\""; 
    voice-family:inherit;
    width:448px;

}
html>body #caseStudyMainImage div {
  width:448px;
} 

#caseStudySmallImages div {
	float:left;
	width:142;
	padding:4px;
	margin:0 12px 10px 0;
	border:1px solid #ccc;
	voice-family: "\"}\""; 
    voice-family:inherit;
    width:134px;
}
html>body #caseStudySmallImages div {
  width:134px;
} 

/* Styles for Recomendations pages
************************************************************************************************************ */

.floatRight {
	float:right;
	padding:0 20px;
}
.floatRight p, .floatRight object, .floatRight embed {
	margin: 0;
	padding:0;
}

#cbMall p{
	margin: 0;
	padding:2px 0;
}
#cbMall ul{
	margin: 0;
	padding:0;
	
}
#cbMall li{
	margin: 0;
	padding:2px 10px 0 0;
	display:inline;
}
/* Styles for Home Page
************************************************************************************************************ */
.box2 {
width:225px;
height:220px;
float:left;
margin:10px 0px 0px 20px;
text-align:left;
background:#ffc;
border:1px solid #ccc;
}
.box2 h3 {
font-size:1.2em;
padding-bottom:4px;
color:#003399;
border-bottom:1px solid #EAEAB5;
}
.box2 p {
font-size:1.1em;
/* zero padding at bottom needed to display bottom curve in IE 6*/
padding:5px 0 0 0;

}
.box2 .content{padding:20px;} /*padding for content this was set to 10px. Change if any bugs appear 05/05/2005 */ 

.floatLeft {
	float:left;
	margin:0px;
	padding:5px 0 0 10px;
}
.floatLeft img{
	border:none;
	}
#tblTrainingDates th {
	text-align:left;
	padding:6px;
	font-size:1.2em;
	color:#003399;
	background:#efefef;
	}
#tblTrainingDates td {
	text-align:left;
	padding:6px;
	font-size:1.2em;
	color:#333333;
	background:#efefef;
}
/* Links Page
************************************************************************************************************ */

code {
	font-family:"Courier New", Courier, mono;
	font-size:1.1em;
	line-height:1.8em;
	color:#666666;
	padding:4px 0;
	
}