/*-----------------------------------------------------------------------------
Style Sheet for Honley Garden Design 

version:   1.0
author:    Roger Knight
email:     roger@rogerknight.info
website:   http://www.honleygardendesign.co.uk
-----------------------------------------------------------------------------*/

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


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

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
  margin: 1em 0;
}

/* Class for clearing floats */
.clear {
	clear:both;
}


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

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	line-height: 1.6;
	background-color: #5E757C;
}
.larger {
	font-size:120%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:1.8;
}

/* =Headings
-----------------------------------------------------------------------------*/
h1 {
	font: 300% Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#784C00;
	margin:0px;
	padding:10px 0;
	letter-spacing: 13px;
	text-align:center;
}
#header p {
	font-size: 130%;
	border-bottom-color:#784C00;
	border-bottom-style:solid;
	border-bottom-width:4px;
	font-style:italic;
	color:#784c00;
	text-align:right;
	margin:0;
	padding-right:36px;
}
	
h2 {
	margin: 6px 6px 6px 6px;
	padding: 6px;
	font-size: 130%;
	color:#669933;
	background-color:transparent;
}

h3 {
	font-size:110%;
	margin: 0px 5px 0 5px;
	padding:1px;
}

p {
	font-size:100%;
	margin:2px 5px 0px 8px;
	padding:0 0 5px 0;
}

/* =Links
-----------------------------------------------------------------------------*/
.external {
	background-image: url(images/externalLink.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding-right: 10px;
}
#mainNav a:hover {
	color:#669933;
}
/* Highlighting the current page */
body.home #mainNav a#home, 
body.envapproach #mainNav a#envapproach,
body.design #mainNav a#design,
body.portfolio #mainNav a#portfolio,
body.enquiry #mainNav a#enquiry {
	color:#DEE47B;
	cursor:default;
	background-color: #784C00;
}
body.home #mainNav a:hover#home, 
body.envapproach #mainNav a:hover#envapproach,
body.design #mainNav a:hover#design,
body.portfolio #mainNav a:hover#portfolio,
body.enquiry #mainNav a:hover#enquiry {
	color:#DEE47B;
}
/* =Branding
-----------------------------------------------------------------------------*/

#header {
	width: 750px;
	background-color:#FFFFCC;
	margin:0px;
	padding:0px;
}


/* =Main Nav
-----------------------------------------------------------------------------*/
#mainNav {
	margin: 0;
	padding: 0 0 0 5px;
	list-style:none;
	background-color:#DEE47B;
	float:left;
	width:745px;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
#mainNav li {
	display: block;
	float:left;
	padding: 0 0.7em;
	line-height: 2.5em;
	text-decoration: none;
	color: #784C00;
	font-size: 120%;
	background-color: #DEE47B;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
#mainNav li a {
	color:#784C00;
	text-decoration:none;
	font-weight: bold;
}

/* =Layout
-----------------------------------------------------------------------------*/
#wrapper {
	width: 750px;
	margin: 0px auto;
	padding: 0px;
	background-image: url(images/bg_content.png);
	background-position: top left;
	background-repeat: repeat;
}

#mainContentWrapper {
	background-color: #FFFFFF;
	color: #000000;
	padding: 0 0 0 6px;
	clear:both;
	margin: 0;
}

#mainContent {
	width: 744px;
	margin: 0;
	padding:0 0 0 0px;
	background-image:url(images/bg_content.png);
	background-position:bottom left;
	background-repeat:repeat;
}

/* =Sub Nav
-----------------------------------------------------------------------------*/
body.portfolio-detail h2 {
	float:left;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}

#breadcrumb {
	float:right;
	margin:14px 20px 0 0;
	font-size:120%;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
#breadcrumb p {
	display:inline;
}
#breadcrumb a:hover, ul.portfolionav a:hover {
	background-color:#C0DCC0;
}
ul.portfolionav {
	margin:0 0 30px 112px;
	padding:0;
	text-align:center;
	line-height:1.2em;
	list-style:none;
	display:block;
}
ul.portfolionav a {
/*	margin:0 10px 10px 10px;
	padding:4px 4px 6px 4px; */
	text-decoration:none;
	line-height:1.2em;
	float:left;
}
ul.portfolionav li {
	float:left;
	font-weight:bold;
	padding:0 0 0 10px;
	font-size:110%;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
body.privacy ol li h3 {
	margin-left:-12px; 
	padding-left:12px;
} /*fixes Safari issue which meant that numbers were hidden on L */
body.home ul, body.privacy ol, body.enquiry ul {
	margin:0 0 0 0;
	padding:0 5px 5px 34px;
}
body.home li, body.privacy li, body.enquiry li {
	padding:0 15px 0 0;
}
body.home #gardentypes li {margin:0 0 0 20px;}
body.home ul ul, body.privacy ol ol, body.enquiry ul ul {
	list-style-type:lower-alpha;
}
body.privacy ol ol li {
	font-weight:normal;
}
#gardentypes			{ margin-left:136px;}

/* =Main Content
-----------------------------------------------------------------------------*/
#designsteps li,
body.envapproach #mainContent li {
	margin:0 0 10px 50px;
}
body.envapproach #mainContent p {
	margin:0.5em;
}
body.envapproach #mainContent p.caption {
	padding:0;
	float:left;
	width:330px;
}
p.thumb {
	margin:0 0 20px 19px;
	padding:0;
	float:left;
	width:30%;
	text-align:center;
	background-color:#fff;
	line-height:1em;
	color:#000;
	display:inline;
}
p.thumb2wide {
	margin:0 0 20px 100px;
	padding:0;
	float:left;
	width:30%;
	text-align:center;
	background-color:#fff;
	line-height:1em;
	color:#000;
	display:inline;
}

p.thumb a, p thumb a:link, p.thumb a:visited, p.thumb2wide a, p thumb2wide a:link, p.thumb2wide a:visited  {
	display:block;
	float:left;
	margin:0;
	padding:4px 4px 9px 4px;
	border:2px solid #ccc;
	border-top-color:#eee;
	border-right-color:#ddd;
	border-bottom-color:#bbb;
	background-color:#fff;
	text-align:center;
	text-decoration:none;
	color:#000;
}
p.thumb a:hover, p thumb a:active, p.thumb2wide a:hover, p thumb2wide a:active {
	border:2px solid #ccc;
	background-color:#C0DCC0;
	color:#000;
	text-decoration:underline;
}
p.thumb img, p.thumb2wide img {
	display:block;
	margin:0 auto 10px auto;
	border:2px solid #ccc;
	border-bottom-color:#eee;
	border-left-color:#ddd;
	border-top-color:#bbb;
}
br {
	display:none;
}
.note {
	margin:3px 3px 3px 18px;
	width:320px;
	float:left;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}


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



/* =Footer
-----------------------------------------------------------------------------*/
#footer {
	width: 750px;
	background-color:#DEE47B;
	border-top: 3px solid #784C00;
	border-bottom: 3px solid #784C00;
	padding:0 0 8px 0;
	margin: 0;
}

#footer ul {
	list-style:none;
	padding:4px 0px 4px 8px;
	margin:0;
}
#footer ul + ul {
	padding:0 8px 0 0;
}
#footer li {
	font-size:90%;
	line-height: 120%;
	display:inline;
	color:#784C00;
	margin:0;
	padding:0;
}
#footer a:link, #footer a:visited {
	color:#784C00;
	font-weight:bold;
}
#footer a:hover, #footer a:active {
	color:#669933;
	font-weight:bold;
}
/* Turn off footer links when corresponding page is displayed */

body.accessibility a#accessibility,
body.privacy a#privacy {
	color:#DEE47B;
	background-color:#784C00;
	text-decoration:none;
	cursor:default;
}
body.accessibility a:hover#accessibility,
body.privacy a:hover#privacy {
	color:#f5fe92;
	background-color:#772600;
}

/* =Images
-----------------------------------------------------------------------------*/
/* This is the standard image format */
/*img {
	border: 2px solid #FFBF55;
	margin: 0 5px 2px 5px;
}
*/
#header img {
	border:none;
	margin:0;
}
.sgdlogo {
	margin:8px;
}
.sgdlogoandtext {
	border:1px solid #000;
	padding:9px;
	margin:5px 10px 15px 10px;
	width:320px;
	float:left;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
/* These rules set the drop shadow */
.img-wrapper {
	margin:10px 6px 20px 10px;
	background:url(images/shadow.gif) no-repeat bottom right;
	float:right;
	line-height:0;
	padding:0;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
.img-wrapper-form {
	margin:10px 30px 20px 10px;
	background:url(images/shadow.gif) no-repeat bottom right;
	float:right;
	line-height:0;
	padding:0;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
.img-wrapper-L {
	margin:10px 6px 20px 10px;
	background:url(images/shadow.gif) no-repeat bottom right;
	float:left;
	line-height:0;
	padding:0;
	display:inline; /*prevents an issue in IE6 which results in a background showing through on the R for a few pixels */
}
.img-wrapper img, .img-wrapper-L img, .img-wrapper-form img {
	float:none;
	margin:0;
	background:#FFFFFF;
	padding:4px;
	border:1px solid #CC0000;
	display:block;
	position:relative;
	left:-5px;
	top:-5px;
}

/* =Forms
-----------------------------------------------------------------------------*/
form#enquiryform {
	margin: 0 10px 5px 10px;
	border: 1px solid #772600;
	width:720px;
}

fieldset {
	padding:10px 0 0 10px;
	margin:0px;
	width: 98%;
	border:0;
	position:relative;
}
legend {
	font-weight:bold;
	color: #000000;
	margin: 5px 0 0 0;
}
label {
	display:block;
	padding:8px 0 0 0;
}
input {width:300px;}

textarea.address {
	width:200px;
	height:100px;
}
textarea.msg {
	width:600px;
	height:200px;
}

input:focus, textarea:focus {background-color:#F5FE92;}

.required {
	font-size:80%;
	color:#cc0000;
}
.advice {font-size:80%;}
button {
	width:8em;
	padding:0.2em 0;
	margin:0 1em 0.5em 0;
}

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

table { 
  border-spacing: 0;
	border-collapse: collapse;
	margin:0.4em 3em;
}

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

#accesskeys th, #accesskeys td {
	padding: 0.1em 1em;
	text-align: left;
	border: 1px dotted #330099;
}

/* =Misc 1
-----------------------------------------------------------------------------*/
.floatRight {
	float: right;
}
.floatLeft {
	float: left;
}

/* =Misc 2
-----------------------------------------------------------------------------*/
/* =Boxes
-----------------------------------------------------------------------------*/
#designsteps {
	width:720px;
	float:left;
}