/*

Dark purple = 3e2f73
Green = 5d6a3a
Dark orange = b16200
Dark grey = 31373E

Thanks to http://css.maxdesign.com.au/floatutorial/index.htm for floating boxes

BE CAREFUL of the CSS padding element in IE!
*/


body 
{
background: #CCCC99; 
margin:0; 
padding:0; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:14px;
}

h1 
{
color:#b16200; 
font-size:20px; 
margin-top:5px; 
padding:10px 0px; 
font-weight:normal; 
border-bottom:1px dashed #b8b8b8;
line-height: normal; 
text-transform: uppercase;
}

h2 
{
font-size:16px;
color:#5d6a3a;
}

h3 
{
font-size:16px;
color:#31373E;
border:1px dotted #31373E;
padding: 0.4em 0 0.4em 0.5em;
background: #ddd; 
}

p 
{
color:#262626; 
font-size:14px; 
line-height:18px;
}

a 
{
color:#3e2f73; 
text-decoration:underline;
}

a:hover 
{
color:#666666;
}


#container
{
width: 900px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-color: #3e2f73;
color: #333;
line-height: 130%;
border:2px solid #3e2f73;
}

/*This code controls the entire top banner area */

#top
{
margin-top: 10px;
margin-bottom:210px;
margin-right:10px;
margin-left:10px;
background-color: #3e2f73;
}


/*This code controls where the slide show images show up on the page */

#fadeslideshow1 { 
float: right; 
}

/*This code controls the left hand navigation links */

#navigation {
clear: both;
float: left;
width: 210px;
border-top: 1px solid #ddd;
}

#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#navigation li {
 border-bottom: 1px solid #ddd;
}

#navigation li a:link, #navigation li a:visited  {
 font-size: 14px;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 border-left: 12px solid #3e2f73;
 border-right: 1px solid #3e2f73;
 background-color: #6A549C;
 color: #FFFFFF;
 text-decoration: none;
}

#navigation li a:hover {
 background-color: #3e2f73;
 color: #FFFFFF;
}

/* This code makes the side navigation highlight what page the user is currently on (dark purple). Whatever follows the first # must be an ID in the body element of the page. See http://articles.sitepoint.com/article/css-anthology-tips-tricks-4/3 */

#upcomingevents #navigation li.upcomingevents,  
#pastevents #navigation li.pastevents,
#tickets #navigation li.tickets,
#aboutus #navigation li.aboutus, 
#contactus #navigation li.contactus,
#ourboard #navigation li.ourboard,
#supportus #navigation li.supportus,
#volunteer #navigation li.volunteer, 
#news #navigation li.news,
#MFSMhome #navigation li.MFSMhome  
 {  
 background-color: #3e2f73;  
} 

#upcomingevents #navigation li.upcomingevents a,
#pastevents #navigation li.pastevents a, 
#tickets #navigation li.tickets a, 
#aboutus #navigation li.aboutus a, 
#contactus #navigation li.contactus a,
#ourboard #navigation li.ourboard a,
#supportus #navigation li.supportus a, 
#volunteer #navigation li.volunteer a,
#news #navigation li.news a,
#MFSMhome #navigation li.MFSMhome a
 {  
 background-color: #3e2f73;  
}   

/*This code controls the content area */

#content
{
clear: right;
margin-left: 210px;
border-left: 1px solid gray;
padding: 1em;
max-width: 80%;
background-color: #ffffff;  
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
text-align:center;
}

#footer p {font-size:12px; font-weight:normal; color:#3e2f73;}

#content h2 { margin: 0 0 .5em 0; }

.floatright { float: right; }
.floatleft { float: left; }

/* This is for the logos on the supporters page */
.thumbnail
{
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
text-align: center;
font-weight:bold; 
}

/* This is for the pictures on the upcoming events page */

.imageleft
{ 
float: left; 
margin: 15px; 
border: 1px solid #999;
text-align: center;
font-style: italic;
font-size: 12px;
}

.imageright 
{ 
float: right; 
margin: 15px; 
border: 1px solid #999;
text-align: center;
font-style: italic;
font-size: 12px;
} 

.clearboth { clear: right; }