/*==== CORE ELEMS ====*/
html, body, #main_bg, #main_wrapper{
    margin: 0; width: 100%; height: 100%; 
    font-family: "Franklin Gothic Book", helvetica, arial, verdana; font-size: 15px; 
    color: #bbb; text-transform: lowercase;
    }
h1, h2, h3, h4, h5, h6{font-weight: normal; padding: 0; margin: 0;}
a{color: #bbb;}
    a:hover{color: #999;}

/*==== MAIN ELEMS ====*/
#main_bg{
    background: #ccc; 
    position: fixed; top: 0; left: 0; z-index: 20;
    width: 100%; height: 100%; overflow: hidden;
    display: none;
    }
#main_bg_engine{
    position: absolute; top: 300px; left: 300px; z-index: 0;
    width: 100px; height: 100px; overflow: hidden; display: none;
}
#site_alerts{
    position: absolute; top: 227px; left: 0px; z-index: 120;
    width: 100%; overflow: hidden;
    }
    #site_alerts div{padding: 13px 10px 0 0; display: none;}
    #site_alerts img{margin-left: 4px; float: right;}
#main_wrapper{position: absolute; top: 0px; left: 0; z-index: 100; min-width: 970px;} /* min width of window - will show scroller if smaller */

#logo{padding: 40px 0 10px 20px; color: #fcae25;}
#logo h1{font-size: 11px;}
#logo h1 b{font-size: 17px; font-weight: normal; margin-right: 2px;}

#main{background: url(/images/al_white.png); width: 100%; height: 160px; overflow: hidden;}
    #main_mask{padding: 15px 20px 15px 12px; min-width: 940px;} /* min width of the main to fit nav, sub nav, desc, logo */

#shadow{
    background: url(/images/al_gray.png) repeat-x; 
    width: 100%; height: 4px;
    }

#nav{float: left; width: 170px;}
    .icn_organic{background: url(/images/icn_organic.png) top right no-repeat; padding-right: 15px;}
    #nav_contact{margin-top: 95px;}
    
.nav{height: 120px;}
.nav ul{list-style: none; margin: 0; padding: 0;}
.nav li{margin-bottom: 4px;}
.nav li a{text-decoration: none; padding-left: 8px;}
    .nav li.on a{color: #999; background: url(/images/nav_on.png) 0 8px no-repeat;}


#main_content{float: left;}
    #portfolio_logo{float: right; text-align: right; width: 400px; margin-right: 10px;}

    #portfolio{display: none;}
        #portfolio .nav{float: left; width: 185px !important;}
        #portfolio .content{float: left; width: 175px;}
            #portfolio .content ul{margin: 0; padding: 0; list-style: none;}
            #portfolio .content li{display: none; position: relative;}
        #portfolio .Ultra16{background: url(/images/ultra16.png) right 4px no-repeat; padding: 0 80px 10px 0; position: absolute;}
        #portfolio .link{position: absolute; z-index: 50; top: 65px;}
    
    #contact{display: none; width: 300px !important;}
        #contact .email{padding-top: 3px;}
        #contact .phone{padding-top: 3px;}
        #contact .social{padding-top: 10px;}
    
    #organic{display: none; width: 300px !important;}
    
    #kaya{display: none; width: 300px !important;}

/*==== SCROLLER ====*/
.jspContainer{overflow: hidden; position: relative;}
    .jspPane{position: absolute;}
    .jspVerticalBar{position: absolute; top: 0; right: 0; width: 16px; height: 100%;}
    .jspHorizontalBar{position: absolute; bottom: 0; left: 0; width: 100%; height: 16px;}
    .jspVerticalBar *,
        .jspHorizontalBar *{margin: 0; padding: 0;}
    .jspCap{display: none;}
    .jspHorizontalBar .jspCap{float: left;}
    .jspTrack{position: relative;}
    .jspDrag{background: #bbd; position: relative; top: 0; left: 0; cursor: pointer;}
    .jspHorizontalBar .jspTrack,
        .jspHorizontalBar .jspDrag{float: left; height: 100%;}
    .jspArrow{background: #50506d; text-indent: -20000px; display: block; cursor: pointer;}
    .jspArrow.jspDisabled{cursor: default; background: #80808d;}
    .jspVerticalBar .jspArrow{height: 16px;}
    .jspHorizontalBar .jspArrow{width: 16px; float: left; height: 100%;}
    .jspVerticalBar .jspArrow:focus{outline: none;}
    .jspCorner{background: #eeeef4; float: left; height: 100%;}
    .jspScrollable{outline: 0 none;} /*-- hide highlight on safari chrome mac --*/
    /*-- Yuk! CSS Hack for IE6 3 pixel bug :( --*/
        * html .jspCorner{margin: 0 -3px 0 0;}
        
.jspVerticalBar{left: 0;} /*-- scroller on left --*/
#main_content .scroll-pane{width: 100%; height: 120px; overflow: auto;}
.jspVerticalBar{width: 5px;}
.jspHorizontalBar{height: 5px;}
.scroll-pane:hover .jspTrack{background: #ddd; cursor: pointer;}
.jspDrag{background: #fcae25;}
.scroll-pane{padding-left: 5px;}
.scroll-pane-wrapper{padding-top: 100px;}