/*

Daniel Woolf Photography
style.css

BY: www.williambiwer.com

DATE: 04/20/2009
VER: 1.0

/*

/*RESETS*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
/* remember to define focus styles! */
:focus {outline:0;}
body {line-height:1; color:#000; background:#DCDCDC url(../images/layout/bg-full.gif) repeat;}
ol, ul {list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight normal;}
blockquote:before, blockquote:after,
q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

.clear {clear:both;}
.right {float:right;}
.left {float:left;}

/*LAYOUT*/
#layout {width:960px; margin:0 auto;}
#layout-header {width:720px; position:relative; margin:54px 0 0 60px;}
#layout-content {width:940px; height:auto; position:relative; border:10px solid #FFF; -webkit-box-shadow:0 0 15px #7A7A7A; -moz-box-shadow:0 0 15px #7A7A7A; box-shadow:0 0 15px #7A7A7A; clear:both; z-index:100;}
#layout-footer {width:720px; height:55px; position:relative; margin:0 0 24px 60px; background:#FFF; z-index:0;}

/*HEADER*/
#layout-header h1 {z-index:1000; position:relative; width:291px; height:33px; float:left; text-indent:-9999px; margin-bottom:10px; background:url(../images/layout/dw-trans.png) no-repeat;}

/*NAVIGATION*/
#header-nav {position:relative; width:720px; height:38px; clear:both; background:#FFF;}
#nav {float:right; list-style:none; font-family:'Century Gothic', 'Helvetica Neue', Helvetica, sans-serif; font-size:14px; font-weight:normal; letter-spacing:1px; margin-bottom:0; background:#FFF;}
#nav li {float:left; position:relative; display:block;}
#nav li a {display:block; padding:12px; color:#3F4B00; background:#FFF; text-decoration:none;}
#nav li a:hover {color:#3F4B00; background:#D5D5D5; background:rgba(213,213,213,0.75); /* It'll look nice semi-transparent */text-decoration:underline;}

/*DROPDOWN*/
#nav ul {list-style:none; position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	opacity:0; /* Set initial state to transparent */
	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */ z-index:9999;}
#nav ul li {padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */ float:none;}
#nav ul a {white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ display:block;}
#nav li:hover ul { /* Display the dropdown on hover */left:0; /* Bring back on-screen when needed */opacity:1; /* Fade to opaque */}
#nav li:hover a { /* Set styles for top level when dropdown is hovered */
	background:#D5D5D5;
	background:rgba(213,213,213,0.90); /* It'll look nice semi-transparent */
	text-decoration:underline;}
#nav li:hover ul a { /* Override some top level styles when dropdown is hovered */ text-decoration:none; -webkit-transition:-webkit-transform 0.075s linear;}
#nav li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */
	color:#3F4B00; background:#FFF; background:rgba(255,255,255,0.90); /* It'll look nice semi-transparent */
	text-decoration:underline; -moz-transform:scale(1.05); -webkit-transform:scale(1.05);}
				
/*CONTENT*/
#image_scroller {position:relative; height:500px; width:940px;}
#content-area {position:relative; width:914px; height:100%; padding:18px 12px 10px 12px; background:#FFFFFF; border:1px solid #E6E6E6;}
	.content-left {width:636px; float:left;}
		.header {margin-bottom:14px;}
		.portrait {margin:0 20px 0 0; padding:0 0 120px 0;}
	.content-right {width:258px; float:right; padding-left:20px;}
		.field {width:240px; height:20px; margin-bottom:16px; padding:8px 0 0 6px; border:1px solid #E6E6E6; font-family:'Century Gothic', 'Helvetica neue' Helvetica, Arial, sans-serif; font-size:16px; color:#848484;}
		.field:focus {background:#FFF; border:1px solid #666666; color:#666666;}
		.msgfield {width:240px; height:220px; margin-bottom:16px; padding:8px 0 0 6px; border:1px solid #E6E6E6; font-family:'Century Gothic', 'Helvetica neue' Helvetica, Arial, sans-serif; font-size:16px; color:#848484;}
		.msgfield:focus {background:#FFF; border:1px solid #666666; color:#666666;}
		.button {padding:6px; background:#E6E6E6; border:1px solid #FFF; color:#666666; font-family:'Century Gothic', 'Helvetica neue' Helvetica, Arial, sans-serif; font-size:14px; font-weight:normal; letter-spacing:2px; cursor:pointer;}
		.button:hover {border:1px solid #666666;}
	.content-left-2col {width:576px; float:left;}
	.content-right-2col {width:318px; float:right; padding-left:20px;}
#content-area ul {margin:0 0 0 14px;list-style-type:disc;}
#content-area ul li {font-family:'Century Gothic', 'Helvetica Neue', Helvetica, sans-serif; font-size:13px; line-height:18px; margin-bottom:16px; color:#444;}
#content-gallery {min-height:627px; padding-bottom:6px; background:#FFF;}
#content-gallery img {}

/*GALLERY*/
.galleria_container {border-bottom:solid 10px #FFFFFF; margin-bottom:14px;}
.galleria {list-style:none; width:940px; margin-left:26px;}
.galleria li {display:block; width:80px; height:80px; overflow:hidden; float:left; margin:0 10px 10px 0}
.galleria li a {display:none}
.galleria li div {position:absolute;display:none;top:0;left:180px}
.galleria li div img {cursor:pointer}
.galleria li.active div img,.galleria li.active div {display:block}
.galleria li img.thumb {cursor:pointer; top:auto; left:auto; display:block; width:auto; height:auto}
.galleria li .caption {display:block;padding-top:.5em}
* html .galleria li div span {width:400px} /* MSIE bug */
#main_image{width:940px; height:627px; background:#FFF;}
	#main_image img{}

.nav {width:200px; margin:0 auto 8px auto; padding-top:6px; text-align:center; font-size:12px; letter-spacing:3px; text-transform:uppercase;}
	.nav a:link, .nav a:visited {color:#3F4B00; text-decoration:none;}
	.nav a:hover, .nav a:active {color:#3F4B00; text-decoration:underline;}

/*FOOTER*/
#layout-footer p {margin:18px 0 0 9px; float:left; font-size:10px; color:#5E5E5E; letter-spacing:1px;}
	.facebook a:link, .facebook a:visited {position:relative; display:inline-block; width:30px; height:30px; float:right; margin:12px 16px 0 6px; background:url(../images/layout/facebook-trans.png) no-repeat; text-decoration:none; text-indent:-9999px; z-index:9999;}
	.facebook a:hover {background-position: 0 -30px;}
	.twitter a:link, .twitter a:visited {position:relative; display:inline-block; width:30px; height:30px; float:right; margin:12px 6px 0 6px; background:url(../images/layout/twitter-trans.png) no-repeat; text-decoration:none; text-indent:-9999px; z-index:9999;}
	.twitter a:hover {background-position: 0 -30px;}
	.flickr a:link, .flickr a:visited {position:relative; display:inline-block; width:30px; height:30px; float:right; margin:12px 6px 0 6px; background:url(../images/layout/flickr-trans.png) no-repeat; text-decoration:none; text-indent:-9999px; z-index:9999;}
	.flickr a:hover {background-position: 0 -30px;}

/*TYPOGRAPHY*/
h1 {font-family:'Josefin Sans', 'Helvetica Neue', Helvetica, sans-serif; font-weight:300; font-size:28px; line-height:36px; letter-spacing:2px; text-transform:uppercase; color:#3F4B00; padding-bottom:12px;}
h2 {font-family:'Josefin Sans', 'Helvetica Neue', Helvetica, sans-serif; font-weight:normal; font-size:22px; line-height:36px; letter-spacing:2px; text-transform:uppercase; color:#3F4B00; padding:6px 0 12px 0;}
h4 {font-family:'Century Gothic', 'Helvetica Neue', Helvetica, sans-serif; font-weight:bold; font-style:normal; font-size:14px; padding-bottom:12px;}
p {font-family:'Century Gothic', 'Helvetica Neue', Helvetica, sans-serif; font-size:13px; line-height:17px; margin-bottom:16px; color:#444444; }
.highlight {font-family:'Century Gothic', 'Helvetica Neue' Helvetica, sans-serif; font-size:15px; line-height:18px; margin-bottom:16px; font-weight:bold; color:#980030;}
strong {font-family:'Century Gothic', 'Helvetica Neue' Helvetica, sans-serif; font-weight:bold;}