/* Default CSS Stylesheet for a new Web Application project */

BODY {
    BACKGROUND-COLOR: white;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    FONT-WEIGHT: normal;
    LETTER-SPACING: normal;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal
	 color: black;
	 margin-left:10px;
	 margin-top: 10px;
}

BODY, TD {
   FONT-SIZE: normal;
}
#box {
	background-color: #EFFFFC;
	color: #006666;
	padding: 5px 0px 5px;
	width:580px;
	margin:5px 5px 5px 5px;
	}
#content {
	color:#000000;
	position: relative;
	width: 610px;
	margin-left:4px;
	margin-top:4px;
	padding:10px;
	}
#contentsh {
	color:#000000;
	position:relative;
	width: 720px;
	padding:10px;
	}
#contentsm {
	color:#000000;
	position:relative;
	width: 480px;
	margin-left:4px;
	margin-top:4px;
	padding:10px;
	text-align:justify;
	}
#DET {
	background:#FFFFFF url(../images/DETlogo2.jpg) no-repeat;
	color:#000000;
	position:relative;
	width: 580px;
	height:70px;
	margin-left:4px;
	margin-top:4px;
	padding:10px 10px 10px 40px;
	}
	#twocol {
	clear:both;
	width: 100%;
	}
/* 2 uneven columns for learning journal etc */
#content .lefticon {
  	background:#FFF;
  	width: 132px;
  	padding:5px 10px 0 0;
	}
#content .righttext {
	background:#FFF;
	width: 444px;
	float: right;
	text-align:justify;
	padding-top:5px;
	}

/*  */
#contentwrapper{
float: left;
width: 100%;
}	

#leftcontent {
	float: left;
	width: 130px; /*Width of frame div*/
	margin-left: -100%;
	background: white;
	}

#maincontent {
	margin-left: 140px; /*Set left value to WidthOfFrameDiv*/
	}
/* -- */	
/* 2 uneven columns for topic pages info and quote with no scroll bar */
#content .lefttext {
  	width: 375px;
  	margin-top:10px;
  	text-align:justify;
  	padding:5px 5px 5px 5px;
}
#content .rightquote {
  	background:#FFF;
  	float: right;
  	width: 220px;	
  	height: 250px;
	padding-top:15px;
  	text-align:center;
	}
#content .rightquotea {
  	background:#FFF;
  	float: right;
  	width: 220px;	
  	height: 300px;
	padding-top:15px;
  	text-align:right;
	}
#content .rightquoteb {
  	background:#FFF;
  	float: right;
  	width: 220px;	
	padding-top:15px;
  	text-align:right;
	}	
/* -- */
/* 2 even columns for outcomes and further info http://www.wallcandyart.co.uk/  */
#content .leftcol {
  width: 290px;
  padding-top:25px;
}
#content .rightcol {
  float: right;
  width: 290px;
  padding-top:25px;
}
/* -- */
/* 3 columns  for introductory pages */
#threecols {
	clear:both;
	}
#leftquiz {
	float:left;
	width: 103px;
	margin:0;
	padding:0;
	text-align:center;
}
#rightxword {
	float:right;
	width:100px;
	margin:0;
	padding:0;
	text-align:center;
}
#middle {
	/* top, right, bottom, left */
	margin:0 120px 0 103px;
	padding:0;
}
.cleaner {
	clear:both;
	height:1px;
	font-size:1px;
	border:none;
	margin:0;
	padding:0;
	background:transparent;
}

/* -- */
/* 3 equal columns */
#threecols {
	clear:both;
	}
#leftcol {
	float:left;
	width: 180px;
	margin:0;
	padding:0 0 0 5px;
	text-align:left;
}
#rightcol {
	float:right;
	width:180px;
	margin:0;
	padding:0 0 0 5px;
	text-align:left;
}
#middlecol {
	/* top, right, bottom, left */
	margin:0 190px 0 190px;
	padding:2px 0 0 5px;
}
/* --*/
/* two columns for video pop-up */
.leftcolvid {
	width: 350px;
	margin:0;
	padding:0 0 0 5px;
	text-align:left;
}
.rightcolvid {
	float:right;
	width:230px;
	margin:0;
	padding:0 0 0 5px;
	text-align: justify;
}

/* coloured background for popup quotes */
#quote {
	background-color:#ECFFE5;
	padding:5px;
}
#line { /* for pop-ups */
	position:relative;
	width: 480px;
	background:#ffffff url(line_ed.gif) repeat-x;
	padding: 0px 10px 5px 10px;
	font-size:.5em;
}
#nav {
	float:right;
	width:100px;
	background:transparent;
	margin:0px 10px 10px 10px;
	text-align:right;
	}
#siteinfo {
	clear:both;
	position:relative;
	width: 100%;
	background:#ffffff url(line_ed.gif) repeat-x;
	font-size: x-small;
	color: #999;
	padding: 10px 10px 5px 10px;
	}
#siteinfo2 { /* for pop-ups */
	clear:both;
	position:relative;
	width: 620px;
	background:#ffffff url(line_ed.gif) repeat-x;
	font-size: x-small;
	color: #999;
	padding: 10px 10px 5px 10px;
	}
#siteinfo3 { /* for small pop-ups */
	clear:both;
	position:relative;
	width: 480px;
	background:#ffffff url(line_ed.gif) repeat-x;
	font-size: x-small;
	color: #999;
	padding: 10px 10px 5px 10px;
	}
#siteinfo780 { /* for large pop-ups */
	clear:both;
	position:relative;
	width: 740px;
	background:#ffffff url(line_ed.gif) repeat-x;
	font-size: x-small;
	color: #999;
	padding: 10px 10px 5px 10px;
	}
/* padding - top, right, bottom, left */
#topnav {
	position: relative;
	margin : 10px 20px 0px 20px;
	}
#topnav li {
	display : inline;
	float : right;
	}
#topnav li a, #topnav li.on {
	display : block;
	width : auto;
	height : auto;
	text-decoration : none;
	padding : .25em .5em;
	text-align : center;
	font-size:small;
	font-weight: 600;
	border : 1px solid #7BA37B;
	border-style:outset;
	cursor : pointer; /* an opera fix */
	margin : 0 2px;
	color : #FFFFCC;
	background : #fff url(navbut2.jpg) repeat-x top left;
	} 
#topnav li.on {
	color : #ddd;
	background-color : #333;
	background-image : none;
	cursor : default; /* corrects opera fix */  
	border-top : 1px solid #000;
	font-weight: 700;
	font-size: .9em;
} 
#topnav li a:hover {
	background : #777 url(navbuthov2.jpg) repeat-x top left;
	color: #984128;
}
#topnav li a:focus, #topnav li a:active {
	text-decoration : underline;
	color: #fff;
	background: #009;
}

/* table formatting for study hall and maps      http://www.devarticles.com/c/a/HTML/HTML-CSS-and-tables-the-beauty-of-data/6/ and */
/*  http://www.hotdesign.com/seybold/17dothis.html */ /* padding - top, right, bottom, left */
#contentsh  table { 
	border-bottom: 1px dotted #FF9933; 
	border-left: 1px dotted #FF9933;
	width: 100%; 
	}
caption {
 	font-size:100%;
	font-style:italic;
 	border-bottom:1px dotted #0033CC; 
 	padding:5px;
 	text-align:center;
}
#contentsh td { 
	padding: 8px 20px 10px 11px; 
	vertical-align:	text-top;
	border-top: 1px dotted #0033CC; 
	border-right: 1px dotted green;
	font-size:95%; 
	}
TFOOT, THEAD	{
	color: #105172;
	font-size:	100%;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
   	FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
}	
#contentsh TH	{
	color: #105172;
	vertical-align:	text-top;
	border-right: 1px dotted green;
	font-size:	100%;
	font-weight:	bold;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	font-family: Arial, Helvetica, sans-serif;
	padding-top:10px;
}
#tabsum	{
	font-size:.75em;
	}
/* -- */

/* fonts */
h2, h3, h4, h5, h6 {margin-bottom: 0;} 

/* http://www.complexspiral.com/publications/uncollapsing-margins/ */
	
H1, H2, H3, H4, H5, TH, THEAD, TFOOT {
	 color: #238EB2;
}
p {margin: .4em 0 1em;}


H1	{
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-size:	1.8em;
	font-weight:	700;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	line-height: normal;
	font-variant: normal;
	color: #663300;
}	
		
H2	{	
   FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;

	COLOR: #006633;
	font-size:	1.5em;
	font-weight:	700;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
}	
		
H3	{
	FONT-FAMILY: "Comic Sans MS";
	font-size:	1.3em;
	color: #CC6633;
	font-weight:	600;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	line-height: normal; 
}	
#DET h3{
	padding-left:200px;
	color:#CC6633;
	}	
		
H4	{	
   FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;

	font-size:	1.2em;
	color: #663300;
	font-weight:	500;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
}	

h5 {
   FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
	color: #FF9900;
}
		
H5, DT	{	
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:	1em;
	font-weight:	700;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
}	
		
H6	{	
   FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
	font-size:	.8em;
	font-weight:	700;
	font-style:	normal;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
}
	#box p {font-size:12px; margin-left:.5cm; margin-right:.5cm;}		


p {
	font-family: Arial, Helvetica, sans-serif;
	font-size:	.95em;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
}
blockquote {
	font-size:	.95em;
	font-style:italic;
	margin-bottom:.5em;
	text-align:justify;
	}
	
		
TFOOT, THEAD	{
	color: #105172;
	font-size:	medium;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
   FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
}	
		
TH	{	
	color: #105172;
	vertical-align:	baseline;
	font-size:	medium;
	font-weight:	bold;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
	font-family: Arial, Helvetica, sans-serif;
}	

/* links */
a:link, a:visited	{	
	text-decoration:	underline;
	color:	#238EB2;
}

a:active	{	
	text-decoration:	none;
	color:	#333399;
}

a:hover	{	
	text-decoration:	underline;
	color: #105172;
}
/* -- */

/* classes   padding - top, right, bottom, left */

.redbkg {
	background-image:url(bkg_red.gif);
	padding: 5px 0px 5px;
	width:780px;
	margin:5px 5px 5px 5px;
	}
.grnbkg {
	background-image:url(bkg_green.gif);
	padding: 5px 0px 5px;
	width:780px;
	margin:5px 5px 5px 5px;
	}
.orngbkg {
	background-image:url(bkg_orge.gif);
	padding: 5px 0px 5px;
	width:780px;
	margin:5px 5px 5px 5px;
	}
.figure {
	padding: 10px; 
	margin: 0.67em auto; /* needed to support centering of almost-full-width figures */
	border: thin solid silver;
	}
.figure2 {
	padding: 10px; 
	margin: 0.67em auto; /* needed to support centering of almost-full-width figures */
	}
.right { float: right; margin-left: 2%; }

.caption { text-align: center; font-size: x-small;}

.grbold {
	color:#7BA37B;
	font-weight:700;
	margin-top:.5em;
	font-size:100%;
	}
.bio {
	font-size:.9em;
	color:#666666;
	font-style:italic;
	text-align:justify;
	}
.small	{	
	font-size:	xx-small;
	}	
.xsmall {
	font-size:x-small;
	}
.big	{	
	font-size:	x-large;
	}
.breadcrumb {
	color:#FF9900;
	font-size:x-small;
	font-weight:700;
	word-spacing:1px;
	}

.citation {
	font-size: 10px;
	font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
	color: #666666;
	margin:0px 25px 15px 0px;
	text-align:right;
	}
.citation2 {
	font-size: 10px;
	font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
	color: #666666;
	margin:0px 25px 15px 0px;
	padding-right:240px;
	text-align:right;
	}
.emphasis {
	font-style:italic;
	color: #993300;
	font-size:95%;
	}
.highlight {
	background-color:#FFEEC3;
	font-size:95%;
	}	
.instruct {
	color:#FF0000;
	font-size:.9em;
	}
.justified {
	text-align:justify;
	}
.orngbold {
	color:#FF6600;
	font-weight:600;
	font-size:100%;
	}
.redbold {
	color:#CD0000;
	font-weight:600;
	font-size:100%;
	}
	
SMALL	{	
	font-size:	xx-small;
}	

BIG	{	
	font-size:	x-large;
}	
.quote {
	font-size:	.95em;
	font-style:italic;
	margin-bottom:.5em;
	text-align:justify;
	margin-left:20px;
	padding-right:240px;
}

/* -- */	

LI	{	
	list-style-type:	square ;
		font-size: .95em;
}	
UL LI	{	
	list-style-type:	square ;
		font-size: .95em;
}	

UL LI LI	{	
	list-style-type:	disc;
}	

UL LI LI LI	{	
	list-style-type:	circle;
}	
ol	{
	font-size:	.95em;
	margin-top:.5em;
	}

OL LI	{	
	list-style-type:	decimal;
}	

OL OL LI	{	
	list-style-type:	lower-alpha;
}	

OL OL OL LI	{	
	list-style-type:	lower-roman;
}

.list {
list-style-image:url(../images/bullet2_br.gif);
}

.paddinglist {
padding-top:.5em;
}

/* tabbed pages */
.TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 7px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 0.7em sans-serif;
	background-image: url(navbut2.jpg);
	list-style: none;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #999;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}
.TabbedPanelsTabHover {
	background-image: url(navbuthov2.jpg);
}
.TabbedPanelsTabSelected {
	background-image: url(tabselect2.jpg);
	border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}
.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	background-color: #FFF;
}
.TabbedPanelsContent {
	padding: 4px;
}
.TabbedPanelsContentVisible {
}