/* A simple Browser Reset */
            
            *{
              margin:0;
              padding:0;
            }
            
             /* General Layout
            ________________________________*/
            
            #page{
              position:relative;
              margin:0 auto;
            }
            
            /* Layout is inspired by the holy Grail, 
            except that the content is wrapped around
            a floating div that pull the sidebars.
            */
            
            #content {
              float:left;
              width:100%;
              margin-right:-100%;
			  padding-top:10px;
			  font-family:Verdana, Geneva, sans-serif;
			  padding-bottom:35px;
            }
            .column {
            	float:left;          
            }
            
            /* You can easily change the layout proportions
            by just changing the matching values. For example,
            to have a 100px left sidebar, I just have to change
            all the 220 to 100 (and the -220 to -100).
            */
            
            #content-inner {
              float:none;
              margin-left: 20%;   /* LEFT Sidebar width */
              margin-right: 35%;  /* RIGHT + LEFT Sidebar width */
            }                       
            .left {
              width: 10%;         /* LEFT Sidebar width */
            }                       
            .right{
              float:right;           
              width: 30%;         /* RIGHT Sidebar width */
            }
            .third{
              float:right;           
              width: 15%;
			  margin-left:-150px;/* LEFT Sidebar width */
            }
            #header{
              clear:both;
              text-align:center;
              font-size:2em;
			  padding:5px;
            }
			#footer {
				  clear:both;
              text-align:center;
              font-size:2em;
			  background-image:url(images/footer);
			  background-repeat:repeat-x;
			  height:151px;
			}
            
            /* Equal Height Columns 
            ________________________________*/
            
            /* The columns are created using empty DIV that have to be 
            inside the main wrapper (#page) and should be positionned 
            relative. Each DIV have the same width as its corresponding 
            columns (done by using class), and by postionning them 
            absolutelly (bottom) and giving them a height of 100%, the 
            DIVs fill the entire space that the columns should fill.
            As the actual content is not positionned absolutelly, the 
            footer still behave normally and is pushed down by it. Last 
            but not least, we have to set the z-index of the real 
            content to 2 to bring it back on top of the columns.
            */
            
            .bg{
              position:absolute;
              bottom:0;
              height:100%;
            }
            #bgleft{left:0;}
            #bgthird{right:0;}
            #bgright{right:15%;}
            #bgcenter{
              right:0;
              width:100%;
            }
			#left{
				 position:relative;
              z-index:2;
			  top:-65px;
			  padding-left:30px;}
			  
            #content, #right, #header, #footer, #third{
	position:relative;
	z-index:2;
	visibility: visible;
            }
            
            /* COLORS */
            
            #header2{background-color:#61b4b0;
			height:10px;}
            #header{background-color:#8fd3d1;
			height:50px;
			border-top:7px solid;
			border-top-color:#61b4b0;}
            #bgleft{background-color:#ffffff;}
            #bgright{background-color:#ffffff;}
            #bgcenter{background-color:#ffffff;}
            #bgthird{background-color:#ccebea;}
            
            /* menu padding */
            ul{ margin:20px; }

	
	#navlist
{
margin-left: 0;
padding-left: 0;
font-family:Verdana, Geneva, sans-serif;
white-space: nowrap;
margin-top:10px;
}

#navlist li
{
display: inline;
list-style-type: none;
font-size:12px;
font-weight:bold;
}

#navlist a { padding:5px;
}
#navlist a:link { 
color: white; 
background-color: #50afab;
text-decoration: none;
border: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-color: #FFF;
}
#navlist a:visited { 
color: white; 
background-color: #50afab;
text-decoration: none;
border: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-color: #FFF;
}
#navlist a:hover {
color: white; 
background-color: #0d7379;
text-decoration: none;

} 
#navlist a:current {
color: white; 
background-color: #0d7379;
text-decoration: none;

} 
body#home a#homenav,
body#news a#newsnav,
body#about a#aboutnav,
body#where a#wherenav,
body#blog a#blognav,
body#contact a#contactnav,
body#q a#qnav,
body#blog a#blognav
body#contact a#contactnav
{
	color: #fff;
	background: #0d7379;
}

h1{
	font-weight:lighter;
	color:#49a6a2;
	font-size:2em;
	padding-bottom:5px;
	letter-spacing: 1px;
	font-family:'trebuchet ms', 'century gothic', verdana, sans-serif;
}
h2{
	font-weight:lighter;
	color:#49a6a2;
	font-size:1.5em;
	padding-bottom:5px;
	letter-spacing: 1px;
	font-family:'trebuchet ms', 'century gothic', verdana, sans-serif;
}
h2.table{
	font-weight:lighter;
	color:#0d7379;
	font-size:1.5em;
	padding-bottom:5px;
	letter-spacing: 1px;
	padding:10px;
	font-family:'trebuchet ms', 'century gothic', verdana, sans-serif;
}
h3{
	color:#bc5f12;
	font-size:.9em;
}
h5{
	color:#bc5f12;
	font-size:.9em;
	margin-bottom:-10px;
}
h4{
	color:#666666;
	font-size:13px;
	border-bottom: 1px solid #666666;
	
}
h4.news{
	color:#666666;
	font-size:11px;
	border-bottom: 1px solid #666666;
	font-weight:normal;
	
}
p {
	font-size:12px;
	font-family:'trebuchet ms', 'century gothic', verdana, sans-serif;
}
p.table {
	font-size:12px;
	font-family:'trebuchet ms', 'century gothic', verdana, sans-serif;
	padding:10px;
}
p.tablewherer {
	font-size:13px;
	font-family:'trebuchet ms', 'century gothic', verdana, sans-serif;
	padding-left:10px;
}
a {
	color:#176f88;
	font-weight:bold;
	font-variant:normal;
	text-decoration:none;
}
	
img.icon {
	padding:10px;
	text-align:left;
}

img.iconlong {
	padding-top:10px;
	padding-right:10px;
	padding-bottom:150px;
	text-align:left;
}

td.where {
	border-bottom: 1px solid #666666;
	margin-left:10px;
	padding:10px;
}
/*Slide Show Image Frame*/
#imageContainer {
float:left;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
	border:3px solid #fff;
}

#imageContainer {
	position:relative;
	margin:auto;
	width:300px;
}