/*
	style.css
	Style Sheet for the Brown City, Michigan Website
	Written by Ryan Sandor Richards
*/

/************************************************************************ 
	General Styles
	
	These styles define the general look and feel of the entire page.
	Major elements such as headers, paragraphs, and links are styled
	here.
*************************************************************************/
body
{
	background-color: #FFF;
	margin: 10px;
	padding: 2px;
	color: #000;
	font-family: verdana, sans-serif;
	font-size: 13px;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Hide this from IE */
html > body { text-align: left; }

p.big, p.bigred { font-size: 20px; }
p.bigred { color: red; }

div.divided
{
	margin-top: 20px;
}

img.image_left { 
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

img.image_right {
	float: right;
	margin-left: 10px;
	margin-bottom; 10px;
}

p.center_italic
{
	text-align: center;
	font-style: italic;
}

img.image_border { border: 1px solid #888; }

a
{
	color: #5A8952
	text-decoration: none;
} 

a:hover
{
	text-decoration: underline;
}

h1, h2, h3 { color: #AA9542; }

h1 { font-size: 150%; padding-bottom: 2px; border-bottom: 1px solid  #AA9542;}
h2 { font-size: 130%;}
h3 { font-size: 110%;}

.right		{ text-align: right; }
.rightb		{ text-align: right; font-weight: bold; }
.left		{ text-align: left; }
.center		{ text-align: center; }
.floatleft	{ float: left; padding: 3px;}
.floatright	{ float: right; padding: 3px; }

div.leftcol, div.rightcol
{
	padding: 3px;
	width: 270px;
	margin: 2px;
}

div.leftcol { float: left; }
div.rightcol { float: right; }

div.footer
{
	clear: both;
	width: 750px;
	font-size: 10px;
	color: #FFF;
	text-align: center;
	background-color: #78B86E;
	border: 2px solid #5A8952;
	font-weight: bold;
	padding: 2px;	
}

/* Hide this from IE */
body > div.footer { width: 100%; }

div.imageholder
{
	width: 420px;
	margin-left: auto;
	margin-right: auto;
}

div.imagetitle
{
	text-align: center;
	float: left;
	width: 130px;
	height: 175px;
}

img.imagetitle
{
	border: 2px solid #AA9542;
}

ul.boards
{
	list-style-type: none;
	padding-left: 15px; 
	margin-top: 5px;
	font-size: 10px;
	margin-left: 0px;
}

h3 { margin-bottom: 2px;} 


/************************************************************************ 
	Page Container
	
	This is the overarching container that holds the left navigation 
	bar and the actual page body divs. I decided to do it this way
	because it makes it easier to customize the styling.
*************************************************************************/
div#pagecontainer
{
	margin: 0px;
	padding: 0px;
	width: 750px;
	text-align: left;
}

/* Hide this from IE */
body > div#pagecontainer { width: auto; }

/************************************************************************ 
	Top Navigation Styles
	
	This is an unordered list containing the links at the top of the
	page. Similar to how the Brighton website does it, only we are
	using well formed xhtml and css to make it happen.
*************************************************************************/
ul#topnav
{
	width: 100%;
	background-color: #78B86E;
	font-size: 10px;
	padding: 3px;
	vertical-align: center;
	list-style-type: none;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	border: 2px solid #5A8952;
	font-weight: bold;
}

li.topnavli
{
	display: inline;
	margin-right: 10px;
}

.topnava
{
	color: white;
	text-decoration: none;
}

.topnavad
{
	color: #DDD;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

p.question { font-weight: bold; }
p.answer { font-style: italic; }

/************************************************************************ 
	Side Navigation Styles
	
	This unordered list will float to the left side of the page.
	Most of the main links will be held here.
*************************************************************************/
ul#sidenav
{
	float: left;
	width: 155px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	list-style-type: none;
	padding-left: 0px;
	padding-top: 5px;
	
	font-size: 12px;
	background-color: #78B86E;
	border-bottom: 2px solid #5A8952;	
	border-right: 2px solid #5A8952;	
	border-left: 2px solid #5A8952;
}

/* Hide this from IE */
div#pagecontainer > ul#sidenav
{
	margin-left: 0px;
}

li.sidenavli
{
	padding: 3px;
	margin-bottom: 5px;
}

.sidenava
{
	color: white;
	text-decoration: none;
}

.sidenavad
{
	color: #DDD;
	text-decoration: none;
}

span.lititle
{
	font-weight: bold;
	font-size: 14px;
	color: white;
	display: block;
	padding-top: 6px;
	padding-bottom: 6px;
}

ul.sidenavsubul
{
	list-style-type: none;
	padding-left: 10px;
	margin-left: 0px;
}

/************************************************************************ 
	Page Body Styles
	
	These styles are related directly to the body of the page, such as
	the banner and specific text styles.
*************************************************************************/

div#pagebody
{
	margin-left: 165px;
	padding: 6px;
	padding-top: 10px;
}

img#banner
{
	height: 120px;
	width: 500px;
	margin-bottom: 10px;
	padding: 0px;
	border: 0px;
}

table#heart
{
	vertical-align: center;
}

/************************************************************************ 
	Emergency Contact Information
	
	This information is to float on the right side of the page.
*************************************************************************/
div#emergency
{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 5px;
	padding: 2px;
	width: 150px;
	font-size: 11px;
	background-color: #EEE;
	border: 1px solid #555;
}

h3.emergency
{
	margin-top: 0px;
	margin-bottom: 2px;
	color: #F00;
	text-decoration: underline;
	font-size: 14px;
}

ul.emergency
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

li.emergency 
{
	display: block;
	padding-top: 3px;
}

div.minutes 
{
	width: 450px;
}

div.minutes ul
{
	list-style-type: none;
	padding: 1px;
}

div.minutes ul li
{
	width: 75px;
}