/*  This is the CSS for That Game Place's basic page layout.  */
/*  edit done 01/24/12 -- added twitter block and format for toctocwoodman page
	edit done 08/11/11
	edit done 11/23/10	*/

/*  the customized global '*' tag removes all padding, borders, and margins from all elements of the page  */
*			{	padding:			0;
				border:				0;
				margin:				0;									}

/*  the customized 'body' tag sets the default text color, background color, and font styles for any elements where they are not specified  */
body			{	color:				#000000;
				background-color:	#336666;
				background-image:	url(../grph/tile1.jpg);
				font-family:		arial;
				font-size:			small;								}

/*  the customized 'h1' through 'h6' tags set the standard font sizes and padding for those fonts for the page  */
h1			{	font-size:			2.5em;
				padding:			0px;								}

h2			{	font-size:			1.6em;
				padding:			0px;								}

h3			{	font-size:			1.4em;
				padding:			0px;								}

h4			{	font-size:			1.1em;
				padding:			0px;								}

h5			{	font-size:			0.85em;
				padding:			0px;								}

h6			{	font-size:			0.5em;
				padding:			0px;								}

/*  the customized paragraph 'p' tag indents the first line of the paragraph and slightly enlages the font size as well as putting left and right padding into the block  */
p			{	text-indent:		2em;
				font-size:			1.25em;
				padding:			0px 5px 0px 5px;					}

/*  the customized '.f' style just centers a block of text  */
.f			{	text-align:			center;
				padding-top:		0;
				margin-top:			0;									}
				
.ctrit		{	margin:				0 auto 0 auto;
				text-align:			center;								}

.f1			{	margin-left:		200px;
				height:				150px;								}
				
.f2			{	padding-right:		15px;								
				height:				150px;								}

.ps			{	text-indent:		0;
				font-size:			1.25em;
				padding:			0px 5px 0px 5px;					}

.feat1 ul, .feat2 ul
			{	padding:			0px 0px 0px 45px;					}

.title		{	padding-top:		45px;								}

/*  -------------------------------------------------------------------------------
	These are the containers for unique features on each page -- the ID tag markers
	-------------------------------------------------------------------------------		*/

/*  the 'wrapper' block holds the entire page except for the optional compliance block  */
#wrapper 	{	margin:				0px auto 0px auto;
				width:				800px;
				border:				1px solid #000000;
				padding:			0;
				background-color:	#0099FF; /*0099ff*/					}

/*  the 'header' block holds the banner across the top of the page  */
#header		{	color:				#000000;
				border:				0px solid #000000;
				text-align:			center;
				height:				160px;
				background-color:	#0099FF; /*99ccff*/					}

/*  the 'content' block holds the main content of the page  */
#content	{	background-color:	#FFFF00; 
				margin:				10px auto 10px auto;
				width:				700px;
				border:				0px solid #000000;
				padding:			10px 10px 10px 10px;				}

/*  the 'foot' block holds the banner across the bottom of the page  */
#foot		{	color:				#000000;
				background-color:	#0099FF; /*99ccff*/
				padding:			0;
				margin:				0;
				text-align:			center;
				font-family:		Arial;								}

/*  the customized paragraph 'p' tag assigns the font size and aligns all the text in the footer of the page  */
#foot p		{	font-size:			0.75em;
				padding:			0;
				border:				0;
				margin-top:			1px;
				text-align:			center;								}

/*  the 'navbar' block holds the navigation bar  */
#navbar		{	background: 		#000000;
				margin: 			0;
				padding: 			0;
				text-transform: 	lowercase;							}


/*  the optional 'compliant' block holds the w3e compliance certificate  */
#compliant	{	float:				right;								}

/*  the 'featwrap' block holds all of the 'features' for each page  */
#featwrap	{	border:				0px solid #000000;					}

/*  the 'ftprod' block indents the featured product information  */
#ftprod		{	padding-left:		200px;								}


/*	-----------------------------------------------------------------
	The following styles affect the appearance of the navigation bar.
	-----------------------------------------------------------------  */

#navlist	{	list-style: 		none;
				text-align:			center;
				padding: 			0;
				margin: 			0;	
				font-size: 			1em;								}

#navlist li	{	display: 			inline;
				margin: 			0;
				padding: 			0;									}

#navlist li a	{	padding: 			4px 10px;
				border: 			1px solid #3333CC;
				color: 				#000000;
				text-decoration: 	none;
				background-color: 	#99CCFF;							}

	/* the visited style shades in any pages already visited by the user */				
#navlist li a:visited
			{	background-color:	#999999;
				border:				1px solid #333333;
				color:				#000000;							}

	/* the hover style highlights a link to another page when the mouse is hovering over the choice */
#navlist li a:hover
			{	color: 				#CCCC00;
				background: 		transparent;
				border-color: 		#CCCCCC #FFFFFF;					}

	/* the active style highlights the user's "current location" in the navigation structure */
#navlist li a.active
			{	color:				#0000ff;
				background:			#0099FF; /*ffff00*/
				border-color:		#333333 #cccccc;					}

#navlist li #product
			{	/*visibility:			hidden;	*/
				display:			none;								}

#navlist li a.spacer
			{	padding:			4px 16px;
				background-color:	#99ccff;
				border:				1px solid #333333;
				color:				#99ccff;							}

/*	------------------------------------------------------------
	this is the end of the styles that affect the navigation bar
	------------------------------------------------------------		*/




/*	The feat1month style is a test style for possible inclusion in the next upgrade
	to Thatgamestore.com.  It puts a large, faded picture of the game box in the
	background of the entire <div> that encloses the feature of the month page.
	see its' effects on the page featuretest.htm									
	In addition to feat1month, I have added gamepicta and wording as styles to keep
	the rest of the flow of the game design working together as a whole.  This allows
	me to use either just the background image or a combination of background image
	and a small "thumbnail" image in the description area.								*/
.feat1month	{	height:					auto;
				font-weight:			bold;
				border:					0px solid #000000;
				padding:				10px;
				background-color:		#ccccff;
				background:				url(../grph/products/producta.jpg) no-repeat;
				background-position:	top left;
				background-attachment:	scroll;							}

.gamepicta	{	width:				200px;
				float:				left;
				padding:			0px 10px 0px 5px;
				position:			absolute;								}

.gamepicta li
			{	margin-left:		15px;		}

.wording	{	margin-left:		220px;
				width:				400px;		}

.prodfoota	{	clear:				both;
				padding:			10px 0px 0px 0px;					}



/*  ---------------------------------------------------------------------
	These styles are for the individual blocks (or features) on each page  
	they are the lavendar and pale green blocks you see on the page
	---------------------------------------------------------------------			*/

.feat1		{	height:				auto;
				border:				0px solid #000000;
				padding:			10px;
				background-color:	#CCCCFF;							}
.feat2 		{	height:				auto;
				border:				0px solid #000000;
				padding:			10px;
				background-color:	#99FFCC; /* ccffcc */				}

#closed		{	height:				auto;
				width:				450px;
				margin:				auto;
				border:				0px solid #000000;
				padding:			10px;
				background-color:	#FF9999;							}


#tweetFrame
			{	width:				450px;
				padding:			5px 0px;
				margin-bottom:		5px;
				background-color:	#ffcccc;			}

#tweetBox	{	width:				325px;
				margin-left:		115px;
				margin-right:		5px;
				border:				3px dotted #000000;
				background-color:	#ffffff;			}

#twitterbird
			{	height:				95px;
				float:				left;
				width:				110px;	}

#twitterimg
			{	height:				75px;	}
				
#tweetToPublish
			{	width:				225px;
				margin:				auto;
				text-align:			center;
				padding:			10px 0px;			}

#announceHours
			{	clear:				both;				}

.open		{	height:				auto;
				width:				450px;
				margin:				auto;
				border:				0px solid #000000;
				padding:			10px;
				background-color:	#99FFFF;							}

.cf			{	width:				350px;
				height:				150px;
				padding:			35px 0px 0px 0px;
				margin-left:		50px;
				text-align:			center;								}

.cfn		{	width:				500px;
				height:				45px;
				padding:			35px 0px 0px 0px;
				margin-left:		50px;
				text-align:			center;								}

/*  this is the end of the blocks to hold the individual blocks (features)  */




/*  the following styles affect the text color, weight, or size of certain blocks   */
.red		{	font-size:			1.5em;
				text-decoration:	none;
				border:				0;
				color:				#FF0000;							}

.cf a		{	border:				1px dashed #FF0000;
				text-decoration:	none;								}

.cf a:visited
			{	border:				1px dashed #0000FF;
				text-decoration:	none;								}

.blue		{	font-size:			1.2em;
				color:				#0000FF;							}

.bld		{	font-weight:		bold;								}



/*  the '.lft' and '.rgt' styles influence the display of the shield logo on the header  */
.lft		{	height:				130px;
				padding-top:		4px;
				padding-left:		40px;
				padding-right:		10px;
				float:				left;								}

.rgt		{	height:				130px;
				padding-top:		8px;
				padding-right:		40px;
				padding-left:		10px;
				float:				right;								}

				
				
/*  the '.rgts' style influences the display of the wizard/tank logo for the convention feature on the index page  */
.rgts		{	height:				180px;
				padding-top:		8px;
				padding-right:		40px;
				border:				0;
				float:				right;								}



/*  format for gaming group blocks on the "gaming group" page  */				
.gga		{	height:				auto;
				text-align:			center;
				background-color:	#FF9999;/* ffff00 */
				font-size:			1.25em;
				padding:			10px 10px 3px 10px;
				border:				0px solid black;					}
			
.ggb		{	height:				auto;
				text-align:			center;
				background-color:	#99FFCC;/* ccffcc */
				font-size:			1.25em;
				padding:			10px 10px 3px 10px;
				border:				0px solid black;					}



/*  calendar frame  */
#calfrm		{	border-width:		0px;
				width:				640px; 
				height:				480px;
				background-color:	#FFFF99;
				margin:				0 15px 0 15px;						}



/*  Directions format - for either/or section  */
#rtdir 		{	width:			150px;
				padding-right:	60px;
				float:			right;									}

#ltdir 		{	width:			150px;
				padding-left:	30px;
				float:			left;									}



/*  to display the game chart from the Game Groups page  */
.cor		{	text-align:			center;
				padding-top:		25px;
				margin-top:			0;
				height:				100px;								}

.gm			{	width:				400px;
				font-size:			1.3em;
				color:				#000000;
				margin-left:		140px;
				margin-right:		100px;								}

.game		{	float:				right;								}

.day		{	font-weight:		bold;								}



/*  Charlie's quote on the About page  */
.qte		{	width:				400px;
				margin:				0px auto;
				padding:			5px 10px  5px 10px;
				background-color:	#FFFF99;
				font-family:		"times new roman";
				text-align:			center;
				font-size:			2em;
				color:				#9900FF;							}



/*  styles to format the table on the 'Contact Us' page  */
#tabctr		{	margin:				0 auto 0 auto;
				width:				400px;
				border-collapse:	collapse;							}

#tabctr td	{	border:				1px dotted #000000;
				text-align:			center;								}

.hdr		{	background-color:	#CCFFCC;
				padding:			1px 10px 1px 10px;
				font-weight:		bold;								}

.clsd		{	background-color:	#FF0000;
				padding:			1px 10px 1px 10px;
				font-weight:		bold;								}

.opn		{	background-color:	#FFFFCC;
				padding:			1px 10px 1px 10px;
				font-weight:		bold;								}



/*  styles to format the rest of the 'Contact Us' page  */
#address	{	float:				left;
				text-align:			left;
				width:				150px;
				margin-left:		75px;								}

#phone		{	float:				right;
				text-align:			right;
				width:				350px;
				margin-right:		75px;								}

#internet	{	clear:				both;
				text-align:			center;								}

#lnktxt		{	clear:				both;								}

.lt			{	float:				left;
				font-weight:		bold;
				margin-left:		100px;								}

.rt			{	float:				right;
				margin-right:		25px;								}



/*  styles for displaying thumbnail pictures  */
.back		{	width:				25%;
				margin:				0 auto;
				border:				5px solid #FFFF00;
				padding:			5px 0px 5px 0px;
				text-align:			center;
				background-color:	#99CCFF;
				color:				#669933;							}

.tn1		{	width:				100px;
				border:				0px;
				margin:				10px 20px 10px 20px;				}



/*  styles for the Milestones page  */
.mile1, .mile2, .milea
			{	border:				0;
				padding:			10px;								}

.mile1     	{	height:				95px;
				background-color:	#CCCCFF;							}

.mile2   		{	height:				95px;
				background-color:	#CCFFCC;							}

.milea    	{	height:				auto;
				background-color:	#CCCCFF;							}

.f3			{	text-align:			center;
				padding-top:		30px;
				margin-top:			0;									}

.rigt		{	height:				100px;
				padding-right:		40px;
				float:				right;								}



/*  styles for the thumbnails on the renovation pages  */
.tn			{	width:				100px;								}



/*  styles to format the links page  */
.links	     	{	margin-left:		10px;				/*  link list form */
				padding-left:		0px;
				text-indent:		0px;								}

.lkd		{	list-style:			none;				/*  link data  */
				margin-left:		0px;								}

.lkd a:hover	{	color:				#009900;							}



/*  styles to format the links page -- these are going to be changed soon  */
#col1, #col2, #col3, #col4, #col5, #col6
			{	width:				185px;
				height:				17em;
				float:				left;
				border:				1px solid #000000;
				margin-left:		20px;
				padding:			10px;								}

		/*  puts a horizontal gutter between the two rows of link boxes  */
#col4, #col5, #col6
			{	margin-top:			10px;								}

		/*  sets the background colors for the link boxes  */
#col1		{	background-color:	#FF9966;							}
#col2		{	background-color:	#99FFFF;							}
#col3		{	background-color:	#FF99FF;							}
#col4		{	background-color:	#9999FF;							}
#col5		{	background-color:	#FF9999;							}
#col6		{	background-color:	#99FF99;							}

		/*  offset just makes sure that the link boxes fit within the 'content' wrapper.  */
.offset		{	clear:				left;								}


/*  end of styles for the link page  */


/*  sets the format for the new product page  */
.gamepict	{	width:				200px;
				padding:			0px 10px 0px 5px;
				float:				left;								}

.gpc		{	width:				160px;
				margin:				0 auto;
				padding:			30px 20px 30px 20px;				}

.prodfoot	{	clear:				both;
				padding:			10px 0px 0px 0px;					}


.gamename	{	text-align:			center;
				font-weight:		bold;
				font-size:			3em;
				padding-bottom:		10px;				}

.cbld		{	font-weight:		bold;
				text-align: 		center;
				font-size:			1.6em;				}

.standout	{	color:				yellow;
				font-weight:		bold;
				background-color:	blue;				}

.ind		{	padding-left:		175px;
				margin:				0;
				border:				0;					}

/*  end of styles for the new product page */

/*  hall of fame table layout styles */
.twinner 	{	border-collapse:	collapse;
				margin:				auto;
				border:				1px solid #000000;	}

.twinner th	{	font-weight:		bold;
				padding:			2px 3px;
				border-bottom:		2px solid #000000;	}

.twinner td	{	text-align:			center;
				border:				1px dotted #000000;
				padding:			3px 10px;			}

/*  end of style sheet  */