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

/* Some PNGS:

black 10:
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==')

black 30:
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBg8AUIMAAAUgBOUWVeTwAAAABJRU5ErkJggg==')

black 50:
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBgaAAIMAAAhQCB69VMmQAAAABJRU5ErkJggg==')

black 70:
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBg2AwQYAAAuAC01qHx9QAAAABJRU5ErkJggg==')

black 90:
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBgeAYQYAAA6wDnP13/dgAAAABJRU5ErkJggg==')

white 90
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi/v///zOAAAMACfED51+lPcEAAAAASUVORK5CYII=')

white 50
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//fwNAgAEACXwDfugyhDIAAAAASUVORK5CYII=')

white 10
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//vxRAgAEACRYDGLm9L7AAAAAASUVORK5CYII=')

yellow 10
url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpi+P+fQQogwAAHGAIZ2AJGwQAAAABJRU5ErkJggg==')

*/


html, body{min-height: 100%;}

/* z togetha, foreva
------------------------------------ */
body{z-index: 100;}

.strip_back{z-index: 200;}
.strip_back .bar{z-index: 300;}
.strip_back .strip_content{z-index: 400;}
.content{z-index: 500;}
.blackout{z-index: 750;}
.scribble{z-index: 800;}
.scribble #canvas{z-index: 850;}
.scribble .tools{z-index: 880;}
.m2{z-index: 900;}
.header{z-index: 1000;}




.grid_overlay{z-index: 9999;}

/* some overal style stuuuuff!
------------------------------------ */
html, body{height: 100%;}

body, textarea, input{font-family:"Lucida Sans Unicode",'Lucida Grande', Helvetica, Arial, sans-serif;}
.clear{height: 0px; overflow: hidden; clear: both;}
.blackout{background: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBgaAAIMAAAhQCB69VMmQAAAABJRU5ErkJggg==');
position: absolute; top:0; left: 0; height: 100%; width: 100%; display: none;}
a img{border: none;}
.container{position: relative;}

.floorboards_clear{height: 300px;}

.grid_overlay{background: url(../images/background/grid.png) repeat-y 50%; width: 100%; height: 0px; position: absolute; top:0; left: 0; display: none;}

body{background: #000;}
/* backer action */
.wallrep{overflow: hidden; background: #fff url(../images/background/giant_wall_rep.jpg) repeat-x bottom;}
.wall{background: url(../images/background/giant_wall.jpg) no-repeat bottom; min-height: 1100px; padding-top: 50px;}

.header{position: fixed; top:0; left: 0; background: #000; border-bottom: 2px solid #fff; overflow: hidden; width: 100%;}
.header .menu{height: 50px;}

.header h1, .header h1 a{position: absolute; bottom:0; right: 0; height: 50px; width: 200px; }
.header h1 a{text-indent: -9999em; right: 0;background: url(../images/header/squareweave_logo.jpg) no-repeat right;}
.header h1 a:hover{background-image: url(../images/header/squareweave_logo_hover.jpg);}

.header .m1{position: absolute; bottom:0; left:0; width: 800px; height: 50px;}
.header .m1 a{display: block; color: #a0bace; padding: 19px 15px 19px; font-size: 12px; line-height: 12px; float: left; text-decoration: none; text-transform: uppercase;}
.header .m1 a:hover{background: #222; color: #fff;}

.header .m1 a.active{background: url(../images/header/uparrow.gif) no-repeat bottom; color: #fff;}

.header .m1 a em{font-style: normal; font-weight: bold;}

.header .m1 #m1_contact.jsactive{background: url(../images/contact/closeagain.jpg) no-repeat 100% 16px; padding-right: 28px; }
.header .m1 #m1_contact.jsactive:hover{background-position: 100% -24px;}

.m2{position: fixed; top:50px; left: 0; width: 100%; background: #fff;}
.m2 .shadow{background: url(../images/header/m2_shadow.png); height: 11px; overflow: hidden; position: absolute; top:100%; left: 0; width: 100%;}
.m2 .container{padding: 8px 0;}
.m2 a{display: block; float: left; border-left: 1px solid #ccc; padding: 0 15px; line-height: 14px; font-size: 11px; color: #999; text-transform: none; text-decoration: none;}
.m2 a:hover{color: #08f;}
.m2 a.first{border: none;}
.m2 a.selected{color: #000;}

/* only show this when necessary */
/*
.m2{display: none}
body.title-services .m2_services{display: block}
body.title-hire-our-people .m2_contactors{display: block}
*/

#contact_strip{height: 600px;}
.header .contact{position: relative; background: url(../images/contact/red-phone.jpg) no-repeat 50% -130px;}
.header .contact .number{position: absolute; top:440px; left: 80px; width: 240px;}
.header .contact .number h4{font-size: 30px; color: #fff;line-height: 30px; padding: 0 0 5px;}
.header .contact .number a{display: block; text-decoration: none; color: #b49897; padding: 5px 0; font-size: 16px;}
.header .contact .number a:hover{color: #fff;}
.header .contact .number span{font-size: 12px; color: #666; display: block; text-align: left; text-transform: none; padding:6px 0 3px 15px; line-height: 12px; background: url("../vendor/images.sw/arrows/up/3/808080.gif") no-repeat scroll 4px 12px transparent}

.header .contact .form{position: absolute; top:200px; left: 380px;}
.header .contact .form .label, .header .contact .form .input{padding-bottom: 30px;position: relative;}
.header .contact .form .input input, .header .contact .form .input textarea{display: block; background: #fffaee; border: none; font-size: 12px; color: #000; width: 310px;}
.header .contact .form .label{font-size: 16px; color: #b5b1a9;}
.header .contact .form .input{background: #fffaee; padding: 10px;}
.header .contact .form .input textarea{height: 180px;}
.header .contact .form .arrow{position: absolute; top:10px; left: -6px; height: 11px; width: 6px; background: url(../images/contact/arrow.gif) no-repeat; overflow: hidden;}

.header .contact .form .submit{position: relative;}
.header .contact .form .submit input{background: #222; text-align: center; padding: 10px 0; width: 100px; font-size: 14px; border: 1px solid #222; color: #999; position: absolute; top:0; right:20px; cursor: pointer;}
.header .contact .form .submit input:hover{background: #333; color: #fff;}

.header .contact .close_contact{width: 80px; position: absolute; top:30px; right: 80px; color: #666; font-size: 12px;  background: url(../images/contact/closeagain.jpg) no-repeat 100% 0; text-decoration: none; }
.header .contact .close_contact:hover{color: #fff; background-position: 100% -40px;}

.header .contact .js_ajax_mail_ticker{width: 177px; height: 61px; background: url(../images/contact/sending-clock.gif); text-indent: -9999em; position: absolute;top:300px; left: 600px;}

/*
.header .contact .js_ajax_mail.error,
*/
.header .contact .js_ajax_mail.success{width: 372px; height: 310px; background: url(../images/contact/oops.gif); text-indent: -9999em; position: absolute; top:130px; left: 529px;}
.header .contact .js_ajax_mail.success{background: url(../images/contact/success.gif);}


/* error check */
.header ul.error{position: absolute; top:-32px; left: 0; display: block; width: 100%}
.header ul.error li, .header p.error{position: absolute; color: #fff; font-weight: bold; top:0; left: 0; display: block; width: 305px; background: #c00 url(../vendor/images.sw/arrows/down/5/ffffff.gif) no-repeat 5px 50%; padding: 3px 0 3px 25px; font-size: 11px;}
.header .contact p.error{background: #c00 url(../vendor/images.sw/arrows/right/5/ffffff.gif) no-repeat scroll 115px 6px; width: 110px; padding: 5px 10px; top:213px; left: 20px;}

.mantle{width: 888px; position: absolute; top: 0; left: 50%; margin: -470px 0 0 -444px; height: 167px; background: url(../images/mantle/the-mantle.png); }
.mantle a{display: block; position: absolute; top:0; text-decoration: none; text-indent: -999em;}
.mantle .email{background: url(../images/mantle/email.png); width: 161px; height: 98px; top:15px; right: 100px;}
.mantle .phone{background: url(../images/mantle/phone.png); width: 205px; height: 111px; top:0; left: 90px;}
.mantle .texta{background: url(../images/mantle/scribble.png); width: 230px; height: 85px; top:25px; left: 330px; display: none;}

.mantle a:hover{opacity:0.8;}

/* hide plz */
.js_hidden{display: none;}


.fourohofour{padding: 200px 0 0; text-align: center;}