// See http://joshuaink.com/blog/196/a-simple-guide-to-3-column-layouts
*{
	font-size:100%;
}

body{
	font:75%/150% Arial, Helvetica, sans-serif;
	color:#000000;
	background-color: #F4F4F4;
/* align ie5 center screen */
	text-align:center;
}

#wrap{
  position: relative;
  width:800px; /* This WILL cause horz scroll on 800x600 screen due to vert scroll bar! */
  text-align:left;
  background: #FFFFFF;
  margin-left:auto; /* This will help center in Mozilla/Firefox */
  margin-right:auto; /* This will help center in Mozilla/Firefox */
  /* Using the !important method over all else because although there _is_ JavaScript to force IE to support PNG transparency
  it causes the links 'above' the background image to become unusable */
}

#headerimage{
  clear:both;  /* Get it below ALL cols */
  text-align: center;
  height: 100px;
  width: 300px; /* This WILL cause horz scroll on 800x600 screen due to vert scroll bar! */
  float:left;
  margin: 5px;
}

.Logo{
  border: 100px;
}

/* ~~~~~~~~~~~~ Generic menu settings ~~~~~~~~~~~~ */
.MenuItem, .MenuItem:visited {
  float: left;
  font-family: arial,sans-serif;
  font-size: 10pt;
  font-weight: bold;
  color: black;
  text-decoration: none;
  border:1px solid indigo;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  background: #BBBBBB;
  margin-left: 6px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.CurrentItem, .CurrentItem:visited {
  background: #BD9ACF;
}

/* ~~~~~~~~~~~~ Generic link settings ~~~~~~~~~~~~ */
.Menulike-Link, .Menulike-Link:visited {
  float: left;
  font-family: arial,sans-serif;
  font-size: 10pt;
  font-weight: bold;
  color: indigo;
}

.Menulike-Link:hover, .Menulike-Link:active {
  color: blue;
}

/* ~~~~~~~~~~~~ Something to make links look like the rest of the menus ~~~~~~~~~~~~ */
/* Note that 'basics' are set ABOVE with .MenuItem, then we 'unset' the stuff we don't want here */
.Menulike-Link, .Menulike-Link:visited {
  position: relative;
	float: none;
}

/* This doesn't work quite yet, but onLoad JS should set the current menu item class to this */
.MenuCurrent, .MenuCurrent:visited, MenuCurrent:hover, MenuCurrent:active{
  color: black;
}

ul{ /* Keep bullets close to left */
  margin-top: 0em;
  xmargin-left: -1.5em !important; /* 'important' hack, FireFox will ignore following margin-left cmd but IE won't */
  xmargin-left: 1.5em;             /* ie6 doesn't really follow 'important' rules so sees this */
  list-style-type: disc;
  list-style-position: outside;
}


div{
	xmargin:10px 0 10px 0;
	xbackground:#EFEFEF;
	xfilter:alpha(opacity=50);  /* IE */
	x-moz-opacity:0.5;          /* Mozilla */
	xopacity: 0.5;              /* Gecko */
}

#navigation-top {
  border-top:1px solid black;
  border-bottom:1px solid black;
  width:770px; /* Was 155 */
  float:left;
  padding: 5px;
  margin-left: 10px;
  background: #DDDDDD;
  margin-bottom: 10px;
}

#navigation-top a, #navigation-top a:visited{
  color: indigo;
  text-decoration: none;
}

#navigation-top a:hover {
}

#main-content-2col{
  position: relative;
  top: 10px;
  width: 600px;
  padding-left: 10px;
  float:left;
  font-size: 11pt;
  line-height: 120%;
}

#main-content-2col a, #main-content-2col a:visited{
  color: indigo;
}

#main-content-2col a:hover{
  color: blue;
}

#main-content-1col{
  position: relative;
  top: 10px;
  width: 580px;
  padding-left: 10px;
  float:left;
  font-size: 11pt;
  line-height: 120%;
  margin-left: 100px;
  margin-right: 100px;
}

#main-content-1col h1{
  font-size: 18pt;
  font-weight: bold;
  margin-bottom: 1em;
  line-height: 120%;
}

#main-content-1col h2{
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: 1em;
  margin-left: 1em;
}

#main-content-1col h3{
  font-size: 12pt;
  font-weight: bold;
  margin-bottom: 1em;  
}

#navigation-left {
  border:1px solid black;
  width:125px; /* Was 155 */
  float:left;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px;
  background: #DDDDDD;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  text-align: center;
}

#navigation-left a, #navigation-left a:visited{
  color: white;
  text-decoration: none;
}

#navigation-left a:hover {
    color: white;
}

#navigation-left p {
  margin: 5px;
}

#foot{
  clear:both;  /* Get if below ALL cols */
  text-align: center;
  margin-bottom: 0px;
  background: indigo;
  color: white; 
}

#foot a, #foot a:visited{
  color: #BBBBBB;
}

#foot a:hover{
  color: white;
}

#contact{
  clear:both;  /* Get if below ALL cols */
  margin-bottom: 0px;
  margin-left: 10px;
  color: black; 
}

#contact a, #foot a:visited{
  color: blue;
}

#contact a:hover{
  color: indigo;
}

#photoBanner{
  float: left;
  background: indigo;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-family: arial,sans-serif;\
  font-size: 12pt;
  text-align: center;
  width: 800px;
}

#photoBanner p {
  font-size: 10pt;
}