/* CSS Document */

/* SWATCHES
#D28D8D - pink
#9E1B1B - red
#A41B1B - menu off red
#6C2727 - darker red
#FF0 - yellow
#2C4B96 - blue
#77A977 - lighter green (links)
*/

/************************************** GENERAL ********************************************/
html, body {
	margin: 0;
	padding: 0;
}

body {
	background: url(images/body_bg_tile.gif);
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6,p,ul,ol {margin: 0 0 1em 0}

acronym,abbr {cursor: help}

address {font-style: normal}

blockquote {
	margin: 1em 2em;
	padding: 1em;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	font-size: 115%;
}

/******************************** MISC CLASSES *************************************/
.inline {display: inline}
.block {display: block}
.float_right {float: right}
.float_left {float: left}
.clear {clear: both}
.border {border: 1px solid #000}

p.alert {
	padding: 0.25em;
	color: #FFF;
	background: #871C1C;
	font-weight: bold;
	border: 3px double #FFF;
}

/* Splitting up layout into columns */
div.two_column_col1 {
	float: left;
	width: 350px;
	margin: 0 15px 0 0;
	padding: 0;
}
div.two_column_col2 {
	float: left;
	width: 350px;
	margin: 0;
	padding: 0;
}

/****** TABLES *********/
tr.even {background: #EEE}

table.data {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
table.data td,
table.data th {
	padding: 2px 3px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}
table.data td {font-size: 12px}
table.data th {
	background: url(images/table_th_bg.gif) repeat-x;
	color: #FFF;
	text-transform: capitalize;
}

/************************************* FORMS *******************************************/
form div {
	margin: 0 0 1em 0;
	padding: 0;
}

input,textarea {
	font-size: 1em;
	border: 1px solid #D28D8D;
	padding: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
input.radio,input.checkbox {width: auto !important; border: none !important;}

input.button {
	background: #A41B1B;
	color: #D28D8D;
	font-weight: bold;
	text-transform: uppercase;
	font-size: .8em;
	width: auto !important;
	margin: 0 5px 0 0;
}

input.button:hover {color: #FFF}

legend {
	font-weight: bold;
	color: #999;
	margin: 0 0 0.25em 0;
	padding: 0;
	border-bottom: 1px solid #EEE;
	font-size: 125%;
}

label {
	display: block;
	background: #D28D8D;
	color: #FFF;
	margin: 5px 0 0 0;
	padding: 0 0 0 3px;
}
label.inline {
	background: #FFF;
	color: #000;
	margin: 0;
	width: auto !important;
}

fieldset {
	border: none;
	margin: 0 0 1em 0;
	padding: 0;
}

/********************************************** HEADERS ************************************/
h1,h2,h3,h4,h5,h6 {}

h1 {
	text-transform: uppercase;
	color: #D28D8D;
	font-size: 2em;
	margin: 0 0 1em 0;
}

h2 {
	text-transform: uppercase;
	font-size: 1em;
	border-bottom: 1px solid #000;
	padding: 0 0 0.25em 0;
	margin: 1em 0;
}

h3 {
	color: #666;
	font-size: 115%;
	margin-bottom: 0.5em;
	text-decoration: underline;
}

h4 {
	color: #999;
	font-size: 100%;
}

/******************************************** LINKS ******************************************/
a {
	color: #77A977;
	text-decoration: none;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

a:hover {
	text-decoration: underline;
}

a img {border: none}

/******************************************** LISTS *******************************************/
ul {
	
	margin: 10px 0 10px 10px;
	padding: 0 0 0 10px;
}

li {
	margin: 5px 0;
	padding: 0;
}
dt {font-weight: bold; margin-bottom: 0;}
dd {margin: 0 0 0.5em 0}

/***************************************** MAIN CONTAINER *************************************/
div#wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	width: 760px;
	margin: 0 0 0 -380px;
	padding: 0;
}

table#container {
	width: 760px;
	border: none;
}

/******************************************* BANNER ******************************************/
object#bannerFlash {display: block}
table#main_nav_table {
	height: 27px;
	border: none;
	margin: 0 0 0 25px;
}
h1#printBanner {display: none}

table#main_nav_table td {padding: 0 5px}

table#main_nav_table a {
	display: block;
	margin: 0;
	padding: 27px 0 0 0;
	overflow: hidden;
	
	height: 27px;
	voice-family: "\"}\""; 
	voice-family: inherit;
	height: 0;
}
html>table#main_nav_table a {height: 0}

table#main_nav_table a:hover {background-position: 0 -27px}

a#home {
	width: 57px;
	background: url(images/button_home.gif) 0 0 no-repeat;
}
a#aboutUs {
	width: 85px;
	background: url(images/button_about.gif) 0 0 no-repeat;
}
a#services {
	width: 82px;
	background: url(images/button_services.gif) 0 0 no-repeat;
}
a#newslettersCalendar {
	width: 187px;
	background: url(images/button_newsletters.gif) 0 0 no-repeat;
}
a#citiesCounties {
	width: 136px;
	background: url(images/button_citiescounties.gif) 0 0 no-repeat;
}
a#contactUs {
	width: 102px;
	background: url(images/button_contact.gif) 0 0 no-repeat;
}

/* Sub Menus */
td#submenus {
	height: 37px;
	background: url(images/subbar_green.gif) no-repeat;
	padding: 0;
}

td#submenus a {text-transform: uppercase;}

div#subs_wrapper {
	margin: 0;
	padding: 0;
	position: relative;
	top: -3px;
}

td#submenus ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

td#submenus li{
	display: inline;
	margin: 4px 5px 0 5px;
	padding: 0;
}

td#submenus ul#about_sub {display: none; font-size: 0.85em;}
td#submenus ul#about_sub a {color: #000}
td#submenus ul#services_sub {display: none}
td#submenus ul#services_sub a {color: #FFF}
td#submenus ul#newsletters_sub {display: none}
td#submenus ul#newsletters_sub a {color: #FFF}
td#submenus ul#citiescounties_sub {display: none}
td#submenus ul#citiescounties_sub a {color: #000}
td#submenus ul#contact_sub {display: none}
td#submenus ul#contact_sub a {color: #FFF}

/*************************************** CONTENT *****************************************************/
td#content {
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	background: #FFF;
	padding: 0;
}
div#contentInner {
	position: relative;
	padding: 0 15px;
}

td#content_top {
	height: 31px;
	background: url(images/content_top.gif) no-repeat
}

td#content_bot {
	height: 15px;
	background: url(images/content_bot.gif) no-repeat
}



/* HOME */

h5#united-we-stand {
	font-size: 1.5em;
}
#united-we-stand img {
	vertical-align: middle;
}

ul#payments-and-oc,
ul#convenience-items {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

#payments-and-oc {
	width: 45%;
	margin-right: 5%;
}

#convenience-items {
	width: 50%;
}

#convenience-items a {
	display: block;
	border: 1px solid #ccc;
	padding: 0.5em;
}
#convenience-items a:hover {
	background: #77A977;
	border-color: #77A977;
	color: #fff;
	text-decoration: none;
}

#convenience-items2 {
	width: 50%;
}



div#homeButtons {
	float: right;
	width: 425px;
	height: 250px;
	margin: 0 0 1em 1em;
	padding: 0;
}

/* ABOUT */
table#fuel-adjustment {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}

#fuel-adjustment th {
	background: #eee;
}

#fuel-adjustment th,
#fuel-adjustment td {
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	text-align: center;
	padding: 0.25em;
}

/* SERVICES */
div#calendarButton {
	position: relative;
	float: right;
	width: 10em;
	height: 20px;
	background: url(images/calendar_button.gif) no-repeat;
	margin: 5px 5px 0 0;
}
div#calendarButton a {
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-size: 120%;
	color: #C99;
	padding: 1px 0 0 0;
}
div#calendarButton a:hover {
	text-decoration: none;
	color: #FFF;
}

div#serviceImages {margin-bottom: 1em}
div#serviceImages img {
	float: left;
	margin: 0 1em 0 0;
}

div#serviceInfo {
	clear: left;
}

/* Dos and Don'ts */
table#dosDonts {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	width: 100%;
}
th#dos {width: 200px}
th#donts {
	border-right: 1px solid #000;
	width: 200px;
}
table#dosDonts td,table#dosDonts th {
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 2px 3px;
}
table#dosDonts td.subject {
	font-weight: bold;
	background: #D28D8D;
	color: #FFF;
}

/* Disclosure Statement */
blockquote#disclosure {
	padding-left: 165px;
	background: url(images/gavel.gif) left no-repeat;
	height: 165px;
}


/* HISTORY */
img#pic_of_dick {
	float: right;
	margin: 0 0 10px 10px;
	border: 1px solid #000;
}


/* CONTRIBUTIONS */
img#contributionPhoto {
	float: right;
	margin: 0 0 0 1em;
}
div#differenceCliche {
	background: url(images/clipart_houses.jpg) left no-repeat;
	padding: 25px 0 0 0;
	
	height: 100px; /* IE 5 */
	voice-family: "\"}\""; 
	voice-family: inherit;
	height: 75px; /* Others */
}
html>div#differenceCliche {height: 75px} /* Be Nice to Opera */

div#differenceCliche p {
	text-align: center;
	margin: 0;
	text-transform: uppercase;
	font-style: italic;
	font-weight: bold;
	font-size: 2em;	
}


/* DIFFERENCE */
ul#differences {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
}
ul#differences li {
	margin: 0-0 1em 0;
	height: 5.5em;
	padding: 0 0 0 85px;
	background: url(images/lightning_bullet.gif) no-repeat;
}
img#difference_clipboard {
	float: right;
	width: 250px;
	margin: 0 0 1em 1em;
}

/* HOURS */
#office_hours {
	float: right;
	width: 300px;
	padding: 0 0 0 10px;
}
div#office_chick {
	float: right;
	background: url(images/office_hours_chick.jpg) center no-repeat;
	margin: 1em 1em 0 1em;
	padding: 5px;
	border: 1px dashed #000;
	
	/* For IE5 */
	width: 110px;
	height: 110px;
	voice-family: "\"}\""; 
	voice-family:inherit;
	/* For Others */
	width: 100px;
	height: 100px;
}
html>div#office_chick { /* Be Nice to Opera */
	width: 100px;
	height: 100px;
}

/* SPONSORS */
ul#sponsors {
	list-style: none none;
	margin: 0;
	padding: 0;
}

ul#sponsors li {
	margin: 0 0 1em 0;
	clear: both;
}

ul#sponsors img {
	float: right;
	margin: 0 0 1em 1em;
	border: 1px solid #000;
	position: relative;
	z-index: 999;
}

ul#sponsors dt {
	color: #A41B1B;
	margin: 0;
	padding: 0;
	border-bottom: 1px dashed;
}

table#sponsors-logos {}
#sponsors-logos td {text-align: center; vertical-align: middle;}

/* NEWSLETTERS */
dl.newsletter_dates dt {
	font-weight: bold;
	border-bottom: 1px solid #000;
	font-size: 125%;
}
dl.newsletter_dates dd {
	margin: 0 0 1em 0;
	padding: 0;
	border-bottom: 1px dotted #000;
}
ul.newsletters {
	margin: 1em 0;
	padding: 0;
	list-style: none;
}
ul.newsletters li {
	display: inline;
	margin: 0 1em 0 0;
	padding: 0;
}
ul.newsletters img {vertical-align: top}


/* CALENDAR */
table#calendar {width: 725px}
table#calendar caption {
	font-weight: bold;
	font-size: 200%;
	text-align: left;
}

table#calendar th {
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	width: 14.3%;
}
th#saturday {border-right: none;}

table#calendar td {
	padding: 2px 5px;
	margin: 0;
	vertical-align: top;
	height: 100px;
}

table#calendar td.empty {background: #EEE}
table#calendar td#today {background: #CCF}
table#calendar td#today a {font-weight: bold}
table#calendar td.weekend {background: #FCC}

dl#calendarKey dt {
	float: left;
	font-weight: normal;
	margin: 0 10px 1em 0;
}
dl#calendarKey dd {
	float: left;
	margin:  0 1em 1em 0;
}
dl#calendarKey img {border: 1px solid #000}

table#calendarNextPrevControls {
	clear: left;
	width: 725px;
}
td#prevMonthButton {
	text-align: left;
	width: 33%;
}
td#curMonthButton {
	text-align: center;
	width: 34%;
}
td#nextMonthButton {
	text-align: right;
	width: 33%;
}

dl.eventDetails dt {font-weight: bold}
dl.eventDetails dd {margin: 0 0 0.5em 0}

form#jumpToMonth {
	float: right;
	margin: 0;
	width: 300px;
	text-align: right;
}

/* PAYMENTS */
a#payOnlineBtn {
	float: right;
	display: block;
	width: 268px;
	height: 72px;
	margin: 0 0 1em 1em;
}


/* SERVICES */
div.servicesBanner {
	height: 215px;
	margin: 0 0 1em 0;
	padding-right: 25px;
	text-align: right;
}
div#commercial {background: url(images/commercial.jpg) no-repeat}
div#residential {background: url(images/residential.jpg) no-repeat}
div#rolloff {background: url(images/rolloff.jpg) no-repeat}
div#recycling {background: url(images/recycling.jpg) no-repeat}

ul#serviceButtons {
	list-style: none;
	margin: 1em 0 0 0;
	padding: 0;
	text-align: center;
}
ul#serviceButtons li {
	display: inline;
}


/* Education and Resources */
dl#educationResources dt {
	clear: left;
	margin-top: 1em;
}
dl#educationResources img {
	float: left;
	margin: 0 1em 1em 0;
	border: 1px solid #000;
	padding: 5px;
}


/* CONTACT */
a#order_center_btn {
	float: right;
	width: 300px;
	margin: -35px 75px 1em 1em;
}

form#dsi_contact input {width: 348px}
form#dsi_contact textarea {width: 348px}
form#dsi_contact label {width: 150px;}

/* Sign up */
form#dsi_commercial_signup input,textarea {width: 100%}
form#dsi_residential_signup input,textarea {width: 100%}

form#dsi_commercial_signup label {width: 150px}
form#dsi_residential_signup label {width: 150px}

form#dsi_residential_signup,form#dsi_commercial_signup ul {
	list-style: none none;
	margin: 0;
	padding: 0;
}

div#sign_up_residential {
	float: left;
	width: 284px;
	margin: 0 10px 0 0;
	padding: 0;
}

fieldset#personal_info,fieldset#business_info {
	float: left;
	width: 340px;
	margin: 0 10px 0 0;
	padding: 0;
}

fieldset#cart_info,fieldset#other_info {
	width: 350px;
	margin: 0;
	padding: 0;
}
input#seasonal_yard_waste_service {clear: both; display: inline;}
input#other_choice,input#other_requests {width: 100%}

div#sign_up_commercial {
	float: left;
	width: 432px;
	margin: 0;
	padding: 0;
}

/* Schedule P/U Form */
form#pickUpRequest input,form#pickUpRequest textarea,form#pickUpRequest label {width: 400px}


/* // ORDER CENTER // */

/* login */
form#oc_login {width: 150px}

/* nav */
ul#nav-oc {
	list-style: none;
	margin: -2em 0 0 0;
	padding: 0;
	height: 4em;
	position: absolute;
	top: 17px;
	right: 45px;
	width: 425px;
}
#nav-oc li {float: left; width: 33%;}
#nav-oc a {
	display: block;
	line-height: 2.5em;
	text-align: center;
	border: 1px solid #CCC;
}
#nav-oc a:hover {background: #EEE; color: #333; border-color: #999;}
a#logout {color: #F00}

p#oc-status {
	position: absolute;
	top: -22px;
	right: 50px;
	font-size: 0.85em;
}

/* default */
table#workOrders {width: 100%}

/* update workorders */
form#oc-workorders-update {}
#oc-workorders-update fieldset {
	width: 45%;
	float: left;
	margin: 0 1.25% 1em 0;
}
#oc-workorders-update fieldset input {width: 100%}

/* default jobs */
table#workOrder {
	width: 100%;
	margin: 0 0 1em 0;
}
#workOrder td {text-align: center}
#workOrder address {font-weight: bold}

ol#oc-workorder-jobs {
	margin: 0 0 1em 1em;
	padding: 0 0 0 1em;
}
#oc-workorder-jobs li {
	clear: both;
	padding: 0.5em;
	margin: 0 0 1em 0;
	position: relative;
}
#oc-workorder-jobs li {height: 1%} /* fix disappearing content bug in IE */

#oc-workorder-jobs li.even {background: #EEE}
#oc-workorder-jobs li.dispatched {background: #FCC}
#oc-workorder-jobs li.billed {background: #6C9}

ul.job-options {background: #FFF; list-style: none;}
ul.job-options a {display: block}

#oc-workorder-jobs dl {
	width: 125px;
	font-size: 0.875em;
	margin: 0;
}
dt.address,
dd.address {
	font-size: 1.5em;
}

#oc-workorder-jobs div {
	float: right;
	width: 535px;
	margin: 0 0 1em 0;
}

#oc-workorder-jobs table {width: 100%; margin: 0 0 1em 0;}
#oc-workorder-jobs td {text-align: center; background: #FFF;}

#oc-workorder-jobs form {margin: 0.5em 0}
#oc-workorder-jobs form div {width: auto; float: none; margin: 0;}

#oc-workorder-jobs h4 {color: #000}

#oc-workorder-jobs div.clear {clear: both; float: none;}

/* the ordered list counters were all coming up "1." in IE... */
* html #oc-workorder-jobs {list-style: none}
span.ol-marker {display: none}
* html span.ol-marker {
	display: block;
	width: 2em;
	height: 2em;
	position: absolute;
	top: 0;
	left: -2em;
	font-weight: bold;
}

/* update jobs */
form#oc-jobs-update {width: 700px}

#oc-jobs-update fieldset {clear: both}
input#serviceHour {width: 3em}

fieldset#datetime label {display: inline}
#site-contact-info input {width: 100%}
#site-contact-info div,
fieldset#details div {
	float: left;
	width: 42.5%;
	margin: 0 2.5% 0 0;
}
#details select,
#details input {width: 100%}


/* FOOTER */
td#footer {
	height: 43px;
	background: url(images/footer_bg.gif) no-repeat;
}

ul#footer_nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul#footer_nav li {
	display: inline;
	margin: 0;
	padding: 1px 2px 1px 2px;
}

li#footer_nav_home {background: #9E1B1B url(images/footernav_home_bg.gif) no-repeat}
li#footer_nav_about {background: #FF0}
li#footer_nav_services {background: #2C4B96}
li#footer_nav_newsletters {background: #9E1B1B}
li#footer_nav_citiescounties {background: #FF0}
li#footer_nav_contact {background: #2C4B96 url(images/footernav_contact_bg.gif) top right no-repeat}

ul#footer_nav a {text-decoration: none}

/* NAVIGATION UPDATE */



#nav {
	
	font-size:14px;
	font-weight:bold;
	text-align:left;
	vertical-align:middle;
	display:block;
	float:left;
}

#nav a {
	
	color:#232572;
	text-decoration:none;
	display:block;
}

#nav li {
	padding: 1px 0px 1px 0px;
	float: left; 
	position: relative;
	background: none;
	display:block;
}

#nav li ul li {
	
	border-bottom: 1px solid #000;
	display:block;
	float: none; 
	list-style:none;

}

#nav li ul {
	
	position:absolute;
	background-color:#fff;
	border-right: 1px solid #998c69;
	border-bottom: 1px solid #998c69;
	border-left: 1px solid #998c69;
	top:24px;
	padding:0 0 4px 4px;
	margin: 0 0 0 0px;
	font-size: 11px;
	z-index: 0;
	display:none;
}



#nav li:hover ul,
#nav li.over ul {
	left:auto;
	display:block;
}

#nav a:hover{
	color:#ff3300;
	text-decoration:none;
}



#nav .nav_big {width: 100px;}
#nav .nav_sm  {width: 133px;}
#nav .nav_ser  {width: 104px;}
#nav .nav_new  {width: 158px;}
#nav .nav_cit  {width: 104px;}
#nav .nav_con  {width: 104px;}


	 