@import url("fonts.css");



/*

 * Style tweaks

 * --------------------------------------------------

 */

html,

body {

    background: #161616;

    color:white; 

    font-size: 13px;

}



.container{

    max-width: none !important;

    width:970px;

}



footer {

    position: relative;

    z-index: 100;

    padding: 30px 0;

    text-align: right;

}



div.logo{

    position: relative;

    padding:0 !important;

    z-index:100;

}



.content{

    height:700px !important;    

    color:#161616;

    background: white;

}



.content-yellow{

    background: #ff8a00;

    color:whitesmoke;

}



.content-red{

    background: #e42431;

    color:whitesmoke;

}



.content-green{

    background: #406618;

    color:whitesmoke;

}



.content-blue{

    background: #00aeef;

    color:whitesmoke;

}



.content-brown{

    background:#998675;

    color:whitesmoke;

}



div.content > *{

    font-family: 'open_sansregular';

}



div.content > h1,h2,h3,h4,h5,h6{

    font-family: 'open_sansbold';

}



.holder-white{    

    height: 700px;

}



.triangle-white{

    border-style: solid;

    border-width: 350px 182px 350px 0;

    border-color: #161616 #ffffff #161616 ;position:absolute;right: 0;

}



.holder-yellow{  

    height: 700px;

}



.triangle-yellow{

    border-style: solid;

    border-width: 350px 182px 350px 0;

    border-color: #161616 #ff8a00 #161616 ;position:absolute;right: 0;

}



.holder-red{      

    height: 700px;

}

.triangle-red{

    border-style: solid;

    border-width: 350px 182px 350px 0;

    border-color: #161616 #e42431 #161616 ;position:absolute;right: 0;

}



.holder-green{ 

    height: 700px;

}



.triangle-green{

    border-style: solid;

    border-width: 350px 182px 350px 0;

    border-color: #161616 #406618 #161616 ;position:absolute;right: 0;

}



.holder-brown{

    height: 700px;

}



.triangle-brown{

    border-style: solid;

    border-width: 350px 182px 350px 0;

    border-color: #161616 #998675 #161616 ;position:absolute;right: 0;

}



.holder-blue{   

    height: 700px;

}



.triangle-blue{

    border-style: solid;

    border-width: 350px 182px 350px 0;

    border-color: #161616 #00aeef #161616 ;position:absolute;right: 0;

}



.iconic{

    margin: 0;    

    position: absolute;

    top: 50%;

    left: 50%;

    margin-right: -50%;

    transform: translate(-50%, -50%);

    z-index: 999;  

}



.light{

    font-family: 'open_sanslight';

}



/*

 * Menu

 * --------------------------------------------------

 */

#sidebar {

    // background: #333;

    list-style: none; 

    margin-top: 150px !important;    



}



#MenuBar1{

    margin-left: -25px;

}





#sidebar li {

    font: 35px "FuturaBoldCondensed", sans-serif;

    margin: 0 auto;

    padding: 0;

    list-style: none;

    width:80%;

    text-transform: uppercase;

    text-align: center;



}

#sidebar a {

    // background: #333;

    //border-bottom: 1px solid #393939;

    color: #fff;

    display: block;

    margin: 0;

    padding: 0;

    text-decoration: none;

    font-weight: normal;

    -webkit-transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);

    -moz-transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);

    -o-transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);

    transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

}

#sidebar a:hover{

    background: #2f5a2f;

    color: #ccc;   

}



#sidebar a.active {

    background-color: #2f5a2f;

    color: #ccc;   

}

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */



/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */



/*******************************************************************************



 LAYOUT INFORMATION: describes box model, positioning, z-order



 *******************************************************************************/



/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */

ul.MenuBarVertical

{

    margin: 0;

    padding: 0;

    list-style-type: none;

    font-size: 100%;

    cursor: default;

    //width: 8em;

}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

ul.MenuBarActive

{

    z-index: 1000;

}

/* Menu item containers, position children relative to this container and are same fixed width as parent */

ul.MenuBarVertical li

{

    margin: 0;

    padding: 0;

    list-style-type: none;

    font-size: 100%;

    position: relative;

    text-align: left;

    cursor: pointer;

    //width: 8em;

}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

ul.MenuBarVertical ul

{

    margin: 0 0 0 100%;

    padding: 0;

    list-style-type: none;

    font-size: 100%;

    position: absolute;

    z-index: 1020;

    cursor: default;

    width: inherit;

    left: -1000em;

    top: 0;

}

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

ul.MenuBarVertical ul.MenuBarSubmenuVisible

{

    left: 0;

}

/* Menu item containers are same fixed width as parent */

ul.MenuBarVertical ul li

{

    //width: 8.2em;

}



/*******************************************************************************



 DESIGN INFORMATION: describes color scheme, borders, fonts



 *******************************************************************************/



/* Outermost menu container has borders on all sides */

ul.MenuBarVertical

{

    //border: 1px solid #CCC;

}

/* Submenu containers have borders on all sides */

ul.MenuBarVertical ul

{

    background: #161616;

    padding: 5px 5px;

}

/* Menu items are a light gray block with padding and no text decoration */

ul.MenuBarVertical a

{

    display: block;

    cursor: pointer;

    //background-color: #EEE;

    //padding: 0.5em 0.75em;

    //color: #333;

    text-decoration: none;

}

/* Menu items that have mouse over or focus have a blue background and white text */

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus

{   

    // background-color: #33C;

    color: #FFF;

}

/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

{

    //background-color: #33C;

    color: #FFF;

}



/*******************************************************************************



 SUBMENU INDICATION: styles if there is a submenu under a given menu item



 *******************************************************************************/



/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

ul.MenuBarVertical a.MenuBarItemSubmenu

{



    background-image: url(../images/SpryMenuBarRight.gif);

    background-repeat: no-repeat;

    background-position: 95% 50%;

}



/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

ul.MenuBarVertical a.MenuBarItemSubmenuHover

{    

    background-image: url(../images/SpryMenuBarRightHover.gif);

    background-repeat: no-repeat;

    background-position: 95% 50%;

}



/*******************************************************************************



 BROWSER HACKS: the hacks below should not be changed unless you are an expert



 *******************************************************************************/



/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

ul.MenuBarVertical iframe

{

    position: absolute;

    z-index: 1010;

    filter:alpha(opacity:0.1);

}

/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

@media screen, projection

{

    ul.MenuBarVertical li.MenuBarItemIE

    {

        display: inline;

        float: left;

        //background: #FFF;

    }

}



.div-image-holder-main{

    width:540px !important;

    margin: 10px auto;

}

.image-holder{

    width:250px !important;   

    display: inline-block;

    border: 10px solid #fff;  

    -webkit-box-shadow: 5px 5px 5px #111;

    box-shadow: 5px 5px 5px #111;  

}

.spacer{

    width:6px !important;

    display: inline-block;        

}



.title-head{

    font-family:"FuturaBoldCondensed", sans-serif;

    text-transform: uppercase;

    text-shadow: 0px 1px 1px rgba(0,0,0,0.4);

}



.video-holder{

    width:500px !important;   

    display: inline-block;

    border: 5px solid #fff;  

    -webkit-box-shadow: 5px 5px 5px #111;

    box-shadow: 5px 5px 5px #111;  

}



.content-holder{

    width:auto;

    margin-right: 10px;

    //border: 1px dotted red;

    text-align: justify;

}



.line{

    border-left: 12px solid #2f5a2f;

    min-height: 100%;

    position:absolute;

    margin-top: -2px;

    margin-left: 101px;

}



.scroll-pane

{   

    margin-top: 20px;

    padding:20px 0px 10px 20px;

    width: auto;

    height: 650px;

    overflow: auto;

}



.pushed{

    margin-top: 70px;

}





//Form





form dt, form dd {

    display: block;

    padding: 0 0 7px;

}



form dt {

    clear: left;

    float: left;

    overflow: hidden;

    width: 100px;margin-bottom: 20px;

    font-weight: normal;

}



form dd {

    float: left;

    margin-left: 5px;

}



label.required,

label:required {

    //font-weight: bold;

}



label.required:after,

label:required:after {

    content: ' *';

}



label.invalid,

label:invalid {

    color: #f00;

}



button {

    display: block;

    clear: both;

    

    padding: 6px 12px;

    margin-bottom: 0px;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.42857;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    -moz-user-select: none;

    background-image: none;

    border: 1px solid transparent;

    border-radius: 4px;

}



label{

    font-weight: normal;

}



form textarea {

    width:300px;

    height:250px;

}



form .mellis {

    display: none;

}



//end form