/*  Info
--------------------------------------------------------------------------------------*/
/*  Styles for www.streetappeal.co.uk
    Created by Ed Merritt
    10th April 2008
--------------------------------------------------------------------------------------*/


/*  Structure
--------------------------------------------------------------------------------------*/
* {font-size: 100%; margin: 0; padding: 0; line-height: 1.3em;}
body {position: relative; background: url(../images/bkg.gif) top repeat-y #fff; font: 75% Tahoma, Helvetica, Arial, sans-serif; color: #444; text-align: center;}
#container {width: 700px; margin: 0 auto; text-align: left;}
#branding {float: left; width: 100px;}
#branding h1 {height: 0; text-indent: -5000px;}

.mainpic {float: left; width: 500px; height: 199px; margin-bottom: 25px;}

.section {float: left; width: 700px; margin-bottom: 100px; padding-top: 50px;}
.content {float: left; width: 500px; margin: 0 0 0 47px; border-left: 6px solid #ced1c7; padding-left: 47px;}
.content *:last-child {margin-bottom: 0;}

a, a:visited {color: #77a006; text-decoration: none; border-bottom: 1px solid #ccc;}
a:hover {border-color: #aaa; color: #678b05;}
.logo:visited, #gallery a:visited, #jquery-lightbox a:visited, a img, .logo, #gallery a, #jquery-lightbox a {border: none;}
a:hover img {border-color: #abaea2;} 

.navigation {float: left; width: 100px; list-style: none; }
#intro .navigation, #blog .navigation { margin-top: 17px;}
.navigation li {font-size: 0.9em; position: relative; }
.navigation a {display: block; width: 95px; padding: 2px 0 3px 5px; color: #333; text-decoration: none; border-bottom: 1px solid #f4f4f4;}
.navigation a:hover {background: #91c23e; color: #fff;}
.navigation .current {background: #333; color: #fff;}
.navigation .current:hover {background: #333; color: #fff;}
.blogLink {margin: 17px 0; background: #ddd;}
.blogLink a {border: 0; width: 95px;}
.blogLink .current {border: none;}
.newStar {position: absolute; top: -12px; right: -12px; width: 25px; height: 26px; background: url(../images/newStar.png) top left no-repeat;}

.content h2 {color: #91c23e; font-size: 0.8em; text-transform: uppercase; margin-bottom: -3px;}
.content h2 span {display: none;}
.content h3 {font: 2.1em Helvetica, Arial, sans-serif; letter-spacing: -0.05em; margin-bottom: 25px; color: #232816;}
.content h4 {clear: left; font: 1.7em cambria, new york, palatino linotype, "Times New Roman", Times, serif; text-transform: uppercase; font-weight: normal; margin-bottom: 25px;}
.content img {border: 6px solid #ced1c7; padding: 1px; margin-bottom: 25px;}

p {margin-bottom: 25px;}
.content ul {margin: 0 0 20px 20px;}
.content li {margin-bottom: 5px; color: #91c23e;}
.content li span {color: #333; margin-left: 10px;}

#gallery {float: left; display: block; width: 500px; list-style: none; margin: 0;}
#gallery li {float: left; display: inline; margin: 0 25px 25px 0;}


#footer {border-top: 1px solid #ccc; padding: 25px 0 0 0; font-size: 0.9em; margin-top: 50px;}
#footer ul {list-style: none;}
#footer li {display: inline; margin-right: 10px; padding-right: 10px; border-right: 1px solid #ccc;}
#footer li:last-child {border: none; padding: 0; margin: 0;}

#blog {position: relative; margin-bottom: 0;}
#blog #branding {position: absolute;}
#blog .content {margin: 0 0 50px 150px; width: 453px; padding: 25px 47px 25px 47px; background: #f1f1f1;}
#blog .content:last-child {margin-bottom: 0;}
#blog .entry {background: none; padding: 0 0 0 47px; width: 500px;}
.entry h2 {color: #aaa; font-weight: normal;}
.entry h3 {font-size: 2em;}
#blog h3 a {text-transform: none;}
.intro {margin-bottom: 0;}
.cite {text-align: right; color: #666; font: italic 1.3em "Times New Roman", Times, serif; margin-bottom: 0; color: #222;}

#comments {float: left; clear: both; margin-top: 50px;}
#comments dl {float: left; margin-bottom: 25px;}
#comments dd {float: left; background: #f1f1f1; padding: 10px; border: 1px solid #e5e5e5; width: 478px;}
#comments dt {position: relative; top: -1px;}
#comments dt span {float: right; font-size: 0.9em; color: #aaa; padding: 8px 10px 0 0;}
#comments dt strong {float: left; padding: 8px 40px 0 10px; background: url(../images/comment.gif) bottom right no-repeat;}

.blogDD {margin-top: 5px;}
.blogDD select {width: 100px;}
.blogDD select option {padding: 2px 2px 0 2px; line-height: 2em;}

.btn { display: block; position: relative; background: url(../images/btn.gif) top left no-repeat; padding: 0; float: left; text-decoration: none; cursor: pointer; color: #444; border: none; margin-right: 10px; }
.btn span {float: left; padding: 4px 25px 6px 25px; position: relative; background: url(../images/btn.gif) bottom left no-repeat;}
.btn span i {position: absolute; bottom: 0; right: 0; width: 13px; height: 13px; padding: 0; background: url(../images/btn.gif) bottom right no-repeat;}
.btn span span {position: absolute; top: 0; right: 0; width: 13px; height: 13px; padding: 0; background: url(../images/btn.gif) top right no-repeat;}
.btn:hover {background: url(../images/btnHover.gif) top left no-repeat; color: #222;}
.btn:hover span {background: url(../images/btnHover.gif) bottom left no-repeat;}
.btn:hover span i {background: url(../images/btnHover.gif) bottom right no-repeat;}
.btn:hover span span {background: url(../images/btnHover.gif) top right no-repeat;}

.contactDetails {font-size: 1.2em; position: relative; line-height: 1.8em;}
.contactDetails span {font-size: 1.3em; color: #232816; position: absolute; left: 5em; font-family: Helvetica, Arial, sans-serif;}

.hide {display: none;}