﻿/* CSS Document */

/******************************** 
*****  GLOBAL CSS RULES  *****
********************************/

html, body {
	font-family:Arial, Helvetica, sans-serif;
	background:url(/images/bodyBackground.jpg);
	color:#444;
	line-height: 1.2;
}
@font-face {
 font-family: 'DebussyRegular';
 src: url('/fonts/debussy-webfont.eot');
 src: local('☺'), url('/fonts/debussy-webfont.woff') format('woff'), url('/fonts/debussy-webfont.ttf') format('truetype'), url('/fonts/debussy-webfont.svg#webfontUrtbjDIj') format('svg');
 font-weight: normal;
 font-style: normal;
}
div#wrapper {
	width:960px;
	margin:0 auto;
	background:#fff;
	overflow:hidden;
	position:relative;
}
*div#wrapper {
	margin-top:-5px; /*hack for ie7 and lower*/
}
#mainArea {
	float:left;
	width:630px;
	margin-left:11px;
}
#sidebar {
	float:left;
	width:305px;
	margin-top:10px;
}
#sidebarGame {
	float:left;
	position:absolute;
	left:610px;
	top:0;
	display:none;
}
/*HEADER RULES*/
div#headerWrapper {
	background:#ffae33;
	position:relative;
	z-index:10;
	border-top:solid 6px #606468;
	border-bottom: 4px solid #fff;
}
div#header {
	height:90px;
	width:960px;
	background:#ffae33;
	margin-bottom:5px;
	margin:0 auto 5px auto;
}
div#header div#images {
	float:left;
	position: relative;
	top: -5px;
	left:-20px;
}
div#header img#slogan {
	margin-left:98px;
	margin-bottom:34px;
}
div#header div#searchBox {
	background:url(/images/searchBg.jpg) no-repeat;
	width:190px;
	height:34px;
	float:right;
	margin-right:20px;
	margin-top:30px;
	overflow:hidden;
}
div#header div#searchBox input#searchInput {
	width:140px;
	margin-left:10px;
	margin-top:5px;
	height:17px;
	border:1px solid #999;
	float:left;
}
div#header div#searchBox input#searchSubmit {
	background:url(/images/searchGoButton.jpg) no-repeat;
	border:none;
	color:#fff;
	font-weight:bold;
	width:31px;
	height:22px;
	position:relative;
	top:5px;
	right:1px;
	float:left;
}
.clear {
	clear:both;
}

div#adHeader {
	width:940px;
	height:97px;
	margin:0 auto;
	left: 6px;
	overflow:hidden;
	position:relative;
}
/* MENU RULES */


div#menuCategories {
	width:940px;
	height:22px;
	margin:0 auto;
	left: 20px;
	margin-top: 4px;
	overflow:hidden;
	position:relative;
	z-index:100;
}
div#menuCategories ul li {
	background: url("/images/playbtn.png") no-repeat;
	background-position: 0px 5px;
	list-style-type:none;
	margin-right: 25px;
	float:left;

	height:20px;
}
div#menuCategories ul li a {
	padding-left: 16px;
	font-family: 'Arial';
	font-size:14px;
	font-weight:bold;
	color:#F60;
	text-decoration: underline; 
}
div#menuCategories ul li a:hover {
	padding-left: 16px;
	font-family: 'Arial';
	font-size:14px;
	font-weight:bold;
	color:#666;
	text-decoration: underline; 
}



div#menu {
	width:940px;
	background:url(/images/menuBg.jpg) repeat-x #ffae33;
	height:39px;
	margin:0 auto;
	overflow:hidden;
	-moz-border-radius: 8px; /* FF1+ */
	-webkit-border-radius: 8px; /* Saf3-4 */
	border-radius: 8px; /* Opera 10.5, IE 9, Saf5, Chrome */
	-moz-box-shadow: 1px 2px 4px #b5b2aa; /* FF3.5+ */
	-webkit-box-shadow: 1px 2px 4px #b5b2aa; /* Saf3.0+, Chrome */
	box-shadow: 1px 2px 4px #b5b2aa; /* Opera 10.5, IE 9 */
	behavior: url(/js/PIE.htc);
	position:relative;
	z-index:100;
}
div#menu ul li {
	list-style-type:none;
	float:left;
	color:#fff;
	font-family: 'DebussyRegular';
	font-size:20px;
	border-left:2px solid #fff;
	border-right:1px solid #e68000;
	height:39px;
	line-height:2;
}
div#menu #menuHome a {
	background: url("/images/menuSprite3.png") repeat scroll 0 -445px transparent;
	display: block;
	height: 39px;
	width: 79px;
	-moz-border-radius: 8px 0 0 8px;
	-webkit-border-radius: 8px 0 0 8px; /* Saf3-4 */
	border-radius: 8px 0 0 8px; /* Opera 10.5, IE 9, Saf5, Chrome */
	behavior: url(/js/PIE.htc);
}
div#menu #menuHome a:hover, div#menu #menuHomeCurrent a {
	background: url("/images/menuSprite3.png") repeat scroll 0 -356px transparent;
	display: block;
	height: 39px;
	width: 79px;
	-moz-border-radius: 8px 0 0 8px;
	-webkit-border-radius: 8px 0 0 8px; /* Saf3-4 */
	border-radius: 8px 0 0 8px; /* Opera 10.5, IE 9, Saf5, Chrome */
	behavior: url(/js/PIE.htc);
}
div#menu #menuMygames a {
	background: url("/images/menuSprite3.png") repeat scroll 0 -267px transparent;
	display: block;
	height: 39px;
	width: 123px;
}
div#menu #menuMygames a:hover, div#menu #menuMygamesCurrent a {
	background: url("/images/menuSprite3.png") repeat scroll 0px -178px transparent;
	display: block;
	height: 39px;
	width: 123px;
}
div#menu #menuNewest a {
	background: url("/images/menuSprite3.png") repeat scroll 0 -89px transparent;
	display: block;
	height: 39px;
	width: 97px;
}
div#menu #menuNewest a:hover, div#menu #menuNewestCurrent a {
	background: url("/images/menuSprite3.png") repeat scroll 0px 0 transparent;
	display: block;
	height: 39px;
	width: 97px;
}
div#menu #menuMostPlayed a {
	background: url("/images/menuSprite3.png") repeat scroll 0 -801px transparent;
	display: block;
	height: 39px;
	width: 144px;
}
div#menu #menuMostPlayed a:hover, div#menu #menuMostPlayedCurrent a {
	background: url("/images/menuSprite3.png") repeat scroll 0px -712px transparent;
	display: block;
	height: 39px;
	width: 144px;
}
div#menu #menuTopRated a {
	background: url("/images/menuSprite3.png") repeat scroll 0 -623px transparent;
	display: block;
	height: 39px;
	width: 116px;
}
div#menu #menuTopRated a:hover, div#menu #menuPuzzleCurrent a {
	background: url("/images/menuSprite3.png") repeat scroll 0px -534px transparent;
	display: block;
	height: 39px;
	width: 116px;
}
div#menu #menuOurGames a {
	background: url("/images/menuSprite3.png") repeat scroll 0 -979px transparent;
	display: block;
	height: 39px;
	width: 133px;
}
div#menu #menuOurGames a:hover, div#menu #menuSkillCurrent a {
	background: url("/images/menuSprite3.png") repeat scroll 0px -890px transparent;
	display: block;
	height: 39px;
	width: 133px;
}

div#menu ul li a span {
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	visibility:hidden;
}
div#menu ul li.noborder {
	border:none;
	border-right:1px solid #e68000;
}
div#menu div#findGameList {
	height:39px;
	width:197px;
	float:right;
	border-left:2px solid #fff;
	padding-left:12px;
	margin-right:21px;
}
div#menu div#findGameList select {
	width:197px;
	margin-top:10px;
	color:grey;
	font-size:12px;
}
css3-container {
	margin:0 auto;
	width:940px;
}
/*ADV CSS RULES */
#adv {
	-moz-box-shadow: 1px 2px 4px #b5b2aa; /* FF3.5+ */
	-webkit-box-shadow: 1px 2px 4px #b5b2aa; /* Saf3.0+, Chrome */
	box-shadow: 1px 2px 4px #b5b2aa; /* Opera 10.5, IE 9 */
	behavior: url(/js/PIE.htc);
	font-size:12px;
	font-weight:bold;
	background:#fff;
	width:302px;
	padding: 2px 2px 2px 2px;
	position:relative;
	z-index:100;
	margin-bottom: 24px;
}
/******************************** 
*****  HOME PAGE CSS RULES  *****
********************************/

/* SLIDER CSS RULES */
#slider {
	width:605px !important;
	height:160px;
	border:3px solid #FF8200;
	margin-top:10px;
	overflow:hidden;
}
#slider ul li {
	width:605px;
	height:166px;
}
#slider ul li div.sliderImage {
	width:378px;
	float:left;
}
#slider ul li div.sliderText {
	width:215px;
	font-size:12px;
	float:right;
	margin-right:5px;
}
#slider ul li div.sliderText h2 {
	color:#FF8200;
	font-size:16px;
	margin:10px 0;
}
#slider ul li div.sliderText img {
	position: absolute;
	top: 120px;
	z-index:1;
}
.prev {
	position:absolute;
	left:560px;
	top:130px;
	background:url(/images/prevIcon.jpg) no-repeat;
	width:8px;
	height:14px;
	border:none;
	z-index:10;
}
.next {
	position:absolute;
	left:580px;
	top:130px;
	background:url(/images/nextIcon.jpg) no-repeat;
	width:8px;
	height:14px;
	border:none;
	z-index:10;
}
/*NEW GAMES CSS RULES*/

#gamesList {
	width:600px;
	float:left;
}
#gamesList #title {
	height:25px;
	background:#ff8200;
	display:inline;
	padding:2px 20px 0 20px;
	;
	border:3px solid #fff;
	font-size:22px;
	margin-left:75px;
	color:#fff;
	text-align:top;
	font-family: 'DebussyRegular';
	line-height:1.4;
	-moz-box-shadow: 1px 2px 4px #b5b2aa; /* FF3.5+ */
	-webkit-box-shadow: 1px 2px 4px #b5b2aa; /* Saf3.0+, Chrome */
	box-shadow: 1px 2px 4px #b5b2aa; /* Opera 10.5, IE 9 */
	behavior: url(/js/PIE.htc);
	position:relative;
	top:20px;
}
#gamesList .customCategoryTitle {
	width:300px !important;
}
#gamesList .customCategoryRatedTitle {
	width:350px !important;
}
#gamesList table tr td {
	width:194px;
	font-size:12px;
}
#gamesList table tr {
	overflow:hidden;
}
#gamesList table tr td.gameThumb a img {
	padding-top:15px;
	width:180px;
	height:97px;
}
td.gameThumb div {
	position:relative;
}
#gamesList table tr td.gameTitleStars {
	vertical-align: top;
	text-align: top;
}

#gamesList table tr td.gameDesc {
	text-align: top;
	align: top;
}
#gamesList table tr td.gameDesc span {
	width: 180px;
	text-align: top;
	align: top;
}
#gamesList table tr td.gameThumb div img.removefav {
	height:20px;
	width:25px;
	padding-top:0;
	position:absolute;
	bottom:0;
	right:15px;
	cursor:pointer;
}
#gamesList div.gameTitle {
	font-weight:bold;
	font-size:14px;
	padding-top:3px;
	width:180px; /* was 123 */
	float:left;
}
#gamesList div.gameTitle a {
	text-decoration:none;
	color:black;
	word-wrap:break-word;
	width:180px; /* was 123 */
}
#gamesList div.gameTitle a:hover {
	text-decoration:underline;
}
#favoriteDialog {
	float: right;
	font-weight: bold;
	margin-top: 20px;
	text-align: center;
	width: 200px;
	line-height:1.1;
	display:none;
}
#favoriteDialog a {
	text-decoration:none;
	color:#FFAE33;
}
#favoriteDialog a:hover {
	text-decoration:underline;
}
div.gameStars {
	padding:6px 0px;
	float: right;
	margin-right: 14px;
	width:56px;
	position:relative;
}
#gamesList div.gameStars img {
	position:relative;
	z-index:1;
}
div.gameStars .orange {
	height: 12px;
	background: url("/images/5stars.jpg") repeat scroll 0% 0% transparent;
	position: absolute;
	z-index: 1;
	bottom: 6px;
	*bottom:9px; /*ie7 hack*/
	left:0;
}
#topTen div.gameStars .orange {
	*bottom:6px; /*ie7 hack*/
}
table tr td.gamesResult {
	text-align:right;
}
table tr td.gamesResult span {
	font-weight:bold;
}
/*TOP TEN CSS RULES*/

div#topTen {
	-moz-box-shadow: 1px 2px 4px #b5b2aa; /* FF3.5+ */
	-webkit-box-shadow: 1px 2px 4px #b5b2aa; /* Saf3.0+, Chrome */
	box-shadow: 1px 2px 4px #b5b2aa; /* Opera 10.5, IE 9 */
	behavior: url(/js/PIE.htc);
	font-size:12px;
	font-weight:bold;
	background:#fff;
	width:308px;
	padding-bottom:5px;
	position:relative;
	z-index:100;
}
div#topTen #topTitle {
	height:25px;
	background:#ff8200;
	width:290px;
	border:3px solid #fff;
	font-size:20px;
	margin-bottom:15px;
	color:#fff;
	text-align:center;
	font-family: 'DebussyRegular';
	line-height: 1.4;
	-moz-box-shadow: 1px 2px 4px #b5b2aa; /* FF3.5+ */
	-webkit-box-shadow: 1px 2px 4px #b5b2aa; /* Saf3.0+, Chrome */
	box-shadow: 1px 2px 4px #b5b2aa; /* Opera 10.5, IE 9 */
	behavior: url(/js/PIE.htc);
}
div#topTen table {
	width:300px;
}
div#topTen table tr td {
	padding-left:10px;
	height:21px;
	vertical-align: middle;
}
div#topTen table tr.orangeRow td {
	background:#ffead5;
}
#topTen a {
	color: black;
	text-decoration: none;
}
#topTen a:hover {
	text-decoration: underline;
}


/*INSTRUCTIONS / GAME RATING CSS RULES*/
#sideBarGameInfo {
	font-size:12px;
	background:#fff;
	width:300px;
	padding-left:10px;
	padding-top:0px;
	margin-top: 5px;
	margin-bottom: 25px;
	position:relative;
	z-index:100;
	border-left:2px dashed #ffc053;
}
#sideBarGameInfo .title {
	font-size:24px;
	font-weight:bold;
	margin: 0px 0 5px 5px;
}
#sideBarGameInfo .title img {
	vertical-align:middle;
}
#sideBarGameInfo .content {
	margin: 5px 0 5px 5px;
	font-size:12px;
}
#sideBarGameInfo .content a {
}
#sideBarGameInfo  .content a:hover {
	text-decoration:underline;
}


/*GAMES CSS RULES*/
#mainAreaGame {
	float:left;
	margin-left:11px;
	width:98%;
}
#gameTitle {
	font-size:24px;
	font-weight:bold;
	margin-top:20px;
	float:left;
}
#socialize {
	/*float: right;
	margin-right: 335px;
	margin-top: 20px;*/
	position:absolute;
	right: 352px;
	top: 214px;
}
#socialize img {
	float: right;
	margin-right: 8px;
	width: 32px;
}
#socialize a img {
/*margin-left:22px;	*/
}

.adHorizontalFirst {
	margin-top:20px;
	text-align: center;
	position:relative;
	z-index:1;
}
.adHorizontalSecond {
	top: 5px;
	margin-bottom:20px;
	text-align: center;
	position:relative;
	z-index:1;
}
#game {
	margin: 10px auto 5px;
	overflow:hidden;
	position:relative;
	z-index:600;
	left:34px;  /* was 40px */
	zoom:1;
}
.gameObject {
	float:left;
	visibility:visible !important;
}
#gameButtons {
	width:48px;
	float:left;
	font-size:12px;
	font-weight:bold;
	text-align:center;
}
#gameButtons img {
	margin:5px;
}
#gameComments {
	width:562px;
	overflow:auto;
	/*border:3px solid #ffc053;*/
}
#gameInstructions {
	width:570px;
	overflow:auto;
	/*border:3px solid #ffc053;*/
}
#gameInstructions .column {
	width:50%;
	float:left;
}
#gameInstructions .column .title {
	font-size:24px;
	font-weight:bold;
	margin: 5px 0 5px 5px;
}
#gameInstructions .column .title img {
	vertical-align:middle;
}
#gameInstructions .column .content {
	margin: 5px 0 5px 5px;
	font-size:12px;
}
#gameInstructions .column .content a {
}
#gameInstructions .column .content a:hover {
	text-decoration:underline;
}
#overlay {
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.9;
	filter:alpha(opacity=60);
	z-index:500;
}
/*CSS RULES FOR CATEGORY*/
#pagination {
	font-size:14px;
	font-weight:bold;
	text-align:center;
	padding-top:20px;
	overflow:hidden;
	margin-left:57px;
}
.prevnext {
	width:90px;
}
.pagenumber {
	width:20px;
}
.prevnext, .pagenumber {
	float:left;
	border:1px solid black;
	margin-right:5px;
	padding:3px;
}
#pagination a {
	color:black;
	text-decoration:none;
}
#pagination a:hover {
	text-decoration:underline;
}
#pagination .current {
	background:#FFAE33;
}
/*CSS ADDTHIS RULES*/
.addthis_toolbox.addthis_pill_combo a {
	float: left;
}
.addthis_toolbox.addthis_pill_combo a.addthis_button_tweet, .addthis_toolbox.addthis_pill_combo a.addthis_counter {
	margin-top: -2px;
}
.addthis_button_compact .at15t_compact {
	margin-right: 4px;
	float: left;
}
.addthis_toolbox {
	float:right;
	width:185px;
}
/* FOOTER RULES */
#footer {
	clear: both;
	padding-top: 100px;
	text-align: right;
	margin-bottom:15px;
}
#footer #content {
	-moz-box-shadow: 1px 2px 4px #b5b2aa; /* FF3.5+ */
	-webkit-box-shadow: 1px 2px 4px #b5b2aa; /* Saf3.0+, Chrome */
	box-shadow: 1px 2px 4px #b5b2aa; /* Opera 10.5, IE 9 */
	behavior: url(/js/PIE.htc);
	background: none repeat scroll 0 0 #ff8200;
	color: #FFFFFF;
	line-height: 1.5;
	width: 95%;
	margin:0 auto;
	border:2px solid #fff;
	font-size:12px;
	font-weight:bold;
	padding-right:10px;
	position:relative;
	z-index:100;
}
#footer #content a {
	color:#fff;
	text-decoration:none;
}
#footer #content a:hover {
	text-decoration:underline;
}
/*Martijn added styles*/

.mainText {
	font-size:12px;
	line-height: 1.5em;
}
.spacer_2px {
	height: 2px;
}
.spacer_4px {
	height: 4px;
}
.spacer_6px {
	height: 6px;
}
.mirror {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}


/* RATING CSS *//
