/* Generic
================================== */

/* Sets all margins and padding initially to zero. */
* 
{
	margin:0;
	padding:0;
}

/* Eliminates problem with Firefox who sees image as a hyperlink. 
Will disappear with border set to 0pt */
img 
{ 
	border-width: 0pt; 
}

/* Defines standard body text with sans-serif fonts. 
Zero margins and padding, so no white border around. Line height for leading.
Text aligned centered here for IE5.5 -> Later in wrap text aligned left again. */
body
{
	color: #565090;
	background-color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	margin-top: 20px;
	text-align: center;
	line-height: 1.3;
	margin: 0;
}

#bgimage 
{ 
	background-color: #C60; 
	width: 750px;
}

/* ID for div to hold main image acting as link back to home page. Position absolute. */
#bgimage img
{
	position: absolute;
	left: -40px;
	top: -15px;
}

/* Wrap around all content except navigation, with fixed width and centres the layout. 
Absolute positioned. Text aligned left to reverse from body hack.
Background image soft moved to join. z-index lower than wrap to show dropdown on top of content. */
#wrap
{
	width: 650px;
	background-color: #FFF;
	text-align: left;
	position: absolute;
	top: 145px;
	left: 125px;
	background-image: url(../images/Lightwords-Flower-Petals-Top-Soft.jpg);
	background-repeat: no-repeat;
	background-position: -165px -160px;
	z-index: 1;
}

/* Only for sample image pages. */
#wrap p
{
	color: #565090;
	padding: 40px 30px 0px 40px;
	font-size: 95%;
}

/* Only for sample image pages. */
.p_img 
{ 
	border: 1px #565090 solid;
}

/* Only for sample image pages. */
#wrap h3
{
	color: #565090;
	padding: 40px 30px 0px 40px;
	font-size: 120%;
}

/* Text (in text links) in bold. Used as span and normal class. */
.p_bold 
{ 
	font-weight: bold; 
}

/* Text in italics. Used as span. */
.p_italic 
{ 
	font-style: italic; 
}


/* Navigation TOP
================================== */

/* Navigation. Positioned absolute with offset again. Set width and height.
Background image soft moved to join. z-index higher than wrap to show dropdown on top. */
#navcontainer
{
	background-color: transparent;
	padding: 0px;
	width: 650px;
	height: 20px;
	position: absolute;
	top: 115px;
	left: 125px;
	background-image: url(../images/Lightwords-Flower-Petals-Top-Soft.jpg);
	background-repeat: no-repeat;
	background-position: -165px -130px;
	z-index: 2;
}

/* Clears the floated menu items on both sides. Assigned to class just before
menuwrappers closing div tag. */
.clearit 
{
	clear: both;
}

/* MENUBAR is the root unordered list and menubar ul applies to all the sub-menu ul's.
Zero down padding and margins. Add top padding for horizontal alignment. 
Turn bullet points off. Do not add a font-size here. */
#menubar, #menubar ul 
{
	padding: 0;
	margin: 0;
	list-style: none;
}

/* All MENUBAR links (a).  Display block to get links to behave like buttons. No underline. 
Padding around link text to create space between edges -> button. 
Smaller font-size for menu links. Purple colour. Line Height for correct height. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 2px 12px 5px 12px;
	font-size: 95%;
	color: #423E70;
	line-height: 1.0;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links. Background image (symbol) positioned with no repeat. 
Line Height for correct height. */
#menubar a.trigger
{
	padding: 2px 12px 0px 12px;
	line-height: 1.0;
}

/* List items in MENUBAR. Float left for horizontal display. Set width for IE5 Mac. 
See last rule in Navigation CSS -> sets width to auto for all other browsers 
(hides it from IE5 Mac). The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text. */
#menubar li 
{
	float: left;
	width: 12em;
}

/* Set width for SUB-MENU box and the SUB-MENU list items inside - in proportional em units. 
This allows the sub-menu width to expand if users resize the text in their browsers. */
#menubar li ul, #menubar ul li  
{
	width: 14em;
}

/* SUB-MENU links. Set padding to suit drop down indents. Line Height for correct height. */
#menubar ul li a
{
	padding: 5px 12px 0px 12px;
	background-color: #423E70;
	line-height: 1.0;
}

/* SUB-MENU unordered lists describes each dropdown SUB-MENU group. 
Positioned absolute to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background color must be set or problems will be encountered in MSIE. */
#menubar li ul
{
	position: absolute;
	display: none;
	background-color: #FFFFFF;
}

/* Changes the text color and background color when the Root-Level
MENUBAR items are moused over. The second selector sets color and background
when Root-Level MENUBAR items are accessed with the keyboard tab key. The third
selector sets an active state to support keyboard access in MSIE. The fourth 
selector is assigned to IE5 and IE6 Windows via the javascript.
Note that IE7 supports hover on elements other than links and so behaves
like Firefox, Opera, and Safari - making the menu operable even if JavaScript
is not enabled. Padding bottom to align with background navigation image. */
#menubar li:hover a, #menubar a:focus,
#menubar a:active, #menubar li.hvr a
{
	background-color: #F1DE99;
	padding-bottom: 7px;
}

/* Set the SUB-MENU unordered list to be visible when its associated
Root-Level MENUBAR link is moused over. The second selector is assigned to IE5 and IE6 
via the javascript. Top padding zero to avoid long bar under main hover. */
#menubar li:hover ul, #menubar li.hvr ul 
{
	display: block;
	color: #FFF;
	background-color: #F1DE99;
}

/* Set text color of the SUBMENU links when the root-level
MENUBAR items are moused over. The second selector is 
assigned to IE5 and IE6 via javascript.
The color set should match the normal Sub-Level link color
in the rule: #menubar ul li a. */
#menubar li:hover ul a, #menubar li.hvr ul a
{
	color: #423E70;
	background-color: #F1DE99;
	border-bottom: 1px #E4BD33 solid;
	text-align: left;
	padding-left: 12px;
}

/* The normal hover class for SUB-MENU Sub-Level links. The Important directive
is required for older browsers. We set a background color, which shows
over the gradient background. We set text color to white. */
#menubar ul a:hover 
{
	background-color: #E4BD33!important;
	color: #565090!important;
}

/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#menubar li 
{
	width: auto;
}


/*Links
================================== */

/* All other links (not navigational) also in dark purple with no underline. */
a
{
	color: #423E70;
	text-decoration: none;
}

/* When hovered or active change colour to yellow (non navigational links). */
a:hover, a:active
{
	color: #E4BD33;
}


/* Sidebar (Left)
================================== */

/* Left sidebar for images and small messages. Float left. Border right between sidebar and main. 
Top margin to line up with text in main container. Set width. 
Min-height to have minimum if not enough text. */
#sidebar
{
	float: left;
	width: 235px;
	margin-top: 90px;
	border-right: 2px #E4BD33 solid;
	min-height: 350px;
}

/* Give minimum height for IE Win for sidebar. */
* html #sidebar 
{
	height: 400px;
}

/* Give distance for p in sidebar. Purple colour. Font size 95% in bold. Set padding. */
#sidebar p
{
	color: #565090;
	padding: 0px 15px 0px 37px;
	font-size: 95%;
	font-weight: bold;
}


/* Images in sidebar container. Top padding for distance. */
#sidebar img
{
	padding: 0px;
	margin: 0px;
	padding-top: 5px;
}

/* Date right oriented on small messages. Also purple. Set padding.  */
.p_date
{
	color: #565090;
	padding: 0px 40px 10px 40px;
	text-align: right;
}


/* Main Content
================================== */

/* Main content. Float right. Set width but leave room to breathe (750-270 = 480 but -10). 
Also position bottom image. Set min-height. */
#main
{
	float: right;
	width: 405px;
	background-image: url(../images/Lightwords-Flower-Petals-Bottom.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	min-height: 670px;
}

/* Give minimum height for IE Win for main container. A bit less for IE.*/
* html #main 
{
	height: 655px;
}

/* Main text in purple. Padding for distance. Font size 100%.  */
#main p
{
	padding: 0px 40px 10px 40px;
	color: #565090;
	font-size: 95%;
	vertical-align: top;
}

/* Helens image on the home page needs the text floating around the image. */
.helenimage
{
	float: left;
}

/* Set padding for heading and subheading and font size and colour. 
Also set width and height for image replacement on h2. Position relative. */
#main h2, h3
{
	padding: 20px 40px 50px 40px;
	font-size: 120%;
	color: #565090;
	width: 300px;
	height: 20px;
	position: relative;
}

/* Smaller subheading above main text. */
#main h3
{
	padding: 0px 40px 10px 40px;
	font-size: 100%;
	color: #565090;
	position: relative;
}

/* Bigger subheading above main text - only for home page. */
#main h4
{
	padding: 0px 40px 10px 40px;
	font-size: 120%;
	color: #565090;
	position: relative;
}

/* Height for IE Win for main container. */
* html #main h2
{
	width: 380px;
	w\idth: 300px;
}

/* Extra span in heading with background replacement image. Position absolutely over the text. 
100% dimensions applies replacement image as background on the span. 
The replacement will be completely covered by the image. */
#main h2 span
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../images/Repl_Text_Home.jpg);
	background-repeat: no-repeat;
}

/* List inside main content. Round bullets. Move in from left. 
Also move 40px in from right for correct right alignment. Padding bottom for bigger distance. */
#main ul li
{
	list-style-type: disc;
	margin-left: 60px;
	margin-right: 40px;
	padding-bottom: 2px;
	color: #565090;
	font-size: 95%;
}


/* Footer
================================== */

/* Same background colour for footer as for header. 
Clear both for faux columns. */
#footer
{
	background-color: #FFF;
	clear: both;
}

/* Format text for footer line. */
#footer p
{
	text-align: center;
	padding-top: 10px;
}


/* Styles for form on contact page
================================== */

/* Fieldset groups related block. */
fieldset
{
	margin-left: 40px;
	padding: 10px 10px 15px 30px;
	border: 1px #E4BD33 solid;
	color: #565090;
	background-color: #F7EBC2;
	width: 310px;
}

/* Label for headings above form input boxes. */
label
{
	display: block;
}

/* Define length of input boxes. */
input
{
	width: 250px;
	margin-bottom: 10px;
}

/* Creates anchor for user in field. */
input:focus, textarea:focus
{
	background: #FCF8EB;
}

/* Give distance for submit button from top and bottom. Colour button. */  
.zemContactForm .zemSubmit 
{ 
	margin: 10px 0 10px 0px;
	background-color: #F7EBC2;
	color: #565090;
}