/*
 * @name: Layout
 * @site: http://www.stbarbara.com.au
 * @author: RBurnie, Hugeobject, http://www.hugeobject.com.au
 */
 

/* = RESET = ==================================================================================== */
* {
	margin: 0;
	padding: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
table {
	border-collapse: collapse;
}
th, td { vertical-align: top; }

/* = TOOLS = ==================================================================================== */
/* == CLEARFIX == */
.clearfix:after { 
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
.clearfix {  
    display: inline-block;  
} 
/* NB: html must have a xmlns attribute */
html[xmlns] .clearfix {  
    display: block;  
}  
* html .clearfix {  
    height: 1%;  
} 

/* =============================================================================================== */

body {
	background: #fff url(../images/bg_body.jpg) top left repeat-x;
	font-size: 0.8em;
}
div#total_content {
	width: 992px;
	background: #fff url(../images/left-bg.gif) 15px 80px repeat-y;
	margin: 0 auto;
        padding: 0;
}
p#pageupFooter {
	display: block;
	width: 992px;
	margin: 0 auto;
	clear: both;
	text-align: center;
	font-size: 8pt; /* PageUp min size requirement */
}
/* = HEADER = ==================================================================================== */
div#header {
	width: 962px;
	height: 88px;
	margin: 0 auto;
	background: #fff url(../images/bg_header.jpg) no-repeat;
	position: relative;
}
div#header h1 {
	width: 360px;
	height: 70px;
	padding: 0;
	position: absolute;
	top: 10px;
	left: 20px;
	background: #fff url(../images/logo_stbarbara_new.png) no-repeat;
}
div#header h1 a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

/* = MAIN NAVIGATION = =========================================================================== */
div#nav_main {
	width: 962px;
	margin: 0 auto;
	background: #fff url(../images/bg_main_menu_hover.jpg) no-repeat;
	background-position: 0 0;
}
/* this used by JS */
div.navunhover {
	background-image: url(../images/bg_main_menu.jpg) !important;
}
/* = CONTENT = =================================================================================== */
div#content {
	width: 962px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	/*background: url(../images/bg_orange_box.gif) left bottom no-repeat;*/
	background: url(../images/left-btm.png) left bottom no-repeat;
	_background-image: url(../images/left-btm-ie6.gif);
}
/* bind with clearfix */
div#content:after { 
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
div#content { 
	/*overflow: hidden;*/
 
} 
/* NB: html must have a xmlns attribute */ 
/* had to remove this to get the div#sub_1 orange background image working in all browsers */
/*html[xmlns] div#content {  
    display: inline;  
}  */
* html div#content {  
    height: 1%;  
    display: inline-block;  
} 

/* == MAIN == ____________________________________________________________________________________ */
div#main {
	float: left;
	width: 442px; /* 502 - 60(padding) */
	height: 540px;
	margin-left: 230px;
	padding: 10px 22px 0 22px; 
	/* was 30px but had to change it for the new design to fit in with the rest of the measurements */
}
div[id=main] {
	min-height: 500px;
	height: auto !important;
}
* html div#main {
	display: inline;
}
* html div#sub_2 {
	display: inline;
}

/* tables */
div#main table {
	margin-bottom: 0.2em;
}
div#main table td.emphasis {
	font-weight: bold;
	padding-left: 0;
}
div#main table td {
	padding-left: 15px;
	border: 1px solid #fff;
}
_div#main table.no-borders {
	border: 1px solid #fff;
	}
div#main table.no-borders td.emphasis {
	width: 100px;
	}

/* == SUB 1 == ___________________________________________________________________________________ */
div#sub_1 {
	float: left;
	width: 236px;     /*230px*/
	margin-left: -716px;
	/*
	margin-bottom to prevent going over the bottom curve
	*/
	margin-bottom: 100px;
	/*
	NB: only way to acheive the correct 10px gap in this instance is with a border
	this is because of the oramge tiled bg
	*/
	border-top: 10px solid #fff;
	
	color: #fff;
	overflow: hidden;

	padding-top: 20px;
	background: #F07C00 url(../images/local-nav-bg.hif) repeat-y;
}

div#sub_1 div#left_content img {
	padding: 0 20px 0 0;
}

/* == SUB 2 == ___________________________________________________________________________________ */
div#sub_2 {
	float: right;	
	width: 242px;	
	padding-top: 2px; 
	/* 
	so the decorated elements line up
	NB: any other element will need 8px margin-top if first in sub_2 
	*/
}
div#sub_2 img {
	margin-bottom: 10px;
}
div#sub_2 p img {
	margin: 0;
}



	
* html div#sub_2 {    /*to get it to work in ie6 */
	height: 1%;
	}	

/* === VARIATIONS === ---------------------------------------------------------------------------- */
div#sub_2.coins {
	padding-bottom: 190px;
	background: url(../images/sub-img-coins.jpg) bottom center no-repeat;
}
div#sub_2.gold-gizmo {
	padding-bottom: 100px;
	background: url(../images/gold-gizmo.jpg) bottom center no-repeat;
}


/* = FOOTER = ==================================================================================== */
#footer {
	width: 962px;
	margin: 0 auto;
	clear: both;
	background: #fff;
	
	border-top: 40px solid #fff;
}
/* * html div#footer {
	display: inline-block;
	}*/
#footer p#language {
	float: left;
}
#footer p#copy {
 	float: left;
 	margin-left: 15px;
	width: 560px;
	text-align: right;
	padding-right: 5px;
}
#footer p#privacy-site {
	float: left;
	width: 210px;
	padding-left: 20px;
}

/* = HOME SPECIFIC RULES = ======================================================================== */
div#content.home {
	background: #fff;
}
div#content.home div#main {
	width: 715px;/* !!Had to change to 715px to accommodate the new design. 962 - 230 - 12 padding-right (removed sub_1) */
	padding: 0;
	padding-right: 5px;
	margin-left: 0;
	float: left;
}

* html div#content.home div#main {
	padding-right: 0;
	/*margin-left: 15px;*/
	}
div.csc-textpic img {
	/*padding-bottom: 7px;*/
}
div#flash {
	width: 715px;
	height: 272px;
	background: #fff;
	padding-top: 10px;
}
div#main div.three-cols {
	margin: 2px 0 0 -4px;
	width: 723px;
}
div.three-cols div.col {
	width: 239px;
	padding-right: 1px;
	float: left;
	overflow: visible;
}
div.three-cols div.col-3 img, div.three-cols div.col-2 img {
	padding: 3px 0;
}
div.three-cols img.button {
	padding: 2px 0 0 0;
	float: right;
}
div.three-cols div.col-2 p.switch_op img.button { 
/* the design img places the "go" button next to the link in THIS column, not to the right */
	float: none;
	padding-left: 10px;		
	padding-top: 5px;
        vertical-align: bottom;
}
div.three-cols div.col-2 p.switch_op {
	margin-top: -15px;
	}
div.three-cols div.col-3 img.button {
	padding-right: 15px;
	}
* html div.three-cols div.col-2 p.switch_op {
	margin-top: -35px;
	}
p.switch_op a:link {
	float: left;
}

/*  CRISIS */
div.three-cols div.crisis {
	width: 236px !important;
	margin: 7px 0 0 6px !important;
	background: #f07d00 !important;
}
div.three-cols div.crisis div.box2 { background: transparent !important; width: auto !important;}
div.crisis h2 {
	padding-top: 6px !important;
	margin-bottom: 2px !important;
	font-size: 2.3em !important;
	line-height: 1em !important;
	color: #fff !important;
	border-color: #fff !important;
}
div.crisis a,
div.crisis a:link,
div.crisis a:hover,
div.crisis a:visited,
div.crisis a:visited:hover { color: #fff !important; }

/* = BOXES IN DIV.THREE-COLS AND DIV#SUB_2 = ======================================================================== */
div.box_top {
	background: #fff url(../images/bg_box_top_3.jpg) left top no-repeat;
	color: #f07c00;
	width: 230px;
	float: left;
}

div.box_bottom {
	background: #fff url(../images/bg_box.jpg) left top no-repeat;
}

div#sub_2.box_bottom,
div#content div#sub_2 div.box_bottom {
	background: #fff url(../images/bg_box_bottom_3.jpg) left bottom no-repeat;
	width: 230px;
	height: 36px;
	margin-bottom: 10px;
}
div.box_bottom ul,
div.box_bottom table,
div.box_bottom img,
div.box_bottom p {
	float: left;
}

div#sub_2 div.box1 {
	background: #fff url(../images/bg_box_tile.png) top left repeat-y;
	width: 246px;
	margin-bottom: 10px;
	margin-left: 4px;
	_margin-left: 0;
}
div#sub_2 div.box2 {
	background: url(../images/bg_box_top.png) left top no-repeat;
	width: 246px;
}
div#content.home div.box2 {
	background: url(../images/bg_box_top.png) left top no-repeat;
	}
body.home div#sub_2 div.box2 {
	width: 241px;	
	}

div#content.home div.box1 {
	background: #fff url(../images/bg_box_tile.png) top left repeat-y;
}


/*
[rb] TEMPORARY GALLERY STYLE
*/
div#temp_galleries_thumbs img {
	width: 120px;
	height: 80px;
	float: left;
	margin: 5px;
}

/*
Fiddly overwrites for typo3 css classes 
for the "image" type block in sub_2
*/
div#sub_2 div.csc-textpic {
	margin-top: 8px;
	/*
	this will sort out layout if its the first item in sub_2
	*/
}
div.csc-textpic-caption-l dd {
	padding-left: 16px;
}



/* video link */
div.play-video {
	padding: 0 10px 0 20px;
}
div.play-video img {
	padding: 1px 0;
}
div.play-video img.play-btn {
	float: right;
	margin-top: -3px;
}
div.video {
	margin-bottom: 20px;
}

div.galleries p {
	width: 136px;
	height: auto;
	_height: 1%;
	float: left;
	margin: 10px;
	padding: 0;
}
div.galleries a {
	display: block;
	width: 120px;
	height: auto;
	_height: 1%;
	margin: 0;
	padding: 8px;
	position: relative;
}
div.galleries br { display: none; }
div.galleries span {
	display: block;
	width: 136px;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url(../images/gallery-cover.gif) no-repeat;
	margin:0;
	padding-top: 105px;
	text-align: center;
}

div#anual_reports_box p {
	margin:0;
	padding:0;
	text-align:right;
}
div#anual_reports_box p img {
 	padding:0;
	margin-top: -1px;
	margin-bottom: 4px;
	_margin-top: -4px;
}