/************************************
Project: GLEN INNES FAMILY CENTRE   *
Author : Loudette C. Barbo			*
Date   : 27/04/2010					*
Media  : Screen						*
************************************/

/****************************/
/*--------- General --------*/        
/****************************/
body{
margin:auto;
padding:0px;
width:960px;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
line-height:18px;
background:#96AB68;
background-image:url(../images/greenbg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
li:hover ul, li.over ul{ display: block; }
a{
text-decoration:none;
outline:none;
}
a:link{color:#FFFFFF;}
a:visited{color:#FFFFFF;}
a:hover{color:#424047;}
a:active{color:#424047;}
h1{
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-size:36px;
color:#333333;
line-height:36px;
padding:0px 0px 15px 0px;
margin:0px;
}
h2{
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
color:#008589;
padding:15px 0px 5px 0px;
margin:0px;
}
h3{
font-size:11px;
padding:0px;
margin:0px;
}
img{
border:none;
padding:0px;
margin:0px;
}
ul{
margin:0px;
padding:0px;
}
li{
list-style-type:none;
}
p{
margin-top:0px;
}
/*-----End of General-------*/

/****************************/
/*-------- Whole_box ------*/        
/****************************/
#whole_box{
width:960px;
height:100%;
margin:0px;
padding:0px;
background-color:#FFFFFF;
float:left;
}
/*---- End of Whole Box ----*/

/****************************/
/*--------- Banner ---------*/        
/****************************/
#banner{
height:150px;
margin:0px;
padding:0px;
clear:both;
}
#logo_container{
float:left;
margin:0px;/*15px 0px 0px 20px*/
}
#banner_details{
margin:12px 20px 0px 0px;
padding:0px;
float:right;
color:#85B000;
text-align:right;
}
.contact{
font-weight:bold;
color:#666666;
}
.details{
}
/*----- End of Banner ------*/


/****************************/
/*------- Navigation -------*/        
/****************************/
#navigation{
width:960px;
/*height:40px;
margin:0px;
padding:0px;
float:left;*/
clear:both;
}
#nav_index{background-color:#71A3AB; width:auto;}
#nav_aboutus{background-color:#8EAE43;}
#nav_services{background-color:#C9AD28;}
#nav_contactus{background-color:#BD6D3A;}
#nav_supporters{background-color:#8D532C;}
#navigation span{
width:192px;
height:40px;
margin:0px;
padding:0px;
float:left;
}
.a_nav{/*.a_nav*/
font-family:"Century gothic", Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bolder;
margin:10px 0px 10px 20px;
padding:0px;
float:left;
}
.active_nav{
background-image:url(../images/icon3.png);
background-repeat:no-repeat;
background-position:152px 5px;
}
/*---- End of Navigation ----*/
/*****************************/
/*--DROPDOWN NAVIGATION BAR--*/
/*****************************/
#navigation ul li{
display:inline;
padding-right:0px;/*20*/
padding-left:0px;
margin:0px;
}	
/************ DROPDOWN NAVIGATION *************/
#nav{/*root level ul*/
margin:0;
padding:0;
list-style:none;
}
/*#index_holder, #aboutus_holder, #services_holder, #contactus_holder, #supporters_holder{
float:left;	
background-color:#17AD0D;
color:#333333;
position:relative;                      
top:0px;
left:0px;
width:960px;
line-height:20px;
height:250px;
padding:0px;
margin:0px;
font-size:12px;
z-index:2000;
}
									
#index_holder ul li, #aboutus_holder ul li, #services_holder ul li, #contactus_holder ul li, #supporters_holder ul li{                          
padding:0px;
margin:0 0 0 10px;
position:relative;
top:0px;
left:0px;
float:left;
clear:left;
}*/


#nav li{                          
position:relative;
float:left;
width:auto;
}
li ul, .nav_block{
width:182px;
margin:0;
padding:5px;                     
display:none;
position:absolute;
top:40px;
left:0;

/*background-color:#17AD0D;*/
}
#index_dropnav{
width:182px;/*310*/
display:none;
position:absolute;
top:40px;
left:0px;
background-image:url(../images/indexnavbg.png);
background-repeat:repeat;
}
#aboutus_dropnav{background-image:url(../images/aboutusnavbg.png);}
#services_dropnav{background-image:url(../images/servicesnavbg.png);}
#contactus_dropnav{background-image:url(../images/contactusnavbg.png);}
#navigation #nav ul li{
clear:both;
margin:0px 10px;
padding:0px;
font-size:12px;
line-height:25px;
}
.nav_block2{
width:182px;                        
display:none;
position:relative;
top:0px;
left:10px;
background-image:url(../images/homenavbg.png);
}
li > ul{                          
top:auto;
left:auto;
}
#nav li:hover ul, #nav li.over ul{
display:block;
}

/*.sub2 ul li a{
margin:0 0 0 15px;
padding:0px;
}*/
/*--END OF DROPDOWN NAVIGATION BAR--*/
/****************************/
/*-------- Main Image ------*/        
/****************************/
#main_image{
width:960px;
height:300px;
margin:0px;
padding:0px;
/*clear:both;*/
clear:left;
}
/*---- End of Main Image ----*/


/****************************/
/*------- Left Column ------*/        
/****************************/
#left_column, #right_column{
width:200px;
margin:0px;
padding:0px;
margin-top:5px;
float:left;
}
#leftcol_quote{
height:358px;
margin:0px;
padding:0px;
float:left;
}
#leftcol_img2, #leftcol_img3{
height:200px;
margin:0px;
padding:0px;
float:left;
}
/*--- End of Left Column ---*/

/****************************/
/*----- Centre Column ------*/      
/****************************/
#centre_column{
width:560px;
margin:0px 0px 20px 0px;
padding:0px;
float:left;
}
#centre_column a{
color:#333333;
}
#main_box{
width:520px;
margin:9px 20px;
padding:0px;
}
#main_box a{
color:#8D532C;
}
/*------ home/index --------*/
.info{
width:90px;
float:left;
color:#8D532C;
}
.prog{
margin:0px 0px 20px 0px;
padding:0px;
}
.prog h3{
padding:10px 0px 0px 0px;
margin:0px;
}
#main_box li{
list-style-type:square;
}
.listing{
width:507px;
margin:0px 0px 20px 13px;
padding:0px;
}
#main_box h2 a{			/*#events, #programmes, #volunteering*/
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
color:#008589;
padding:15px 0px 5px 0px;
margin:0px;
}
/*--- end of home/index ----*/



/*------ about us ----------*/
dl{
float:left;
width:530px;
margin:0px;
padding:0px 0px 20px 0px;
}
dt{
float:left;
clear:right;
font-weight:bold;
}
.parag_like{
margin:0px 0px 10px 0px;
padding:0px;
}
/*--- end of about us ------*/

/*------ services ----------*/
.credits{
margin:0px 0px 10px 0px;
padding:0px;
}
/*--- end of services ------*/

/*------ contact us --------*/
form{
width:520px;
height:auto;/**/
padding:0px;
margin:0px;
}
input{
width:220px;
margin-bottom:20px;
}
.contact_col1{
padding:0px;
margin:0px;
float:left;
}
.error{
font-size:11px;
float:left;
padding:0px;
margin:0px 0px 0px 5px;
color:#FF0000;
}
#submit_btn{
width:65px;
height:20px;
padding:0px;
margin:20px 0px 0px 0px;
}
#submit_btn input{
width:auto;
}
.brochures{
margin:0px;
padding:0px;
}
/*--- end of contact us ----*/

/*------ supporters --------*/
/*code below is based on the idea from: http://davidwalsh.name/css-sprites
#asb{background-position: 0px 0px; width: 172px; height: 126px; margin: 50px 0px; float:left;}
#acc{background-position: 0px -158px; width: 110px; height: 94px;  margin: 60px 20px; float:left;}
#acm{background-position: 0px -288px; width: 191px; height: 130px; margin: 50px 0px; float:right;}
#dia{background-position: 0px -444px; width: 355px; height: 60px; margin: 0px; float:left;}
#cyf{background-position: 0px -700px; width: 94px; height: 142px; margin: 0px 20px; float:right;}
#mtwell{background-position: 0px -530px; width: 209px; height: 93px; margin: 30px 0px; float:left;}
#cogs{background-position: 0px -650px; width: 100px; height: 30px; margin: -40px 50px; float:left;}
#lion{background-position: 0px -884px; width: 141px; height: 35px; margin: 30px 50px; clear:left; float:left;}
#jrmc{background-position: 0px -966px; width: 161px; height: 107px; margin: 0px 50px; clear:right; float:right;}
#rcn{background-position: 0px -1114px; width: 261px; height: 46px; margin: 50px 0px; clear:right; float:left;}
#nzct{background-position: 0px -1210px; width: 201px; height: 90px; margin: 50px 0px; float:right;}*/

/*this is working, but do not have alt value and if image is turned off, you can't see anything*/
#asb{background-position: 0px 0px; width: 172px; height: 126px; margin: 10px 0px; float:left; background-image:url(../images/logovert.png)}
#acc{background-position: 0px -158px; width: 110px; height: 94px;  margin: 20px 20px; float:left; background-image:url(../images/logovert.png)}
#acm{background-position: 0px -288px; width: 191px; height: 130px; margin: 10px 0px; float:right; background-image:url(../images/logovert.png)}
#dia{background-position: 0px -444px; width: 355px; height: 60px; margin: 30px 0px; float:left; background-image:url(../images/logovert.png)}
#cyf{background-position: 0px -700px; width: 94px; height: 142px; margin: 30px 20px; float:right; background-image:url(../images/logovert.png)}
#mtwell{background-position: 0px -530px; width: 209px; height: 93px; margin: -10px 0px; float:left; background-image:url(../images/logovert.png)}
#cogs{background-position: 0px -650px; width: 100px; height: 30px; margin: 0px 38px; float:left; background-image:url(../images/logovert.png)}
#lion{background-position: 0px -884px; width: 141px; height: 35px; margin: 60px 50px; clear:left; float:left; background-image:url(../images/logovert.png)}
#jrmc{background-position: 0px -966px; width: 161px; height: 107px; margin: 31px 50px; clear:right; float:right; background-image:url(../images/logovert.png)}
#rcn{background-position: 0px -1114px; width: 261px; height: 46px; margin: 19px 0px; clear:right; float:left; background-image:url(../images/logovert.png)}
#nzct{background-position: 0px -1210px; width: 201px; height: 90px; margin: 14px 0px 0px 0px; float:right; background-image:url(../images/logovert.png)}

/*
#asb{background-position: 0px 0px; width: 172px; height: 126px; margin: 50px 0px; float:left; background-image:url(../images/logovert.png)}
#acc{background-position: 0px -158px; width: 110px; height: 94px;  margin: 60px 20px; float:left; background-image:url(../images/logovert.png)}
#acm{background-position: 0px -288px; width: 191px; height: 130px; margin: 50px 0px; float:right; background-image:url(../images/logovert.png)}
#dia{background-position: 0px -444px; width: 355px; height: 60px; margin: -10px 0px; float:left; background-image:url(../images/logovert.png)}
#cyf{background-position: 0px -700px; width: 94px; height: 142px; margin: -10px 20px; float:right; background-image:url(../images/logovert.png)}
#mtwell{background-position: 0px -530px; width: 209px; height: 93px; margin: 30px 0px; float:left; background-image:url(../images/logovert.png)}
#cogs{background-position: 0px -650px; width: 100px; height: 30px; margin: -40px 50px; float:left; background-image:url(../images/logovert.png)}
#lion{background-position: 0px -884px; width: 141px; height: 35px; margin: 20px 50px; clear:left; float:left; background-image:url(../images/logovert.png)}
#jrmc{background-position: 0px -966px; width: 161px; height: 107px; margin: 0px 50px; clear:right; float:right; background-image:url(../images/logovert.png)}
#rcn{background-position: 0px -1114px; width: 261px; height: 46px; margin: 50px 0px; clear:right; float:left; background-image:url(../images/logovert.png)}
#nzct{background-position: 0px -1210px; width: 201px; height: 90px; margin: 45px 0px 0px 0px; float:right; background-image:url(../images/logovert.png)}
*/

/*code below is based on the idea from: http://css-tricks.com/css-sprites-with-inline-images
.clip{position: absolute; top: 0; left: 0; }
.posasb{ clip:rect(0 0px 1048px 0); }
.clipwrapper        { position: relative; height: 150px; width: 150px; }*/

#supporters{
margin:0px 0px 50px 0px;
padding:0px;
float:left;
}
/*--- end of supporters ----*/

/*---- End of Main Box -----*/


/****************************/
/*------- Right Column -----*/        
/****************************/
#right_column{
float:right;
}/**/
#right_column a{
color:#333333;
}
#blog_link{
background-image:url(../images/blog_bg.gif);
height:25px;
margin:0px;
padding:0px;
}
#blog_link a{
margin:3px 0px 3px 6px;
padding:0px;
font-weight:bold;
font-size:12px;
float:left;
color:#CCCCCC;
}
#link_img1{
height:178px;
margin:0px;/*5px 0px 0px 0px*/
padding:0px;
}
#link_img2{
height:178px;
margin:7px 0px 0px 0px;
padding:0px;
}
#link_img3{
height:358px;
margin:7px 0px 0px 0px;
padding:0px;
}
/*--- End of Right Column --*/


/****************************/
/*--------- Footer ---------*/        
/****************************/
#footer{
width:960px;
height:42px;
margin:0px;
padding:0px;
float:left;
clear:both;
}
#footer_nav{
/*width:436px;*/
height:100%;
margin:0px 0px 0px 262px;
padding:0px;
float:left;
}
.footer_link{
margin:0px 20px;
padding:0px;
}
#footer_nav a{
float:left;
color:#008589;
margin:0px;
padding:0px;
}
#copyright{
font-size:10px;
margin:0px 72px;
padding:0px;
}
#designer_link{
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-size:10px;
float:right;
margin:18px 10px 0px 0px;
padding:0px;
font-weight:bold;
}
#designer_link a{color:#008589;}
#bottom_line, #top_line{
background-color:#4E2E18;
width:960px;
height:5px;
float:left;
clear:both;
}
/*----- End of Footer ------*/