body {
  margin: 10;
  padding: 0;
  background-color: #330000;
  font-family: sans-serif;
  font-size: 90%;
  color: #ffffff;
  font-weight: 400;
  line-height: 125%;
}
.outer_frame {
        max-width: 1000px;
        height: 100%;
        padding: 0px;
        margin: 0px;
}

/*************************************************************
   The Basic Text Formats
 **************************************************************/
p {
	margin-left: 20px;
	margin-right: 10px;
}
h1 {   
  font-family: serif;
  font-size: 2em;
  color: #ffffff;
	padding-top: 20px;
        padding-bottom: 24px;
	margin-left: 20px;
	margin-right: 10px;
}
h2 {
  font-family: serif;
  font-size: 1.8em;
  color: #ffdead;
	padding-top: 10px;
	margin-left: 20px;
	margin-right: 10px
}
h3 {
  font-family: sans-serif;
  font-size: 1.2em;
  color: #ffff00;
	margin-left: 20px;
	margin-right: 10px;
}
h4 {
  font-family: sans-serif;
  font-size: 1em;
  color: #ffe4b5;
	margin-left: 20px;
	margin-right: 10px;
}
a {
  color: #0000ff;
}
a:hover {
  color: #000000;
}
ol, ul {
  margin: 10px 30px;
  padding: 0 30px;
  color: #ffffc0;
}
ol span {
  color: #eeeeee;
}

li {
  margin-bottom: 6px;
}
del {
  color: #AAA;
}
abbr {
  cursor: help;
  border-bottom: 1px dotted #ffffff;
}
dt {
  font-weight: bold;
  color: #FFB323;
}
dd {
  margin-left: 0;
  padding-left: 45px; 
}

/**************************************************************
   Form Elements
 **************************************************************/
label {
  display: block;
}

input,
textarea,
select {
  padding: 2px;
  font: 400 1em sans-serif;
  color: #0000ff;
  background: #bdb76b;
  border: 1px solid #330000;
}

input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
  color: #000000;
  background: #E4F7FA;
  border: 1px solid #00DFFF;
}

input.button {
  padding: 2px 5px;

  font: 400 1.1em serif;

  color: #555;
  background: #9FF3FF;
  border-width: 1px;
  border-style: solid;
  border-color: #FFF #00DFFF #00DFFF #FFF;
}

/**************************************************************
   My Blockquote and included icons
 **************************************************************/

blockquote {
  margin: 10px 15px;
  padding: 5px 0px 5px 28px;
  background-color: #005229;
  color: #ffff00;
  background-image: url(http://webmatters.net/images/14.png);
  background-repeat: no-repeat;
  background-position: 5px 50%;  
}

blockquote.go {
  background-image: url(http://webmatters.net/images/16.png);
  background-color: #33855C;
}

blockquote.cem {
  background-image: url(http://webmatters.net/images/104.png);
  background-color: #33855C;
}

blockquote.map {
  background-image: url(http://webmatters.net/images/105.png);
  background-color: #33855C;
}

/**************************************************************
   #mainMenu: My top level site menu
 **************************************************************/

#mainMenu { 
  float: left;
  width: 100%;
  clear: both;
  /*padding-bottom: 120px;*/
}

#mainMenu ul {
  margin: 0;
  padding: 0;
}

#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;

  font: 400 1.6em serif;
  text-decoration: none;
  text-transform: lowercase;
  color: #ffdead;
  border-top: 5px solid #330000;
}

#mainMenu li a:hover,
#mainMenu li a.here {
  color: #7f8fa6;
  border-top: 5px solid #006633;
}

#mainMenu li a.last {
  margin-right: 0;
}

/*************************************************************
   .sideMenu: My side bar menu
 **************************************************************/
.sideMenu {
  margin-top: 20px;
  margin-left: 0px;
  background-color: #4d5d53;
  width: 74%;
}

.sideMenu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}
.sideMenu li {
  display: inline;
  font: 700 1.2em serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  text-decoration: none;
  color: #FFF;
} 

.sideMenu li a:hover {
  color: #7f8fa6;
  background: #36413a;
}

/* Active menu item */
.sideMenu li.here {
  display: block;  
  padding: 5px;
  color: #65EBFF;
  background: #717d75;
}

/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 35px;
  font: 400 .7em sans-serif; 
  color: #ffffff;  
  background: url(http://webmatters.net/images/4.png) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
  color: #9FF3FF;
  background: #828e87 url(http://webmatters.net/images/4.png) no-repeat 10px 0px;
}

/*************************************************************
   .sideBeer: My Beer Entry side bar menu
 **************************************************************/
.sideBeer {
  margin-top: 24px;
  margin-left: 0px;
  background-color: #dec45c;
  width: 180px;
}

.sideBeer ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}
.sideBeer li {
  display: inline;
  font: 700 1.2em serif;
}

.sideBeer li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  
  text-decoration: none;
  color: #000000;
} 

.sideBeer li a:hover {
  color: #7f8fa6;
  background: #36413a;
}

/* Active menu item */
.sideBeer li.here {
  display: block;  
  padding: 5px;
  color: #65EBFF;
  background: #717d75;
}

/* Submenu of active menu item */
.sideBeer li.here ul {
  margin: 0;
  padding: 0;
}

.sideBeer li.here ul li a {
  padding-left: 35px;
  font: 400 .7em sans-serif; 
  color: #ffffff;  
  background: url(http://webmatters.net/images/4.png) no-repeat 10px 0px;
}

.sideBeer li.here ul li a:hover {
  color: #9FF3FF;
  background: #828e87 url(http://webmatters.net/images/4.png) no-repeat 10px 0px;
}

/**************************************************************  
  #page: Holds the main page content.
 **************************************************************/

#page {
  float: left;
  width: 100%;
  clear: both;
  background-color: #330000;  
  padding-bottom: 4em;
}

/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/

/*#footer {
  float: left;
  width: 100%;
  clear: both;
  
  margin-top: -3.8em;
  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;
}

/*************************************************************
   The introduction Class
 **************************************************************/
.introduction {
        background-color: #7f8fa6;
        color: #000000;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px;
	border: 5px;
	border-style: ridge;
	border-color: #ffffff;
}

/*************************************************************
   Photo Layout
 **************************************************************/
.logo_one {
max-width: 30%; width: auto; height: auto; border: 0px; margin-left: 24px;
}
.logo_two {
max-width: 70%; width: auto; height: auto; border: 0px; margin-right: 10px; float: right;
}
.w720left {
max-width: 100%; width: auto; height: auto; border: 0px; margin-bottom: 0px;
}  
.w480left {
max-width: 100%; width: auto; height: auto; border: 0px; margin-right: 10px; margin-top: 12px; 
}  
.w360left {
max-width: 100%; width: auto; height: auto; border: 0px; margin-right: 10px; margin-top: 12px; 
}  
.w360right {
float: right; max-width: 100%; width: auto; height: auto; border: 0px; margin-left: 20px; margin-right: 10px;  margin-top: 12px; 
}
.w360grave {
float: right; max-width: 100%; width: auto; height: auto; border: 0px; margin-left: 20px; margin-right: 10px;  margin-top: 5px; padding-bottom: 10px;
}

/*************************************************************
   Rules and Spacers
 **************************************************************/
.rule {
	color: #666633;
	background-color: #666633;
	height: 2px;
	margin-top: 16px;
	margin-bottom: 16px;
}
.spacer {
  background-color: #330000;
	height: 25px;
	width: 100%;
	clear: both;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*************************************************************
   My Link Boxes
 **************************************************************/
.linktext {
  font-weight: 700;
  height: 40px;
}
.linktext a {
  margin-left: 60px;
  padding: 2px 5px 8px 60px;
  color: #0000ff;  
  background: #33855C url(http://webmatters.net/images/8.png) no-repeat 3px 0px;
}
.linktext a:hover {
  color: #000000;
  background: #197547 url(http://webmatters.net/images/8.png) no-repeat 8px 0px;
}

.linkgb {
  font-weight: 700;
  height: 40px;
}
.linkgb a {
  margin-left: 60px;
  padding: 2px 5px 8px 60px;
  color: #0000ff;  
  background: #757547 url(http://webmatters.net/images/8.png) no-repeat 3px 0px;
}
.linkgb a:hover {
  color: #000000;
  background: #85855c url(http://webmatters.net/images/8.png) no-repeat 8px 0px;
}

.linkde {
  font-weight: 700;
  height: 40px;
}
.linkde a {
  margin-left: 60px;
  padding: 2px 5px 8px 60px;
  color: #0000ff;  
  background: #5f6d64 url(http://webmatters.net/images/8.png) no-repeat 3px 0px;
}
.linkde a:hover {
  color: #000000;
  background: #717d75 url(http://webmatters.net/images/8.png) no-repeat 8px 0px;
}

.linkfr {
  font-weight: 700;
  height: 40px;
}
.linkfr a {
  margin-left: 60px;
  padding: 2px 5px 8px 60px;
  color: #0000ff;  
  background: #8c9aaf url(http://webmatters.net/images/8.png) no-repeat 3px 0px;
}
.linkfr a:hover {
  color: #000000;
  background: #99a5b8 url(http://webmatters.net/images/8.png) no-repeat 8px 0px;
}

/*************************************************************
   My Paragraphs
 **************************************************************/
.quote {
  color: #ffdead;
	position: relative;
  margin-right: 50px;
  left: 20px;
}

.yellow {
  color: #ffff00;
}

.photocaption {
	color: #ffff00;
  font-family: sans-serif;
  font-size: 9pt;
	margin-top: 2px;
	margin-left: 25px;
	margin-bottom:10px;
}
figcaption {
	color: #ffff00;
  font-family: sans-serif;
  font-size: 9pt;
	margin-top: 2px;
	margin-left: 25px;
	margin-bottom:10px;
}

.yellowlist {
margin-left: 20px; margin-bottom: 12px; color: #ffff66; font-weight: 700;
}

/*************************************************************
   My Tables
 **************************************************************/
.openH {
    border: 1px solid #ffffff;
    border-collapse: collapse;
    width: 80%;
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #666633;
}
/* table#openH tr:nth-child(even) {
    background-color: #eee;
}
table#openH tr:nth-child(odd) {
   background-color:#fff;
}*/
.openH th {
    background-color: #4d5d53;
    color: #ffdead;
    text-align: left;
    padding: 5px;
}
.openH td {
    padding: 5px;
    color: #ffffff;
    vertical-align: top;
}
/*************************************************************
   My Dropframes
 **************************************************************/
.dropframe{
	width: 280px;
	background: #666633;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	padding: 10px;
	border-width: 3px;
	border-style: ridge;
	border-color: #bdb76b;
}
/*************************************************************
   My War Diary Pages
 **************************************************************/
.wardiary {
        margin-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 700px;
        background-color: #ffffd6;
}

.wardiary p {
color: #000000;
}

.wardiary td {
color: #000000;
}

.wardiary th {
color: #000000;
}

.wardiary h3 {color: #000000; font-weight: 700;
}

/*************************************************************
   My Database Results
 **************************************************************/
.resultblack {font-size: 0.9em; font-weight: 400; color: #000000}
.resultyellow {font-size: 0.9em; font-weight: 700; color: #ffff00}
.resultwhite {font-size: 0.8em; font-weight: 400; color: #ffffff}