* {
    margin: 0;
    padding: 0;
}

a, a:visited, a:link
{
    color: #026e9c;
    text-decoration: underline;
}


a:hover
{
    text-decoration: underline;
    color: #DA4700;
}

.links li
{
    line-height: 1.3em;
    list-style: none outside url("http://www.brevardcounty.us/App_Themes/Brevard/global/images/bullet.gif");
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, form, #page-wrap {
    height: 100%;
    color: #4C4C4C;
    background: #ccc url(images/main-site-bg.png) repeat-x;
    font: 13px/1.4 "Segoe UI","Segoe","Trebuchet MS",Arial,Verdana,Helvetica,sans-serif;
}

#page-top-area {
    width: 1060px;
    height: 100px;
    margin: 0 auto;
    padding: 10px 0;
    padding-left: 60px;
}

#county-logo {
    background: url(images/county-logo.png) no-repeat;
    width: 180px;
    height: 100px;    
    float: left;
}

#county-slogan {
    background: url(images/county-slogan.png) no-repeat;
    width: 280px;
    height: 70px;
    float: left;
    margin: 15px 0 0 50px;
}

#county-search {
    float: left;
    margin: 25px 0 0 59px !important;
}

        #search-container {
            width: 440px;
            height: 50px;
            background: url(images/search-box.png) no-repeat;
            padding-top: 9px;
        }
        .search-box {
            width: 280px;
            height: 25px;
            border: none;
            border: 1px dotted #ccc;
            padding-left: 3px;
            font-size: 1.1em;
        }



#page-header-top-img {
    background: url(images/bg-top-content.png) no-repeat;
    width: 1060px;
    height: 20px;
    margin: 0 auto;
}

#page-header {
    width: 1060px;
    height: 214px;
    margin: 0 auto; 
    background: url(images/bg-content-1px.png) repeat-y;
}

#page-wrap {
    position: relative;
    top: -14px;
    background: url(images/bg-content-1px.png) repeat-y;
    width: 1060px;
    margin: 0 auto;
    clear: both; 
 height: 870px;
}

#page-main {
    clear: both;
    background: url(images/bg-content.png) no-repeat;
    padding: 0 0 0 15px;
    width: 984px;
    overflow:auto;
    margin-left: 31px;
    padding-bottom: 260px; /* must be same height as the footer */

}

#page-main h2 {
    padding-bottom: 0.6em;
}

#page-main p {
    padding-bottom: 1.2em;
    text-align: justify;
}

#page-footer2 {
    clear: both;
    margin: 0 auto;
    background: url(images/bg-footer.png) no-repeat;
    width: 1060px;
    height: 260px;    
    margin-top: -14px; /* negative value of footer height */
    position: relative;
    z-index: 100;
}

#page-footer
{
    clear:both;
    overflow:hidden;
    bottom:0;
    left:0;
    z-index:4000;
    width:100%;
    height:49px;
    position:fixed;
}

#page-footer .inside
{
    height: 49px;  
    width:80%;
    margin:0 auto; 
}

#page-footer .middle
{
    background: url(images/footer_bg.png) repeat-x;
    float:left;
    width:100%;
    height:49px; 
    padding:0;
    margin: 0;
}

#page-footer .icon
{
    padding-right:10px;
    vertical-align:bottom;
    padding-top:9px;
}

#selfService
{
    clear: both;
    overflow:hidden;
    bottom: 35px;
    left: 0;
    width: 100%;
    z-index: 5000;
    height: 150px;
    position: fixed;
}

#selfService .inside
{
    height: 200px;
    width: 250px;
    margin: 0 34% 0 0;
    float: right;
    text-align: center;
    background-color: #fff;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    z-index: 5000;
    text-align: left;
    font-size: 11px;
}

#departmentList
{
    clear: both;
    overflow:hidden;
    bottom: 35px;
    left: 0;
    width: 100%;
    z-index: 5000;
    height: 150px;
    position: fixed;
}

#departmentList .inside
{
    height: 200px;
    width: 250px;
    margin: 0 26% 0 0;
    float: right;
    text-align: center;
    background-color: #fff;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    z-index: 5000;
    text-align: left;
    font-size: 11px;
}

#departmentList .inside a, a:visited, a:link, a:hover, #selfService .inside a, a:visited, a:link, a:hover
{
    text-decoration: none;
        color:#026e9c;
}

#departmentList .inside ul li, #selfService .inside ul li
{
    line-height: 1.3em;
    list-style: none outside url("http://www.brevardcounty.us/App_Themes/Brevard/Global/images/bullet.gif");
}

#departmentList .inside ul li:hover, #selfService .inside ul li:hover
{
    font-weight:bold;
}

#reopen_bar
{
    clear:both;
    overflow:hidden;
    bottom:0;
    left:0;
    z-index:4000;
    width:100%;
    height:49px;
    position:fixed;
    color:White;
}

#reopen_bar .inside
{
    height: 49px;  
    width:60px;
    margin:0 10% 0 0; 
    float:right;
    text-align:center;
}

#reopen_bar .middle
{
    background: url(images/footer_bg.png) repeat-x;
    float:left;
    width:100%;
    height:49px; 
	padding:0;
    margin: 0;
}

/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}



/* ------------  Main site tabs ------------------------------------------- */

#tabs {
    /*width: 756px;*/
    height: 30px;
}

#tabs a
{
    cursor: pointer !important;
    color: #333 !important;
    text-decoration: none;
    font-size: 14px;
    height: 30px; 
}

#tabs ul
{
    display: inline;
    list-style-type: none;
    text-decoration: none;
}

#tabs li
{
    list-style-type: none;
    float: left;
    text-indent: 0;
    padding: 0;
    width: 125px;
    margin: 0 !important;
    list-style-image: none !important;
    line-height: 30px;
    background: url(images/tabs.png) no-repeat -420px 0;
    text-align: center;
    text-decoration: none;
    position: relative;
    top: 1px;
    color: #fff !important;
}

#tabs li a
{
    height: 30px;
    line-height: 30px;
    width: 126px;
    padding: 0 15px;
    text-decoration: none;
}

#tabs li a:hover
{
    color: #333 !important;
    height: 30px;
    line-height: 30px;
    width: 125px;
}

#tabs li:hover
{
    background: url(images/tabs.png) no-repeat -420px -62px;
    color: #fff !important;
    height: 30px;
    line-height: 30px;
    width: 125px;
}

#tabs .current, #tabs .current:hover
{
    background: url(images/tabs.png) no-repeat -420px -30px;
    cursor: pointer !important;
    color: #fff !important;
    height: 30px;
    line-height: 30px;
    width: 126px;
}
#tabs .current a
{
    cursor: pointer !important;
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    width: 126px;
}


/* -- Banner and Navigation --------------------------------------------------------------- */

.banner-nav
{
    float: left;
    width: 250px;
    height: 227px;
    color: #fff;
    margin-top: -30px;
    margin-left: 1px;
    background: url(images/banner-nav-links.png) no-repeat;
}
.banner-nav p
{
    padding: 4px 10px 0px 10px;
    font-size: 16px;
    color: #fff;
}
.banner-nav .top5-button1
{
    height: 64px;
    color: #fff;
}
.banner-nav .button1
{
    height: 33px;
    color: #fff;
}
.banner-nav .button1 a:link
{
    text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.banner-nav .button1 a:visited
{
    text-decoration: none;
    color: #fff;
}
.banner-nav .button1 a:active
{
    text-decoration: none;
    color: #fff;
}
.banner-nav .button1 a:hover
{
    text-decoration: underline;
    color: #fff;
}

.banner-nav .button2
{
    height: 33px;
}
.banner-nav .button2 a
{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}
.banner-nav .button2 a:hover
{
    text-decoration: underline;
}

.banner-nav .button3
{
    height: 33px;
}
.banner-nav .button3 a
{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}
.banner-nav .button3 a:hover
{
    text-decoration: underline;
}

.banner-nav .button4
{
    height: 33px;
}
.banner-nav .button4 a
{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}
.banner-nav .button4 a:hover
{
    text-decoration: underline;
}

.banner-nav .button5
{
    height: 33px;
}
.banner-nav .button5 a
{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}
.banner-nav .button5 a:hover
{
    text-decoration: underline;
}

.banner-nav .button6
{
    height: 33px;
}
.banner-nav .button6 a
{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}
.banner-nav .button6 a:hover
{
    text-decoration: underline;
}









img {
    border: none;
}

.slider-padding {
    padding: 15px;
}



/* Page Left Navigation ------------------------------------------ */

#page-leftnav {
    width: 193px;
    vertical-align: top;
    padding-top: 3px;
}

#page-leftnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

#page-leftnav li {
    margin: 0;
}

#page-leftnav li a .text {
    padding-top: 3px;
    color: #4a8b2c; 
    font-size: 1.3em;
}

#page-leftnav li a .subtext {
    padding-top: 0px;
    color: #666; 
    font-size: 0.8em;
    font-weight: bold;
}

#page-leftnav li a {
    display: block;
    text-decoration: none;
    font-weight: 600;     
    border: 1px solid #ccc;
    border-radius: 2px; 
    width: 193px; 
    height: 50px;       
    margin-top: 9px;
    padding-left: 10px;
    background: url(images/left-nav-button.png) no-repeat;  
} 

    html>body #button li a {
        width: auto;
    } 
    
    #button li a:hover {
        color: #4a8b2c;  
        border: 1px solid #4a8b2c;
    }


#page-leftnav .page-heading1 {
    text-align: center;
    background: url(images/quick-links.png) no-repeat;
    width: 188px;
    height: 24px;
    margin: 10px 0;
}

#page-leftnav .dropdownlist {
    border: 1px solid #ccc; 
    border-radius: 1px; 
    width: 196px; 
    padding: 3px;
    background-color: #fff;
}



page-leftnav span {
    font-size: 1.3em;
    font-weight: 600;
    color: #4a8b2c;
    /*padding: 10px 0 0 10px;*/
}

/*---------------------------------------------------------------------*/

#page-container {
    clear: both;

}

#spotlight-slider { 
    float: left; 
    margin-left: 10px;
    padding: 10px;
}
    #spotlight-slider a { 
       color: #fff;
       text-decoration: underline;
    }
    #spotlight-slider ul {    
        top: 0px;
        left: 0px;
    }
    spotlight-slider li {
        padding: 10px;  
        background: url(images/bg-spotlight-slider.png) no-repeat;
        width: 750px;
        height: 230px;      
    }

#page-volunteer {
    float: left;    
    width: 360px;
    height: 274px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 10px;
    /*background: #fff url(images/header-volunteer.png) no-repeat;*/
}

#page-video {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

#page-news-events {
    float: left;
    margin: 10px 0 0 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 510px;
    height: 240px;
    background-color: #fff;
    /*background: #fff url(images/header-releasesevents.png) no-repeat;*/
    padding: 4px 3px 0 10px; 
    overflow:hidden;
    font-size:11px;
}

#page-button-links {
    float: left;
    margin: 5px 0 0 10px;
     
}

#page-button-links ul {
    list-style: none;
}

#page-button-links ul li {
    margin-bottom: 10px;
}

#page-top-content {
    clear: both;
}

#page-bottom-content {
    clear: both;
    margin-top: 12px;
}



/* Royal Slider */

#video-gallery {
  width: 100%;
}

.videoGallery .rsTmb {
  padding: 20px;
}
.videoGallery .rsThumbs .rsThumb {
  width: 220px;
  height: 80px;
  border-bottom: 1px solid #2E2E2E;
}
.videoGallery .rsThumbs {
  width: 220px;
  padding: 0;
}
.videoGallery .rsThumb:hover {
  background: #000;
}
.videoGallery .rsThumb.rsNavSelected {
  background-color: #02874A;
  border-bottom:-color #02874A;
}

.sampleBlock {
  left: 3%; 
  top: 1%; 
  width: 100%;
  max-width: 400px;
}


@media screen and (min-width: 0px) and (max-width: 500px) {
  .videoGallery .rsTmb {
    padding: 6px 8px;
  }
  .videoGallery .rsTmb h5 {
    font-size: 12px;
    line-height: 17px;
  }
  .videoGallery .rsThumbs.rsThumbsVer {
    width: 100px;
    padding: 0;
  }
  .videoGallery .rsThumbs .rsThumb {
    width: 100px;
    height: 47px;
  }
  .videoGallery .rsTmb span {
    display: none;
  }
  .videoGallery .rsOverflow,
  .royalSlider.videoGallery {
    height: 300px !important;
  }
  .sampleBlock {
    font-size: 14px;
  }
}

 #page-navigation { display: none; }