/* Ben J Walker, Resound Design (c) 2009 */


html, body
{
margin: 0;
padding: 0;
background-color: #e9852e;
background-image: url('../images/background.gif');
background-position: top left;
background-repeat: repeat-x
}

body
{
font-size: 14px;
text-align: justify;
font-family: arial, helvetica, 'sans serif';
color: #323232;
line-height: 1.9em;
margin: 0 2.8em 0 2.8em
}




/* =STRUCTURE */

#container
{
background: #FFF;
margin: 0 auto 0 auto;
padding: 0;
position: relative;
min-width: 771px;
max-width: 1285px
}


#col1
{
width: 44%;
float: left;
margin-left: 38px
}

#col2
{
width: 44%;
float: right;
height: 1%;
margin-right: 38px
}





#col1_page
{
margin: 0 0 0 38px;
float: left;
width: 18.3em;
}


#col2_page
{
margin: 0 38px 0 23em;
height: 1%;
position: relative;
top: -1.35em
}

#col_page_main
{
margin: 0 38px 0 38px;	
}


/* =HEADER */
#header
{
width: 100%;
height: 155px;
z-index: 1000
}

#logo
{
position: absolute;
top: 10px;
left: 26px;
z-index: 500
}

#tagline
{
position: absolute;
top: 18px;
right: 26px;
font-family: Georgia, 'Times New Roman', serif;
color: #a2a2a2;
font-style: italic;
font-size: 1.5em;
letter-spacing: -0.05em;
background: #FFF;
height: 75px;
padding: 20px 0 0 0;
z-index: 250
}







/* =FOOTER */
#footer
{
width: 100%;
clear: both;
font-size: 0.8em;
color: #a2a2a2;
margin: 32px 0 0 38px
}




/* =IMAGES */

img
{
border: 0px
}




/* =LINKS */

a, a:link
{
color: #6D99ED;
text-decoration: none
}


a:visited
{
color: #A6A3C5;
text-decoration: none
}

a:hover, a:active
{
color: #E9852E;
text-decoration: none
}



/* =TEXT STYLES */
p
{
margin: 8px auto auto auto
}



/* =HEADINGS */
h1
{
color: #a2a2a2;
font-family: Georgia, 'Times New Roman', serif;
font-weight: normal;
text-transform: capitalize;
font-size: 2.8em;
margin: 0 0 16px 38px;
text-align: left
}


#col2_page h1, #col_page_main h1
{
margin-left: 0px
}

h2
{
color: #a2a2a2;
font-family: Georgia, 'Times New Roman', serif;
font-weight: normal;
text-transform: capitalize;
font-size: 2.2em;
margin: 16px 0 16px 0;
text-align: left
}

h3
{
color: #a9a9a9;
font-family: Georgia, 'Times New Roman', serif;
font-weight: normal;
text-transform: capitalize;
font-size: 1.5em;
margin: 4px 0 8px 0;
}

h4
{
color: #999999;
margin: 4px 0 8px 0;
}


/* =TABLES */
table
{
width: 100%
}

td
{
border-bottom: 1px dotted #d1d1d1;
padding: 0
}


th
{
color: #FFFFFF;
font-weight: bold;
background: #F0B179;
padding: 0 0 0 8px;
border-bottom: 1px solid #EC964A
}


/* =CALENDAR */
#calendar_nav
{
width: 200px;
padding: 4px;
text-align: center;
position: absolute;
top: 148px;
right: 32px;
color: #A2A2A2
}

#calendar_nav a
{
font-weight: bold;
color: #9E9E9E	
}

.calendar
{
margin: 0 0 16px 0;
text-align: left
}

.calendar th
{
text-align: center;
color: #ed9950;
font-size: 2.1em;
padding: 0 0 16px 0;
background-color: transparent;
border: 0px
}


.calendar td:hover, .calendar div:hover
{
background-image: url('../images/rowbackground_hover.gif');
background-position: bottom left;
background-repeat: repeat-x
}



.calendar td
{
font-size: 0.9em
}

.calendar div
{
font-size: 0.95em	
}


.date, div:hover.date
{
width: 32px;
height: 32px;
position: relative;
background-image: url('../images/datebackground.gif');
background-repeat: no-repeat;
background-position: top left;
color: #323232;
float: left;
margin: 8px;
}

.date_descr
{
font-size: 0.8em;
line-height: 1.3em;
padding: 0.8em;
clear: both
}

.date_toggler
{
height: 48px;
position: relative;
}

.month, .day_number
{
padding: 0;
margin: 0;
font-weight: bold
}

.month
{
letter-spacing: -0.05em;
width: 32px;
text-align: center;
position: absolute;
top: -3px;
left: 0;
font-size: 1.1em;

}

.day_number
{
width: 32px;
text-align: center;
position: absolute;
top: 9px;
left: 0;
font-size: 0.8em
}

.event_title
{
position: absolute;
top: 10px;
left: 46px;
display: block;
overflow: hidden;
width: 100%;
line-height: 1em
}

.event_time
{
color: #777;
font-size: 0.9em;
width: 100%
}



/* =FRONT PAGE */
#featurepic
{
height: 240px;
width: 100%;
background-color: #F0F0F0;	
overflow: hidden;
text-align: center
}



/* =SIDE BAR */
#col1_page ul
{
padding: 0;
margin: 0 0 16px 0;
list-style: none;		
}

#col1_page ul li a
{
border-bottom: 3px solid #FBF3EC;
width: 100%;
display: block;
}



#col1_page ul li a:hover
{
border-bottom: 3px solid #F5CAA6;
}

#col1_page ul li.event a
{
width: auto;
display: inline;
border: 0;
position: relative;
top: -8px
}

li.event
{
border-bottom: 3px solid #FBF3EC;	
padding: 3px 0 0 0;
height: 48px
}

li.event:hover
{
border-bottom: 3px solid #F5CAA6;
cursor: pointer
}

#col1_page ul li.event span.small
{
margin: 0
}


#col1_page ul li span.small
{
font-size: 0.7em;
margin: 0 0 0 0.25em
}



/* =MISC */
.clickable
{
cursor: pointer	
}

.hidden
{
display: none;
visibility: hidden
}



/* =FORMS */
label
{
display: block;
font-size: 0.8em;
font-weight: bold	
}

fieldset
{
border: 0px;
}

button
{
font-family: Georgia, 'Times New Roman', serif;
color: #555;
font-style: italic;	
font-weight: bold
}

input, textarea
{
font-family: arial, helvetica, 'sans serif';
color: #323232;	
font-size: 1em
}



/* =CONTACT FORM */
#contact1
{
width: 240px;
height: 160px;
float: left
}

#contact1 input
{
width: 100%	
}

#contact2
{
height: 160px;	
}

#contact2 textarea
{
width: 100%;
height: 119px
}

.buttonbar
{
clear: both;
background: #F0F0F0;
padding: 6px 0 6px 12px
}


/* =MENU (SUCKERFISH) */

/*IE7 FIX*/
#nav li:hover, #nav li.hover {
    position: static;
}
/*IE7 FIX*/

#nav, #nav ul
{ /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
position: absolute;
top: 84px;
left: 125px;
letter-spacing: -0.05em;
font-size: 0.9em;
z-index: 1000
}

#nav a
{
display: block;
width: 7em;
color: #a2a2a2;
background: #FFFFFF;
text-decoration: none;
text-align:center;
padding: 0.25em 0 0.25em 0;
height: 32px
}

#nav a:hover 
{
color: #323232;
background: #F9F9F9;
border-bottom: 1px solid #D1D1D1
} 



#nav li { /* all list items */
	float: left;
	width: 7em; /* width needed or else Opera goes nuts */
}

#nav li ul
{
/* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top: -3.6em;
font-size: 1em;
}

#nav li ul a
{
background: #F3F3F3;
border-bottom: 1px solid #F3F3F3;
height: 32px
}

#nav li ul a:hover
{
background: #F9F9F9;
border-bottom: 1px solid #D1D1D1
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -6.7em 0 0 7em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

/* =NEWSFLASH */
#newsflash
{
background-color: #EB8F3F;
padding: 24px 16px 16px 16px;
color: #FFFFFF;
font-size: 1.45em;
letter-spacing: -0.05em;
margin: 0 0 16px 0;
position: relative;
}

#newsflash a.close
{
position: absolute;
top: 4px;
right: 16px;
color: #fcd795;
font-size: 0.7em;
font-weight: bold
}


/* =GOOGLE MAP */
#map
{
min-width: 400px;
height: 320px;
width: 100%;
margin-bottom: 1em;
border: 1px solid #000000;
float: left;
}

.map
{
color: #42444f;
font-size: 0.8em;
line-height: 1.2em
}

/* STYLES FOR CROSSFADER */

div#cf_container
{
width: 100%;
height: 175px;
margin: 0;	
overflow: hidden;
border: 1px solid black
}

div.cf
{
width: 100%;
height: 175px;
overflow: hidden
}

div#image_wrapper
{
width: 100%;
height: 175px;
margin: 8px 0 8px 0;
text-align: center
}


/* STYLES FOR CROSSFADER */

.pic_left
{
float: left;
margin: 4px 8px 4px 0	
}

.pic_right
{
float: right;
margin: 4px 0 4px 8px
}

div#col1 ul li, div#col2_page ul li, div#col_page_main ul li
{
list-style-image: url('../images/menubullet.gif');
margin-left: 24px
}

div.event
{
float: left;
width: 50%;
border-bottom: 1px dotted #d1d1d1;
}

div.empty
{
height: 48px	
}

.event_info
{
border: 1px solid #F1F1F1;
padding: 8px
}

.event_info th, .event_info td
{
padding: 0px 8px 0px 8px
}

/* =ARTICLES */
ul.articles
{
padding: 0;
margin: 0px 0px 16px 0px;
list-style: none;	
}

ul.articles li
{
width: 100%;
display: block;
padding: 4px 8px 12px 8px;
cursor: pointer;
margin: 0
}




li.odd
{
background: #EEEEEE;
}

div.articles div
{
border: 1px solid #E1E1E1;
padding: 16px;
margin: 0 0 16px 0
}

div.articles div a
{
background: #EFA96C;
color: #FFF;
font-weight: bold;
padding: 0 2px 0 2px
}

div.articles div a:hover
{
background: #E9852E;
}

div.pager_bar
{
background: #EEEEEE;
color: #A2A2A2;
padding: 0 6px 4px 6px;
font-weight: bold;
font-size: 0.8em;
overflow: hidden;
}

div.pager_bar a
{
display: block;
float: left;
margin: 6px 4px 2px 0;
color: #E9852E;
padding: 0 4px 0 4px;
}

div.pager_bar a.selected
{
background: #EEA462;
color: #FFFFFF;

}

div.pager_bar a:hover
{
color: #FFFFFF;
background: #F2BE8F
}


div.pager_bar span
{
float: left;
margin: 6px 6px 0 0;
}

.spacer
{
width: 100%;
height: 0px;
clear: both
}