/* Rhodamine Red #E60094 */
/* Pink Background #FFE9F5  */

html, body {/* set everything to zero for a good cross-browser starting point */
	margin: 0;/*zeroes the margins on the body*/
	padding: 0;/*zeroes the padding on the body ** Opera carries a default padding and requires this zeroing*/
	border: 0;/*zeroes off any existing border*/
/*background-color: #3C4B55;/*sets the body background colour */
	background-color: #FFFFFF;/*sets the body background colour*/
	color: #000; /*set the default text color */ 
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family:  Arial, Verdana, Helvetica, sans-serif;/*set the default font families */
	font-size: 100.01%;/* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 770px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
	height: 100%;
}

.size200pc {font-size: 200%;}
.size180pc {font-size: 180%;}
.size160pc {font-size: 160%;}
.size140pc {font-size: 140%;}
.size120pc {font-size: 120%;}
.size100pc {font-size: 100%;}
.size095pc {font-size: 95%;}
.size090pc {font-size: 90%;}
.size085pc {font-size: 85%;}
.size080pc {font-size: 80%;}
.size075pc {font-size: 75%;}
.size070pc {font-size: 70%;}
.size065pc {font-size: 65%;}
.size060pc {font-size: 60%;}
.size055pc {font-size: 55%;}
.size050pc {font-size: 50%;}

.book {
	color: #000000;
	font-style: italic;
}
.IncorrectAnswer {
	color:#F00;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size:9px;
}
.CorrectAnswer {
	color:#000000;
	font-family:  Arial, Verdana, Helvetica, sans-serif;
	font-size:9px;
}
.IncorrectSymbol {
	font-family: Wingdings, "Zapf Dingbats";
	color:#FF0000;
}


#wrapper {
	margin: 0px auto;/* centers the wrapper first value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	width: 770px; /* sets the width of the wrapper */
	position: relative; /* important to position it relatively */
	background-color: #FFFFFF;/* sets the wrappers background color   #EEF1E7 */
	text-align: left;/* Realigns the text to the left after the IE hack in the body rule */
     background-image:  url(images/background-right.jpg);
	 background-repeat:  repeat-y; /* this creates the two column, drop shadowed background. It will go from top to bottom making both columns appear to be the same length no matter which is longer. */
	 min-height: 100%;
}

/*Begin laying out the Banner Div*/
#banner {
	font-size: 80%;
	width: 770px;/*Set the banners width - not strictly necessary just belt and braces from my point of view*/
	height: 120px;/*  115px set a height*/
	background-image: url(images/banner_bg.gif); /* set the background image for the banner*/
	background-repeat: no-repeat; /* prevent the background image from repeating*/
	position:relative;
}
#banner ul { 
	position: absolute;
	top: 25px;
	right: 10px;
	z-index: 10;
	padding: 0; /* begins with the usual zeroing of padding and margin to create a level playing field */
	margin: 0;
	list-style: none; /* removes the list marker from the navigation */
	display: inline;
}
#banner li {
	display: inline;
	padding-left: 0px; /* width of the little icons */
	margin-left: 0px; /* clears the left side evenly all the way down */
	font: .8em/110% Arial, Verdana, Helvetica, sans-serif;

}
/* the below styles the button area next to the icon */
#banner li a:link, #banner li a:visited {
	 /* display: block;this makes the A element clickable all the way across (not just on the words) */
	background: #E60094; /* #FFE9F5;  #CEB993; the button background changes on hover and focus */
	color: #FFF; /*for contrast, the text color changes to white */
	font-weight: bold; /* makes the links appear bolded */
	text-decoration: none; /* this gets rid of the underlines */
	margin: 3px 0px 2px 0px; /* this creates the space OUTSIDE each button */
	/*height: 1.2em;  15px; the icons are 23px tall. We want these buttons to match that. So add the height, plus the top and bottom padding, PLUS the top and bottom border. The final amount should total 23px */
	padding: 3px 20px 3px 20px; /* the padding creates the area WITHIN the button and keeps the text away from the borders */
	border-top: 0px solid #FFE9F5; /* since the light in the logo appears to be coming from the top left, we've used a light top color and a darker bottom and right color */
	border-right: 0px solid #FFE9F5;
	border-bottom: 0px solid #FFE9F5;
	border-left: 0px solid #FFE9F5;
}
 #banner li a:visited {
	background: #E60094;
}

/* hide holly hack from IE Mac \*/
* html #banner li a { 
	height: 1%;
	vertical-align: bottom;
} /* Holly Hack to get around a lovely IE issue with list items and a elements set to block */

#banner li a:hover, #banner li a:active, #banner li a:focus {
	background: #fff; /* the overall background color of the button area */
	color: #000; /* this is the text color */
	border-top: 1px solid #BF9E60; 
	border-right: 1px solid #FFD080;
	border-bottom: 1px solid #FFD080;
}

/*Begins laying out the content area */
#content {
	margin-top: 10px;
	margin-bottom: 20px;
	margin-right: 210px;
	margin-left: 12px;
   width: 500px;/*sets the width of the div  543px; */
   height: 100%;
   list-style-image: url(images/DotHotPink8.gif);
   font-size: 80%;  
	 }
	 
#content table {
	padding: 0;
	margin: 0;
	border: none;
	border-collapse:collapse; 
	margin: auto;
}
#content tr {
	border: none;
	background: #FFFFFF;
	padding: 5px 2px 5px 2px ; /* top right bottom left */
}
#content tr.oddrow {
	background: #FFFFFF; 
}
#content tr.evenrow {
	background:  #FFE9F5;
}

#content th {
	background: #FFF;  /* background: #E60094; */
	color: #FFF;
	font-weight: normal; 
	font-size: 90%;
	text-align: center;
	border: none;
	padding: 5px 2px 5px 2px ; /* top right bottom left */
}

#content td {
	font-size: 90%;
	color: #333;
	text-align: left;
	border: none;
	padding: 3px 2px 3px 2px ; /* top right bottom left */
}
#content td.centercell {
	text-align: center;
}

/*sets the content text*/
#content p {
	font-size: 90%;/*scales the font to 80% of the default set int he body selector*/
	margin: 5px 0px 0 0px;/*sets the required margins on the p element */
	padding: 0;/*zeroes the padding*/
	color: #555;/*sets the color for the text*/
	line-height: 130%;/*set a line height for easier reading*/
	
}

#content b { 
	color: #000;/*sets the color for the text*/
}
#content h1, h2, h3, h4 {
	font-family: Arial, Verdana, Helvetica, sans-serif;/*sets the font face*/
	margin: 5px 0px 3px 0px;/*sets the margins on the h elements */
	padding: 0px 0px 0px 0;/*sets the padding on the h elements*/
}
/*sets the styling for the h1 element within the content div*/
#content h1 {
	font-size: 130%;/*scales the text size against the body selector default*/
	color: #E60094;/*sets the text colour for the h2 text*/
	font-weight: 1000;/*sets the font weight a little less than bold, if not supported in a given browser defaults to a normal weight. If you want bold for your h1 delete this property and value pair - or simply comment them out*/
}

#content h2 {
	font-size: 120%;/*scales the text size against the body selector default*/
	color: #E60094;/*sets the text colour for the h2 text*/
	font-weight: 500;/*sets the font weight a little less than bold, if not supported in a given browser defaults to a normal weight. If you want bold for your h1 delete this property and value pair - or simply comment them out*/
}

#content h3 {
	font-size: 100%;/*scales the text size against the body selector default*/
	color: #E60094;/*sets the text colour for the h2 text*/
}

#content h4 {
	font-size: 90%;/*scales the text size against the body selector default*/
	color: #E60094;/*sets the text colour for the h2 text*/
}

#content ul, li {
	font-size: 95%;
	color: #555;/*sets the color for the text*/
}
.contactmail {
	font-size: 90%;
	margin-left: 40px;
}

/* Rhodamine Red #E60094 */
/* Pink Background #FFE9F5  */
/* Hot Pink #E60094 */
/*sets the boxes in the right column, note no width set on the boxes, the width is determined by the margin settings*/
.boxes {
	border: 0px solid #E60094;/*adds a border around the boxes*/
	margin: 10px 0px 10px 0px;/*set the margins, these margins position the boxes within the navbox container*/
   padding-bottom: 0px;/*add a little clearance below the final paragraph in each of the side boxes*/
	background-color: #FFF;
}

/*sets the style for the title in each of the boxes in the right coloumn*/
.boxes h3 {
	font-size: 100%;/*scale the font size off the body selector setting*/
	font-style: normal;
	margin: 0;/*zero the margins*/
	padding: 2px 0 2px 0;/*set padding to the top and bottom, zero the left and right margins*/
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align: center;/*set the text alignment to center*/
	border-bottom: 1px solid #E60094;/*set a defining edge between the h3 and the p content below it by adding a border*/
	color: #FFF;/*set the h3 text colour to white*/
	background-color: #E60094;
}

/*styles the text content in each of the boxes in the right column*/
.boxes p {
	font-size: 75%;/*scale the font size of the default on the body selector*/
	margin: 5px 3px 3px 5px;/*set margins to keep the text away from the borders*/
	padding: 0;/*zero off the padding*/
	line-height: 130%;/*set a line height for easier reading*/
	background-color: transparent;/*no background colour required, allow the .boxes colour to show through*/
	border: none;
}

/*styles the links in each of the boxes in the right column*/
.boxes a:link, .boxes a:visited {
	background-color: transparent;/*set the link background colour*/
	color: #000;/*set the link colour*/
	padding: 0;/*zero off the padding*/
	border: none;
}

/*styles the link hover and focus states in each of the boxes in the right column*/
.boxes a:hover, .boxes a:focus {
	background-color: #E60094;/*set the background colour*/
	color: #fff;/*set the text colour*/
	text-decoration: none;/*remove the underline*/
	border: none;
}

/*sets out the main right hand column that the boxes are contained within*/
#navbox {
	font-size: 75%;
	float: right;/*floats the navbox container to the right of the page*/
	width: 230px;/*set the width for IE 5.x  182px */
	w\idth: 230px;/*set the width for other browsers  180px */
	margin-right: 5px;/*set the right margin to 5 pixels for IE takes into account misplacement with a float bug*/
	margin-bottom: 20px;/*set a margin on the bottom*/
	margin-top: 10px;/*move the div down 10 pixels from the banner*/
}

/*Fix the right margin for good browsers from the right margin hack in the above selector*/
html>body #navbox {
   margin-right: 12px;/*correctly align the margin for good browsers after the hack in the rule above*/
}

/*set the h2 styles*/
#navbox h2 {
	font: normal 1.2em Arial, Verdana, Helvetica, sans-serif; /* sets the weight, font-family and size */
	color: #fff; /* text color of the headings */
	background: #FECF80 url(images/sidehead.jpg) repeat-y; /* This creates the gradient background of the heading */
	padding: 1px 5px 2px; /* this keeps the text away from the inner edges of the box we've created. These values MUST be mirrored in your sIFR replacement calls in the body */
	margin: 0 0 5px 20px; /* this controls the outer edge placement which keeps the heading box away from other elements */
}

/* the following selectors create the button look using an unordered list */
#navbox ul {
	padding: 0; /* begins with the usual zeroing of padding and margin to create a level playing field */
	margin: 0;
	list-style: none; /* removes the list marker from the navigation */
}
#navbox li {
	padding-left: 0px; /* width of the little icons */
	margin-left: 0px; /* clears the left side evenly all the way down */
	font: .8em/110% Arial, Verdana, Helvetica, sans-serif;
}
#navbox li li {
	padding-left:5px; 
	margin-left: 5px; 
	font: 1.0em/110% sans-serif;
}

/* the below styles the button area next to the icon */
#navbox li a:link, #navbox li a:visited {
	display: block; /* this makes the A element clickable all the way across (not just on the words) */
	background: #fff; /* the overall background color of the button area */
	color: #000; /* this is the text color */
	font-weight: bold; /* makes the links appear bolded */
	text-decoration: none; /* this gets rid of the underlines */
	margin: 3px 0 2px 0; /* this creates the space OUTSIDE each button */
	/*height: 1.2em;  15px; the icons are 23px tall. We want these buttons to match that. So add the height, plus the top and bottom padding, PLUS the top and bottom border. The final amount should total 23px */
	padding: 3px 2px 3px 20px; /* the padding creates the area WITHIN the button and keeps the text away from the borders */
	border-top: 1px solid #E60094; /* since the light in the logo appears to be coming from the top left, we've used a light top color and a darker bottom and right color */
	border-right: 1px solid #E60094;
	border-bottom: 1px solid #E60094;
	border-left: 1px solid #E60094;
}

#navbox li a:visited {
	color: #555; /* this is the text color */
}

/* hide holly hack from IE Mac \*/
* html #navbox li a { 
	height: 1%;
	vertical-align: bottom;
} /* Holly Hack to get around a lovely IE issue with list items and a elements set to block */

#navbox li a:hover, #navbox li a:active, #navbox li a:focus {
	background: #E60094; /* #FFE9F5;  #CEB993; the button background changes on hover and focus */
	 color: #fff; /*for contrast, the text color changes to white */
	border-top: 1px solid #BF9E60; /* Since the light is coming from the top left, when the button is depressed, the light would hit the right and bottom borders. They've been changed to the light color. The top border has been darkened as if shadowed */
	border-right: 1px solid #FFD080;
	border-bottom: 1px solid #FFD080;
}
/**************************************************************************************/
/* Second level list                                                                  */
/**************************************************************************************/
/*styles the nested ul element that contains our navigation links*/

#navbox li ul li a:link, #navbox li ul li a:visited {
	display: block; /* this makes the A element clickable all the way across (not just on the words) */
	background: none; /* the overall background color of the button area */
	color: #000; /* this is the text color */
	font-weight: bold; /* makes the links appear bolded */
	text-decoration: none; /* this gets rid of the underlines */
	margin: 3px 0 2px 0; /* this creates the space OUTSIDE each button */
	padding: 3px 22px 3px 20px; /* the padding creates the area WITHIN the button & keeps the text away from the borders */
	border-top: 0px solid #E60094;
	border-right: 0px solid #E60094;
	border-bottom: 0px solid #E60094;
	border-left: 0px solid #E60094;
}

#navbox li ul li a:visited {
	color: #555; /* this is the text color */
}

/* hide holly hack from IE Mac \*/
* html #navbox li ul li a { 
	height: 1%;
	vertical-align: bottom;
} /* Holly Hack to get around a lovely IE issue with list items and a elements set to block */

#navbox li ul li a:hover, #navbox li ul li a:active, #navbox li ul li a:focus {
	background: #E60094; /* #FFE9F5;  #CEB993; the button background changes on hover and focus */
	color: #fff; /*for contrast, the text color changes to white */
	border-top: 0px solid #BF9E60; /* Since the light is coming from the top left, when the button is depressed, the light would hit the right and bottom borders. They've been changed to the light color. The top border has been darkened as if shadowed */
	border-right: 0px solid #FFD080;
	border-bottom: 0px solid #FFD080;
}
/**************************************************************************************/
/* End of second level list                                                           */
/**************************************************************************************/
/**************************************************************************************/
/* Third level list                                                                  */
/**************************************************************************************/
/*styles the nested ul element that contains our navigation links*/

#navbox li ul li ul li a:link, #navbox li ul li ul li a:visited {
	display: block; /* this makes the A element clickable all the way across (not just on the words) */
	background: none; /* the overall background color of the button area */
	color: #000; /* this is the text color */
	font-style: italic;
	font-weight: bold; /* makes the links appear bolded */
	text-decoration: none; /* this gets rid of the underlines */
	margin: 3px 0 2px 0; /* this creates the space OUTSIDE each button */
	padding: 3px 22px 3px 20px; /* the padding creates the area WITHIN the button & keeps the text away from the borders */
	border-top: 0px solid #E60094;
	border-right: 0px solid #E60094;
	border-bottom: 0px solid #E60094;
	border-left: 0px solid #E60094;
}
 #navbox li ul li ul li a:visited {
	color: #555; /* this is the text color */
}
/* hide holly hack from IE Mac \*/
* html #navbox li ul li ul li a { 
	height: 1%;
	vertical-align: bottom;
} /* Holly Hack to get around a lovely IE issue with list items and a elements set to block */

#navbox li ul li ul li a:hover, #navbox li ul li ul li a:active, #navbox li ul li ul li a:focus {
	background: #E60094; /* #FFE9F5;  #CEB993; the button background changes on hover and focus */
	color: #fff; /*for contrast, the text color changes to white */
	border-top: 0px solid #BF9E60; /* Since the light is coming from the top left, when the button is depressed, the light would hit the right and bottom borders. They've been changed to the light color. The top border has been darkened as if shadowed */
	border-right: 0px solid #FFD080;
	border-bottom: 0px solid #FFD080;
}
/**************************************************************************************/
/* End of third level list                                                           */
/**************************************************************************************/

/* Set a style for the level 2 navigation */

/*float styles for the images in the content div*/
.left {
	float: left;/*float the image to the left*/
	border: 1px solid #000;/*add a border around the image*/
	margin: 15px 20px 5px 0;/*set a margin to the top and right to give clearance against the text the top margin aligns the image with the top of the p element*/
}
.leftnb {
	float: left;/*float the image to the left*/
	border: 0px solid #000;/*add a border around the image*/
	margin: 15px 20px 5px 0;/*set a margin to the top and right to give clearance against the text the top margin aligns the image with the top of the p element*/
}

.right {
	float: right;/*float the image to the right*/
	border: 1px solid #000;/*add a border around the image*/
	margin: 5px 10px 5px 10px;/*set a margin to the top and left to give clearance against the text the top margin aligns the image with the top of the p element*/
}

/**************************************************************************************/

/*begin laying out the footer div*/
#footer {
	position: fixed; /* Fixes footer in relation to the window so it always appears on screen and other content scrolls behind it */
	bottom: 0; /* Sets footer to appear at bottom of screen. */
 /*	left: 0; Sets footer to appear at left side of screen. Needed for WinIE to position correctly. */
	width: 770px;
	z-index: 100000000; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding a really high z-index to the footer, plus lower z-index and position: relative to all the floats, fixes this. */
	}

/* The following selector sets the footer to absolute instead of fixed in WinIE because WinIE does not support position: fixed. Setting it to absolute means it will display at the bottom of the page instead of the bottom of the window. */
/* The margin rule below gets rid of a one pixel gap below footer in WinIE. */
/* Hide from MacIE. Only WinIE sees this. \*/
* html #footer {
	position: absolute;
	margin-bottom: -1px;
	font: 90% Arial, Verdana, Helvetica, sans-serif;
	font-size: 90%;/*scales the font to 80% of the default set int he body selector*/

	}
/* End hide from MacIE. */

/* Image is placed outside of footer div to avoid a gap it creates beneath the footer in WinIE. */
#footerimage {
	position: fixed; /* Opera does not display the image if set to position: absolute, so fixed is used instead. This rule is hidden from WinIE because it does not support fixed positioning, and thus needs the absolute to pin the image correctly. */
	bottom: 0; /* Makes the image stick to the bottom of the page, no matter what the font size. */
	left: 0; /* Makes the image stick to the left of the footer. */
/* 	margin-top: -190px; Moves the top of the image outside the top edge of its container, #footer. */
	z-index: 1000000000; /* Sets z-index to exceed #footer to ensure that it displays on top of the footer bar, since it is before #footer in the source. */
	}
	
/* The following selector sets the footer to absolute instead of fixed in WinIE because WinIE does not support position: fixed. Setting it to absolute means it will display at the bottom of the page instead of the bottom of the window. */
/* Hide from MacIE. Only WinIE sees this. \*/
* html #footerimage {
	position: absolute;
	}
/* End hide from MacIE. */

/**************************************************************************************/



/* The navbox div is outside the flow of the document and won't respect the footer;
it would, if it's content was great enough, poke through the bottom of the layout.
The clear right ensures the footer is always moved beyond the navbox div and our design
remains intact. The content div is within the flow of the document and will therefore
push the footer div down as it's content dictates. */

#footer ul {
	padding: 2px 0 4px 0;/*sets the padding on the ul gives a little space around the li elements*/
	margin: 0;/*zero off the margins*/
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
	font: 70% Arial, Verdana, Helvetica, sans-serif; 
	text-align: center;
	}

#footer p {
	padding: 3px;/*sets the padding around the company text in the footer*/
	margin: 0;/*zeroes off the margins*/
	color: #FFFFFF;/*changes the default colour*/
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
	text-decoration: none; /* this gets rid of the underlines */
}

#footer ul li {
	padding: 2px 30px 2px 10px;/* sets the padding values*/  
	margin: 0;/*zeroes off the margins */
	display: inline;/*sets the list to display inline*/	
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
	text-decoration: none; /* this gets rid of the underlines */
}


#footer a {/* Styles the links within the footer */
	color: #fff;/*sets the text to white*/
	text-decoration: none; /* this gets rid of the underlines */
	background-color: #E60094;/*#9F9F9F;sets the background colour for p elements in the footer div*/
}

#footer a:hover, #footer a:focus {
	text-decoration: underline;/*removes the underline*/
}



/*create a marker to show the user where in the site they are at any given time*/
.youarehere {
	color: #000000 ; /*#B6B4C1;set a link in the navigation to this class to show where the user is - remove the link and apply this class to the li tag*/
}



/* BUTTONS */ //http://particletree.com/features/rediscovering-the-button-element/

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}