@charset "utf-8";

#mainContainer
{
    margin:             0 auto;
}

#innerTube
{    
    background:         white;
    margin:             60px 0 0 0; /* T R B L */  
}

#header
{
    background:         black;
    font:               bold 14px Helvetica, sans-serif;    
}

#header a, #header a:visited
{
    text-decoration:	none;
}

#header a:hover
{
    color: 		#f00;
}

#navigation
{ 
    height:             30px;
    font:               14px Candara, sans-serif;  
    padding:            10px 15% 5px 15%; /* T R B L */
}

.buttons
{
    position:           absolute;
    top:                0px;
    right:              50px;
}

.button
{
    padding-left:        2px;
}


.strap
{
    color:              white;
    background:         black;
    padding:            5px 15% 10px 15%; /* T R B L */  
}

.strap h1
{
    color:              white; 
    font:               bold 25px Helvetica, sans-serif;
}

.strap p
{
    font-size: 1.2em;
}

.strap a, .strap a:visited
{
    color:                  lightgray;
    text-decoration:        underline;
    font-weight:            bold;
}

.content
{
    width:              auto;
    padding:            5px 15% 10px 15%; /* T R B L */    
}


#footer
{    
    color:		#999; 

    text-align:		center;
    font-size:		14px;
    font:		14x/18px Arial, Helvetica, sans-serif; 

    margin:             15px 0 0 0; /* T R B L */ 
    padding:            15px 0 15px 0; /* T R B L */ 
    
    clear:		both; 
}

#footer a, #footer a:visited
{
    color: 		#999;

    text-decoration:	none;

    padding-left:	5px;
    padding-right:	5px;
}

#footer a:hover
{
    color: 		#f00;
}

#footer #mainContainer
{
    padding:            0 0 0 100px; /* T R B L */  
}
    
#footer #mainContainer .section
{
    text-align:		left;
    width:              120px;
    float:              left;
}


#footer #mainContainer .section div
{
    font-weight:        bold;
    border-bottom:      1px solid #ccc;
}

#footer label
{
    color: 		#999;
    font-weight:        bold;
}


/*** Dropdown Menu ***/

.container
{
    float:              left;
    width:              90%;
    max-width:          675px;
    margin:             -5px auto;
    
}
.toggleMenu 
{
    background:         black;
    display:            block;
    position:           absolute; 
    height:             10px;
    padding:            10px 15px;
    color:              white;
    
    line-height:        10px;
    vertical-align:     middle;
}
a.toggleMenu, a.toggleMenu:visited
{
    color:              white;
}
a.toggleMenu:hover
{
    color:              red;
}


ul.nav, ul.nav li, ul.nav li ul, ul.nav li ul li, ul.nav li ul li ul, ul.nav li ul li ul li
{
    list-style-type:    none;
    padding:            0;
}

.nav 
{
    list-style:         none;
    *zoom:              1;
    background:         black;
}
.nav:before, .nav:after 
{
    content:            " "; 
    display:            table; 
}
.nav:after
{
    clear:              both;
}
.nav ul 
{
    list-style:         none;
    width:              12em;
}
.nav a 
{
    padding:            5px 15px 5px 10px; /* T R B L */    
    color:              white;
}
.nav a:hover 
{
    color:              whitesmoke;
}
.nav li
{
    position:           relative;
}
.nav > li 
{
    float:              left;
}
.nav > li > .parent 
{
    background-image:   url("../images/downArrow.png");
    background-repeat:  no-repeat;
    background-position: right;
}
.nav > li > a 
{
    display:            block;
}
.nav li  ul
{
    position:           absolute;
    left:               -9999px;
}
.nav > li.hover > ul 
{
    left:               0;
}
.nav li li.hover ul 
{
    left:               100%;
    top:                0;
}
.nav li li a
{
    display:            block;
    background:         #111;
    color:              white;
    position:           relative;
    z-index:            100;  
    border-top:         1px solid grey;
}
.nav li li li a 
{
    background:         #222;
    z-index:            200;
    border-top:         1px solid grey;
}


@media screen and (max-width: 768px) 
{
    .active 
    {
        display:            block;
    }
    .nav
    {
        position:           relative;
        top:                25px;
        margin-bottom:      35px;
    }
    .nav > li 
    {
        float:              none;
    }
    .nav > li > .parent 
    {
        background-position: 95% 50%;
    }
    .nav li li .parent 
    {
        background-image:   url("../images/downArrow.png");
        background-repeat:  no-repeat;
        background-position: 95% 50%;
    }
    .nav ul 
    {
        display:            block;
        width:              100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul 
   {
        position:           static;
   }
}