/******************************************************************************
  Village of Downers Grove:   Community Events
  Created: 11/09/2008
  Updated: 04/23/2009
  Author: David Hankes, Webmaster

  ALL fonts set by algorithum make them divisible by 10
  Example: .7em = 7pt, 1em = 10px, 1.4em = 14pt
******************************************************************************/
html {font-size: 62.5%; }

body {
	height: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	padding:0;
 	text-align: center; /* IE6 centering hack */
}
br { clear: both; }
div#page {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25px;
	width: 1004px;
}
div#header, div#event_block, div#footer, div#eventBanner, div#menu, div#content { 
	clear: both;
 	text-align: left; /* IE6 centering hack */
  width: 982px;
}
div#header {
	background-image: none;
	height: 90px;
}
div#eventBanner {
  border: 1px solid rgb(128,128,128);
  height: 250px;
}
div#content {
  border-left: 1px solid rgb(128,128,128);
  border-right: 1px solid rgb(128,128,128);
  border-bottom: 1px solid rgb(128,128,128);
  padding-bottom: 20px;
  height: 1%;
}
div#updateribbon {
  height: 255px;
  position: absolute;
  margin-left: 695px;
  width: 288px;
}

/**********************************
  Max-width: 1004px
  Inner-width: 982px
  3-column: 245/490/245
  2-column: 225/725
**********************************/

div#left_column {
  margin: 0px 0px 0px 0px;
  padding: 0px 10px 0px 10px;
  width: 225px;
}
div#main_column {
  float: left;
  margin: 0px 0px 0px 0px;
  padding: 0px 5px 0px 5px;
  width: 710px;
}
div#right_column {
  float: right;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  width: 245px;
}
div#footer {
	height: 1%;
	padding: 10px;
  _width: 980px;
}

/* Frontpage Design */
div#events_logo {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	height:60px;
	margin: 8px 0px 0px 10px;
	padding: 0px;
	width: 500px;
	position: absolute;
}
div#events_cal {
	float: right;
	height: 65px;
	margin: 8px 50px 0px 10px;
	padding: 0px;
  text-align: left;
	width: 265px;
	position: relative;
}
div#event_block {
	clear: both;
  padding-left: 20%;
	text-align: center;
}
div#event_block img { border: 1px solid rgb(0, 0, 0 ); }
div#event_block dl.piggyBack {
	float: left;
	margin: 10px 0px 10px 0px ;
	width: 190px;
/* IE6 Correction */
	_width: 195px;
}
div#event_block dl.piggyBack dt {
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-weight: bold;
	line-height: 1.20em;
  padding: 0px 0px 10px 0px;
	text-align: center;
}
div#event_block dl.piggyBack dd {
	clear: both;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 	line-height: 1.5em;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
div#event_block dl.piggyBack dd.title {
	font-size: 1.25em;
	font-weight: bold;
}
div#event_block dl.piggyBack dd.description {
	font-size: 1.2em;
	padding: 0px 10px 0px 10px;
}
div#event_block dl.piggyBack dd.hotelpackage {
	color: rgb(178, 34, 34);
	font-size: 1.1em;
  font-weight: bold;
}
/* End Frontpage Design */

ul#eventNavigation {
 	list-style-type: none;
  margin: 40px 0px 0px 20px;
  position: absolute;
 	width: 250px;
  z-index: 2;
}
ul#eventNavigation li {
  display: block;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	height: 32px;
  line-height: 2.15em;
  margin-bottom: 1px;
  padding-left: -10px;
	text-align: left;
}
ul#eventNavigation li a {
	display: block;
  height: 32px;
  padding-left: 10px;
	text-decoration: underline;
/* NORMAL ROLLEROVER EFFECT */
	opacity: .75 !important;
	filter: alpha(opacity=75); 
	-moz-opacity: .75;
}
/* MOUSEOVER ROLLEROVER EFFECT */
ul#eventNavigation li a:hover {
	opacity: 1 !important;
	filter: alpha(opacity=100); 
	-moz-opacity: 1;
}

/**********************************
	HEADERS  <h1, h2, h3, h4>	
**********************************/
h1#eventTitle {
  height: 230px;
  margin: 0px 0px 0px 10px;
  padding: 10px 0px 5px 10px;
  width: 225px;
  position: absolute;
 	opacity: .75 !important;
	filter: alpha(opacity=75); 
	-moz-opacity: .75;
  z-index: 1;
}
h1.title a { 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8em;
  text-decoration: none;
 	opacity: 1 !important;
	filter: alpha(opacity=100); 
	-moz-opacity: 1;
}
h2.annual { 
  color: rgb(255,255,255);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.5em;
  margin-top: 10px;
}
div#content h1 { 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.5em;
  margin: 20px 0px 0px 10px;
}
div#content h2 { 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.25em;
  margin: 20px 0px 0px 10px;
}
div#content h3 { 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  line-height: 1em;
  margin: 20px 0px 0px 10px;
}
div#content p { 
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.4em;
  margin: 10px 5px 20px 10px;
}
div#content ul { margin: 20px 0px 0px 10px; }
div#content ul li {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.4em;
  list-style-type: square;
  margin-left: 30px;
 }

/**********************************
	Paragraph <P> Classes
**********************************/
p.annualtxt {
  color: rgb(255,255,255);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4em;
}

/**********************************
	Lists	
**********************************/

ul#topNav {
	float: right;
	margin: 40px 0px 0px 0px;
	width: 375px;
}
ul#topNav li {
	color: rgb(255,255,255);
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	list-style-type: none;
	margin: 0 .5em 0 -.5em;
	padding: 0 .5em 0 .5em;
}
ul#topNav li a {
	color: rgb(255,255,255);
	text-decoration: underline;
}
div.notice {
	height: 110px;
	float: left;
	margin: 15px;
	width: 450px;
}
div.breadcrumb {
	background-color: rgb(255,255,255);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.4em;
	height: 20px;
	margin: 10px 2px 2px 10px;	
}
span.breadcrumb-current { font-weight: bold; }
span.breadcrumb-separator { }
div.corporate {
	border: 1px rgb(0, 0, 0) solid;
	height: 1%;
	margin: 0px;
}
div.content, .banner { 
	border: 1px rgb(255, 255, 255) solid;
	height: 1%;
	margin: 0px;
}
img.sponsors { padding: 10px; }
div.sponsor_images { text-align: center; }

/* Calendar Definitions */

dl.eventCalendar { 
  margin: 10px 30px 10px 50px;
  width: 400px;
  height: 175px;
  float: left;
}
dt.eventDate {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.8em;
  margin: 0px 0px 15px 0px;
  padding: 0px 0px 0px 0px;
}
 .eventTitle {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.6em;
 }
 .eventTime, .eventLocation, .eventDescription { 
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.4em;
}
/**********************************
	TABLES	
**********************************/
table { border-collapse: collapse; margin: 10px; }
tr { background: rgb(255, 255, 255); }
tr.altrow { background: rgb(249, 249, 249); }
td {
  border-color: rgb(239, 239, 239);
  border-style: solid;
  border-width: 1px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  padding: 5px;
  font-size: 1.1em;
  text-align: left;
}
thead>tr>td {
  background: rgb(151, 105, 156);
  border-color: rgb(223, 208, 255) RGB(84,7,91) RGB(84,7,91) RGB(84,7,91);
  color: RGB(84,7,91);
  font-weight: bold;
  padding: 5px;
}
tfoot>tr>td {
  background:  rgb(245, 245, 245);
  border-color: rgb(215, 215, 215);
  font-weight: bold;
  color: rgb(68, 68, 68);
  padding: 5px;
}
/**********************************
	FORMS	
**********************************/
form {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.25em;
  line-height: 2em;
  margin: 10px 5px 20px 10px;
  }
legend {
  font-weight: bold;
  padding: 15px 0px 10px 0px;
  }
label {
  margin-left: 20px;
  font-weight: bold;
  display: inline-block;
  width: 18%;
  }
input.error { 	
  background-color: rgb(241,213,221);
	border: 1px solid rgb(255, 0, 0);
 }
label.error { 	
	color:  rgb(255, 0, 0);
 }