/* ****************************************** */
/* Items marked with # seem to have no effect */
/* Items marked with * seem to have an effect */
/* Class selector:  .fooo                     */
/* ID selector:     #foo                      */
/* Multiple definitions - the last one wins   */
/* I use this a lot for understanding changes */
/* ****************************************** */

li {
	list-style-position: inside;
	/* margin-left: 1em; */
}

a.button  {
	font-weight: bold;
	font-size: 0.75em;
	line-height: 90%; /* Affects the interline spacing */
	border-width: 2px;
	border-top-color: #DFDFDF;
	border-right-color: #666;
	border-bottom-color: #333;
	border-left-color: #858585;
	border: solid #040;
	background-color: #B1B1B1;
	background-color: #CCBB88;
	margin-bottom: 2px;
	text-align: center;
	/* # width: 36em; */
}
/* The color attribute below determines the text color */
a.button:link    { color: #040; }
a.button:hover   { background-color: #B1B1FF; }

a.button:link    { color: #030; }
a.button:visited { color: #A00; }
a.button:hover   { background-color: #EEEEEE; }
a.button:active  { background-color: #F; }



/* TOP BUTTONS */
a.hbutton  {
	border: solid #FFF;
	font-weight: bold;
	font-size: 1.25em;
	line-height: 150%;
	border-width: 2px;
	border-top-color:    #040;
	border-right-color:  #040;
	border-bottom-color: #040;
	border-left-color:   #040;
	background-color:    #C1C1A1;
	margin-bottom: 4px;
	margin-right: 0px;
	text-align: center;
}
a.hbutton:link    { color: #040; }
a.hbutton:visited { color: #A00; }
a.hbutton:hover   { background-color: #F1F1D1; }
a.hbutton:active  { background-color: #F; }


/* TOP NAV BARS */
ul.topnav {
	list-style-type: none;
	padding-left: 0px;
	padding-top: 2px;
	padding-bottom: 1px;
	margin-left: 0px;
	float: left;
}
ul.topnav a {
	display: block;
	width: 14em;
}
ul.topnav li {
	display: inline;
	float: left;
}
* html ul.topnav a { height: 1px; }


/* Big buttons Below */
ul.nav	  {
	list-style-type: none;
	margin-left: 0;
	padding: 2px 0px 1px 0px;
}
ul.nav a {
	display: block;
	width: 36em;
}

/* LEFT SIDE NAV BARS */
ul.leftnav {
	list-style-type: none; /* This seems to belong here! */
	padding-left: 3px;
	padding-top: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
	/* # padding-right: 5px; */
	margin-left: 0;
	/* * width: 130px; - controlled by .leftnav a */
	/* # width: 36em; */
	/* * height: 22px; - controlled by .leftnav a */
}
ul.leftnav a {
	display: block;
	width: 16em;
}
ul.leftnav a {
	display: block;
	width: 156px;
	height: 16px;
	padding: 2px 2px 4px 8px; /* Moves the text over a bit */
	font-size: 0.75em;
	font-weight: bold;
	text-align: left;
	}

ul.leftnav li { display: inline; }
	.leftnav li { display: inline; }

* html ul.leftnav a { height: 1px; }



body {
	/* background-color: #D8D8C1; */
	font-family: "Times New Roman",Times,serif;
	line-height: normal;
}

.next { clear: both; }

/* ========================== */

.plist {
	margin-right: 5%;
	margin-left: 1%;
	padding: -20px;
	text-indent: 0em;
	list-style-position: outside;
	list-style-type: circle;
}

img.boxshot {
	float: left;
	margin-right: 20px;
	margin-bottom: 6px;
	border: 6px solid;
}

img.glogoleft {
	right-margin: 20px;
}
img.glogocenter {
	padding: 1px 1px 1px 1px ;
	border: 1px 1px 1px 1px;
	margin: 1px 50px 20px 50px;
}
img.glogoright {
	margin: 0 0 5px 20px;
}

.facts {
	clear: both;
}



.banner {
	background-color: #FFFFBB;  /* Turn on when ready */
	background-color: #CCBB88;
}

#sidebar {
	float: left;
	width: 170px;
	/* background-color: #77BB77; */
	background: url(images/sidebar.gif) repeat-y left top;
}
#wrapper {
	float: left;
	width: 180px;
	/* background-color: #77BB77; */
	background: #FFFFFF url(images/sidebar.gif) repeat-y left top;
}
#main {
	margin-left: 180px;
	width: 800px;
}

/* =========================== G4GM ======================================
 * Games4Grandmothers stuff
 * Start with fixed width of 1000 pixels
 * Left Column is 140 pixels
 * (10 pixel gutter)
 * Center space is 560 pixels
 * (10 pixel gutter)
 * Right Column is 280 pixels
 *
 * This leaves 24 pixels for the window borders, etc
 */
#mwrapper {
	float: left;
	width: 1010px;
	/* background-color: #CCDDCC; */
	/* background: #ABCDEF url(images/sidebar.gif) repeat-y left top; */
	background: #CCBB88;
	background: #FFFFBB;  /* Turn on when ready */
}

#rightadj {
	text-align:	right;
	color:		#FF0000;
	font-size:	3.90em;
	position:	absolute;
}
/*
 * Since this floats right, as long as there is enough space left over
 * from what is left of it, it will place properly
 * <div id="rightside">
 * Why the negative margin must be 12 or more, I don't know yet.
 * -11px pushes the right column away so it is underneath.
 */
#rightside {
	float: right;
	width: 262px;
	/* background-color: #294E56; */
	margin-left: 2px;
	margin-right: 4px;
}
#rightside a {
	color: #00F;
	font-weight: italic;
}
#rightside H2 {
	font-size: 1.50em;
	font-weight: bold;
	margin: 2px 0px 2px 0px;
	padding: 2px 0px 2px 0px;
	border: 2px 0px 2px 0px;
}
#rightside * {
	color: #000;
	font-size: 1.00em;
	font-weight: bold;
}


/* 
 * ===================== LEFT SIDE NAV BARS ==========================
 */

/*
 * class "leftside"
 * This gets used in the ul class= even if defined
 * as #leftside
 *
 */

ul.leftside {
	background-color: #AABBAA;
	color: #F00;
	width: 140px;
	float: left;
	/* list-style-type: none; /* This seems to belong here! */
	/* Top, Right, Bottom, Left */
	padding: 1px 6px 1px 1px;
}
ul.leftside a {
	border-top-color:    #040;
	border-right-color:  #040;
	border-bottom-color: #040;
	border-left-color:   #040;
	display: block; /* This makes each button a new line */
	height: 16px;
	width: 134px;
	padding: 5px 2px 2px 4px; /* Moves the text over a bit */
	font-size: 0.60em;
	font-weight: bold;
	text-align: left;
}

ul.leftside li { display: inline; }
  .leftside li { display: inline; }

* html ul.leftside a { height: 1px; }


/*
 * ======================== SIDE (Vertical) BUTTONS G4GM ================
 */
a.vbutton  {
	border: solid #FFF;
	font-weight: bold;
	font-size: 1.00em;
	line-height: 100%;
	border-width: 2px;
	border-top-color:    #040;
	border-right-color:  #040;
	border-bottom-color: #040;
	border-left-color:   #040;
	background-color:    #C1C1A1;
	background-color:    #CCBB88;
	margin-bottom: 2px;
	margin-right: 0px;
	text-align: center;
}
a.vbutton:link    { color: #030; } /* This controls text color */
a.vbutton:visited { color: #A00; }
a.vbutton:hover   { background-color: #F1F1D1; }
a.vbutton:active  { background-color: #F; }



/*
 * ======================== TOP (Horizontal) BUTTONS G4GM ================
 */
a.hmbutton  {
	border: solid #FFF;
	font-weight: bold;
	font-size: 1.00em;
	line-height: 100%;
	border-width: 2px;
	border-top-color:    #040;
	border-right-color:  #040;
	border-bottom-color: #040;
	border-left-color:   #040;
	background-color:    #C1C1A1;
	background-color:    #CCBB88;
	margin-bottom: 2px;
	margin-right: 0px;
	text-align: center;
}
a.hmbutton:link    { color: #030; } /* This controls text color */
a.hmbutton:visited { color: #A00; }
a.hmbutton:hover   { background-color: #F1F1D1; }
a.hmbutton:active  { background-color: #F; }


/*
 * ====================== TOP NAV BARS ================
 */
ul.mtopnav {
	list-style-type: none;
	padding-left: 0px;
	padding-top: 2px;
	padding-bottom: 1px;
	margin-left: 0px;
	float: left;
}
ul.mtopnav a {
	display: block;
	width: 196px; /* plus margin makes 250px */
}
ul.mtopnav li {
	display: inline;
	float: left;
}
* html ul.mtopnav a { height: 1px; }


/* Big buttons Below */
ul.mnav	  {
	list-style-type: none;
	margin-left: 0;
	padding: 2px 0px 1px 0px;
}
ul.mnav a {
	display: block;
	width: 28em;
}


/*
 * ======================= PAGE BODY =====================
 * Balance of page after title and left buttons
 * For most pages
 */
#pagebody {
	border-left: 1px; /*  solid #300; */
	margin-left:  154px;
	padding: 0px 12px 0px 12px;
	border-right: 8px;
}

/*
 * ========== Special ID for Adsense Ads =============
 */
#adsense {
	width: 728;		      /* Affects the <HR> too */
	padding: 00px 4px 0px 196px;  /* This moves the whole ad over */
	margin:  00px 4px 0px 0px;    /* This works */
	border:  00px 4px 0px 0px;    /* This seems not work */
}

/*
 * ========================== MTHUMB =======================
 * Stuff for Latest section
 * The margin settings in #maincol affect the <H1> title
 * positioning. This sets the little border verticals too
 */
#maincol {
	border-left:  1px solid red;
	padding-left: 2px;
}
#maincol TABLE{
	border-left:  1px solid red;
	border-right: 1px solid red;
	border-left:  1px solid #030;
	border-right: 1px solid #030;
	padding-left: 2px;
}
#maincol TR{
	margin-left:  150px;
	margin-right: 700px;
	/* background-color: #888844; */
	width:  560px;
}
#maincol H1{
	font-size: large;
	text-align: center;
}


.mthumb {
	float: left;
	margin: 0px 4px 4px 4px;
}

.mthumb img {
        border: solid 2px #030;
	padding: 2px;
	height: 128px; 
}
.mthumb p {
	font: bold 0.75em/normal Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	text-align: center;
	padding: 2px 0 4px 0;
	margin: 0px 2px 4px 2px;
	height: 4em;
}
.mthumb TD {
	width: 185px;
}

/*
 * ================ Two Column List of Links ============================
 *
 */
.twocol {
}
ul.glossary {
	list-style-type: none;
	padding-left: 0px;
	margin-left: 0px;
	float: left;
}


/*
 * ====================== Short Topic List - Title/Header plus explanation ===============
 *
 */

/*
 * Margin and/or padding effect the positioning with respect to the hanging indent
 * Border does not seem to effect this
 */
.topiclist {
	margin: 2px 20px 2px 00px;
	padding: 2px 0px 2px 180px;
	border: 2px 0px 2px 00px;

}
.topiclist h2 {
	left-padding: 4em;
	margin: 2px 0px -2px 0px;
	padding: 2px 0px -2px 0px;
	border: 2px 0px -2px 0px;
}
.topiclist p {
	text-align: left;
	text-indent: -2em;
}
.topiclist p:first-line {
	bottom-margin: -4px;
}
.topiclist a {
	font-weight: bold;
}


/*
 * Footer
 *
 */
.footer {

}