html, body{   
 	height: 100%;    
	margin: 0;    
	padding: 0;	
	text-align:center;	
	color: #ffffff;	
	font-family: arial, verdana, sans-serif;	
	text-indent: 0em;    
	}

body {	
	background-color: #ffff99;	
	background-image: url('../images/humanity8.jpg');
	background-repeat: repeat;
	background-attachment: fixed;
	}

#container{
    height: auto !important;
    height: 100%;
    min-height: 100%;
	width:57.6em;
	font-size:1em;
	text-align:center;
	margin: 0 auto;
	background-color: #336633;
    }

div#padding {
 		padding: 0 0 45px 0;
 	}


/* Begin CSS Drop Down Menu */

#nav	{
	background: #003300;
	font-size: 0.8em;
	font-family: arial, verdana, sans-serif;
	font-weight:bold;
	width:100%;
	height:2em;
	float:left;
	margin:0;
	margin-top: 0;
	border-bottom: 3px solid #333;
	}		

#nav a	{
	text-align: center;
	display:block;
	height: 1.3em;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
	}


/*this section alters the appearance of the links in different states*/

#nav a:link, #nav a:visited	{  	/* menu at rest */	
	color:#fff;
	font-weight:bold;
	background-color:#003300;
	text-decoration:none;
	}

#nav a:hover						/* menu on mouse-over  */	
	{	
	color:#32ff00;
	font-weight:bold;
	background-color: #004400;
	text-decoration:none;
		}		

#nav a.mainbranch:hover
	 {
	color:#fff;
	background-color:#003300;
	}

#nav a.branch:hover
	 {	color:#fff;
	background-color:#003300;
	}

#nav a:active	/* selected link */
	{
	color:#fff;
	font-weight:bold;
	background-color:#003300;
	text-decoration:none;
		}

/* Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective. */

/* end  */

/*this section is to place the arrow image in the menu*/

#nav a.mainbranch
	{
	background-image: url(images/downarrow.png);
 	background-position: right center;
 	background-repeat: no-repeat;
	cursor: text;
	}	

#nav a.branch
	 {	
	background-image: url(images/rightarrow.png);
 	background-position: right center;
 	background-repeat: no-repeat;
	cursor: text;	/*end arrow placement*/	
	}



#nav ul	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:12em;  	/* width of all menu boxes */
		}


	/* NOTE: For adjustable menu boxes you can comment out the above width rule.
	However, you will have to add padding in the "#menh a" rule so that the menu boxes	will have space on either side of the text  */

#nav li
	{
	position:relative;
	min-height: 1px;		/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom;		/* Sophie Dennis contribution for IE7 */
	margin: 0 0 -1px 0;
	}

#nav ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#nav ul ul ul
	{
	top:0;
	left:100%;
	}

div#nav li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#nav li:hover ul ul,
div#nav li li:hover ul ul,
div#nav li li li:hover ul ul,
div#nav li li li li:hover ul ul
	{
	display:none;
	}
div#nav li:hover ul,
div#nav li li:hover ul,
div#nav li li li:hover ul,
div#nav li li li li:hover ul
	{
	display:block;
	}

/* End CSS Drop Down Menu */

/* Begin left margin side menu */

#sidenav
	{
	margin:0;
	padding:0;
	float:left;
	background-color: #336633;
	width:13em;
	font-size: 0.8em;
	font-weight:bold;
	font-family: Comic Sans MS, arial , sans-serif;
		}

#sidenav ul
	{
	list-style:none;
	width:10em;
	text-align: left;
	}

#sidenav li a
	{
	text-decoration:none;
	padding:2px 4px 4px 2px;
	}

#sidenav a:link, #sidenav a:visited, #sidenav a:active	/* menu at rest */
	{
	display:block;
	width:10em;
	font-size: 1em;
	color:#fff;
	text-decoration:none;
	}

#sidenav a:hover						/* menu on mouse-over  */
	{
	display:block;
	width:10em;
	font-size: 1em;
	color:#99cc00;
	background-color: #336633;
	}

		/* End left margin side menu */


		/* This header, and the images contained within it, is diplayed on all pages  */
#header
	{
    margin: 0;
    padding: 0;
    background: #ffff99;
	width:57.6em;
	text-align: center;
	border-bottom: 3px solid #333;
    }

/* This table displays curriculums */

table.one
	{
	float: left;
	table-layout: auto;
	background:#000;
	padding: 0;
	margin: 40px 0;
	border-width: 0em;
	border-style: ridge;
	border-color: #000000;
	height: auto;
	width: 100%;
	font-family: arial, verdana, sans-serif;
	cursor: default;
	}

th
	 {
	font-weight: bold;
	border: 0em outset #fff;
	padding: 0.5em;
	}

th.main
	{
	text-align: center;	
	font-size:1.5em;
	border: 2.8em outset #336633;
	padding: 0.5em;
	}

th.above
	 {
	text-align: center;
	border-width: 2em 1.5em 2em 1.5em;
	border-style: ridge;
	border-color: #336633;
	padding: 0.5em;
	}	

th.side
	{
	text-align: left;
	border-width: 0.1em;
	border-style: ridge;
	border-color: #fff;
	padding: 0.5em;
	}

th.lessonone
	{
	text-align: justify;
	background-color: #006633;
	}

th.lessontwo
	{
	text-align: justify;
	background-color: #336633;
	}

td.boxone
	{
	text-align: left;
	background-color: #006633;
	border-width: 0em;
	border-style: none;
	border-color: #fff;
	padding: 0.5em;
	}

td.boxtwo
	{
	text-align: left;
	background-color: #336633;
	border-width: 0em;
	border-style: none;
	border-color: #fff;
	padding: 0.5em;
	}

/* End Curriculum Table */

/* Table to display game summaries */

table.two
	{
	float: right;
	table-layout: auto;
	background:#000000;
	padding: 0;
	margin: 0 0 2em 0;
	border-width:0px;
	border-style: ridge;
	border-color: #000000;
	height: auto;
	width: 100%;
	cursor: default;
	}


/* Table to display game summaries ...........on the game pages */
table.three
	{
	float: right;
	table-layout: auto;
	background:#336633;
	padding: 0 0 0 0;
	margin: 20px 10px 20px 0;
	border-width:0px;
	border-style: ridge;
	border-color: #000000;
	height: auto;
	width: 80%;
	cursor: default;
	}

th.gamename
	{
	text-align: center;
	background-color: #336633;
	font-size:2em;
	border: 0;
	padding: 1em;
	}

th.header
	{
	text-align: center;
	background-color: #006633;
	font-size:1.1em;
	border: 3px outset #336633;
	padding: 0.5em;
	}


th.leftcol
	{
	text-align: left;
	vertical-align: top;
	padding: 0.5em;
	background-color: #006633;
	}

td.rightcol
	{
	text-align: justify;
	padding: 0.5em;
	background-color: #006633;
	}

/* This is used on the 'games home' page */
td.singlecol
	{
	text-align: left;
	padding: 2em 1.5em 10em 1.5em;
	background-color: #336633;
	}

/* End Table to display game summaries */


/* Table used to diplay buttons for different ability levels of topic*/


table.four
	{
	float: center;
	table-layout: auto;
	background:#336633;
	padding: 0 10em 0;
	margin: 20px 10px 20px 0;
	border-width:0px;
	border-style: ridge;
	border-color: #000000;
	height: auto;
	width: 100%;
	cursor: default;
	}


th.buttons
	{
	text-align: center;
	background-color: #006633;
	font-size:1.1em;
	border: 3px outset #336633;
	padding: 0.5em;

	}
table.four a:link
 {
	background: none;
	text-decoration:none;
	color:#fff;
	}

table.four a:hover
 {

 	text-decoration: none;
	color: #00FF00;
	}

/* .....................End Table .................*/
span
	{
	width:1.1em;
	font-size:3em;
	font-family:"Grunge SF", Helvetica, sans-serif;
	line-height:1em;
	}

/* General wide margin text paragragh */

p
	{
	text-align: justify;
	padding:1em 1em;
	margin: 2px 1px;
	background-color: #336633;
	}

/* General wide margin text paragraph with a different colour background */

p.two
	{
	text-align: justify;
	padding:1em 1em;
	margin: 2px 1px;
	background-color: #006633;
	}

/* This paragragh is used on game pages.
 it has a wide marginto accommodate for the left margin menu. */

p.leftmargin
 	{
	text-align: justify;
	padding:1em 1em;
	margin: 1em 1em 1em 12em;
	background-color: #336633;
	}

/* This paragragh is used to tell Mozialla in into displaying a gap between blocks, such as tables. */

p.hidden
 {
	color: #336633;
	}

/* This displays images in the top center of the context area.  Usually for large images */

img.displayed
	 {
    display: block;
	border:0;
    margin: 2em auto;
 	}

/* Active in the table region, and partly in the footer region. could clean this up a bit later. */

 a:link
 {
	background: none;
	text-decoration:none;
	color:#ccff66;
	}

 a:visited
 {
	background: none;
 	text-decoration:underline;
	color:#ccff33;
	}

 a:active
 {
	background: #ffcc00; 
	text-decoration: none;
	color: #000;
	}

 a:hover
 {
	background: #ffcc00;
 	text-decoration: none;
	color: #000;
	}

/* Active on the terms and conditions page. 
 Also affect the postion of the drop down in the top menu.  why?  check it out and fix it! */

ul
 {
	margin: 0em;
	padding: 2em;
	text-align:justify;
	list-style-type: circle;
	font-weight: normal;
	}

li
 {
	margin: 0em 0em 0.2em 0em;
	padding: 0em;
	font-weight: normal;
	}

/* Active on the games pages.  Accommodates for the left naviation menu */

ul.leftmargin
 {
	margin: 1em 1em 1em 11em;
	padding: 2em;
	text-align:justify;
	list-style-type: circle;
	font-weight: normal;
	}

/* Active on the games pages.  Fits inside the table for the new format*/

ul.gametable
 {
	margin: 1em 1em 1em 1em;
	padding: 2em;
	text-align:justify;
	list-style-type: circle;
	font-weight: normal;
	}
/* Active on the lesson plan.  Indents information */

ul.leftmargintwo
 {
	margin: 1em 6em;
	padding: 2em;
	text-align:justify;
	list-style-type: circle;
	font-weight: normal;
	}

/* The footer is displayed on all pages */

#footer
	{
    margin: auto;
    height: 90px;
	width:82.2em;
    padding: 10px 0px;
    background: #ffff99;
    color: #000000;
	text-align:center;
	font-size:0.7em;
	border-top: 3px solid #333;
      }

#footer a:link
	{
	color:#000000;
	}

#footer a:visited
{
	color:#000000;
	}

#footer a:hover
	{
	background:#666633;
	}