/*-----------------------------------------------------------------------------
version:    1.0
author:     Tony Crockford
email:      tonyc@boldfish.co.uk
website:    http://www.boldfish.co.uk/
date:       2009-11-10 
copyright:  2009 Tony Crockford All Rights Reserved
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/*sticky footer*/
html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

/* Reset based on Eric Meyer's work
-----------------------------------------------------------------------------*/

/*NB ul's and li's retain default styling*/

	div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, acronym, address, big, cite, code,
	del, dfn, font, img, ins, kbd, q, s, samp,
	small, strike, sub, sup, tt, var,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}
	
	caption, th, td { 
		text-align: left; 
		font-weight: normal; 
	}

	blockquote, q {
		quotes: none;
	}

	:focus {
		outline: 0;
	}

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

	html { 
		font-size:100.01%; 
		margin: 0;
		padding: 0;
	}

	body { 
		font-size:1em;
		line-height: 1;
		margin: 0;
		padding: 0; 
		background: #9DBD9D;
	}

	a img {border:none;}

	hr, .hide {
		display: none;
	}


	/* self-clear floats */
	.group:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}

/* fix Firefox odd spaces */
img {vertical-align: bottom;}


/* =Structural
-----------------------------------------------------------------------------*/

#wrap{
	width: 974px;
	margin: 0 auto;
	background-color: #FFF;
	border: 1px solid #003333;
	border-width: 0 1px;
}

#header img{
	float: left;
}

#page{
		padding-bottom: 48px;  /* must be same height as the footer */
}

/* =Typography
-----------------------------------------------------------------------------*/
body{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		/* Use a 12px base font size with a 16px line height */
    font-size: 0.75em; /* 16px x .75 = 12px */
    line-height: 1.25em; /* 12px x 1.333 = 16px */
}
/* =Headings
-----------------------------------------------------------------------------*/
h1
{
  font-size: 2em;
	font-weight: bold;
  line-height: 1.3em;
  padding-top: 0;
  padding-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font.
                           Remember, a margin specified in ems is relative to
                           the element's font-size, not to the pages' base
                           font size. So, for example, if we want a 1em margin
                           (relative to the base font), we have to divide that
                           length by the element's font-size:
                           1em / 2em = 0.5em */
}

h2
{
  font-size: 1.5em;
  line-height: 1.3em;
  padding-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
  padding-bottom: 0.667em;
	font-weight: bold;
}

h3
{
  font-size: 1.3em;
  line-height: 1.3em;
  padding-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
  padding-bottom: 0.769em;
	font-weight: bold;
}

h4, h5, h6
{
  font-size: 1.1em;
  line-height: 1.3em;
  padding-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
  padding-bottom: 0.909em;
}
/* =Links
-----------------------------------------------------------------------------*/

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

/* =Main Nav
-----------------------------------------------------------------------------*/
#nav ul{
	margin: 0;
	padding: 0 0 10px 0;
	list-style-type: none;
	overflow: hidden;
}

#nav ul li {
	float: left;
}

#nav ul li a{
	text-indent: -99999px;
	display: block;
}

#nav ul li#navhome a{
	background: url('../images/home_button_sprite.gif') no-repeat top left;
	height:52px;
	width:245px;
}
#nav ul li#navabout a {
	background: url('../images/about_button_sprite.gif') no-repeat top left;
	height:52px;
	width:241px;
}

#nav ul li#navprojects a {
	background: url('../images/projects_button_sprite.gif') no-repeat top left;
	height:52px;
	width:241px;
}

#nav ul li#navcontact a {
	background: url('../images/contact_button_sprite.gif') no-repeat top left;
	height:52px;
	width:247px;
}

#nav ul li#navhome a.active,
#nav ul li#navhome a:hover{
	background: url('../images/home_button_sprite.gif') no-repeat bottom left;
}
#nav ul li#navabout a.active,
#nav ul li#navabout a:hover {
	background: url('../images/about_button_sprite.gif') no-repeat bottom left;
}

#nav ul li#navprojects a.active,
#nav ul li#navprojects a:hover {
	background: url('../images/projects_button_sprite.gif') no-repeat bottom left;
}

#nav ul li#navcontact a.active,
#nav ul li#navcontact a:hover {
	background: url('../images/contact_button_sprite.gif') no-repeat bottom left;
}



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

/* =Main Content
-----------------------------------------------------------------------------*/
#content{
	margin: 0 10px;
	padding: 1px 0;
}

#content img{
		border: 1px solid #000; 
		margin: 10px 0;
}

#content-inner{
	width: 660px;
	float: left;
	display: inline;
}

#about #content-inner{
	width: 760px;
	padding: 15px 0 0 0;
}

#projects #content-inner,
#contact #content-inner{
	width: 100%;
	padding: 15px 0 0 0;
}
#content p{
	margin: 0 0 1em 0;
}

#project-wrapper {
	background: url('../images/projects_background_tint.gif') repeat-y top left;
	width:954px;
	margin-bottom: 10px;
}

#project-wrapper img.curve {
	border-width: 0;
	margin: 0;
}

#project-wrapper h1,
#project-wrapper h2,
#project-wrapper h3,
#project-wrapper h4,
#project-wrapper p{
	margin-left: 10px;
	margin-right: 10px;
}


.project-details{
	margin: 10px;
	padding: 1px 0 1px 0;
	width: 930px;
	border-bottom: 1px solid #7CB18B;
	clear: both;
	min-height: 190px;
	float: left;
	display: inline;
}

.image-wrapper{
	margin: 0 10px 10px 0;
	float: left;
	width: 143px;
	min-height: 190px;
	display: inline;
}

.content-text{
	float: right;
	width: 775px;
	display: inline;
	margin: 0 0 20px 0;
}
#content  .image-wrapper img{
	margin: 0 10px 5px 10px;
	float: left;
	display: inline;
}

#project-wrapper .project-details .image-wrapper p{
	text-align: center;
	margin: 0 10px;
	float: left;
	display: inline;
	width: 123px;
}
/* =Secondary Content
-----------------------------------------------------------------------------*/

#sidebar{
	width: 282px;
	float: right;
	overflow: hidden;
	display: inline;
}

#about #sidebar{
	width: 182px;
}

#address{
	width: 30%;
	float: left;
	margin: 0 10px 0 5px;
	display: inline;
}

#contacts{
	width: 30%;
	float: left;
	display: inline;
}

#links{
	width: 257px;
	float: left;
	display: inline;
	margin: 0 0 0 7px;
	padding: 20px 0;

}

#flash{
	width: 650px;
	float: left;
	display: inline;
	margin: 40px 0 0 20px;
	padding: 20px 0;
	border: 1px solid #ccc;
	border-width: 0 0 0 1px;
}

#flash object{
	margin: 20px;
}

/* =Footer
-----------------------------------------------------------------------------*/
#footer {
	position: relative;
	margin-top: -48px;
	margin-left: auto;
	margin-right: auto;
	background: url('../images/bottom_bar.gif') no-repeat top left;
	height:48px;
	width:974px;
	clear: both;
}

#footer p{
	color: #FFF;
	padding-top: 1.5em;
	margin: 0 5px;
}



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

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

table   {border-spacing: 0; border-collapse: collapse;}
td      {text-align: left;  font-weight: normal;}

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

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