/* 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. */
body
{
	text-align: center;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 90%;
	background-color: #C4BBB3; /* change colour */
}


/* 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. */
p
{
	color: #45594C;
	line-height: 135%;
}

/* Standard heading h1. Big font. Distance from top. Padding left, top and bottom. */
h1
{
	color: #45594C;
	font-size: 145%;
	padding-top: 15px;
	padding-left: 50px;
	padding-bottom: 10px;
}

/* Standard heading h2. Bigger font. */
h2
{
	color: #45594C;
	font-size: 135%;
}

/* Minor heading h3. Smaller font. */
h3
{
	color: #45594C;
	font-size: 120%;
}

/* Minor heading h3. Smaller font. */
h4
{
	color: #45594C;
	font-size: 100%;
}

/* 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 brown. */
a:link
{
	color: #893C2E;
}

/* Visited links to be 80% brown. */
a:visited
{
	color: #A16358;
}

/* Hover links to be 80% brown. */
a:hover
{
	color: #A16358;
}

/* Active links to be 80% brown. */
a:active
{
	color: #A16358;
}


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

/* Order important for search engines. Calculations: 
5px+270px (sideContent) + 680px+5px (primaryContent) = 960px

/* Main wrapper with centres the whole page with set width. Margin top to bring whole page down. 
Re-align the text again to the left, after it was all centred in body tag for IE5.5. 
Place faux column in bg with y repeat. Move 5px in from left. */
#wrapper
{
	width: 960px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 0;
	text-align: left;
	background-image: url(../images/gillon-boshart-faux-column.gif);
	background-repeat: repeat-y;
	background-position: 5px 0px;
}


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

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

/* Move image (logo) 5px to left for proper position with padding. Float left. 
Image to high even the correct height is set. 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 img
{
	padding-left: 5px;
	vertical-align: bottom;
	float: left;
}


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

/* Navigation container (navcontainer). Set width and height. Float left. No margin/padding right, since it equals up. */
#navcontainer_prim
{
	width: 680px;
	float: left;
	height: 101px;
}

/* Unordered list for navigation. No bullet points. Center text. */
#navcontainer_prim ul
{
	list-style-type: none;
	text-align: center;
}

/* List items inside navcontainer. Display block to show links in one line. Float left and align text to center again. */
#navcontainer_prim ul li
{
	display: block;
	float: left;
	text-align: center;
	
}

/* Links list items. Display block again to display next to each other. Set height to same height as navcontainer 
minus 1px for white gap. Set width of each button and border right. Set text colour, no bullet points and align text to center. 
Place gradient bg image here on the list items. */
#navcontainer_prim ul li a, #navcontainer_prim ul li a:visited
{
	display: block;
	height: 100px;
	width: 169px;
	border-right: 1px #FFFFFF solid;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	background-image: url(../images/gillon-boshart-nav-bg.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
}

/* Text itself wrapped inside span for each primary navigation link/ Again display block and move down to suit. */
#navcontainer_prim ul li a span
{
	display: block;
	padding-top: 55px;
}

/* Move bg image on hover and active. */
#navcontainer_prim ul li a:hover, #navcontainer_prim ul li a:active
{
	background-position: 0px -100px;
}

/* Highlight the current page through the class assigned in the body tag and the id assigned 
to each navigation item. Change position of bg image.*/
.residences #navcontainer_prim #residences a, .additions #navcontainer_prim #additions a, 
.galleries #navcontainer_prim #galleries a, .contact #navcontainer_prim #contact a
{
	background-position: 0px -100px;
}


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

/* Heading above each group of secondary links. Proper padding. */
#navcontainer_sec h4
{
	padding-left: 18px;
	padding-bottom: 2px;
}

/* Unordered list for secondary navigation items inside left column for gallery pages only. No bullets. */
#navcontainer_sec ul
{
	list-style-type: none;
}

/* Links in list to display as buttons (display: block). Appropriare padding around. */
#navcontainer_sec a
{
	display: block;
	padding: 5px 0px 5px 35px;
}

/* Underline the nav text on hover and active states. */
#navcontainer_sec a:hover, #navcontainer_sec a:active
{
	text-decoration: underline;
}

/* Highlight the current page through the class assigned in the body tag and the id assigned 
to each navigation item. Change colour of navigatio text. */
.churchlands #navcontainer_sec #churchlands a, .woodlands #navcontainer_sec #woodlands a, .rossmoyne #navcontainer_sec #rossmoyne a,
.subiaco #navcontainer_sec #subiaco a, .wembley1 #navcontainer_sec #wembley1 a, .dalkeith #navcontainer_sec #dalkeith a,
.wembley2 #navcontainer_sec #wembley2 a, .before-after #navcontainer_sec #before-after a
{
	color: #AD776D;
	text-decoration: underline;
}



/* PrimaryContent (right column)
================================== */

/* Three main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. */
#primaryContent
{
	float: left;
	width: 960px;
	display: inline;
}

/* Specifying twoColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. Set min-height for shorter pages (photo galleries).
Float right, set width to 680px. Margin right to move in. Place vertical text. */
#twoColLayout #primaryContent
{
	float: right;
	margin-right: 5px;
	width: 680px;
	min-height: 570px;
	border-top: 1px #45594C solid;
	background-image: url(../images/fine-residential-builders.gif);
	background-repeat: no-repeat;
	background-position: 642px 300px;
}

/* Hack for IE. IE does not understand min-heigth, but understands height. */
* html #twoColLayout #primaryContent
{ 
	height: 530px; 
}

/* For all gallery pages, the vertical text needs to be higher up. */
body#twoColLayout.churchlands #primaryContent, body#twoColLayout.rossmoyne #primaryContent,
body#twoColLayout.woodlands #primaryContent, body#twoColLayout.subiaco #primaryContent, body#twoColLayout.wembley1 #primaryContent,
body#twoColLayout.dalkeith #primaryContent, body#twoColLayout.wembley2 #primaryContent, body#twoColLayout.before-after #primaryContent
{
	background-position: 642px 55px;
}

/* Format taetx inside primaryContent. Padding left and after each paragraph. 
Margin (not padding) on right ot allow for vertical image. */
#primaryContent p
{
	padding-left: 80px;
	padding-bottom: 8px;
	margin-right: 80px;
}

/* Set height for main flash animation. Also allow for margins top and left for correct position. */
#primaryContent #flashContent
{
	height: 230px;
	margin-left: 10px;
	margin-top: 10px;
}

/* Paragraph style for alternative text if flash is not available. */
#primaryContent #flashContent p
{
	padding-left: 0px;
}

/* Set height for gallery flash animation. Also allow for margins top and left for correct position. */
#primaryContent #gallery
{
	height: 550px;
	margin-left: 50px;
	margin-top: 10px;
}

/* Gallery Paragraph style for alternative text if flash is not available. */
#primaryContent #gallery p
{
	padding-left: 30px;
}

/* Horizontal rule for primaryContent when required. */
.rulePrimary
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #A47719;
	margin: 0px 50px 20px 50px;
}


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

/* Last comes the side content on the left hand side. Width 270px. Margin left to move in. */
#sideContent
{
	float: left;
	margin-left: 5px;
	width: 270px;
	border-top: 1px #A47719 solid;
}

/* Format paragraphs inside left sideContent. */
#sideContent p
{
	padding-left: 18px;
	padding-right: 18px;
}

/* Home button in extra div. Display block for button. Margin top and bottom. Move text outisde viewport. 
Set height for one half of button (bottom half will move in on hover, active and current. Place bg graphic. */
#sideContent .homebutton a
{
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
	text-indent: -99999px;
	height: 22px;
	background-image: url(../images/gillon-boshart-home-btn.gif);
	background-repeat: no-repeat;
	background-position: 18px 0px;
}

/* Move bg imgae upo for hover and active state. */
#sideContent .homebutton a:hover
{
	background-position: 18px -22px;
}

.home #sideContent .homebutton a
{
	background-position: 18px -22px;
}

/* Apply padding on top for all images inside sideContent (home button, and logos). */
#sideContent img
{
	padding-top: 10px;
}

/* Horizontal rule for sideContent when required. */
.ruleSide
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #A47719;
	margin: 0px 18px 10px 18px;
}


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

/* Fieldset groups related block. Position properly, set dark green border around. */
#primaryContent fieldset
{
	margin: 0px 80px 0px 50px;
	border: 1px #2D2C18 solid;
}

#primaryContent fieldset p
{
	padding-left: 30px;
}

/* Define the section heading. 100% font size, small padding around. Also distance from left.
Set text colour to white and background colour to blue. */
#primaryContent legend
{
	font-size: 1em;
	padding: 5px 15px 5px 15px;
	margin-left: 30px;
	color: #ffffff;
	background: #2D2C18;
}

/* Label display block to show underneath. */
#primaryContent fieldset label
{
	display: block;
}

/* Width for input fields. */
#primaryContent fieldset input
{
	width: 325px;
}

/* Hide scrollbar in textarea. And set width. */
#primaryContent textarea
{
	overflow: auto;
	width: 325px;
}

/* Background colour when clicking in field. */
#primaryContent input:focus, textarea:focus
{
	background-color: #DADEDB;
}

/* Class for "required" text in red. */
#primaryContent .required
{
	padding-top: 8px;
	color: #F03;
	font-size: 100%;
}

/* Style the submit button. */
#primaryContent .button 
{
	background-color: #2D2C18;
	color: #FFFFFF;
	border: none;
	padding: 5px;
	width: 332px;
}

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



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

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. Set height.
Place faux column in bg with y repeat. Move 5px in from left. */
#footer
{
	clear: both;
	width: 960px;
	height: 25px;
	background-image: url(../images/gillon-boshart-faux-column-footer.gif);
	background-repeat: repeat-y;
	background-position: 5px 0px;
}

/* Format text inside footer. Line height to vertically center text inside footer. */
#footer p
{
	font-size: 80%;
	text-align: left;
	padding-left: 325px;
	line-height: 25px;
}


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