/*-----------------------------------------------------------------------------
desigsnbysteve Master Stylesheet

version:   1.0
author:    steven daniels
website:   www.designbysteve.co.uk

Light Blue: #e6f1fd
Dark Blue: #336699
Darker Blue: #122F4C
Light Grey: #666666
Dark Grey: #333333
Dark Green: #006633
-----------------------------------------------------------------------------*/

/* =Resets and Page Setup
-----------------------------------------------------------------------------*/


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

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, pre, blockquote, form, fieldset, table, ul, iframe 
						{ padding: 50px 38px 0px 55px;}	
						
						p { padding: 25px 38px 0px 55px;}					

/* Remove styles from links */
ul,li 					{ list-style-type: none; }
a   					{ outline: none; }

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

a img 					{ vertical-align: middle; }

html 					{ overflow-y: scroll; }
html, body, #pagewrap	{ height: 100%; }
body > #pagewrap 		{height: auto; min-height: 100%;}

body 					{ font: 75% Helvetica, Helvetica Neue, Arial, sans-serif; }

/* Giving this an ID allows changes to the CSS based on individual page requirements */
  						
body#home 				{ background: url(images/bg.jpg) top center repeat-x; color: #e6f1fd; }
body#folio 				{ background: url(images/bgpf.jpg) top center repeat-x; color: #e6f1fd; }
body#blog 				{ background: url(images/bgblog.jpg) top center repeat-x; color: #e6f1fd; }
body#survey				{ background: url(images/bgblog.jpg) top center repeat-x; color: #e6f1fd:}
body#success			{ background: #333333; }

#pagewrap 				{ width: 960px; margin: 0 auto; }
/* margin 0 auto centres content. remove for left aligned page. */	

#content 				{ width: 960px; padding-bottom: 693px; }
	
/* Toolbox */
.clear 					{ clear: both; }
.floatleft 				{ float: left; }
.floatright 			{ float: right; }
.white					{ color: #fff; }
.grey  					{ color: #666666; }

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* =Typography
-----------------------------------------------------------------------------*/

h1 {
	color: #666666;
	font-size: 240%;
	font-weight: 400;
	padding-top:  30px;
	letter-spacing: -1px;
	max-width: 415px;
}

.h1large { color: #336699; font-weight: 600; font-size: 460%; letter-spacing: -5px; padding-top: 70px; }

h2 {
	color: #336699 ;
	font-size: 400%;
	font-weight: 600;
	letter-spacing: -3px;
}

h3 {
	padding-top: 15px;
	padding-right: 0px;
	padding-left: 0px;
	color: #666666 ;
	font-size: 105%;
	font-weight: 400;
	color: #fff;
}

.talk { background: url(images/talk.png) no-repeat 0 100%; padding-left: 25px; margin-left: 70px; }

h4 {
	color: #006633;
	font-size: 240%;
	font-weight: 600;
	letter-spacing: -2px;
	padding: 11.5px 0 0 1px;
}

p {
	color: #666666 ;
	font-size: 105%;
	font-weight: 400;
	line-height: 1.5em;
}

.plarge { font-size: 130%; font-weight: 400; }
.plargewhite { font-size: 130%; font-weight: 400; color: #fff; }

/* =Headings
-----------------------------------------------------------------------------*/

#topcontact { height: 43px; width: 400px; padding-left: 710px; vertical-align: middle; }

#header { background: url(images/logo.png) no-repeat top left; height: 115px; width: 313px; display: block; }

/* =Links
-----------------------------------------------------------------------------*/

a:link, a:visited  { color: #336699; text-decoration: underline; }
a:hover, a:active  { color: #006633; text-decoration: underline; }

h3 a:link, a:visited  { color: #fff; text-decoration: underline; }
h3 a:hover, a:active  { color: #fff; text-decoration: none; }

h4 a:link, a:visited  { color: #006633; text-decoration: none; 	}
h4 a:hover, a:active  { color: #fff; text-decoration: none;  }


/* =Branding
-----------------------------------------------------------------------------*/

#logolink           { text-indent: -9999px; position: absolute; width: 313px; height: 115px;}

/* text indent moves the link off the page, width and height define the clickable area */


/* =Main Nav
-----------------------------------------------------------------------------*/

#nav {
	width: 350px;
	height: 100px;
	padding: 3.5em 0 0 56.5em;
	text-align:center;
}

ul#nav li {
display:inline} /* this makes the menu display horizontally in ie (has to be a seperate rule) */

ul#nav a  {
	background-color: #666666;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #333333;
	display: block;
	float: left;
	padding: 0.2em;
	margin-right: 0.6em;
	width: auto;
	font-weight: 500;
	font-size: 1.9em;
	text-decoration: none;
}

#nav a:link, #nav a:visited {
	color: #fff;
}

#nav a:hover {
	color: #333333;
}


/* =Sub Nav
-----------------------------------------------------------------------------*/




/* =Main Content
-----------------------------------------------------------------------------*/


#intro {
	height: 439px ;
	width: 530px ;
	float: left;
	
}

#services {
	
	height: 439px ;
	width: 430px ;
	float: right;
	background: url(images/services.png) no-repeat center left;
}

#portfolio {
	clear: both;
	height: 335px;
	width: 960px;
	background: url(images/workbg.jpg) no-repeat center bottom;
}

#blockbar {
	clear: both;
	height: 75px;
	width: 960px;
}

#highlights {
	clear: both;
	height: 335px;
	width: 300px;
	padding-left: 37px; /* CHECK double margin possibility?? */
	float: left;
}

#work {
	height: 200px;
	width: 550px;
	float: left;}  /* CHECK does this affect ie6/7 or other, floating items the same way? */
	
ul#work { padding-left: 5px;}

ul#work li {
	display:inline;
	padding-right: 19px;
} /* this makes the menu display horizontally in ie (has to be a seperate rule) */



/* =Secondary Content
-----------------------------------------------------------------------------*/

#about {

	background: url(images/sketch.png) no-repeat bottom left;
	height: 430px;
	width: 528px;
	float: left;
}

#downloads {
	height: 430px;
	width: 432px;
	float: right; 
}
	
/* =Portfolio Item Style
-----------------------------------------------------------------------------*/

.workwrap		{ width: 960px; clear: both; height: auto; border-bottom: #ccc 1px solid;}
.mainimg 		{ width: 630px; height: 380px; float: left; }
.iteminfo		{ width: 330px; height: 380px; float: right; }
.portfolioimg	{ padding: 50px 38px 0px 55px; }


/* =Footer
-----------------------------------------------------------------------------*/

#footer {
	position: relative;
	margin-top: -693px;
	height: 693px;
	background: #333333;
}

#foot {
	width: 960px;
	margin: 0 auto;
	
}

#contact {
	height: 630px;
	width: 528px;
	float: left;
}

#success {
	width: 300px;
	margin: 0 auto;
	text-align: center;
}

#why {
	height: 630px;
	width: 432px;
	float: right;
}

#credits {
	border-top: #666666 solid 1px;
	height: 63px;
	clear: both;
}




/* =Forms
-----------------------------------------------------------------------------*/

/* Removes fieldset borders. even on Opea 7 */
fieldset {
  border: 1px solid transparent;
}


/* =Tables
-----------------------------------------------------------------------------*/

table { 
  border-spacing: 0;
	border-collapse: collapse;
}

td {
  text-align: left;
	font-weight: normal;
}



/* =Misc 1
-----------------------------------------------------------------------------*/

.bigbutton { background: url(images/button.png) no-repeat top right;
				width: 200px;
				height: 51px;
				text-align: center;
				 color: #006633;
			   display: block;
			    margin: 25px 0 0 55px;
}

.bigbutton:hover { background: url(images/button.png) no-repeat top left;

}

/* =Misc 2
-----------------------------------------------------------------------------*/

.floatimgright { 
	float: right;
	margin: 2em 3em 2em 2em;
}

.footer { padding: 20px 0 0 30px }


/* =Tooltip
-----------------------------------------------------------------------------*/

.downloads {
	margin: 5px 0 0 40px;
	padding: 0;
	list-style: none;
}
.downloads li {
	padding: 0;
	margin: 0 2px;
	float: left;
	position: relative;
	text-align: center;
}
.downloads a {
	padding: 14px 10px;
	display: block;
	color: #000000;
	width: 248px;
	height: 150px;
	text-decoration: none;
	font-weight: bold;
	background: url(images/projectplan.png) no-repeat center center;
}
.downloads li em {
	background: url(images/hover2.png) no-repeat;
	width: 180px;
	height: 100px;
	position: absolute;
	top: -85px;
	left: 55px;
	text-align: center;
	padding: 20px 12px 10px;
	color: black;
	z-index: 2;
	display: none;
}