/* ==> Whale Hill Community Association General Website - CSS File 
   ==> Global layout structure
==================================================================================================== */



/* ==> GLOBAL
==================================================================================================== */
*{padding:0; margin:0;}

body {font-size:62.5%;font-family:verdana,"trebuchet ms",arial,sans-serif;background-color: #FFFFFF;}  /* old bg color : #D6F1F8*/
/*Font-size: 1.0em = 10px when browser default size is 16px*/
.page-container {width:960px;margin:0px auto;margin-top:10px;margin-bottom:10px;font-size:1.0em;border: solid 1px #10A1CE;}


/* ==> HEADER
==================================================================================================== */
.header{height:250px;}

/* ==> PRELOAD MENU PICTURES  */
.hiddenPic {display:none;}

/* ==> Header Main Navigation Bar
================================================== */
.header_nav_home {height:95px;text-align:center;margin:auto;background-image: url(../image/header_bg.png);background-repeat: repeat-x;}
.header_nav_about_us {height:95px;text-align:center;margin:auto;background-image: url(../image/header_about_us_bg.png);background-repeat: repeat-x;}
.header_nav_whats_on {height:95px;text-align:center;margin:auto;background-image: url(../image/header_whats_on_bg.png);background-repeat: repeat-x;}
.header_nav_community {height:95px;text-align:center;margin:auto;background-image: url(../image/header_community_bg.png);background-repeat: repeat-x;}
.header_nav_awards {height:95px;text-align:center;margin:auto;background-image: url(../image/header_awards_bg.png);background-repeat: repeat-x;}
.header_nav_projects {height:95px;text-align:center;margin:auto;background-image: url(../image/header_projects_bg.png);background-repeat: repeat-x;}

#navbar{text-align:center;margin-left:79px;} /*Position of the main navigation bar*/
.nav{width:112px;height:95px;float:left;margin-left:1px;margin-right:1px;}/*container for one button + its text*/
.nav_text{font-family:verdana,"trebuchet ms",arial,sans-serif;font-size:110%;margin:auto;padding-top:65px;} /* Button Text */

/* ==> HOME BUTTON */
a.nav_home{background-image:url(../image/home_button_bg.png);width:112px;height:95px;display:block;text-decoration:none;color:#000000;text-align:center;font-weight:bold;font-size:170%;}
a:hover.nav_home{background-image:url(../image/home_button_bg2.png);color:#000099;}
.nav_focus_home{float:left;background-image:url(../image/home_button_bg2.png);color:#000099;width:112px;height:95px;display:block;text-decoration:none;text-align:center;font-weight:bold;font-size:170%;}

/* ==> ABOUT US BUTTON */
a.nav_about_us{background-image:url(../image/about_us_button_bg.png);width:112px;height:95px;display:block;text-decoration:none;color:#000000;text-align:center;font-weight:bold;font-size:170%;}
a:hover.nav_about_us{background-image:url(../image/about_us_button_bg_2.png);color:#FF9900;}
.nav_focus_about_us{float:left;background-image:url(../image/about_us_button_bg_2.png);color:#FF9900;width:112px;height:95px;display:block;text-decoration:none;text-align:center;font-weight:bold;font-size:170%;}

/* ==> WHAT'S ON BUTTON */
a.nav_whats_on{background-image:url(../image/whats_on_button_bg.png);width:112px;height:95px;display:block;text-decoration:none;color: #000000;text-align:center;font-weight:bold;font-size:170%;}
a:hover.nav_whats_on{background-image:url(../image/whats_on_button_bg_2.png);color:#FF0000;}
.nav_focus_whats_on{float:left;background-image:url(../image/whats_on_button_bg_2.png);color:#FF0000;width:112px;height:95px;display:block;text-decoration:none;text-align:center;font-weight:bold;font-size:170%;}

/* ==> COMMUNITY BUTTON */
a.nav_community{background-image:url(../image/community_button_bg.png);width:112px;height:95px;display:block;text-decoration:none;color: #000000;text-align:center;font-weight:bold;font-size:170%;}
a:hover.nav_community{background-image:url(../image/community_button_bg_2.png);color:#156A28;}
.nav_focus_community{float:left;background-image:url(../image/community_button_bg_2.png);color:#156A28;width:112px;height:95px;display:block;text-decoration:none;text-align:center;font-weight:bold;font-size:170%;}

/* ==> AWARDS BUTTON */
a.nav_awards{background-image:url(../image/awards_button_bg.png);width:112px;height:95px;display:block;text-decoration:none;color: #000000;text-align:center;font-weight:bold;font-size:170%;}
a:hover.nav_awards{background-image:url(../image/awards_button_bg2.png);color:#a700d3;}
.nav_focus_awards{float:left;background-image:url(../image/awards_button_bg2.png);color:#a700d3;width:112px;height:95px;display:block;text-decoration:none;text-align:center;font-weight:bold;font-size:170%;}

/* ==> PROJECTS BUTTON */
a.nav_projects{background-image:url(../image/projects_button_bg.png);width:112px;height:95px;display:block;text-decoration:none;color: #000000;text-align:center;font-weight:bold;font-size:170%;}
a:hover.nav_projects{background-image:url(../image/projects_button_bg_2.png);color:#ffff00;}
.nav_focus_projects{float:left;background-image:url(../image/projects_button_bg_2.png);color:#ffff00;width:112px;height:95px;display:block;text-decoration:none;text-align:center;font-weight:bold;font-size:170%;}

/* ==> YOUTH CLUB BUTTON */
a.nav_youth_club{background-image:url(../image/youth_club_button_bg.png);width:112px;height:95px;display:block;text-decoration:none;color: #000000;text-align:center;font-weight:bold;font-size:170%;}
a:hover.nav_youth_club{background-image:url(../image/youth_club_button_bg_2.png);color:#FF6600;}

/* ==> Header Banner
================================================== */
.header_banner {margin: auto;}

/* ==> MAIN
==================================================================================================== */
.main {clear:both;width:960px;padding-bottom:30px;}

/* ==> Content Left
================================================== */
.main_content_left{display:inline /*Fix IE floating margin bug*/;float:left;width:257px;overflow:visible !important /*Firefox*/;overflow:hidden /*IE6*/;text-align:center;padding-top:20px;}
a.main_content_left{text-decoration:none; color:#000000;}
img.main_content_left{text-decoration:none; color:#000000;}

/* ==> Sub Section Menus 
================================================== */
.main_content_left dl, .main_content_left dt, .main_content_left dd, .main_content_left ul, .main_content_left li {margin: auto;padding: 0;list-style-type: none;}

/* ==> About Us Section
==================== */
.main_submenu_left_about_us {margin:auto;}
dl.main_submenu_left_about_us {width: 20em;}
dl.main_submenu_left_about_us dt {cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #2586AC;background-color: #A7DAEE;}
dl.main_submenu_left_about_us dd {border: 1px double #2586AC;}
dl.main_submenu_left_about_us li {text-align: center; font-size:130%; background: #A7DAEE;}
dl.main_submenu_left_about_us li a, dl.main_submenu_left_about_us dt a {color: #000000;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #DDF2F9;}
dl.main_submenu_left_about_us li a:hover, dl.main_submenu_left_about_us dt a:hover {background-color: #FFCC00;}

/* ==> What's On Section
==================== */
.main_submenu_left_whats_on {margin:auto;}
dl.main_submenu_left_whats_on {width: 20em;}
dl.main_submenu_left_whats_on dt {cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #2586AC;background-color: #A7DAEE;}
dl.main_submenu_left_whats_on dd {border: 1px double #2586AC;}
dl.main_submenu_left_whats_on li {text-align: center;font-size:130%;background-color: #A7DAEE;}
dl.main_submenu_left_whats_on li a, dl.main_submenu_left_whats_on dt a {color: #000000;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #DDF2F9;}
dl.main_submenu_left_whats_on li a:hover, dl.main_submenu_left_whats_on dt a:hover {color: #ffffff;background-color: #FF0001;}

/* ==> Community Section
==================== */
.main_submenu_left_community {margin:auto;}
dl.main_submenu_left_community {width: 20em;}
dl.main_submenu_left_community dt {cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #2586AC;background-color: #A7DAEE;}
dl.main_submenu_left_community dd {border: 1px double #2586AC;}
dl.main_submenu_left_community li {text-align: center;font-size:130%;background-color: #A7DAEE;
}
dl.main_submenu_left_community li a, dl.main_submenu_left_community dt a {color: #000000;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #DDF2F9;}
dl.main_submenu_left_community li a:hover, dl.main_submenu_left_community dt a:hover {background-color: #29CC4C;}

/* ==> Awards Section
==================== */
.main_submenu_left_awards {margin:auto;}
dl.main_submenu_left_awards {width: 20em;}
dl.main_submenu_left_awards dt {cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #2586AC;background-color: #A7DAEE;}
dl.main_submenu_left_awards dd {border: 1px double #2586AC;}
dl.main_submenu_left_awards li {text-align: center; font-size:130%; background: #A7DAEE;}
dl.main_submenu_left_awards li a, dl.main_submenu_left_awards dt a {color: #000000;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #DDF2F9;}
dl.main_submenu_left_awards li a:hover, dl.main_submenu_left_awards dt a:hover {color: #ffffff;background-color: #A700D6;}

/* ==> Projects Section
==================== */
.main_submenu_left_projects {margin:auto;}
dl.main_submenu_left_projects {width: 20em;}
dl.main_submenu_left_projects dt {cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #2586AC;background-color: #A7DAEE;}
dl.main_submenu_left_projects dd {border: 1px double #2586AC;}
dl.main_submenu_left_projects li {text-align: center; font-size:130%; background: #A7DAEE;}
dl.main_submenu_left_projects li a, dl.main_submenu_left_projects dt a {color: #000000;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #DDF2F9;}
dl.main_submenu_left_projects li a:hover, dl.main_submenu_left_projects dt a:hover {background-color: #FFFF01;}

/* ==> YOUTH CLUB
==================== */
.main_submenu_left_youth {margin:auto;}
dl.main_submenu_left_youth {width: 20em;}
dl.main_submenu_left_youth dt {cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #2586AC;background-color: #A7DAEE;}
dl.main_submenu_left_youth dd {border: 1px double #2586AC;}
dl.main_submenu_left_youth li {text-align: center; font-size:130%; background: #A7DAEE;}
dl.main_submenu_left_youth li a, dl.main_submenu_left_youth dt a {color: #000000;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #DDF2F9;}
dl.main_submenu_left_youth li a:hover, dl.main_submenu_left_youth dt a:hover {color: #ffffff;background-color: #FF6600;}

.main_submenu_left_youth2 {margin:auto;}
dl.main_submenu_left_youth2 {width: 20em;}
dl.main_submenu_left_youth2 dt {color: #000000; cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #000000;background-color: #F3D698;}
dl.main_submenu_left_youth2 dd {border: 1px double #000000;}
dl.main_submenu_left_youth2 li {text-align: center; font-size:130%; background: #FF6600;}
dl.main_submenu_left_youth2 li a, dl.main_submenu_left_youth2 dt a {color: #ffffff;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #CA6500;}
dl.main_submenu_left_youth2 li a:hover, dl.main_submenu_left_youth2 dt a:hover {border: 1px double #ffffff; color: #ffffff; background-color: #F47A00;}

/* ==> MEMBERS Section
==================== */
.main_submenu_left_members {margin:auto;}
dl.main_submenu_left_members {width: 20em;}
dl.main_submenu_left_members dt {cursor: pointer;margin: 15px 0;height: 25px;line-height: 25px;text-align: center;font-weight: bold;font-size:150%;border: 1px double #2586AC;background-color: #A7DAEE;}
dl.main_submenu_left_members dd {border: 1px double #2586AC;}
dl.main_submenu_left_members li {text-align: center;font-size:130%;background-color: #A7DAEE;}
dl.main_submenu_left_members li a, dl.main_submenu_left_members dt a {color: #000000;text-decoration: none;display: block;border: 0 none;height: 100%;background-color: #DDF2F9;}
dl.main_submenu_left_members li a:hover, dl.main_submenu_left_members dt a:hover {color: #ffffff;background-color: #FF0001;}


/* ==> Content Right
================================================== */
.main_content_right{display:inline /*Fix IE floating margin bug*/;float:right;width:700px;overflow:visible !important /*Firefox*/;overflow:hidden /*IE6*/;/*background-image: url(../image/main-content-vertical-sep.gif); background-repeat:repeat-y; margin:30px 0 10px 0;*/;padding-top:20px;}
.content_right_unit {}

/* ==> Dividers
================================================== */
.clear_content_left {clear:both;width:454px;height:5px;border:none;background-image: url(../image/main-content-horizontal-sep.gif);background-repeat:no-repeat;background-position: center center;margin-top: auto;margin-right: auto;margin-bottom: 10px;margin-left: auto;}
.main_content_vertical_sep{float:left;width:3px;height:393px;background-image: url(../image/main-content-vertical-sep.gif);background-repeat: no-repeat;background-position: center center;padding-top:10px;padding-bottom:30px;}

/* ==> FOOTER
==================================================================================================== */
.footer {clear:both;height:63px; padding-top: 20px;}

.nav_footer {
	font-family:"trebuchet ms",arial,sans-serif;
	width:290px;
	position:absolute;
	float:left;
	margin:12px 10px 10px 10px;
}
.nav_footer ul {float:left; padding:0 15px 0 0; font-weight:bold;}	
.nav_footer li {display:inline; list-style:none;}
.nav_footer li a {display:block; float:left; padding:8px 0px 2px 5px; color:#000000 ; text-decoration:none; font-size:120%;}
.nav_footer a:hover {text-decoration:none;color:#000000;}

.footer_left{float:left;height:63px;width:51px;background-image: url(../image/footer_border_left.png);}
.footer_content{float:left;height:63px;width:858px;background-image: url(../image/footer_bg.png);background-repeat: repeat-x;}
.footer_right{float:right;height:63px;width:51px;background-image: url(../image/footer_border_right.png);}