/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 

	Main CSS document for Ash Gardens. 

	~ http://www.ashgardens.co.uk
	~ ash@ashgardens.co.uk

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	~ Produced August 2010

	~ Authored by Rich @ http://www.shellshockcss.co.uk 

*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* Content/General */
* {border:0; margin:0; padding:0; color:#333; font-family:Arial, Helvetica, sans-serif}
html {height:100%}
body {height:100px; width:1000px; margin:0 auto; background:url(../images/bg_body2.jpg) center fixed #FFF; font-size:0.8em; line-height:20px}
h1, h2, h3, h4 {font-family:"Times New Roman", Times, serif; color:#060}
h4 {font-size:1.4em; margin:20px 0 30px 0}
a {text-decoration:underline}
a:hover {text-decoration:none; cursor:pointer}
p {margin:10px 0}
p.success {padding:20px; border:1px solid #090; color:#090 ;font-weight:bold; background:#FFF}
p.error {padding:20px; border:1px solid #F00; color:#F00 ;font-weight:bold; background:#FFF}
.italic {font-style:italic}

.clearer {clear:both!important; font-size:0px}
.floatLeft {float:left}
.floatRight {float:right}
.clearLeft {clear:left!important}
.clearRight {clear:right!important}
.noBorder {border:0!important}
.noBorderL {border-left:0!important}
.noBorderR {border-right:0!important}
.noMargin {margin:0!important}
.noMarginL {margin-left:0!important}
.noMarginR {margin-right:0!important}
.alignCenter {text-align:center}

/* Header */
#header {width:945px; height:100px; margin:10px auto 10px auto; padding:10px 20px 15px 15px; border:1px solid #040; text-align:center; background:#FFF; text-align:right}
h1 {display:inline-block; width:245px; height:100px; float:left;}
h2 {float:left; display:inline-block; margin:20px 180px 0 150px; font-size:1.3em; font-style:italic; letter-spacing:1px; text-align:center; color:#333}
#header p {display:inline-block; font-size:0.8em; float:right; text-align:right}
#header p.headerLarge {margin-bottom:20px; font-size:1.1em; text-align:right}

/* Top Navigation Menu with drop-down */
#topNav {width:980px; padding:0; min-height:34px; margin:0 auto 10px auto; background:url(../images/bg_topNav.png) center no-repeat; border:1px solid #006600}
#topNav ul {min-height:34px}
#topNav li {position:relative; float:left; display:inline-block; width:15%; border-right:1px solid #006600; text-align:center}
#topNav li.topNavWide {width:24.2%}
#topNav li.borderLeft {border-left:1px solid #006600}
#topNav li a {display:inline-block; min-height:28px; padding:6px 0 0 0; width:100%; color:#FFF; text-decoration:none; font-weight:bold; }
#topNav li a:hover {background:url(../images/bg_topNav_i.png); color:#060}
#topNav ul ul {display:none; margin:0; padding:10px; border:1px solid #060; background:url(../images/bg_lightbox_90.png)} /* hide until hovered */
html>body #topNav li:hover ul {display:block; position:absolute; z-index:2} /* show drop-down when hovered in a standars-compliant browser */
*:first-child+html #topNav li:hover ul {display:none} /* hides drop-down in IE7 - thinks it's standards-compliant, but really isn't */
#topNav li:hover li {position:relative; display:block; width:214px; min-height:15px; font-size:1.0em; border-right:none; margin:0}
#topNav li:hover li a {display:block; padding:5px 0; font-weight:normal; color:#060;text-decoration:underline }
#topNav li:hover li a:hover {background:none; color:#080; font-style:italic}
#topNav li:hover li a.tallNav {min-height:50px;}
#topNav li a {display:inline-block}

/* topNav page selection */
#homePage #topNav li a#topNavHome ,
#gardenServicesPage #topNav li a#topNavServices,
#galleryPage #topNav li a#topNavGallery,
#pricingPage #topNav li a#topNavPricing,
#testimonialsPage #topNav li a#topNavTestimonials,
#contactPage #topNav li a#topNavContact
{background:url(../images/bg_topNav_i.png); color:#060}

/* Content Area */
#content {left:auto; width:942px; margin:0 auto 20px auto; min-height:440px; padding:0 19px 19px 19px; border:1px solid #040;  background:#FFF;}
h3 {margin:30px 0 10px 0; font-size:1.5em; color:#333}
#content li {list-style-position:inside; margin-bottom:10px}
#content img.floatRight {border:1px solid #040; margin:0 0 20px 20px}

/* Footer */
#footer {width:980px; margin:20px auto 10px auto; border:1px solid #040; text-align:left; background:#FFF; font-size:0.85em}
#footer p {margin:0; line-height:20px; padding:15px; background:url(../images/logo_s_text.gif) 810px 15px no-repeat}
#footer p, #footer p * {color:#000}
#footer p.italic {font-style:italic; line-height:10px; padding:0 20px 20px 20px; background:none}

/* bottomNav */
#bottomNav {width:980px; margin:10px auto; text-align:center}
#bottomNav p, #bottomNav p * {color:#040; font-weight:bold}

/* w3c */
#w3c {margin:10px 0}
#w3c * {border:0}
#w3c p {text-align:center}

/* Home Page */
#homeImages {padding:10px 0; height:220px}
#homeImages div {float:left; margin-left:17px}
#homeImages img {border:1px solid #040}

/* Gallery page */
.galleryCont {margin:10px; padding:20px; border:1px solid #CCC; text-align:center}
.galleryBox {width:252px; min-height:210px; float:left; padding:8px; margin-bottom:20px}
.galleryBox img {border:1px solid #CCC}
#galleryImgLarge {width:800px; border:1px solid #CCC}

/* Contact page */
input, label, textarea, select {cursor:pointer}
fieldset {margin-bottom:20px}
label {display:inline-block; width:125px; vertical-align:top}
input, textarea, select {width:200px; padding:3px; border:1px solid #666; background:#FFF}
textarea {font-size:1em}
input:focus, textarea:focus, select:focus, option:hover {background:#FFC}
#submitButton {display:inline-block; width:150px; height:30px; margin-top:10px; margin-left:150px; background:url(../images/bg_button.gif) no-repeat; border:none; color:#FFF; font-weight:bold}

#lightBox {display:none; position:absolute; z-index:2; height:100%; width:100%;top:0; left:0;  margin:0 auto; background:url(../images/bg_lightbox.png)}
#lightBoxInner {height:250px; width:940px; margin:230px auto 0 auto; background:#FFF; border:1px solid #006600}
#lightBoxInner div {height:55px; width:600px; margin:100px auto 0 auto; background:url(../images/loading.gif) left no-repeat}
#lightBoxInner div * {margin-left:60px}