/*---- Layout ----*/
html{
	background-color: #ffffbf;
	color: #000000;
}

div
{
	/* this is for netscape 4's sake */
	padding: 0;
	margin: 0;
}

body {
	BORDER-TOP-WIDTH: 1px; 
	BORDER-LEFT-WIDTH: 1px;
	BORDER-BOTTOM-WIDTH: 1px; 
	BORDER-RIGHT-WIDTH: 1px;
	PADDING-RIGHT: 20px; 
	PADDING-LEFT: 20px; 
	PADDING-BOTTOM: 0px;
	PADDING-TOP: 20px; 	
	FONT-SIZE: 12pt; 
	BACKGROUND: #ffffbf; 
 	MARGIN: 0; 
	COLOR: #000; 
	FONT-FAMILY: arial, verdana, helvetica, sans-serif; 
}

div#oldbrowser
{
	display: none;	/* hide the standards compliant warning - this isn't a catch all, but works for old browsers */
}

h1 {   
  clear: both;
  font: 700 24pt americana, serif;
  color: #3cb371;
}
h2 {
  font: 600 22pt americana, serif;
  color: #008080;
}
h2 a {
  color: #40E0D0;
  background-color: #ffffbf;
}
h2 a:hover {
  color: #00FF7F;
  background-color: #ffffbf;
}
h3 {
  /*text-align: center;*/
  font: 500 20pt americana, serif;
  color: #004040;
}
h4 {
  font: 400 18pt americana, serif;
  color: #008b8b;
}
h5 {
  font: 300 16pt americana, serif;
  color: #008b8b;
}
h6 {
  font: 200 14pt americana, serif;
  color: #008b8b;
}
h1, h2, h3, h4, h5, h6, p, dl {
  margin: 0;
  padding: 10px 15px;
}

#pageFrame
{
	background-color: #ffffbf;
	color: #000;
	min-width: 500px;
	border: solid 3px #000;
}

#mast {
	color: #333;
	background-color: #ffffbf;
}

/* Sets the masthead properties*/
#masthead {
  position: relative;
  height: 150px;
  border-bottom: solid 1px #000;
  background-color: #ffffbf;
  color: #060606;
}
	/* Sets where the masthead images will go */
	#masthead img.left {
		position: absolute;
		z-index: 0;
		top: 0;
		bottom: 0;
		left: 0;
	}

	#masthead img.right {
		position: absolute;
		z-index: 0;
		top: 0px;
		bottom: 0;
		right: 0;
	}

	#masthead img.banner {
		display: block;
		position: relative;
		z-index: 0;
		top: 0;
		margin-right: auto;
		margin-left: auto;
	}

#page {
  float: left;
  width: 100%;
  clear: both;
  margin-top: 0px;
  padding-bottom: 4em;
  border: 1px solid #000;
}

/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/
ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(foo.gif);
  font: 400 1.3em arial, serif;
}
.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  text-decoration: none;
  color: #111;
  background-color: #ffffbf;
} 
.sideMenu li a:hover {
  color: #3F0;
  background: #5F5F5F;
}
/* Active menu item */
.sideMenu li.here {
  display: block;  
  padding: 5px;
  color: #3F0;
  background: #555;
}
/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}
.sideMenu li.here ul li a {
  padding-left: 35px;
  font: 400 0.55em arial, serif;
  color: #CCC;  
  background: #555 url(../images/bg/bullet.gif) no-repeat 10px 0px;
}
.sideMenu li.here ul li a:hover {
  color: #9FF3FF;
  background: #5F5F5F url(../images/bg/bullet.gif) no-repeat 10px 0px;
}

/* Done so the leftmost column aligns properly with the header.
   If the leftmost column has class gradient applied to it, 
   this class isn't required. */
.leftColumn {
	background: #ffffbf;
	color: #333;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}
.leftColumn h1,
.leftColumn h2, 
.leftColumn h3,
.leftColumn h4,
.leftColumn h5,
.leftColumn h6,
.leftColumn p,
.leftColumn dl {
  padding-left: 0;
}

.rightcolumn {
	background: #ffffbf;
	color: #333;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}

/**************************************************************
   .joinMenu: The bottom menu under Join
 **************************************************************/
#joinMenu { 
  float: left;
  width: 100%;
  clear: both;  
}
#joinMenu ul {
  margin: 0;
  padding: 0;
}
#joinMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
#joinMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;

  font: 400 1.3em americana, serif;
  text-decoration: none;
  color: #222;
}
#joinMenu li a:hover,
#joinMenu li a.here {
  color: #3F0;
  background-color: #ffffbf;
}
#joinMenu li a.last {
  margin-right: 0;
}

/**************************************************************
   .locatorMenu: The bottom menu under Join
 **************************************************************/
#locatorMenu { 
  float: left;
  width: 100%;
  clear: both;  
}
#locatorMenu ul {
  margin: 0;
  padding: 0;
}
#locatorMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
#locatorMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;

  font: 400 1.6em americana, serif;
  text-decoration: none;
  color: #222;
}
#locatorMenu li a:hover,
#locatorMenu li a.here {
  color: #3F0;
  background-color: #ffffbf;
}
#locatorMenu li a.last {
  margin-right: 0;
}

/**************************************************************
3 Column layout
***************************************************************/
/* This bit does all the work */
#container {
  position:relative;
  display:block;
  background:#ffffbf;
  border-left:300px solid #aaa;
  border-right:300px solid #ccc;
  overflow:visible;
}
#left {
  float:left;
  position:relative;
  width:298px;
  margin-left:-297px;
  display:inline;
}
#right {
  float:right;
  position:relative;
  width:298px;
  margin-right:-297px;
  display:inline;
}
.clear {
  clear:both;
  height:1px;
  overflow:hidden;
}
a:visited {
  color:#000;
}
/* Just to extend each column */

#container a:visited, a {
  color:#000;
  text-decoration:none;
}
#container a span {
  display:none;
}
#container a:active, #container a:focus {
  color:#fff;
  text-decoration:none;
  background:transparent;
  cursor:default;
}
#container a:active span, #container a:focus span {
  display:inline;
  left:0;
}

/**************************************************************
   TroopTable: Tables in troop locator
 **************************************************************/
#mytable { margin-left: auto; margin-right: auto; padding: 15px; }
#mytable td { border: 1px solid #9FF3FF; vertical-align: middle; padding: 5px; }
#mytable tr.special td { border-bottom: 1px solid #ff0000;  }

/**************************************************************
   News Letter: Tables on Newsletter
 **************************************************************/
#newstable { margin-right: auto; padding: 15px; }
#newstable td { border: 1px solid #ffffbf; vertical-align: middle; padding: 5px; }
#newstable tr.special td { border-bottom: 1px solid #ffffbf;  }
.Newsletter a:hover { background: #5f5f5f; }

/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/
#footer {
  float: left;
  width: 100%;
  clear: both;
  margin-top: -3.8em;
  color: #eee;
  background: #000 url(../images/bg/footer.jpg) repeat-x top left;
}
/* Sets the width of the footer content */
#footer #width {
  position: relative;
  z-index: 3;
  font-size: 0.85em;
  padding-top: 27px;
}

/**************************************************************
   Width classes used by the site columns
 **************************************************************/
.width100 {
  width: 100%;
}
.width75 {
  width: 74%;
}
.width50 {
  width: 49.7%;
}
.width33 {
  width: 32.7%;
}
.width25 {
  width: 24.7%;
}

/**************************************************************
   Alignment classes
 **************************************************************/
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}

/**************************************************************
   Generic display classes
 **************************************************************/
.clear {
  clear: both;
}
.block {
  display: block;
}
.small {
  font-size: 0.8em;
}
.green {
  color: #A1FF45;
  background-color: #ffffbf;
}
.red {
  color: #EA1B00;
  background-color: #ffffbf;
}
.grey {
  color: #666;
  background-color: #ffffbf;
}
.grey a {
  color: #999;
  background-color: #ffffbf;
}
.grey a:hover {
  color: #EEE;
  background-color: #ffffbf;
}
.gradient {
  margin-bottom: 2em;
  background: url(../images/bg/gradient.jpg) repeat-x bottom left; 
}