/*
----------------------------------------------------------------------
global settings miscellanea
---------------------------------------------------------------------- 
*/

* {
margin: 0;
padding: 0;
}

html, body {
margin: 0;
padding: 0;
}

body {
	text-align: left;/*for editor, usually would be center*/ 
	background: #FFF url(../images/entireBackground.gif) 0 0;/*compulsory for editor background colour*/
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	color: #453C58;
	font-size: 80%;
	line-height: 1.6em;
	height: 100%;
	}

h1, h2, h3, h4, h5, h6, p, li, a:link {
	margin: 0 0 1em 0;
}

/*to overcome an IE bug which by default doubles any spacing. Visually the result of the following rule (entered as half the space) is required to visually double the space to what we need*/
* html h1, * html h2, * html h3, * html h4, * html h5, * html h6, * html p, * html li, * html a:link {
	margin-bottom: .5em;
}


li  {
font-size:1em;/*keeps the font size EQUAL to whatever is set in the body tag, ie. if it is set smaller than 1em here it will compound the sizing, eg. .9 of .9 would compund smaller still*/
line-height: 1em;
}


/* prevent shrinking nested text , remains 1:1 with WHATEVER the body em is set to, eg. if the body font-size is .9em, so will all of these be. See immediately preceeding rule's comment*/
ol ol, ul ol, ol ul, ul ul, ol p, ul p  {
font-size:1em;}


ul, ol {
list-style-position: outside;
margin: 1em 2em 1.5em 30px;
}


ul li, ol li{
margin: 0;
}


a:link {
	color: #993;
	text-decoration: underline;
}

a:visited {
	color: #41464E;/*was 993*/
}

a:hover {
	color: #900;
}

a:active {
	color: #900;
}


.Align-Right {
	float: right;
}

img.Align-Right,
span.Align-Right img{
padding-left: 30px;
padding-bottom: 10px;
}

.Align-Left {
	float: left;
}

img.Align-Left,
span.Align-Left img {
padding-right: 20px;
padding-bottom: 10px;
}

.Align-Center {
	text-align: center;
}

img.Align-Center,
span.Align-Center img {
	text-align: center;
}


img a,
a img {
	text-decoration: none;
}

a * {
border: 0;
}


h1 {
color: #9083AA;
line-height: 1.2em;
text-align: left;
}

* html h1 {
font-size: 200%;
}

h2 {
color: #564B73;
line-height: 1.2em;
text-align: left;
}

* html h2 {
font-size: 175%;
}

h3 {
color: #68734B;
line-height: 1.2em;
text-align: left;
}

h4 {
color: #006666;
line-height: 1.2em;
text-align: left;
} 




.floatRight, #floatRight {
	float: right;
}

.floatLeft, #floatLeft {
	float: left;
}

.imgFramed img {
padding: 10px;
border: 1px solid #996;
background: #F6F9EC;
}

fieldset {
padding: 10px;
margin: 10px 0;
width: auto; 
}


hr {
height: 2px;
color: #BCD254;
background-color: #BCD254;
margin: 20px 0;
border: 0px solid #BCD254;
clear: both;
}


/*
----------------------------------------------------------------------
layout/positioning - major elements
---------------------------------------------------------------------- 
*/

#perimeter {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	min-height:100%;
	background: transparent url(../images/mastheadBackground.jpg) 0 0 no-repeat;
	text-align: center;/*usually would put this on the body, but affected the editor*/
	padding: 0;
}


* html #perimeter {/*IE WIN hack to force background colour higher than the viewport*/
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom:0px;
	height: 110%;
}



#outerContainer {
	text-align: left;
	margin: 0 auto;
	padding: 0 0 0 0;
	height: 100%;
	position: relative;
	background:transparent;/*can be used to simulate page borders*/
	
			
/*'Tantek box model hack' adjustment for the incorrect box-model implementation in IE5.xWin*/
	width: 746px; /*parse to IE5.xWin, the physical screen-pixel-width-requirement */
	voice-family: "\"}\"";voice-family:inherit;/*to stop IE5.xWin reading the next line*/
	width: 746px; /*parse to standards-compliant browsers: physical screen-pixel-width-requirement minus the sum of any left and right borders and padding*/
}


* html #outerContainer {
	height: auto;/*required for IE Win so the background doesn't stretch down to the extent of the perimeter div*/
}



#innerContainer {
	background: transparent;
	border-bottom: none;
	margin: 0 auto;
		height:100%;
		
			
/*'Tantek box model hack' adjustment for the incorrect box-model implementation in IE5.xWin*/
	width: 746px; /*parse to IE5.xWin, the physical screen-pixel-width-requirement */
	voice-family: "\"}\"";voice-family:inherit;/*to stop IE5.xWin reading the next line*/
	width: 746px; /*parse to standards-compliant browsers: physical screen-pixel-width-requirement minus the sum of any left and right borders and padding*/
}


* html #innerContainer {
	height: auto;/*required for IE Win so the background doesn't stretch down to the extent of the outerContainer div*/
}

#upperNavigation {
	background: transparent;
	overflow: hidden;
	padding-top: 9px;
	margin-bottom: 5px;
	height: 30px;
	
			
/*'Tantek box model hack' adjustment for the incorrect box-model implementation in IE5.xWin*/
	width: 746px; /*parse to IE5.xWin, the physical screen-pixel-width-requirement */
	voice-family: "\"}\"";voice-family:inherit;/*to stop IE5.xWin reading the next line*/
	width: 746px; /*parse to standards-compliant browsers: physical screen-pixel-width-requirement minus the sum of any left and right borders and padding*/
}


#masthead {
border: none;
background:none;
height: 90px;
position: relative;
overflow: hidden;
}


#mastheadLead {/*an alternative way to show non-styled or print logos*/
	padding: 0;/*added bottom after doing adv, IE wanted it but Mac doubles up*/
	text-align: center;
	background: transparent;
	color: #666;
	height: auto;
	width: auto;
} 

#mastheadLead img{
margin:0;
}



/*use this for the print logo*/
#identity {

}


#mastheadTail {
	display: none;
}



#content {
	padding: 0 0 10px 0;
	width: auto;
	margin-top: 10px;
}



#mainContent{
	float:left;
	margin: 0;
	padding: 15px 10px 10px 10px;
	display: inline; 
	background: #transparent url(../images/gradation_.jpg) 0 0 repeat-x;
	/*border: 1px solid #CACACA;*/
	z-index: 90;
	text-align: justify;
	overflow:visible;;
			
/*'Tantek box model hack' adjustment for the incorrect box-model implementation in IE5.xWin*/
	width: 585px; /*parse to IE5.xWin, the physical screen-pixel-width-requirement */
	voice-family: "\"}\"";voice-family:inherit;/*to stop IE5.xWin reading the next line*/
	width: 565px; /*parse to standards-compliant browsers: physical screen-pixel-width-requirement minus the sum of any left and right borders and padding*/
}


#leftContent, #rightContent  {
	float:left;
	display: inline;
}













/*
----------------------------------------------------------------------
secondary navigation
---------------------------------------------------------------------- 
*/




#upperNavigation li {
	display: inline;
	height: 30px;
}

#upperNavigation a {
	display: inline;
	padding: 5px 4px 3px;
	border-bottom: none;
}

#upperNavigation a:hover{

}




/*
----------------------------------------------------------------------
tertiary navigation
---------------------------------------------------------------------- 
*/


#lowerNavigation ul {
	margin-left: -1px; /*moved across to avoid edge highlight visual error*/
}


#lowerNavigation li {
	display: inline;
}

#lowerNavigation a {
	font-size: 12px;
	font-weight: bold;
	display: inline;
	background: #555;
	line-height: 30px;
	padding: 7px 10px 8px;
	border-bottom: 0;
	margin: 0;
	border-left: 1px solid #777;
	border-right: 1px solid #444;
	color: white;
	height: 30px;
}


#lowerNavigation a:hover {
	background: #333;
	color: white;
}



/*
----------------------------------------------------------------------
pagefoot and footer
---------------------------------------------------------------------- 
*/


#pageFoot {
	margin: 0 auto;
	background: transparent;
	height:25px;
	width:auto;
	text-align:left;
	padding:10px 10px 2px 10px;
}

#pageFoot a {
}



#footer {
	color: #888;
	text-align:left;
	margin: 5px auto 0;
	width:auto;
	font-size:10px;
	padding:20px 0 0 10px;
height: 40px;
position: relative;
border-top: 1px dotted silver;
}

#footer li {
	display: inline;
}

#footer p {
	display: inline;
	margin-right: 10px;
}

#footer a {
	display: inline;
	margin-right: 10px;
}









#contactDetails{
float: right;
width: 150px;
background: #FFF;
padding: 10px;
margin-left: 20px;
margin-right:0;
border: 6px solid #BCD254;/*#D6D6FF*/
}




/*
----------------------------------------------------------------------
bagladies
---------------------------------------------------------------------- 
*/


#bagladiesSubscribe {
float: right;
width: 200px;
background: #BCD254;
padding: 10px;
border: none;
margin: 0 0 20px 20px;
}

#bagladiesSubscribe p.registered {
padding: 10px;
background: #FFCC33;
color: black;
border: 3px solid white;
}

#bagladiesLogin {
float: right;
width: 200px;
background: #DADEE9;
padding: 10px;
border: none;
margin: 0 0 20px 20px;
}








/*
----------------------------------------------------------------------
floatClearing 
---------------------------------------------------------------------- 
*/



.floatClear,#floatClear  {
	clear: both;
	line-height : 0em;
	font-size: 0em !important;
	background-color: transparent;
}


/*
----------------------------------------------------------------------
custom classes
---------------------------------------------------------------------- 
*/

div.floatClear, span.floatClear {
	clear: both;
	line-height : 0em;
	font-size: 0em;
	background-color: transparent;
}

#search, #breadcrumbs {
	display: none;
}





/*
----------------------------------------------------------------------
typography 
---------------------------------------------------------------------- 
*/

#pageFoot {
	font-size:11px;
	color: black;
}

#leftContent p, 
#leftContent li, 
#leftContent a,
#rightContent p, 
#rightContent li, 
#rightContent a {
	font-size: 11px;
	line-height: 15px;
}



#upperNavigation {
	text-align: right;
	font-size: 10px;
	color: white;
}

#footer p, #footer ul {
	float: left;
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}





/*
----------------------------------------------------------------------
tables
---------------------------------------------------------------------- 
*/



table {
border: 1px solid #ccc;
border-right: none;
border-bottom: none;
background: #EEEEEE;
font-size: 1em;
margin-bottom: 10px;
vertical-align: top;
border-collapse: collapse;
text-align: left;
}

td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px;
vertical-align: top;
}

p.noSpace img, img.noSpace, span.noSpace img {
margin: 0;
}

#mainContent p.noSpace img,
#mainContent img.noSpace,
#mainContent span.noSpace img {
margin: 0;
}


/* invisible*/

table.table-invisible {
border: none;
background: transparent;
}

table.table-invisible td {
border: none;
}

/* rows */

table.table-rows {
border: none;
background: transparent;
}

table.table-rows tr{
border-bottom: 2px solid #BCD254;
}

table.table-rows td {
border: none;
padding: 15px 5px 15px 5px;
}




/* wireframe */


table.table-wireframe {
border: none;
background: transparent;
}

table.table-wireframe td {
border: 1px solid #ccc;
padding: 5px 10px 20px;
}





/*
----------------------------------------------------------------------
contact forms
---------------------------------------------------------------------- 
*/

fieldset  {
	}


legend  {
	color: #FFFFFF;
	font-family: "arial black";
	background-color: #BBB;
	padding: 3px 8px;
	display: none;
	}

label   {
	font-weight: bold;
	color: #222;
	text-align: left;
	display: block;
	float: left;
	}

label.fieldLabel	{
	display: inline;
	float: none;
	}
	
input.formInputField   {
	border: solid 1px #666;
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 2px;
	width: auto;
	}

form input.basicSubmitButton {	
margin: 0 0 5px 5px;
padding: 0 15px;
background: url(../images/submit_button_normal.gif) 0 0 repeat-x;
border:none;
border-top: 1px solid #564B73;
border-right: 2px solid #564B73;
border-bottom: 1px solid #564B73;
border-left: 2px solid #564B73;
height: 30px;
font-weight: bold;
}




fieldset#contactFormFieldset {
margin-top: 15px;
padding:10px;
background: #dadee9;
border: none;/*1px solid #564B73;*/
}

fieldset#contactFormFieldset label {
text-shadow: 0px 1px 0px #ffffff;
}

/*in normal state*/
#valid-firstName,
#valid-lastName,
#valid-subject,
#valid-email,
#valid-message {
background: #dadee9;
padding: 5px;
margin-bottom: -10px;
}

#input-valid-firstName,
#input-valid-lastName,
#input-valid-subject,
#input-valid-email,
#input-valid-message
{
	width: 300px;
	border: 1px solid #564B73;
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 2px;
	}
	
	
body.class-ragbags #input-valid-message
{
	width: 530px;
	}
	
	
#input-valid-firstName p,
#input-valid-lastName p,
#input-valid-subject p,
#input-valid-email p,
#input-valid-message p
{
	color: #000000;
	}


body.class-bagladies .smallTextInput {
	width: 180px;
	border: 1px solid #564B73;
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 2px;
	}
	
body.class-bagladies .testDiv {
margin-bottom: -10px;
	}
	
body.class-bagladies #input-valid-email {
width: 180px;
}

/*in normal state*/
body.class-bagladies #valid-firstName,
body.class-bagladies #valid-email {
background: transparent;
padding: 1px;
}

body.class-bagladies form input.basicSubmitButton {	
margin: 0 0 5px 0px;
padding: 0px 10px;
background: url(../images/submit_button_normal.gif) 0 0 repeat-x;
border:none;
border-top: 1px solid #564B73;
border-right: 2px solid #564B73;
border-bottom: 1px solid #564B73;
border-left: 2px solid #564B73;
height: 25px;
font-weight: bold;
}






















#mainContent p, #mainContent ul {
	font-size:1em !important;
	line-height: 1.6em;
	}
	
#mainContent ul li {
	margin: 0px 30px 0px 0;
	line-height: 1.4em;
	}










/*
----------------------------------------------------------------------
paragraphs
----------------------------------------------------------------------  
*/







p.Paragraph-Warning {
border-top: 3px solid #BCD254;
border-bottom: 3px solid #BCD254;
padding: 10px;
color: #000;
background: #EFEAFF;
margin: 10px 0 20px 0;
}

p.Paragraph-Warning a:link,
p.Paragraph-Warning a:visited{
color: #000;
font-weight: bold;
}

p.Paragraph-Warning a:hover,
p.Paragraph-Warning a:active{
color: red;
font-weight: bold;
}

p.Paragraph-Centred {
text-align: center;
}

p.PullQuoteLeft {
float: left;
clear: left;
border: 2px solid #9083AA;
width: 130px;
padding: 10px;
background: #F3FEE6;
margin: 0 20px 10px 0;
text-align: left;
}

p.PullQuoteRight {
float: right;
clear: right;
width: 130px;
padding: 10px;
background:#564B73 url(../images/mastheadBackgroun.jpg) 50% 50% no-repeat;
color: #FFF;
margin-left: 20px;
text-align: left;
}

p.PullQuoteRight a:link,
p.PullQuoteRight a:visited{
color: #CCFF99;
}

p.PullQuoteRight a:hover{
color: #FFF;
}

p.PullQuoteRight a:focus,
p.PullQuoteRight a:active{
color: #CCFF99;
}


p.Paragraph-Boxed {
background: #F6F9EC;
border: 1px solid #996;
padding: 20px;
}

p.indented {
margin-left: 60px;
}

form#contactForm p.alert {
color: red;
padding: 2px 0 8px 20px;
background: url(../images/alert.gif) 0 2px no-repeat;
overflow: visible;
line-height: 1.2em;
margin-top: 5px;
}

.pagenotpublished a.pageNames
{
text-decoration: line-through;
}
















#mainContent img {
margin: 10px 0;
}

#mainContent td img {
margin: 0;
}

#mainContent p.PullQuoteRight img {
margin: 0;
}




#identity img#logo {
position: relative;
}




#feature {
position: absolute;
top: 60px;
height: 30px;
margin-left: 180px;
border: 1px dotted green;
display:none;
}









/*
----------------------------------------------------------------------
navigaton
----------------------------------------------------------------------  
*/

/*menu flyout*/

div#mainMenu  {
	float: left;
	margin: 0;
	padding: 0;
	font-size:.8em;
	margin: 10px 15px 0	0;
	display:inline;
	}


#mainMenu ul {
	float: left;
	padding: 0;
	width: 100px;
	border: 1px solid #fff;
	border-bottom: none;
	margin: 0;
	list-style-type: none;
	}

#mainMenu li {
	float : left;
	margin:0;
	padding: 0;
	border-bottom: 1px solid #FFF;
	z-index: 98;
	width: 100px;
	}
	
* html #mainMenu li {
	width: 90px;
	}
	
	
#mainMenu li a,
#mainMenu li.current ul.submenu li a {/*ensures that the subnav items do not gain the you-are-here hover colours*/
	width: auto;
	color: #5D5176;
	font-weight : normal;
	text-decoration : none;
	background-color : #DADEE9;
	padding : 2px 0px 4px 10px;
	margin: 0;
	white-space: normal;
	line-height: 20px;
	display: block;/*to display full-width-clickable*/
	}
	
* html #mainMenu li a,
* html #mainMenu li ul.submenu li a,
* html #mainMenu li.current ul.submenu li a{
	width: 100%;/*full-width-clickable for IE*/
}

#mainMenu ul ul { /* submenu */
	position : absolute;
	left: -999em;/*needed for opera*/
	z-index: 99;
	width: 150px;
	}
	
#mainMenu ul ul li { /* submenu individual list items */
	float : left; 
	margin:0;
	padding: 0px 0px 0px 0px;
	border-bottom: 1px solid #FFF;
	z-index: 100;
	width: 150px;
/*	position: relative;testing the nav problems with rollover not sticking*/
	}
	
	
#mainMenu ul ul li a {
	white-space: normal;
	width: auto;
	}
	
	
#mainMenu li a:hover,
#mainMenu li.current ul.submenu li a:hover {
	color : #fff;
	text-decoration: none;
	background-color: #5D5176;
	/*display: block;*/
	}
	
#mainMenu li:hover, #mainMenu li.sfhover  {
	}

#mainMenu li:hover ul ul, #mainMenu li:hover ul ul ul, #mainMenu li.sfhover ul ul, #mainMenu li.sfhover ul ul ul {
	left: -999em;
	}
	
#mainMenu li:hover ul, #mainMenu li li:hover ul, #mainMenu li li li:hover ul, #mainMenu li.sfhover ul, #mainMenu li li.sfhover ul, #mainMenu li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	margin-left: 100px;
	margin-top: -27px;
	}

	
	
	
/*
----------------------------------------------------------------------
you are here nav
---------------------------------------------------------------------- 
*/

/*to show treatment on the primary nav item*/
#mainMenu li.current a:link,
#mainMenu li.current a:hover,
#mainMenu li.current a:visited,
#mainMenu li.current a:focus,
#mainMenu li.current a:active
{
	color : #fff;
	font-weight: bold;
	text-decoration: none;
	background: #8576A2;
	}
	
/*to retain normal state of colours in submenus*/
#mainMenu li.current ul.submenu li a:link,
#mainMenu li.current ul.submenu li a:hover,
#mainMenu li.current ul.submenu li a:visited,
#mainMenu li.current ul.submenu li a:focus,
#mainMenu li.current ul.submenu li a:active
{
	color : #5D5176;
	font-weight: normal;
	background: #DADEE9;
	}
	
/*to allow the hover treatments in flyouts*/
#mainMenu li.current ul.submenu li a:hover/*,
#mainMenu li.current ul.submenu li a:visited:hover*/
{
	color : #fff;
	font-weight: normal;
	background: #5D5176;
	}


/*
----------------------------------------------------------------------
BareBones login
---------------------------------------------------------------------- 
*/

body#login {
background: #F0F0C0;
padding-top: 100px;
}

fieldset.login {
padding: 30px 10px 10px 10px;
margin: 0 auto;
width: 30em;
background: #FFFFFF;
text-align: center;
border: 3px solid #A7B191;
-moz-border-radius: 1em;
}


fieldset.login form{
text-align: center;
margin: 15px 10px 20px;
background: #E0E0AA;
padding: 10px;
-moz-border-radius: 1em;
}

body#login form input.basicSubmitButton{
padding: 4px 6px;
background: #A7B191;
color: #FFFFFF;
border: 2px solid #444;
border-top-color: #F0F0C0;
border-left-color: #F0F0C0;
}

body#login form input.basicSubmitButton:active{
border-top-color: #444;
border-left-color: #444;
border-bottom-color: #F0F0C0;
border-right-color: #F0F0C0;
}

fieldset.login label {
display:block;
text-align: center;
width: 100%;
margin:0;
}

* html body#login p.alert {
font-size: .75em;
}

body#login p.alert {
color: #000000;
padding: 5px 0 6px 20px;
background: #FFE5E5 url(../images/alert_bright.gif) 10px center no-repeat;
overflow: visible;
line-height: 1em;
margin: 5px 0;
font-size: .88em;
border-top: 1px solid red;
border-bottom: 1px solid red;
}

body#login a {
color: #000000;
}

body#login a:hover {
background-color: #FF0000;
padding: 2px 0;
color: #FFFFFF;
}

* html body#login h3 {
font-size: 1.1em;
}

body#login input.formInputField   {
	border: solid 1px #A7B191;
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 2px;
	width: auto;
	}














#masthead img {
display:none;/*removes the rotating image(s) or other non-styled logos, eg. required for printing*/
}



/*
----------------------------------------------------------------------
BACK TO TOP
---------------------------------------------------------------------- 
*/


#backToTop {
	float: right;
	position: relative;
	bottom:-50px;
	z-index: 90;
	height: 40px;
	margin: 0;
	padding:0;
}

* html #backToTop {
	float: right;
	position: relative;
	bottom:-65px;
	z-index: 90;
	height: 30px;
	padding-top: 5px;
}

#backToTop a {
	background-color: #55496F;
	padding: 5px;
	text-decoration: none;
	color: white;
border: 2px solid #B3A5C8;

}

#backToTop a:hover {
color: white;
text-decoration: underline;
border: 2px solid #55496F;
}










#signature {
margin-left: 250px;
}

#webFeedback {
background: #FFCC33;
color: black;
padding: 20px;
border: 3px double #BCD254;
margin-bottom: 20px;
}


body.class-ourstaff td img {
float: right;
margin-left: 20px;
}