/* CSS Document for layout - failsworth and broadway lifesaving club */

/* contents --------------------------------------------------

1. Main page elements
2. Navigation
3. Banners (home page)
4. Main content
5. News
6. Icon col
7. Footer
8. Content page elements

colours:

Aqua : #00a9cd;
red: #d53846;
yellow; #ffc11b;

-------------------------------------------------------------*/

/* 1.Main page elements -------------------------------------------------------*/

h3 {font-family:Helvetica, Arial,  sans-serif; font-weight:bold; color:#d53846; font-size:1.0em; margin-left:5px;}
h4 {font-family:Helvetica, Arial,  sans-serif; font-weight:bold; color:#d53846; font-size:1.0em;}

body {margin:0; padding:0; background:url(../../images/home-bg.jpg) top center no-repeat;}

img {border:0;}

a{color:#00a9cd; text-decoration:none}
a:active{color:#00a9cd; text-decoration:none}
a:visited{color:#00a9cd; text-decoration:none}
a:hover{color:#00a9cd; text-decoration:underline}

div#main-wrapper{ margin-right:auto; margin-left:auto; width:960px; position:relative; background:#fff;}

div#main-wrapper.no-background {background:none;}

div#flash-area{height:340px; z-index:0; display:block; }

div#header{ height:110px; position:absolute; border-top:solid 1px #8fc2cd; top:16px; left:0; width:960px; z-index:10;
}

div#nav-area{position:absolute; height:32px; display:block; width: 960px; border-top:solid 1px #8fc2cd; bottom:0; z-index:-10;}

div#logo {width:350px; float:left; margin-top:30px;}

div#main-content-wrapper { width:720px; float:left;}

div#main-banners-wrapper { height:155px;}

div#main-content {width:465px; float:left; margin:0 0 0 15px; display:inline;}

div#news {float:left; width:225px; margin:16px 0 16px 10px; float:left; background:url(../../images/news-bg.gif) repeat-x;}

div#icon-col {float:left; width:195px; padding:0 15px 0 15px; margin: 50px 0 16px 15px;}

div#addthis-bookmark {float:right; margin:10px 0 0 0;}

div#footer-wrapper {margin-right:auto; margin-left:auto; width:960px; background:#00a9cd; position:relative;}




/* 2.Navigation -------------------------------------------------------*/

div#nav-area ul{list-style:none; float:right; margin:0; padding:0;}

div#nav-area li{float:left; padding:10px 10px 0 10px; background:url(../../images/nav-divider.gif) top right no-repeat;}

div#nav-area li a {color:#00a9cd; text-decoration:none; padding:0 0 5px 0; border-bottom:none; font-size:1.2em;}
div#nav-area li a:hover {color:#d53846; text-decoration:none; border-bottom:5px solid #d53846;  font-size:1.2em;}
div#nav-area li.selected a  {color:#d53846; text-decoration:none; font-size:1.2em;}

/* 3.Banners -------------------------------------------------------*/

div#main-banners-wrapper div.home-banner {float:left; width:232px; height:163px;} 
div#main-banners-wrapper div#movies-banner {background:url(../../images/banner-movies-bg.jpg); } 
div#main-banners-wrapper div#galleries-banner {background:url(../../images/banner-galleries-bg.jpg);margin:0 0 0 10px;} 
div#main-banners-wrapper div#blogs-banner {background:url(../../images/banner-blogs-bg.jpg);margin:0 0 0 10px;} 
div#main-banners-wrapper div.banner-text {padding:60px 0 0 15px; width:150px;}
div#main-banners-wrapper div.banner-text h2 {color:#fff; padding:0; margin:0; text-transform:uppercase; font-size:1.2em;}
div#main-banners-wrapper div.banner-text h3 {color:#27d8fe; padding:0; margin:0; text-transform:uppercase; font-size:0.65em; border-bottom:solid 1px #fff; padding:0 0 5px 0;}
div#main-banners-wrapper div.banner-text p {color:#fff; padding:10px 0 0 0; margin:0; font-family:Helvetica, Arial,  sans-serif; font-weight:normal; font-size:0.75em;}
div#main-banners-wrapper div.banner-text p a {color:#fff; padding:10px 0 0 0; margin:0; font-family:Helvetica, Arial,  sans-serif; font-weight:normal; text-decoration:none; font-size:1em;  }


/* 4.Main content -------------------------------------------------------*/

div#main-content h1 {font-family:Helvetica, Arial,  sans-serif; font-weight:bold; color:#d53846; text-transform:uppercase; font-size:1.2em;}
div#main-content h3 {font-family:Helvetica, Arial,  sans-serif; font-weight:bold; color:#d53846; font-size:1.0em;}
div#main-content p {font-family:Helvetica, Arial,  sans-serif; font-weight:normal; font-size:0.75em; color:#00a9cd; line-height:16px;}
div#main-content p.intro {color:#d53846}

/* 5.News -------------------------------------------------------*/

div#icon-col {background:#cceef5;}

div#main-content-wrapper div#news h1 {font-family:Helvetica, Arial,  sans-serif; margin:16px 15px 0 15px; border-bottom:solid 1px #8fc2cd; font-weight:bold; color:#ffc11b; text-transform:uppercase; font-size:1.2em;}
div#main-content-wrapper div#news h2 {font-family:Helvetica, Arial,  sans-serif; margin:16px 15px 0 15px; font-weight:bold; color:#ffc11b; text-transform:uppercase; font-size:0.75em;}
div#main-content-wrapper div#news h3 {font-family:Helvetica, Arial,  sans-serif; margin:0px 15px 0 15px; font-weight:bold; color:#d53846;; text-transform:uppercase; font-size:0.75em;}
div#main-content-wrapper div#news p {font-family:Helvetica, Arial,  sans-serif; margin:0px 15px 0 15px; padding:0 0 16px 0; border-bottom:solid 1px #00a9cd; font-size:0.75em; line-height:16px; color:#00a9cd;}
div#main-content-wrapper div#news a {color:#d53846; font-family:Helvetica, Arial,  sans-serif; text-decoration:underline; }


/* 6.Icon col -------------------------------------------------------*/

div.icon-col-item { display:block; width: 190px; padding:16px 0 0 0; border-bottom:solid 1px #d53846;  min-height:55px;}
div.last {border-bottom:none;}
div.icon-col-item img {float:left;}
div.icon-col-item h2  {font-family:Helvetica, Arial,  sans-serif; padding:0;  margin:0 0 0 40px; display:block; font-weight:bold; text-transform:uppercase; font-size:0.80em; text-decoration:none;}
div.icon-col-item h2 a, div.icon-col-item h2 a:active, div.icon-col-item h2 a:visited {text-decoration:none; color:#ffc11b;}
div.icon-col-item h2 a:hover {text-decoration:underline;}
div.icon-col-item h3 {font-family:Helvetica, Arial,  sans-serif; padding:0; margin:0 0 0 40px; display:block; font-weight:bold;  text-transform:uppercase; font-size:0.75em; text-decoration:none;}
div.icon-col-item h3 a, div.icon-col-item h3 a:active, div.icon-col-item h3 a:visited {text-decoration:none; color:#d53846;}
div.icon-col-item h3 a:hover {text-decoration:underline; color:#d53846;}



/* 7.Footer -------------------------------------------------------*/


div#footer-wrapper div#footer {}
div#footer-wrapper div#footer ul{list-style:none; line-height:16px; float:left; width:110px; padding:0 15px 0 15px; font-family:Helvetica, Arial, sans-serif; font-size:0.75em; font-weight:normal; margin:16px 0 0 0;}
div#footer-wrapper div#footer ul li {color:#fff;}
div#footer-wrapper div#footer ul li.sitemapTTL{font-weight:bold;}
div#footer-wrapper div#footer ul li a{color:#fff; text-decoration:none;}
div#footer-wrapper div#footer div#contactDetails {font-family:Helvetica, Arial, sans-serif; font-size:0.75em; color:#fff; width:150px; padding:16px 20px 16px 15px; margin-top:50px; margin-left:0px; float:right;}
div#footer-wrapper div#footer div#contactDetails a{font-family:Helvetica, Arial, sans-serif; color:#fff; font-weight:bold;}
div#footer-wrapper div#footer div#footerlinks {font-family:Helvetica, Arial, sans-serif; font-size:0.75em; color:#fff;  margin-top:0px; margin-right:5px; float:right;}

/* 8. Content page elements -------------------------------------------------------*/

div#nav-area-page {height:32px; display:block; width: 960px; border-top:solid 1px #8fc2cd; margin:10px 0 0 0; }
div#header-page { height:110px; border-top:solid 1px #8fc2cd; margin:16px 0 0 0; }
div#content-wrapper-page {margin:10px 0 0 0; }
div#main-content-page {width:465px; float:left; margin:0 0 0 15px;}
div#main-content-page div#main-image {height:217px; width:469px; background:url(../../images/gallery-bg.jpg) no-repeat;}
div#main-content-page div#main-image img {margin:9px 0 0 9px;}
div#main-content-page div#main-image-gallery {margin-left:5px; height:217px; width:469px; background:url(../../images/gallery-bg.jpg) no-repeat;}
div#main-content-page div#main-image-gallery img {margin:0 0 0 0;}
div#main-content-page div#main-image-gallery-video {margin-left:5px; height:400px; width:469px; background:url(../../images/video-gallery-bg-.jpg) no-repeat;}
div#main-content-page div#main-image-gallery-video div#video {margin-left:5px; margin-bottom:-30px;}

div#second-nav {float:left; width:195px; min-height:200px; border-top:solid 10px #00a9cd; border-bottom:solid 10px #00a9cd; padding:16px 15px 16px 15px; margin:0px 0 0 0; background:url(../../images/news-bg.gif) repeat-x;}
div#second-nav ul {list-style:none; padding:0; margin:0;}
div#second-nav li a, div#second-nav li a:active, div#second-nav li a:visited {text-decoration:none; color:#00a9cd; font-family:Helvetica, Arial,  sans-serif;}
div#second-nav li a:hover {text-decoration:underline;}
div#main-content-page p {font-family:Helvetica, Arial,  sans-serif; margin-left: 5px; font-weight:normal; font-size:0.75em; color:#00a9cd; line-height:16px;}
div#main-content-page p.intro {color:#d53846; }
div#main-content-page p a{color:#00a9cd; text-decoration:none}
div#main-content-page p a:active{color:#00a9cd; text-decoration:none}
div#main-content-page p a:visited{color:#00a9cd; text-decoration:none}
div#main-content-page p a:hover{color:#00a9cd; text-decoration:underline}
div#main-content-page h1 {font-family:Helvetica, Arial,  sans-serif; font-weight:bold; color:#d53846; text-transform:uppercase; font-size:1.2em; margin-left: 5px;}
div#nav-area-page ul{list-style:none; float:right; margin:0; padding:0;}
div#nav-area-page li{float: left; padding: 10px 10px 0 10px; background: url(../../images/nav-divider.gif) top right no-repeat;}
div#nav-area-page li a {color:#00a9cd; text-decoration:none; padding:0 0 5px 0; border-bottom:none; font-size:1.2em;}
div#nav-area-page li a:hover {color:#d53846; text-decoration:none; border-bottom:5px solid #d53846;  font-size:1.2em;}
body.content-page { background:url(../../images/page-content.jpg) top center no-repeat;}
div#icon-col.page { margin:0 0 16px 15px ;}

/* CSS RELATED TO CONTACT FORM */


#regform {
border:1px solid #00a9cd;
background-color:#EEEEEE;
color:#666666;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-bottom:10px;
margin-left:8px;
padding:5px 20px 10px 10px;
width:90%;
}

#regform input {
border:1px solid #d53846;
margin-bottom:10px;
padding:4px;
width:100%;
}

#regform select {
border:1px solid #CCCCCC;
margin-bottom:10px;
padding:3px;
width:100%;
}

#regform #submitF {
width:100px;
}

#regform textarea {
border:1px solid #d53846;
height:100px;
width:100%;
padding:3px;
}

/* CSS RELATED TO CALENDAR PAGES */

.event {
font-size:10px;
}

.event {
display:block;
width:42px;
height:60px;
overflow:inherit;
}

a.event_title {
text-decoration:none;

}

#eventholder a img {
border:none;
}

a.event_title:hover {
text-decoration:underline;
}


.tcolor1 {
color:#00a9cd;
}

.tcolor2 {
color:#00a9cd;
}

.tcolor3 {
color:#00a9cd;
}

#calHolder {
margin-top:0px;
padding-bottom:25px;
font-family:Helvetica, Arial, sans-serif;
margin-left:-2px;
}


#tmdnav {
float:right;
margin-right:0px;
text-align:center;
}

#tmdnav a {
display:block;
float:left;
margin-left:0px;
text-decoration:none;
width:50px;
height:22px;
color:#ffc11b;
font-size:12px;
line-height:20px;
background-color:#d53846;
}

#calnav {

margin-left:0px;
display:inline;
width:80px;
height:22px;
color:#ffc11b;
font-size:15px;
line-height:20px;
display:block;
float:left;
margin-right:10px;
padding-left:4px;
padding-right:4px;
margin-bottom:5px;
}

#thedate {
display:block;
float:left;
width:200px;
color:#d53846;
font-weight:bold;
margin-top:1px;
}

#calnav a{
color:#ffc11b;
text-decoration:none;
font-size:12px;
}

#calnav a.tb {

border:1px solid #5F5F5F;
background: #cccccc;
color:#5F5F5F;
padding-left:2px;
padding-right:2px;

}

#calnav img {
border:none;
padding-left:4px;
padding-right:4px;
}

table {
clear:both;
   font-family:Helvetica, Arial, sans-serif;
font-size:0.8em;
color:#000000;
background-color:#fff;
line-height:15px;
	width:465px;
    border-collapse:collapse;
	
margin-left:0px;
}

td {
    height:60px;
	width:60px;
	vertical-align:top;
}

#yearCal td {
height:200px;
}

#yearCal tr .weekdays {
height:50px;
text-align:center;
color:#ffc11b;
}


#yearCal table {
clear:both;
   font-family:Helvetica, Arial, sans-serif;
font-size:0.8em;
color:#000000;
line-height:15px;
	width:40px;
    border-collapse:collapse;
	
margin-left:10px;
}






tr .weekdays {
height:15px;
text-align:center;
color:#ffc11b;
}

th {
	color:#ffffff;
}

.actday{
    background-color:#FFFFCC;
    
}

.day {
display:block;
position:relative;
top:0px;
left:0px;
width:63px;
height:15px;
background-color:#cccccc;
text-align:right;
color:#d53846;
}


#eventholder{
float:left;
width:98%;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
}

#eventholder{
font-family:Helvetica, Arial, sans-serif;
font-size:15px;
color:#a29993;
line-height:22px;
}


#eventholder a{
color:#a29993;
text-decoration:none;
}


#calRef {
font-family:Helvetica, Arial, sans-serif;
float:right;
display:block;
padding:3px;
background-color:#fff;
}

#calRef a {
color:#00a9cd;
font-size:12px;
}

#img_container{
float:left;
width:120px;
height:120px;
border:solid 1px #00a9cd;
margin-left:18px;
margin-right:0px;
margin-bottom:20px;
align:center;
}

#img_container img{
display: block;
margin-left: auto; 
margin-right: auto;
margin-top: auto; 
margin-bottom: auto;
position: relative;
}

/*----------------------LIGHTBOX STUFF ------------------------- */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto;}
#imageContainer{ padding: 10px; }


#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; background: url(../../images/prevlabel.gif) left 15% no-repeat;}
#nextLink { right: 0; float: right; background: url(../../images/nextlabel.gif) right 15% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(../../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	;  }

#imageData{	padding:0 10px; color: #666;}
#imageData #imageDetails{ width: 70%; float: left; text-align: left;}	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }