@import "css/variations/stylesheetwidget.css";
@import "../../Containers/GoodDNN-LightBlue/LightBlue06.css";

/***************** Globals ******************************* could be taken off for default or portal? ***************/
body {
    background-color: #D6C1A1;
    line-height: 14px;
}

.pagebg {
    background-color: #F5EFE7;
    /*#F1EFE8;*/
}

ol,
ul {
    list-style: inside none none !important;
    margin-left: 5px;
    margin-bottom: 10px;
}

li {
    margin-bottom: 5px;
}

ul li ul {
    margin-top: 3px;
    margin-bottom: -10px;
}

.nonelist li {
    list-style-type: none;
}

.center {
    text-align: center;
}

.blueborder {
    border: 1px solid #1C4E69;
}

.small {
    font-size: smaller;
}

.wrapper {
    width: 100%;
}

.nounderline,
.nounderline li,
.nounderline a,
.nounderline a:link,
.nounderline a:active,
.nounderline a:visited {
    text-decoration: none;
}

.nounderline a:hover {
    text-decoration: underline;
}

.bluebg {
    background-color: #1C4E69;
    padding-bottom: 3px;
}

/***************************** Header *****************************************/
#HeaderWrapper {
    width: 100%;
    background-color: #1C4E69;
    max-width: 100% !important;
}

/*********************************** County Manu ********************************/
#CountyMenuDiv {
    width: 680px !important;
    height: 37px;
    padding: 0;
    margin: 0;
    background: url(images/LightBlue_r5_c7.jpg);
    float: left;
}

/********************** County Search on top of page *************************************/
/**.SCCsearch {border: 0px solid black; padding-top: 10px!important;} **/

/***** SCCsearch cell **************/
.SCCsearch .gsc-control-cse {
    background-color: transparent !important;
    border: none !important;
}

#googlesearchCell.SCCsearch {
    background: rgba(0, 0, 0, 0) url(images/LightBlue_r5_c7.jpg) repeat scroll 0 0;
    width: 292px !important;
    display: table-cell;
    float: right;
    padding: 0px;
    padding-left: 40px;
}

/*** SCCsearch wrapper *****/
.SCCsearch table.gsc-search-box {
    position: relative;
    top: -8px !important;
}

/***** SCCsearch input  **************/
.SCCsearch .gsc-input-box {
    height: auto !important;
    border: 1px solid #DDD !important;
    width: 200px !important;
}

.SCCsearch #gs_tti50 input {
    font-size: 16px !important;
    padding: 4px 4px !important;
    margin: 0px !important;
    padding-right: 12px;
    border: 0px solid #DDD !important;
}

.SCCsearch #gs_tti50 {
    padding: 0px !important;
}

/***** SCCsearch button  **************/

.SCCsearch .cse input.gsc-search-button,
.SCCsearch input.gsc-search-button {
    min-width: 15px !important;
}

.SCCsearch #___gcse_0 .gsc-search-button {
    margin-top: -4px !important;
}

.SCCsearch input.gsc-search-button {
    background-color: #2e6e90 !important;
    background-image: none !important;
    border: none !important;
    width: 13px !important;
    min-width: 13px !important;
    height: 13px !important;
    padding: 10px !important;
}


/**************************************  PLANNING SEARCH ***************************/
.PLNsearch {
    background-color: transparent !important;
    border: 0px solid black !important;
    height: 60px !important;
    width: 292px !important;
    margin: 0px !important;
    padding: 0px !important;
}

.PLNsearch .gsc-input-box {
    height: auto !important;
    border: 0px solid black !important;
    margin-top: 0px !important;
}

.PLNsearch input.gsc-input {
    border: 1px solid #DDD !important;
    font-size: 16px !important;
    padding: 4px 4px !important;
    width: 200px !important;
}

.PLNsearch .gstl_52 {
    background-color: #F5EFE7;
    margin: 0px;
}

.PLNsearch .gsc-search-button,
.PLNSearch input.gsc-search-button {
    border: 0px solid black !important;
    margin-top: 6px !important;
}

.PLNsearch input.gsc-search-button {
    background-image: none !important;
    background-color: #2e6e90 !important;
    border: none !important;
    width: 13px !important;
    min-width: 13px !important;
    height: 13px !important;
    padding: 10px !important;
}

/**************************************  END PLANNING SEARCH ***************************************************************************/


/************************************** Panes *********************************************/
.bannerPane {
    display: table-row;
}

.breadcrumbPane {
    padding: 10px;
    float: left;
    width: 600px !important;
    max-width: 600px !important;
    vertical-align: top;
}

.BreadcrumbBar {
    padding-bottom: 8px;
    padding-left: 10px;
    padding-top: 12px;
}

.IWantPane {
    height: 25px;
    padding: 0px;
    padding-right: 10px;
    margin: 0px;
    vertical-align: top;
    width: 290px;
    float: right;
}

.leftPane {
    padding: 10px;
    margin: 0px;
    width: 256px !important;
    vertical-align: top;
}

.rightPane {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    width: 700px !important;
    float: right;
}

.bottomPane {
    border: 0px solid #cccccc;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

/**************************************END Panes *********************************************/

/****************PAGE STUFF *********************************************/
#welcome {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.homebtn {
    margin: 0px;
    padding: 0px;
    padding-bottom: 5px;
}

.homebtn2 {
    margin: 0px;
    padding: 0px;
    padding-bottom: 30px;
    padding-left: 5px;
    padding-right: 5px;
}

#btnspln {
    position: relative;
    top: 6px;
}

#plnhours {
    position: relative;
    top: 34px;
}

#plnnumber {
    position: relative;
    left: 10px;
    top: 5px;
    color: #1c4e69;
    font-family: verdana, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 14px;
    padding-bottom: 0px;
    padding-top: 5px;
}

#welclick a {
    font-size: 16px !important;
}

#lapplink {
    position: relative;
    top: 50px;
    clear: both;
}

#housinglink {
    position: relative;
    top: 20px;
    clear: both;
}

#vactionrentalslink {
    position: relative;
    top: 80px;
    clear: both;
}

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


.rttarrow {
    background-image: url(../../../2/County/Planning/rtarrow.gif);
    background-position: right;
    background-repeat: no-repeat;
}


#dnn_ctr1443_ContentPane {
    display: block;
}

#poplinks {
    border-left: 0px solid #1C4E69;
    left: -10px;
    list-style-image: url("../../images/bluesquare_sm.gif");
    margin: 10px 0 0;
    padding: 0 0 0 10px;
    position: relative;
    width: 100%;

}

#poplinks li {
    line-height: 15px;
    margin: 0 0 0 40px;
    padding: 0 0 8px;
    text-indent: -25px;
}

#newsarchive {
    border-left: 0px solid #1C4E69;
    left: -10px;
    list-style-image: url("../../images/bluesquare_sm.gif");
    margin: 10px 0 0;
    padding: 0 0 0 10px;
    position: relative;
    width: 100%;
}

#newsarchive li {
    line-height: 15px;
    margin: 0 0 0 40px;
    padding: 0 0 8px;
    text-indent: -25px;
    color: #003366;
}

#newsarchive a {
    font-weight: bold;

}

#newsarchive .date {
    color: #0000ff;
    font-weight: bold;
}

.applink:link {
    text-decoration: underline;
}

.applink:visited {
    text-decoration: underline;
}

.applink:hover {
    text-decoration: none;
}

.applink:active {
    text-decoration: underline;
}

#dnn_ctr1435_HtmlModule_lblContent {
    height: 540px;
}



/***************Planning Site Items *************************************************************/
.plncontainer {
    margin-left: auto;
    margin-right: auto;
    background-color: #D6E1D6;
    border: 2px solid #1C4E69;
    text-align: center;
    padding-bottom: 5px;
    width: 246px;
}

.plncontainer h2 {
    color: #990000;
    text-align: center;
    background-color: #ffffff;
    margin-top: 0px;
    border-bottom: 1px solid #1C4E69;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 16px;
}

.plncontainer p {
    color: #1C4E69;
    text-align: center;
    padding: 2px;
    font-weight: bold;
    font-family: verdana;
    font-size: 12px;
    margin: 2px;
    margin-bottom: 8px;
}


/************ I want Info ******************************/
.LinksDesignTable select {
    width: 283px !important;
}

/** Quick Links list which is made to look like the left side menus  **/
#cssm2 * {
    font: bold 13px arial !important;
    padding: 0px;
    margin: 0px;
}

#cssm2 {
    /*	position:absolute; */
    position: relative;
    width: 246px !important;
    background-color: #D6D6D6 !important;
    z-index: 18 !important;
    border: 2px solid #AAAAAA !important;
}

#cssm2 a,
#cssm2 a:link,
#cssm2 a:active,
#cssm2 a:visited {
    display: inline-block !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    color: #1C4E69;
}

#cssm2 a:hover {
    background-color: #1c4e69;
    color: #C8E6F1;
    text-decoration: none !important;
}

#cssm2 ul {}

#cssm2 ul li {
    list-style-type: none !important;
    display: inline !important;
}

#cssm2 ul li a,
#cssm2 ul li a:link,
#cssm2 ul li a:active,
#cssm2 ul li a:visited {
    width: 246px !important;
}

#cssm2 ul li ul li {
    list-style-type: none !important;
    display: inline !important;
}

#cssm2 ul li ul li a {
    font: bold 12px arial !important;
    padding-left: 2px;
}

#cssm2 ul li ul,
#cssm2:hover ul li ul,
#cssm2:hover ul li:hover ul li ul {
    display: none;
    list-style-type: none;
    background-color: #d6d6d6 !important;
    border: 2px solid #aaaaaa !important;
    color: #1C4E69 !important;
    cursor: pointer;
    width: 246px !important;
}

#cssm2 ul li ul li ul li a {}

#cssm2:hover ul,
#cssm2:hover ul li:hover ul,
#cssm2:hover ul li:hover ul li:hover ul {
    display: block;
    /*padding:0px!important;*/
}

#cssm2:hover ul li:hover ul {
    position: absolute !important;
    left: 240px !important;
    margin-top: -20px;
}

#cssm2:hover ul li:hover ul li:hover ul {}

/** Quick Links menu arrows **/
.rttarrow {
    background-image: url(../../../2/County/Planning/rtarrow.gif);
    background-position: right center;
    background-repeat: no-repeat;
}

/*#tblNavigationMenu div{z-index: 100!important;}  safari making county menu cover over quick liks  */

#secondlist {
    z-index: 100 !important;
}
/* fix positioning of Links submenu */
#cssm2 ul li:nth-child(26) ul.links {top: 460px;}
#cssm2 ul li:nth-child(26) ul.links li:nth-child(3) ul.lfa {top: -100px;}
#cssm2 ul li:nth-child(26) ul.links li:nth-child(5) ul.ogd {top: -100px;}



/******************Quick Links menu Mobilized ***************************************/
@media only screen and (max-width: 769px) {

    #cssm2 {

        width: 100% !important;
    }

    #cssm2 {
        position: relative;
        width: 100% !important;
    }

    #cssm2 ul li {
        width: 100% !important;
        display: block !important;

    }

    #cssm2 ul li a {
        width: 100%;
        font-size: 1.2em !important;
    }

    #secondlist {

        margin: auto !important;
        width: 100% !important;

    }

    #cssm2 ul li a,
    #cssm2 ul li a:link,
    #cssm2 ul li a:active,
    #cssm2 ul li a:visited {

        margin: auto !important;
        width: 100% !important;

    }

    .rttarrow {

        background-image: none !important;
    }

    #secondlist {

        display: none !important;

    }

}

/********   Quick Links second menus  ***************/
.bos {
    /* position: relative!important;
    top: 70px!important; */
    left: 10px !important;
    z-index: 100 !important;
}

.fees {
    /* position: relative!important;
    top: 150px!important; */
}

.level4 {
    /* position: relative!important;
    top: 340px!important; */
    z-index: 100 !important;
}

.agendas {
    /* position: relative!important;
    top: 360px!important; */
    z-index: 200 !important;
}

.sitedev {
    /* position: relative!important;
    top: 360px!important;*/
    z-index: 100 !important;
}

.za {
    /* position: relative!important;
    top: 520px!important;
    left: 10px!important; */
    z-index: 100 !important;
}

.links {
    /* position: relative!important;
    top: 500px!important; */
    z-index: 100 !important;
}

.lfa {
    /* position: relative!important;
    top: -110px!important;
    left: 10px!important; */
    z-index: 100 !important;
}

.ocd {
    /* position: relative!important;
    top: 50px!important;
    left: 10px!important; */
    z-index: 100 !important;
}

.ogd {
    /* position: relative!important;
    top: -125px!important;
    left: 10px!important;*/
    z-index: 100 !important;
}

/************************** END Quick Links ********************************************************/


/****************** DEPARTMENT MENU ***************************************************************************************/
/* horizontal savi menu - must take these rules OUT of DesktopModules/SaviMenu/module.css to get these to work 
must check all other skins which use Savi menu (hsa.css, planninghome.css, planning.css, general_services.css)*/

.HorizontalMenuBar {
    font-weight: bold;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 2000;
}

.HorizontalMenu tr.mi {
    padding: 8px 20px 8px 12px;
    background-color: #F8FAFF;
    z-index: 1000;
    font-weight: bold;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    color: #375162;
    line-height: 2em;
    text-transform: none;
}

.HorizontalMenu td {
    /* text size for dropdowns from savi menu */

    font-weight: bold;
    font-size: 12px;
    line-height: 12px !important;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 2000;
}

/*Horizontal Mneu - for all pages with this menu . must override in local css files ! importsnt*/

.HorizontalMenuBar {
    margin: 0 21px 0 9px;
    /*background : url(images/LightBlue_r5_c7.jpg) top left;*/

    background-color: #778877;
    height: 31px;
    padding: 0px;
    font-weight: bold;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    width: 1012px !important;
}

/*--------- dnn menu style ----------*/
/* main menu td */

.HorizontalMenu {
    font-weight: bold;
    /*font:bold 12px arial;*/

    text-align: left;
    color: #FFFFFF;
    background-color: #778877;
    cursor: pointer;
    background-color: transparent;
    width: 100%;
    white-space: nowrap;
    padding: 0px !important;
    width: 1012px !important;
}

/* Main Menu Normal */

.HorizontalMenu .root {
    font-weight: bold;
    text-align: left;
    padding: 8px 10px 8px 10px;
    margin-right: 1px;
    margin-top: 0px;
    white-space: nowrap;
    height: 39px;
    line-height: 31px;
}

/* Main menu hover */

.HorizontalMenu .hov {
    color: #C8E6F1;
    background-color: #0e2633;
    /*#334433;  hover bg */

    white-space: nowrap;
    height: 31px;
    line-height: 31px;
}

/* Main menu selected */

.HorizontalMenu .sel,
.HorizontalMenu .bc {}

.HorizontalMenu table {
    /* drop down */

    border: 1px solid #1c4e69;
    z-index: 20 !important;
}

/* SUB Menu Normal */
/* drop down */

.HorizontalMenu tr.mi {
    padding: 8px 20px 8px 12px;
    background-color: #F8FAFF;
    font-weight: bold;
    text-align: left;
    color: #375162;
    line-height: 2em;
    text-transform: none;
    z-index: 1000;
    font-size: 11px;
}

.HorizontalMenu tr.mi td {
    /* drop down */

    padding: 4px 4px 4px 4px !important;
    text-transform: none;
    color: #1c4e69;
    border-bottom: 1px solid #1c4e69 !important;
}

/* SUB Menu hover & selected */

.HorizontalMenu tr.hov {
    color: #FFFFFF;
    background-color: #000000;
}

.HorizontalMenu tr.hov td {
    color: #FFFFFF;
    line-height: 1px !important;
    margin: 0px !important;
    padding: 0px 4px !important;
    font-size: 12px !important;
    line-height: 0px !important;
}

.HorizontalMenu tr.sel,
.HorizontalMenu tr.bc {}

.HorizontalMenu tr.sel td,
.HorizontalMenu tr.bc td {}

/****************************** END DEPTARTMENT MENU *****************************************/



@media only screen and (max-width: 769px) {


    /************ Mobile Menu *************************/
    .menu-wrapper {
        width: 100%;
    }

    .menu {
        width: 95% !important;
        padding: 0;
        margin: 0;
        border: 1px solid #ccc;
    }

    .menu-icon {
        float: left;
        margin-left: 10px;
        padding-right: 10px;
        margin-bottom: 60px;
    }

    .icon-2 {
        margin-bottom: 100px !important;
    }

    .menu-items {
        width: auto;
        height: auto;
    }

    .menu-info p {
        margin-right: 10px;
        overflow: hidden;
    }

    .menu-icon img {
        margin-left: 5px;
    }


    /***** mobile planning search ****************/
    .mobile-search {
        background-color: #14394d;
        box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.8) inset;
        display: none;
        height: 50px;
    }

    .cse .gsc-control-cse,
    .gsc-control-cse {
        background-color: transparent !important;
        border: none !important;
    }

    input.gsc-search-button {
        background-color: #2e6e90 !important;
        border: none !important;
        width: 13px !important;
        min-width: 13px !important;
        height: 13px !important;
        padding: 10px !important;
    }

    table.gsc-search-box {
        position: relative;
        /*top: -16px!important;*/
    }


    /*********************************    Panes     **************************************/

    .breadcrumbPane {
        width: 100% !important;
        max-width: 100% !important;
    }

    .IWantPane {
        padding: 0px;
        margin: auto;
        width: 90%;
        float: none;
    }

    .leftPane {}

    .rightPane {}

    .bottomPane {}

    /************* Specific Page Stuff ************************************************/

    /******* to get the welcome link to work ;) ********/
    #dnn_ctr1431_Links_pnlDropdown {

        height: 20px !important;

    }

    /*********  i want information about *********************/
    .LinksDesignTable {
        margin: auto;
        width: 100% !important;
    }

    .LinksDesignTable td {
        text-align: center;
    }

    .LinksDesignTable select {
        width: 100% !important;
    }

    /********************  Quick Links ***********************/
    .DnnModule-1435 {
        border: 0px solid black;
        width: 100% !important;
    }

    #dnn_ctr1435_HtmlModule_lblContent {
        margin: auto !important;
        width: 100% !important;
    }

    #dnn_ctr1435_ContentPane {
        margin: auto !important;
        width: 100% !important;
    }

    #welcome {
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 0;
        margin-bottom: 0;
        width: 80% !important;
        white-space: normal !important;
    }

    #plnhours {
        display: block !important;
        margin: auto !important;
        width: 100% !important;
    }


    /********************  Link list on PLN homepage ***********************/
    #plnhomelistmobile {
        border: 0px solid black;
        padding-top: 10px !important;
        width: 100% !important;
    }

    #plnhomelistmobile a {
        font-size: 1.2em !important;
        font-weight: bold !important;

    }
    
    .DnnModule-DDRMenu div#sccMenu {
        display: block;
    }

}


/* print styles */
@media print {
    body {
      margin: 0;
      color: #000;
      background-color: #fff;
    }

    .countymenu, 
    .deptmenu,
    #department-menu li ul,
    #department-menu .sub-arrow {
        display: none;
    }

    #department-menu > li {
        display: inline-block;
    }
}