/* Will Dayble's a pretty cool guy. Eh designs the whole css and doesn't afraid of anything */

html, body{z-index: 100; margin: 0; padding: 0;}
blockquote p {z-index: 300;}
blockquote p span{z-index: 400;}
blockquote p a{z-index: 500;}

.more{z-index: 700;}
.more p{z-index: 800;}
.more p a{z-index: 900;}

.vid{z-index: 3000;}

.footer{z-index: 150;}

.flickr{z-index: 2000;}

/* zeds
/* --------------------------- */
body{z-index: 100;}
.content{z-index: 500;}

/* some overal style stuuuuff! 
/* --------------------------- */
h2, h3, h4, blockquote{font-family: Georgia, Times, sans-serif;}
body{font-family:'Lucida Grande', Helvetica, Arial, sans-serif; background: #6f3f01 url(../images/layout/bg/medium.jpg) no-repeat top;}

/* wrap */
.wrap{width: 937px; background: url(../images/layout/mainchunk/high.jpg) no-repeat 16px 0; margin: 0 auto; position: relative;}

.docoby{background: url(../images/layout/elements/documentaryby.jpg); width: 240px; height: 54px; position: absolute; top:0; left: 410px;}

h1{display: none;}

.vid{position: absolute; top:170px; left: 200px; width: 600px;}

/* flickr
/* --------------------------- */
.flickr{display: none;}
.flickrJs{display: block;} /* turn it on for javascrapts! */
.flickr .items a{display: block; float: right; width: 84px; height: 62px; border: 5px solid #000; background: #000; text-decoration: none; margin: 0 0 0 13px; text-indent: -999em;}
.flickr .items a:hover{border-color: #fff;}
.flickr{position: absolute; top:60px; right: 100px;	}
.flickr .more{display: block; position: absolute; top:-50px; right: -126px;background: url(../images/layout/elements/flickr-link.jpg) no-repeat; width: 126px; height: 72px; text-indent: -999em;}
.flickr .more:hover{background-position: 0 -72px;}


blockquote{width: 635px; position: relative; padding: 600px 0 0;margin: 0 auto;}
blockquote p{font-size: 18px; color: #482200; line-height: 35px; position: relative; text-align: right;}
blockquote p strong{font-weight: normal; color: #000;}
blockquote p span{padding: 0 80px 0 0; position: relative;}
blockquote p span em{width: 69px; height: 69px; position: absolute; top:-25px; left: -65px; display: block; background: url(../images/layout/quote/bling.png)}
blockquote p a{background: url(../images/layout/quote/readmore.png); display: block; position: absolute; top:70px; right: -15px; width: 89px; height: 30px; padding: 2px 0 6px; font-size: 11px; color: #000; font-weight: bold; text-align: center; text-decoration: none; font-family: Helvetica, Arial, sans-serif;}
blockquote p a strong, blockquote a em{font-weight: bold;}
blockquote p a:hover{background-position: 0 -38px;}


/* for JS */
blockquote p a strong, #readMore.active em{display: none;}
#readMore em{display: block;}
#readMore.active strong{display: block;}

/* some icons */
.icons a{position: absolute; display: block; text-decoration: none; text-indent: -999em;}

.icons a.fb{width: 120px; height: 45px; top:176px; left: 32px;}
.icons a.fb:hover{background: url(../images/layout/icons/facebook.jpg);}

.icons a.email{width: 85px; height: 38px; top:302px; left: 44px;}
.icons a.email:hover{background: url(../images/layout/icons/emailus.jpg);}

.icons a.blag{width: 122px; height: 39px; top:259px; left: 34px;}
.icons a.blag:hover{background: url(../images/layout/icons/theblag.jpg);}

.icons a.twit{width: 120px; height: 38px; top:221px; left: 32px;}
.icons a.twit:hover{background: url(../images/layout/icons/twatter.jpg);}

.icons a.nl{width: 121px; height: 72px; top:337px; left: 34px;background: url(../images/layout/icons/the-newsletter.jpg);}
.icons a.nl:hover{background-position:0 -72px;}


.icons a.zip{width: 154px; height: 74px; top:409px; left: 14px;background: url(../images/layout/icons/zip.jpg);}
.icons a.zip:hover{background-position:0 -74px;}



/* more content
/* --------------------------- */
.more{background: url(../images/layout/quote/morecontent-backer.png) no-repeat top left; position: relative; width: 653px; height: 382px; padding:0; margin: 50px auto 0; display: block; overflow: hidden;}
.more .inner{padding: 50px 40px 60px;}
.more h4{padding: 0 0 12px 0; font-size: 20px;}
.more p{font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: #522d08; padding: 0 0 12px 0; line-height: 22px; position: relative;}
.more p span{color: #000;}
.more a{font-size: 20px; width:253px; font-family: Georgia, Times, serif; color: #fff; text-decoration: none; display: block; width: 270px; text-align: center; position: absolute; top:252px; padding: 20px 0; right:20px; height: 20px;}
.more a:hover{text-decoration: underline;}

#more.active{display: block;}


/* the vengabus is coming */
.footer{background: url(../images/layout/car/normal.png) no-repeat top; height: 80px; padding-top: 133px; position: relative;width: 100%; margin-top: -50px;}
#bus.bigWindow{position: fixed; margin: 0; bottom: 0; left: 0;}

.footer a{display: block; width: 750px; margin: 0 auto; height: 43px; overflow: hidden; background: url(../images/layout/squareweave/siteby.png) no-repeat top right; text-indent: -999em;}
.footer a:hover{background-position: 100% -43px;}