/* ||| CSS file for Gamer 01-dk ||| */

/* It is HIGHLY recommended that the doctype stay on the page for the best rendering possible. Without the doctype, the browsers start pulling some crazy stunts. For example, #content, the div that encloses actual content, has the overflow set to auto. While this creates a layout where the content does not flow under #subMenu (as it is floating left), the page creates scrollbars when the page lacks a doctype. These scrollbars are visually distracting. If you want a visually distracting layout, then I guess it would be OK.

That is only one such example. Doctypes will make the page less distracting and make it easier to use. */


/* General Link Rules */

a:link{
 color: #3366cc;
 background-color: transparent;
 text-decoration: underline;}

a:visited{
 color: #3399ff;
 text-decoration: none;
 background-color: transparent;}

a:active{
 color: #ff3300;
 text-decoration: none;
 background-color: transparent;}

a:hover{
 color: #6666cc;
 text-decoration: none;
 background-color: transparent;}

/* Layout Rules */

body{
 color: #fff;
 background-color: #000;}

#container{
 color: #fff;
 background-color: #000;
 margin: 0% 0% 0% 10%;}

#pageHeader{
 width: 468px;
 height: 145px;
 background: transparent url(images/gamer_01dk_ani.gif) no-repeat;}

#headerText{
 font: 28pt monospace;
 margin-bottom: 25px;}

#bodyOfPage{
 height: 100%;
 color: #fff;
 background-color: transparent;}

#subMenu{
 height: 100%;
 width: 15em;
 float: left;
 margin: 0;}

.menuLinks{   /* regular menu links */
 display: block;
 border: solid #fff 1px;
 margin: 0;
 padding: 0;
 font-family:monospace;}

.separator{  /* anchor links for same page */
 display: block;
 border: none;
 margin: 0px 0px 0px 0px;
 padding: 10px;}

ul.menu li{ /* for IE 6 only */
 width: 100%;
 list-style-type: none;
 margin-left: -35px;}

ul.menu > li{ /* for REAL browsers (Firefox, Opera, etc) */
 width: auto;
 list-style-type: none;
 margin-left: 0px;} 

ul.menu li a{ /* again, for IE 6 only, it is fickle with the menu items */
 width: 100%;
 display: block;
 margin: auto 3px 5px 0px;
 padding: 0px 0px 0px 20px;
 background: transparent url(images/list_item_off.gif) no-repeat 5px 50%;}

ul.menu li > a{ /* again, for REAL browsers (Firefox, Opera, etc) */
 width: auto;
 display: block;
 margin: auto 3px 0px 0px;
 padding: 0px 0px 0px 20px;
 background: transparent url(images/list_item_off.gif) no-repeat 5px 50%;}

ul.menu li a:visited{
 color: #3399ff;
 background: transparent url(images/list_item_off.gif) no-repeat 5px 50%;}

ul.menu li a:hover{
 background: #333 url(images/list_item_on.gif) no-repeat 5px 50%;}

ul.menu li a:active{
 background: transparent url(images/list_item_on.gif) no-repeat 5px 50%;}

ul.menu li a.menu_selected {
  background: #333 url(images/list_item_on.gif) no-repeat 5px 50%;}

.menu_selected {
  background: #333 url(images/list_item_on.gif) no-repeat 5px 50%;}


ul.submenu > li{ /* for REAL browsers (Firefox, Opera, etc) */
 width: auto;
 list-style-type: none;
 margin-left: 20px;}

ul.submenu li a.submenu_selected {
  background: #333 url(images/list_item_on.gif) no-repeat 5px 50%;}

#content{
 padding-left: 10px;
 overflow: auto;
 font: medium monospace;}

#notice{
 clear: both;
 margin: 5px;
 padding-left: 5px;
 border: solid #fff 0px;
 height: 100px;
 font: small monospace;
 background: transparent url(images/notice_bg.png) no-repeat center left;
 }

#pageFooter{
 clear: both;
 padding-left: 5px;
 padding-bottom: 5px;
 height: 135px;
 background: transparent url(images/gamer_02dk.gif) no-repeat bottom left;
}



/* Other Formatting */

.noDisplay{
 display: none !important;}

.menuHead{     /* menu headers before links */
 margin-top: 5px;
 font: small-caps 16px monospace;
 text-align: center;
 border-bottom: dotted #fff 1px;
 display: block;}

.sectionHead{ /* headers for content */
 font: x-large monospace;
 display: block;
 background-image: url(images/header_bg.gif);
 background-repeat: repeat-x;
 background-position: bottom left;
 padding-bottom: 15px;
 width:600px;
 margin-left:250px}

.sectionTitle{
 font: larger monospace;
 padding: 10px; }

p{
 line-height: 170%;}

.sectionHead+p{  /* Mozilla, Opera, etc. only */
 margin-top: 5px;}

p+.sectionHead{  /* Mozilla, Opera, etc. only */
 margin-top: 30px;}

.gameName{
 color: #ff0000;
 font-style: italic;}

acronym{
 cursor: help;
 border-bottom: dotted #c0c0c0 1px;}