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

/* Sets the generic font and font size for body. Also sets background colour. 
Also zeros down margin and padding. Center text to center whole layout in IE5.5. 
Than bring back margin for top. Graphic as background image for whole site. */
body
{
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	background-color: #F1E6CA;
	margin-top: 30px;
}

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

/* Generic paragraph style with margins and padding.
Margin for distance left and right. White colour. Font size same as body (not specified). */
p
{
	margin: 10px 30px 0px 10px;
	padding: 0px;
	color: #FFF;
	font-weight: normal;
}

/* Heading 1. Normal h1 used and more top margin. 
Bigger font size. Normal font-weight. Bottom padding for bigger distance to text. */
h1
{
	margin: 20px 30px 0px 10px;
	padding-bottom: 7px;
	font-size: 130%;
	color: #FFF;
	font-weight: normal;
}

/* Font size 100% for breadcrumbs inside boxPrimary. */
.p_breadcrumbs
{
	font-size: 100%;
	padding-left: 0;
	color: #4B596F
}

/* Layout wrapper
================================== */

/* Order important for search engines. Calculations: 
395px(width sideContent) + 5px Gutter + 380px(width primary)

/* 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 (blue) on all pages behind rest of content. */
#wrapper
{
	width: 780px;
	margin: 0 auto;
	background-color: #F1E6CA;
	padding: 0;
	text-align: left;
	background-image: url(../images/Main_Images/Main_Image_Base.jpg);
	background-repeat: no-repeat;
	background-position: 0px 207px;
}

/* Layout header
================================== */

/* Upper most header contains secondary navigation on the right. */
#header_zero
{
	width: 780px;
	height: 20px;
	background-color: #F1E6CA;
}

/* Top header with same width as wrapper and defined height. 
Position Logo as backgroun dimage on top-left. */
#header_one
{
	width: 780px;
	height: 112px;
	background-color: #F1E6CA;
	background-image: url(../images/Australis_Logo_150_112.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

.flash_header
{
	margin-left: 150px;
}

/* Second header with same width as wrapper and defined height for navigation. */
#header_two
{
	width: 780px;
	height: 33px;
}

/* Third header for gap between navigation and content. Holds breadcrumbs. */
#header_three
{
	width: 780px;
	min-height: 32px;
	background-color: #F1E6CA;
}

/* Hack for IE 6 or smaller version, to achieve same height for header three as in mac browsers. */
* html #header_three
{
	height: 42px;
}

/* Class for gallery links for inspiration. */
.header_three_gallery_links
{
	text-align: center;
	font-size: 100%;
}


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

/* Wrapper for dropdown navigational menu. No left margin to start left. 
Set height to allow for filler height positioned as background image and repeated in x.*/
#menuwrapper
{
	margin-left: 0px;
	height: 33px;
	background-image: url(../images/Navigation_Filler.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* 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;
	padding-top: 3px;
	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. 
Border right creates separator between links. Smaller font-size for menu links.
Set colour for border and links. Colour for text is white. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 5px 35px 5px 35px;
	border-right: 1px #4B596F solid;
	font-size: .9em;
	color: #FFF;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links. Background image (symbol) positioned with no repeat. */
#menubar a.trigger
{
	padding: 5px 35px 5px 35px;
	background-image: url(../images/Down_Arrow.gif);
	background-repeat: no-repeat;
	background-position: 90% 60%;
}

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

/* SUB-MENU links. Turn off the right border -> otherwise inherited from link css. 
Set padding to suiit drop down indents. */
#menubar ul li a
{
	border-right: 0;
	padding: 7px 0px 7px 7px;
	background-color: #7C270F;
}

/* 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.
Border set left in white. */
#menubar li ul
{
	position: absolute;
	display: none;
	background-color: #FFFFFF;
	border-left: 1px #FFF solid;
}

/* 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;
	background-color: #7C270F;
	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: #7C270F;
	padding-top: 0px;
}

/* 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. */
#menubar li:hover ul a, #menubar li.hvr ul a 
{
	color: #FFF;
	background-color: #4B596F;
	border-bottom: 1px #FFF solid;
}

/* 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: #7C270F!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;
}


/* Layout primaryContent One Column
================================== */
/* Specifying oneColLayout in the body will activate the following div.
Float left, set width to 780. Display inline to generate one inline box.
Set fixed height. */
#primaryContent
{
	float: left;
	width: 780px;
	height: 383px;
	display: inline;
	margin: 0;
	background-color: #4B596F;
}

/* This is the id for the flash content in the galleries. */
#flashcontent 
{
	width: 780px;
	height: 383px;
}

/* This is the id for the flash content in the header. */
#flashcontent_head
{
	width: 400px;
	height: 112px;
}

/* Layout primaryContent Two Columns (right)
================================== */
/* Specifying twoColLayout in the body will activate the following div.
Float left, set width to 380. Margin on left to allow for side bar with 400px width. */
#twoColLayout #primaryContent
{
	float: left;
	width: 380px;
	height: 383px;
	margin: 0 0 0px 400px;
	background-color: #4B596F;
}

/* Three boxes under text acting as links. Float left with margin or padding to align 
with text above and give distance to each other (Padding for first box. Other boxes with margin). 
Set width (same as image size). Set height to incorporate text. */
#primaryContent #box1
{
	float: left;
	padding-left: 10px;
	width: 73px;
	height: 100px;
}

#primaryContent #box2
{
	float: left;
	margin-left: 40px;
	width: 73px;
	height: 100px;
}

#primaryContent #box3
{
	float: left;
	margin-left: 40px;
	width: 73px;
	height: 100px;
}

/* Text under image links. Smaller font size to avoid wrap around. */
.p_text
{
	margin: 0;
	font-size: 82%;
}

/* Class for list items with different padding and bullet image. */
.primaryList li p
{
	margin: 3px 30px 0px 10px;
}


/* Layout sideContent (left)
================================== */
/* Side content on the left hand side. 
Width 400px and negative margin of -780px to the left. */
#sideContent
{
	float: left;
	width: 400px;
	height: 383px;
	margin: 0 0 0px -780px;
}

/* Three rows to hold the small images on the left side. All float left with set width
and padding left. First row with left margin. Third row wider than first rows to hold 4th image. */
#sideContent #row1
{
	float: left;
	padding-left: 20px;
	margin-top: 20px;
	width: 280px;
	height: 115px;
}

#sideContent #row2
{
	float: left;
	padding-left: 20px;
	width: 280px;
	height: 115px;
}

#sideContent #row3
{
	float: left;
	padding-left: 20px;
	width: 360px;
	height: 115px;
}

/* Boxes inside rows in sideContent. All float left with set width and height. */
#sideContent #sideBox1, #sideContent #sideBox2, #sideContent #sideBox3, #sideContent #sideBox4,
#sideContent #sideBox5, #sideContent #sideBox6, #sideContent #sideBox7, #sideContent #sideBox8,
#sideContent #sideBox9, #sideContent #sideBox10
{
	float: left;
	width: 85px;
	height: 105px;
}

/* Box for additional text under single images. */
#sideContent #textBox
{
	float: left;
	width: 200px;
	height: 105px;
}

/* Text above small images on the left. Smaller font size to avoid wrap around. Left indent. */
.pLeft_text
{
	margin: 0;
	font-size: 82%;
	color: #FFF;
	padding-left: 0px;
}


/* Links in primaryContent
================================== */
/* These are the links defined for inside text and under text. */
#primaryContent a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
	font-weight: bold;
}

#primaryContent a:link
{
	color: #F1E6CA;
}

#primaryContent a:visited
{
	color: #AB5D3C;
}

#primaryContent a:hover, a:active
{
	color: #7C270F;
}


/* 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: #4B596F
}

a:visited
{
	color: #AB5D3C;
}

a:hover, a:active
{
	color: #7C270F;
}


/* Links inside header
================================== */

/* Navigational links in header. Class for each link inside boxHeader id. 
No underline and set font size. Also background colour to be inherited. 
Then set colour for all link states. Place background image for symbol in all stages. */

#boxHeader
{
	margin-left: 470px;
}

#boxHeader a.linkZero, #boxHeader a.linkOne, #boxHeader a.linkTwo, #boxHeader a.linkThree
{
	text-decoration: none;
	padding: 2px 10px 2px 15px;
	border-right: 1px #4B596F solid;
	font-size: .85em;
}

/* Set colour for all link stages for all three classes inside boxHeader id. */
#boxHeader a.linkZero:link, #boxHeader a.linkOne:link, #boxHeader a.linkTwo:link, #boxHeader a.linkThree:link
{
	color: #4B596F;
}

#boxHeader a.linkZero:visited, #boxHeader a.linkOne:visited, #boxHeader a.linkTwo:visited, #boxHeader a.linkThree:visited
{
	color: #AB5D3C;
}

#boxHeader a.linkZero:hover, #boxHeader a.linkOne:hover, #boxHeader a.linkTwo:hover, #boxHeader a.linkThree:hover,
#boxHeader a.linkZero:active, #boxHeader a.linkOne:active, #boxHeader a.linkTwo:active, #boxHeader a.linkThree:active
{
	color: #7C270F;
}

/* Set background image for Zero link. Different position in each stage for correct colour. */
#boxHeader a.linkZero:link
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 1px;
}

#boxHeader a.linkZero:visited
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -99px;
}

#boxHeader a.linkZero:hover, #boxHeader a.linkOne:active
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -49px;
}

/* Set background image for first link. Different position in each stage for correct colour. */
#boxHeader a.linkOne:link
{
	background-image: url(../images/Downloads3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 1px;
}

#boxHeader a.linkOne:visited
{
	background-image: url(../images/Downloads3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -99px;
}

#boxHeader a.linkOne:hover, #boxHeader a.linkOne:active
{
	background-image: url(../images/Downloads3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -49px;
}

/* Set background image for second link. Different position in each stage for correct colour. */
#boxHeader a.linkTwo:link
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 1px;
}

#boxHeader a.linkTwo:visited
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -99px;
}

#boxHeader a.linkTwo:hover, #boxHeader a.linkTwo:active
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -49px;
}

/* Set background image for third link. Different position in each stage for correct colour. */
#boxHeader a.linkThree:link
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 1px;
}

#boxHeader a.linkThree:visited
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -99px;
}

#boxHeader a.linkThree:hover, #boxHeader a.linkThree:active
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -49px;
}


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

/* Fieldset groups related block. */
fieldset
{
	margin-left: 10px;
	padding: 5px;
	color: #DBDEE2;
	background-color: #A5ACB7;
	width: 310px;
}

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

/* Define length of input boxes. */
input
{
	width: 290px;
}

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

/* CVlass for "required" text. */
.required
{
	font-size: 80%;
	color: #7C270F;
}

/* Style the submit button. */
.button
{
	margin-left: 0px;
	background-color: #A5ACB7;
	color: #DBDEE2;
	width: 150px;
}

/* Red inline text for php messages. Used with span in html. */
#pRed 
{ 
	color: #7C270F;
}

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

/* Class inside div for google map to position map correctly. */
.ns
{
	padding-top: 10px;
	margin-left: 10px;
	padding-bottom: 15px;
}



/* Footer
================================== */
/* Footer with same width as wrapper. Cleared both sides. Footer contains only link to ottimoto. 
Padding on top to give distance to content. Bottom padding for distance to line. */
#footerBar
{
	clear: both;
	width: 780px;
	padding-top: 20px;
	padding-bottom: 5px;
	border-bottom: 2px #4B596F solid;
}

/* Paragraph style for footer. Font size slightly smaller than standard. Margin left to zero. */
#footerBar p
{
	font-size: 90%;
	color: #4B596F;
	margin-left: 0;
}

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