/* Will Dayble's betting it all on a faith in sound, baby. */

html, body{min-height: 100%;}
a{text-decoration: none;}
.clearMe{height: 1px; visibility: hidden; overflow: hidden; clear: both;}

/* --------------------------- z-index'd, together, for evar! */
.content{z-index: 200;}
.ninjaBorder{z-index: 300}
.kills, .accuracy, .ninja{z-index: 400;}
.m1{z-index: 500}
.m1 ul.right{z-index: 520;}
.m1 ul.menu{z-index: 550}
.m1 li p b{z-index: 600;}
.m1 li p a, .m1 li p span{z-index: 700;}
.thePopup{z-index: 1000;}
.thePopup .spinner, .thePopup .arrow{z-index: 1200;}
.homePageStuff .sideWaysGuy, .homePageStuff .forwardsGuy{z-index: 1500;}
.awesomeKills{z-index: 2000;}

/* --------------------------- some stuuuuff! */
html, body{height: 100%;}
h2, h3, h4, blockquote{font-family: Georgia, Times, sans-serif;}
body, cite, .thePopup blockquote{font-family:'Lucida Grande', Helvetica, Arial, sans-serif;}

.minWidth{width: 800px; height: 1px; overflow: hidden; margin: 0 auto;}

/* main menu action all up on in it */
.m1{position: fixed; top:0; left: 0; width: 100%; background: url(../images/layout/down-gradient.png) repeat-x top; height: 52px; min-width: 700px;}
 * html .m1{position: absolute; background: url(../images/layout/down-gradient.gif) repeat-x top;}
.m1 ul{position: relative;width: 650px; margin: 0 auto;}
.m1 li{display: block; float: left; position: relative;}
.m1 a, .m1 li p span{display: block; float: left; font-size: 11px; padding: 11px 15px 13px; border-right: 1px solid #333; color: #ccc; font-weight: bold;}
.m1 p{position: absolute; right: 0; top:0;}
.m1 a:hover{color: #000; background: #fff}

/* dropdown */
.m1 li p{position: absolute; top:34px; left: -16px; width:209px; background: url(../images/layout/dropdown/rep.png) repeat-y top; border-top: 1px solid #333; padding: 0 0 5px;}
* html .m1 li p{background-image: url(../images/layout/dropdown/rep.gif);}
.m1 li p b{position: absolute; top:0; left: 16px; width: 177px; overflow: hidden; height: 26px; background: url(../images/layout/dropdown/grad.jpg) repeat-x top; border-top: 1px solid #555;}
.m1 li p a, .m1 li p span{display: block; border: none; padding: 6px 16px; border: none; float: none; margin: 0 16px; line-height: 18px; position: relative; background: none !important; font-weight: normal !important;}
.m1 li p a:hover{background: url(../images/layout/dropdown/arrow.gif) no-repeat 0 11px !important;}
.m1 li em {display: block; position: absolute; bottom: -19px; left: 1px; background: url(../images/layout/dropdown/bottom.png) no-repeat; overflow: hidden; width: 100%; height: 19px; overflow: hidden;}
* html .m1 li em{background-image: url(../images/layout/dropdown/bottom.gif); }
.m1 li p span{padding-bottom: 8px; font-size: 11px;}


/* trigger it */
.m1 li.active a{color: #000; background: #fff;}
.m1 li.active p a{color: #fff; background: none;}
.m1 li p{display: none;}
.m1 li.active p{display: block;}

/* current */
.m1 li.current a{color: #fff; background: url(../images/layout/white-arrow-up.gif) no-repeat bottom; font-weight: bold;}

/* admin */
.m1 li.admin{position: absolute; top:0; left: -100px; width: 100px;}
.m1 li.admin a{font-weight: bold; color: #f00;}
.m1 li.admin a:hover{background: #fff; color: #000;}


/* right side */
.m1 ul.right{position: absolute; top:0; left:50%; width: 650px; margin-left: -325px;}
.m1 ul.right li, .m1 ul.right a{float: right;} 
.m1 ul.right a{border: none; background:url(../images/layout/smaller-sw-logo.jpg) no-repeat left; width: 98px; text-indent: -999em;}
.m1 ul.right li p{left: auto; right:1px;}
.m1 ul.right li p a{background: no-repeat; width: auto; text-indent: 0;}

/* tooltip */
.toolFlip{background: #fa241e; color: #fff; padding: 10px 12px; font-size: 12px; max-width: 190px; text-transform: lowercase; font-weight: bold; line-height: 18px;}
.toolFlip .tip-title{font-weight: bold !important;}
.toolFlip .tip-text{display:none;}


/* standard pages */
.page{position: relative; padding: 70px 0 30px; margin: 0 auto; width: 650px;}

/* page banner */
.page .banner{padding: 0 0 11px; margin: 0 0 10px; background: url(../images/layout/banner-shadow.jpg) no-repeat bottom;}
.page .bannerBorderless{padding: 0 0 8px; margin: 0;}
.page .banner img{border: 3px solid #000;}
/* remember to see alts for this column fun */


.page h2, .page h3, .page h4, .page h5{font-size: 26px; line-height: 36px; color: #000; padding: 0 0 18px 0;}
.page h4{font-size: 18px; line-height: 22px;}
.page p, .page ul, .page ol{font-size: 12px; line-height: 18px; padding: 0 0 18px 0; color: #666;}
.page li{background: url(../images/layout/grey-arrow-right.gif) no-repeat 0 6px; padding-left: 12px; padding-bottom: 5px;}

.page .ajaxLink{background: url(../images/icons/gallery-popup-icon.gif) no-repeat top left; padding-left: 31px; display: block; line-height: 20px; font-size: 14px;}
.page .ajaxLink:hover{background-position: 0 -35px;}

.page p, .page ul, .page ol{margin-left: 18px; margin-right:18px;}
.page ul li ol{margin: 5px 0 0 20px; padding: 0;}
.page ul li ol li{padding-left: 0; background: none; list-style: decimal;}

/* coffee is god */
.page p.coffee{background: url(../../../../media/what/coffee.jpg) no-repeat left; padding: 30px 0 35px 100px;}

.page a{color: #06c;}
.page a:hover{color: #000;}

h2, h3, h4, blockquote{ margin: 10px 15px 0;}
h3.what-we-did,
h3.why-it-was-awesome,
h3.evidence
{text-indent: -999em; background: no-repeat left;}

/* specific tittles */
h3.what-we-did{background-image: url(../images/headers/what-we-did.jpg)}
h3.why-it-was-awesome{background-image: url(../images/headers/why-it-was-awesome.jpg);}
h3.evidence{background-image: url(../images/headers/evidence.jpg);}

.page p strong, .page h3 strong, .page h4 strong, .page h5 strong{font-weight: bold;}
.page p em, .page h3 em, .page h4 em, .page h5 em{font-style: italic;}

/* image gallery action */
.page ul li.imageGalleryLink {background: none;padding:0;}
.page ul li.imageGalleryLink a{background: url(../images/layout/blue-arrow-right.gif) no-repeat 0 6px; padding-left: 12px; padding-bottom: 5px; display: block;}
.page ul li.imageGalleryLink a span{display: none;}
.page ul li.imageGalleryLink a:hover{background: url(../images/layout/blue-arrow-down.gif) no-repeat 0 8px;}
.page ul li.imageGalleryLink a:hover span{display: inline;}

/* the work thumbs */
.workThumbs {padding: 0 0 0 12px}
.workThumbs a{float: left; height:120px; width: 110px; display: block; text-decoration: none; margin: 0 17px 10px 0; }
* html .workThumbs a{margin-right: 15px;}
.workThumbs strong{height: 80px; width: 100%; display: block;background: #eef1de no-repeat center;border: 1px solid #fff;}
.workThumbs span{display: block; padding: 6px; font-size: 11px;}
.workThumbs a:hover{}
.workThumbs a:hover strong{border: 2px solid #fff;}
.workThumbs a:hover span{padding-top: 4px;}

/* individuals  are no longer being used. upload to files/thumbs/
.workThumbs .future-spark strong{background-image: url(../../../../media/fs/thumb.jpg);}
.workThumbs .ideas strong{background-image: url(../../../../media/ideas/thumb.jpg);}
.workThumbs .photoshop-top-secret strong{background-image: url(../../../../media/psts/thumb.jpg);}
.workThumbs .ccb strong{background-image: url(../../../../media/ccb/thumb.jpg);}
.workThumbs .south-australian-jockey-club strong{background-image: url(../../../../media/sajc/thumb.jpg);}
.workThumbs .natio strong{background-image: url(../../../../media/natio/thumb.jpg);}
.workThumbs .php-architecture strong{background-image: url(../../../../media/php/thumb.jpg);}
*/

/* quotes */
.page blockquote{margin: 0; padding: 0;}
.page blockquote p{font-size: 16px; font-style: italic; color: #666;}
.page cite{display: block; text-align: right; font-size: 12px; padding: 10px 0 20px; font-size: 11px; font-weight: bold; border-bottom: 1px dashed #ddd;}
.page iframe{width: 100%; height: 400px; border: 2px solid #000;}


/* sub page content */
.subContent{background: #272928 url(../images/layout/subcontent/black-electro-grad.jpg) no-repeat top; padding: 30px 0; border-top: 3px solid #000; border-bottom: 3px solid #000;}
.subContent .page{padding: 0;}
.subContent .page p, .subContent .page h3, .subContent .page h4, .subContent .page h5, .subContent .page a{color: #fff;}
.subContent .page a:hover{color: #ccc;}

/* navigator */
.content .navigate{height: 50px; position: relative; font-size: 12px; margin: 0 12px;}
.content .navigate a{position: absolute; top:0; background: #111; border: 1px solid #444; width: 49%; text-align: center; padding: 10px 0; display: block; color: #666;}
.content .navigate a:hover{border: 1px solid #000; color: #000; background: #fff; cursor: pointer;}
.content .navigate .left{left: 0;}
.content .navigate .right{right: 0;}


/* a popup */
.thePopupBacker{height: 100%; width: 100%; display: block; position: absolute; top:0; left: 0; display: none;}
.thePopup{width:876px; height: 626px; position: absolute; top:0; left: 50%; background: url(../images/popup/popup.png) no-repeat; display: none; margin: 100px 0 0 -430px}
* html .thePopup{background-image: url(../images/popup/popup.gif);}
.thePopup .closeButton{position: absolute; top:0; right: 0; text-indent: -999em; display: block; width: 90px; height: 100px; text-decoration:none;}
.thePopup .closeButton:hover{background: url(../images/popup/cross-ovr.gif) no-repeat 19px 60px;}

.thePopup .thePopupContent{position: relative; margin: 20px 0 0;}
.thePopup .content{width: 750px; height: 375px; position: absolute; left: 58px; top:169px; overflow: hidden; background: #000; border: 2px solid #000;}
.thePopup .content ul{display: block; width: 750px; position: absolute; top: 0; left: 0;margin: 0; padding: 0;}
.thePopup .content ul li{display: block; height: 375px; position: relative;text-decoration: none; padding: 0; margin: 0; cursor: pointer; overflow: hidden; border: none;}
.thePopup .content ul li span{display: block; width:720px; padding: 15px; background: url(../images/transparencies/80black.png); color: #fff !important; position: absolute; bottom: 0; font-size: 12px;}
* html .thePopup .content ul li span{background: #000;}
.thePopup .content li span a{text-decoration: underline; color: #fff;}
.thePopup .content li span a:hover{text-decoration: none;}

.thePopup .content ul li span span.caps{width: auto; display: inline; padding: 0; background: none; position: relative;}

/* 2nd level */


.thePopup h2{color: #000; display: block; position: absolute; top:54px; left: 60px; padding: 0; margin: 0; font-size: 24px;}
.thePopup h2 span{color: #777;}
.thePopup blockquote {position: absolute; top:90px; left: 60px; font-size: 13px; color: #666; width: 750px; line-height: 18px; padding: 0; margin: 0;}
.thePopup blockquote p{padding: 0 0 5px 0; margin: 0;}
.thePopup blockquote p strong{font-size: 16px; font-weight: normal; padding: 0 0 3px;}
.thePopup blockquote p em{font-style: normal; font-weight: bold; color: #000;}
.thePopup blockquote p cite{ font-style: italic; color: #999;}


/* arroz */
.arrow{width: 45px; height: 100%; position: absolute; top:0; text-indent: -999em;}
.leftArrow{left:-5px; background: url(../images/popup/arrows/left.png) no-repeat -45px 50%;}
.rightArrow{right:1px; background: url(../images/popup/arrows/right.png) no-repeat 0 50%;}
.leftArrow:hover{background-position: 0 50%;}
.rightArrow:hover{background-position: -45px 50%;}

/* spinner */
.thePopup .spinner{position: absolute; top:50%; left: 50%; display: block; width: 785px; height: 523px; margin: -254px 0 0 -394px; text-decoration:none; background: #fefefe;}
.thePopup .spinner span{text-indent: -999em; position: absolute; top:50%; left: 50%; display: block; width: 100px; height: 100px; margin: -50px 0 0 -50px; text-decoration:none; background: url(../images/popup/spinner-red.gif) no-repeat center;} 

.thePopup .spinner span:hover{background: url(../images/popup/cross-ovr.gif) no-repeat center;}


/* footer */
.footer{width: 700px; margin: 30px auto; padding: 30px 0; text-align: center; font-size: 11px; color: #999; border-top: 1px solid #eee;}
.footer a{ color: #999; padding: 0 10px;}
.footer a:hover{color: #666;}


/* radiusafied */
.theWork a, .thePlay a, .toolFlip, .thePlay, .theWork, .workThumbs strong, .content .navigate a{-moz-border-radius: 3px;}



/* now let's change the gallery pages for normal display */
body.tag-css-gallery .page{width: 800px;}
/* and here is our inline image gallery */
.page .scrollableImages li{display: block; background: none; padding: 20px 0 20px 0;}
.page .scrollableImages li span{color: #fff; display: block; background: #555; padding: 5px 0 5px 10px; width: 700px;}
.page .scrollableImages li img{border: 2px solid #000;}

/* featured */
.page p.feat{position: relative;padding: 5px 0 0 135px; height: 100px;}
.page p.feat img{border: 3px solid #333; position: absolute; top:0; left: 0;}
.page p.feat img:hover{border-color: #666;}
.page p.feat a{font-weight: bold;}


.abilitiesList{overflow:auto; padding-bottom: 10px;}
.abilitiesList li{width: 270px; float: left;}