html
{
	height: 100%; 
	margin: 0 0 1px 0;
	padding:0;
}

body
{
	background-color: #334e46;
	padding:0;
	margin:0;
	font-family: Verdana, Arial, Helvetica, Sans Serif;
	font-size: 85%;
}

#page
{
	border: 1px solid white;
	width: 760px;
	margin: 25px auto 0 auto;
	padding: 15px 0 120px 0;
	background: #5B8F36 url(../graphics/grass.gif) bottom center no-repeat;
}

#headerbar
{
	width: 100%;
	padding-bottom: 22px;
}

#logo
{
	width: 180px;
	height: 116px;

	float: left;

	background: #5B8F36 url(../graphics/bunja_logo.gif) center center no-repeat;

	margin-right: 15px;
}

#logo a
{
	display: block;
	width: 180px;
	height: 116px;
}

#banner
{
	width: 540px;
	height: 116px;
	float: left;

	background: #5B8F36 url(../graphics/banner.gif) center center no-repeat;
}

#contentbar
{
	width: 100%;
	clear: both;
	
    min-height: 485px;
}

#content
{
    display:inline; /* IE double margin float bug */ 
    float:left;
	width: 400px;
    margin-left: 195px; /* overall width of nav bar */
    margin-right: 15px;
}

#nav
{
	width: 180px;
	height: 530px; /* important: ensures that the min page height such that demo link isn't obscured */
	margin-left: -610px;
	margin-right: 15px;
	float: left;
}

#feature
{
	width: 140px;
	float: left;
}

#nav ul
{
	margin: 0 0 1.5em 0;
	padding: 0;
	list-style: none;
}

#nav ul li
{
	margin: 0;
	padding-left: 20px;	
}

#nav ul li a
{
	display: block;
	height: 30px;
}

/*
#nav ul li a:focus
{
	border-left: 3px solid #FADE5E;
}
*/

#nav ul li a.nav-home
{
	background: #5B8F36 url(../graphics/home_nav.gif) top left no-repeat;
}

#nav ul li a.nav-about
{
	background: #5B8F36 url(../graphics/whatis_nav.gif) top left no-repeat;
}

#nav ul li a.nav-buy
{
	background: #5B8F36 url(../graphics/buy_nav.gif) top left no-repeat;
}

#nav ul li a.nav-demo
{
	background: #5B8F36 url(../graphics/demo_nav.gif) top left no-repeat;
}

#nav ul li a.nav-game
{
	background: #5B8F36 url(../graphics/game_nav.gif) top left no-repeat;
}

#nav ul li a.nav-schools
{
	background: #5B8F36 url(../graphics/forschools_nav.gif) top left no-repeat;
}

#nav ul li a.nav-howtoplay
{
	background: #5B8F36 url(../graphics/howto_nav.gif) top left no-repeat;
}

#nav ul li a.nav-topics
{
	background: #5B8F36 url(../graphics/topics_nav.gif) top left no-repeat;
}

#nav ul li a.nav-certificates
{
	background: #5B8F36 url(../graphics/certificates_nav.gif) top left no-repeat;
}

#nav ul li a.nav-specifications
{
	background: #5B8F36 url(../graphics/specs_nav.gif) top left no-repeat;
}

#nav ul li a.nav-hints
{
	background: #5B8F36 url(../graphics/hints_nav.gif) top left no-repeat;
}

#quotes
{
	width: 180px;
	height: 130px;
	padding-left: 10px;
}

#quotes .quote
{
	display: none;
	height: 130px;	
	background-position: top left;
	background-repeat: no-repeat;
}

#quotes .quote span
{
	position: absolute;
	left: -3000px;
}

#feature ul 
{
	list-style: none;
	padding: 0;
	margin: 0;
}

#feature ul li
{
	
}

#feature ul li a.feat-demo
{
	display: block;
	width: 134px;
	height: 180px;
	background: #5B8F36 url(../graphics/bunja_demo.gif) top center no-repeat;
}

#feature ul li a.feat-game
{
	display: block;
	width: 134px;
	height: 180px;
	background: #5B8F36 url(../graphics/bunja_game.gif) top center no-repeat;
}

#feature ul li a.feat-buy
{
	display: block;
	width: 134px;
	height: 180px;	
	background: #5B8F36 url(../graphics/buy_bunja.gif) top center no-repeat;	
}

#feature ul li span.feat-warning
{
	display: none;
	width: 134px;
	height: 180px;	
	background: #5B8F36 url(../graphics/warning.gif) center center no-repeat;	
}

p
{
	color: white;
	font-family: Verdana, Arial, Helvetica, Sans Serif;
	font-size: 90%;
	margin: 0 0 1em 0;
}

ul li, ol li
{
	color: white;
	font-family: Verdana, Arial, Helvetica, Sans Serif;
	font-size: 90%;
	margin-bottom: 1em;	
}

#footerbar
{
	text-align: center;
	padding: 0 0 50px 0;
	margin: -130px 0 0 0;
}

#footer
{
	width: 760px;
	margin: 0 auto;
	padding: 100px 0 0 0;
	text-align: center;
}

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

#footer ul li
{
	display: inline;
	color: #fee25f;
	font-family: Verdana, Arial, Helvetica, Sans Serif;
	font-size: 80%;	
}

#footerlinks
{
}


/**
 * General Layout Elements
 */

.columns
{
}

.column40
{
	float: left;
	padding: 0;
	width: 40%;
}

.column50
{
	float: left;
	padding: 0;
	width: 50%;
}

.column60
{
	float: left;
	padding: 0;
	width: 60%;
}

.clear
{
	overflow: hidden;
	clear: both;
	height: 1px;
	margin: -1px 0 0 0;
	font-size: 1px;
}

/**
 * Text Styles
 */
a
{
	color: #fee25f;
	text-decoration: none;
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 0.75em 0;
	padding: 0;
	
	font-family: Verdana, Arial, Helvetica, Sans Serif;
	
	color: #fff;
}

h1
{
	font-size: 120%;
}

h2
{
	font-size: 110%;
}

h3
{
	font-size: 105%;
}

h4
{
	font-size: 95%;
}

h5
{
	font-size: 85%;
}

h6
{
	font-size: 80%;
}

h1.pageheading
{
	font-size: 135%;
	margin: 0 0 0.25em 0;
}

/**
 * Widgets
 */

/* Breadcrumbs */

#breadcrumbs 
{
	margin: 0 0 1em 0;
	width: 100%;
	color: #ffec52;
} 
 
div#breadcrumbs ul.breadcrumbs 
{
	font-size:80%;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:  0 0 0 0.25em;
	padding: 0;
}

div#breadcrumbs ul.breadcrumbs li 
{
	display: inline;
}

div#breadcrumbs ul.breadcrumbs li a 
{
	text-decoration: none;
	background: transparent url(../graphics/breadcrumb-bullet.gif) bottom right no-repeat;
	padding-right: 18px;	
}

div#breadcrumbs ul.breadcrumbs li a:hover 
{
	border-bottom: 1px solid #ffec52;
}

/* Quote boxouts */

div.quoteright
{
	float: right;
	width: 25%;
	padding: 2px;
}

/* Teacher tip */

div.tipright
{
	float: right;
	width: 160px;
	padding: 30px 0 0 0;	
	background: #5B8F36 url(../graphics/teachertips.gif) center top no-repeat;
	font-size: 95%;
}

div.tipright p, div.tipright ul li
{
	color: #334e46;	
	margin: 0 13px 10px 12px;
}

div.tipright a
{
	color: #334e46;
	text-decoration: underline;
}

/* Certificate form box */
.certbox
{
	width: 401px;
	height: 110px;
	padding: 55px 0 0 0;
	background: #5B8F36 url(../graphics/certificateBG.jpg) top center no-repeat;	
	margin: 1em 0 1em 0;
}

.certbox div.name
{
	display: inline; /* IE double margins bug */
	float: left;
	margin: 0 0 1em 60px;
}

.certbox div.skill
{
	display: inline; /* IE double margins bug */	
	float: left;
	margin: 0 0 1em 45px;	
}

.certbox div.submit 
{
	width: 100%;
	clear: left;
	text-align: center;
	margin: 0;	
}

.certbox div.submit input
{
	margin: 0 auto;
}

.certbox div label
{
	display: block;
}

.certboxsubmit
{
	width: 175px;
	height: 30px;	
}

/* Buy page bars and form */

table.basket
{
	width: 45%;
	float: right;
	border: 3px solid #F0F0F0;
	font-size: 90%;		
}

table.basket tr th
{
	text-align: left;
	background-color: #F0F0F0;
	padding: 0.1em 0.25em; 
}

table.basket tr td
{
	text-align: left;			
	background-color: #F0F0F0;
	padding: 0.1em 0.25em;		
}						

table.basket tr td.checkout
{
	background-color: #F0F0F0;	
}

table.basket tr td.checkoutwhite
{
	background-color: #FFF;	
}

table.basket tr td.checkoutwhite form
{
	float: left;
}

table.basket tr td.checkout form
{
	float: left;
}

table.basket tr td.checkout p.heading
{
	font-size: 90%;
	color: black;
}

table.basket input
{
	padding: 0.1em 0.25em;
}
			
input.invalid
{
	border: 1px solid red;
	color: red;
}

div.buybar
{
	border: 1px solid #275953;
	padding: 0.5em;
	margin-bottom: 1em;
	height: 100%;
}

div.buybar .content
{
	float: left; 
}			

div.w45
{
	width: 45%;
}

.alignright
{
	text-align: right;
}

div.tabbedpanel ul.tabs 
{
	list-style: none;
	margin: 0;
	padding: 0;
	color: black;
	border-top: 1px solid #5B8F36; /* fix IE layout bug */
}

div.tabbedpanel ul.tabs li.tab
{
	position: relative;
	top: 1px;			
	float: left;
	margin: 0 0.5em 0 0;
	cursor: pointer;
	background-color: #bde5d8; 
	border-width: 2px 2px 0 2px;
	border-style: solid;
	border-color: #53817b;
	padding: 0.25em 0.5em;					
}

div.tabbedpanel ul.tabs li.tab span
{
	color: black; 			
}

div.tabbedpanel ul.tabs li.currenttab
{
	position: relative;
	top: 2px;
	background-color: #cfeee4;
	border-width: 2px 2px 0 2px;
}

div.tabbedpanel ul.tabs li.currenttab span
{
	font-weight: bold;			
}			

div.tabbedpanel div.tabcontents
{
	clear: both;
	background-color: #cfeee4;
}

div.tabbedpanel div.tabcontents p, div.tabbedpanel div.tabcontents ul li, div.tabbedpanel div.tabcontents h1, div.tabbedpanel div.tabcontents h2, div.tabbedpanel div.tabcontents h3, div.tabbedpanel div.tabcontents h4, div.tabbedpanel div.tabcontents h5, div.tabbedpanel div.tabcontents h6
{
	color: black;
}
			
div.tabbedpanel div.tabcontents div.tabcontent
{
	border-right: 2px solid #275953;			
	border-bottom: 2px solid #275953;
	border-top: 2px solid #53817b;
	border-left: 2px solid #53817b;								
	display: none;
	padding: 1em 0.5em 0.5em 1em;
}

div.tabbedpanel div.tabcontents div.currenttabcontent			
{
	display: block;
}

/* Misc layout */

.floatleft
{
	float: left;
	margin-right: 1.5em;
}


.floatright
{
	float: right;
	margin-left: 1.5em;
}

.centertext
{
	text-align: center;
}
	
.clearboth
{
	clear: both;
}

/**
 * Tables 
 */
div.skilllevels
{
	font-size: 85%;
}
	
div.skilllevels table tr th
{
	padding: 0.25em;
	background-color: #ffec52;
} 

div.skilllevels table tr td
{
	padding: 0.25em;	
	background-color: #FFFAD1;
}

/* General data */

div.data
{
	font-size: 85%;
	border: 1px solid #d0d0d4;
	padding: 2px;
}

div.data table 
{
	width: 100%;
}

div.data table tr th, div.data table tr td
{
	margin: 0.25em;
	padding: 0.25em;
	text-align: left;
}

div.data table tr th
{
	color: black;
	background-color: #ffec52;
}

div.data table tr td 
{
	color: black;
	background-color: #cfeee4;
}

/* Topics data */

table.topics tr th, table.topics tr td
{
	font-size: 80%;
	margin: 0.25em;
	padding: 0.25em;
}

table.topics tr th
{
	background-color: #FFEC52;
	cursor: pointer;
}		

table.topics tr td
{
	background-color: #cfeee4;
}				

table.topics tr.odd td
{
	background-color: #eaf9f4;
}

.clickable
{
	cursor: pointer;
}	

#filteroptions h5
{
	
}

#filteroptions label
{
	cursor: pointer;
}

/**
 * Forms
 */
form.wwform
{
	width: 500px;
}

div.wwgrp
{
	clear: left;
}

div.wwgrp br
{
	display: none;
}

div.wwerr
{
	clear: left;
	width: 25%;
		
	margin: 0 0.75em 0 0;
	padding: 0.25em;	
	
	font-size: 85%;
	
	color: red;	
	background-color: #fffad1;
	border-width: 1px 1px 0 2px;
	border-style: solid;
	border-color: #ffec52;
}

div.wwerr ul 
{
	list-style: none;
	padding: 0;
	margin: 0;
}

div.wwerr ul li 
{
	margin: 0;
	padding: 0;
}
	
div.wwerr ul li .errorMessage
{
	border: 0;
	padding: 0;
}

/* override webwork */
.label
{
	width: auto;
}

.narrowlabels div.wwlbl
{
	width: 15%;
}

div.wwlbl
{
	width: 25%;
	float: left;
	
	font-size: 90%;	
	
	padding: 0.25em 0.25em 0.25em 0.5em;
	margin: 0 0.75em 0.75em 0;

	color: #333;
	background-color: #ffec52;
}

div.wwlbl label.errorLabel
{
	color: red;
}

div.wwlbl span.required
{
	float: right;
	color: red;
	font-size: 80%;
}

div.wwctrl
{
	float: left;	
	margin: 0 0 0.75em 0;	
}

div.wwgrp input, div.wwgrp textarea
{
	border: 1px solid #CCC;
	padding: 0.25em;
	font-family: Arial, Helvetica, Sans-Serif;
}

div.wwgrp input:focus, div.wwgrp textarea:focus
{
	border: 1px solid black;
}

div.wwgrp input.wwbtn
{
	padding: default;
	border: default;
}

/* 
 * Strangely, without this rule, IE added a lot of extra bottom 
 * margin to the form groups. Left in until can determine what 
 * the actual problem is.
 */
div.wwgrp
{
		border: 1px solid #5B8F36;
}

.fixed350
{
	width: 350px;
}

/**
 * Misc accessibility related
 */
.nonvisible
{
	position: absolute;
	left: -3000px;
	width: 3000px;
}


/**
 * Info popup boxes 
 */
div.jqDrag 
{
	cursor: move;
}

div.jqmDialog 
{
	display: none;
    position: absolute;
    margin: -350px 0 0 -25px;
    width: 250px;
	height: 200px;
	overflow: hidden;
	background: url(../graphics/info-popup-chris.gif) center center no-repeat;
}

div.infotitle
{
	color: darkgreen;
	font-weight: bold;
	padding: 10px 15px 10px 15px;
	font-size: 12px;
}

div.infomsg
{
	padding: 0 15px 0 15px;
}		

div.infomsg p
{
	color: #334E46;	
	font-size: 10px;	
}

div.infomsg p a
{
	color: brown;
}

input.jqmdX 
{
  position: absolute;
  right: 10px;
  top: 8px;
  padding: 0 0 0 16px;
  height: 16px;
  width: 0px;
  background: url(../graphics/close.gif) no-repeat top left;
  overflow: hidden;
}