﻿/*CHARLESTON COUNTY GOVERNMENT - ENVIRONMENTAL MANAGMENT CUSTOM STYLES*/

/*HEAD, BODY, FOOTER*/
/* ORIGINAL 3-25-14
body {color: #333333;background: #ffffff;} */
/* NEW 3-25-14 */
body {color: #333333;background: #fafcfe;}

p#head-bracket {color: #555555;}
p#foot-bracket {color: #555555;}
h1, h2, h3, h4, h5, h6 {color: #473b1c;}
div#hr {border-bottom: 1px solid #d5dce4;}
div#hr-mobile {border-bottom: 1px solid #d5dce4;}
div#hr-310 {border-bottom: 1px solid #d5dce4;}
div#hr-645 {border-bottom: 1px solid #d5dce4;}
#footer div#hr {border-bottom: 2px dotted #fff;}
div#hr-footer {border-bottom: 2px dotted #fff;}
div#hr-boards {border-bottom: 0px solid #ffffff;}
#bodycontainer {border-top: 1px solid #eeeeee;}
#bodycontainer a:link {color: #175111;}
#bodycontainer a:hover {color: #175111;}
#bodycontainer a:visited {color: #175111;}
#footerwrapper {background: #d5dce4;}
#footer a:link {color: #555555;}
#footer a:visited {color: #555555;}
#footer p, #footer a:link {color: #555555;}

ul li {padding-bottom: 5px;}
ol li {padding-bottom: 5px;}

img#green-school-left2 {float: left;margin: 0 10px 10px 0;width: 60%;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;}
img#green-school-right2 {float: right;margin: 0 0 10px 10px;width: 60%;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;}
img.print-order {width: 160px;float: right;}

#os-full h3 {color: #175111;}
#os-half h3 {color: #175111;}

.watermark {color: #999 !important;}

.ribbon {width:20%;}

/*BOXES (Blocks)*/
.box-310L-mug {background: #e8ecf1;}
.box-310L-mug .box-inner {border-bottom: 1px solid #d5dce4;}
#bodycontainer .box-inner a.do-online {color: #ffffff;background: #175111;}
#bodycontainer .box-inner a.do-online:hover {background: #85bf7f;color: #ffffff;}

/*LOGO & SEARCH*/
#search-page input.text-field {border: 0px solid #fff;color: #999999;background: rgb(255, 255, 255);background: rgba(255, 255, 255, 0.8);
	/* For IE 5.5 - 7
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);*/
	/* For IE 8
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/}
#search-page input.text-field:focus {background: #ffffff;color: #333333;}
#search-page input.button {
	background: #175111;
	color: #fff;
	border: 0px solid #175111;
	background: rgb(23, 81, 17) url('https://www.charlestoncounty.org/images/search-icon.png') center no-repeat;
	background: rgba(23, 81, 17, 0.8) url('https://www.charlestoncounty.org/images/search-icon.png') center no-repeat;}
#search-page input.button:hover {background: #175111;color: #ffffff;background: #175111 url('https://www.charlestoncounty.org/images/search-icon.png') center no-repeat;}

/*SUB NAVIGATION*/
sub-nav a:link {color: #175111;}
sub-nav li a {color: #FFFFFF;background-color: #175111;}
sub-nav li a:hover {background-color: #d1deec;color: #175111;}
sub-nav li a:active {color: #175111;}
sub-nav a:link#sub-pull {color: #175111;}
dept-menu ul li a {color: #175111;}
dept-menu ul li a:hover {color: #ffffff;background: #86aecc;}
dept-menu li a:hover {color: #175111;}
dept-menu ul {background: #ffffff;border: 3px solid #86aecc;}

.subnavbkg {
	background: #175111; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzNiUiIHN0b3AtY29sb3I9IiMwMDMzNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NiUiIHN0b3AtY29sb3I9IiMyMzUzOGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #175111 36%, #52814d 96%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#175111), color-stop(96%,#52814d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #175111 36%,#52814d 96%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #175111 36%,#52814d 96%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #175111 36%,#52814d 96%); /* IE10+ */
	background: linear-gradient(to bottom,  #175111 36%,#52814d 96%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#175111', endColorstr='#52814d',GradientType=0 ); /* IE6-8 */
}
.subnavbkg a:hover, .subnavbkg a.selected {
	color: #175111 !important;
	background: #d4e4ef; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q0ZTRlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NmFlY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #d4e4ef 0%, #86aecc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4e4ef), color-stop(100%,#86aecc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d4e4ef 0%,#86aecc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d4e4ef 0%,#86aecc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d4e4ef 0%,#86aecc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d4e4ef 0%,#86aecc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=0 ); /* IE6-8 */
}

/*FORMS*/
#orderform .bfWrapperBlock {margin: 15px 0 10px 0;}
#orderform fieldset {border: 1px solid #175111;background: #d9edd8;padding: 0 0 0 5px;margin: 0px 0px 10px 0px;width: auto;-webkit-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}
#orderform legend {margin-bottom: 10px;}
#orderform legend {padding: 5px;background-color: #85bf7f;color: #fff;font-size: 120%;-webkit-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}
#orderform legend {padding-left: .8em;padding-right: .8em;}
#orderform legend {padding: 2px 5px;}
#orderform  p.bwElemWrap {padding: 5px;margin: 0px 0px 5px 0px;position: relative;overflow: hidden;-webkit-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}
#orderform legend+* {margin-top: 1em;}
#orderform label {width: 45%;float: left;margin: 0px 10px 0px 0px;}
#orderform label {vertical-align: top;}
#orderform label {display: inline-block;font-weight: 700;padding: 2px 0;}
#orderform span.bwTooltip {width: auto;padding: 0px 25px 0px 0px;margin: 0px;display: block;background: url('icon_info.png') no-repeat right top;}
#orderform p input[type=text],  #orderform p textarea,  #orderform p select {float: left;margin: 0px;width: 45%;}
#orderform input,  #orderform textarea,  #orderform select,  #orderform button  {/*width: auto;*/float: left;margin: 0px;}
#orderform input[type=text],  #orderform input[type=password],  #orderform textarea,  #orderform select {border: 1px solid #ccc;padding: 5px;line-height: normal;}
#orderform input[type=text], #orderform input[type=password] {cursor: text;}
#orderform select, #orderform input[type=text], #orderform input[type=password], #orderform input[type=email] {
    -moz-box-sizing: border-box;
    -webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
    -webkit-box-sizing: border-box;
    -webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #aaa;
    border-bottom-color: #ccc;
    margin: 0;
    outline: none;
    padding: 6px 8px;
    vertical-align: middle;
    width: 45%;
}
#orderform input[type=date] {
    -moz-box-sizing: border-box;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #aaa;
    border-bottom-color: #ccc;
    margin: 0;
    outline: none;
    padding: 6px 8px;
    vertical-align: middle;width: 100px;
}
#orderform input[type=radio]{display:block; float:left;}
#orderform input,
#orderform textarea {padding: .3em .4em .15em;}
#orderform input, 
#orderform select {cursor: pointer;border-radius: 10px;margin: 0;outline: none;padding: 6px 8px;vertical-align: middle;width: 100%;}
#orderform input,
#orderform textarea {padding: .3em .4em .15em;}
#orderform input, 
#orderform select {cursor: pointer;}
#orderform .bwNote {clear: both;color: #555;font-size: 12px;}
#orderform button, #orderform input, #orderform select, #orderform textarea {font-size: 100%;overflow: visible;margin: 0;vertical-align: baseline;width: auto;}
#orderform .bwRequired {vertical-align: top;background: none;font-size: 100%;font-weight: bold;border: none;padding: 0px 0px 0px 5px;margin: 0px;color: #f00;float: none;}
#orderform .bwRequired {background: none;font-size: 100%;font-weight: bold;border: none;padding: 0px 0px 0px 5px;margin: 0px;color: #f00;float: none;}
#orderform .bwLabelLeft,
#orderform .bfLabelRight,
#orderform p.bwLabelLeftNoWrap {width: 45%;float: left;}
#orderform .bwLabelLeftNoWrap,
#orderform .bwLabelLeft  {width: auto;background: none;float: left;}
#orderform .bwLabelLeft2  {width: 45%;background: none;float: left;}
#orderform .bwLabelLeft input,
#orderform .bwLabelLeftNoWrap input,
#orderform .bwLabelTop input,
#orderform .bwLabelTopNoWrap input,
#orderform .bfLabelRight input,
#orderform .bfLabelRightNoWrap input,
#orderform .bfLabelBottom input,
#orderform .bfLabelBottomNoWrap input {width: auto;float: none;margin: 3px 5px 0px 0px;display: inline;}
#orderform span input[type=text], #orderform span textarea, #orderform span select  {width: auto;float: none;margin: 0px 10px 0px 0px;}
#orderform button.bfCalendar {height: 25px;margin: 0px 0px 0px 5px;float: none;}
#orderform button.bfCalendar {height: 21px;margin: 0px 0px 0px 5px;}
#orderform input[type=button], #orderform input[type=submit],#orderform input[type=checkbox], #orderform input[type=image], #orderform input[type=radio], #orderform input[type=reset], #orderform select, #orderform button {cursor: pointer;}
#orderform .bwLabelLeft label,
#orderform .bwLabelLeftNoWrap label,
#orderform .bwLabelTop label,
#orderform .bwLabelTopNoWrap label,
#orderform .bfLabelRight label,
#orderform .bfLabelRightNoWrap label,
#orderform .bfLabelBottom label,
#orderform .bfLabelBottomNoWrap label {width: auto;float: none;margin: 0px 10px 10px 0px;display: inline;position: static;}
#orderform .bfSectionDescription {background: none;border: none;font-weight: normal;}
#orderform .bfSectionDescription {background: none;border: none;font-weight: normal;}
#orderform .bwLabelTop {width: 100%;float: left;}
#orderform .bwLabelTop input, #orderform .bwLabelTop textarea, #orderform .bwLabelTop select, #orderform .bwLabelTop button {float: none;width: 100%;}
#orderform .bwLabelTop label {display: block;width: 100%;margin-bottom: 5px;}
#orderform .bwMaxLengthCounter {color: #0071bc;}
#orderform area,
#orderform textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
    -webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    border: 1px solid #aaa;
    border-bottom-color: #ccc;
    height: auto;
    overflow: auto;
    margin: 0;
    outline: none;
    padding: 8px 10px;
    width: 100%;
}
#orderform textarea {overflow: auto;vertical-align: text-top;}
/*?*/{background: none;border:  none;}
#orderform .ff_capimg {margin-bottom: 10px;}
#orderform img {vertical-align: middle;}
#orderform img {-ms-interpolation-mode: bicubic;border: 0;height: auto;max-width: 100%;vertical-align: middle;}
#verificationcode {width: 196px;clear:both;}
#orderform input {width: auto;float: left;}
#orderform a {color: #06c;font-weight: 400;text-decoration: none;}
#orderform .bfNextButton, #orderform .bwSubmitButton, #orderform .bwCancelButton {float: right;}
#orderform .bfNextButton, #orderform .bwSubmitButton, #orderform .bwCancelButton {float: right;}
#orderform input .button {background: #003366;color: #ffffff;}
#orderform input .button:hover {background: #7394b6;}
#orderform input[type=hidden] { display: none; }
#orderform .ui-tooltip, #orderform .arrow:after {    background: black;    border: 2px solid white; }  
#orderform .ui-tooltip {    padding: 10px 20px;    color: white;   -webkit-border-radius: 20px;-ms-border-radius: 20px;-o-border-radius: 20px;border-radius: 20px;   font: 8px "Helvetica Neue", Sans-Serif;    box-shadow: 0 0 7px black;  }  
#orderform .arrow {    width: 70px;    height: 16px;    overflow: hidden;    position: absolute;    right: 50%;    margin-left: 0px;    bottom: -16px;  } 
#orderform .arrow.top {    top: -16px;    bottom: auto;  }  
#orderform .arrow.left {    left: 20%;  }  
#orderform .arrow:after {    content: "";    position: absolute;    left: 20px;    top: -20px;    width: 25px;    height: 25px;    box-shadow: 6px 5px 9px -9px black;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    tranform: rotate(45deg);  }  
#orderform .arrow.top:after {    bottom: -20px;    top: auto;  }

/*ACCORDION*/
#accordion h1, #accordion2 h1 {color: #175111;}
#accordion h2, #accordion2 h2 {background: #ACD7A8;border:1px solid #ACD7A8;color:#473B1C;}
#accordion-inner h3 {color: #175111;}
#accordion-inner #inner {padding: 20px 0 0 0;}
#accordion-inner #inner-column {padding: 0 2%;width: 46%;float: left;}
#accordion-inner #inner-column .inner-record {border-bottom: 1px dashed #999;margin-bottom: 10px;float: none;}
#bodycontainer .box-inner #accordion h3 {color: #175111;}

.split-accordion {width:48%;float:left;margin:1%;}
.split-accordion div {padding:10px!important;}

/*PROGRAM BOX*/
.box-inner#program-box .button-program {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow-grey.png') left center no-repeat;}
.box-inner#program-box .button-program:hover {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow.png') left center no-repeat;}
.box-inner#program-box h3 {color: #175111;}

/*GRAY BOX*/
.gray-boxbtn {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow-grey.png') left center no-repeat;}
.gray-boxbtn:hover {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow.png') left center no-repeat;}
.gray-boxbtn h3 {color: #175111;}

/*FACEBOOK*/
.faceb {width:200px;background: #3B5998 url('https://www.charlestoncounty.org/images/fb-dept-2.png') 4px center no-repeat;}
.faceb:hover {background: #3B5998 url('https://www.charlestoncounty.org/images/fb-dept-1.png') 4px center no-repeat;}
.faceb h3 {color: #ffffff;}
 
/*GRAY BOX BODY*/
.gray-boxbtnbod {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow-grey.png') left center no-repeat;}
.gray-boxbtnbod:hover {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow.png') left center no-repeat;}
 
/*EMERGENCY INFO BOX*/
.box-inner#emergency-box .button-emergency {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow-grey.png') left center no-repeat;}
.box-inner#emergency-box .button-emergency:hover {background: #e8ecf1 url('https://www.charlestoncounty.org/images/current-arrow.png') left center no-repeat;}
.box-inner .emd-info {background: #e8ecf1;}

/*NOTICE*/
.notice {color: #ffffff;background: #ffffff;background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);}

/*TABLE STYLES*/
table#departments-table tr {border-bottom: 1px solid #e8ecf1;}
table#departments-table th {color: #333333;}

#bodycontainer .box-inner table#holiday-schedule tbody tr {border-bottom: #e8ecf1;}

/*SEARCH RESULTS*/
#resultsGrid td{color: #333333;background: #ffffff;}

/*CAPTCHA*/
#errorred {background-color: red;}
#errorgreen {background-color: green;}

/*FORMS*/
#orderform input, #orderform input.verify {border: #999;color: #333333;}
#orderform textarea {border: #999;color: #333333;}
/*#orderform input:focus, #orderform textarea:focus {outline: #85bf7f;background: #e6edf5;}*/
#orderform input.submit {background: #175111;color: #ffffff;display: block; margin:5px;font-weight:bold;height:30px;text-transform:uppercase;font-family: Arial;}
#orderform input.submit:hover {background: #85bf7f;}
.form input.submit {background: #175111;color: #ffffff;display: block; margin:5px;}
.form input.submit:hover {background: #85bf7f;}

/*BUTTONS*/
#bodycontainer .box-inner a.file-link{background: #175111;color: #ffffff;}
#bodycontainer .box-inner a.file-link:hover {background: #85bf7f;}

#bodycontainer .box-inner a.file-link {background: #7394b6;color: #ffffff;}
#bodycontainer .box-inner a.file-link:hover {background: #003366;}

#bodycontainer .box-inner a.lite-link {background: #7394b6;color: #ffffff;}
#bodycontainer .box-inner a.lite-link:hover {background: #d1deec;}

#bodycontainer .box-inner a.dept-link {background: #d5dce4;color: #175111;border:3px solid #d5dce4;}
#bodycontainer .box-inner a.dept-link:hover {background: #ff8500;color: #175111;}

/*EMERGENCY NUMBER BOX*/
.emergnumer {background: #990000;border: #ffffff;}
.emergnumer h3 {color: #ffffff;}

/*VIDEOS*/
#bodycontainer .box-inner iframe {-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;}
#bodycontainer .box-inner .video-recycle {width:100%;height:380px;}
#bodycontainer .box-inner .video-bferry {width:100%;height:370px;margin:20px 0 0 0;}
#bodycontainer .box-inner .video-waste {height:345px;width:100%;margin-top:30px;}

/*ONLINE SERVICES*/
#os-full {background: #d9edd8;border: 0px solid #85bf7f;}
#os-full:hover {background: #8eba3f;}
#os-half {background: #e6edf5;border: 0px solid #85bf7f;}
#os-half:hover {background: #d1deec;}
#os-full-env {background: #d9edd8;border: 0px solid #85bf7f;}
#os-full-env:hover {background: #8eba3f;}
#os-half-env {background: #d9edd8;border: 0px solid #85bf7f;}
#os-half-env:hover {background: #8eba3f;}


nav#menu-county ul ul div.blue-top {background-color: #85bf7f !important;border-color: #85bf7f !important;}

#bodycontainer .box-inner a.lite-link {background: #85bf7f;color: #ffffff;}
#bodycontainer .box-inner a.lite-link:hover {background: #c8e4c5;}

/*IMAGES*/
img.recycle-rt {margin:0 0 20px 20px;float:right;}
img.recycle-ct {margin:10px;}
img.compost-logo {margin:0 auto;}
img.compost-side {margin:0;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;width:100%;}
img.compost-rt {margin:0 0 20px 20px;float:right;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;max-width:264px;width:100%;}
img.compost-rt2 {max-width:250px;}
img.compost-cycle {max-width:300px;width:100%;}
img.multi-rt {margin:0 0 20px 20px;float:right;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;max-width:260px;width:100%;}
img.faq-rt {margin:0 0 20px 20px;float:right;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;max-width:160px;width:100%;}
img.faq-lt {margin:0 20px 20px 0;float:left;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;width:100px;}
img.allin {margin:0;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;max-width:300px;width:100%;}
img.single-lt {margin:0 20px 20px 0;float:left;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;width:120px;}
img.single-rt {margin:0 20px 20px 0;float:right;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;width:120px;}
img.hhm-lt {margin:0 20px 20px 0;float:left;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;max-width:260px;width:100%;}
img.hhm-lt2 {margin:0 20px 20px 0;float:left;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;width:100px;}
img.center-full {width:100%;}
img.center-full2 {width:100%;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;}
#dropsite-list img {width:25px;}

.legend-icon {width:35px;float:left;padding-right:5px;}

img.recycle-logo {width:150px;float:left;padding:0 10px 10px 0;}

/*RECYCLE GUIDE*/
.guide-wrap {width:100%;}
.recycle-guide {width:177px;padding:5px;float:left;border-left:1px dashed #85bf7f;}
.first {border-left:none;}
.recycle-guide h3 {text-align:center;font-weight:bold;}

/*EARTHDAY TAB*/
nav#menu-dept ul li.earthday {background: #284169;}

table.compost-use {width:100%;background:#473B1C;}
table.compost-use td {vertical-align:top;padding:5px;}
table.compost-use thead tr td {background:#473B1C;color:#ffffff;}

table.compost-use tr:nth-child(even) {background:#D9EDD8;}
table.compost-use tr:nth-child(odd) {background:#ACD7A8;}

.compost-trial {width:50%;float:left;box-sizing:border-box;padding:5px;}
.trial-text {box-sizing:border-box;padding:10px 10px 3px 10px;background:#D9EDD8;margin:5px;border:2px solid #8eba3f;}
.compost-trial img {width:100%;border-radius:10px;}

.image-midwest {width:25%;float:left;margin:0 20px 20px 0;}
.image-split {width:25%;float:left;margin:0 10px 10px 0;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;}

.live {box-shadow:0px 0px 0px;background:#8eba3f;}
.live h3 {color:#ffffff;}
.live:hover {background:#8eba3f;cursor:default;}

/*****************************************************/
/**********Styles for screen 800px and lower**********/
/*****************************************************/
@media screen and (max-width: 1024px) {
#search-page input.button {background: rgb(23, 81, 17) url('https://www.charlestoncounty.org/images/search-icon.png') center no-repeat;background: rgba(23, 81, 17, 0.8) url('https://www.charlestoncounty.org/images/search-icon.png') center no-repeat;}
#search-page input.button:hover {background: #175111;color: #ffffff;background: #175111 url('https://www.charlestoncounty.org/images/search-icon.png') center no-repeat;}

.recycle-guide {
	width:18.5%;
}

/*nav#menu-dept {
	top: 262px;
}*/

}

/*****************************************************/
/**********Styles for screen 800px and lower**********/
/*****************************************************/
@media screen and (max-width: 800px) {

#sub-navigationwrapper {background: #d1deec;/*border-top: 2px solid #175111;*/}
sub-nav li a {border-bottom: 0px solid #175111;border-right: 0px solid #175111;background-color: transparent;}
sub-nav li a:hover {background-color: #d1deec;color: #ff8500;}

#headerwrapper {
/*background: #475665;*/ /* 10-03-13 - Replaced below. */
background: #175111; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzNiUiIHN0b3AtY29sb3I9IiMwMDMzNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NiUiIHN0b3AtY29sb3I9IiMyMzUzOGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #175111 36%, #52814d 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#175111), color-stop(96%,#52814d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #175111 36%,#52814d 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #175111 36%,#52814d 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #175111 36%,#52814d 96%); /* IE10+ */
background: linear-gradient(to bottom,  #175111 36%,#52814d 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#175111', endColorstr='#52814d',GradientType=0 ); /* IE6-8 */
}

/*#headerwrapper-inner {background: #85bf7f;}*/ /* 10-03-13 - Remove since not needed. */

#accordion-inner #inner-content .inner-record {border-top: #e8ecf1;}

#header .emergl {background: #990000;border: #fff;}
#header .emergl h3 {color: #ffffff;}

#mobile-header {
/*background: #175111;*/
background: #444444; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiM0NDQ0NDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMGUwZTBlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  #444444 33%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(33%,#444444), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #444444 33%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #444444 33%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #444444 33%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #444444 33%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */
}


nav#menu-dept {
	top: 0px;
}

#bodycontainer .box-inner .video-recycle {height:400px;}
#bodycontainer .box-inner .video-bferry {width:100%;height:380px;float:none;margin:0;}
#bodycontainer .box-inner .video-waste {height:380px;}

.recycle-guide {
	width:100%;
	padding:5px;
	float:none;
	border-left:none;
}

.compost-trial {width:100%;margin-top:0px;float:none;box-sizing:border-box;}

.split-accordion {width:100%;float:none;margin:0px;}
.split2 {margin-bottom:20px;}

}

/******************************/
/*MAIN NAVIGATION DESKTOP ONLY*/
/******************************/
@media screen and (min-width: 800px) {
nav#menu-county ul li ul li a.no-link, nav#menu-county ul li ul li a.no-link:hover {
	color: #175111 !important;
}

nav#menu-dept ul li ul li a.no-link, nav#menu-dept ul li ul li a.no-link:hover {
	color: #175111 !important;
}

nav#menu-county ul ul ul, nav#menu-dept ul ul ul {
	background: transparent;
}

nav#menu-county ul ul ul li a, nav#menu-dept ul ul ul li a {
	color: #175111 !important;
}
	
nav#menu-county ul ul ul li a:hover, nav#menu-dept ul ul ul li a:hover {
	color: #85bf7f !important;
	background: transparent;
}

nav#menu-dept ul ul.recycle {
	width: 460px;
}

nav#menu-dept ul ul div.blue-top {
	width: 100%;
	height: 45px;
	background-color: #85bf7f !important;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -100;
	border-color: #85bf7f !important;
	-webkit-border-top-right-radius: 6px; 
	-ms-border-top-right-radius: 6px;
	-o-border-top-right-radius: 6px; 
	border-top-right-radius: 6px;
}

nav#menu-dept ul ul li.left-group {
	width: 244px;
	float: left;
}

nav#menu-dept ul ul li.right-group {
	width: 204px;
	float: right;
}



/*MAIN MENU*/
.mm-menu {
	background: #175111;
}

nav#menu-county {
	background: #175111;
}
	
nav#menu-county ul {
	background: #175111;   
}

nav#menu-county ul li:hover {
	background: #85bf7f;
}

nav#menu-county ul li:hover a {
	color: #fff;
}
	
nav#menu-county ul li a {
	color: #ffffff;
}
	
nav#menu-county ul ul {
	background: #ffffff;
	border: 3px solid #85bf7f;
}

nav#menu-county ul ul li a {
	color: #175111 !important;
}	

nav#menu-county ul ul li:hover, nav#menu-county ul ul li a:hover {
	color: #85bf7f !important;
	background: transparent;
}

/*SECTION MENU*/
nav#menu-dept {
	background: transparent;
}

nav#menu-dept .elected{
	background: transparent;
}


nav#menu-dept li#head a {
	color: #175111 !important;
}
nav#menu-dept li#head a:hover {
	color: #85bf7f !important;
}

nav#menu-dept .nav-group1 li p.notetxt:hover, nav#menu-dept .nav-group2 li p.notetxt:hover {
	color: #333333;
}

nav#menu-dept .nav-group1 li p.notetxt2:hover, nav#menu-dept .nav-group2 li p.notetxt2:hover {
	color: #333333;
}
		
nav#menu-dept ul li {
	background: #175111;
}

nav#menu-dept ul li:hover {
	background: #85bf7f;
}

nav#menu-dept ul li:hover a {
	color: #fff;
}
	
nav#menu-dept ul li a {
	color: #ffffff;
}
	
nav#menu-dept ul ul {
	background: #ffffff;
	border: 3px solid #85bf7f;
}

nav#menu-dept ul ul li a {
	color: #175111 !important;
}	

nav#menu-dept ul ul li a:hover {
	color: #85bf7f !important;
	background: transparent;
}
nav#menu-dept ul ul li:hover {
	background: transparent;
}

}

/*****************************************************/
/**********Styles for screen 480px and lower**********/
/*****************************************************/
@media only screen and (max-width : 480px) {

#accordion-inner #inner-column {width: 100%;float: none;}
#accordion-inner #inner-column .inner-record {width: 95%;}

img#green-school-left2 {float: none;margin: 10px 0 10px 0;width: 100%;}

#orderform label {clear: both;width: 100%;}
#orderform input {clear: both;width: 100%;}
#orderform input.needed, #orderform input.quantity, #orderform input.students {clear: none;}
#orderform textarea {clear: both;width: 100%;}
#orderform span input[type=text], #orderform span textarea, #orderform span select {width: 100%;}
#orderform select, #orderform input[type=text], #orderform input[type=password], #orderform input[type=email] {width: 100%;}
#orderform p input[type=text],  #orderform p textarea,  #orderform p select {width: 100%;}
img.print-order {width: 100%;float: none;}


img.recycle-rt {
	margin:0 0 0 0;
	float:none;
}

img.dump {
	width:90%;
}

#bodycontainer .box-inner .video-recycle {height:200px;}
#bodycontainer .box-inner .video-bferry {height:240px;}
#bodycontainer .box-inner .video-waste {height:240px;}

img.recycle-logo {
	float:none;
	width:100%;
	padding:0 0 20px 0;
}

.ribbon {width:40%;}

}

/*****************************************************/
/****************Styles for SMARTPHONE****************/
/*****************************************************/
@media only screen and (max-width : 320px) {

#bodycontainer .box-inner .video-recycle {height:140px;}
#bodycontainer .box-inner .video-bferry {height:140px;}
#bodycontainer .box-inner .video-waste {height:140px;}

}

