/* Styles for www.swdurham.org
 * (c) 2005 Redwing DesignWorks
 *     Design date July 05
 * 
 * PALETTE
/*

/********** NOTES ON TEXT SIZING *****************
 *
 * text size breakover points: 60, 69, 76, 86, 93
 * (IEPC and MozPC display 86 and 93 a tad larger 
 *     than IEmac, MozMac, and Opera)
 * -- Owen Briggs, www.thenoodleincident.com
 */


/***************** CREATE SOME STRUCTURES AND DEFAULTS **************/


body {	background; #ffffff;
	color: black;
	margin:0; padding:0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: small;
	width: 100%;       /* give IE a basis for subsequent widths. */

	/*                     ** Tantek Çelik hack    */
	font-size: medium;     /* Special value for IE */
	voice-family: "\"}\""; 
	voice-family:inherit;
	font-size: small;      /* Value for compliant browsers  */	
	}
 

html>body {                    /* Be nice to Opera: set the value */
	font-size: small;      /* explicitly but hide from IE.    */
	} 

/* This font size isn't quite right for Trebuchet... so adjust it for Content and Sidemenu. */


h1, h2, h3, h4, ul, li, p, th, td { margin:0; padding:0; }

a img {border:0;}


blockquote { 
	margin:0;  padding:0; 
	margin-left: 2em;
	margin-right: 5em;
	}


#canvas {
	background: #ffffff;
	color: #332222;
	}

#canvas-left {
	}

form input {
	width: 400px;
	margin-left: 15px;
	}


/* ################################# HEADER #################### */

#header { }

#header h1 {     /* Non-visual and unstyled browsers see text... */
	position: absolute;
	left: -1000px;
	width: 800px;
	padding-top: 6px;
	font-size: 38pt;
	border-bottom: solid 6px #069;
	color: #036;
	}

#header p { 
	position: absolute;
	left: -1000px;
	width: 800px; 
	padding-left: 20px;
	font-size: 200%;
	color: #058;
	}

		/* Styled browsers see the header as an image. */
#header-bar {
	height: 120px;
	background: url(../images/swlogo_bar1.gif) top left repeat-x #17a;
	}

#header-logo {
	height: 120px;
	background: url(../images/swlogo1.gif) top left no-repeat transparent;
	}

#header-words {
	margin-left: 103px;
	height: 120px;
	background: url(../images/swlogo1_words1.gif) top left no-repeat transparent;
	}


/* ############################### SIDE MENU ################### */

#sidemenu {
	width: 12em;
	position: absolute;
	padding-top: 20px;
	padding-bottom: 200px;
	background: #17a;
	border-right: solid 1px #17a;
	}


#sidemenu .skipnav {
	position: absolute;
	width: 500px;
	left: -1000px;
	}

#sidemenu ul {
	list-style-type: none;
	border-bottom: solid 1px #6ad;
	}

#sidemenu li {
	font-size: 125%;
	border-top: solid 1px #6ad;
	border-bottom: solid 1px #17a;
	}

#sidemenu ul.submenu {
	padding-top: 0px;
	}

#sidemenu li.sublist {
	font-size: 100%;
	background: #7ae;  /* 8bf */
	border-top: solid 1px #39c; /*  28b  #59c;*/
	border-bottom: solid 1px #7ae;
	}


#sidemenu li a {
	display: block; 
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 12px;
	padding-right: 10px;
	text-decoration: none;
	font-weight: bold;
	color: white;
	}

#sidemenu li.sublist a {
	padding-top: 3px;
	padding-bottom: 2px;
	padding-left: 17px;
	font-weight: normal;
	color: #069;  /* 17a */
	}


#sidemenu li a:hover {
	/* text-decoration: underline; */
	background: #28b;
	}

#sidemenu li.sublist a:hover {
	/* text-decoration: underline; */
	background: #8bf;
	}

/* ............................ ACTIVE CASE BOXES .............. */

#activecase {
	margin-top: 60px;
	background:  url(../images/yellowdot2.gif) #fff;
	margin-left: 2px;
	margin-right: 2px;
	}

#activecase .casewatch {
	background: url(../images/yellowdot9.gif) #fff;
	color: black;
	font-size: 125%;
	font-weight: bold;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-right: 7px;
	}
	
#activecase .whatsnew {
	background: url(../images/orangedot5.gif) #fff;
	color: black;
	font-size: 125%;
	font-weight: bold;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-right: 7px;
	}

#activecase h1 {
	font-size: 120%;
	padding-left: 7px;
	padding-right: 7px;
	}

#activecase p {
	padding-left: 7px;
	padding-right: 7px;
	padding-bottom: 1em;
	font-size: 100%;
	}





/* ############################# BACK-AND-FORTH ################ */

#back-and-forth {
	width: 30em;
	margin-left: 10em;
	float: right;
	list-style-type: none;
	text-align: right;
	padding-top: 0.5em;
	padding-bottom: 3px;
	border-bottom: dotted 2px #17a;
	font-size: 86%; /* CHANGE TO BE A NOODLE MULTIPLIER */
	color:  #6ac; /* #17a; */
	background: transparent;
	}

#content.neighborhood #back-and-forth { width: 28em; margin-left: 12em;}
#content.casefolder   #back-and-forth { width: 18em; margin-left: 4em;}



#back-and-forth li {
	display: inline;
	}

#back-and-forth li a { 
	text-decoration: none;
	font-weight: bold;
	color:  #6ac; /* #17a; */
	}

#back-and-forth li a:hover { 
	text-decoration: underline;
	}

#back-and-forth li a:visited { 
	color:  #6ac; /* #17a; */
	}

/* ################################ CONTENT #################### */

#content {
	width: 600px;
	padding-left: 14em;
	padding-right: 0px;
	padding-top: 10px;
	color: #025;
	}

#footer {
	width: 550px;
	margin-left: 13.5em;
	margin-right: 0px;
	margin-top: 50px;
	border-top: double 3px #579;
	padding-bottom: 300px;
	color: #579;  /* 17a */
	}


#content h2 {
	padding-top: 0.5em;
	font-size: 270%; 
	}

#content h3 {
	padding-top: 0.5em;
	font-size: 160%;
	color: #d61;
	}

#content h3 a { color: #d61; text-decoration: none; }
#content h3 a:hover {  text-decoration: underline; }
#content h3 a:visited { color: #d61; }


#content h4 {
	padding-top: 0.5em;
	font-size: 125%;}

#content p {
	padding-bottom: 1em; 
	font-size: 125%;}

#content li {
	font-size: 125%;}


#content td, #content th {
	font-size: 125%;
	vertical-align: top;
	}

#content td h3 {font-size: 130%;} 
#content td p, #content td li {font-size: 100%;}


#content img {font-size: 80%; /* change this to a noodle multiplier */
	}

#more-pages {
	font-size: 80%;
	margin-top: 2em;
	}

#more-pages h2 {
	border-top: dashed 1px gray; }

ul.bullet-list {
	padding-left: 20px;
	list-style-type: square;
	}

ul.bullet-list li { padding-bottom: 0.5em; }




#content a {color: #0033dd;}	
#content a:visited {color: #771166;}	


.callout {
	position: absolute; 
	left: 0;
	width: 10em; 
	padding-left: 1em;
	padding-right: 1em;
	background: url(../images/yellowdot2.gif) #fff;
	/* color: #662222;*/
	}

#content .callout h3 { font-size: 125%; }
#content .callout p  { font-size: 100%; }



#petition-paper {
	padding-top: 2em;
	}


/* .......................... REZONING CASE LIST PAGES ......... */

#content.cases p.details {
	padding-bottom: 0;
	margin-bottom: 0.5em;
	margin-left: 2px;
	padding-left: 5px;
	border-left: solid 2px #f83;  /* #d61;*/
	}

#content.cases .readmore {
	font-size: 69%; 
	font-weight: normal;
	}

/* ............................ NEIGHBORHOOD LISTING ........... */

#content .quadrants h3 {margin:0; padding:0;}

.quadrants {background: url(../images/yellowdot2.gif) #fff; 
	border: solid 1px #d61;
	margin-top: 5px;
	margin-bottom: 10px;
	}

td.nw {	width: 250px;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: right;
	vertical-align: bottom;
	}

td.ne {	width: 250px;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: left;
	vertical-align: bottom;
	}

td.sw {	width: 250px;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: right;
	vertical-align: top;
	}

td.se {	width: 250px;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: left;
	vertical-align: top;
	}

#content td.logo {
	width: 70px;
	text-align: center; 
	vertical-align: middle;
	}



/* .......................... NEIGHBORHOOD FOCUS PAGES ......... */

h2 .preheading {
	font-size: 75%; 
	color:  #6ac; /* #17a; */
	}


.neighborhood-map {
	width: 250px; 
	height: 250px; 
	background: #9cf; /* 7ae */
	border: solid 1px #39c; 
	float: right; 
	margin-top: 20px;
	margin-left: 10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	}

.checksource {
	margin-top: 5px;
	border-top: double 3px silver;
	padding-top: 5px;
	font-size: 86%;
	}

.goback {
	font-size: 86%;
	}

.goback a {
	text-decoration: none;
	color: #bfa2a2;
	font-weight: bold;
	}

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

/* ................................... SITE MAP ................ */


#site-map .leftlinks {
	width: 250px;
	padding-left: 10px;
	vertical-align: top;
	border-right:  solid 3px #d61;
	}

#site-map .rightlinks {
	vertical-align: top;
	padding-left: 20px;
	}