/* ---------------------------------------------------------------------
------------------------------------------------------------------------
 Doublehappy on the BLUEPRINT CSS
  Designed and created by www.doublehappycreative.com	    
   
[Table of Contents]

1. Master reset
2. Typography
3. Grid Layout
4. Navigation
5. Forms
6. Form Validation
7. Footer
8. Sub headings, sub lists, Supplier lists, project lists


[Colours]

Dark Blue (Primary headings h2, h3) #1C3C4A
Dark Green (Secondary headings h4) #324A15
Dark grey (Body text) #222
Link Blue (Links) #2f667d
Link Light Blue (Rollover) #219de3

------------------------------------------------------------------------
----------------------------------------------------------------------*/



/* --------------------------------------------------------------------- 

1.Master Reset 

----------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* --------------------------------------------------------------------- 

2. Typography 

----------------------------------------------------------------------*/

body {
	font-size:12px;
	color:#691d03;
	font-family:Arial, Helvetica, sans-serif;
	line-height:18px;
	background-image: url(../img/bgrnd.png);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
}

h1 {
	background-image: url(../img/dh_logo.png);
	background-repeat: no-repeat;
	display: block;
	height: 100px;
	width: 196px;
	position: absolute;
	left: 0px;
	top: 0px;
}

h1 a{
	display: block;
	height: 91px;
	width: 176px;
	margin: 0px;
	padding: 0px;
}

h1 a:hover{
	display: block;
	height: 91px;
	width: 176px;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
}

h2 {
	font-size:62px;
	padding-bottom:5px;
	margin-bottom:0px;
	color: #f70517;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	height: 50px;
	background-color: transparent;
}

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

h4 {
	font-size:1.2em;
	line-height:1.25;
	margin-bottom:0.35em;
	height:1.25em;
	color: #324A15;
}

h5 {font-size:1em;
	font-weight:bold;
	margin-bottom:1.5em;
}

p {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.75em;
	margin-left: 0;
}

a {
	color:#f70517;
	text-decoration:none;
}

a:focus, a:hover {
	color:#f70517;
	text-decoration:underline;
	}

strong {
	font-weight:bold;
	}
	
em, dfn {font-style:italic;}

li ul, li ol {
	margin-top: 0;
	margin-right: 1.5em;
	margin-bottom: 0;
	margin-left: 0em;
}

ul, ol {
	margin:0 1.5em 1.5em 1.5em;
}

ul {
	list-style-type:disc;
}

/* --------------------------------------------------------------------- 

3. Grid Layout

----------------------------------------------------------------------*/

.container {
	width:900px;
	padding: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#page {
	width: 900px;
	padding: 0px;
	margin: 0px;
}

#header {
	height: 200px;
	width: 900px;
	background-image: url(../img/header.png);
	background-repeat: no-repeat;
	background-position: center top;
	position:relative;
}

div.col-1, div.col-2, div.col-3 {
	float:left;
	margin-right: 10px;
}

div.first {
	margin-left:0;
}

div.last {
	margin-right:0;
}

.row {
	width: 900px;
	margin-bottom: 20px;
}

.col-1  {
	width: 250px;
	margin-left:65px;
}
		
.col-3  {
	width: 610px;
}

.col-4  {
	width: 251px;
	margin-left: 10px;
	float: right;
}


.span-6, div.span-6 { 
	width: 950px; 
	margin: 0; 
}

.floatright { 
	float: right; 
}

.floatleft { 
	float: left; 
}

.clearfix:after, .container:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix, .container {
	display:inline-block;
}

* html .clearfix, * html .container {
	height:1%;
}

.clearfix, .container {
	display:block;
}

.clear {
	clear:both;
}


/* --------------------------------------------------------------------- 

4. Navigation

----------------------------------------------------------------------*/



/* ----- Active pages -----*/

body#online_page #header #navcontainer li.online a, body#online_page #header #navcontainer li.online a span{
	background-image: url(../img/nav/online.png);
	height: 35px;
	width: 91px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
	background-color: transparent;
}

body#print_page #header #navcontainer li.print a, body#print_page #header #navcontainer li.print a span{
	background-image: url(../img/nav/print.png);
	height: 35px;
	width: 82px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

body#creative_page #header #navcontainer li.creative a, body#creative_page #header #navcontainer li.creative a span{
	background-image: url(../img/nav/creative.png);
	height: 35px;
	width: 110px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

body#about_page #header #navcontainer li.about a, body#about_page #header #navcontainer li.about a span{
	background-image: url(../img/nav/about.png);
	height: 35px;
	width: 96px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

body#contact_page #header #navcontainer li.contact a, body#contact_page #header #navcontainer li.contact a span{
	background-image: url(../img/nav/contact.png);
	height: 35px;
	width: 105px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

/* ----- Nav states -----*/

#navcontainer ul
{
	display: block;
	list-style: none outside;
	padding: 0;
	margin: 0 0 0 10px;
	font-family: Verdana, sans-serif;
	font-size: x-small;
	position: absolute;
	left: 190px;
	top: 101px;
}

#navcontainer li
{
padding: 0;
margin: 0;
display: block;
float: left;
position: relative;
}

#navcontainer a:link, #navcontainer a:visited
{}

#navcontainer a:hover
{
background-color: #cecbc6;
color: #000066;
}

li.online a, li.online a span{
	background-image: url(../img/nav/online.png);
	height: 35px;
	width: 91px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -9999px;
}

li.online a:hover span{
	background-image: url(../img/nav/online.png);
	height: 35px;
	width: 91px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
	background-color: transparent;
}

li.print a, li.print a span{
	background-image: url(../img/nav/print.png);
	height: 35px;
	width: 82px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -9999px;
}

li.print a:hover span{
	background-image: url(../img/nav/print.png);
	height: 35px;
	width: 82px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

li.creative a, li.creative a span {
	background-image: url(../img/nav/creative.png);
	height: 35px;
	width: 110px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -9999px;
}

li.creative a:hover span{
	background-image: url(../img/nav/creative.png);
	height: 35px;
	width: 110px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

li.about a, li.about a span {
	background-image: url(../img/nav/about.png);
	height: 35px;
	width: 96px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -9999px;
}

li.about a:hover span{
	background-image: url(../img/nav/about.png);
	height: 35px;
	width: 96px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

li.contact a, li.contact a span {
	background-image: url(../img/nav/contact.png);
	height: 35px;
	width: 105px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -9999px;
}

li.contact a:hover span{
	background-image: url(../img/nav/contact.png);
	height: 35px;
	width: 105px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0px -35px;
}

/* --------------------------------------------------------------------- 

5. Forms

----------------------------------------------------------------------*/

input.text, input.title, textarea, input, select {
	margin:0.5em 0;
}

input.text:focus, input.title:focus, textarea:focus, select:focus {}

input.text, input.title {
	width:300px;
	padding:5px;
}

input.title {
	font-size:1.5em;
}

textarea {
	width:300px;
	height:100px;
	padding:2px;
}

input.text {
	width:290px;
	padding:2px;
}


form ul li {
	list-style-type: none;
	padding-top: 2px;
	padding-bottom: 2px;
}

label {
	display: block;
	width: 140px;
	float:left;
	padding-top: 10px;
}

.submit {
	margin-left:140px;
}


/* --------------------------------------------------------------------- 

6. Form Validation

----------------------------------------------------------------------*/

input.required, textarea.required {
	
}

input.validation-failed, textarea.validation-failed {
	border: 1px solid #2f667d;
	color : #2f667d;
}

input.validation-passed, textarea.validation-passed {

}

.validation-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #2f667d;
	color : #FFF;
	font-weight: bold;
}

.custom-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #C8AA00;
	color : #FFF;
	font-weight: bold;
}

/* --------------------------------------------------------------------- 

7. Footer

----------------------------------------------------------------------*/

#footer{
	width: 900px;
	height: 196px;
	background-image: url(../img/footer.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	display: block;
	margin: 0px;
	padding: 0px;
}

#footer a {
	color:#666666;
}

#footer a:hover {
	color:#333333;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;
}


/* --------------------------------------------------------------------- 

8. Misc

----------------------------------------------------------------------*/

.contact_details ul {
	padding: 0px;
	margin: 0px;
}

.contact_details li {
	display: block;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	list-style-type: none;
	margin: 0px;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 0px;
}

.hide { 
	display:none
}


hr.recent_work {
	margin-top: 20px;
	margin-bottom: 20px;
	background-image: url(../img/hr_recent_work.png);
	background-repeat: no-repeat;
	display: block;
	height: 37px;
	width: 900px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.portfolio_item a img {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #ffffff;	
}

.portfolio_item a:hover img {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #f70517;	
}

.portfolio_item p {
	margin-top: 5px;	
}

.portfolio_nav, .print_nav {
	float: left;
	margin-left:65px;
	display: block;
	height: 171px;
	width: 250px;	
}

.portfolio_nav a {
	background-image: url(../img/portfolio.png);
	background-repeat: no-repeat;
	display: block;
	height: 171px;
	width: 250px;
	background-position: 0px 0px;
}

.portfolio_nav a:hover {
	background-image: url(../img/portfolio.png);
	background-repeat: no-repeat;
	display: block;
	height: 171px;
	width: 250px;
	background-position: 0px -171px;
}

.print_nav a {
	background-image: url(../img/print.png);
	background-repeat: no-repeat;
	display: block;
	height: 171px;
	width: 250px;
	background-position: 0px 0px;
}

.print_nav a:hover {
	background-image: url(../img/print.png);
	background-repeat: no-repeat;
	display: block;
	height: 171px;
	width: 250px;
	background-position: 0px -171px;
}

/* ----- Projects -----*/

.project_header {
	display: block;
	width: 900px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #c7e0e8;
	margin-bottom: 20px;
}

.related_work {
	background-image: url(../img/title_related_work.png);
	background-repeat: no-repeat;
	height: 39px;
	width: 251px;
	padding-top: 50px;
	display: block;
}

.project_footer {
	display: block;
	width: 900px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #c7e0e8;
	margin-bottom: 40px;
}

.project_footer a {
	font-size: 10px;
	color: #f70517;
	text-decoration: none;	
}

.project_footer a:hover {
	text-decoration: underline;	
}

.project_footer .next {
	float:right;
}

.project_footer .top {
	float:left;
}

/* ----- Pads and margins -----*/

.pad_bottom {
	padding-bottom: 20px;
}
.social li {
	display: inline;
	list-style-type: none;
}