@import url(nav.css);
@import url(sidebar.css);
@import url(pdf-links.css);

img {border: none;}

body {
	margin: 0; 
	padding: 0;
	font: 62.5% "Trebuchet MS", Helvetica, sans-serif;
	background: #fff url(../images/top_span.gif) repeat-x;
	color: #000;
	min-width: 763px; /* has to be here instead of on #content-container so that the body's background will stop moving over at this width */
}

#container {
	background-color: #ffffff;
	background: url(../images/top_right.gif) top right no-repeat;
	font-size: 1.3em;
}

#header {
	background-image:url(../images/top_left.gif);
	background-repeat:no-repeat;
	height:100px;
}

#header .logo {
	float: left;
	margin: 40px 0 0 25px;
}

#header .saferoutes {
	float:right;
	line-height:1;
	color:#ffffff;
	margin:10px 10px 0 0;
	padding: 0 0 10px 0;
}

#header .saferoutes a{
	color:#ffffff; 
	border-bottom: 1px dotted #ffffff;
	border-width: 1px 0;
	text-decoration: none;
}

#header .saferoutes a:hover{
	color:#75C5F4;
	border-bottom: 1px dotted #75C5F4;
}

#content-container {
	background:url(../images/blue_line_fade.gif) no-repeat;
	padding-top: 24px;
	max-width: 1200px;
	}

#content {	
	display: table; /* establishes new block formatting context so that clears within it won't clear nav column */
	padding: 0 20px 0 20px; /* padding works better than margin on elements with display set to table */
	background-color:#FFFFFF;
}

#content .breadcrumb {
	color:#1299E8;
	margin:0 0 20px 0;
}

#content .breadcrumb A{
	color:#1299E8;
}

#content .breadcrumb A:hover{
	color:#3A5A9B;
}

#footer {	
	padding: 20px 0 1px 0;
	background:#3E5A9F url(../images/footer_span.gif) repeat-x top left;
	min-height:2em;	
	clear:both;
}

#footer p {
	margin: 0 10px 10px 10px;
	color: #fff;
	}

.IE-clear-fix {float:left; width:0px; height:0px;}

.clearfix:after {
  content: "."; /* This dot is the actual appended content */
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
 
.clearfix {display: inline-block;} /* Fixes IE/Mac */
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* _____________________________________________________________________ */
/* TEXT ---------------------------------------------------------------- */
/* 2-18-08 many changes made by ZMG */
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

h1 {
	font:2.4em Georgia, Times, serif;
	color:#3E5A9F;
	margin:0 0 .5em 0;
	}
h2 {
	margin-top: 2em;
	margin-bottom: .5em;
	color:#3E5A9F;
	font-size:1.6em; 
	}
h3 {
	margin-bottom: .5em;
	font-size: 1.15em;
	}
h4, h5, h6 {
	margin-bottom: 0;
	font-size: 1em;
	}
h5 {
	font-style: italic;
	}
h1 + h2 {
	margin-top: 0;
	}

p {
	line-height:1.5;
}

a {
	color:#1299E8;
	text-decoration: underline;
}

hr {
	clear: both;
	}
	
blockquote {
	margin: 1.5em 0;
	color: #03A538;
	font-size: 120%;
	font-style: italic;
	}
blockquote span.quote-source {
	font-size: 90%;
	font-style: normal;
	}

/* _____________________________________________________________________ */
/* LISTS --------------------------------------------------------------- */

ul, ol {
	margin-top: 0;
	}
ul {
	list-style-type: square;
	}
dt {
	margin: .8em 0 0 1em;
	font-weight: bold;
	}
dd {
	margin-left: 1em;
	}


/* _____________________________________________________________________ */
/* IMAGES -------------------------------------------------------------- */

#content .vertical {
	width: 170px;
	width: 200px;
	}
#content .horizontal {
	width: 250px;
	width: 300px;
	}
.right {
	display: inline; /* for IE */
	clear: right;
	float: right;
	margin: .2em 0 1em 1.4em;
	}
.left {
	clear: left;
	float: left;
	margin: .2em 1.4em 1em 0;
}
.vertical img,
.horizontal img {
	margin: 0 0 5px 0;
	}
#content .vertical p,
#content .horizontal p {
	margin: 5px 0 0 0;
	padding: 0;
	color:#3E5A9F;
	line-height: 1.2;
	}
.graph {
	width: 350px;
	margin: 1.5em 0;
	}
.graph p {
	margin: 0 0 5px 0;
	color:#3E5A9F;
	text-align: center;
	line-height: 1.2;
	}

.header_image {
	margin: 0 195px 20px 0;
	margin: 0 0 20px 0;
	height: 150px;
	background: #3e5a9f url("/guide/images/header_image_edge.gif") no-repeat top right;
}

.header_image_home {
	margin: 0 20px 20px 0;
	height: 200px;
	background: #3e5a9f url("/guide/images/header_image_home_edge.gif") no-repeat top right;
}
.header_image img,
.header_image_home img {
	display: block; /* removes gap beneath image in IE */
	}

/* _____________________________________________________________________ */
/* TABLES -------------------------------------------------------------- */

table {
	margin: 0 0 1.5em 0;
	border-collapse: collapse;
	}
caption {
	margin: 1em 0 .5em 0;
	color: #3E5A9F;
	font-weight: bold;
	text-align: left;
	}
th, td {
	padding: 2px 8px 3px 3px;
	border-bottom: 1px solid #CFEBFB;
	vertical-align: top;
	}
th {
	background: #fcfcfc;
	color:#3E5A9F;
	text-align: left;
	}
td ul {
	margin: 0 0 0 1em;
	padding: 0;
	}


/* CASE STUDIES ON PAGE ------------------- */

.case-study {
	clear: right;
	width: 100%;
	margin: 1.5em 0;
	border-bottom: 4px solid #CFEBFB;
	background: #FCFCFC;
	}
	
/* These next rules make the case study boxes contain their children floats. */
.case-study:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.case-study {display: inline-block;} /* Fixes IE/Mac */
/* MOVE TO IE SHEET */
/* Hides from IE-mac \*/
* html .case-study {height: 1%;}
.case-study {display: block;}
/* End hide from IE-mac */

.case-study h2 {
	margin: 0;
	padding: 10px 15px 0 15px;
	background: #CFEBFB url(../images/casestudy_bg.gif) no-repeat top left;
	}
.case-study h3 {
	margin: 0 0 15px 0;
	padding: 3px 15px 10px 15px;
	border-bottom: 4px solid #1299E8;
	background: #CFEBFB;
	color: #3E5A9F;
	}
.case-study h4 {
	margin: 0 0 0 15px;
	color: #3E5A9F;
	}
#content .case-study p {
	margin: 0 0 1.2em 0; /* needed to keep IE from letting last paragraph butt up against bottom border */
	padding: 0 15px;
	line-height: 1.3;
	}
.case-study .left {
	margin-left: 15px;
	}
.case-study .right {
	margin-right: 15px;
	}
#content .case-study .left p,
#content .case-study .right p {
	padding: 0;
	}


/* TREATMENT & STRATEGY BOXES ------------------- */

.strategy,
.treatment,
.tool {
	clear: right;
	width: 100%;
	margin: 1.5em 0;
	border-bottom: 4px solid #D1F8E0;
	background: #F2FFF7;
	}
/* These next rules make the treatment and strategy boxes contain their children floats. */
.strategy:after,
.treatment:after,
.tool:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.strategy,
.treatment
.tool {
	display: inline-block; /* Fixes IE/Mac */
	}
/* MOVE TO IE SHEET */
/* Hides from IE-mac \*/
* html .treatment,
* html .strategy,
* html .tool {
	height: 1%;
	}
.treatment, 
.strategy, 
.tool {
	display: block;
	}
/* End hide from IE-mac */

.strategy h2,
.treatment h2,
.tool h2 {
	padding: 10px 15px 10px 15px;
	border-bottom: 4px solid #41E877;
	background: #D1F8E0 url(../images/treatments_bg.gif) no-repeat top left;
	color: #000;
	}
.strategy h3,
.treatment h3,
.tool h3 {
	margin: 0;
	padding: 0 15px;
	}
.strategy h4,
.treatment h4 {
	margin: 0 0 0 15px;
	color: #000;
	}
#content .strategy p,
#content .treatment p,
#content .tool p {
	margin: 0 0 1.2em 0; /* needed to keep IE from letting last paragraph butt up against bottom border */
	padding: 0 15px;
	line-height: 1.3;
	}
#content .strategy .vertical p,
#content .strategy .horizontal p,
#content .treatment .vertical p,
#content .treatment .horizontal p,
#content .tool .vertical p,
#content .tool .horizontal p {
	padding: 0;
	line-height: 1.2;
	}
.strategy div,
.treatment div {
	float: left;
	width: 30%;
	margin-right: 2%;
	line-height: 1.3;
	}
.strategy .left {
	margin-left: 15px;
	}
.strategy .right {
	display: inline;
	clear: right;
	float: right;
	margin-right: 0px 15px 0 15px;
	}



/* PREVIOUS AND NEXT PAGE LINKS ------------------- */
#prev-next {
	clear: both;
	float: left; /* to contain children floats */
	width: 100%;
	margin: 3px 0 20px 0;
	background: #CAE9FB;
	}
#prev-next #previous-page {
	clear: both;
	float: left;
	margin: 0;
	padding: 8px 0 10px 10px;
	background: url(../images/prev-next_bottom-left.gif) bottom left no-repeat;
	}
#prev-next #next-page {
	float: right;
	margin: 0;
	padding: 8px 10px 10px 0;
	background: url(../images/prev-next_bottom-right.gif) bottom right no-repeat;
	}
	

/* EXTRA INFO BOXES ------------------- */
.extra-info {
	clear: both;
	margin: 1.5em 0;
	padding: 15px 15px 0 15px;
	border-top: 3px solid #CFEBFB;
	background: #fcfcfc url(../images/extra_info_bottom.gif) bottom left no-repeat;
	color:#3E5A9F;
	}
.extra-info .bottom {
	clear: both;
	height: 12px;
	margin-top: 15px;
	margin-right: -15px;
	background: url(../images/extra_info_bottom.gif) bottom right no-repeat;
	}

#coalition-members-school,
#coalition-members-community,
#coalition-members-government {
	float: left;
	width: 30%;
	margin-right: 2%;
	padding: 10px 0;
	}
/*
* html #coalition-members-school,
* html #coalition-members-community,
* html #coalition-members-government {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	}*/
#coalition-members-school h4,
#coalition-members-community h4,
#coalition-members-government h4 {
	
	}
#coalition-members-school ul,
#coalition-members-community ul,
#coalition-members-government ul {
	margin: 0 0 0 15px;
	padding: 0;
	}
#coalition-members-government {
	margin-right: 0;
	}

/* STEP HEADERS ------------------- */
.step {
	clear: right;
	margin: 1.8em 0 1em 0;
	padding: 6px 8px 8px 50px;
	background: #CFEBFB;
	}
#step1 {
	background: #CFEBFB url(../images/step1.gif) no-repeat;
	}
#step2 {
	background: #CFEBFB url(../images/step2.gif) no-repeat;
	}
#step3 {
	background: #CFEBFB url(../images/step3.gif) no-repeat;
	}
#step4 {
	background: #CFEBFB url(../images/step4.gif) no-repeat;
	}
#step5 {
	background: #CFEBFB url(../images/step5.gif) no-repeat;
	}
#step6 {
	background: #CFEBFB url(../images/step6.gif) no-repeat;
	}
#step7 {
	background: #CFEBFB url(../images/step7.gif) no-repeat;
	}
#step8 {
	background: #CFEBFB url(../images/step8.gif) no-repeat;
	}

/* "Elements of SR2S Programs" page ------------------- */
.element {
	clear: right;
	}

/* EVALUATION CHAPTER --------------------------------- */
col.what-measure {
	width: 10em;
	}
col.how-when-measure {
	width: 14em;
	}
col.objectives {
	width: 14em;
	}
table.measure-examples,
.extra-info table {
	width: 100%;
	}

.eval-steps-example {
	padding: 20px;
	border: 1px solid #CFEBFB;
	background: #fff;
	}
.eval-steps-example .changed-text {
	background: #F2FFF7;
	}
	
/* Extra stuff ------------------- */
.quote {color:#84c0f0; border-top: 2px dotted #84c0f0; border-bottom: 2px dotted #84c0f0; margin: 30px; padding: 30px 0 30px 0; font-style: italic; font-size: 115%;}

.state-guidelines {background: #dceedb; border: 1px solid #4eba4c; font-family:Arial, Helvetica, sans-serif; margin: 0 0 1em 0; padding: 30px;}