/* CSS Document */

body {
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-image: url(../../img/top-bg.gif);
	background-repeat: repeat-x;
}

/* Sets the default link settings */
a {
	color: #ffffff;
	text-decoration: underline;
}

/* Centers the page */
#mainCenterDiv {
	width: 1020px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

/* Holds the header contents */
#headerBox {
	width: 1020px;
	height: 130px;
}

/* Holds the logo image in the header */
#logoBox {
	width: 390px;
	height: 130px;
	float: left;
}

/*
Holds everything to the right of the logo image and shows the rest 
of the header image as it's background
*/
#headerRightSide {
	width: 630px;
	height: 130px;
	background-image: url(../../img/header-bg.gif);
	background-repeat: no-repeat;
	float: right;
}

/* Holds the 468x60 ad in the header */
#headerAdBox {
	width: 468px;
	height: 60px;
	padding: 18px 48px 0 114px;
	float: left;
}

/* Holds the text link navigation in the header */
#headerNavBox {
	width: 596px;
	height: 12px;
	padding: 22px 34px 0 0;
	color: #98D1F0;
	font-size: 14px;
	text-align: right;
	float: left;
}

/* Holds the category buttons and quick game select list */
#navBarBox {
	width: 971px;
	height: 22px;
	padding: 12px 26px 12px 23px;
	background-image: url(../../img/nav-bg.gif);
	background-repeat: repeat-x;
	float: left;
}

/* Holds the category buttons */
#catBox {
	width: 730px;
	height: 22px;
	padding-right: 10px;
	float: left;
}

/* 
Adds the background color to the category buttons in the nav bar 
and a margin on the right side to separate each of them
*/
#catBox ul {
	margin: 0px;
	padding: 0px;
}

#catBox ul li {
	height: 19px;
	background-color: #505050;
	margin: 0 10px 0 0;
	padding: 3px 7px 0 7px;
	list-style: none;
	position: relative;
	overflow: hidden;
	float: left;
}

/* Sets the link values for the category buttons in the nav bar */
#catBox ul li a {
	font-size: 13px;
	font-weight: bold;
}
#catBox ul li a:hover {
	text-decoration: underline;
}

/* 
Puts the corner images for the category buttons in the nav bar 
on the right and left of the text link
*/
#catBox ul li img.left {
	position: absolute;
	left: 0px;
	top: 0px;
}
#catBox ul li img.right {
	position: absolute;
	right: 0px;
	top: 0px;
}

/* Holds the quick game select list */
#quickSelelctBox {
	width: 231px;
	height: 22px;
	position: relative;
	float: right;
}

/*
When there are rolled over it tells the javascript to close 
the Quick Play list. But this is just the styles for the tags.
*/
#quickPlayList_leftHide {
	width: 35px;
	height: 0px;
	visibility: hidden;
	display: none;
	position: absolute;
	top: 0px;
	right: 159px;
	float: left;
}
#quickPlayList_rightHide {
	width: 35px;
	height: 0px;
	visibility: hidden;
	display: none;
	position: absolute;
	top: 0px;
	right: -35px;
}
#quickPlayList_bottomHide {
	width: 229px;
	height: 0px;
	visibility: hidden;
	display: none;
	position: absolute;
	top: 271px;
	right: -35px;
}
#quickPlayList_topHide {
	width: 229px;
	height: 0px;
	visibility: hidden;
	display: none;
	position: absolute;
	top: -35px;
	right: -35px;
}

/* Holds the list of games for the Quick Play selector */
#quickPlayListBox {
	width: 158px;
	height: 0px;
	visibility: hidden;
	display: none;
	background-color: #FFFFFF;
	padding-top: 2px;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	position: absolute;
	top: 20px;
	right: -1px;
	float: left;
}
#quickPlayList {
	width: 156px;
	height: 0px;
	visibility: hidden;
	display: none;
	font-size: 12px;
	overflow: scroll;
	float: left;
}

/* makes the links in the Quick Play list look like a select menu */
#quickPlayList ul {
	padding: 0px;
	margin: 0px;
}
#quickPlayList ul li {
	padding: 2px 5px 2px 5px;
	margin: 0px;
	list-style: none;
}

/* Holds the sidebar and the content sections */
#mainContentBox {
	width: 978px;
	padding: 10px 21px 40px 21px;
	float: right;
}

/* Holds the main content section */
#leftContentBox {
	width: 728px;
	float: left;
}

/* Holds the top 728x90 ad on the left side */
#topAd_728x90 {
	width: 728px;
	height: 90px;
	padding-bottom: 7px;
	float: left;
}

/* Holds row of black slashes on the left side under the 728x90 ad */
#blackDashesBar_left {
	width: 728px;
	height: 8px;
	background-image: url(../../img/black-dash-bar.gif);
	background-repeat: repeat-x;
	float: left;
}

/* Holds row newest games */
#newestGamesBox {
	width: 725px;
	height: 126px;
	background-color: #FFFFFF;
	border-left: 1px solid #C1C1C1;
	border-top: 1px solid #C1C1C1;
	border-bottom: 1px solid #C1C1C1;
	padding-left: 2px;
	margin-top: 7px;
	overflow: visible;
	position: relative;
	float: left;
}

/* Holds the image that says New Games */
#newGameImageBox {
	height: 114px;
	background-color: #E6E6E6;
	background-image: url(../../img/new-games-bg.gif);
	background-repeat: repeat-x;
	padding: 8px 0 0 9px;
	margin-top: 2px;
	position: absolute;
	left: 2px;
	top: 0px;
	float: left;
}

/* Shows the white around each new game and the border to the right them */
div.newGameWhiteBox {
	height: 122px;
	border-right: 1px solid #C1C1C1;
	padding: 2px 2px 3px 0;
	text-align: center;
	position: relative;
	left: 25px;
	float: left;
}

/* Holds each new game in the row of newest games */
div.newGameBox {
	height: 114px;
        width:98px;
	background-color: #E6E6E6;
	background-image: url(../../img/new-games-bg.gif);
	background-repeat: repeat-x;
	padding: 8px 8px 0 8px;
	text-align: center;
	float: left;
}

/* Puts the light gray border around the newest games icons */
div.newGameBox a img {
	width: 80px;
	height: 80px;
	border: 1px solid #C1C1C1;
	position: relative;
	bottom: 2px;
}

/* Sets the link color for the newest games title */
div.newGameBox a {
	color: #FF56CA;
}

/* Holds all the category s listed on the home page */
div.homeCategoriesBox {
	width: 746px;
	float: left;
}

/* Holds each of the category sections on the homepage */
div.homeCatBox {
	width: 232px;
	padding-top: 10px;
	padding-left: 16px;
	position: relative;
	right: 16px;
	float: left;
}

/* The top left corner next to the page title of main page sections */
div.sectionTitleLeft {
	width: 10px;
	height: 40px;
	float: left;
}

/* Holds the title of each category section on the home page */
div.homeCatTitle {
	width: 190px;
	height: 28px;
	background-color: #333333;
	background-image: url(../../img/section-title-bg.gif);
	background-repeat: repeat-x;
	padding-top: 12px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	float: left;
}

/* Sets the link values for the title of each category section on the home page */
div.homeCatTitle a {
	font-size: 12px;
	font-weight: normal;
}
div.homeCatTitle a:hover {
	color: #CCCCCC;
}

/* The top right corner next to the page title of main page sections */
div.sectionTitleRight {
	width: 32px;
	height: 40px;
	float: left;
}

/* 
Puts the pink borders on the left and right of the game listings for each 
category on the home page 
*/
div.homeCatGameListingsBox {
	width: 230px;
	height: 174px;
	background-image: url(../../img/home-cat-listing-bg.gif);
	background-repeat: repeat-y;
	border-left: 1px solid #FF78D2;
	border-right: 1px solid #FF78D2;
	float: left;
}
div.homeCatGameListingsBox img {
	float: left;
}

/*
Holds the each game listing in each of the category sections 
on the home page
*/
div.homeCatGameListing {
	width: 212px;
	height: 24px;
	padding: 10px 9px 0 9px;
	color: #FFB2EF;
	font-weight: bold;
	overflow: hidden;
	float: left;
}

/*
Holds all the icons for each game lised in the category sections on 
the home page and moves them up 2 pixels
*/
div.homeCatGameListingsBox div.icon {
	width: 18px;
	height: 18px;
	position: relative;
	bottom: 2px;
	float: right;
}

/*
Makes all the icons for each game lised in the category sections on 
the home page 18x18 pixels and sets the border to 0
*/
div.homeCatGameListingsBox div.icon a img {
	width: 18px;
	height: 18px;
	border: 0px;
}

/* 
Holds the pink dots image that is under every game listing in each 
category on the home page 
*/
div.homeCatPinkDots {
	width: 230px;
	height: 1px;
	float: left;
}
div.homeCatPinkDots img {
	float: left;
}

/* Holds the bottom corners image on every category section on the home page */
div.homeCatBottom {
	width: 232px;
	height: 3px;
	float: left;
}
div.homeCatBottom img {
	float: left;
}

/* Holds the right sidebar contents */
#rightSidebarBox {
	width: 240px;
	padding-left: 10px;
	float: right;
}

/* Holds the Welcome message in the right sidebar */
#welcomeBox {
	width: 240px;
	height: 90px;
	background-color: #7BBFEE;
	float: left;
}
#welcomeBox img {
	float: left;
}

/* Holds the Welcome message in the right sidebar */
#welcomeMessageBox {
	width: 216px;
	height: 82px;
	background-image: url(../../img/welcome-bg.gif);
	background-repeat: repeat-x;
	padding: 7px 8px 7px 8px;
	color: #FFFFFF;
	font-weight: bold;
	text-align: justify;
	float: left;
}

/* Holds row of black slashes below the welcome message in the right sidebar */
#blackDashesBar_right {
	width: 240px;
	height: 8px;
	background-image: url(../../img/black-dash-bar.gif);
	background-repeat: repeat-x;
	margin: 7px 0 7px 0;
	float: left;
}

/* Holds the login area */
#loginBox {
	width: 220px;
	background-color: #E5E5E5;
	padding: 11px 10px 11px 10px;
	color: #393939;
	float: left;
}

/* 
Makes the padding and margin of the form tag, within the login area, 
0 so it doesn't screw up the look of it 
*/
#loginBox form {
	padding: 0px;
	margin: 0px;
}

/* Moves the contents of any table within the login area to the left */
#loginBox table {
	width: 218px;
	float: left;
}

/* Moves the contents of any div within the login area to the left */
#loginBox div {
	float: left;
}

/* Makes the "Already registered? Sign in." text bold and size 15 */
#loginBox div span.big {
	color: #222222;
	font-size: 15px;
	font-weight: bold;
}

/* Makes the "Save you info" text size 11 */
#loginBox div span.small {
	font-size: 11px;
}

/* Sets the values for links in the login area */
#loginBox a {
	color: #222222;
	font-weight: bold;
	text-decoration: underline;
}
#loginBox a:hover {
	text-decoration: none;
}

/* Sets the styles for input fields within the login area */
#loginBox input {
	color: #4B4B4B;
	font-size: 12px;
}

/* Sets the styles for username and password text fields */
#loginBox input.textBox {
	width: 73px;
	height: 19px;
	background-color: #FCFCFC;
	border-left: 1px solid #A0A0A0;
	border-right: 0px;
	border-top: 1px solid #A0A0A0;
	border-bottom: 0px;
	padding: 5px 8px 0 6px;
	margin-right: 8px;
	margin-top: 9px;
	margin-bottom: 3px;
	float: left;
}

/* 
Sets the width, height, and margins for the pink "Go" submit image 
in the login area 
*/
#loginBox input.go {
	width: 26px;
	height: 25px;
	margin-top: 10px;
	margin-bottom: 4px;
	float: left;
}

/* Sets the styles for "save your info part if the login area" */
#loginBox div label {
	margin-left: 6px;
	float: left;
}

/* Holds the 200x200 ad in the right sidebar */
#rightAd_200x200 {
	width: 200px;
	padding: 14px 20px 14px 20px;
	float: left;
}

/* Holds the 120x600 ads in the right sidebar" */
div.rightAd_120x600 {
	width: 120px;
	padding: 0 0 14px 0;
	float: left;
}

/* Holds all the category s listed on the home page */
div.contentBox {
	width: 728px;
	padding: 10px 0 10px 0;
	float: left;
}

/* Holds the title section on all subpages */
div.sectionTitle {
	width: 686px;
	height: 28px;
	background-color: #333333;
	background-image: url(../../img/section-title-bg.gif);
	background-repeat: repeat-x;
	padding-top: 12px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	float: left;
}

/* Sets the link values for the title of the title section on all subpages */
div.sectionTitle a {
	color: #B2B2B2;
}
div.sectionTitle a:hover {
	color: #CFCFCF;
}

/* Shows the pink area on the subpages and holds everything in it */
div.pinkBox {
	width: 680px;
	background-color: #FF81D7;
	padding: 15px 23px 15px 23px;
	border-left: 1px solid #FF78D2;
	border-right: 1px solid #FF78D2;
	float: left;
}

/* 
Makes all tables that are within a subpages pink content area size 680 
pixels wide and pushes them to the left of the pink area
*/
div.pinkBox table {
	width: 680px;
	float: left;
}
div.pinkBox table table {
	width: auto;
}

div.pinkBox a {
	background-color: #FF78D2;
	text-decoration: underline; #ffffff;
}

/* 
Makes the background of every game listing in the browse, 
search, and category pages light pink
*/
td.browseBg {
	background-color: #FF9FDB;
}

/* 
Makes the background of every game listing in the in the plpular games section 
on each game page light gray
*/
td.popularBg {
	background-color: #ECECEC;
}

/* 
Styles the game icons, and the TD tag holding them, listed in the browse, 
search, and category pages 
*/
td.browseIcon {
	width: 60px;
	padding: 4px;
	text-align: left;
}
td.browseIcon img {
	width: 60px;
	height: 60px;
	border: 1px solid #333333;
}

/* 
Styles the game title link, description, and the TD tag holding them listed in the browse, 
search, and category pages 
*/
td.browseDesc {
	width: 166px;
	padding: 4px;
	font-size: 11px;
	text-align: left;
}
td.browseDesc a {
	font-size: 13px;
	font-weight: bold;
}

/* 
Holds and styles the links that show the number of pages there are in a section.
Like the category pages
 */
#pageLinks {
	width: 680px;
	padding-top: 15px;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	float: left;
}

/* Holds the game */
#centerGameBox {
	width: 680px;
	float: left;
}












/* Shows the gray areas on the subpages below the pink area */
div.grayBox {
	width: 680px;
	background-color: #DFDFDF;
	padding: 15px 23px 15px 23px;
	border-left: 1px solid #A6A6A6;
	border-right: 1px solid #A6A6A6;
	float: left;
        font-family:arial;
        font-size:11px;


}

/* 
Makes all tables that are within a subpages gray content area size 680 
pixels wide and pushes them to the left of the gray area
*/
div.grayBox table {
	width: 680px;
	float: left;
}
div.grayBox table table {
	width: auto;
}


div.grayBox a {
	color: #0044EE;
	font-weight: bold;

}
div.grayBox a:hover {
	color: #333333;
}

/* Holds the title of each gray section under the pink section */
div.grayBoxTitle {
	width: 686px;
	height: 28px;
	background-color: #CCCCCC;
	background-image: url(../../img/gray-section-title-bg.gif);
	background-repeat: repeat-x;
	padding-top: 12px;
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	float: left;
}
div.grayBoxTitle table {
	float: left;
}

/* Holds the title of each gray section in the right sidebar */
div.grayBoxTitle_small {
	width: 198px;
	height: 28px;
	background-color: #CCCCCC;
	background-image: url(../../img/gray-section-title-bg.gif);
	background-repeat: repeat-x;
	padding-top: 12px;
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	float: left;
}

/* Holds each gray section in the right sidebar */
div.rightBox {
	width: 240px;
	padding-top: 10px;
	float: left;
}

/* Puts the gray borders on the left and right of the gray section in the right sidebar */
div.rightBoxListingsBox {
	width: 238px;
	background-color: #DFDFDF;
	border-left: 1px solid #A6A6A6;
	border-right: 1px solid #A6A6A6;
	float: left;
}
div.rightBoxListingsBox img {
	float: left;
}

/* Holds each listing in the gray sections in the right sidebar */
div.rightBoxListing {
	width: 220px;
	height: 24px;
	padding: 10px 9px 0 9px;
	color: #999999;
	font-weight: bold;
	overflow: hidden;
	float: left;
}

/* Styles the links in the gray sections in the right sidebar */
div.rightBoxListing a {
	color: #0044EE;
}

/* 
Holds the gray dots image that is under every listing in each gray section
in the right sidebar
*/
div.grayDots {
	width: 238px;
	height: 1px;
	float: left;
}
div.grayDots img {
	float: left;
}

/* Holds the bottom corners image on every gray section in the right sidebar */
div.rightBoxBottom_small {
	width: 240px;
	height: 3px;
	float: left;
}
div.rightBoxBottom_small img {
	float: left;
}

/* Holds the bottom corners image on every gray section in the right sidebar */
div.grayBoxBottom {
	width: 728px;
	height: 3px;
	float: left;
}
div.grayBoxBottom img {
	float: left;
}



















/* Makes the dark background around the footer categories */
#footerCategory_bg {
	width: 1020px;
	background-color: #232323;
	float: left;
}

/* Holds Top Games, etc sections at the bottom of the page */
#footerCategoryBox {
	width: 999px;
	padding: 0 0 10px 21px;
	float: left;
}

/* Holds the title of section in the footer */
div.footerCatTitle {
	width: 190px;
	height: 27px;
	background-color: #C2C2C2;
	padding-top: 12px;
	border-top: 1px solid #FFFFFF;
	color: #414141;
	font-size: 14px;
	font-weight: bold;
	float: left;
}

/* 
Puts the white borders on the left and right of the game listings for each 
section in the footer
*/
div.footerCatGameListingsBox {
	width: 230px;
	height: 174px;
	background-color: #DBDBDB;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	float: left;
}
div.footerCatGameListingsBox img {
	float: left;
}

/* Holds the each game listing in each of the sections in the footer */
div.footerCatGameListing {
	width: 212px;
	height: 24px;
	padding: 10px 9px 0 9px;
	color: #999999;
	font-weight: bold;
	overflow: hidden;
	float: left;
}

/*
Holds the icon for each game lised in the sections in 
the footer and moves them up 2 pixels
*/
div.footerCatGameListingsBox div.icon {
	width: 18px;
	height: 18px;
	position: relative;
	bottom: 2px;
	float: right;
}

/*
Sets the values for the links in the Top Games, etc sections 
on the bottom of every page
*/
div.footerCatGameListingsBox a {
	color: #111111;
}
div.footerCatGameListingsBox a:hover {
	color: #333333;
}

/*
Makes all the icons for each game lised in the sections in the 
footer 18x18 pixels and sets the border to 0
*/
div.footerCatGameListingsBox div.icon a img {
	width: 18px;
	height: 18px;
	border: 0px;
}

/* Holds the 200x200 ad in the footer */
#footerAd_200x200 {
	width: 200px;
	height: 200px;
	padding: 10px 0 4px 10px;
	position: relative;
	float: left;
}

/* Holds the "Advertise here" link under the 200x200 ad in the footer */
#footerAd_200x200 div.adHere {
	width: 200px;
	text-align: right;
	position: absolute;
	right: 6px;
	bottom: -12px;
}

/* Holds the copyright info and the bottom 728x90 ad and centers them */
#footerBottomBox {
	width: 1020px;
	float: left;
}

/* Holds the copyright info */
#copyrightBox {
	width: 206px;
	height: 90px;
	padding: 14px 21px 20px 21px;
	color: #3F3F3F;
	float: left;
}

/* Sets the values for the link in the copyright section */
#copyrightBox a {
	color: #3F3F3F;
	font-weight: bold;
}
#copyrightBox a:hover {
	text-decoration: underline;
}

/* Holds the copyright info */
#footerAd_728x90 {
	width: 728px;
	height: 90px;
	padding: 14px 0 20px 0;
	float: left;
}