/* @override http://localhost:8888/global/styles/GlobalScreen.css */

/* GlobalStyle.css - Built, with the able assistance of Steve Harrison, to help make the Wamboin Community Association site look beautiful */

/*
	 When overriding the following 'global' styles with LocalScreen.css styles, keep in mind the cascading
	 precedence rules:
	 
	 Step 1:
		a. Count the number of ID attributes in the selector
		b. Count the number of CLASS attributes in the selector
		c. Count the number of HTML tag names in the selector
		
	 Step 2:
	 	Write the three numbers in exact order with no spaces or commas to obtain a three digit number.
	 	(Note, you may need to convert the numbers to a larger base to end up with three digits.)
	 	The final list of numbers corresponding to selectors will easily determine specificity with
	 	the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

			#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100
			UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013
			LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011
			LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001
*/

/* @group Base Styles */

/* Underlying style defaults */

body {
	font: 10pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #666666;
	text-align: left;
	background: black url(/global/images/bg-80.jpg) repeat-x 0 115px;
	margin: 0;
}

.headerBase {
	height: 115px;
	margin-bottom: -115px;
	border-bottom-style: ridge;
	background: #212617;
	border-bottom-color: #424d2e;
}

/* This is part of the hack required to get IE to correctly handle .png files */

img, div {
	behavior: url(/global/iehack/iepngfix.htc);
}

/* These are the wrappers for the individual background elements for the different site areas */

.wrapper {
	background-color: rgba(97,114,152,0.33);
	margin: auto;
	width: 1010px;
	margin-top: 0;
	padding-top: 5px;
}

.blackWrapper {
	margin: auto;
	width: 1010px;
	margin-top: 0;
	padding-top: 5px;
}

/* Set the colours for links */

a { color: #2460d4; text-decoration: none; }
a:hover { color: navy; }
a:active { color: #080032; }

/* @end Base Styles */

/* @group Header */

.WCAHeader {
}

.headerTop {
}

.headerContent{
	width: 1010px;
	height:  126px;
	position: relative;
	margin-top: -5px;
}

.headerTitle {
	margin-left: 20px;
	padding-top: 20px;
}

.headerTitle img {
	height: 50px;
	width: 167px;
}

#WCALogoX {
	height: 80px;
	width: 167px;
	margin-top: -15px;
	margin-bottom: -15px;
}

#headerTitleText {
	font: 24pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #fff;
	margin-left: 40px;
	vertical-align: 15px;
}

.navBar {
	position: relative;
	text-align:right;
	padding-top:2px;
	padding-right: 45px;
	bottom: 10px;
}

.navBar ul {
}

/*	left: 410px; */

.navBar a { color: #ccc; }
.navBar a:hover { color: #fff; }

.navBarElement {
	display: inline;
	padding-left: 6px;
	padding-right: 8px;
}

#homeNav, #aboutNav, #contactNav, #bookmarkNav, #searchNav {
	border-right: 1px solid #666666;
}

#searchLabel {
	padding-left: 10px;
	padding-right: 0px;
}

#googleSearchBox {
}

.headerBottom {
}

/* @end Header Styles */

.content {
}

/* @group Footer */

.WCAtagLine {
	font: 8pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #ccc;
}

.WCAtagLine ul {
	margin-left: -25px;
}

/* My Comment */

/* The links in the copyright are not a special colour */

.WCAtagLine a { color: #999; }
.WCAtagLine a:hover { color: #fff; }

.tagLineElement {
	display: inline;
	padding-left: 6px;
	padding-right: 8px;
}

/* The copyright tag */

#copyrightNav {
	border-right: 1px solid #444444;
}

/* The ABN */

#abnNav {
	border-right: 1px solid #444444;
	color: #999;
}

.tagLine a { color: #ccc; }
.tagLine a:hover { color: #fff; }

/* @end Footer Styles */

/* @group Menu Styles */

/* Left Side Menu */

.leftSideBar {
	position: absolute;
	width: 210px;
}

/* rightt Side Menu */

.rightSideBar {
	position: absolute;
	width: 225px;
	margin-left: 765px;
}

/* Set up our default list styles */

.leftSideBar ul li {
	list-style-type: none;
	margin-left: -30px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #444444;
}

.leftSideBar ul li ul {
	padding-left: 0px;
}

.leftSideBar ul li ul li {
	margin-left: 0px;
	padding-top: 5px;
	padding-bottom: 2px;
	border-bottom: none;
}

/* Styles for Right Sidebar content */

.rightSideBar img {
	margin: auto;
	display: block;
}

.rightSideBar a { color: #999; }
.rightSideBar a:hover { color: #2460d4; }

.sideBarElement {
	margin-top: 25px;
}

.sideBarText {
	color: white;
	text-align: center;
}

/* Turn off sub-menus by default */
/* Then display the approrpiate menu items */

.MenuLink {
	display: none;
}

/* Now set the appropriate colours etc. on the individual options */
/* Maybe this should be done using some sort of breadcrumb display... */

.RootLink a { color: #999; }
.RootLink a:hover { color: #fff; }
.RootLink a:active { color: #333; }

/* There's a bit of stuffing around here to get things right */
/* We have to colour things down the tree to get an 'embedded' active link */
/* displayed the way we want */

/* First, highlight the branch containing the active link */

.L1Relation a,
.L2Relation a,
.L3Relation a,
.L4Relation a,
.L5Relation a { color: #cccea5; font-weight: normal; }
.L1Relation a:hover,
.L2Relation a:hover,
.L3Relation a:hover,
.L4Relation a:hover,
.L5Relation a:hover { color: #fff; }
.L1Relation a:active,
.L2Relation a:active,
.L3Relation a:active,
.L4Relation a:active,
.L5Relation a:active { color: #333; }

/* If it's on the opposite bar, make the Parent stand out a bit */

.SideBarParent a { color: #ffffff; font-weight: normal; }
.SideBarParent a:hover { color: #ccc; }
.SideBarParent a:active { color: #333; }

/* Bold the currently active link */

.SideBarActiveLink a { color: #ffffff; font-weight: bold; }
.SideBarActiveLink a:hover { color: #ccc; }
.SideBarActiveLink a:active { color: #333; }

/* But leave its children and siblings in the highlit format */

.SideBarChild a { color: #ffffcc; font-weight: normal; }
.SideBarChild a:hover { color: #ccc; }
.SideBarChild a:active { color: #333; }

.SideBarSibling a { color: #cccea5; font-weight: normal; }
.SideBarSibling a:hover { color: #fff; }
.SideBarSibling a:active { color: #333; }

/* @end Menu Styles */

/* @group Main Bar Styles */

.mainBar {
	width: 556px;
	margin-left: 210px;
	padding-bottom: 20px;
	position: absolute;
}

.mainBarTop {
	background: transparent url(/global/images/page-c-top.png) top left no-repeat;
	height: 29px;
}

.mainBarMiddle {
	background: transparent url(/global/images/page-c-middle.png) repeat-y;
}

.mainBarBottom {
	background: transparent url(/global/images/page-c-bottom.png) top left no-repeat;
	height: 29px;
}

.mainBarContent {
	width: 484px;
	height: 650px;
	overflow: auto;
	margin-left: 30px;
	padding-right: 20px;
}

.mainBarContentExtended {
	width: 484px;
	min-height: 650px;
	overflow: auto;
	margin-left: 38px;
	padding-right: 20px;
}

.mainBarContent img,
.mainBarContentExtended img {
	width: 484px;
	margin: auto;
	display: block;
}

.dropShadow {
	box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px;
}

.mainBarContent ul,
.mainBarContentExtended ul {
	list-style-type: disc;
}

.mainBarContent ul li,
.mainBarContentExtended ul li {
	margin-top: 0;
	padding-top: 0;
}

#listSpaced5 ul {
	margin-top: -5px;
}

#listSpaced5 ul li {
	margin-top: 5px;
}

#listSpaced5 p {
	margin-top: 2px;
	margin-bottom: 0px;
}

.imageS img {
	width: auto;
	margin: auto;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.insetImage img {
	width: auto;
	float: right;
	padding-left: 10px;
	padding-top: 15px;
}

.insetImageS img {
	width: auto;
	float: right;
	margin: 15px 0px 15px 15px;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.insetImageRight img {
	width: auto;
	float: right;
	padding-left: 10px;
	padding-top: 15px;
}

.insetImageRightS img {
	width: auto;
	float: right;
	margin: 15px 0px 15px 15px;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.insetImageLeft img {
	width: auto;
	float: left;
	padding-right: 10px;
	padding-top: 15px;
}

.insetImageLeftS img {
	width: auto;
	float: left;
	margin: 15px 15px 15px 15px;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.mainBarFooter {
	font: 7pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #888;
	text-align: right;
	margin-top: 5px;
	margin-right: 30px;
	z-index: 10;
}

/* Various special paragraph styles */

p {
	line-height: 150%;
}

.tight {
	margin-top: 4pt;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

/* Style for the first character of the first paragraph on a page */

.initial:first-letter { font-size: 140%; }

/* Make the heading styles match our paragraph style */

h1 { font-size: 180%; font-weight: normal; color: #222222; text-align: left; }
h1.initial:first-letter { font-size: 200%; }

h2 { font-size: 160%; font-weight: normal; color: #2a2a2a; text-align: left; }
h2.initial:first-letter { font-size: 180%; }

h3 { font-size: 140%; font-weight: normal; color: #333333; text-align: left; }
h3.initial:first-letter { font-size: 160%; }

h4 { font-size: 120%; font-weight: normal; color: #3a3a3a; text-align: left; margin-bottom: 4pt; }
h4.initial:first-letter { font-size: 140%; }
#headerList h4 { margin-top: 6pt; }

h5 { font-size: 110%; font-weight: normal; color: #444444; text-align: left; margin-bottom: 2pt; }
h5.initial:first-letter { font-size: 125%; }

h6 { font-size: 100%; font-weight: normal; color: #4a4a4a; text-align: left; margin-bottom: 2pt; }
h6.initial:first-letter { font-size: 110%; }

/* And provide a bit of variety */

.eventDate {
	color: maroon;
	margin-bottom: -15px;
	margin-top: 0px;
}

.eventHeading {
	margin-bottom: -5pt;
}

/* Default style for Ordered Lists */

ol {
	list-style-type: lower-alpha;
}

/* Style for centred text */

.centredText {
	text-align: center;
	top: 50px;
	position: relative;
}

/* styles for search buttons */
input.groovybutton {
   font-size:11px; font-family:Verdana,sans-serif;
   font-weight:bold; color:#EEFFFF;
   background-color:#0088DD;
   border-style:solid; border-color:#003377; border-width:2px;
}

/* Style for different sized image presentation formats */

.imageContainer {
	width: 484px;
	font-size: 10pt;
	text-align: center;
}

.imageContainer a {
	line-height: 10pt;
}

.imageBox1,
.imageBox1S {
	width: 400px;
	line-height: 2;
	padding-bottom: 20px;
}

.imageBox1 img {
	width: 280px;
	margin-bottom: 10px;
}

.imageBox1S img {
	width: 280px;
	margin-top: 10px;
	margin-bottom: 20px;
}
.imageBox2,
.imageBox2S {
	width: 238px;
	display: inline-block;
	line-height: 2;
	padding-bottom: 20px;
}

.imageBox2 img {
	width: 225px;
	margin-bottom: 10px;
}

.imageBox2S img {
	width: 225px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.imageBox3,
.imageBox3S {
	width: 155px;
	display: inline-block;
	line-height: 2;
	padding-bottom: 20px;	
}

.imageBox3 img {
	width: 150px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.imageBox3S img {
	width: 150px;
	margin-bottom: 20px;
}

.imageBox4,
.imageBox4S {
	width: 110px;
	display: inline-block;
	margin-bottom: -10px;
}

.imageBox4 img {
	width: 105px;
	margin-bottom: 10px;
}

.imageBox4S img {
	width: 105px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.imageBox1S img,
.imageBox2S img,
.imageBox3S img,
.imageBox4S img {
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

/* @end Main Bar Styles */

/* @group File Download Table Styles */

.dlSpecification {
	margin-top: 5px;
}

.dlCaption {
	font-size: 120%;
	font-weight: normal;
	color: #3a3a3a;
	text-align: left;
	margin-bottom: 4pt;
}

.dlIcon {
	width: 40px;
	text-align: left
}

.dlIcon img {
	width: auto;
	padding: 2px;
	margin-right:8px;
	margin-left:8px
}

.dlFileName {
	width: 350px;
	text-align: left
}

.dlSize {
	width: 50px;
	text-align:  right;
	font-size: 80%;
}

/* @end File Download Table Styles */

/* @group Miscellaneous Styles */

.contactTable,
.table1 {
	margin-top: -10px;
}

.contactTable tr,
.table1 tr {
	vertical-align: bottom;
	text-align: left;
}

.refCase li {
	padding-bottom: 5px;
}

.blockLeft {
	float: left;
	width: 242px;
	margin-top: 0px;
}

.blockRight {
	float: right;
	width: 242px;
	text-align: right;
}

.divider {
	clear: both;
	margin-top: -10px;
}

/* @end Miscellaneous Styles */