@charset "utf-8";
/* CSS Document */



/*
---------------------------------------------
01. main/default elements
---------------------------------------------
*/

body { background:#B393C2 url(../images/bg_body.JPG) repeat-x; font-family:"Lucida Sans", Arial, Helvetica, sans-serif}

p { font-size:12px; font-weight:normal; color:#000000; line-height:1.3em}

a { color:purple}

h1 { font-size:20px; font-weight:normal; color:#000000}
h2 { font-size:15px; font-weight:normal; color:#000000}
h3 { font-size:12px; font-weight:normal; color:#000000}



/*
---------------------------------------------
02. container
---------------------------------------------
*/


#container { width:100%; float:left; background: url(../images/mainimg.png) no-repeat top center; margin-top:25px}

/*
---------------------------------------------
03. wrapper
---------------------------------------------
*/

#wrapper { width:775px; margin:0 auto; padding-left:160px} 

/*
---------------------------------------------
03. logo
---------------------------------------------
*/

.logo { float:right; margin-top:-13px}


/*
---------------------------------------------
04. top nav
---------------------------------------------
*/

#nav { width:665px; float:left}
#nav ul li { float:left}
#nav ul li a { float:left; position:relative}

#nav ul li a.home { width:86px; height:90px; background:url(../images/btnhome.png) no-repeat; margin-top:22px}
#nav ul li a.home:hover { background:url(../images/btnhomehover.png) no-repeat}
#nav ul li a.home_selected { width:86px; height:90px; background:url(../images/btnhomehover.png) no-repeat; margin-top:22px}


#nav ul li a.contact { width:91px; height:94px; background:url(../images/btncontact.png) no-repeat; margin-top:30px}
#nav ul li a.contact:hover {  background:url(../images/btncontacthover.png) no-repeat}
#nav ul li a.contact_selected { width:91px; height:94px; background:url(..//btncontacthover.png) no-repeat; margin-top:30px}


#nav ul li a.parents { width:90px; height:84px; background:url(../images/btnparents.png) no-repeat; margin-left:-5px}
#nav ul li a.parents:hover {  background:url(../images/btnparentshover.png) no-repeat}
#nav ul li a.parents_selected { width:90px; height:84px; background:url(../images/btnparentshover.png) no-repeat; margin-left:-5px}


#nav ul li a.fun { width:90px; height:84px; background:url(../images/btnfun.png) no-repeat}
#nav ul li a.fun:hover {  background:url(../images/btnfunhover.png) no-repeat}
#nav ul li a.fun_selected { width:90px; height:84px; background:url(../images/btnfunhover.png) no-repeat}


#nav ul li a.volunteers { width:110px; height:102px; background:url(../images/btnvolunteers.png) no-repeat; margin-top:-35px; margin-left:-15px}
#nav ul li a.volunteers:hover {  background:url(../images/btnvolunteershover.png) no-repeat}
#nav ul li a.volunteers_selected { width:110px; height:102px; background:url(../images/btnvolunteershover.png) no-repeat; margin-top:-35px; margin-left:-15px}


#nav ul li a.calender { width:92px; height:88px; background:url(../images/btncalendar.png) no-repeat; margin-top:-20px; margin-left:-8px}
#nav ul li a.calender:hover {  background:url(../images/btncalendarhover.png) no-repeat}
#nav ul li a.calender_selected { width:92px; height:88px; background:url(../images/btncalendarhover.png) no-repeat; margin-top:-20px; margin-left:-8px}


#nav ul li a.extremekids { width:144px; height:158px; background:url(../images/btnxtremekids.png) no-repeat; margin-top:-20px; margin-left:-10px}
#nav ul li a.extremekids:hover {  background:url(../images/btnxtremekidshover.png) no-repeat}
#nav ul li a.extremekids_selected { width:144px; height:158px; background:url(../images/btnxtremekidshover.png) no-repeat; margin-top:-20px; margin-left:-10px}


/*
---------------------------------------------
05. content
---------------------------------------------
*/


#content { width:550px; float:left; margin-top:-18px; position:relative}

/*
---------------------------------------------
06. left panel
---------------------------------------------
*/


#leftpanel { width:206px; float:left; overflow:auto}

.invite { width:206px; float:left; padding-bottom:5px; border-bottom:1px solid #000000; margin-bottom:5px}

.leftbox { width:196px; height:250px; float:left; background:url(../images/leftcontentbox.png) no-repeat; padding-top:5px; padding-bottom:5px; padding-right:4px}

.leftbox .textarea-expandable {width:196px; height:250px; float:left; overflow:auto;}

.leftbox p { padding:5px 5px 10px 5px}

#leftpanel2 { width:700px; float:left; overflow:auto}



/*
---------------------------------------------
07. right panel
---------------------------------------------
*/


#rightpanel { width:335px; height:360px; float:left; border-left:1px solid #000000; padding-left:4px; margin-top:-20px; position:relative;}

.rightbox { width:325px; height:350px; float:left; background:url(../images/rightcontentbox.png) no-repeat;  padding:5px;}
.rightbox .textarea-expandable {width:325px; height:330px; float:left; overflow:auto}

.rightbox h1 {font-size:20px; font-weight:normal; color:#000000;}

.rightbox p { padding-top:15px; padding-bottom:10px}

/* adding display none to Page Title. This is so search engines can still see it, but we're not taking it out completely */
#pagetitlearea { display:none;}


/*
---------------------------------------------
08. footer
---------------------------------------------
*/


#footer { width:665px; float:left; text-align:center; padding-top:108px; padding-bottom:30px}