body {padding:0px; margin:0px; color:#333333; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
h1 {font-size:16px;}
h2 {font-size:14px;}
h3 {font-size:12px;}
a {color:#617de9; text-decoration:none; font-weight:bold;}
a:hover {background:#none; color:#0f09f1; text-decoration:none;}
th {text-align:left; font-style:italic; font-weight:normal;}
td {font-size:11px;}

/* ================================================================ 
FAQs
=================================================================== */
.switchcontent {
	width:450px;
	}
h3.question {
	color:#617de9; font-size:12px;
}


/* ================================================================ 
News
=================================================================== */
.news ul {
	padding:0px; margin:0px; 
}
.news ul li {
	background:#f7a12a;list-style-type:none; line-height:16px;
}

#news li, #links li {
	padding-bottom:10px;
	}

/* ================================================================ 
Header
=================================================================== */
.header {background:url(images/banner.gif) right; width:100%; min-width:882px; width:100%; height:131px; text-align:right;}
.header a {color:#fb9b05; text-decoration:none; font-weight:bold;}
.header a:hover {color:#da8603;background:none;}
#title {color:#FFFFFF; padding:10px 210px 0px 0px;}
#title p {font-size:17px;}
#title p.subtitle {font-size:16px;}
#logo {width:111px; height:126px; float:right; padding-right:60px;}
#mainLinks {color:#fb9b05; font-size:10px;}

/* ================================================================ 
Menu
=================================================================== */
.container-menu {background:#fb9b05; height:31px; width:100%; min-width:882px;}

/* ================================================================ 
Side bar
=================================================================== */

#container-side {background:none;border:0px solid black; width:168px; height:100%; float:left; margin:0px; font-size:11px;}
.boxB {color:#21294c; border:0px solid #4b5169; padding:10px; margin-left:0px;} /*#93aea4; */
.filler1 {background:url(images/filler-compass.gif) no-repeat bottom right; height:150px;}
#container-side ul {border:1px solid #21294c; width:100%; padding:5px; margin:0px; list-style-type:none;}
.h1News {background:url(images/h1News.gif) no-repeat; width:160px; height:26px;}
.h1News span {display:none;}
.h1FAQs {background:url(images/h1FAQs.gif) no-repeat; width:160px; height:26px;}
.h1FAQs span {display:none;}
.h1About {background:url(images/h1About.gif) no-repeat; width:160px; height:26px;}
.h1About span {display:none;}
.h1Links {background:url(images/h1Links.gif) no-repeat; width:160px; height:26px;}
.h1Links span {display:none;}
.boxB h1 {padding:0px; margin:1px;}

/* ================================================================ 
Controls
=================================================================== */
#controls {
	margin-right:100px; text-align:right;
	font-size:10px;
}
/* ================================================================ 
Main content
=================================================================== */
#container-content {border:0px solid red; float:left; padding-left:10px; position:relative; min-width:100px; width:70%; margin-left:auto; margin-right:auto; line-height:25px;}
#boxMain {padding:20px; height:90%;}
#boxMain ul {padding:0px; margin:0px;}
#boxMain ul li {list-style-type:none;}
#boxMain h2 {color:#000066;}
.pillar {width:70px; vertical-align:top;}
.h1Welcome {background:url(images/h1Welcome.gif) no-repeat; width:400px; height:36px;}
.h1Welcome span {display:none;}
.h1Contact {background:url(images/h1Contact.gif) no-repeat; width:400px; height:36px;}
.h1Contact span {display:none;}
.h1FAQ {background:url(images/h1FAQ.gif) no-repeat; width:400px; height:36px;}
.h1FAQ span {display:none;}
.h1AboutOrder {background:url(images/h1AboutOrder.gif) no-repeat; width:400px; height:36px;}
.h1AboutOrder span {display:none;}
.h1AboutSA {background:url(images/h1AboutSA.gif) no-repeat; width:400px; height:36px;}
.h1AboutSA span {display:none;}
.h1Search {background:url(images/h1Search.gif) no-repeat; width:400px; height:36px;}
.h1Search span {display:none;}
.h1AboutSA span {display:none;}
.h1Library {background:url(images/h1Library.gif) no-repeat; width:400px; height:36px;}
.h1Library span {display:none;}
.h1Link {background:url(images/h1Link.gif) no-repeat; width:400px; height:36px;}
.h1Link span {display:none;}
.h1Principles {background:url(images/h1Principles.gif) no-repeat; width:400px; height:36px;}
.h1Principles span {display:none;}
.h1Charity {background:url(images/h1Charity.gif) no-repeat; width:400px; height:36px;}
.h1Charity span {display:none;}
.h1History {background:url(images/h1History.gif) no-repeat; width:400px; height:36px;}
.h1History span {display:none;}
.h1Questions {background:url(images/h1Questions.gif) no-repeat; width:400px; height:36px;}
.h1Questions span {display:none;}
.h1Application {background:url(images/h1Enquiry.gif) no-repeat; width:400px; height:36px;}
.h1Application span {display:none;}
.h1Links {background:url(images/h1Links.gif) no-repeat; width:400px; height:36px;}
.h1Links span {display:none;}
.h1NewsMain {background:url(images/h1NewsMain.gif) no-repeat; width:400px; height:36px;}
.h1NewsMain span {display:none;}
.h1CraftNews {background:url(images/h1CraftNews.gif) no-repeat; width:400px; height:36px;}
.h1CraftNews span {display:none;}
#footer {clear:both; color:#21294c;bottom:0px;font-size:10px; padding-left:268px;}
#footer a {color:#333333; text-decoration:none;}
#footer a:hover {color:#666666;}

.faq ul {list-style-type:none; padding:0px; margin:0px;}
.faq ul a {font-weight:normal;}
	
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {min-width:882px; height:32px; position:relative; z-index:100;border-right:0px solid #000; font-family:verdana, arial, sans-serif; padding-right:0px; margin-right:1px;}
/* hack to correct IE5.5 faulty box model */
* html .menu {min-width:882px; width:100%; w\idth:745px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; float:right;}
.menu ul ul {width:137px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:137px;position:relative;}

/* make second level links smaller font */
.menu li li a {font-size:11px;}

/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:128px; height:31px; border:0px solid #000; border-width:0px 0 0px 0px; background:#fb9b05; padding-left:10px; line-height:31px; font-weight:normal;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:137px; w\idth:128px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#fb9b05 url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;font-size:11px;}
/* style the second level hover */
.menu ul ul a.drop:hover{color:#FFFFFF; background:#2f354d url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
.menu ul ul :hover > a.drop {color:#FFFFFF; background:#2f354d url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e3d9c9; font-size:10px;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#e3d9c9; font-size:10px;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:137px;border-top:0px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* position the third level flyout menu */
.menu ul ul ul{left:137px; top:-1px; width:137px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-137px;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#e3d9c9; color:#616882; height:auto; line-height:1em; padding:3px 10px; width:117px;border-width:0 0px 0px 0px;font-size:11px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:137px;w\idth:117px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#f88d1c;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#f88d1c;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}