@import url("articles.css");

/************************** Site-wide Reset Styles ***************************/
/*                     Do not change any of these styles                     */

html,body,p,ul,ol,li,a,h1,h2,h3,h4,h5,h6,table,tbody,tfoot,thead,th{margin:0;padding:0;border:0;outline:0;}
.mainMenu tr .icn img{padding:0 0 0 10px;}
/* Overrides some troublesome DNN default styles */
.Normal,.NormalDisabled,.NormalBold,.NormalRed,.NormalTextBox{font-size:inherit;font-family:inherit;}
.Normal,.NormalDisabled,.NormalRed,.NormalTextBox{font-weight:inherit;}

/* The clear class is used to correct the flow of the layout after using a
 * floated element ("float: left" in stylesheets or "align=left" on tables and
 * imgs). Usually, floating an element takes it out of the 'flow' of the
 * document, meaning that any containers or following elements will ignore the
 * size and shape of the floated element, causing ugly overlapping content and
 * missing backgrounds. The clear class forces the containing element to
 * correct its height for its contents even if it's floated. It should be used
 * by specified the clear class on any elements that contain a floated
 * elements that you wish to clear.
 * E.g.,
 * <div class="clear">
 *     <div style="float: left;"> Content </div>
 *     <img src="..." align="right" />
 * </div>
 * This method is preffered over alternate methods (such as
 * <br style="clear:both;" />) as it requires no extra html markup just for
 * styling purposes, and it is also the only known method that works in all
 * cases across all modern browsers. */
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;/*triggers hasLayout in IE*/}

/* The following classes cancel out any styles that have been specified on the
 * body for the image and link browsers of the DNN text editor. Usually these
 * dialogs would use the same styles as the rest of the site, sometimes
 * causing issues with readability */
.FCKImageGalleryContainer{background-color:#FFFFFF;background-image:none;}
.FCKLinkGalleryContainer{background-color:#FFFFFF;background-image:none;}

.FormsContent table{width:auto !important;}

/****************************** General Styles *******************************/

/* Do not set font-size or font-family on the p tag or  any other general tags
 * other than #Body (see Layout Styles) as this will cause problems when trying
 * to set styles on container elements later on. Site wide font settings should
 * be specified on the body tag, or if you require a different font style
 * somewhere on the site, add the different font styles to a class or id on the
 * containing element. */
p, .Normal p {
	/* !important is required on margin to override a style on the container */
	margin: 10px 0 !important;
	line-height: 120%;
	
}

ol {
	margin: 10px 0 10px 30px;
	list-style-type: decimal;
}

ul {
	margin: 10px 0 10px 30px;
	list-style-type: disc;
}

a, a:link, a:visited, a:active {
	color: #16498c;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1 {
	margin: 1.5em 0 0 0;
	font-size: 24px; /*30px;*/
	font-weight: bold;/*normal;*/
	color:#8c8c8c;
	font-family:Arial, Helvetica, sans-serif;/*Georgia, "Times New Roman", Times, serif; */
	line-height:normal;
}

h2 {
	font-family:Arial, Helvetica, sans-serif;/*:Georgia, "Times New Roman", Times, serif;*/
	margin: 18px 0;
	font-size: 18px;/*26px;*/
	font-weight: bold;/*normal;*/
	color:#70a915;
	border-bottom:1px solid #70a915;
	line-height:normal;
}

h3 {
	margin: 1.2em 0 0.5em 0;
	font-size: 15px;
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;
}

h4 {
	margin: 14px 0;
	font-size: 21px;
	font-weight: bold;
}

h5 {
	margin: 12px 0;
	font-size: 18px;
	font-weight: bold;
}

h6 {
	margin: 10px 0;
	font-size: 15px;
	font-weight: bold;
}

/******************************* Layout Styles *******************************/

#Body, .Normal,.NormalDisabled,.NormalBold,.NormalRed,.NormalTextBox,.Normal p, td {
	/* Set this to the desired default website font */
	font-family: Arial, Helvetica, sans-serif;
	/* Set this to the desired default website font size */
	font-size: 12px;
	color:#666666;
	line-height:1.5em;
}

#Body {
	text-align: center; /* Centers the website in IE */
	
	background-image: url(images/sitebkgd.jpg);
	background-color:#b2d1ee;
	background-repeat:repeat-x;
	word-wrap: break-word; 
}

#widthcheck { width: 321px; height: 20px; background: red;}


.pageCenter {
	/* Centers the website in all browsers except IE and cancels out the
	 * text-align: center specified on #Body */
	margin: 0 auto;
	text-align: left;
	
	/* Total width of the website. This must be specified in order to center
	 * the website. This should NEVER be more than 996px or you will get
	 * scrollbars on 1024x768 resolution screens. If your design measures
	 * wider than this, go and ask your designer about it */
	width: 990px;
}

#header {
	height: 130px;
	/*background: Purple;*/
	
	/* Required to absolutely position elements inside of the header
	 * See #profilePhoto for more information */
	position: relative;
	margin-bottom:5px;
}

#profilePhoto {
	/* Absolutely positions the element wherever you like in the header
	 * 'bottom: 0;' locks the element to the bottom of the container
	 * 'top: #px;' puts the top of the element #px down from the top of
	 * the header. This same technique can be used for the site title as well
	 * as bylines or portfolios. If the height of the element + the value for top is
	 * greater than the height of the header, the element will overlap
	 * the content below it. This can sometimes be put to effect
	 * (see http://www.sharmanstone.com.au for example) 
	 * The header MUST have position: relative for this to work
	 * otherwise you will have unexpected results */
	position: absolute;
	bottom: 0;
	left: 10px;
}

#header h1 {
	/* See notes in #profilePhoto regarding absolute positioning*/
	position: absolute;
	top: 60px;
	left: 140px;
	margin: 0;
	
	/* Image replacement technique
	 * Use the following to replace the site title with a premade image
	 * This is useful for non-standard fonts, and is the kindest way to
	 * replace the text with an image for search engines, without using
	 * javascript 
	 * The height and width must match that of the image */
	 background: url(images/title.png) top left no-repeat;
	 text-indent: -9999px;
	 width: 444px;
	 height: 68px;
}
#socialicons {
	position: absolute;
	top: 55px;
	left: 550px;
	margin: 0;
	width:170px;
}
/*--outer icons are different widths to incorporate more glow----*/
#rssicon a {
	background: url(images/rssicon.gif) top left no-repeat;
	width: 30px;
	height: 33px;
	display: block;
	float: left;
	padding: 0;
}
#rssicon a:hover {
	background: url(images/rssicon.gif) bottom left no-repeat;
	text-decoration: none;
}
#yticon a {
	background: url(images/youtubeicon.gif) top left no-repeat;
	width: 29px;
	height: 33px;
	display: block;
	float: left;
	padding: 0;
}
#yticon a:hover {
	background: url(images/youtubeicon.gif) bottom left no-repeat;
	text-decoration: none;
}
#fbicon a {
	background: url(images/facebookicon.gif) top left no-repeat;
	width: 29px;
	height: 33px;
	display: block;
	float: left;
	padding: 0;
}
#fbicon a:hover {
background: url(images/facebookicon.gif) bottom left no-repeat;
	text-decoration: none;
}
#twicon a {
	background: url(images/twittericon.gif) top left no-repeat;
	width: 29px;
	height: 33px;
	display: block;
	float: left;
	padding: 0;
}
#twicon a:hover {
background: url(images/twittericon.gif) bottom left no-repeat;
	text-decoration: none;
}
#flickricon a {
	background: url(images/flickricon.gif) top left no-repeat;
	width: 29px;
	height: 33px;
	display: block;
	float: left;
	padding: 0;
}
#flickricon a:hover {
background: url(images/flickricon.gif) bottom left no-repeat;
	text-decoration: none;
}
#contentWrapper {
	padding: 10px;
	background-color:#FFFFFF;
	margin-bottom:10px;
}

#contentPaneWrapper {
	/* Don't use margin-left on anything with float:left */
	float: left;
	/* Don't use padding-left, padding-right, border-left or border-right on
	 * anything with width */
	width: 634px;
	margin-right: 20px;
	/*background: Yellow;*/
}

.ContentPane {
	padding: 0 20px 20px 20px;
}

#rightPaneWrapper {
	/* Don't use margin-left on anything with float:left */
	float: left;
	/* Don't use padding-left, padding-right, border-left or border-right on
	 * anything with width */
	width: 296px;
	/*background: Orange;*/
}

.RightPane {
	padding: 0 15px;
}


/* Set the font styles in the footer - also need to override the default a styles */
#footer, #footer a {
	font-size: 10px;
	color: Red;
}
#basenavpanel {
background-image:url(images/basenavbkgd.jpg);
background-repeat:repeat-x;
height:230px;
width:100%;
font-size:11px;
color:#FFFFFF;
}
.basenavcontent {
width:990px;
margin:0 auto;
text-align:left;
}
.basenavcontent td {
padding:30px 70px 0px 0px;
vertical-align:top;
}
#basenavpanel td a, #basenavpanel td, #basenavpanel td p {
color:#FFFFFF;
font-size:11px;
line-height:1.5em;
}
#authorisationpanel {
background-image:url(images/authpanelbkgd.jpg);
background-repeat:repeat-x;
width:100%;
color:#FFFFFF;
font-size:11px;
padding:5px 0px;
}
ul#twitter_update_list li {
list-style-image:none;
list-style-type:none;
margin-bottom:10px;
}
ul#twitter_update_list {
margin:0;
padding:0;
}
/******************************** Menu Styles ********************************/

#menu {
background-image:url(images/menubkgd.jpg);
background-repeat:repeat-x;
	margin-bottom:5px;
}

/* Menu item (top level only) */
.mainMenu .root {
	display: block;
	float: left;
	white-space: nowrap;
	
	/* Background images cannot be used here as they clash with the dropdown arrows */
	
	line-height: 30px;
	padding: 0 15px;
	color: #ffffff;
	/*border-right: 1px solid White;*/
	background-image:url(images/menudivider.gif);
	background-repeat:no-repeat;
	background-position:top right;
}

/* Last menu item (top level only) */
.mainMenu span.last {
	/* Cancels out the dividing border */
	border-right: 0;
}

/* Menu item hover (top level and sub menu items) */
.mainMenu .hov {
	cursor: pointer;
	
	background: #005ea8;
	color: White;
}

/* Sub menu */
.mainMenu table {
	background: #02487f;
	border: 1px solid #238cde;
	color: #ffffff;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	white-space: nowrap;
	z-index: 100;
}
.mainMenu table td {
	color: #ffffff;
}

/* Menu item (sub menu only) */
.mainMenu tr .txt {
	padding: 0 7px;
	line-height: 25px;
}

/* Other possible menu style declarations include:
 * All menu items									.mainMenu .mi {}
 * Menu item hover (top level only)					.mainMenu span.hov {}
 * Menu item hover (sub menu only)					.mainMenu tr.hov {}
 * Currently selected menu items (top level only)	.mainMenu span.sel {}
 * Currently selected menu items (sub menu only)	.mainMenu tr.sel {}
 * First top level menu item						.mainMenu span.first {}
 * Last top level menu item							.mainMenu span.last {} 
 * Currently selected menu item 					.mainMenu .sel {} */
 
/******************************* Search Styles *******************************/

#search {
position: absolute;
	top: 60px;
	left: 700px;
	margin: 0;
}

/* Search text box container */
#search div.SearchBorder {
	background: url(images/search_box.gif) top left no-repeat White;
	border: 0;
	margin: 0;
	padding: 2px 0 2px 10px;
	height: auto;
	width: auto;
}

/* Search text box */
#search .SearchBorder input {
	outline: 0; /* Removes orange highlight in Google Chrome */
	/* These properties can be set to whatever you like. The !important tag is used to
	 * override some default DNN styles that would otherwise clash */
 	border: 0;
	font-family: inherit !important;
	font-weight: bold !important;
	width: 139px !important;
	color: Gray !important;
}

/* Search button */
#search a {
	background: url(images/search_button.gif) top left no-repeat;
	width: 36px;
	height: 24px;
	display: block;
	float: left;
	padding: 0;
}

/* Search button hover */
#search  a:hover {
	background: url(images/search_button.gif) bottom left no-repeat;
	text-decoration: none;
}

#SearchIcon {
	display: none;
}

/************************* BREADCRUMBS *************************/

#breadcrumbs {
	margin: 0;
	background-color:#ecf3f9;
}

.Breadcrumb {
	float: left;
	padding: 0 20px 0 10px;
	height: 25px;
	line-height: 25px;
	display: block;
	font-weight: bold;
}

.Breadcrumb:hover {
	color: #5f97d0;
	text-decoration: none;
}

#breadcrumbs .seperator {
	float: left;
	background: url(images/breadcrumb.gif) top left no-repeat;
	width: 13px;
	height: 25px;
}

#breadcrumbs #seperatorEnd {
	float: left;
	background: url(images/breadcrumb_end.gif) top left no-repeat;
	width: 16px;
	height: 25px;
}
/*-----------------------homepage only-----------------------------*/
#featureboxwrapper {
margin-bottom:10px;
clear:both;
background: url(images/flash_bg.jpg) top left no-repeat;
}
.featureboxes {
float:left;
margin-right:9px;
}
.featureboxlast {
float:left;
}
#welcometowarringah {
background-image:url(/Portals/0/welcometowarringahbkgd.jpg);
width:634px;
height:204px;
float:left;
margin-top:10px;
}
.warringahcontent {
width: 365px;
margin:10px 0px 0px 245px;
}
.warringahcontent h2 {
color:#182f41;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:-0.05em;
border:0;
margin:18px 0 0 0;
}
#signupforenews {
width:336px;
height:204px;
float:left;
margin-top:10px;
}
.signupcontent {
margin-left:30px;
width:275px;
}
/*-------------------------subpage skin styles------------------------------------*/
#subrightPaneWrapper {
	/* Don't use margin-left on anything with float:left */
	float: left;
	/* Don't use padding-left, padding-right, border-left or border-right on
	 * anything with width */
	width: 321px;
	background-color: #ecf3f9;
	background-image:url(images/rightcolumnshadow.jpg);
	background-repeat:repeat-y;
	background-position:top left;
}
#subcontentWrapper {
	padding: 0px;
	background-color:#FFFFFF;
	margin-bottom:10px;
}
#subcontentpadding {
padding:0px 0px 0px 15px;
background-image:url(images/subpagebkgd.jpg);
background-repeat:repeat-y;
}
.subbannerpane {
margin-top:15px;
}
.subrightPane {
	padding: 0 35px 20px 35px;
}
/*----------------------subpage various-----------------*/
table#warringahachievements td {
padding:0px 20px 20px 0px;
vertical-align:top;
}
.surveyheading {
font-size:26px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}
table.rowbottom td {
border-bottom:1px dotted #999999;
}
  .Events .evt {
    width: 90%;
}
.bt-wrapper canvas {
position:relative !important;
}
.simplegallerycontent {
width:594px !important;
}
td.handnumbers {
font-family:"Segoe Script","Courier New", Courier, monospace;
color:#3d82c3;
font-size:24px;
padding:0px 15px 0px 3px;
vertical-align:top;
}
.flickr_badge img { padding: 1px; margin: 0 3px 3px 0; border: 1px solid #C9C9C9; float: left;
}
#LBD_CaptchaImage img {
position:absolute;
}
.news-feed p { margin-top: 0px !important;}

.flickr_badgebig .flickr_badge_image
{
	float: left;
	margin: 0 4px 4px 0;
	border: 1px solid #C9C9C9;
	padding: 2px;
}

.flickr_badgebig .flickr_badge_image a
{
	width: 138px;
	height: 138px;
	overflow: hidden;
	text-align: center;
	display: block;
}

.flickr_badgebig .flickr_badge_image a img
{
	border: 0;
}