/* 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;
}


/* Typography generic
================================== */

/* Sets the generic font and font size and color (dark green) for body. Also sets background colour 
but last digit changed from 4 to 3 to avoid CSS warning about same colour. Center text to center 
whole layout in IE5.5. Than bring back left later in wrapper. Margin for top. */
body
{
	color: #26393D;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	margin-top: 30px;
	background-color: #7A91A3;
}

/* Standard paragraph. Line-Height for leading. Padding bottom only. */
p
{
	line-height: 130%;
	padding-bottom: 10px;
}

/* Standard heading h2. Padding bottom and top (distance to rule). Bigger font size. */
h2
{
	font-size: 115%;
	padding-bottom: 11px;
	padding-top: 10px;
}

/* Standard heading h3. Padding bottom only. Normal font size. */
h3
{
	font-size: 100%;
	padding-bottom: 3px;
}


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

/* Define generic properties for all links. No underline and set font size.
Also background colour to be inherited. Then set colour for all link states. */
a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

a:link
{
	color: #D0A825;
}

a:visited
{
	color: #7A91A4;
}

a:hover, a:active
{
	color: #40627C;
}



/* Wrapper
================================== */

/* Order important for search engines. Calculations: 
513px(primary) + 237px(side). */

/* Main wrapper with centres the whole page with set width. Re-align the text again to the left, 
after it was all centred in body tag for IE5.5. Place background image -> faux filler. */
#wrapper
{
	width: 750px;
	margin: 0 auto;
	background-color: #ECF0F2;
	padding: 0;
	text-align: left;
	background-image: url(../images/faux_filler.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


/* Header One
================================== */

/* Top header with same width as wrapper and set height. Background colour to cover faux filler. */
#header_one
{
	width: 750px;
	height: 39px;
	background-color: #ECF0F2;
}

/* Header title text placed as image in html. Font Syntax. Set width and float left to allow for span. */
#header_one #siba_title
{
	width: 310px;
	float: left;
	padding-left: 15px;
}

/* Box for top navigation. Span used in html for same line. Float to the right. 
Set width. Height to be set as high as graphic (31px) -> IE6+7 show a pixel more between 
header one and header two. Place background graphic under nav links. */
#header_one #top_nav
{
	float: right;
	width: 280px;
	height: 31px;
	padding-top: 11px;
	background-image: url(../images/SIBA_Top_Nav_Bg.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

/* First top navigational link in header_one. Font size same as in menubar for main navigation. 
No underline. Padding left to give big distance from left. */
#header_one #top_nav a.linkOne
{
	font-size: 88%;
	text-decoration: none;
	margin-left: 60px;
}

/* Second and third top navigational links in header_one. Same as above but smaller padding left. */
#header_one #top_nav a.linkTwo, #header_one #top_nav a.linkThree
{
	font-size: 88%;
	text-decoration: none;
	padding-left: 25px;
}

/* Set colour for all link stages. Same as colours inside main navigation. */
#header_one #top_nav a:link
{
	color: #D0A825;
}

#header_one #top_nav a:visited
{
	color: #D0A825;
}

#header_one #top_nav a:hover, #header_one #top_nav a:active
{
	color: #FFF;
}


/* Header Two + Three
================================== */

/* Second header with same width as wrapper. Background colour to cover faux filler. 
Also first slice of logo as background image placed. Contains navigation. 
Padding top to move text down. */
#header_two
{
	width: 750px;
	padding-top: 26px;
	background-color: #ECF0F2;
	background-image: url(../images/SIBA_Header_Logo_Short_01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

/* Third header with same width as wrapper and set height. 
Contains second slice of logo and Flash Movie. */
#header_three
{
	width: 750px;
	height: 137px;
	background-color: #40627C;
}

/* First box inside header_three for 2nd slice of the logo on the left. Set width and float left. */
#header_three #box1
{
	width: 132px;
	float: left;
	background-color: #40627C;
}

/* Text for date and time inside header three, inside box1 and inside timecontainer.
Padding for nice position. Set colour, small font size and line height. */
#header_three #box1 #timecontainer
{
	padding-top: 8px;
	padding-bottom: 0;
	padding-left: 10px;
	color: #FFF;
	font-size: 75%;
	line-height: 1.3em;
}

/* Second box inside header_three contains the Flash Movie. Set height. Float left. 
Set background colour to close 2px gap on bottom, since movie is 2px shorter (135px) in html. */
#header_three #box2
{
	float: left;
	height: 137px;
	background-color: #40627C;
}

/* Gap caused by default vertical alignment of inline elements is fixed through setting the
vertical-alignment of the image itself to bottom. The problem occurs only on the top (non-floating)
header div, not on the floating divs below. */
#header_two img, #header_three img
{
	vertical-align: bottom;
}

/* Main Navigation
================================== */

/* Wrapper for dropdown navigational menu. Left margin. Set height. 
Place background image under navigation text, to extend to the right.  */
#menuwrapper
{
	margin-left: 132px;
	min-height: 21px;
	background-image: url(../images/SIBA_Nav_Bg.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
}

/* Hack for IE. IE does not understand min-heigt, but understands height. */
* html #menuwrapper
{ 
	height: 21px; 
}

/* 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. Colour for text is yellow. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 2px 20px 0px 20px;
	font-size: 88%;
	color: #D0A825;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links. Background image (arrow) in yellow positioned with no repeat. */
#menubar a.trigger
{
	padding: 2px 20px 0px 20px;
	background-image: url(../images/Down_Arrow_Yellow.gif);
	background-repeat: no-repeat;
	background-position: 100% 90%;
}

/* 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: 23em;
}

/* SUB-MENU links. Set padding to suit drop down indents. */
#menubar ul li a
{
	padding: 5px 0px 0px 20px;
}

/* 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.
(According to manual the background color [here FFFFFF] must be set or problems will be 
encountered in MSIE -> did not happen -> no background colour set) */
#menubar li ul
{
	position: absolute;
	display: none;
}

/* 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
{
	color: #FFF;
	padding-bottom: 0px;
}

/* Change the arrow from yellow to white when trigger menu is hovered over. 
It will revert back to the yellow arrow once moved down to submenus. Trigger text still stays white 
to indicate the active "column". */
#menubar a.trigger:hover
{
	background-image: url(../images/Down_Arrow.gif);
	background-repeat: no-repeat;
	background-position: 100% 90%;
}

/* 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 for distance between first item in dropdown list 
and trigger text above. */
#menubar li:hover ul, #menubar li.hvr ul
{
	display: block;
	color: #FFF;
	background-color: #26393D;
	padding-top: 5px;
}

/* 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. Set left border. 
Pading bottom to give distance between submenu ntext and line underneath. */
#menubar li:hover ul a, #menubar li.hvr ul a 
{
	color: #D0A825;
	background-color: #26393D;
	border-bottom: 1px #D0A825 solid;
	padding-bottom: 5px;
}

/* The normal hover class for SUB-MENU Sub-Level links. The Important directive
is required for older browsers. Set a background color. Text color set to yellow. */
#menubar ul a:hover 
{
	background-color: #26393D!important;
	color: #FFFFFF!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;
}



/* PrimaryContent (left column)
================================== */

/* Two main columns, named in order of importance and display when styles switched off.
If body selector hasn't got twoColLayout assigned a one columns layout will be displayed 
(and no sideCOntent would be placed in HTML). 
Firstly display:inline is required for IE6 for correct column display. Margin bottom. */
#primaryContent
{
	float: left;
	width: 750px;
	display: inline;
	margin: 0;
}

/* Specifying twoColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 513 (no room for breathing). Place drop shadow image with repeat. */
#twoColLayout #primaryContent
{
	float: left;
	width: 513px;
	background-image: url(../images/Drop_Shadow.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* Class for box inside primaryContent. Border left to cover top of faux filler and drop shadow. 
Also set minimum height to display logo even with short text. */
.boxPrimary
{
	border-left: 8px #26393D solid;
	background-image: url(../images/SIBA_Background.gif);
	background-repeat: no-repeat;
	background-position: 0px 43px;
	min-height: 300px;
}

/* Hack for IE. IE does not understand min-height, but understands height. */
* html .boxPrimary 
{ 
	height: 300px; 
}

/* Set padding for heading, subheading and paragraph style inside primaryContent. */
.boxPrimary p, .boxPrimary h2, .boxPrimary h3
{
	padding-left: 68px;
	padding-right: 20px;
}

/* Smaller font size for breadcrumbs inside boxPrimary. */
.p_breadcrumbs
{
	font-size: 85%;
	padding-top: 8px;
}

/* Horizontal ruile under breadcrumbs. */
.rule
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #26393D;
	margin: 0px 20px 0px 68px;
}

/* Container for Seychelles Flash animation on Seychelles page only. */
.boxPrimary #globe
{
	padding-left: 50px;
}

/* List inside primary content. Square bullets. Move in from left. 
Also move 20px in from right for correct right alignment. */
.boxPrimary ul li
{
	list-style-type: square;
	margin-left: 100px;
	margin-right: 20px;
	color: #26393D;
}

/* Left box for calendar dates on public holiday page. */
.boxPrimary #holleft
{
	float: left;
	/* background-color: #FF2200; */
}

/* Right box for calendar dates on public holiday page. */
.boxPrimary #holright
{
	float: left;
	padding-left: 0px;
	/* background-color: #448833; */
}

/* Clear the floats. */
.floatclear
{
	clear: both;
}


/* SideContent (right column)
================================== */

/* Side content on the right hand side. Float right and set width 237px. 
Place drop shadow image with repeat. */
#sideContent
{
	float: right;
	width: 237px;
	background-image: url(../images/Drop_Shadow.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* Class for box inside sideContent. Border right to cover top of faux filler and drop shadow. 
Margin bottom. Padding top to move box down. This box contains all other side boxes (search, alert). */
.boxSide
{
	margin: 0px 0px 20px 0px;
	padding-top: 30px;
	border-right: 8px #26393D solid;
}

/* Class inside boxSide for headings in side panel. Set width and height. Move in from right. 
Set background colour. Place graphic as background image for angle on right. */
.boxHeading
{
	width: 210px;
	height: 25px;
	margin: 0px 15px 0px 0px;
	background-color: #40627C;
	background-image: url(../images/Angle_Heading.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

/* Text inside heading box in white. Smaller font size. Padding left to allow for graphic. 
Line-height to center inside heading box (only if single line of text). 
Place four dots graphic as background image. */
.boxHeading p
{
	color: #FFF;
	font-size: 88%;
	padding: 0px 10px 0px 20px;
	line-height: 25px;
	background-image: url(../images/Four_Dots_White.gif);
	background-repeat: no-repeat;
	background-position: 10px 9px;
}

/* Same as .boxHeading. Class inside boxSide for headings in side panel. 
Set width and height. Move in from right. */
.boxLang
{
	width: 210px;
	height: 25px;
	margin: 0px 15px 0px 0px;
}

/* Text inside heading box in white. Smaller font size. 
Line-height to center inside heading box (only if single line of text). */
.boxLang p
{
	color: #FFF;
	font-size: 88%;
	padding: 0px 10px 0px 10px;
	line-height: 25px;
}


/* Another box inside heading box for the alert text. Different background colour. */
.boxAlertText
{
	width: 210px;
	margin: 0px 15px 0px 0px;
	background-color: #C5D0D7;
}

/* Text inside alert box in blue. Smaller font size. Padding all around. */
.boxAlertText p
{
	color: #26393D;
	font-size: 88%;
	padding: 10px 10px 10px 10px;
}

/* Box for quick links with green background. */
.boxQuickLinks
{
	width: 210px;
	margin: 0px 15px 0px 0px;
	background-color: #26393D;
}

/* Text inside quick links in yellow. Yellow border bottom. */
.boxQuickLinks p
{
	color: #D0A825;
	font-size: 88%;
	padding: 5px 10px 5px 10px;
	border-bottom: 1px #D0A825 solid;
}

/* Class inside boxSide for image in side panel. Top margin to give distance above. */
.boxImage
{
	margin-top: 15px;

}

/* Set colour for all link stages inside quick links. Same colours as main and top navigation. */
.boxQuickLinks a:link
{
	color: #D0A825;
}

.boxQuickLinks a:visited
{
	color: #D0A825;
}

.boxQuickLinks a:hover, .boxQuickLinks a:active
{
	color: #FFF;
}

/* CSS for search field. Set height. Min-height for Mozilla only. */
#sfield
{
	min-height: 20px;
}

/* Hack for IE. IE does not understand min-heigt, but understands height. */
* html #sfield
{ 
	height: 20px; 
}

/* Fieldset styles for contact form
================================== */

.zemContactForm fieldset
{
	border: none;
	margin-left: 68px;
	color: #26393D;
}

/* Negative margin left to align legend heading with rest of form in IE. */
.zemContactForm legend
{
	padding: 0.5em 0 0.5em 0;
	width: 60px;
	color: #26393D;
	margin-left: -8px;
}

/* Format labels on the left hand side of boxes. */
.zemContactForm label
{
	float: left;
	width: 60px;
	margin: 0.7em 0 0.7em 0;
	color: #26393D;
	text-align: left;
}

.zemContactForm br 
{
   clear: left;
}

/* Text in front of boxes to lign up with boxes and have distance to next box below. */
.zemContactForm .zemRequired 
{ 
	color: #26393D;
	padding: 0;
	margin: 0;
	margin-bottom: 8px;
}

/* Give distance for submit button from top, left and to bottom. */  
.zemContactForm .zemSubmit 
{ 
	margin: 8px 0 10px 60px;
}

/* Error messages to be displayed without bullet points. Give distance on bottm. Colour red.
Margin and padding to zero to start at beginning of column. */
.zemContactForm ul.zemError li
{
	list-style: none;
	padding-bottom: 6px;
	color: #F03;
	margin-left: 0px;
	padding-left: 0px;
}

/* Display messge sent in red colour. */
.zemThanks
{
	color: #F03;
}


/* Google Map
================================== */

/* Class inside div for google map to position map correctly. 
Overflow hidden to avoid bottom trademark text to go outside div. */
#map
{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 68px;
	width: 420px;
	height: 380px;
	overflow: hidden;
}

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

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Set beackground colour. */
#footerBar
{
	clear: both;
	width: 750px;
	background-color: #40627C;
}

/* Paragraph style for footer text. Centred and smaller. 
Padding top and bottom to even out vertically. White text colour. */
#footerBar p
{
	font-size: 88%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFF;
}