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

/*
Here's our rad red:
c4151c
*/

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

/* z-index'd, together, for evar!
/* ------------------------------------------------------ */
body{z-index: 100;}
.content{z-index: 500;}

/* some overal style stuuuuff! 
/* ------------------------------------------------------ */
html, body{min-height: 100%; background: #f7f7f7;}
body{overflow-y: scroll}
body{font-family:Helvetica, Arial, sans-serif;  line-height: 24px;} 
a{text-decoration: none; color: #09f;}
a:hover{color: #000; text-decoration: underline;}

.home_info p,
.home_info li,
.faq .answers p,
.article dl,
.person p{font-family: Georgia, Times, sans-serif;}


/* constrain it bro
/* ------------------------------------------------------ */
.constrain{width: 960px; margin: 0 auto; position: relative; }

/* tray up the top */
.tray{position: relative; height: 296px; background: url(../images/header/tray/rep.jpg) repeat-x bottom; padding: 30px 0 0; border-top: 5px solid #000; display: none;}
.tray_left,
.tray_right{position: absolute; top:0; left: 0; height: 286px; width: 600px; background: url(../images/header/tray/left.png) no-repeat 0 0}
.tray_right{left: auto; right: 0; background-image: url(../images/header/tray/right.png);}

.tray .close{color: #c4151c; font-size: 14px; display: block; position: absolute; top:200px; right: 0; background: #fff url(../images/arrows/red_up.gif) no-repeat 13px 50%; padding: 4px 10px; padding-left: 30px; text-decoration: none; border: 1px solid #ddd; border-radius: 3px;}
.tray .close:hover{color: #000; border-color: #999}

.tray .contact{font-size: 17px; color: #777; display: block; position: absolute; top:200px; left: 0; padding: 7px 0}
.tray .contact:hover{color: #000;}

.tray .card{float: left; background: url(../images/header/tray/person_card.png) no-repeat 0 0; width: 274px; height: 100px; margin-right: 64px ; position: relative;}
.tray .card_last{margin-right: 0;}

.tray .card h3{position: absolute; top:5px; left: 82px; width: 160px; font-size: 14px; color: #666; line-height: 20px}
.tray .card h3 em{color: #000; display: block; font-size: 16px;}
.tray .card .pic{position: absolute; left: 8px; top:8px; border: 1px solid #aaa; display: block;overflow: hidden; text-align: center; width: 56px; height: 56px;}
.tray .card .pic:hover{border-color: #333;}

.tray .card .icon{width: 16px; height: 16px; position: absolute; right: 8px; background: no-repeat 0 0; text-indent: -999em; opacity: 0.8}
.tray .card .email{background-image: url(../images/icons/email.png); top:7px;}
.tray .card .skype{background-image: url(../images/icons/skype.png); top:28px;}

.tray .card .status{display: none;}

.tray .card .chat{background-image: url(../images/icons/message.png); top:50px; display: none;}

.tray .card .skype_availability{background: none; text-indent: 0; top:26px;}

/* megas */
.tray .card .chatframe{overflow: hidden; background: none;}
.tray .card .chatframe iframe{position: absolute; top:0; left: 0;}

.tray .card .icon:hover{opacity: 1;}

.tray .card .status{position:absolute; top:53px; right:30px;}

/* superheader */
.super_header{background: #2e2e2e; height: 38px; border-top: 2px solid #fff; border-bottom: 1px solid #fff; position: absolute; top:286px; left: 0; width: 100%;}
.super_header a,
.super_header p{display: block; float: left; font-size: 14px; color: #ddd; background: #464646;  padding: 12px 15px 10px; padding-left: 40px; line-height: 14px;}
.super_header p em,
.super_header a em{color: #ccc;}

.super_header .trigger{background: #464646 url(../images/header/icons/little_dude.gif) no-repeat 15px 10px; margin-right: 10px; display: none;}
.super_header .trigger .arrow{ background: url(../images/header/arrow_down.gif); display: block; position: absolute; top: 0px; left: 15px; width: 9px; height: 5px;}

.super_header .trigger .hide{display: none;}

.super_header .trigger_active .find{display: none;}
.super_header .trigger_active .hide{display: inline;}

.super_header .time{padding-left: 15px;}
/*
.super_header .time{background: #464646 url(../images/header/icons/sun.png) no-repeat 10px 8px;}
.super_header .time_unavailable{background: #464646 url(../images/header/icons/moon.gif) no-repeat 14px 11px;}
*/
.super_header .time em em{color: #222; padding: 0 3px}

.super_header .phone,
.super_header .email{background: none; padding-left: 16px;}
.super_header .email{padding-left: 0;}

.super_header a:hover,
.super_header a.email:hover em{color: #fff; text-decoration: none;}

/* header */
.header{}
.header h1, .header h1 a{display: block; position: absolute; top:0; left: 0; width: 309px; height: 48px}
.header h1 a{background:url(../images/header/logo_on_shortgrad.jpg) no-repeat 0 0; top:30px; text-indent: -999em;}
.header h1 a:hover{opacity: 0.8;}

/* main menu */
.header .m1{position: absolute; top:35px; right: 0; width: 60%; }
.header .m1 a{font-size: 15px; color: #666; padding: 7px 10px 5px; border: 1px solid transparent; border-radius: 3px; line-height: 15px; display: block; float: right; margin-right: 10px; position: relative;}
.header .m1 a.active{background: #f7f8f8;border-color: #ddd;}

.header .m1 a:hover{color: #000}

.header .m1 a.upload{margin-right: 0; border:1px solid #ccc;}

.header .m1 a.upload:active{@shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow);}



/*
.header .m1 a.upload{background: url(../images/buttons/upload.png) no-repeat 0 0; position: absolute; top:0; right: 0; width: 87px; color: #fff; height: 30px; padding: 12px 0 12px 15px; margin: -5px 0 0}
.header .m1 a.upload:hover{color: #fff; background-position: 0 -200px}
*/

.header .m1 a .contact_arrow{display: none; position: absolute; top:-36px; left: 50%; margin-left: -8px; border-bottom: none; border-top:8px solid #aaa; border-left: 8px solid #edebf1; border-right: 8px solid #edebf1;}
.header .m1 a.js_tray_trigger:hover .contact_arrow{display: block;}

/* main content */
/* ------------------------------------------------------ */
.page{background: #fff url(../images/body/main_body_gradient_short.jpg) repeat-x top; min-height: 500px; padding: 110px 0 0}
.greybit{background: #f7f7f7 url(../images/body/grey_backer_top.jpg) no-repeat top; position: relative;}
.greybit .greybit_bottom{background: url(../images/body/grey_backer_bottom.jpg) no-repeat bottom; }
.greybit h2{font-size: 36px; line-height: 54px; padding: 20px 0 25px; color: #333;}

/* next step */
/* ------------------------------------------------------ */
.next_step{text-align: center; padding: 40px; background-color:#fff;}
.next_step h4{font-size: 24px; color: #666; line-height: 36px;}
.next_step p{font-size: 42px; line-height: 54px; color: #666;}


/* footer */
/* ------------------------------------------------------ */
.footer{ text-align: center; padding: 50px 0; color: #aaa; font-size: 12px;}
.footer a{ color: #666; margin: 0 5px}

.footer a.upload{color: #09f; font-weight: bold;}

.footer cite{display: block;}
.footer cite a{color: #999;}
.footer cite a em{color: #666;}

.footer a:hover,
.footer cite a:hover em{color: #09f}