/* --------------  Main CSS doc: structural and key presentational elements ----------- */
* {margin:0;padding:0}
html {
	background:white;
	}
body{
	 font-size: 95%;
	 font-family: verdana, Tahoma, Helvetica, sans-serif;
	 line-height: 1.3;
	 word-spacing: 0.0em;
	 margin-left:auto;
	 margin-right:auto;
	}
#navWrapper{
	background-image:url(/images/navBackground.png);
	background-repeat:repeat-x;
	background-color:#3f3f3f;
	border-top:5px solid white;
	border-bottom:5px solid white;
	height:32px;
	}
#footer{
	border-top:5px solid #FCAF17;
	background:#FDCD3B;
	color:black;
	clear:both;
	padding-top:3px;
 	} 
 #copyright{
 	font-size:0.7em;
 	color:white;
	background-image:url(/images/navBackground.png);
	background-repeat:repeat-x;
	background-color:#3f3f3f;
 	} 
 #copyright p{
	padding:7px 0 7px 0;
	width:950px;
	margin-left:auto; /* Centering content on the page */
	margin-right:auto;
 	text-align:left; /* Counter IE's need to center text alignment too */
	}
#footer ul{
 	width:950px;
 	margin-left:auto; /* Centering content on the page */
 	margin-right:auto;
 	text-align:left; /* Counter IE's need to center text alignment too */
 	padding-top:2px;
 	padding-bottom:9px;
 	font-size:0.9em;
 	margin-bottom:0;
	}
#footer li{
	display:inline;
	}
#footer ul a{
	padding:0px 30px 0px 0px;
	}
#footer a:link{
	color:black;
	}
#footer a:hover{
	color:#990000;
	}
#content{
	width:750px;
	margin-left:auto;
	margin-right:auto;
 	text-align:left; 
 	padding-top:1em;
	}
#contentWithNav{ /* whenever a side nav is used */
	float:right;
	width:650px;
	text-align:left;
	}

/* -------------- End main structural elements ----------- */


/* -------------- Navigation elements ----------- */

#nav{
	width:950px;
	margin-left:auto; /* Centering content on the page */
	margin-right:auto;
	text-align:right; /* Counter IE's need to center text alignment too */
	}
#nav ul{
	padding-top:5px;
	padding-bottom:5px;
	}

#nav li{
	display:inline;
	}
#nav ul a{
	padding:7px 12px 8px 12px;
	color:white;
	text-decoration:none;
	white-space:nowrap;
	}
#nav ul a:hover{
	background:white;
	background-image:url('/images/active.png');
	color:black;
	}
#skip{
	color:gray;
	display:none;
	}
#logo{
	float:left;
	padding:0;
	margin:-4px; 0 0 0;
	width:242px;
	height:68px;
	}
#active{
	background:white;
	background-image:url('/images/active.png');
	color:black;
	}
#sideNav li{
	list-style-type:none;
	padding: 0px;
	border-bottom:2px solid #FCAF17;
	}
#sideNav li:first-child{
	border-top:2px solid #FCAF17;
	}
#sideNav a{
	display:block;
	padding:7px 0px 7px 15px;
	background-image:url(/images/bullet.png);
	background-repeat:no-repeat;
	background-position: left center;
	}
#sideNav a:hover{
	background-color:#FDCD3B;
	color:black;
	}
#sideNav{
	width:250px;
	margin-right:50px;
	}
#activeSide{
	background-color:#FDCD3B;
	color:black;
	text-decoration:none;
	}
	
.errorLabel{
	color:red;
}
/* -------------- END Navigation ----------- */



/* -------------- Standard tag styling ----------- */
h1{
	font-size:2em;
	font-family: "lucida sans", verdana, sans-serif;
	padding:0em 0 0.5em 0;
	margin:0;
	}
h2 {
	font-size:1.6em;
	font-family: "lucida sans", verdana, sans-serif;
	padding:0 0 0.2em 0;
	}
h1,h2,h3{
	font-weight:normal
	}
h3{
	font-size:1.3em;
	font-family: "lucida sans", verdana, sans-serif;
	margin:0;
	border-bottom:5px solid #FDCD3B;
	display:inline;
	}

sup{
	font-size:0.6em;
	}

img {
	border:0;
	}
ul{
	margin-left:1em;
	margin-bottom:0.8em;
}
p {
	 padding-top:0.3em;
	 padding-bottom:0.8em;
	}

pre {
	white-space:normal
	}

a:link{
	color:#4d0000;
}


a:visited{
	color:black;
	}

a:hover{
	color:#990000;
}

a:active{
	color:#990000;
}

a:focus{
	background-color:#cccccc;
}
/* -------------- END standard tag styling ----------- */


/* -------------- Form styling ----------- */
label{
	font-size:0.9em;
}

fieldset{
	border: 0px solid red;
}

input[type="text"],input[type="password"] {
	font-family: Verdana, Tahoma, Helvetica, Arial,sans-serif;
	padding:3px;
	border:1px solid gray;
	margin: 3px 3px 5px 3px;
}
input[type="text"]:focus,input[type="password"]:focus,textarea:focus {
	border:1px solid black;
}

textarea{
	border:1px solid gray;
}

.notice{
	width:60%;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	text-align:center;
}

.warning{
	border:1px solid red;
	color:red;
}

.success{
	border:1px solid green;
	color:green;
}
/* -------------- End form styling ----------- */



/* --------------  Homepage masthead and specific styling ----------- */
#masthead{
	background-color:#FDCD3B;
	padding:15px 0 0 0;
	border-bottom:5px solid #FCAF17;
}

#mastheadContent{
	width:950px;
	margin-left:auto; /* Centering content on the page */
	margin-right:auto;
 	text-align:left; /* Counter IE's need to center text alignment too */
}

#masthead h1{
	padding:2em 0 0 0;
	
}

#masthead h2 {
	padding:0 0 0.5em 0;
	}
	
#home-list{
	list-style-type:none;
	font-size:0.8em;
	line-height:1.2;
	width:650px;
}

#home-list li{
	border:1px solid black;
	width:280px;
	padding:15px;
	margin:0 10px 10px 0;
	background-image:url('/images/standout.png');
	background-repeat:repeat-x;
	background-position: bottom;
	min-height:155px;
}


#home-list #strategy-box{
	width:608px;
	min-height:70px;
	padding:15px;
	margin:0 0 10px 0;
}
#audience-box{
	float:right;
}
#wireframes-box{
	float:left;
}
#usability-box{
	float:right;
}
#home-list li p{
	padding-top:10px;
}
#home-list li a{
	background-image:url('/images/bullet.png');
	background-repeat:no-repeat;
	background-position: 0 center;
	padding: 0 0 0 20px;
	display:block;
}
#login{
	float:right;
	width:30%;
	text-align:right;
	clear:both;
}
#login form{
	padding-top:8px;
	font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
}

#login label{
	font-size:0.9em;
	line-height:2.6em;
	text-align:right;
	vertical-align:top;
}

#login input[type="image"]{
	margin-right:-10px;
	margin-top:5px;
}
#login input[type="text"],input[type="password"] {
	width:55%;
}
#mastheadImage{
	display:block;
	float:right;
	padding-left:20px;
	padding-top:10px;
}

#mastheadContact{
	padding-top:0.5em;
	padding-bottom:0;
	margin:0;
}

/* --------------  End Homepage masthead and specific styling ----------- */



/* --------------  Top of page standout boxes (all except homepage) ----------- */

#highlight{
	width:941px;
	border:1px solid black;
	background-image:url(/images/highlight.jpg);
	background-position:bottom;
	background-repeat:repeat-x;
	margin:0 auto 20px auto;
	min-height:150px;
}

.clients p{
	background-image:url(/images/user-focused-clients.png);
	height:130px;
	background-repeat:no-repeat;
	margin:10px 0px 10px 20px;
	line-spacing:1em;
	padding: 36px 25px 0px 175px;
}

.services p{
	background-image:url(/images/user-focused-services.png);
	height:130px;
	background-repeat:no-repeat;
	margin:10px 0px 10px 20px;
	line-spacing:1em;
	padding: 15px 25px 15px 150px;
}


.userFocused p{
	background-image:url(/images/user-focused-icon.png);
	height:130px;
	background-repeat:no-repeat;
	margin:20px 0px 0px 20px;
	line-spacing:1em;
	padding: 30px 25px 0px 160px;
}

.contact p{
	background-image:url(/images/contact-user-focused.png);
	height:130px;
	background-repeat:no-repeat;
	margin:15px 0px 5px 20px;
	line-spacing:1em;
	padding: 30px 25px 0px 280px;
}

/* -------------- End Top of page standout boxes ----------- */

/* -------------- Contact form  ----------- */
#contactForm{
}

#contactForm input{
	width:90%;
	margin:0;
	margin-bottom:10px;
}

#contactForm label{
	text-align:left;
	display:block;
	margin:0;
}

#contactForm textarea{
	font-family: Verdana, Tahoma, Helvetica, Arial,sans-serif;
	width:90%;
	padding:3px;
	margin-bottom:20px;
	font-size:0.9em;
}

#firstGroup{
	float:left;
	width:49%
}

#secondGroup{
	float:right;
	width:49%;
}

#contactSubmit{
	clear:both;
	text-align:right;
	padding-right:10px;
}

/* -------------- End Contact form  ----------- */


/* -------------- Call to action / additional design elements ----------- */

.required{
	color:#990000;
}

.quote{
	margin:0px 0 0 0;
	padding: 30px 0 0 200px;
	height:10em;
}

.pennyDrops{
	background-image: url(/images/user-focused-penny-drops.jpg);
	background-position: left center;
	background-repeat:no-repeat;
}

.openQuote {
	float:left;
	color:#D4D4C7;
	font-size:100px;
	line-height:1em;
	padding-top:0px;
	padding-right:3px;
	font-family:times, serif;
} 

.closeQuote {
	float:right;
	margin-top:-5px;
	color:#D4D4C7;
	font-size:100px;
	line-height:50px;
	padding-top:2px;
	font-family:times, serif;
} 

.cta{
	margin:0px 0 10px 0;
	padding:0px;
	clear:both;
	text-align:right;
}

#serviceBoxes{
	margin:0 0 20px 0;
	min-height:88px;
}

#serviceBoxes li{
	list-style:none;
	padding:0;
	display:inline;
	}
#serviceBoxes a{
	display:block;
	float:left;
	width:104px;
	font-size:0.8em;
	border:4px solid #fcaf17;
	margin-right:8px;
	padding:5px 5px 0 5px;
	min-height:75px;
	vertical-align:center;
	text-align:center;
	color:black;
	background-color:#FDCD3B;
	}
#serviceBoxes a:hover{
	background-color:#fcaf17;
	}
.clients img{
	border:1px solid #fcaf17;
	margin-right:9px;
	}
.promoteEmail a{
	font-family: "lucida sans", verdana, sans-serif;
	font-size:2.5em;
	color:#fcaf17;
	}
.promoteEmail{
	padding-bottom:2em;
}
.promoteEmail a:hover{
	color:#FDCD3B;
}
#contactDetails li{
	background-image:url('/images/bullet.png');
	background-repeat:no-repeat;
	background-position: 0 center;
	padding: 0 0 0 20px;
	display:block;
}
#contactDetails{
	margin-bottom:2em;
}
/* -------------- END Call to action / additional design elements ----------- */


/* ----   Floating or dynamic elements ------- */

a.tooltip {
	text-decoration: none;
	border-bottom: 1px dashed #990000;
	cursor: help;
	}
 
a.info span {
	display: none;
	width:240px;
	font-size:0.8em;
}
 
a.info:hover, a.info:focus {
	position: relative;
}
 
a.info:hover span, a.info:focus span {
	display: block;
	position: absolute;
	top:1.6em;
	left:0em;
	padding: 0.5em;
	border-top: 3px solid #FCAF17;
	border-bottom: 3px solid #FCAF17;
	border-left: none;
	border-right: none;
	color: white;
	background: #3f3f3f;
   }
      
/* ----  End Floating or dynamic elements ------- */