﻿body {
    margin: 0;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: small;
    color: #3d3d3d; /* dark grey */
    background-color: #242425;
    line-height: 18px;
}

#pageContainer
{
    width: 100%;
    text-align: center;
    background-color: #e0e0e0;
}

/* 
** MAIN SECTIONS OF PAGE 
*/

#topSection 
{
    height: 137px;
    background-image: url(../images/header_background_grassdots.jpg);
    background-repeat: repeat-x;
    border-bottom: 1px solid #59595a;
    background-color: #242425;
}

#navigationSection 
{
    height: 38px;
    background-image: url(../images/nav_background.png);
    background-repeat: repeat-x;
    background-color: #242425;
}

#middleSection 
{
    background-color: #e0e0e0;
    min-height: 400px;
    border-bottom: 1px solid #e0e0e0;
}

#bottomSection 
{
    background-color: #242425;
}

#footerLineSection
{
    clear: both;
    height: 7px;
    background-color: #99cc33;
}

#headerContainer, #middleContainer, #footerContainer, #navContainer
{
    width: 980px;
    margin: auto;
    text-align: left;   
}

#headerContainer 
{
    height: 137px;
    background-image: url(../images/header_spotlight2.png);
    background-repeat: no-repeat;
}

#middleContainer
{
    width: 950px; /* headerContainer width minus padding for text */
    padding: 15px 15px 0px 15px;
    border-top: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

#footerContainer
{
    width: 950px; /* headerContainer width minus padding for text */
    padding: 0px 15px 0px 15px;    
    color: #666;
}

#footerInfo 
{
    width: 950px; /* headerContainer width minus padding for text */
    padding: 0px 0px 0px 15px;    
    color: #666;
}

#logoContainer
{
    width: 345px;
    height: 91px;  
    float: left;
    padding-top: 25px;
}

#sloganContainer
{
    width: 473px;
    height: 69px;
    float: left;
    margin-left: 20px;
    margin-top: 40px;
}

#navigationSection 
{
}

#navContainer 
{
    width: 980px; /* headerContainer width minus padding for text */
    padding: 0px 0px 0px 0px;    
    text-align: left;
}

/* 
** TEXT 
*/

h1, h3
{
    font-family: Cambria, Arial, Verdana;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: normal;
}

h1 
{
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
}

h2 
{
    font-family: Arial, Helvetica, Sans-Serif;
    text-transform: uppercase;
    font-size: 12px;
}

h3 
{
    color: #ccc;
}

a
{
    color: #669900;
}

.h1_noline 
{
    border: none;
}

/* 
** NAVIGATION 
*/


#navContainer a
{
    display: block;
    height: 27px; /* nav is 38px high */
    color: #999;
    text-decoration: none;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 11px;
    text-transform: uppercase;
    font-family: Helvetica, Arial, Verdana;
}

#navContainer a:hover
{
    color: #def0ba;
    background-color: #99cc33;
    background-image: url(../images/nav_hover_background.png);
    background-repeat: repeat-x;
}

#col1, #col2, #col3, #col4
{
    float: left;
    width: 200px;
    padding: 0px 30px 10px 0px;
}

#footerInfo 
{
    clear: both;
    border-top: 1px solid #333;
    padding-top: 25px;
    height: 110px;
    text-align: center;
    background-image: url(../images/BunnyHop_logo_small_grass.png);
    background-repeat: no-repeat;
    background-position: right;
}

#portfolio
{
    padding-top: 20px;
    text-align: center;
    height: 270px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}

.textbox 
{
    font-family: Arial, Helvetica, Sans-Serif;   
}