/* CSS Document for Youthhood.org */

body {
	font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
	margin: 0;
	padding: 0; }
	
	#main_layout_table {width:100%;}
	
p {font-size: 0.9em;color: #000000; }

a {
	color: #000099;
	font-weight: bold;
	text-decoration:underline; }

a:visited {	color: #660066; }
a:hover {	color: #FF6633; }
a.white {	color: #FFFFFF; }
a.white:hover {	color: #FF6633; }
a img,:link img,:visited img { border:none; }

ul {line-height: 130%; }

li {
	font-size: 0.9em;
	color: #000000;
	line-height: 130%; }
li ul li{font-size:1em;}
	
/* ul extentions  */

ul.level1 {
	margin:0 0 0 1em;
	padding:0; }
	
ul.level1 li {
	list-style: none;
	margin: .2em 0 0 0;
	padding:0; }
	
dl.level2 {
	font-size:.9em;
	margin:0 0 0 1em;
	padding:0; }
	
dl.level2 dd {	margin:.2em 0 0 1em; padding:0; }
	
dl.level2 dt {
	margin:1em 0 0 0;
	padding:0;
	font-weight:bold; }

dl.level2 dl {font-size:1em;}
dl.level2 dl dt {margin-top:0;}

/* ------------- */

h1, h2, h3, h4 {
	color: #000000;
	margin-top: 2em;
	margin-bottom: .2em; }
	
h1 {font-size: 1.4em;}
h2 {font-size: 1.2em;	line-height: 130%;}
h3 {font-size: 1em; font-weight: bold;}
h4 { font-size: .8em; font-weight: bold; font-style: italic;}

/* Header extentions */
.light {	font-size: 1.1em; }
.lessmargin {	margin-top: .5em;	margin-bottom: .2em; }
h3.lessmargin ul {	margin-bottom: 1.2em; }
.reducedmargin {	margin: 5px 0 5px 0;}

/* ----------------- */

td {	vertical-align: top; }

/* td extentions */
	
td.bottom {	vertical-align: bottom; }
td.middle {	vertical-align: middle; }
td.textblack a {color: #000000; }
td.textblack a:hover {color: #FFFFFF; }

/* ------------- */

/* for user alerts used to draw attention to text*/
.alert, div.alert p, ul.alert li, a.alert{color: #FF0000 !important; font-weight: bold !important;}

.message, .error {position:relative; width:100%; margin:15px 0 0 0; padding:0;}
.message p, .error p, .error ul {
	display:block;
	margin:0 0 0 50px;
	padding: 10px 0 0 0; /*previously a 14px bottom padding was used to seperate objects when more then one occurred in the error/message*/
	font-weight:bold;
	font-size:1.0em ! important;
}
.error li {margin-left:16px;}
.error p, .error li {color:#ff0000;}
.message p {color:#2FBB2F;}
.message img, .error img {
	display:block;
	position:absolute;
	left:0;
	top:0;
	padding: 0;
	margin: 0;
}

/* for required fields to draw attention to text*/
.required {
	font-weight: bold;
	font-size: 0.8em;
	color: #000000;
}

/* a div for update/shutdown notices. Makes things very noticable */
div.update {
	margin: 1em 1em 1em 0;
	padding: 0 .5em;
	border: 2px solid #FF9933;
	background-color:#FFCC33;
	background-image: url(../images/teacherback.gif);
	background-repeat: no-repeat;
	background-position:0px 0px;}
/*
div.update {
	margin: 1em 1em 1em 0;
	padding: 0 .5em;
	border: 2px solid #FF9933;
	background-color: #FFCC99;}
*/

/* What's New vertical box */
.whatsnewbox {
	float:right;
	width:200px;
	margin-top:.6em;
	margin-left:15px;
	background-color: #EFE9B8;
}
h2.mactitle {display:none; text-align:center;}
.whatsnewbox p {font-size: .7em;}
.pcimage {height:31px;}
.whatsnewborder {border-right:8px solid #cc0132; border-bottom:8px solid #cc0132; border-left:8px solid #cc0132; padding:6px;}
.whatsnewNFO {margin-top:6px; font-size:.9em;}
/*\*//*/
	.pcimage {display:none;}
	h2.mactitle {display:block; color:#cc0132; margin-top:0;}
	.whatsnewborder {border-top:8px solid #cc0132; padding-left:0; padding-right:0;}
	.whatsnewContent {color:#000 ! important;}
	.whatsnewContent p {margin:0;}
	.whatsnewContent a {color:#009 ! important;}
	.whatsnewContent a:visited {color:#606 ! important;}
	.whatsnewContent a:hover {color:#f63 ! important;}
/**/

.activities ul, ul.activities {list-style-image: url(../images/content/activity.gif);}
.links ul, ul.links {list-style-image: url(../images/content/link.gif);}
.links .description {display:block;}

/* Activity Box */
.activitybox, .alertbox {width:97%; overflow:hidden; background-color:#FFCC00;}
.activitybox div, .alertbox div {margin:0;}
.abfloatwrap {overflow:hidden; width:100%; height:16px;}
.topleft {
	float:left;
	width:50%;
	height:16px;
	background-image:url(../images/top-left.gif);
	background-repeat:no-repeat;
	background-position:left top;
}
.topright {
	float:right;
	width:50%;
	height:16px;
	background-image:url(../images/top-right.gif);
	background-repeat:no-repeat;
	background-position:right top;
}
.botleft {
	float:left;
	width:50%;
	height:16px;
	background-image:url(../images/bottom-left.gif);
	background-repeat:no-repeat;
	background-position:left bottom;
}
.botright {
	float:right;
	width:50%;
	height:16px;
	background-image:url(../images/bottom-right.gif);
	background-repeat:no-repeat;
	background-position:right bottom;
}
.abcentre {
	padding:0 10px 0 77px;
	background-image:url(../images/head1_1.gif);
	background-repeat:no-repeat;
	background-position:10px 0;
	min-height:58px;
}
* html .abcentre {height:58px;}
.abcentre h3 {margin-top:0px;}
.abcentre .activities {padding-bottom:22px;}
.abcentre h3 {padding-top:5px;}
.abcentre .links {margin:0;}
.abcentre ul {margin-top:10px; margin-bottom:0;}
.activitybox ul {margin-left:0; padding-left:1.5em;}
.activitybox li {margin-top:.5em;}
/*extending the activity box for use as the alert box*/
.alertbox .alerthome h2 {margin-top:0; color:#FF0000;}
.alertbox .alerthome p {margin-top:0; margin-bottom:0;}
.alertbox .abcentre {
	padding-left:65px;
	background-image:url(../images/error.gif);
}

/* Further styles for existing markup */

acronym {cursor:help;}

/* makes text small... seems to be used for "notes" this maybe could use a rename for future flexibility */
.small {font-size: .8em;}

/* set up generic display/hide mechanisms for dynamic css */
.displayFalse, .display0, li.display0 {display:none ! important;}
.displayZipo {display:none;}

/*a generic class to float divs . Remember to clear them for Mozilla etc!*/
.floatRight {float:right;}
.floatLeft {float:left;}
.clear {clear:both;}
.clearLeft {clear:left;}

legend { margin-left: 0; }
form input.hidden {display:inline; margin:0; padding:0;}

/* No-mans-land of unknown or forgotten styles */

.tableheader { font-size: 1.0em; font-weight: bold }
.log { font-size: .7em; color: #CCCCCC; font-weight: bold }
.goto { font-size: 1.8em; color: #FFCC00; font-weight: bold }
.roundrect { font-size: 0.9em; color: #FFFFFF; }
.required {
	color: #FF0000;
	font-size: .7em;
}
.brownbar { font-size: 1.0em; color: #00CC00 }
.formfont { font-size: .6em; margin-top: 0; margin-bottom: 0}
.formlegend { font-size: 1em; color: #000000; font-weight: bold; margin-top: 5px; margin-bottom: 5px; margin-left: 0}
.submenu { font-size: .7em; color: #000000; font-style: italic}
.submenu_table { font-size: .7em; color: #000000; font-style: italic; margin-top: 0px}
.tablep { font-size: .8em; color: #000000; margin-top: 0px; margin-bottom: 0px }
.tablepactivity { font-size: .8em; color: #99CC00; margin-top: 0px; margin-bottom: 0px }

/* ------------------------------------------ */


/* Layout selectors */

#mainnavigation {width:153px; padding-left:22px;}

#youthtitle {	margin:20px 0 0 20px;}

.crumb {
	font-size:.7em;
	color: #3300FF;
	margin:10px 0 10px 0; }

.leftfifteen {	margin:10px 0 0 18px; }
	
.jawsreader {	margin:0 0 0 0; }
	
#lounge_button {
	display:block;
	margin-right:25px;
	margin-top: 25px; }
	
.menu_imgs {
		margin-top: 3px;
		margin-bottom: 3px;
		margin-right: 17px; }

.teacher_lounge {
	margin-top: 30px;
	margin-right: 16px; }
	
#date {
	font-size: .7em;
	color:#000000; }
	
#myh_box {
	margin-top: 30px; }
	
.para_indent {
	text-indent: 1.5em;
	font-size: 0.9em;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 130%;
	width: 90%; }
	
.para_no_indnet {
	margin: 0px;
	line-height: 130%;
	width: 90%; }
	
.para_list {
	line-height: 130%;
	margin-right: 2em;
	margin-left: 2em; }
	
link {
	font-size: 0.8em;
	line-height: 130em;
	margin-top: 0em;
	margin-bottom: 0em; }
	
.link {
	margin-top: 0px;
	margin-bottom: 0.3em;
	font-style: normal; }
	
.areas_activites_l1 {
	line-height: 130%;
	margin-top: 0.2em;
	margin-bottom: .2em;
	margin-left: 1em; }
	
.areas_activites_l2 {
	line-height: 130%;
	margin-top: 0.2px;
	margin-bottom: 0em;
	margin-left: 3em; }

/*these can be deleted after the table form of the activity box is removed*/	
ul.resources, ul.resources li {
	margin:10px 0 10px 8px;
	padding:0; }
ul.resources {
	margin-bottom: 1.8em; }
/*--------------------------------------------------------------------------*/
	
blockquote {
	font-size: .9em;
	line-height: 130%; }

.studentmainmenu { margin-top:8px; display:block;}
	
.cityscape { margin-top:10px; }
/* ---------------- */

/* Login (brown) bar layout selectors */
.logincluster { /**/ }

.logincluster form {
	margin-bottom:0; }
* html .logincluster form {
	margin-left:10px; }
.logincluster fieldset {
	border: 2px;
	border-style:solid;
	/*border-color:#FFFFFF; */
	border-color:#666633; }
.logincluster legend {
	font-size: .6em;
	color:#666633;
	margin:0;
	font-weight: bold; }
.logincluster label {
	font-size:.8em;
	font-weight: bold;
	color:#FFFFFF;
	text-align:left;
	margin:0;
	display: block; }
.logincluster input {
	margin:0;
	font-size:.8em;
	font-weight:normal; }
.logincluster a:link, .logincluster a:visited {
	color:#FFFFFF; }
.logincluster p{margin:0 0 0 10px; color:#FFFFFF;}
.noCookies {margin-left:10px;}
* html .noCookies {margin-top:15px;}

a.forgotpass {
	display:block;
	margin:0 0 16px 15px;
	color:#FFCC00 ! important;
	font-size: .7em;
	font-weight:normal;
	text-decoration:none; }
a.forgotpass:hover {color:#FFFFFF ! important;}
	
a.whyregister {
	font-size:.7em;
	color:#FFCC00 ! important;
	margin-left:15px;
	font-weight:normal;
	text-decoration:none; }
a.whyregister:hover {color:#FFFFFF ! important;}

a.logout {
	display:block;
	font-size: .9em;
	color:#FFCC00 ! important;
	margin-left:15px;
	font-weight:bold; }
a.logout:hover {color:#FFFFFF ! important;}
	
.logincluster a.whyregister:hover, .logincluster a.forgotpass:hover, .rollBased a.logout:hover { color:#FF6633; }
	
.bottomfifteen {
	margin-bottom:15px; }
	
.logincluster .submit {
	display:block;
	margin:10px 0 0 0; }

.demo_awareness {margin:0 0 0 15px; padding:0;}
.demo_awareness p {margin:0; padding:0; font-size:.8em; color:#FFFFFF;}
.demo_awareness a {color:#ffffff;}
#helloshawny {
	font-size: .9em;
	font-weight: bold;
	color:#FFFFFF;
	margin: 7px 0 5px 15px; }
	
p.scenarios {
	border:1px #000 dotted;
	background:#F4F4C1;
	padding:10px 20px 10px 20px;
	margin:10px 25px 10px 25px;}

#localnavigation h2 {font-size: 1.1em;}
#localnavigation {margin:0; padding:0;}
#localnavigation ul {margin-top:5px; margin-left:1em; padding-left:0;}
#localnavigation ul ul {margin-left:2em;}	
#localnavigation ul.activities {list-style-image: url(../images/content/activity.gif);}

/* NAVIGATION */

/*an initial base to hide all special elements, elements will be dynamically overridden in content with display:block;*/
.rollBased .youth, .rollBased .guide, .rollBased .demo, .rollBased .guest {display:none;} 

/*main navigation for guides.dwt template*/
.guidesmenu, .guidesmenu .children {
	list-style:none;
	padding:0;
}
.guidesmenu {
	margin:20px 0 0 17px;
	width:154px;
}
.guidesmenu .children {
	margin:0 0 0 6px;
	width:148px;
}
.guidesmenu li, .guidesmenu .children li {
	/*display:inline;*/
	margin:0;
}
.guidesmenu a, .guidesmenu .children a {
	display:block;
	padding:3px 0 4px 4px;
	text-decoration:none;
	font:.85em Geneva, Arial, Helvetica, sans-serif;
	color:#000;
}
/*.guidesmenu a, .guidesmenu .children a {
	padding-top:3px;
	padding-left:4px;
	text-decoration:none;
	
	color:#000;
}*/
.guidesmenu a {
	margin:4px 0 0 0;
	width:150px;
	/*height:19px;*/
	background-color:#9c0;
	font-weight:bold;
	letter-spacing: .07em;
	word-spacing: 0.2em;
}
.guidesmenu li.firstitem a {
	margin-top:0px;
}
.guidesmenu .children a {
	margin:0;
	width:144px;
	/*height:19px;*/
	background-color:#fc0;
	font-weight:normal;
	letter-spacing:normal;
	word-spacing:normal;
}
.guidesmenu a.currentPage{background:#fff;}
/*.guidesmenu a.currentSection{background:#fc0;} */

.guidesmenu a:hover, .guidesmenu .children a:hover {}
.guidesmenu a:hover {
	background-color:#fc0;
}
.guidesmenu .children a:hover {
	background-color:#9c0;
}

/*for the right sidebar menu cluster*/
.rollBased h1 {margin-top:15px;}
.curriculum-cluster h1 {margin-top:20px;}
.rollBased ul, .curriculum-cluster ul {
	list-style: none;
	margin:0;
	padding:0;
	border: none;
	width:155px;
}
.rollBased ul.whatsnew, .rollBased ol.whatsnew {
	list-style-position: outside;
    list-style-type:disc;
	margin:1em 0 0 0;
	padding-left:2.5em;
	width:auto;
}
.rollbased ol.whatsnew li {list-style-type:decimal;}
.rollBased li, .curriculum-cluster li {display:inline; margin:0; padding:0;}
.rollBased ul.whatsnew li, .rollBased ol.whatsnew li {display:list-item; margin-top:1em;}
.rollBased ul.whatsnew li.whatsnewfirstitem {margin-top:0;}
.rollBased ul a, .curriculum-cluster ul a {display:block; margin:0; padding:0;}
.rollBased ul.whatsnew a, .rollBased ol.whatsnew a {display:inline;}
.curriculum-cluster ul.curriculum {font-size: .9em;}
.curriculum-cluster ul.curriculum a {
	margin-left:10px;
	padding:0 0 8px 8px;
	background-color:#ffcc33;
	color:#000;
}
.curriculum-cluster ul.curriculum a:hover {color:#fff;}
.curriculum-cluster .curriculum-bottom {display:block; margin:0; padding:0;}
.menu-bottom {display:block; margin:0; padding:0;}

.backtotop {
	font-size: 0.7em;
	margin: 3em 0em 0em;
}
.activity {
	margin-top: 0px;
}
.small {
	font-size: .7em;
}
/*hidden from sighted users*/
.visualhidden {
	position:absolute ! important; 
	left:0px ! important; 
	top:-500px ! important; 
	width:1px ! important; 
	height:1px ! important; 
	overflow:hidden ! important;
	border:none ! important;
}