/* This one time, Will Dayble high fived a gorilla so hard it's hand evolved into a tiny unicorn */

.contentBacker{z-index: 100;}
ul{z-index: 300;}
.shadow{z-index: 500;}
.flickr{z-index: 450;}
.info{z-index: 550;}
.arrow{z-index: 600;}
blockquote{z-index: 700;}
.pageLoader{z-index: 1000;}
.thumbs{z-index: 2300;}
.thumbs .thumbsMask{z-index: 2500}
.thumbs ol{z-index: 2600}
.thumbs ol li{z-index: 2700;}
h3{z-index: 3000;}
/* z-index'd, togetha, 4eva! */

html, body{position: relative; height: 100%; width: 100%; min-height: 700px;}
body{background: #000 url(../images/layout/background.jpg) no-repeat center; font-family: "Lucida Grande", Lucida, Arial, Helvetica}


/*bound it up*/
.content{width: 1077px; height: 634px; margin: -372px 0 0 -538px; position: absolute; top:50%; left: 50%;}
.contentBacker{background: url(../images/layout/content.png) no-repeat bottom; width: 1077px; height: 524px; position: absolute; bottom:0; left: 0;}

/* load! */
.pageLoader{position: absolute; top:145px; left: 34px; background: #fff url(../images/layout/spinner-red.gif) no-repeat 50% 45%;  width:1008px;overflow: hidden; height: 454px; display: none;}
.pageLoader span{display: block; width: 100%; text-align: center; font-size: 12px; color: #999; position: absolute; top:52%; left: 0;}


/* nojs */
.noJsContent{display: block; position: absolute; top:50%; left: 50%; margin: -60px -250px; width: 500px; padding: 50px; color: #666; background: #fff; border: 3px solid #ccc;}
.noJsContent p{display: block; padding: 0 0 13px 0; text-align: center;}

h1{width: 115px; height: 124px; position: absolute; top:15px; left: 10px;}
h1 a {background: url(../images/layout/logo.png); text-indent: -999em; display: block; width: 115px; height: 124px;}

/* email*/
h3{position: absolute; top:100px; right: 17px; text-align: right; width: 300px;}
h3 a{display: block; padding: 10px; color: #446e83; font-size: 10px; text-decoration: none;}
h3 a:hover{color: #fff;}

/* some shadows! */
.shadow{display: block; position: absolute; background-repeat: no-repeat;}
.sTop, .sBottom{width: 1006px; height: 20px;}
.sLeft, .sRight{height: 415px; width: 22px;}
.sTop{background-image: url(../images/layout/shadow/top.png); top:145px; left: 35px;}
.sBottom{background-image: url(../images/layout/shadow/bottom.png); bottom:34px; left: 35px;}
.sLeft{background-image: url(../images/layout/shadow/left.png); top:165px; left: 35px;}
.sRight{background-image: url(../images/layout/shadow/right.png); top:165px; right: 36px;}

/* arroz */
.arrow{position: absolute; top:240px; height:270px; width: 58px;}
.aLeft{background-image: url(../images/layout/arrow/left.png); left: 12px}
.aRight{background-image: url(../images/layout/arrow/right.png); right: 13px}
.aLeft:hover{background-image: url(../images/layout/arrow/left-over.png);}
.aRight:hover{background-image: url(../images/layout/arrow/right-over.png);}


/* about */
blockquote{position: absolute; top:145px; left: 34px; background: url(../images/layout/80percentfff.png) top;  width:1008px; line-height: 22px;overflow: hidden;}
* html blockquote{background: #fff;}

blockquote.jsDisabled{height: 60px; border-bottom: 1px solid #ccc;}
blockquote.jsDisabled p{display: none;}
blockquote.jsDisabled h2 a span{display: inline;}
blockquote.jsDisabled h2 a em{display: none;}

blockquote.jsEnabled{height: 454px; background: #f7f7f7 url(../images/layout/up-grad.jpg) repeat-x bottom; }
blockquote.jsEnabled h2 a span{display: none;}
blockquote.jsEnabled h2 a em{display: none;}
blockquote.jsEnabled h2 a em.hasJs{display: inline;}

blockquote h2{font-size: 13px; line-height: 20px;}
blockquote h2 a{color: #444; text-decoration: none; display: block; padding: 20px 20px 30px 30px; }
blockquote h2 strong{color: #000; font-weight: bold;}
blockquote h2 a span, blockquote h2 a em{color: #0057b1;}
blockquote h2 a:hover, blockquote.long h2 a{color: #000;}
blockquote h2 a:hover span{color: #007eff;}

blockquote {}
blockquote .left, blockquote .right{float: left; width: 47%; padding: 10px 0 0;}
blockquote .left{padding-right:20px;}
blockquote p, blockquote h4{ font-size: 12px; padding: 0 30px 12px; color: #666;}
blockquote p a{color: #333;}
blockquote p a:hover{text-decoration:none; color: #000;}
blockquote h4{font-size: 16px; color: #000;}

/* info on each */
.info{width: 986px; padding: 10px; position: absolute; bottom: 36px; left: 35px; background: url(../images/layout/80percentblack.png);}
* html .info{width: 986px; padding: 10px; position: absolute; bottom: 36px; left: 35px; background:#000;}
.info h4{color: #fff; font-size: 12px;}
.info h4 span{color: #666; font-size: 10px;}
.info h4 span a{color: #666;}
.info h4 span a:hover{color: #fff; text-decoration: none;}


/* flickr */
.flickr{width:1006px; height: 453px; overflow: hidden; position: absolute; bottom:36px; left: 35px;}
.flickr .box{position: absolute; cursor: pointer;}
.flickr .box span{display: block; height: 453px; overflow: hidden;}

/* thumbs */

.thumbs{display: block; height: 50px; position: absolute; top: 607px; width: 100%; left: 0; }
.thumbs ol{width: 100%; position: absolute; top:22px; left: 0; text-align: center; height: 50px; }
.thumbs ol li{display: inline; line-height: 20px; margin: 0 7px;}
.thumbs ol li a{border: 1px solid #7b909e; height: 20px; padding: 0 8px; background-position: center; text-decoration: none;}
.thumbs ol li a:hover{border: 1px solid #fff;}

.thumbs .thumbsMask{display: block; position: absolute; width: 30px; top:0; left: 0; height: 47px; background: url(../images/layout/thumb-over.png) repeat-y top;}