/*----------------------------------------------------------------
Web Design Gilda Dadush
Calendar.css defines the styles for the www.wbfn.org montly calendar
------------------------------------------------------------------*/

/*Setting page default*/ 
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	background-image: url(../Images/dayback.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

[if IE]> 
<style type="text/css"> 
  body {word-wrap: break-word;} 
</style> 
<![endif] 

html{
font-size:100%/*WinIE6- text resize adjust*/
}

div, h1, h2, h3, h4, h5, h6, p, ul, ol, form{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

a {
	text-decoration: none;
	color: #717195;
}
a:hover {
	color: #750641;
	text-decoration: underline;
}
/*End setting page default*/ 

#banner {
	height: 9.5em;
	width: 63.33em;
	margin-bottom: 1.67em;
	margin-right: auto;
	margin-left: auto;
}

#Wrapper {
	width: 66.67em;
	min-width: 63.33em;
	margin-top: 1.67em;
	font-size: .75em;
	margin-left: 5em;
}
#Wrapper h1 {
	width: 13em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 3.5em;
	font-weight: bold;
	color: #194968;
	margin-right: auto;
	margin-left: auto;
	line-height: 1.5em;
	border: 1px solid #194968;
	padding-bottom: 0.6em;
	padding-top: 0.3em;
	position: relative;
	padding-left: 4.5em;
	margin-top: 1em;
	margin-bottom: 1.5em;
}

/*hacking the IE5 box model for the Wrapper box size tag*/
*html #Wrapper h1 {
	width: 18em;
	w\idth: 13em;
}
/*The intro style only appears if we have a small intro text before the list of links*/
#Wrapper .intro {
	padding-left: .83em;
	margin-top: 0px;
	color: #717195;
}

#Wrapper .intro p {
	padding: 0em;
	margin-bottom: 0em;
}
#Wrapper .intro ul {
	margin-top: 0px;
	margin-bottom: 0.3em;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0.3em;
	padding-left: 1.7em;
}
#Wrapper .intro li {
	list-style-position: outside;
	list-style-type: circle;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0.1em;
	list-style-image: url(../Images/bullet-blue-6.gif);
}
#Wrapper .description p img {
	float: left;
}
#Wrapper #top {
	padding-bottom: 1.25em;
	height: 1px;
	width: 1px;
}
#Wrapper .description .back-to-top {
	margin-bottom: 2em;
	text-align: right;
}
/*without this additional div at the top of the page, the top of the H1 heading would be cut when going linking to the top of the page in Firefox*/
.go-to-anchor {
	padding-bottom: 0px;
	height: 1px;
	width: 1px;
}


#Wrapper .description {
	margin-top: 4em;
}

#Wrapper h1 img {
	margin-right: 1.67em;
	vertical-align: middle;
	margin-bottom: 1.67em;
	position: absolute;
	left: -.3em;
	top: -.4em;
	border-style: none;
}
#Wrapper h1 span {
	font-size: .3em;
	line-height: 0.5em;
}
#Wrapper h1 .contact {
	line-height: 2.5em;
	font-size: 0.35em;
	font-weight: normal;
}
#Wrapper  h2 {
	color: #194968;
	padding-left: 10.5em;
	margin-top: 2.2em;
	font-size: 1.5em;
	position: relative;
	padding-top: 0.3em;
	padding-bottom: 0.5em;
	width: 18em;
	border: 1px solid #194968;
	margin-left: 1em;
	margin-bottom: 1em;
}

/*hacking the IE5 box model for the H2 tag*/
*html #Wrapper h2 {
	width: 28.5em;
	w\idth: 18em;
}

/*changes the font size of the title when there is only one activity per page*/
#Wrapper .description .single {
	font-size: 1.3em;
	font-weight: bold;
}
#Wrapper .description ul {
	margin-bottom: 1em;
	margin-left: 2.5em;
}
#Wrapper .description li {
	list-style-position: inside;
	list-style-image: url(../Images/bullet-blue-6.gif);
	list-style-type: disc;
	text-indent: 2.5em;
}
#Wrapper h2  img {
	position: absolute;
	top: -3.2em;
	left: -1em;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#Wrapper h2 span {
	font-size: .85em;
	font-weight: normal;
}
/*Although in most cases H5 appears as a 3rd level heading, defining it as H5 gives more flexibility for later*/
#Wrapper  h5 {
	padding-left: 2.5em;
	margin-top: 0px;
	font-weight: normal;
	margin-bottom: 1em;
	font-size: 1.1em;
}
#Wrapper  h4 {
	padding-left: 2.5em;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

#Wrapper  p {
	padding-left: 2.5em;
	margin-bottom: .5em;
}
/*This style is used for example on the computer pages to introduce the highlights of the classes*/
#Wrapper  .highlights {
	font-weight: bold;
	margin-bottom: 0px;
}
/*Action is the small navigation bar which allows for registration, go back to the calendar, or...*/
#Wrapper .action {
	margin-bottom: 0.5em;
	margin-top: 1em;
	margin-left: auto;
	width: 40em;
	margin-right: auto;
	text-transform: uppercase;
}

#Wrapper .action ul {
	display: block;
}
#Wrapper .action li {
	display: inline;
	font-size: .9em;
	color: #FFFFFF;
	font-weight: bold;
	padding: 0px;
	margin-right: .083em;
}
#Wrapper .action a {
	color: #FFFFFF;
	background-color: #484968;
	padding: .o83em;
}
#Wrapper .action a:hover {
	color: #FFFFFF;
	background-color: #9a5a7c;
	padding: .083em;
}
/*navigate is the small navigation bar which allows for going through multiple pages on the same heading: page 1, page 2...*/
#Wrapper .navigate {
	margin-bottom: 0.5em;
	margin-top: 1em;
	width: 10em;
	margin-right: auto;
	margin-left: auto;
}
#Wrapper .navigate ul {
	display: block;
}
#Wrapper .navigate li {
	display: inline;
	font-size: .9em;
	color: #FFFFFF;
	font-weight: bold;
	padding: 0px;
	margin-right: .083em;
}
#Wrapper .navigate a {
	color: #FFFFFF;
	background-color: #484968;
	padding: .083em;
}
#Wrapper .navigate a:hover {
	color: #FFFFFF;
	background-color: #9a5a7c;
	padding: .083em;
}
/*The nav ID is used for the links at the beginning of pages with multiple activities*/
#Wrapper #nav {
	width: 28em;
	margin-top: 6%;
	margin-right: auto;
	margin-left: auto;
	padding-top: .83em;
	padding-right: .83em;
	padding-bottom: .83em;
	padding-left: 1.67em;
	border: 1px solid #717195;
}
*html #Wrapper #nav {
	width: 38.5em;
	w\idth: 28em;
}
#Wrapper #nav li {
	width: 100%;
	list-style-position: inside;
	list-style-image: url(../Images/bullet-blue-6.gif);
}
#Wrapper #nav .no-bullet {
	background-image: none;
	list-style-image: none;
	font-weight: bold;
	color: #194968;
	margin-top: .5em;
}
#Wrapper h3 {
	padding-left: 2.5em;
	font-weight: normal;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.photo-frame {
	width: 80%;
	height: 100px;
	overflow: auto;
	border: 4px double #717195;
	margin-bottom: 3em;
	position: relative;
	padding: 5px;
	background-color: #f4f4f4;
	margin-right: auto;
	margin-left: auto;
}
.photo-frame .photo {
	width: 2657px;
}
.photo-frame .photo img {
	float: left;
	margin-right: 10px;
}
#footer {
	text-align: left;
	margin-top: 2.5em;
	padding-top: 0px;
}
#Wrapper #footer ul {
	display: block;
	width: 60em;
	margin-right: auto;
	margin-left: auto;
}
#Wrapper #footer li {
	display: inline;
	margin-left: 5em;
	margin-right: 5em;
}

#Wrapper .description .letter {
	margin-bottom: 1.5em;
}
#Wrapper #disclaimer {
	font-size: 1.1em;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #194968;
	margin-top: 0px;
	padding: .42em;
	text-align: left;
	margin-bottom: 1.25em;
}
#Wrapper .activity-highlights {
	color: #FF8843;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 2.5em;
	font-weight: bold;
}