/* Feature presentation. Contains all site-specific styles. 
================================================================= */

/* 
Title: Master styles for screen media
Author: otti@ottimoto.com.au
==================================================================== */


/* Generic
================================== */
/* Sets the generic font and font size for body. Also sets background colour. 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. 
Place bg image for page (peach bar). */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	background-color: #FFF;
	background-image: url(../images/peachbar-page-bg.gif);
	background-repeat: repeat-x;
}


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


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

/* Standard paragraph. Set colour for text. Line-Height for leading. More defined for primaryContent further down. */
p
{
	color: #281B1B;
	line-height: 130%;
}

/* Standard heading h1. Big font. Padding left, right and bottom. Zero margin on top. */
h1
{
	color: #CAA723;
	font-size: 150%;
	padding-left: 20px;
	padding-bottom: 15px;
	padding-right: 40px;
	margin-top: 0px;
}

/* Standard heading h2. Font smaller than h1. Padding left, right and bottom. */
h2
{
	color: #CAA723;
	font-size: 115%;
	padding-left: 20px;
	padding-bottom: 10px;
	padding-right: 40px;
}

/* Minor heading h3. Font smaller than h2. Padding left, right and bottom. */
h3
{
	color: #CAA723;
	font-size: 100%;
	padding-left: 20px;
	padding-bottom: 5px;
	padding-right: 40px;
}

/* Class to format text in bold. */
.p_bold
{
	font-weight: bold;
}

/* Class to format text in italic */
.p_italic
{
	font-style: italic;
}



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

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

/* Links to be burgundy. */
a:link
{
	color: #73001F;
}

/* Visited links to be 60% orange. */
a:visited
{
	color: #F3B56B;
}

/* Hover links to be orange. */
a:hover
{
	color: #EB8308;
}

/* Active links to be orange. */
a:active
{
	color: #EB8308;
}


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

/* Order important for search engines. Calculations: 
310px (sideContent) + 650px (primaryContent) = 960px

/* 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. 
White background colour and place bg filler image (showing left column drop shadows. */
#wrapper
{
	width: 960px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background-color: #FFFFFF; /* change colour */
	background-image: url(../images/wrapper-bg.gif);
	background-repeat: repeat-y;
}


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

/* Top header with same width as wrapper. Set height and bg colour. */
#header
{
	width: 960px;
	height: 143px;
}

/* Header box inside header to allow for margin left and right and also white bg colour. 
Also set height with 5px more than header itself to allow for 5px border bottom. 
White bg colour to cover whats maybe underneath. */
#header #headerBox
{
	height: 138px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #FFFFFF;
	border-bottom: 5px #BC9A89 solid;
}

/* All three images inside headerBox to float left for correct alignment. */
#header #headerBox #logo, #header #headerBox #tagline, #header #headerBox #featureImage
{
	float: left;
}


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

/* Navigation container (navcontainer). Set width and height. */
#navcontainer
{
	width: 960px;
	height: 90px;
}

/* Top navigation. Float left.Padding top and left for good position.  Set width (width - padding left. */
#navcontainer #navlist1
{
	float: left;
	width: 620px;
	padding-top: 35px;
	padding-left: 25px;
}

/* List itmes in top navigation to display inline (horizontal). No bullet points. */
#navcontainer #navlist1 li
{
	display: inline;
	list-style-type: none;
}

/* Float link buttons left as well. Padding left and right (ems for better resizing). Border left for all items.  */
#navcontainer #navlist1 a 
{ 
	float: left;
	padding-left: 0.7em;
	padding-right: 0.7em;
	border-left: 1px #73001F solid;
}

/* Last top navigation item (contact) to have right border. Utilise id in last link. */
#navcontainer #navlist1 a#rightBorder
{
	border-right: 1px #73001F solid;
}

/* Highlight the current page through the class assigned in the body tag and the id assigned 
to each navigation item. Change the colour to orange.*/
.about-us #navcontainer #about-us a, .services #navcontainer #services a, .projects #navcontainer #projects a,
.reports-and-publications #navcontainer #reports-and-publications a, .contact-us #navcontainer #contact-us a
{ 
	color: #EB8308;
}

/* Make top navigational links stay purple when visited. */
#navcontainer a:visited
{
	color: #73001F;
}


/* Search form inside navigation div
========================================================= */

/* First box inside navcontainer for the searchbox. Float left and set width to push navigation to the right. */
#navcontainer #searchbox
{
	float: left;
	width: 300px;
	margin-left: 10px;
}

/* Define fieldst around searchbox. Float left. */
fieldset.search 
{
	float: left;
	padding-top: 10px;
}

/* Both, input field and button, without border and float left. */
.search input, .search button 
{
	border: none;
	float: left;
}

/* Input field. Set text colour. Set width of field and height. 
Additional padding (height+padding+border=18px). Set bg colour to lighter brown and margin right for distance to button. 
Also border around. */
.search input.box
{
	color: #281B1B;
	width: 160px;
	height: 15px;
	padding: 2px 5px 2px 5px;
	background: #E4D7D0;
	margin-right: 5px;
	border: 1px #605853 solid;
}

/* The focus (when clicked inside). No outline and light brown.  */
.search input.box:focus 
{
	background: #E4D7D0;
	outline: none;
}

/* The search button. Set width and height. Place bg image. Set white bg.
Specify type of cursor to be displayed whern hovering over button to "hand".*/
.search button.btn
{
	width: 25px;
	height: 20px;
	cursor: pointer;
	background-image: url(../images/search_button.gif);
	background-repeat: no-repeat;
	background-position: 5px 1px;
	background-color: #FFF;
}

/* Text Search. Line height same as box size. Padding right for distance to box. Padding left. Float left. 
Set colour and font size. */
.searchHeading
{
	float: left;
	line-height: 20px;
	color: #281B1B;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 100%;
}

/* Relative positioned container for absolute positioned image. */
#image_relative
{
	position: relative;
	top: 0px;
	left: 0px;
}

/* Position image absolute inside relative container. Move into correct position from top. */
#image_absolute
{
	position: absolute;
	top: 57px;
	left: 0px;
}


/* Feature peach bar
================================== */

/* Peach bar feature under heading.  Set width and height. */
#peachBar
{
	width: 960px;
	height: 40px;
	background-color: #BF4D34;
	background-image: url(../images/peachbar-bg.gif);
	background-repeat: repeat-y;
}


/* SideContent (left column)
================================== */

/* Two main columns, named in order of importance and display when styles switched off.
First comes the side content on the left hand side. Width 320px. Set minimum height for shorter content. */
#sideContent
{
	float: left;
	width: 320px;
	min-height: 700px;
}

/* Unordered list for secondary navigation items. No bullets or padding. Margin left and right due to Drop Shadow.
Margin top and bottom for nice position. Border on top for container for single border on top of container. */
#sideContent ul#navlist2
{
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-left: 0;
	list-style-type: none;
	border-top: 1px solid #73001F;
}

/* Links in list to display as buttons (display: block). Appropriate padding top and bottom. 
No background colour required since same as page bg. Border bottom only. */
#sideContent #navlist2 a
{
	display: block;
	padding: 0.8em 0em 0.8em 10px;
	border-bottom: 1px solid #73001F;
}

/* Highlight the current page through the class assigned in the body tag and the id assigned 
to each navigation item. Change the colour to orange.*/
.tourism-planning-and-development #sideContent #tourism-planning-and-development a, .tourism-training-and-events #sideContent #tourism-training-and-events a,
.geotourism #sideContent #geotourism a, .cruise-ship-tourism #sideContent #cruise-ship-tourism a,
.current-projects #sideContent #current-projects a, .past-projects #sideContent #past-projects a,
.reports #sideContent #reports a, .books #sideContent #books a, .other-publications #sideContent #other-publications a
{
	color: #EB8308;
}

/* Make secondary navigational links stay purple when visited. */
#navcontainer2 a:visited
{
	color: #73001F;
}

/* Horizontal rule between sections inside sideContent. Border top. Appropriate margins and short. Clear both for correct wrapping. */
.siderule
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #281B1B;
	margin: 30px 20px 30px 20px;
	clear: both;
}

/* Class for book image on home page. Float left to allow for text next to it. Move in from left. 
Set minimum height (also in IE.css). Proper margin and padding. */
#sideContent #book
{
	min-height: 140px;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

/* Padding for p inside sideContent. */
#sideContent #book p
{
	padding-bottom: 5px;
}

/* The book image with border. Float left with round corners. Proper margins. */
.sideimgFloatLeft
{
	float: left;
	margin-right: 25px;
	margin-bottom: 15px;
	margin-top: 2px;
	border: 5px #BC9A89 solid;
	border-radius: 5px;/* CSS3 */
	-webkit-border-radius: 5px;/* Safari and Chrome */
	-moz-border-radius: 5px;/* Firefox */
	-khtml-border-radius: 5px;/* Linux browsers */
}

/* Move div for address panel in from left and top. */
#sideContent #address
{
	margin-left: 30px;
	margin-top: 30px;
}

/* Class for phone number in address panel. Bigger font (as h3), bold and yellow colour. */
.phoneSide
{
	font-size: 115%;
	font-weight: bold;
	color: #CAA723;
}

/* Additional logos on some services pages. */
.sideLogos img
{
	padding-left: 20px;
}


/* PrimaryContent (middle column)
================================== */

/* Secondly the primaryContent with display:inline. This is required for IE6 for correct column display. 
Set width. */
#primaryContent
{
	float: right;
	width: 640px;
	display: inline;
}

/* Define box inside primaryContent. Move in from right. This will allow for vertical line in paragraphs. */
#primaryContent #primaryBox
{
	padding-right: 20px;
}

/* Padding left and right. Also padding bottom for distamce to next paragraph. 
Border right for each section. */
#primaryContent #primaryBox p
{
	padding-left: 20px;
	padding-bottom: 10px;
	padding-right: 40px;
	border-right: 1px #281B1B solid;
}

/* Breadcrumbs inside primaryContent. Align text on right. Padding top. Padding right. Smaller font. No border right. */
#primaryContent #primaryBox #breadcrumbs
{
	padding-top: 4px;
	padding-right: 10px;
	font-size: 75%;
	text-align: right;
	border-right: none;
}

/* Breadcrumbs without border on the right. */
#primaryContent #primaryBox #breadcrumbs p
{
	border-right: none;
}

/* Unordered list inside primary content. Move in from left. Apply complete style as per normal p. 
Border right for each section also here for ul. */
#primaryContent #primaryBox ul
{ 
	padding-left: 35px;
	padding-right: 40px;
	padding-bottom: 10px;
	list-style-type: square; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #281B1B;
	line-height: 130%;
	border-right: 1px #281B1B solid;
}

/* List items inside with more padding from right. */
#primaryContent #primaryBox ul li
{ 
	padding-bottom: 2px;
	padding-right: 20px;
}

/* Float the content images left. Set margin right and bottom for good distance to text. 
Margin top for alignment with text on top. Border around.
Rounded corners for border: border-radius for future (already Opera 10.5 and Chrome), webkit for Safari, moz for Firefox, khtml for Linux. */
.imgFloatLeft
{
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-top: 2px;
	border: 5px #BC9A89 solid;
	border-radius: 5px;/* CSS3 */
	-webkit-border-radius: 5px;/* Safari and Chrome */
	-moz-border-radius: 5px;/* Firefox */
	-khtml-border-radius: 5px;/* Linux browsers */
}

/* Class for the two hp images. Set minimum height (also in IE.css). Border right to continue down. */
.hpimages
{
	min-height: 150px;
	border-right: 1px #281B1B solid;
}

/* Home page images. Same as intext images but also margin left. */
.imgFloatLeftHP
{
	float: left;
	margin-left: 20px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-top: 2px;
	border: 5px #BC9A89 solid;
	border-radius: 5px;/* CSS3 */
	-webkit-border-radius: 5px;/* Safari and Chrome */
	-moz-border-radius: 5px;/* Firefox */
	-khtml-border-radius: 5px;/* Linux browsers */
}

/* Horizontal rule between sections. Border top. Appropriate margins and short. Clear both to avoid wrong wrapping. */
.rule
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #281B1B;
	margin: 10px 400px 20px 20px;
	clear: both;
}

/* Smaller text for footer below primaryContent. No border. */
#primaryFooter
{
	font-size: 80%;
}

/* No border for footer text. */
#primaryContent #primaryBox p#primaryFooter
{
	border-right: none;
}


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

/* Fieldset groups related block. Position properly, set yellow-green border.*/
.zemContactForm fieldset
{
	margin: 5px 40px 0px 20px;
	padding: 0;
	border: 1px #CAA723 solid;
}

/* Define the section heading. 100% font size, small padding around. Also distance from left.
Set text colour to white and background colour to yellow-green. */
.zemContactForm legend
{
	font-size: 90%;
	padding: 5px 15px 5px 15px;
	margin-left: 1em;
	color: #FFF;
	background: #CAA723;
}

/* Label for headings left of form input boxes. Set width, clear left and float left. Blue text. */
.zemContactForm label
{
	position: relative;
	clear: left;
	float: left;
	width: 8em;
	padding-left: 15px;
	margin-right: 5px;
	padding-right: 10px;
	text-align: left;
	color: #281B1B;
}

/* required fields and error elements to have little "R" symbol. */
.zemContactForm label.zemRequired, .zemContactForm label.zemRequirederrorElement
{
	background-image: url(../images/Required.gif);
	background-repeat: no-repeat;
	background-position: 120px;
}

/* Clear the break for proper display. */
.zemContactForm br 
{
   clear: left;
}

/* Margin bottom in input to achieve distance between items. Yellow-green border around input. */	
.zemContactForm input
{
	border: 1px solid #CAA723;
	margin-bottom: 15px;
}

/* Yellow-green border around textarea. */
.zemContactForm textarea
{
	border: 1px solid #CAA723;
}

/* Creates anchor for user in field (Standard Browsers). -> tint when clicked in field. */
input:focus, textarea:focus
{
	background: #EEE6E1;
}

/* Give distance for submit button from top, left and to bottom. Set colour and bg colour. */  
.zemContactForm .zemSubmit
{
	margin: 8px 0 20px 15px;
	background-color: #CAA723;
	color: #FFFFFF;
	padding: 5px 15px 5px 15px;
	border: none;
	font-size: 90%;
}

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

/* Display message sent in red colour. Only works with message overwritten in TXP. */
.zemThanks
{
	color: #BF4D34;
	padding-left: 30px;
}



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

/* Footer with same width as wrapper. Empty. Cleared both sides. 
Footer is required for faux-columns. */
#footer
{
	clear: both;
	width: 960px;
}



/* Skiplinks 508 Requirements
================================== */
.skiplist 
{
	margin: 0; 
	padding: 0
} 
.skip 
{
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip 
{
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a 
{
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active 
{
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover 
{
	cursor: default
}


/* Self-Clear Floats
================================== */
/* Clear both after floating boxes anywhere in all browsers. */
.clearing {
  height: 0;
  clear: both;
}