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

01. main/default HTML elements

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

body, table, input, textarea, select, li, button{
	font:1em Helvetica, Arial, Sans-Serif;
	line-height:1.5em;
	color:#666;
}		
body{
	font-size:13px;
	background:#fff;
	margin:0;
	padding:0;
	text-align:center;
}
h1, h2, h3, h4, h5, h6{
    font-weight:normal;
    margin:0;
    line-height:1em;
}	
h1{font-size:3.2em;margin-bottom:.5em; font-family: 'Dancing Script', Arial, sans-serif;}	
h2{font-size:1.75em;margin-bottom:.0em;padding-top:.2em;}	
h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
h4{font-size:1.25em;margin-bottom:.6em;}
h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}

p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1em 0;}
ul, ol, dl{padding:0;}
ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
li{margin:0;padding:0;display:list-item;list-style-position:outside;}	
blockquote, dd{padding:0 0 0 2em;}
pre, code, samp, kbd, var{font:100% mono-space,monospace;}
pre{overflow:auto;}
abbr, acronym{
    text-transform:uppercase;
    border-bottom:1px dotted #000;
    letter-spacing:1px;
    }
abbr[title], acronym[title]{cursor:help;}
small{font-size:.9em;}
sup, sub{font-size:.8em;}
em, cite, q{font-style:italic;}
img, a img{border:none;}			
hr{color: #ddd; background-color: #ddd; border:none;}	
table{width:100%;border-collapse:collapse;}
th,caption{text-align:left;}
form div{margin:.5em 0;clear:both;}
/*label{display:block;}*/
fieldset{margin:0;padding:0;border:none;}
legend{font-weight:bold;}
input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}
iframe {border: none;}
	
/*
---------------------------------------------

01. Common Classes

---------------------------------------------
*/		
	
.left{float:left;}
.right{float:right;}
.center{text-align:center;}

.clear{clear:both;}
.first{margin-left:0 !important;}
.last{margin-right:0 !important; border-right: none !important;}
.top{margin-top:0 !important;}
.bottom{margin-bottom:0 !important;}	
.hidden, .print{display:none;}
.noliststyle{list-style: none;}
.graphic{
    margin:0;
    padding:0;
    display:block;
    overflow:hidden;
    text-indent:-8000px;
    }
.pink {color: #e04166;}
.thumb {margin: 0 10px 10px 0;}
.more_info {font-weight: bold; margin-top: 10px;}
.bordernone {border: none;}
.border_rt {border-right: 1px solid #ddd;}
.padding_rt{padding-right: 10px;}

a:link, a:active, a:visited {
	text-decoration: none;
	color: #d03d60;
}
a:hover {
	text-decoration: underline;
}
#footer a:link, #footer a:active, #footer a:visited {
	text-decoration: none;
	color: #666;
}
#footer a:hover {
	color: #000;
	text-decoration: underline;
}

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

01. Layout

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

body{background: url('../images/body_bg3.jpg') repeat-x top;}
#container{	/*aka wrapper*/
    margin:0 auto;
    width:960px;
    text-align:left;
    position:relative;
    background: #fff;
    }
.inner{
    position:relative;
    }
#header{
    position:relative;
    }	
#footer{
    position:relative;
    clear:both;
    }	
    
.content{
    clear:both;
    padding:0;
    }
	
/*
---------------------------------------------

01. Grid

---------------------------------------------
*/
		
.cols{} /* main column container class */
.col{
    float:left;
    display:inline;
    width:48%;margin-left:4%; /* 2 equal width columns layout - default */
    }	
.cols3 .col{width:30%;margin-left:5%;} /* 3 equal width columns layout */
.cols4 .col{width:22%;margin-left:4%;} /* 4 equal width columns layout */

/* use following classes to build custom grid (add as many as you want) */

.col1, .col2, .col3{float:left;display:inline;}
.col1{}
.col2{}
.col3{}

.indent1{}
.indent2{}
.indent3{}
		
/*
---------------------------------------------

02. container and wrapper 

---------------------------------------------
*/
#bigdiv {
	width: 100%;
	height: 256px;
	float: left;
	background-color: transparent;
	/*background-image: url("../images/bgcontainer.jpg");*/
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;
}
#content { width:940px;
	float:left;
	margin-bottom:-25px;
	position:relative;
	background: #fff;
	border:1px solid #ddd;
	padding: 0 10px 50px 10px;	
}
/*
---------------------------------------------

03. header (logo / nav)

---------------------------------------------
*/
#header {
	width: 960px;
	height: 175px;
	float: left;
	padding: 0;
	position: relative;
	z-index: 1;
	background: url(../images/header_bg.jpg) top no-repeat;
}
#topbar {
	height:5px;
	background:#fff;
	border-bottom:1px solid #E57E8F;
	line-height: 25px;	
}
#login_tab {
	background: url(../images/tutus_login.gif) top;
	position: absolute;
	top:-3px;left: 650px;
	width:326px;
	height:41px;
	text-align: center;
}
a.portal {
	display: block;
	font-size: 1.3em;
	margin-top: 10px;	
}
a.portal:hover {
	color: #000;	
}
#logo {
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 99;
	width: 202px;
}
#social_media {
	position: absolute;
	left: 260px;
	top:85px;
}
img#follow_us {margin: 0 0 5px 2px;}
img#twitter { margin: 0 0 0 5px;}
img#payments { position: absolute; top:24px; right: 0;}
img#newsletter_icon { position: absolute; top:10px; left: 345px; }
img#newsletter_txt { position: absolute; top:15px; left: 395px; }

#nav {position: absolute; top:60px; right: 5px; width: 608px; display: block;}
#nav li {float: left;}
#nav li a{
	display: inline;
	float: left;
	width:120px;
	height: 73px;
	cursor: pointer;
}
#nav li#home a{
	background: url(../images/navbar.jpg) 0 0 no-repeat;
}
#nav li#home a:hover, #nav li#home_current a{
	background: url(../images/navbar.jpg) 0 -73px no-repeat;
}

#nav li#about a {
	background: url(../images/navbar.jpg) -120px 0 no-repeat;
}
#nav li#about a:hover, #nav li#about_current a{
	background: url(../images/navbar.jpg) -120px -73px no-repeat;
}

#nav li#programs a {
	background: url(../images/navbar.jpg) -240px 0 no-repeat;
}
#nav li#programs a:hover, #nav li#programs_current a {
	background: url(../images/navbar.jpg) -240px -73px no-repeat;
}

#nav li#forms a {
	background: url(../images/navbar.jpg) -360px 0 no-repeat;
}
#nav li#forms a:hover, #nav li#forms_current a{
	background: url(../images/navbar.jpg) -360px -73px no-repeat;
}

#nav li#contact a {
	background: url(../images/navbar.jpg) -480px 0 no-repeat;
	width:122px;
}
#nav li#contact a:hover, #nav li#contact_current a {
	background: url(../images/navbar.jpg) -480px -73px no-repeat;
	width:122px;
}
.address {
	font-weight: bold;
	font-size: 16px;
	color: #fff;
	position: absolute;
	right: 10px;
	top:147px;
	
}
/*
---------------------------------------------

04. top box / slideshow - home page

---------------------------------------------
*/
#topbox {
	background: #fff;;
	height: 415px;
	margin-top: 10px;
}
#topbox #call_to_action {
	width: 430px ;
	height: 415px;
	margin-left: -10px;
	background: url(../images/classes_block.png) top no-repeat;	
}

#topbox #call_to_action2 {
	width: 400px ;
	margin:30px 0 0 10px;
}
p.home_classes {
	font-family: 'Dancing Script', Arial, sans-serif;
	font-size: 2.8em;
	font-weight: bold;
	line-height: 50px;
	margin: 0 30px;
}
#topbox #call_to_action2 img#button {
position: relative;
	top: 40px;
	left: 80px;
}
#topbox #call_to_action img#button {
	position: relative;
	top: 287px;
	left: 100px;
}
#topbox #slideshow_box {
	width: 520px;
	height: 364px;
	background: url(../images/image_slider_bg.png) repeat-x;
}
#more_images {
	position: absolute;
	top: 340px;
	left: 445px;
	z-index: 99;
}
/*
---------------------------------------------

05. Columns Grid 960

---------------------------------------------
*/
.col_margin_right {margin-right: 10px;}
.col_margin_left {margin-left: 10px;}
.columns {
	width: 960px;
	height: 263px;
	background: url(../images/home_columns.png) no-repeat;
	margin: 0px 0 30px -10px;
}
.col_220 { /* 4 column set up*/
	width: 220px;
	margin: 0 10px;
	display: inline;
}
span.col_hdr {
	display:block;
	font-size: 18px;
	font-weight: bold;
	margin: 45px 0 10px 0;
}
.col_460 { 
	width: 449px;
	margin: 0 10px;
	display: inline;
}
.col_copy {font-size: 14px; line-height: 23px;}
.col_640 { /* Left column of 2*/
	width: 640px;
	display: inline;
	font-size: 13px;
}
.col_280 {/* Right column of 2*/
	width: 280px;
	display: inline;
}
img.announcements {
	margin-bottom: 0px;
}
.announce_wrap {
	background: #f8f8f8;
	display: block;
	border-bottom: 1px solid #ddd;
	padding: 20px 0 5px 0;
}
.date {font-size: 14px; font-weight: bold; font-style: italic; margin-bottom: 10px; padding: 0 10px;}
.announce_copy {
	font-size: 11px;
	line-height: 14px;
	padding: 0 10px;
}
/*
---------------------------------------------

05. footer

---------------------------------------------
*/
#bgfooter { width:100%; height:100px; float:left; background:#ffb3c0; background-position:0 -84px; padding-top:35px;}

#footer { width:950px; margin:0 auto; text-align: left; padding: 0 5px;}

#footer ul.footer_nav li{
	display: inline;
	border-right: 1px solid #666;
	padding: 0 10px; 
}

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

05. Contact Form

---------------------------------------------
*/
#contact_form {
	width: 459px;
}
#quick_form {
	width: 280px;
}
#contact_form input[type=text], #quick_form input[type=text] {
	width: 90%;
	height: 25px;
	padding: 0 5px;
	margin: 0 0 10px 0;
	font-size: 15px;
	border-top:2px solid #ccc;
	border-right:1px solid #e1e1e1 ;
	border-bottom: 1px solid #e1e1e1;
	border-left:2px solid #ccc;
} 
#contact_form #submit_btn {
	float: right;
	margin: 20px 30px 0 0;
}
#quick_form #submit_btn {
	float: right;
	margin: 20px 15px 0 0;
}

#contact_form textarea, #quick_form textarea {
	width: 90%;
	height: 100px;
	font-size: 15px;
	padding: 0 5px;
	font-family: Arial, Verdana, sans-serif;
	border-top:2px solid #ccc;
	border-right:1px solid #e1e1e1 ;
	border-bottom: 1px solid #e1e1e1;
	border-left:2px solid #ccc;
}

.error {
	color: red;
}
#contact_form #messageSent h5, #quick_form #messageSent h5 {
	padding: 25px 0 0 30px;
	font-size: 20px;
}
#contact_form #messageSent p, #quick_form #messageSent p {
	font-size: 20px;
	padding: 0 20px 0 30px;
}

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

05. Accordion

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

#acc_donate {margin: 0 auto;}

.acc_donate { font:12px Verdana,Arial; color:#666}

.acc_donate dt {
	padding:6px 6px 8px 10px;
	margin: 5px;
	border: 1px solid #ccc;; 
	font-weight:bold;
	cursor:pointer;
	/*background: url(http://www.wmfe.org/img/accordionbg.gif) repeat-x;*/
	color:#666;
	border: 1px solid #d6d6d6;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	}
.acc_donate dt:hover {color:#333; background: url(../images/accordion_over.gif) repeat-x;}
.acc_donate .open {color:#333; background: url(../images/accordion_over.gif) repeat-x;}
.acc_donate .open:hover {color:#333; background: url(../images/accordion_over.gif) repeat-x;}
.acc_donate dd {overflow:hidden; background:#fff;padding-left:10px; }
.acc_donate span {display:block; width:93%; padding:15px; margin-left: 0px; border: 1px solid #ddd;}

.volunteer.acc_donate span span {border: none;padding:0px;}
/*#accordion {width:459px; margin:50px auto}
.accordion {width:459px; font:12px Verdana,Arial; color:#033}
.accordion dt {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(../../img/header.gif)}
.accordion dt:hover {background:url(../../img/header_over.gif)}
.accordion dd {overflow:hidden; background:#fff}
.accordion span {display:block; width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}*/


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

06. Programs quick nav

---------------------------------------------
*/
span.quick_anchor {
	margin: 0 0 60px 0;
	display: block;
}
ul.quick_nav {
	list-style: none;
	width: 940px;
	margin: 0 auto; 
}
ul.quick_nav li {
	display: inline;
	padding: 3px 10px 3px 10px;
	border-right: 1px solid #666;
}
ul.quick_nav li:last-child {
	border-right: none;
}
#hidden_quick_nav {
	height: 50px;
	line-height: 50px;
	background: url(../images/trans_bg.png) repeat;
	color: #000;
	display: none;
	position: fixed;
	top:0;
	width: 100%;
	z-index: 9999;
}
#hidden_quick_nav ul.quick_nav {
	width: 1085px;
}
#hidden_quick_nav a {
	color: #fff;
	font-weight: bold;
}
#hidden_quick_nav a:hover {
	color: #FFB3C0;
}
.to_top {
	float: right;
	font-weight: bold;
	position: relative;
	top: -20px;
	right: 20px;
}



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

07. Gallery

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

a.gal-img {
	padding: 5px;
	margin: 10px;
	border: 2px solid #ddd;
	display: block;
	width: 120px;
	float: left;
}
.gal-img:hover	{ border-color: #FFB3C0; }