/* Lauren Shaw Photography - Style Guide 1.0 */

/* @group Global */

* {margin: 0; padding: 0;}
html, body {height: 100%; width:100%; overflow: auto;}
body { background: #242424; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-Serif;	font-size: 11px; color: #ccc;}
a { color:#e78424; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-Serif; font-size:11px; text-decoration:underline;}
a:hover { text-decoration:none;}
.clear {clear: both;}

/* @end */
/* @group Main */

#main {	width: 100%; height: 100%; position: relative; top: 0px; left: 0px; margin:0px;}
#main-body { width: 935px; margin-left:20px; margin-top:0px; padding: 10px 21px 0 0px; border-right:1px solid #b8b8b8; clear:both; }

#header {margin-left:543px; margin-top:0px;}
#header h1 a { display: block; height: 80px; outline: none;}
#header h1 { background: url(../images/logo-header.jpg) 0 0 no-repeat; text-indent: -9000px; height:66px;}
h2 {font-size:14px; text-transform:uppercase; letter-spacing:2px; font-weight:normal; background-color:#121212; padding:10px; color:#f9d350; margin-bottom:10px; font-family:arial, helvetica, sans-serif;}
h4 {font-size:10px; text-transform:uppercase; font-weight:normal; background-color:#121212; padding:10px; color:#7b7b7b; margin-bottom:10px; font-family:arial, helvetica, sans-serif;}
h5 { margin:20px 0 0 10px; color:#e78424; }
.output {display:inline;}
.bio {padding:20px 50px 20px 10px; line-height:18px;}
#contact-image {float:right; padding:10px 100px 10px 10px;}
#links-list {text-align:right; float:left; padding:30px 10px 10px 220px; line-height:18px;}


/* @end */
/* @group Nav */

#nav {margin-top:0px; margin-left:670px; z-index:1000;}
#nav h3 { text-indent: -9000px;}
#nav h3 a { display: block; height: 20px; outline: none;}

#bio {margin-right:244px;}
#bio h3 { background: url(../images/nav-bio.gif) 0 0 no-repeat; height:30px; z-index:2;}
#bio h3:hover { background: url(../images/nav-bio.gif) 0 -30px no-repeat; }

#gallery {margin-top:-30px; margin-left:80px;}
#gallery h3 { background: url(../images/nav-gallery.gif) 0 0 no-repeat; height:30px;text-indent:-9000px;}
#gallery h3:hover { background: url(../images/nav-gallery.gif) 0 -30px no-repeat; height:30px;}

#links {margin-top:-30px; margin-left: 150px; }
#links h3 { background: url(../images/nav-links.gif) 0 0 no-repeat; height:31px;text-indent:-9000px;}
#links h3:hover { background: url(../images/nav-links.gif) 0 -30px no-repeat; height:31px;}

#contact {margin-top:-30px; margin-left: 206px; }
#contact h3 { background: url(../images/nav-contact.gif) 0 0 no-repeat; height:31px;text-indent:-9000px;}
#contact h3:hover { background: url(../images/nav-contact.gif) 0 -30px no-repeat; height:31px;}

#spacer {margin-top:-6px; margin-left:306px; background: url(../images/gray-spacer.gif) 0 0 repeat-y; width:1px; height:100%; overflow:hidden;}

/* @end */
/* @group Gallery */

#main-paragraph {text-align:left; float:left; width:300px; display:inline; padding-top:20px; padding-left:10px; line-height:18px;}
#main-paragraph p {padding:10px;}
#main-paragraph.big {font-size:12px; font-weight:lighter; line-height:24px;}

.main-paragraph {text-align:left; float:left; width:300px; display:inline; padding:20px 0px 50px 10px; line-height:18px;}
.main-paragraph p,
#main-body p {padding:10px 25px 10px 10px;}
.main-paragraph.big {font-size:16px; font-weight:lighter; line-height:28px;}

#main-image {margin-left:0px; margin-top:0px; width:600px; float:left; display:inline; height:550px; padding:10px;}
#main-image img {border:3px solid #fff;}
#main-image img:hover {border:3px solid #b8b8b8;}
#main-image-label {position: relative; top:510px; left:10px; font-style: italic; color: #b8b8b8; font-size:10px;}

.post { padding-bottom:10px; border-bottom:1px solid #444; }
.recent-work {background:url(../images/recent-work.png) no-repeat bottom right; position:absolute; width:150px; height:150px; margin:-120px 0 0 120px;}

.title {padding-top:5px; padding-bottom:15px; font-style: italic; color: #b8b8b8; font-size:14px;}
	.title span { font-size:12px; color:#f9d350; }
.gallery-table {padding:10px;}
.gallery-table td {padding-right:20px; width:250px;}

#dianas a h3 {background: url(../images/gallery-homepage-dianas.jpg) 0 0 no-repeat; height:250px; text-indent:-9000px;}
#maps a h3 {background: url(../images/gallery-homepage-maps.jpg) 0 0 no-repeat; height:250px; text-indent:-9000px;} 
#storied-landscapes a h3 {background: url(../images/gallery-homepage-storied-landscapes.jpg) 0 0 no-repeat; height:250px; text-indent:-9000px;}
#maine-women a h3 {background: url(../images/gallery-homepage-maine-women.jpg) 0 0 no-repeat; height:250px; text-indent:-9000px;}
#finding-home a h3 {background: url(../images/gallery-homepage-finding-home.jpg) 0 0 no-repeat; height:250px; text-indent:-9000px;}
#cambodia a h3 {background: url(../images/gallery-homepage-drop.jpg) 0 0 no-repeat; height:250px; text-indent:-9000px;}


#dianas h3:hover,
#maps h3:hover,
#storied-landscapes h3:hover,
#maine-women h3:hover,
#finding-home h3:hover,
#cambodia h3:hover {background-position:-250px 0px;}

#gallery-thumbs {width:550px; padding:10px; display:inline; float:right;}
#gallery-thumbs img, .gallery-thumbs img {border: 1px solid #e8e8e8; margin-right:5px; margin-bottom:5px;}
#gallery-thumbs img:hover, .gallery-thumbs img:hover {border: 1px solid #f9d350;}

/* @end */
/* @group Forms */

#form {text-align:left; float:left; width:317px; padding-top:20px; padding-left:10px; line-height:18px;}
.input-text {font-size:14px; font-weight:bold; border:1px solid #bbb; width:298px; height:18px; padding:5px; }
.input-text-large {font-size:14px; font-weight:normal; border:1px solid #bbb; width:298px; height:78px; padding:5px; font-family:arial, helvetica, "sans-serif"; }
.input-submit {width:298px; height:18px; padding:5px; float:left;}
.field {height: 50px; margin-bottom:25px; float:left;}
.field-large {height: 80px; float:left; margin-bottom:25px;}
.form-label {float:left; font-weight:bold; color:#7b7b7b; text-transform:uppercase;}

/* @end */
/* @group Footer */

#footer {border-top: 1px solid #b8b8b8; padding: 10px; position:relative; bottom:0px; font-size:10px;}
#footer_b {border-top: 1px solid #b8b8b8; padding: 10px; margin-top:0px; font-size:10px; }
#footer span, 
#footer_b span {margin-left:20px; color:#5b5b5b;}

/* @end */