/* CSS Document */

*  {
	margin:0;
	padding:0;
}

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: black;
	/* decimal fontsize fixing font resizing bug in IE5/6 */
	font-size : 100.01%;
	/*background-color: #336699; */
	background: #336699 url(../images/backgrounds/mmaTop.gif) no-repeat center top; 
	min-width: 990px;


}

h1,h2,h3, h3 a, h4, h5 {
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-weight : bold;
}

h3, h3 a{
	font-size:16px;
}	

 h3 a:hover {
	color: #FFCC33;
}

h1 strong,h2 strong,h3 strong {
	color: #ffcc33;
}

a {
	color: #004276;
	font-size: 10.5px;
	/*letter-spacing: -0.075em; */
	/*color: #336699; */
	font-weight: bold;
	text-decoration: none;
}

p, ul {
	font-size: 10px;
}

a:hover {
	color: #CA0002;
	/*color: #336699; */
	text-decoration: none;
}

form {
	margin:10px 0 5px 0;
	padding: 5px 0 0 0 ;
}

fieldset {
	border:none;
}

form img {
	
}

input.searchField {	
	width:260px;
	margin: 0 0 5px 0 ; 

}

/*---------------------------- RULES FOR BOX -----------------------------*/


.box {
	margin: 0 0 10px 0; 
	padding: 9px 3px 10px 8px;  
	border: 1px solid #6d6c6c;
}

.box p {
/* HACK INCORPORATED TO STOP PEEKABOO BUG IN IE */
	 position:relative; 
	margin-top:5px;
	margin-bottom: 8px;
}

.box h3 {
	margin-left:0;
	margin-bottom: 20px;
	/* HACK INCORPORATED TO STOP PEEKABOO BUG IN IE */
	 position:relative; 
}

.box h4 a {
/* HACK INCORPORATED TO STOP PEEKABOO BUG IN IE */
	position:relative; 
	font-size: 14px;
	/* IF YOU SET A BORDER FOR h4 and h4 a THEN THE BORDER WILL APPEAR TWICE UNLESS IN A LIST???? */ 
	line-height:12px; 
	margin:0;
}

.box h4, .box h5 {
	color: #000000;   
}

.box h5 {
	font-size: 13px;
	/* HACK INCORPORATED TO STOP PEEKABOO BUG IN IE */
	position:relative;
	clear:both;   
}

/* IMPORTANT: NOTE THAT IF THE COLOR OF h4 IS CHANGED FROM STANDARD a THEN HOVER SET FOR a (a:hover) NO LONGER WORKS */
.box h4 a {
	color: #336699;
	border: none; 
}

.box h4 a:hover {
	color: #ca0002;
}

/* ---------------------------- BOX LIST RULES ----------------------------------*/
.box ul  {
	
	/* CHECK WHAT font-size:12px; DOES PROBABLY NOTHING !!!*/
	font-size:12px;
	list-style-type:none;
	margin:0;
	padding:0;
	/* HACK INCORPORATED TO STOP PEEKABOO BUG IN IE */
	position:relative;
	/* border: 1px solid #ff0000; */
	/* margin: 0 0 5px 6px; */
}

.box ul a {
	display:block; 
	background: #fff url(../images/backgrounds/checkbox2.gif) no-repeat -20px 0px ;
	/* ZEROING OF VERTICAL MARGINS STOPS THE BOXES FROM SHIFTING UPWARDS ON a:hover */
	margin: 0 0 0 -5px;
	padding: 2px 0 3px 14px;
	/* ADDITION OF HEIGHT ENABLES display:blcok TO MAKE WHOLE BOX ACTIVE IN IE6 */
	height:14px; 
	/* ADDITION OF LINE HEIGHT FIXES EXTRA PADDING IN IE6 */
	line-height:14px; 
	 
	border: 1px solid #fff;  
}

.box ul a:hover {
 border: 1px solid #CCC; 
}


.box ul a:visited {
 background-position:  0px 0px;
 /* border: 1px solid #fff; */
}

.box  li {
	/* SETTING li TO display:inline REMOVES THE WHITESPACE MARGIN BUG AND REMVOVES EXTRA MARGINS
	   INSTEAD OF HAVING TO MANUALLY REMOVE WHITESPACE FROM <ul> HTML DOCUMENT */

	display:inline; 



}
	
#wrapper {
	width : 982px;
	/* MARK ADJ */
	 min-width : 800px; 
	 margin: 0 auto; 
	text-align: left;
	/* border: 1px solid #ff0000; */
}

#branding {
		/*border: 1px solid transparent;  */
		position:relative;
		/*border: 1px dotted #fff; */
		 height:81px; 
		/* IMPORTANT NOTE/ISSUE: It seems to be important to specify a height for the #branding DIV
		otherwise there is a DEFAULT PADDING (?) at the bottom even though no padding exists. This
		creates a gap between the #branding DIV and the #mainNav DIV
		IT ONLY WORKS PROPERLY IF A BORDER IS SET (and made TRANSPARENT!!
		The alternative is to set a negative margin-bottom */
		
		/* HEIGHT SEEMS TO MAKE NO DIFFERENCE TO IE6 OR TO SAFARI BUT DOES TO FIREFOX */
		/* margin-bottom:-26px; */ 
		
	/* Another alternative maybe to set the position of the #branding DIV RELATIVELY??? */

}


#branding h1 {
	width:972px;
	position:absolute;
	left:10px;
	top:20px;
	font-size: 36px;
	margin:0;
	/* border: 1px solid #fff; */
}

#branding h2 {
	width:972px;
	position:absolute;
	right: 10px;
	top:22px;
	font-size: 28px;
	margin:0;
	text-align:right;
	/* border: 1px solid #ccc; */
}


#branding strong {
	color: #ffb521; 
}
#branding h1 strong {
	font-size: 1.3em;
}

#mainNav {
	/* border: 1px solid #fff; */
	text-transform:uppercase; 
	margin-bottom: 35px;
}

#mainNav em {
	text-transform:lowercase; 
}


#mainNav ul {
 margin:0;
 padding:0;
	
		 
}

#mainNav li {
	display:inline;
	float:left;
	width: 160px;
}

#mainNav ul a {
 	display:block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff; 
	/* border: 1px solid #fff ; */
	background: transparent url(../images/backgrounds/navButtonRollBase.gif) no-repeat -300px 0px;
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom:1px;
	padding-top:2px;
	text-align:center;
	line-height:15px;
	height:15px;
	/* padding-top: 3px; */
	margin-left:20px;


}

#mainNav ul a:hover{
	background-position: center top;
	color: #fff; 
	 /*border: 1px solid #00ff00;*/ 
; 

}

#siteOutline  {
/* border: 1px dotted #fff; */
	margin:18px 0 15px 0;
	text-align:right;
}

#siteOutline h3  {

	 font-size: 12px; 
}

#contentWrap {
	/* ISSUE WITH POSTIONINING BACKGROUND IMAGE
	1. CANNOT vertically position background image if set to tile vertically using repeat-y (tile will start at 0 vertically).
	2. CANNOT vertically position a background image if DIV height not set AND/OR height of DIV is LESS THAN the height of the background image?????????????????????
	
	
	*/
	
	
	
	margin-top:10px;
 	border: 1px solid #fff;
	background: #000 url(../images/backgrounds/content_ground7.gif) no-repeat; 
	/* background-position: 4px 16px;
	/* NOT DEFINING A WIDTH ON DIV SHOULD STOP BOX MODEL PROBLEMS USING A PADDING
	LEAVE OUT FOR NOW _ USE MARGINS IN CONTENT BOXES  */
	padding: 14px 12px 8px 12px; 
	
}

* html #contentWrap {
	background-position: 1px 1px;
}

#sideContent {
	width:207px;
	float:left;
	margin:0 8px 0 0;
 
	/*border: 1px dotted #000; */
	color: #000;
}

#mainContent  {
	width: 456px;
	float:left;
	margin:0 8px 0 0;
	/* border: 1px dotted #000; */
	color: #000;
}

#secondaryContent {
	width: 277px;
	float:left;
	/*border: 1px dotted #000; */
	margin:0;
	color: #000;

}



/* -------------------------- GRAPHIC LIST ---------------------*/
ul.graphicList {

}




.box ul.graphicList  a {
	display:block; 
	background: none ;
	margin:0;
	padding: 0 0 3px 0;
	border: none;
 
}

.box ul.graphicList  a:hover {
	display:block; 
	background: none ;
	margin:0;
	padding: 0 0 3px 0;
	border: none;
 
}

ul.graphicList li {

	display:inline;

}



#audio p, #image p {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 	color: #919090;
	font-size:11px;
	text-align:right; 
	margin-right:8px;
/* IE6 SPECIFIC AS TEXT APPEARS IN SAFARI ETC BUT IS LOST OUTSIDE THE BOX TO THE RIGHT OF FLOATED IMAGES */
	clear:both;
}

/* --------------------------- SET FONT SIZE FOR (SMALLER) LIST GREY TEXT ---------------------*/
p.sideText {

	font-family: Arial, Helvetica, sans-serif;
	color: #919090;
	font-size:9px;
	font-weight:bold;
	line-height:14px;
	/* ADDED EXTRA BOTTOM MARGIN AND PADDING TO GET NEXT LIST ITEM/IMAGE TO DROP DOWN  */
	margin:0 1px 7px 0;
	padding:0 0 5px 0;
	/* border: 1px solid #000; */
}

/* MAKE THE FONT SIZE SMALLER FOR MAIN SECTION GREY SIDE TEXT ONLY ON WIN IE6 */
* html p.sideText {
	font-size:9px;
}
/* -----------------------------------------------------------------------------------------------*/


/* --------------------------- SET FONT SIZE FOR (LARGER) MAIN SECTION LIST GREY TEXT ---------------------*/
#mainSection p.sideText {
    font-size:11px;
	margin:0 1px 7px 0;
	padding:0 0 10px 0;
}

/* MAKE THE FONT SIZE SMALLER FOR MAIN SECTION GREY SIDE TEXT ONLY ON WIN IE6 */
* html #mainSection p.sideText {
	word-spacing:-1px;
}
/* -----------------------------------------------------------------------------------------------*/



#library h3, #library h3 a, #lessons h3, #lessons h3 a, #e-learning h3 a, #activities h3, #activities h3 a {
	font-size: 12.5px;
	margin-left:-2px; 
	margin-right:-7px; 

}

#library h3, #library h3 a {
	margin-left:-3px;
}


.box p.rightText {
	text-align:right;
	clear:both;
	margin: 0 0 0 0;
  /* border: 1px solid #6d6c6c; */
}

#sideContent .box {
	background: #fff url(../images/backgrounds/box_ground_sm.jpg) no-repeat 1px 1px;
}

* html #sideContent .box {
	background-position: 2px 2px;
}

#mainContent .box {
	background: #fff url(../images/backgrounds/box_ground.jpg) no-repeat 1px 1px;
}

* html #mainContent .box {
	background-position: 2px 2px;
}

#mainContent #mainSection {
	background: #fff url(none);
	
}
/* TAKEN OVER BY .box h2 a 
#mainSection h2 a {
	font-weight : bold;
	font-size : 36px;
 	color: #336699;
	

} */

#mainContent #mainSection ul {
	list-style:disc;
	font-size : 10px;


}

#secondaryContent #audio {
	background: #fff url(../images/backgrounds/audio_ground.jpg) no-repeat 1px 1px;
}

#secondaryContent #video {
	background: #fff url(../images/backgrounds/video_ground.jpg) no-repeat 1px 1px;
}

#secondaryContent #image {
	background: #fff url(../images/backgrounds/image_ground.jpg) no-repeat 1px 1px;
}

#secondaryContent #document {
	background: #fff url(../images/backgrounds/doc_ground.jpg) no-repeat 1px 1px;
}

* html #secondaryContent #audio, * html #secondaryContent #video, * html #secondaryContent #image * html #secondaryContent #document { 
	background-position: 2px 2px;
}

img, #mainImage {
	/* border: 1px solid #000; */
	float:left;
	border:none;
}

/*  RIGHT MARGIN DETERMINES MARGIN FROM FLOATED IMAGES TO HEADER AND TEXT */
img {
	margin:0 12px 5px 0;
}

#mainImage {
	margin:8px 10px 7px 3px;
	border: 1px solid #000; 
}

/* --------------------------SETTING MARGIN FOR HORIZONTAL IMAGES ---------------------------*/
#image img, #audio img{
	margin:10px 4px 15px 0;
}

/* ??????????????????????????? ONE OF HEADINGS NOT APPEARING AFTER IMAGES ??????????????????????
	?????????????????????????? THIS WILL FIX IT BUT NOT SURE WHY ??????????????????????????????? */
#image h4 {
	clear:both;
}

#audio img, #image img  {
	padding: 0 0 2px 0;
	border-bottom: 2px solid #fff;  
}

#audio a:hover img, #image a:hover  img{
	border-bottom: 2px solid #ff0000; 
 }

 #library img{
	margin:4px 8px 10px 0;
}

/* NOTE THAT IF THE COLOR OF h2 a IS CHANGED FROM a DEFAULT, THEN THE a:hover NO LONGER APPLIES */
.box h2, .box h2 a {
	/* border: 1px solid #000; */
	font-size : 19px;
	margin: 5px 0 5px 0 ;
	/* color: #004276; */
}


.clear {
/* FOR SOME REASON THIS LAST CLEARING BOX NEEDS TO HAVE BG COLOR SET
	NOT SURE WHY */
	
	clear:both;
	/* REQUIRED BY IE6 SO THAT WHITE BACKGROUND OF FOOTER BOX DOES NOT "BLEED" */
	position:relative;

}

#credits {
	background: #fff url(none);
	margin:0;
}

#credits p img {
	display:inline;
 
}

#credits p {
	padding-top:10px;
 	clear:both; 

}


#credits ul  {
	float:left;
	margin:0;
	padding:0;
	padding-bottom:10px;
}

/* MUST BE SET FOR IE6 */
#credits ul a {
	display:inline;
}

/* MUST BE SET FOR IE6 */
#credits li {
	float:left;
	display:inline;

	
}

#footer {
	text-align:right;
	clear:both;
	margin: 5px 0 5px 0;
}

#footer p {
	font-size: 9px;
		padding:0;
	margin:0;
}

#footer a {
	color: #fff;
	font-size: 10.5px;
	/*letter-spacing: -0.075em; */
	/*color: #336699; */
	font-weight: bold;
	text-decoration: none;
}

#footer a:hover {
	color: #FFCC33;
	/*color: #336699; */
	text-decoration: none;
}