/*** NEW STYLE SHEET FOR PENNY WATERMAN ***/
/***                      FEBRUARY 2009                       ***/

/*******************************************************************************
This style sheet creates a template with fixed width lhs and rhs column and a variable
width central contents area.

MIN/MAX WIDTH NOTE
The code for the bodydiv, sizer and expander divs is taken directly from the
Jello Molds & Width Control by Mike Purvis at: 
http://www.positioniseverything.net/articles/jello-expo.html
(although the expander div has been given a background image).


This code provides a min width, so that if the browser is resized to be smaller than the page,
then the page does not break up too much (with undesirable feature like menus wrapping round).

The max-width code provides a max width of 1000px, but does not work in all browsers, 
although it does for FF and IE.

COLUMN COLOURS
The column colours are set using the expander and expander2 backround images


COLOURS
The hex colours used in the style sheet are:
Base Colour : White #FFFFFF
Main Colour : Dark Gray  #202020
Accent Colour : Pink #FF99FF

PALETTE
#808000 = Gold (eg headings)
#BFD19F = Medium gray (eg for box lines)
#3333FF = Medium  blue (eg for Top Navbar)
#183160 = Navy blue (eg for box lines)


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

@import url("reset.css");

body, body div, body p, body th, body li {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-style : normal; font-weight : normal;
font-size: 12px; line-height:16px;
color:#202020; background-color:white; 
}

/*********************************
	Headings and General Purpose
*********************************/
h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size:24px; line-height: 30px; color: #808000;}
h2 { font-size:20px; line-height: 28px; color: #808000;}
h3 { font-size:18px; margin-bottom: 8px; }
h4 { font-size:16px; margin-bottom: 12px;}
h6 { font-size:12px; }

p { font-size:12px; line-height: 16px; }

/*********************************
	Standard Links
*********************************/
 
a:link 	{ color: #FF99FF; text-decoration: underline;} 
a:visited { text-decoration: none;}
a:hover, a:active { color: #3333FF; background-color: #FF99FF; }


/*********************************
	Messages etc.
*********************************/

.error, .status, .welcome {margin-bottom: 6px; text-align: center; font-weight:bold; }
.error	{ color: white; background-color: red; }
.status, .welcome	{ color: #FF99FF; background-color: #808080; }
.pagetitle	{ color: #3333FF; font-size:12px; font-weight:bold; }
.centre		{ text-align: center; }
.right		{ text-align: right; }
.table-search-box-outer{ width:100%; text-align:center; }
.table-search-box{ display: table; margin-left: auto; margin-right: auto;  }
.control-settings{ font-size:10px; }
.highlight	{ font-weight:bold;}
.bluewash	{background-color: #3333FF; line-height:5px;}  /* IE fix for Clear div gaps in header */

.large_photo 	{padding: 5px; width: 400px; height: 400px; text-align: center; float:left; margin:6px 0 0 6px;}
.big_photo 		{padding: 5px; width: 300px; height: 300px; text-align: center; float:left; margin:6px 0 0 6px;}
.small_photo 	{padding: 5px; width: 150px; /* height: 150px; */ text-align: center; float:left; margin:6px 0 0 6px;}
.teacher_photo 	{padding: 5px; width: 225px; height: 340px;  text-align: center; float:left; margin:6px 0 0 6px;}
.thumb_photo 	{padding: 5px; width: 112px; height: 170px;  text-align: center; float:left; margin:6px 0 0 6px;}
.left			{float:left;}


/********** L AYOUT   ******/
#bodydiv { padding: 0px 350px 0px 350px; text-align: center; /* centering hack for IE5.x/Win */}

#sizer {
	width: 50%;
	margin: 0 auto 0 auto; /* standard centering method */
	text-align: left; /* resets centering hack to default */
	max-width: 300px;  /* 1000 - 720 = 280 */
}
	

#expander {
	margin: 0 -350px 0 -350px; min-width: 700px; /* These numbers are the reverse of the bodydiv padding */
	position: relative; text-align: left;  }

#expander2 {
	background-position: right;
	/* background-image: url(.././images/background2.png);
	background-repeat: repeat-y; */
}

/* Holly hack for IE \*/
* html #bodydiv,
* html #sizer,
* html #expander { height: 0; }
/* */


#banner {width: 980px; padding:0;margin: 0;border:0;}

#main { background-color: white; text-align: center;}
	
#leftcol {float: left; width: 180px; margin: 0px 0 10px 0;  padding:5px; border: 1px solid #183160;  }
#leftcol_noborder {float: left; width: 180px; margin: 0; padding:5px; border: 0; }
		
#rightcol {float: right; text-align: center; width: 180px; margin: 0px 0 10px 0; padding: 5px; border: 1px solid #183160; }
#rightcol_noborder {float: right; text-align: center; width: 180px; margin: 0; padding: 5px; border: 0; }

#content { margin: 10px 200px 10px 200px; text-align: left; padding: 5px;  border:1px solid #183160; }
#content_nomargin { margin: 10px 200px 10px 0px; text-align: left; padding: 5px;  border:1px solid #183160; }

#footer { clear: both; margin: 0; width:100%; height:30px; border-top: 1px solid #183160; }
#search_box{ float: right; padding: 1em; }


/*********************************
	Drop Down Horizontal Menu
	
IMPORTANT: The width solution below does not work for IE.
Instead change the widths in IE.css	
*********************************/
#MainMenuHorizOuter{ background-color: #3333FF; }
#MainMenuHoriz 
{font-style: "Calibri", "Helvetica", "Verdana", "Arial"; background-color: #3333FF; 
			margin: 0 0 0 150px; padding: 0; visibility: visible; }
#MainMenuHoriz td{ background-color: #3333FF;}
#dropDownMenu {	 margin-left: 17%; padding: 0;	margin:0;}
#dropDownMenu li {	margin: 0;padding: 0;list-style: none;float: left; }
#dropDownMenu li a {display: block; background: #3333FF; color: white ;text-align: center;text-decoration: none; margin: 0 0px 0 0;padding: 3px 3px;width: 110px;}
#dropDownMenu li a:hover {color: #3333FF; background: white;}
#dropDownMenu div {	position: absolute;	visibility: hidden;	margin: 0;	padding: 0;}
#dropDownMenu div a {background:#3333FF; color: #white; position: relative;display: block;margin: 0;padding: 5px 4px;width: 110px;white-space: nowrap;text-align: left;	text-decoration: none;}
#dropDownMenu div a:hover{	background:white; color: #3333FF;}


/*********************************
	No Script Horizontal Menu
*********************************/

#MainMenuHoriz_noscript { text-align: center; background-color: #3333FF; padding:0;	margin-top:0;}
#noscript table{ margin:0;padding:0;}
#noscript td{ background-color: #3333FF; padding:10px;	font-size: 12px; }
.noscript_separator{ color: white; }
.noscript_label{ color: silver;}
#noscript a:link, #noscript a:visited{ color:white;}
#noscript a:active, #noscript a:hover{ color:#3333FF; background-color: white;}

/*********************************
	Footer & Footer Menu Links
*********************************/


#footer td			{font-size: 10px; background-color: white;}
#footer a:link, a:visited { color: #3333FF; text-decoration: none; } 
#footer a:hover, a:active { color: white; background-color: #3333FF; }
#footermenu 		{ padding-top: 5px; font-size:10px; }
#footermenu a:link 	{color: #3333FF; text-decoration: none; } 
#footermenu a:visited 	{ color: #3333FF; font-weight:normal;}
#footermenu a:hover, a:active	{ color: white; background-color: #3333FF; }
#footermenu_separator{ color: #3333FF; } 



/*********************************
	Accessibility
*********************************/
.accessibility { float: left; padding: 1em; font-size: 10px;}
.accessibility a:link, .accessibility a:visited { font-size: 10px; color: #3333FF; text-decoration: underline; }
.accessibility a:active, .accessibility a:hover {font-size: 10px; color: white;  background-color: #3333FF; }
.accessibilityLink {font-size: 10px; }
.accessinilityLinkSeparator{ font-size: 10px; }



/*********************************
	Forms
*********************************/

fieldset {padding: 0 5px 5px 5px; border: solid 1px  #000066; margin: 10px; font-size: 12px; line-height:18px; margin-bottom: 18px; color: #808080; }
		
	
legend { padding: 5px; font-size: 12px; line-height:18px; color: #808000; }
label { padding-right: 10px; font-size: 12px; line-height:18px; color: #808080; }
select, input { display: block; }
input.submit { width: 100px; color:white; background-color:#3333FF; font-size: 12px; border: 1px solid #3333FF;  margin: 5px; padding: 3px;
			display:block; 	display: inline; }
input.submit:hover { color:#3333FF; background-color:white; border: 1px solid #3333FF; }
input.submit-small { width: 60px; color:white; background-color:#3333FF; font-size: 12px; border: 1px solid #3333FF; margin: 5px; padding: 3px;
			display:block; 	display: inline; }
input.submit-small:hover { color:#3333FF; background-color:white; border: 1px solid #3333FF; }
input.submit-very-small { width: 25px; color:white; background-color:#3333FF; font-size: 12px; border: 1px solid #3333FF;  margin: 5px; padding: 3px; display:block; 	display: inline; }
input.submit-very-small:hover { color:#3333FF; background-color:white; border: 1px solid #3333FF; }
#field_set_buttons{ padding: 10px; margin: 10px auto; }
a:link { color: #3333FF; text-decoration: none; display:inline; }
a:hover, a:active { color: white; background-color: #3333FF;  display: inline; }

/*********************************
Query Product, Review, News and Events
*********************************/

.product_detail{ width:100%; }
.subQueryContent{ padding: 5px 0 0 0; margin: 0; display: table; }
.subQueryContent h1{ }
.query{width:100%; text-align:center; } 
.queryLine{ text-align:left; color: #808080; font-size:12px; line-height:16px; margin-bottom:8px; }
.queryLine td {text-align:left; color: #808080; font-size:12px; line-height:16px; margin-bottom:8px; }
.galleryqueryLine{text-align:left; 	padding: 5px; margin 5px 0 5px 0; margin-right: auto;}
.newsLine{ text-align:left; color: #808080; font-size:10px; line-height:12px; }
.detailRecord table{ font-size: 12px;  margin: 10px; display: table; }


/*********************************
Member Account Logon and Security
*********************************/


#accountFunctionContainer{ display: table; margin: 10px auto; text-align:left; padding: 10px; width: 400px; }
#accountFunctionContainer h1{ color: #808000; font-size:22px; margin-bottom:8px; }
#accountFunctionContainer a:link { color: #3333FF; text-decoration: none; display:inline; }
#accountFunctionContainer a:hover, a:active { color: white; background-color: #3333FF;  display: inline; }

#newMembers{ margin-bottom: 30px; }

#logonPanel{ text-align:center; width: 90%; background-color:#3333FF; margin-left: auto; margin-right: auto; margin-top: 10px; padding-top: 10px;	}

.surnameSearch{ width: 100%; text-align:center; background-color:white; }	
.surnameSearchInner{ margin-left: auto; margin-right:  auto; display: table; }	

.memberNotes{ width: 100%; text-align:center; }
.memberNotesInner{ margin-left: auto; margin-right:  auto; display: table; }
.memberNotesInner a:link { color: #3333FF; text-decoration: none; display:inline; }
.memberNotesInner a:hover, a:active { color: white; background-color: #3333FF;  display: inline; }

.memberOrders{ width: 100%; text-align:center; margin-left: auto; margin-right:  auto; display: table;}
.memberOrderInformation{ background-color: white; }
#memberOrderDetail{ width:100%;}

.securityViolation{ width:100%; }

/*********************************
Shopping Cart and Order Processing
*********************************/
.caption {color: #202020; font-size:10px; font-style: normal;  }
.order{ width:100%; }
.order td { font-size: 10pt; background-color :white; border: 1px solid white; }
.order td.order-detail-heading{	font-size: 8pt; color: white; background-color : #3333FF; }
.order-detail-money{ font-size: 10pt; font-weight:bold; color: #202020; }

.checkout{ width:100%; }
.callback{ width:100%; text-align:center; }
.callback-inner{ width:70%; margin-left: auto; margin-right: auto;   margin-top: 200px;}

/*********************************
Pupil
*********************************/

.pupilLines{ width:100%;}
.pupilRecord{ width:100%; }
.datePrompt{ color: #183160; }
input.submit-small-pupil 
	{ display: inline; font-size: 12px; color: white; background-color: #183160;
  	  display:block; border:none; width: 60px; margin: 5px; padding: 3px; }

/*********************************
	Image Viewer
*********************************/

#flashcontentOuter{ text-align:center; }
#flashcontent{ background-color: #BFD19F;  width: 520px; margin-left: auto; margin-right: auto; }

/*********************************
  IE Fix for overlapping DIVs
*********************************/

.clear { display: inline-block; }   
.clear:after, .wrapper:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: inline-block; }