@charset "utf-8";
body {
	/* 
	   This website uses a fluid design.  Fluid (aka liquid) websites are based on the browser font size. This 
	   makes scaling of the website to larger (or smaller) displays uniform.  All measurements on this size 
	   should be based on a browser font size of 10px.  Most browsers default to 16px.  
	   
	   This website uses a base font size of 62.5%. 62.5% equals 16px (default browser font size) divided by 
	   10px (desired default font size).
	   
	   All widths should be expressed in ems or percentages - not px.  The equivalent ems amount can be 
	   calculated by simply dividing the pixel count by ten.  Thus 10px equals 1em.  Some HTML tags require
	   amounts expressed in pixels, these are the exceptions.
	   
	   Always take in consideration the font size be used in the element being defined.  In these cases calculate
	   size (in ems) based on the parent divs font size for the element for example:
	   
	   child element (ems) / parent element (ems)
	*/
	font: 62.5% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #FFF;
	background-color: #666;
	background-image: url(../images/backgrounds/background.jpg);
}

.template #container {
	margin: 0 auto;
	border: 1px solid #000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-color: #FFF;
	background-image: url(../images/backgrounds/pagediv.jpg);
	width: 78em;
}

.template #container #header {
	background-image: url(../images/backgrounds/banner.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 15.9em;  /* 15.9em = 1 / 10px (font size of parent) * 159px (height of header) */
}

.template #container #header #facebook {
	margin: 3em 1em 0 0;
	float: right;
}

.template #container #header .button {
	border: none;
}

.template #container #header h2 {
	margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	padding: 4.8em 1em 0 0;  
	color: #F00;
	text-align: right;
}

.template #container #menubar {
	background-image: url(../images/backgrounds/menubar.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 3.167em;  /* 3.167em = 1 / 12px (font size of parent) * 38px (height of menubar) */
	padding-top: 0.4em;
	font-size: 1.2em;
}

.template #container #mainContent {
	margin: 0 auto;	
	padding: 1em;	
	background: #FFF;
	background-color: transparent;	
	width: 76em;  /* 76em = 78em (width of container) - 2em (padding on left and right sides) */
	height: 100%;	
	color: #FFF;	
}

.template #container #mainContent #leftcolumn {
	padding: 0.714em;	  /* 0.833em = 1 / 14px (font size) * 10px (padding) */
	width: 50%;
	float: left;          /* since this element is floated, a width must be given */
	font-size: 1.4em;     /* 1.4em = 1 / 10px (font size of parent) * 14px (desired font size) */
	line-height: 1.214em; /* 1.214em = 1 / 14px (font size) * 17px (desired line height) */	
	color: #FFF;	
}

.template #container #mainContent #leftcolumn p .sessionstypes {
	font-size: 1.167em;   /* 1.167em = 1 / 12px (font size of parent) * 14px (desired font size) */				
	line-height: 1.214em; /* 1.214em = 1 / 14px (font size of parent) * 17px (desired line height) */
	font-weight: bold;
}
			
.template #container #mainContent #leftcolumn p .option {
	font-style: italic;
	font-weight: bold;
}		

.template #container #mainContent #rightcolumn {
	padding: 0.714em;	  /* 0.833em = 1 / 14px (font size) * 10px (padding) */
	width: 50%;
	float: left;          /* since this element is floated, a width must be given */
	font-size: 1.4em;     /* 1.4em = 1 / 10px (font size of parent) * 14px (desired font size) */
	line-height: 1.214em; /* 1.214em = 1 / 14px (font size) * 17px (desired line height) */	
	color: #FFF;	
}

.template #container #footer {
	background-image: url(../images/backgrounds/footer.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 3.9em;        /* 3.9em = 1 / 10px (font size of parent) * 39px (height of footer) */
	padding-top: 0.4em;
	font-size: 1em;	
} 

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 0.1em;
    line-height: 0;
}

.centered {
    margin: 0 auto;
    width: 100%;
}

.floatleft {
	float: left;
}
   
h1 { font-size: 3em; }  /* displayed at 36px */
h2 { font-size: 2em; }  /* displayed at 24px */
h3 { font-size: 1.667em; }  /* displayed at 20px */
h4 { font-size: 1.5em; }  /* displayed at 18px */
h5 { font-size: 1.167em; }  /* displayed at 14px */
h5 { font-size: 1em; }  /* displayed at 12px */

a:link {
	color: #FFF;
}
			
a:visited {
	color: #FFF;
}
			
a:active {
	color: #FFF;
}

[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
</style>
<![endif]


[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.template #container #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]