/* -------------------------------------------------
/* Will Dayble can kill a fully grown
/* polar bear with his mind.
/* ------------------------------------------------- */


body{background: #f5fce3; color: #22241e; font-family: Georgia, times, serif; padding: 30px 0;font-size: 14px;}
*{outline: none;}
a{color: #50583d;}
a:hover{color: #000 !important;}

/* z-indexes together, for neatness */
.logo{z-index: 50;}
.contact{z-index: 100;}
.portfolio ol li .thumb img{ z-index: 300;}
.portfolio ol li .thumb span{z-index: 500;}
.ieOnly{z-index: 600;}
.thePopup{z-index: 700;}
.thePopup .content a span{z-index: 800;}
.gridOverlay{z-index: 900;}

/* ------------------------------------------------- */
/* Header funs
/* ------------------------------------------------- */

.gridOverlay{width:100%; height:0px; background: url(../images/layout/grid-overlay.png) repeat-y top; position: absolute; top:0; left: 0; }

.ieOnly{display: none;}

.logo {position: relative; }
.logo h1{background: url(../images/titles/logo.gif) no-repeat left; display: block; height: 80px; text-indent: -999em; position: relative;}

.contact{position: absolute; top:0; right:0; text-align: right; width: 400px; color: #767f5f; padding: 0;}
.contact span{font-size: 18px; color: #000;}


/* ------------------------------------------------- */
/* Some general styles first, then specifics below
/* ------------------------------------------------- */


.container{position: relative;}

.strip{background: #e1ebc2; padding: 20px 0; margin: 20px 0; border-top: 1px solid;  border-bottom: 1px solid; border-color: #c2d095;}

.topBanner{position: relative; height: 180px; overflow: hidden;}
.topBanner ul{position: absolute; top:0; left:0px; width: 950px; margin: 0; padding: 0;}
.topBanner li{list-style: none; height: 300px;}
.topBanner blockquote{padding: 0 0 10px; margin: 0; font-size: 30px; letter-spacing: -1px; color: #545840;}
.topBanner blockquote p{padding: 0; margin: 0;}
.topBanner blockquote em{color:#000;}
.topBanner cite{text-align: right; font-size: 16px; color: #50583d; display: block; margin: 0; padding: 0;}
.topBanner cite span{display: block; color: #767f5f;}
.topBanner cite span a{color: #767f5f;}

h2{text-transform: uppercase; font-size: 24px; color: #a0ac7d; margin: 0; padding: 20px 0 10px; clear: both;}



/* the left hand side */
.aboutMe ul{margin: 0; padding: 0;}
.aboutMe ul li{list-style: none; background: url(../images/layout/dot.gif) no-repeat 0 7px; padding: 0 0 10px 15px;}

/* the right hand side */
.portfolio{color: #a0ac7d; }

.portfolio .intro{color: #000; margin: 0; padding: 0 0 10px 0;}


/* thumbs! */
.portfolio ol{margin: 0; padding: 0;}
.portfolio ol li{width: 120px; list-style: none; padding: 0; position: relative; float: left; height: 120px;}

.portfolio ol li .thumb{background: #e1ebc2; display: block; padding: 5px; width: 100px; text-decoration: none; height: 100px;}
.portfolio ol li .thumb img{position: relative;}
.portfolio ol li .thumb span{position: absolute; top:80px; display: block; left: 0; padding: 10px 10px 10px 130px; width: 85px; background: #e1ebc2 url(../images/layout/arrow-right.gif) no-repeat 92% 50%;}
.portfolio ol li .thumb:hover{background: #000;}

.portfolio ol li .thumb span{position: absolute; top:80px; left:-200px; background: url(../images/layout/tooltip.png) no-repeat; width: 286px; height: 183px; overflow: hidden;}
.portfolio ol li .thumb span strong{display: block; position: absolute; top:62px; left: 90px; color: #000; font-weight: normal; width: 220px; font-size: 18px;}
.portfolio ol li .thumb span em{display: block; position: absolute; top:95px; left: 50px; color: #888; font-weight: normal; width: 200px; text-indent: 25px; line-height: 24px;}
.portfolio ol li .thumb span i{display: block; position: absolute; top:100px; left: 50px; height: 16px; width: 15px; background: url(../images/icons/magnify.jpg) no-repeat; text-indent: -999em;}

.portfolio ol li.bankai{width: 470px;}
.portfolio ol li.bankai .thumb{width: 460px;}
.portfolio ol li.bankai .thumb span{left:0;}

/* flags */
.portfolio ol li .thumb span b{display: block; position: absolute; top:69px; left: 50px; background: no-repeat top left; height: 35px; width: 65px;}
.portfolio ol li .aus span b{background-image: url(../images/flags/aus.jpg);}
.portfolio ol li .nor span b{background-image: url(../images/flags/nor.jpg);}
.portfolio ol li .uk span b{background-image: url(../images/flags/uk.jpg);}
.portfolio ol li .us span b{background-image: url(../images/flags/us.jpg);}
.portfolio ol li .rar span b{background-image: url(../images/flags/rararar.jpg);}


/* hovers */
.portfolio ol li .thumb span{display: none;}
.portfolio ol li .thumb:hover span{display: block;}
.portfolio ol li .thumb span:hover i{background-position: 0 -16px;}

/* ------------------------------------------------- */
/* popupBox
/* ------------------------------------------------- */

.thePopup{width:876px; height: 606px; position: absolute; top:0; left: -1px; background: url(../images/popup/popup.png) no-repeat; display: none;}
.thePopup .closeButton{position: absolute; top:0; right: 0; text-indent: -999em; display: block; width: 90px; height: 80px; text-decoration:none;}
.thePopup .closeButton:hover{background: url(../images/popup/cross-ovr.gif) no-repeat 19px 40px;}
.thePopup .content{width: 750px; height: 375px; position: absolute; left: 58px; top:169px; overflow: hidden; background: #000; border: 2px solid #000;}
.thePopup .content ul.inner{display: block; width: 750px; position: absolute; top: 0; left: 0;margin: 0; padding: 0;}
.thePopup .content .inner li{display: block; height: 375px; position: relative;text-decoration: none; padding: 0; margin: 0;}
.thePopup .content .inner li span{display: block; width:720px; padding: 15px; background: #000; color: #fff !important; position: absolute; bottom: 0; }
.thePopup .content li span a{text-decoration: underline; color: #fff;}
.thePopup .content li span a:hover{text-decoration: none;}

.thePopup h4{color: #000; display: block; position: absolute; top:54px; left: 60px; padding: 0; margin: 0; font-size: 24px;}
.thePopup h4 span{color: #777;}
.thePopup .intro {position: absolute; top:90px; left: 60px; font-size: 14px; color: #666; width: 750px;}
.thePopup .intro p{padding: 0 0 5px 0; margin: 0;}
.thePopup .intro p em{font-style: normal; font-weight: bold; color: #000;}

/* ------------------------------------------------- */
/* thingy down the bottom about code
/* ------------------------------------------------- */

.onCode h2{background: url(../images/titles/a-brief-note.gif) no-repeat left; display: block; height: 40px; text-indent: -999em; position: relative;}
.onCode blockquote{padding: 20px 0 0; margin: 0; font-size: 24px; letter-spacing: -1px; color: #373a28; font-style: normal;}

.zip a, .grid a{height: 120px; display: block; background: url(../images/icons/zip.png) no-repeat left; font-size: 16px; border: 1px solid transparent}
.zip a span, .grid a span{display: block; padding: 30px 0 0 120px;}
.zip a:hover, .grid a:hover{background-color: #d0dcad; border-color: #c0cd97;}

.grid a{background-image:url(../images/icons/grid.png); }