/* CSS Document */
/* CSS styles that are for tutorial files only */
@import url("reset.css");
@import url("navigation.css");
@import url("main.css");
/* setting the margins to auto & specifying the width creates a centered template */
#fullPage {
	width: 	760px;
}

/* styles for the top and bottom of the page design */
#border {
	border: none;
}

/* styles for header */
#header {
	width: 760px;
	background: url(../_images/banner_brown.gif) #abcee3 bottom left no-repeat;
	overflow: hidden;
	padding: 8px 0;
}
#header h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 2.6em;
	font-weight: normal;
	margin: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}

/* styles for body, uses repeating background image for graphics on the page */
#body {
	width: 760px;
	background: url(../_images/bodyBG.gif) repeat-y top left;
}


/* ____________________________________________________________________________________________________*/

#content {
	float: left;
	padding: 0px;
	margin: 0px;
	width: 595px;
}

/*  Learning Activities Menu  */
.menuBox {
	width: 568px;
	background: url(../_images/menuBG.gif) top left repeat-y;
	margin: 0px;
	padding: 0px;
	border: none;
	overflow: hidden;
}
.menuBorder {
	width: 568px;
	height: 2px;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background: url(../_images/menuDivider.gif) top left no-repeat;
	overflow: hidden;
	border-bottom: 1px solid #FFF;
}
.menuBorderTop {
	width: 568px;
	height: 2px;
	margin: 1em 0 0 0;
	padding: 0px;
	background: url(../_images/menuDivider.gif) top left no-repeat;
	overflow: hidden;
	border: none;
}
.menuLeft {
	float: left;
	padding: 0px 24px 0px 2px;
	/* width: 270px; */
	width: 270px;
	margin: 0px;
	border: none;
}
.menuLeft table{
	border: none;
	border-collapse: collapse; 
	border-spacing: 0;
	margin: 0px;
	padding: 0px;
	width: 270px;
}

.menuLeft table th {
	font-weight: bold;
	text-align: left;
	margin: 0px;
	padding: 10px 7px 10px 7px;
	background-color: #E4EDF4; 
	/*border-top: solid 2px #ABC6DC;*/
	border-bottom: solid 2px #ABC6DC;
}
.menuBox .titleSpace, .menuInd .titleSpace {	
	text-indent: -1.4em;
	padding-left: 1.5em;
}
.menuLeft table td {
	padding: 10px 7px;
}
.menuRight {
	float: left;
	width: 270px;
	margin: 0px;
	padding: 0px;
	border: none;
}
.menuRight table {
	border: none;
	border-collapse: collapse; 
	border-spacing: 0;
	margin: 0px;
	width: 270px;
}

.menuRight table th {
	font-weight: bold;
	text-align: left;
	text-indent: -1.4em;
	padding-left: 1.5em;
	margin: 0px;
	padding: 10px 7px 10px 7px;
	background-color: #E4EDF4; 
	/*border-top: solid 2px #ABC6DC;*/
	border-bottom: solid 2px #ABC6DC;
}
.menuRight table td {
	padding: 10px 9px 10px 7px;
}

.menuInd {
	border-collapse: collapse;
	margin: 0px 0px 20px 0px;
	width: 567px;
}

.menuInd th {
	font-weight: bold;
	text-align: left;
	text-indent: -1.4em;
	padding-left: 1.5em;
	margin: 0px;
	padding: 10px 7px 10px 7px;
	background-color: #E4EDF4; 
	border: solid 2px #ABC6DC;
}
.menuInd td {
	padding: 10px 20px 10px 7px;
	border: solid 2px #ABC6DC;
}
.menuBox ul, .menuInd td ul {
	list-style: disc;
	padding-left: 20px;
	margin: 0px;
}

.menuBox ul li, .menuInd td ul li {
	margin-bottom: 0.4em;
}


/* Generic box for highlighting self reflection questions */
.reflectionsBox {
	border: 2px solid #7FA8C9;
	background:url(../_images/reflectBoxBottom.gif) bottom left no-repeat;
	padding: 10px 10px 100px 10px;
	margin-top: 1em;
	margin-bottom: 1em;
}
#reflectionsHeading {
	font-family:  "Times New Roman", Times, serif;
	font-size: 1.6em;
	font-weight: normal;
}

/* Generic box for highlighting text such as quotes */
.small {
	width: 30%;
}
.medium {
	width: 60%;
}
.large {
	width: 90%;
}
.quoteBox, .quoteBoxCenter, .quoteBoxRight, .quoteBoxLeft {
	border: 2px solid #ABC6DC;
	padding: 10px;
	margin: 1em;
}
.quoteBoxCenter {
	display: table;
	margin: 1em auto;
	max-width: 80%;
	overflow: visible;
}
.quoteBoxRight {
	float: right;
	margin: .5em 0px .5em 1em;
	max-width: 300px;
}
.quoteBoxRight td {
	border: 2px solid #ABC6DC;
	background-color: #D3E4ED;
	padding: 5px;
}
.quoteBoxLeft {
	display:inline-block;
	float: left;
	margin: .5em 1em .5em 0px;
	max-width: 300px;
}
.quoteBoxLeft td {
	border: 2px solid #ABC6DC;
	background-color: #D3E4ED;
	padding: 5px;
}
div.credit {
	font-style: italic;
	padding-top: 1em;
	text-align: right;
}

div.creditCenter {
	font-style: italic;
	padding-top: 1em;
	text-align: center;
}


/*highlight*/
div.highlight {
	position: absolute;
	z-index: 100;
}
div.highlight a.yellow {
	display: block;
	background-color: #f5f3cc;
	border: 2px solid #e3e0ac;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
div.highlight a.yellow:hover {
	background-color: #e3e0ac;
	opacity: 0.4;
	filter: alpha(opacity=40);
}
div.highlight a.green {
	display: block;
	background-color: #d5e9d6;
	border: 2px solid #b4d6b7;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
div.highlight a.green:hover {
	background-color: #b4d6b7;
	opacity: 0.4;
	filter: alpha(opacity=40);
}
div.highlight a.blue {
	display: block;
	background-color: #D3E4ED;
	border: 2px solid #ABC6DC;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
div.highlight a.blue:hover {
	background-color: #ABC6DC;
	opacity: 0.4;
	filter: alpha(opacity=40);
}
div.highlight a.invis {
	cursor: default;
	display: block;
}
/* end highlight*/

.popupBorder {
	border: 2px solid #7FA8C9;
	margin: 1em auto;
	width: 100%;
}
.popupBorder td, .popupBorder th {
	padding: 0 1em;
}
.popupTable {
	border: 1px solid #000;
	margin: 1em;
}
.popupTable td, .popupTable th {
 	border: 1px solid #000;
	padding: .5em;
}

#fullHeader {
	padding-top: 13px;
	clear: both;
}
#textArea {
	margin: 0px;
	clear: both;
	padding: 0 0 0 17px;
	overflow: hidden;
}

#pageHeader {
	background-color: #EFEDDE;
	border-bottom: 3px solid #d9d6be;
}
#pageHeader a:link {
	color: #000000;
}
#pageHeader a:visited {
	color:#000000;
}
#pageHeader a:hover {
	color:#000000;
}
#pageHeader a.unitLink {
	font-weight: bold;
}
#breadcrumbs {
	padding: 13px 20px 0px 17px;
}
#sectionTitle {
	color: #646464;
	font-family: "Times New Roman", Times, serif;
	font-size: 1.8em;
	padding: 13px 20px 5px 17px;
}
#pageTitle {
	font-size: 1.3em;
	padding: 0px 20px 8px 17px;
}

#bottomNav {
	clear:both;
	margin: 2em auto;
	padding: 0 0 0 17px;
	text-align: center;
}
a.back, a.next, a.backTop {
	border: 1px solid #0069aa;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	margin: 0px 10px;
	padding: 2px 6px;
	text-decoration: none;
}
a.back {
	background: #0069aa url(../_images/backArrow.gif) left center no-repeat;
	padding-left: 24px;
}
a.next {
	background: #0069aa url(../_images/nextArrow.gif) right center no-repeat;
	padding-right: 24px;
}
a.backTop {
	background: #0069aa url(../_images/topArrow.gif) left center no-repeat;
	padding-left: 24px;
}
a.next:hover, a.back:hover, a.backTop:hover {
	background-color: #FFF;
	color: #0069aa;
}
a.btn, a:hover.btn {
	color:#000;
	background-color: #D3E4ED;
	border: 1px solid #7FA8C9;
	cursor: default;
	display: inline-block;
	margin: 1em;
	padding: .25em 1em;
	text-decoration: none;
}
a:hover.btn {
	background-color: #EBF2F3;
	cursor: pointer;
}

/* styles for footer */
#footer {
	display: none;
}

input, select {
	font-size: 1em;
}

input.submit {
	color:#000;
	cursor: pointer;
	background-color: #D3E4ED;
	border: 1px solid #7FA8C9;
	font-size: 1em;
	padding: 5px 10px;;
}
input.submit:hover {
	background-color: #EBF2F3;
	border: 1px solid #7FA8C9;
}

#contentTop { 
	margin-top: 10px;
	padding: 0px; 
	width: 448px;
	height: 135px;
	overflow: hidden;
	background: url(../_images/red2BG.gif) top left no-repeat;
}
#contentMiddle { 
	padding: 0px; 
	width: 515px;
	height: 145px;
	overflow: hidden;
	background: url(../_images/yellow2BG.gif) top left no-repeat;
}
#contentBottom { 
	margin-bottom: 10px;
	padding: 0px; 
	width: 568px;
	height: 115px;
	overflow: hidden;
	background: url(../_images/green2BG.gif) top left no-repeat;
}
.fakeHR {
	border-top: 3px solid #ABC6DC;
	height: 1px;
	width: 90%;
	margin: auto;
}
#textArea .unitOutlineTitle {
	text-indent: -3.0em;
	margin-left: 3.0em;
	font-family: "Times New Roman", Times, serif;
	font-size: 1.6em;
}
#textArea .mainPageTitle {
	margin-left: 2.0em;
}
#textArea .subPageTitle {
	margin-left: 4.2em;
}
#textArea .subPageUL {
	margin-left: 6em;
	font-weight: bold;
}
#textArea .subPageUL ul {
	margin: 1em 0 1em 1.2em;
	font-weight: normal;
}

div.assessTask {
	background: #FFF url(../_images/atIcon.jpg) left center no-repeat;
	font-weight: bold;
	padding: 20px 65px;
	margin-top: 1em;
}
#copyright {
	text-align: center;
	padding: 1em;
}

/*site links*/
div.rti, div.rtiLine {
	background: #FFF url(../_images/rtiLogo.jpg) left top no-repeat;
	margin: 1em 0;
	padding-left: 77px;
	min-height: 60px;
}
div.rtiLine {
	padding-top: 25px;
	min-height: 35px;
}
div.rtiPlan, div.rtiPlanLine {
	background: #FFF url(../_images/rtiPage.jpg) left top no-repeat;
	margin: 1em 0;
	padding-left: 77px;
	min-height: 88px;
}
div.rtiPlanLine {
	padding-top: 40px;
	min-height: 48px;
}
div.niflLeft {
	background: #FFF url(../_images/NIFL.gif) 12px center no-repeat;
	padding: 10px 0;
	margin: 1em 0;
	padding-left: 80px;
	min-height: 15px;
}
div.ldOnlineLeft {
	background: #FFF url(../_images/ldOnline.jpg) left center no-repeat;
	padding: 10px 0;
	margin: 1em 0;
	padding-left: 80px;
	min-height: 15px;
}
div.ldOnlineTop {
	background: #FFF url(../_images/ldOnline.jpg) left top no-repeat;
	margin: 1em 0;
	padding-top: 41px;
}
div.fcrrTop {
	background: url(../_images/fcrr.gif) top left no-repeat;
	padding-top: 42px;
	margin: 1em 0;
}
div.fcrrLeft {
	background: url(../_images/fcrr.gif) top left no-repeat;
	padding-left: 89px;
	margin: 1em 0;
	min-height: 33px;
}
div.jrfLeft {
	background: url(../_images/justReadFL.gif) top left no-repeat;
	padding-left: 88px;
	margin: 1em 0;
	min-height: 33px;
}
div.jrfLeftBig {
	background: url(../_images/justReadFlorida.gif) left center no-repeat;
	padding-left: 170px;
	margin: 1em 0;
	min-height: 70px;
}
div.kaganLeft {
	background: url(../_images/kagan.gif) left center no-repeat;
	padding: 15px 0 0 100px;
	margin: 1em 0;
	min-height: 37px;
}
div.specConnTop {
	background: #FFF url(../_images/specConn.jpg) left top no-repeat;
	padding: 41px 0 13px 0;
}
div.pbs {
	background: #FFF url(../_images/pbs.gif) left top no-repeat;
	padding: 70px 0 13px 0;
}
div.safeCivil {
	background: #FFF url(../_images/safeCivil.gif) left top no-repeat;
	padding: 70px 0 13px 0;
}
div.fin {
	background: #FFF url(../_images/fin.jpg) left top no-repeat;
	padding: .5em 0 .5em 60px;
}
div.fdlrs {
	background: #FFF url(../_images/fdlrs.jpg) left top no-repeat;
	padding: .5em 0 .5em 60px;
	min-height: 48px;
}
/*end site links*/

/*BEGIN COLOR*/

.blackBorder, .blackBorder td, .blackBorder th { border: 2px solid #000; }
.whiteText, .whiteText td, .whiteText th { color: #FFF; }

.blueBorder, .blueBorder td, .blueBorder th, .blue { border: 2px solid #ABC6DC; }
.greenBorder, .greenBorder td, .greenBorder th, .green { border: 2px solid #b4d6b7; }
.yellowBorder, .yellowBorder td, .yellowBorder th, .yellow { border: 2px solid #e3e0ac; }
.redBorder, .redBorder td, .redBorder th, .red { border: 2px solid #dcabab; }

.blueBG, .blue { background-color: #D3E4ED; }
.greenBG, .green { background-color: #d5e9d6; }
.yellowBG, .yellow { background-color: #f5f3cc; }
.redBG, .red { background-color: #edd3d3; }

.blueDarkBG { background-color: #ABC6DC; }
.greenDarkBG { background-color: #b4d6b7; }
.yellowDarkBG {	background-color: #e3e0ac; }
.redDarkBG { background-color: #dcabab; }

.blueLightBG { background-color: #EBF2F3; }
.greenLightBG { background-color: #edf4ee; }
.yellowLightBG { background-color: #fbfaea; }
.redLightBG { background-color: #f8ecec; }

.borderThin, .borderThin td, .borderThin th { border-width: 1px; }
.borderThick, .borderThick td, .borderThick th { border-width: 3px; }
.noBorder, .noBorder td, .noBorder th { border: none; }

/* END COLOR*/

/* Begin Phomenic Awareness Chart  */
table.arrowChart {
	margin: 1em auto;
}
.arrowChart th {
	text-align: left;
	padding: 0 1em;
	vertical-align: bottom;
}
.arrowChart td {
	border: 1px solid #ABC6DC;
	padding: 1em;
	vertical-align: middle;
}
.arrowChart td.scale { 
	background-image: url(../_images/gradientArrowUp.gif);
	background-position: 0px bottom;
	background-repeat: no-repeat;
	border-top: none;
	border-bottom: none;
}
.arrowChart td.scale { 
	padding: 20px 10px 0px 0px;
}
.arrowChart td.scale.complex.middle { 
	background-image: url(../_images/gradientArrowDown.gif);
	background-position: 0px bottom;
	border-bottom: 1px solid #ABC6DC;
	padding-top: 0px;
}
.arrowChart td.plain {
	border: none;
	background: none;
}
.arrowChart td.scale.bottom { 
	border-bottom: 1px solid #ABC6DC;
}
.arrowChart td.scale.complex {
	background-position: 0px top;
	border-top: 1px solid #ABC6DC;
	border-bottom: none;
}
/*  End Phomenic Awareness Chart */
.gone{
	display: none;
}
.here2{
	display: block;
	border: solid 1px; 
	padding: 5px; 
	margin: 5px auto;
	width: 95%;
	background-color:#EFEFEF;
	height:auto;
}
.here{
	display: block;
	margin: auto;
	width: 100%;
	height:auto;
}
.here3{
	display: inline;
}
/* KUD Arrow Charts*/
.KUDcontainer{
	/* total width:550px; */
	width: 523px;
	background: url(../_images/KUDbg.gif) left top repeat-y;
	padding: 0px 0px 0px 27px;
}
.KUDcontainer ul{
	margin:15px;
}
.KUDgreen {
 	width:194px; 
 	border-top:2px solid #000; 
 	float:left; 
	padding: 5px;
 	overflow:hidden;
	text-align:left; 
	margin-left: 0px;
}
.KUDblue{
	width:194px; 
	border-top:2px solid #000; 
	float:left; 
	padding:5px;
	overflow:hidden;
	text-align:left; 
	vertical-align:bottom;
}
.KUDred{
	width:484px; 
	border:2px #000 solid; 
	background-color:#d8a4a6; 
	text-align:left; 
	padding:5px;
	margin-left: 27px;
}
.KUDgreyArrow {
	float:left;
	width:86px;
}
.KUDarrowHeads {
	width:550px;
}

.reference p {
	line-height:2em;
	margin-left:40px;
	text-indent:-40px;
}