/*** ----- Site Layout Styles ----- ***/
body { background-color: #dad9c7; }

/* Header */
#header             { margin-top: 10px; }
#header .row        { background-color: #1b1b1c; color: #fff; }
#header-content     { padding: 10px 20px 25px; }
#header-content h3  { color: #fff; margin: 0; font-size: 1.6em; font-weight: normal; }

body.login #header-content { padding-top: 20px; }

/* User Navigation */
#user-nav                   { padding-top: 10px; }
#user-nav ul                { float: right; padding-left: 0; padding-right: 20px; color: #fff; font-size: 0.9em; list-style-type: none; margin: 0; }
#user-nav ul li             { float: left; margin: 0 0 0 8px; }
#user-nav ul li:first-child { margin-left: 0; }
#user-nav ul li a           { color: #ddd; }
#user-nav ul li a:hover     { color: #fff; }

body.login #user-nav { display: none; }

/* Main Menu */
#main-menu .row { height: 27px; overflow: visible; background-color: #353838; } /* need to set height and set overflow to 'visible' in order for the dropdown menu to be visible */

#main-menu li                           { font-size: 0.9em; text-align: left; line-height: 1; }
#main-menu li li                        { font-size: 1.0em; }
#main-menu li a,
#main-menu li a:visited                 { text-decoration: none; }
#main-menu li.active-parent-page,
#main-menu li.active-page               { background-color: #5d6160; color: #fff; }
#main-menu li.active-parent-page > a,
#main-menu li.active-page > a           { color: #fff; }

/* System Messages */
#system-messages                        { font-size: 0.9em; clear: left; }
#system-messages .row                   { background-color: #fff; padding-top: 10px; }
#system-messages .msg-maint             { margin-left: 20px; margin-right: 20px; margin-bottom: 0; }
#system-messages .msg-notice            { margin-left: 20px; margin-right: 20px; }
#system-messages .msg-notice:last-child { margin-bottom: 0; }

/* Content & Sidebars - General */
#content            { clear: left; }
#content div.row    { background-color: #fff; }

#content-area   { min-height: 375px; }
#main-content   { text-align: justify; padding-top: 20px; padding-bottom: 20px; }
#page-content   { overflow: hidden; padding-bottom: 20px;  }
#sidebar-left   { text-align: justify; padding-top: 20px; padding-bottom: 20px; }
#sidebar-right  { text-align: justify; padding-top: 20px; padding-bottom: 20px; }

#sidebar-left div.sidebar-content   { padding-left: 20px; }
#sidebar-right div.sidebar-content  { padding-right: 20px; }

/* Content & Sidebars - single column layout */
body.single-column #page-content { padding-left: 20px; padding-right: 20px;  }

/* Content & Sidebars - 2 column layouts: content first in source code, then sidebar */
body.sidebar-left #page-content     { padding-right: 20px; }
body.sidebar-right #page-content    { padding-left: 20px; }

/* Content & Sidebars - 3 column layout: content first in source code, then sidebar left, then sidebar right last */
body.three-column #main-content     { margin-left: 25.85%; }
body.three-column #page-content     {  }
body.three-column #sidebar-left     { margin-left: -77.65%; }
body.three-column #sidebar-right    { float: right; }

/* Footer */
#footer-credits                 { margin-bottom: 10px; }
#footer-credits div.row         { background-color: #1d1d1f; }
#footer-credits-content         { text-align: left; padding: 10px 20px; font-size: 0.9em; color: #606261; }
#footer-credits-content a       { color: #fff; }
#footer-credits-content a:hover { text-decoration: none; }
#footer-credits-content p       {  }
#footer-credits-content #logo   { float: right; margin: 6px 0 0; }


/*** ---- Breadcrumbs ---- ***/
#page-breadcrumbs           { background-color: #fff; padding-top: 20px; }
.breadcrumbs                { font-size: 1em; border: 1px solid #dad9c7; background-color: #f6f3e4; padding: 6px 12px; margin-left: 20px; margin-right: 20px;
                                -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
.breadcrumbs a              { color: #252326; }
.breadcrumbs a:hover        { color: #504f59; }
.breadcrumbs span.home      {  }
.breadcrumbs span.current   { font-weight: bold; }


/*** ----- Pagination Styles ----- ***/
div.pagination                          { text-align: center; margin: 20px 0px; }
div.pagination a                        { padding: 2px 6px; margin: 0px 2px; border: 1px solid #dad9c7; background-color: #f6f3e4; color: #353838; text-decoration: none;
                                            -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
div.pagination a:hover                  { background-color: #fff; color: #5d6160; border-color: #dad9c7;  }
div.pagination span.current-page        { padding: 2px 6px; margin: 0px 2px; border: 1px solid #dad9c7; background-color: #fff; color: #353838;
                                            -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
div.pagination span.next-page a,
div.pagination span.prev-page a,
div.pagination span.first-page a,
div.pagination span.last-page a         { border: none; background-color: transparent; margin: 0px 4px; padding: 2px 0px; color: #353838; }
div.pagination span.next-page a:hover,
div.pagination span.prev-page a:hover,
div.pagination span.first-page a:hover,
div.pagination span.last-page a:hover   { color: #5d6160; }

div#pagination-info,
div #pagination-info-left { font-style: italic; }

div#pagination-info { margin: 6px 0 6px 0; float: right; }

div #pagination-info-left { margin-top: 20px; }


/*** ----- Overrides ----- ***/
/* turn OFF the max-width on images within a google map widget so the map displays properly */
div.widget-google-map img { max-width: none; }


/*** ----- Media Queries ----- ***/
/* Mobile - Landscape, Tablets */
@media handheld, only screen and (max-width: 767px)
{
    /* remove the positioning elements for the three column layout */
    body.three-column #main-content     { margin-left: 0; }
    body.three-column #sidebar-left     { margin-left: 0; padding-bottom: 0; }
    body.three-column #sidebar-right    { float: none; }
    
    /* set up some visual separation between the sidebars and footer widget areas */
    div.sidebar-content     { border-top: 1px solid #ddd; padding-top: 20px; }
    
    /* set up the overrides needed for this media query */
    
    #header         { margin-top: 0; }
    #header-content {  }
    
    #user-nav ul { float: none; padding-right: 0; }
    
    #system-messages .msg-notice,
    #system-messages .msg-maint     { margin-left: 0; margin-right: 0;}
    
    #main-content   { padding-bottom: 0; }
    .breadcrumbs    { margin-left: 0; margin-right: 0; }
    
    #content-area                       { min-height: 0; }
    body.single-column #page-content    { padding-left: 0; padding-right: 0; padding-bottom: 20px;  }
    body.sidebar-left #page-content     { padding-right: 0; }
    body.sidebar-right #page-content    { padding-left: 0; }
    
    #sidebar-left div.sidebar-content   { padding-left: 0; }
    #sidebar-right div.sidebar-content  { padding-right: 0; }
    
    #footer-credits-content { padding-left: 0; padding-right: 0; }
}

/* Mobile - Portrait */
@media handheld, only screen and (max-width: 320px)
{
    #user-nav { display: none; }
    
    /* move the header content down so it's not hidden behind the menu pull */
    #header-content { margin-top: 35px; margin-bottom: 0; }
    
    /* modify the padding above the content to remove excess whitespace (since the menu is moved) */
    #content { padding-top: 0; }
    
    /* set up the main menu to have a 'pull down' tab to open */
    #main-menu                  { position: absolute; z-index: 100; width: 100%; top: 0px; background-color: transparent; }
    #main-menu .row             { height: auto; }
    #main-menu .row .twelvecol  { padding-left: 0; padding-right: 0; }
    
    ul#nav-main-menu            { background-color: #bfbeac; color: #000; margin: 0; padding: 0.5em 0; width: 100%; }
    ul#nav-main-menu ul         { margin: 0; padding: 0; display: block !important; visibility: visible !important; }
    #nav-main-menu li           { line-height: 1.6em; list-style-type: none; margin: 0; padding: 0 0 0 1em; float: none !important; background-color: transparent; }
    #nav-main-menu li a         { color: #000; text-decoration: none; font-size: 1.1em; font-weight: normal; display: block; padding-top: 0.5em; padding-bottom: 0.5em; }
    #nav-main-menu li a:hover   { text-decoration: underline; }

    #main-menu-pull         { background-color: #bfbeac; float: right; text-align: center; margin-right: 1em; display: block;
                                -moz-border-radius-bottomleft: 0.5em; -moz-border-radius-bottomright: 0.5em; -webkit-border-bottom-left-radius: 0.5em; -webkit-border-bottom-right-radius: 0.5em; 
                                border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; -khtml-border-bottom-left-radius: 0.5em; -khtml-border-bottom-right-radius: 0.5em; }
    #main-menu-pull a       { color: #000; text-decoration: none; padding: 1em 1.5em; display: block; }
    #main-menu-pull a:hover { text-decoration: none; }
    
    #main-menu li.active-parent-page,
    #main-menu li.active-page               { background-color: transparent !important; }
    #main-menu li.active-parent-page > a,
    #main-menu li.active-page > a           { color: #000; font-weight: bold; }
    #main-menu li.active-page > a           { text-decoration: underline; }
    
    /* tweak the legend on the google analytics chart */
    #analytics-chart .legend table,
    #analytics-chart .legend table td { font-size: 0.8em; padding: 1px; }
    
    /* tweak the footer  */
    #footer-credits                 { margin-bottom: 0; }
    #footer-credits-content         { margin-bottom: 0; }
    #footer-credits-content p       { text-align: left; }
    #footer-credits-content #logo   { display: none; }
}