/* CSS Document */

/*---SPU External Site Homepage CSS---*/

body {
	background-image:url(http://www.seattle.gov/2004_img/seattle_back.gif);
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	padding: 0 0 0 0;
	margin: 0 auto;
}


a:link, a:active, a:visited {
	color:#0464cc;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

#container {
	
	width: 775px;
	background-color:#fff;
}



div#container div#topContent {
	width:775px;
}

#doitMessage {
	padding:0;
	margin:8px 8px 0 8px;
}

/* topNav - homepage navigation - temporary until new nav is built */

#container #topNav {
	margin:0;
	padding:0;
	width:775px;
	border:1px solid #003399;
	text-align:left;
	background-color:#efefef;
	height:22px;
}


#container #topNav ul{
	margin:0;
	padding:0 0 0 0;
}

#container #topNav ul li{
	margin:0 0 0 0;
	padding:3px;
	list-style:none;
	float:left;
	border-right:1px solid #003399;
	text-decoration:none;
}

#container #topNav ul li a:link, #container #topNav ul li a:active, #container #topNav ul li a:active, #container #topNav ul li a:visited {
	color:#003399;
	font-weight:bold;
	margin:0 10px 0 10px;
	padding:0;
	text-decoration:none;
}

#container #topNav ul li.selected{
	background-color:#ffffff;
}

#container #topNav ul li.selected a:link, #container #topNav ul li.selected a:active, #container #topNav ul li.selected a:active, #container #topNav ul li.selected a:visited {
	color:#660000;
	margin:0 10px 0 10px;
	padding:0;	
	font-weight:bold;
	
}

/* end topNav*/

/* top left content - positions the following content areas: flash item, recycling, business services, pay my bill, residential services & at your service */


#topContentLeft{
	margin: 0 0 0 0;
	padding: 0 5px 0 0;
	float:left;
	width:620px;
}



/* left content - positions flash item, recycling & business services */

#leftContent {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	float:left;
	width:345px;
}



/* Branding promo */

#leftContent #brandingPromo {
	margin: 0 0 0 0;
	padding:0 0 0 0;
}



/* emergency item - replaces flash item when needed */

#leftContent #brandingPromo div.emergencyItem {
	border:solid 3px #C00;
	margin:10px 10px 0 10px;
	padding:0 0 0 0;
	width:320px	
}

#leftContent #brandingPromo div.emergencyItem p{
	margin:8px 8px 5px 8px;
	padding:0 0 0 0;	
}


/* middle image for the left contetn box. This image is shared between the recycling, collection day and emergencies sections */ 
#leftContent #recyclingItem .middleContent, #leftContent #collectionDay .middleContent {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020064.gif);
	background-repeat:repeat-y;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}



/* Bottom image for left content box. This image is shared between the recycling, collections day and emergencies sections */ 

#leftContent #recyclingItem .bottomImageLeft, #leftContent #collectionDay .bottomImageLeft {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020050.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:17px;
	background-position:top;
	width:340px;	
}


/*  Recycling section - This section shares the same bacground images for the middle and bottom of the shadow box with the promo and emergencies sections */

#leftContent #recyclingItem {
	margin: 10px 0 10px 5px;
	padding: 0 0 0 0;
	width:345px;
	text-align:left;
}


#leftContent #recyclingItem .topImageLeft {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020069.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:59px;
}


#leftContent #recyclingItem .topImageLeft #lut {
margin: -15px 0 0 0;
padding: 0 30px 0 0;
float: right;
}


#leftContent #recyclingItem .topImageLeft #lut #ddl_mini  {
margin: 0;
width: 180px;
padding: 0;
}

#leftContent #recyclingItem .middleContent div.recyclingImgs{
	margin: 0 0 0 0;
	padding: 5px 0 0 20px;	
}





/*  start #topPromo */
 

 
#leftContent #topPromo {
	margin: 10px 0 10px 5px;
	padding: 0 0 0 0;
	width:345px;
	text-align:left;
}


#leftContent #topPromo .middleContent {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020097.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:83px;
}

#leftContent #topPromo .middleContent p{
	margin: 0 5px 0 0;
	padding:5px 0 0 0;
	line-height:1.5em;
	float:right;
	width:260px;
}

#leftContent #topPromo .middleContent img{
	margin:5px 0 0 3px;
	padding:0 0 0 0;
	width:68px;
	float:left;
	border:none;
}



/*  Collection Day  - This section shares the same bacground images for the middle and bottom of the shadow box with the recycling, promo and emergencies sections */

#leftContent #collectionDay  {
	margin: 10px 0 0 5px;
	padding: 0 0 0 0;
	width:345px;
	text-align:left;
}


#leftContent #collectionDay .topImageLeft {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020054.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:35px;
	
}

#leftContent #collectionDay img.collection {
	margin: -45px 50px 0 0;
	padding: 0 0 0 0;
	float:right;
	width:101px; 
}

#leftContent #collectionDay .middleContent p{
	margin: 0 0 0 0;
	padding: 0 0 10px 12px;
	line-height:1.5em;
}





/* At your Service - contains the at your service include. Spans left and center content*/
 
#leftContent #atYourService {
	padding:0 0 0 0;
	margin:10px 0 10px 5px;
	width:345px;
  }
#leftContent #atYourService #twitter{
	 margin:10px 5px;
     padding:0;
}
 


/* Center content - Pay my bill -  Residential Service */

#centerContent {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width:265px;
	float:right;
}


 /*shared images and styles for Pay my bill, residential service and business services */
 
#centerContent #businessServices .middleContentCenter, #centerContent #residential .middleContentCenter, #centerContent #payBill .middleContentCenter, #centerContent #emergencies .middleContentCenter {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020065.gif);
	background-repeat:repeat-y;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}


#centerContent #businessServices .bottomImageCenter, #centerContent #residential .bottomImageCenter, #centerContent #payBill .bottomImageCenter, #centerContent #emergencies .bottomImageCenter {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020051.gif);
	background-repeat:no-repeat;
	background-position:top;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width:258px;
	height:17px;
}

/*end shared styles */


/* Start Pay my bill */

#centerContent #payBill {
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	text-align:left;
	width:265px;
}


#centerContent #payBill .topImagePayBill {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020066.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:39px;
}

#centerContent #payBill .middleContentCenter p{
	margin: 0 0 0 0;
	padding: 0 2px 5px 16px;
	line-height:1.5em;
}
 /* end pay my bill */
 
 

/* start residential services */

#centerContent #residential {
	margin: 10px 0 10px 0;
	padding: 0 0 0 0;
	text-align:left;
	width:265px;
}


#centerContent #residential .topImageResidential {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020070.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:35px;
}

#centerContent #residential .middleContentCenter p{
	margin: 0 0 0 0;
	padding: 0 2px 5px 16px;
	line-height:1.5em;
}
/*end residential services*/


/* start business services */
#centerContent #businessServices {
	margin: 10px 0 10px 0;
	padding: 0 0 0 0;
	text-align:left;
	width:265px;
	}

#centerContent #businessServices .topImageBusiness {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020052.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:35px;
}

#centerContent #businessServices .middleContentCenter p{
	margin: 0 0 0 0;
	padding: 0 2px 5px 16px;
	line-height:1.5em;
}

/*end business services */ 



/*  Emergencies Section */

#centerContent #emergencies {
	margin: 10px 0 10px 0;
	padding: 0 0 0 0;
	width:265px;
	text-align:left;
}

#centerContent #emergencies .topImageEmergency {
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020056.gif);
	background-repeat:no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:35px;
}

#centerContent #emergencies .middleContentCenter p{
	margin: 0 0 0 0;
	padding: 0 2px 5px 16px;
	line-height:1.5em;
}
/*end emergencies
 
 /* end center content */
 
  
  /* end top content left */


/* Top content right - Cutomer service contact info -  Learn more - Get Involved */

#rightContent {
	float:right;
	width:140px;
	margin:0 0 0 0;
	padding:0 10px 0 0;
	text-align:left;
}

#rightContent img{
	margin:10px 0 10px 0;
	padding:0 0 0 0;
}

#rightContent #rightPromo {
	margin:15px 0 20px 0;
	padding:0 0 0 0;
	border:solid 1px #d8dde4;
	text-align:left;
	width:135px;
}

#rightContent #rightPromo div {
	margin:3px 0 0 0;
	padding:0 0 30px 0;
}

#rightContent #rightPromo div span {
	margin:0 0 0 5px;
	padding:0 0 0 0;
	font-size:.9em;
	float:left;
	height:23px;
}

#rightContent #rightPromo div .login {
	margin:-2px 5px 0 0;
	padding:0 0 0 0;
	float:right;
	height:23px;
}

#rightContent #rightPromo h2{
	margin:0 0 0 0;
	padding:2px 0 2px 10px;
	border-bottom:solid 1px #d8dde4;
	background-color:#d8dde4;
	font-size:1.1em;
	color:#2d7e8f;
	width:125px;
   
}


#rightContent #rightPromo ul{
	margin:0;
	padding:0;
}

#rightContent #rightPromo ul li{
	margin:0 0 0 5px;
	padding:5px 0;
	list-style: none;
}



/*end #rightPromo */


/*end top #rightContent */


 /* Bottom content  - promos */
 
#bottomContent {
	clear:both;
	width:775px;
	background-image:url(http://www.seattle.gov/util/stellent/groups/public/@spu/documents/webproductionfile/spu02_020049.gif);
	background-repeat:repeat-x;
	margin: 0 0 0 0;
	padding: 25px 0 0 0;
	height:845px;
	background-color:#8dbfd8;
}

 /* Bottom content  - Horizontal promos */
#bottomContent #horizontalPromo {
	float:left;
	width:370px;
	text-align:left;
	margin:0;
	padding:0;
}

#bottomContent #horizontalPromo img{
	margin:0 0 0 0;
	padding:0 0 5px 10px;
}

#bottomContent #horizontalPromo #promoItem {
	margin: 10px 0 20px 15px;
	padding:0 0 0 0;
	width:370px;
	height:68px;
	background-color:#FFF;
}

#bottomContent #horizontalPromo #promoItem img {
	margin: 0 0 0 -3px;
	padding: 0 0 0 0;
	float:left;
	width:68px;
	border:none;
}

#bottomContent #horizontalPromo #promoItem a {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border:none;
}

#bottomContent #horizontalPromo #promoItem p{
	margin: 0 0 0 0;
	padding: 5px 5px 0 10px;
	text-align:left;
	width:287px;
	float:right;
}

 /*  Bottom content - Vertical promos  */
#bottomContent #verticalPromos {
	float:right;
	width:370px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align:left;	
}



#bottomContent #verticalPromos #verticalPromoTop {
	margin: 0 0 0 0;
	padding: 0 0 0 0; 
	width:370px;
}

#bottomContent #verticalPromos #verticalPromoBottom {
	margin: 10px 0 0 0;
	padding: 0 0 0 0; 
	width:370px;
}



#bottomContent #verticalPromos #verticalPromoTop img,
#bottomContent #verticalPromos #verticalPromoBottom img {
	margin: 0 0 0 0;
	padding: 0 0 5px 0; 
}


#bottomContent #verticalPromos #verticalPromoTop #verticalPromoItem,
#bottomContent #verticalPromos #verticalPromoBottom #verticalPromoItem{
	float:left;
	width:170px;
	background-color:#FFF;
	margin: 10px 15px 20px 0;
	padding: 0 0 0 0;
	height:355px;
}


#bottomContent #verticalPromos #verticalPromoTop #verticalPromoItem img,
#bottomContent #verticalPromos #verticalPromoBottom #verticalPromoItem img {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width:170px;
	border:none;
}

#bottomContent #verticalPromos #verticalPromoTop #verticalPromoItem p,
#bottomContent #verticalPromos #verticalPromoBottom #verticalPromoItem  p{
	margin: 0 0 0 0;
	padding: 10px 5px 5px 10px;
	text-align:left;
	
}