/* -------------------------------------------------------------- 
-----------------------------------------------------------------

	DEFINITIONS:	Layout
	AUTHOR:			Elliot Jay Stocks
	VERSION:		22.08.2009
	
	CONTENTS:
		
	1				Basic layout 
	2				Header
	3				Content
	4				Comments
	5				Footer
	6				z-index

-----------------------------------------------------------------
-------------------------------------------------------------- */





/* 1	Basic layout */
html { background:#e7e4d1 url(../images/html.jpg) fixed }
body { background:url(../images/body.jpg) center 140px no-repeat fixed }
div, ul { position:relative }
img { margin:10px 0 }
div.fade { background:url(../images/fade.png); height:155px; width:100%; position:fixed; top:0; left:0 }
div.header { width:100%; position:fixed; top:0; left:0 }
div.wrapper { width:600px; margin:0 auto }


/* 2	Header  */
div.logo { background:#251c05 url(../images/scratches.gif) center center no-repeat; margin:0 60px; padding:30px 40px }
a.browse { position:absolute; top:30px; right:40px }
div.nav { background:#fff; height:50px; margin:-10px 60px 0 60px }
div.nav ul { position:absolute; top:22px; left:40px }
div.nav ul li { float:left }
div.nav ul li a { display:block; text-indent:-9999px; height:16px; margin:0 10px 0 0; background:url(../images/icons_nav.gif) 0 0 no-repeat }
div.nav ul li.articles a { background-position:0 0; width:14px }
div.nav ul li.links a { background-position:-24px 0; width:12px }
div.nav ul li.quotes a { background-position:-46px 0; width:15px }
div.nav ul li.images a { background-position:-97px 0; width:16px }
div.nav ul li.videos a { background-position:-71px 0; width:16px }
div.nav ul li a span { width:100px; text-align:right; position:absolute; top:-4px; left:300px; display:none }
div.nav ul li:hover a span { display:block; color:#999 }


/* 3	Content  */
div.content { padding:140px 0 0 0 }
.post { margin:20px 60px; position:relative }
.post.articles { margin:20px 0 }
ul.metadata { text-align:right; width:180px; padding:48px 0 0 0; position:absolute; top:10px; left:-170px }
li.odd ul.metadata { text-align:left; left:470px }
li.odd.articles ul.metadata { text-align:left; left:590px }
body.page ul.metadata { display:none }
li.odd li.datestamp span { padding:10px 10px 10px 20px }
li.datestamp span { background:#251c05; padding:10px 20px 10px 10px }
li.type div { display:block; text-indent:-9999px; text-align:left; background:url(../images/post_type_l.png); height:48px; width:48px; position:absolute; top:0; left:140px }
li.odd li.type div { background:url(../images/post_type_r.png); left:-8px }
li.type div a { display:block; text-indent:-9999px; width:16px; height:16px; background:url(../images/icons_nav.gif) 0 0 no-repeat; position:absolute; top:16px; left:16px }
li.type.articles div a { background-position:0 0; width:14px }
li.type.links div a { background-position:-24px 0; width:12px }
li.type.quotes div a { background-position:-46px 0; width:15px }
li.type.images div a { background-position:-97px 0; width:16px }
li.type.videos div a { background-position:-71px 0; width:16px }
div.entry { background:#f4f0e6; padding:30px 40px }
div.entry:hover { background:#fff }
div.entry.heading { background:#251c05 }
div.entry.heading:hover { background:#251c05 }
div.tags { margin:20px 0 0 0 }
div.corner { background:url(../images/corner.png); width:32px; height:32px; position:absolute; top:-11px; right:-10px }
ul.older_newer li a {  display:block; text-indent:-9999px; width:48px; height:48px; position:absolute; top:-30px }
ul.older_newer li.prev a { background:url(../images/post_type_l.png); left:86px }
ul.older_newer li.next a { background:url(../images/post_type_r.png); right:86px }
ul.older_newer li a span { display:block; text-indent:-9999px; width:48px; height:48px; position:absolute; top:0; left:0 }
ul.older_newer li.prev a span { background:url(../images/arrow_l.gif) center center no-repeat }
ul.older_newer li.next a span { background:url(../images/arrow_r.gif) center center no-repeat }
form { margin:70px 0 0 0 }
input, textarea { background:#fff; border:none; margin:10px 0 20px 0; padding:10px 60px; width:420px }
input:focus, textarea:focus { background:#fff; outline:none }
input.submit { background:#600; color:#fff; cursor:pointer; width:40px; margin:0 0 0 16px; padding:10px }
input.submit:hover { background:#900 }
input.submit:active { background:#000 }


/* 4 	Comments */
ol.commentlist li { border-bottom:1px solid #ccc; min-height:100px; margin:10px 0; padding:10px 0; position:relative }
ol.commentlist li div.gravatar { position:absolute; top:0; left:0 }
ol.commentlist li div.text { padding:0 0 0 100px }
form#commentform { margin:20px 0 0 0 }
form#commentform p { position:absolute; bottom:0; left:0 }
form#commentform div { margin:10px 0 }
form#commentform div h3 { margin:0; position:absolute; top:0; left:0 }
form#commentform div input { width:280px; margin:0 0 0 100px; padding:10px }
form#commentform div input.submit { width:400px; margin:0 }
form#commentform textarea { width:380px; height:200px; margin:10px 0; padding:10px }


/* 5	Footer  */
div.footer { background:#251c05 url(../images/scratches.gif) center center no-repeat; margin:0 60px; padding:30px 40px }
div.footer img { border:1px solid #fff; position:absolute; top:10px; left:-60px }
ul.social li ul { float:left; width:100px; margin:20px 0 20px 20px }
ul.social li ul li { background:url(../images/icons_social.jpg) 0 0 no-repeat; height:24px; margin:0 0 10px 0 }
ul.social li ul li.facebook { background-position:0 -24px }
ul.social li ul li.flickr { background-position:0 -48px }
ul.social li ul li.linkedin { background-position:0 -72px }
ul.social li ul li.youtube { background-position:0 -96px }
ul.social li ul li.vimeo { background-position:0 -144px }
ul.social li ul li a { padding:0 0 0 30px }
ul.small_print { margin:30px 0 0 0 }
ul.small_print li.subscribe { background:url(../images/icons_social.jpg) 0 -120px no-repeat; position:absolute; bottom:0; right:0 }
ul.small_print li.subscribe a { display:block; text-indent:-9999px; width:24px; height:24px }


/* 6	z-index */
div.wrapper { z-index:1 }
div.fade { z-index:2 }
div.header { z-index:3 }
div.nav { z-index:4 }
div.logo { z-index:5 }
div.entry { z-index:6 }
li.datestamp { z-index:7 }
li.type div, ul.older_newer li a { z-index:8 }