@charset "utf-8";

html,
body 						{ width:100%; height:100%; }
body 						{ background-color:#111; margin:0; padding:0; }
body * 						{ font-family:Arial, Geneva, sans-serif; }

/* HTML Elements */
h1							{ font-family:"Trajan Pro", "Trebuchet MS", Verdana, Arial; color:#fff; font-size:16px; font-weight:normal; margin:20px 0 10px; }
a 							{ color:#f00; outline:none; text-decoration:underline;}
a:hover						{ color:#ccc; }
a.activeGameLink			{ color:#fff; }
img							{ outline:none; }

a img {border: none;}

/* Form elements */
input[type=text],
input[type=password]		{ width: 149px; border:1px solid #666; background:#111; padding:3px; color:#fff; font-size:11px; height:14px; margin:3px 10px 10px 0; }
textarea					{ border:1px solid #666; background:#111; padding:3px; color:#fff; font-size:11px; margin:3px 10px 10px 0; }

/* Common classes */
.fleft						{ float:left; }
.fright						{ float:right; }
.backButton,
.greyButton					{ position:relative; width: 157px; border:1px solid #666; background:#111; font-size:11px; padding:3px 5px; margin:10px 0 0; color:#fff; cursor:pointer; outline: none; }
.redButton					{ position:relative; width: 157px; border:1px solid #FFF; background:#900; font-size:11px; padding:3px 5px; margin:10px 0 0; color:#fff; cursor:pointer; outline: none; }
.breaker,
.clear,
.break 						{ clear:both;height:0px; line-height:0px; }
.stbTpl 					{ display: none; }
.centerButton				{ text-align:center; }
.bottom						{ margin-bottom:20px; }
.top						{ margin-top:15px; }
.offset10					{ position: relative; margin: 10px; }
.offsetSteps				{ margin: 10px 0 0; }
.flashContainer 			{ width:100%; }
.border						{ border:solid 1px white; }
.inputOffset				{ padding: 0 0 10px; }

#backGroundScroll			{ position:absolute; width:100%; height:300px; top:400px; z-index:1; overflow:hidden;}

/* wrapper */
#wrapper					{ position:relative; width:100%; background:url(../images/bodyBackground.png) no-repeat bottom center; z-index: 2;}

/* layer 01 */
#layer01 					{ position:absolute; bottom:200px; width:100%; height:150px;}

/* layer 02 */
#layer02 					{ position:relative;}
#contentContainer 			{ position:relative; width:800px; margin:20px auto 0; padding:0 0 50px; background:url(../images/contentContainerBackground.png) no-repeat top left #000; z-index:2;}
#contentContainer h2 		{ font-family:"Trajan Pro", "Trebuchet MS", Verdana, Arial; color:#fff; font-size:16px; font-weight:normal; margin:20px 0 0; padding:0;}
#header 					{ position:relative; width:800px; height:125px;}
#logo 						{ position:absolute; top:20px; left:20px;}

/* info */
#info 						{ position:absolute; top:20px; right:10px; height:66px; width: 160px; }
.phone 						{ position:relative; height:16px; padding:0 0 0 30px; color:#fff; font-size:12px; background:url(../images/phoneImage.png) no-repeat top left; line-height:18px;}
.signOn 					{ position:relative; min-height:15px; padding:7px 0; color:#f00; font-size:12px;}
.signOn a					{ text-decoration:none; }
.loggedIn					{ color:#fff; }
.search 					{ position:relative; height:21px; }
.search img					{ border:none; }
.search input				{ background:url(../images/search.png) no-repeat top left; width:126px; height:18px; padding:3px 0 0 3px; border:none; font-size:11px; color:#c2c2c2; font-style:italic; margin:0;}
.searchImage				{ float:right; padding:2px 0 0 4px; width:24px;}

/* menu */
#menu 						{ position:relative; width:800px; height:30px; background:url(../images/menuBackground.png) no-repeat top left; font-size:12px; z-index:500; }
#menu ul 					{ margin:0; padding:0;}
#menu li 					{ list-style-type:none; float:left; margin:0 20px; display:inline-block; position:relative;}
#menu a 					{ text-decoration:none; color:#fff; font-weight:bold; font-style:italic; height:30px; display:inline-block; line-height:25px;}
#menu a:hover,
#menu a.activePage			{ background:url(../images/menuHover.png) repeat-x bottom left;}

/* content */
#content 					{ position:relative; float:left; width:570px; padding:10px 20px 0 20px; color:#aaa; font-size:12px; background:url(../images/vr.png) repeat-y top right;}
.contentItem 				{ position:relative; width:580px; padding:0 0 25px 0; text-align:justify;}
.contentItem h1,
table h1					{ color:#fff; font-family:"Trajan Pro", Times New Roman, Verdana, Arial; font-size:20px; margin:0; padding:0; /*text-transform:uppercase;*/ font-weight:normal;}
.contentItem p 				{ margin:0; padding:0;}
.contentItemImg 			{ position:relative; float:left; width:126px;}
.contentItemImgLeft			{ padding:0; float:left;}
.contentItemText			{ position:relative; float:left; width:414px; padding:12px 20px 0;}
.contentItemTextLeft		{ padding:12px 0 0 0; width:414px; float:left;}

/* news */
#news 						{ position:relative; width:170px; padding:0 0 0 20px; margin:0 0 200px; float:left; color:#d7d7d7; font-size:11px;}
#news h2,#news h2 a			{ font-family:"Trajan Pro", "Trebuchet MS", Verdana, Arial; color:#f00; font-size:16px; font-weight:normal; margin:20px 0 0; padding:0;}
#news p						{ margin:0; padding:0;}
#news ol 					{ margin:0; padding:0 0 0 17px; color:#acacac; font-size:12px; font-weight:bold;}
#news a						{ color:#fff; text-decoration:none; font-weight:bold;}
#footer						{ position:relative; height:200px;}

/* layer 03 */
#layer03 					{ position:absolute; bottom:70px; width:100%; text-align:center; color:#464646; font-size:11px; z-index:100;}
#layer03 a					{ text-decoration:none; color:#f00; font-weight:bold;}
#layer03 a:hover			{ text-decoration:underline;}

/* avatar */
#avatarWrapper				{ position:absolute; width:100%; bottom:100px;}
#avatar						{ position:relative; width:800px; margin:0 auto;}
#layer04 					{ position:absolute; right:50px; bottom:5px; z-index:50;}
#layer05 					{ position:absolute; left:635px; bottom:-65px; z-index:2;}

/* thema */
#thema1 					{ position:absolute; right:780px; bottom:-35px; z-index:2;} /* linksonder */
#thema2 					{ position:fixed; z-index:1; width: 100%; top: 0; overflow: hidden; height: 100%; } /* achtergrond */
#thema3						{ position: absolute; z-index: 2; right: 780px; top: 40%;} /* linksmidden */
#thema4						{ position: absolute; z-index: 2; left: 780px; top: 0;} /* rechtsboven */
#thema5						{ position: absolute; z-index: 2; left: 780px; top: 40%;} /* rechtsmidden */
.backgroundReset			{ position:absolute; width:200%; left:-50%; text-align:center;}

/* contact */
#contactForm				{}
#contactForm 
input[type=text],
#contactForm 
input[type=password]		{ margin:3px 10px 2px 0; }

/* login */
#loginContainer				{ position:absolute;top:-10px; right:30px;z-index:100; color:#FFF}
#loginContainer input		{ border:solid 1px white; background-color:#CCC}
#loginContainer div			{ margin-left:3px}

#avatarViewer				{ width:250px; height:400px; overflow:hidden; position:relative; margin-top:10px; }

#avatarForm select,
.greySelect,
.greySelectSmall			{ border:1px solid #666666; background:#111; color:#fff; padding:3px; margin-top: 3px; width:160px; height:22px; }
.greySelectSmall			{ /*width:50px;*/ }
.faceImages,
.torsoImages,
.legsImages					{ position:relative; width:250px; float:left; overflow:hidden;}

#facesPrev,
#facesNext,
#torsoPrev,
#torsoNext,
#legsPrev,
#legsNext					{ position:absolute; z-index:150; cursor:pointer; width:21px; height:22px; }
#facesPrev					{ top:30px; left:0; background:url(../images/buttonLeft.png) no-repeat; }
#facesNext					{ top:30px; right:0; background:url(../images/buttonRight.png) no-repeat; }
#torsoPrev					{ top:110px; left:0; background:url(../images/buttonLeft.png) no-repeat; }
#torsoNext					{ top:110px; right:0; background:url(../images/buttonRight.png) no-repeat; }
#legsPrev					{ top:280px; left:0; background:url(../images/buttonLeft.png) no-repeat; }
#legsNext					{ top:280px; right:0; background:url(../images/buttonRight.png) no-repeat; }

.facesReset					{ position:absolute; top:0; z-index:0; }
.torsoReset					{ position:absolute; top:0; z-index:100; }
.legsReset					{ position:absolute; top:0; z-index:50; }

#productsContainer			{ position:relative; }
#productsContainer .product	{ margin:0 0 15px; position: relative; width: 100%; }
.productImage				{ width:150px; height:149px; position:relative; z-index:50;}
.productImageReset			{ position:absolute; width:120px; height:120px; right:0; top:3px; }
.productImageTitle			{ position:absolute; width:140px; bottom:10px; left:37px; z-index:100; color:#f00; font-weight:bold; z-index:100;}
.productImageOverlay		{ width:150px; height:149px; position:absolute; top:0; left:; background:url(../images/overlay.png) no-repeat top left; z-index:100;}
.productImageOverlay a		{ display:block; width:150px; height:149px; position:absolute; top:0; left:0; z-index:150;}
.productInfo				{ min-height:130px; width:400px;}
.productTitle				{ font-family:"Trajan Pro", "Trebuchet MS", Verdana, Arial; color:#f00; font-size:16px; height:24px; width:390px; padding:3px 0 0 10px;}
.productImageTitle a:hover	{ color:#f00;}
.productText				{ position:relative; width:390px;padding:0 0 20px 10px; }
.productOrder				{ position:absolute;bottom:-10px;right:10px;height:30px; line-height:30px; padding:0 0 0 10px; }
.productOrder				{ position:absolute;bottom:-10px;right:10px;height:30px; line-height:30px; padding:0 0 0 10px; }
.productReviewTitle			{ color:#FFF; font-weight:bold; }
.productReviews				{ margin:20px 0 0 0; }
.productReviewName			{ margin:0 0 10px 0; font-weight:bold; }
.productReviewReview		{}
.productReviewSpacer		{ border-bottom:dotted 1px white; width:90%; margin:20px 0 20px 0; }

#userOrder					{ position:relative; border:solid 1px #666; width:550px; padding:10px; }
.productOrderInfo			{ width:350px; margin: 0 0 0 20px; }

#userForm 					{}
#userForm div				{ margin:0 5px 5px 0; }

#userConfirmOrderDetails	{}

.productViewImage			{ margin:0 8px 8px 0; }

#pagination					{ text-align:center; }

#accountBlock				{ font-size:13px; }

#userActiveGamesBlock		{ margin:5px 0 10px 0}
#userGameSetupBlock			{ position:absolute; top:60px; left:300px; background:url(../images/avatarFill.png); padding:20px; width:240px; }
.createAvatarTitle			{ width:70px; display:block; float:left; line-height:21px;}
#userGameSetupBlock 
input[type=text] 			{ border:1px solid #666666; background:#111; color:#fff; padding:3px; width:152px; margin:0 0 5px;}
#avatarContainer			{ position:absolute;right:10px;top:0px; width:250px;height:500px;border:solid 1px white;; text-align:center;  padding-top:10px;}

#userAvatarContainer		{ background:#000; width:200px; }

#promoCodeLink				{}

/* Game categories */
#categories					{ margin:0; padding:0; list-style-type:none; }
#categories li				{ position:relative; float:left; display:block; width:150px; height:149px; margin:0 20px 10px 0; }
#categories li a			{ position:absolute; width:150px; height:149px; display:block; text-decoration:none; top:0; left:0; z-index:3; }
#categories li img			{ position:absolute; top:3px; right:0; z-index:0; }
#categories li span			{ position:absolute; bottom:10px; left:37px; z-index:2; color:#f00; text-decoration:none; font-weight:bold; }
.categoryOverlay			{ position:absolute; width:150px; height:149px; background:url(../images/overlay.png) no-repeat; z-index:1; }

/* Mijn account */
.my_avatar,
.my_info					{ position:relative; float:left; width: 185px; height: 216px; margin:0 20px 10px 0; }
.my_games					{ position:relative; float:left; width: 185px; height: 280px; margin:0 0 10px;}
.my_games_help				{ position:relative; float:left; width: 350px; margin:0 0 10px 15px;}
.my_avatar a				{ display:block; position:relative; background:url(../images/my_avatar.png); width:188px; height:185px; margin:15px 10px 0 0; color:#000; }
.my_games img				{ position:absolute; top: 32px; left: 32px; }
.my_games a					{ display:block; position:absolute; background:url(../images/my_games.png); width:185px; height:216px; color:#f00; top: 0; left: 0; }
.my_info a					{ display:block; position:relative; background:url(../images/my_info.png); width:174px; height:205px; color:#000; }
#accountBlock span			{ position:absolute; }
#accountBlock a				{ font-weight:bold; text-decoration:none; }
.my_avatar span				{ bottom:20px; left:30px; }
.my_games span				{ bottom:35px; left:40px; }
.my_info span				{ bottom:17px; left:24px; }

.productTitle				{ position: relative; }
.productTitle a				{ font-family:"Trajan Pro", "Trebuchet MS", Verdana, Arial; float:left; display:block; height:16px; line-height:16px; margin:0 20px 0 0; color:#fff; }
.ratingbase					{ position:absolute; width:100px; height:16px;float:right; background:url(../images/stars_blank.png) no-repeat left top; top:3px; right:0; }
.ratingorg					{ position:relative; height:16px; background:url(../images/stars.png) no-repeat left top; }

/* Submenu games */
#subGames					{ position:absolute; z-index:300; top:0; left:0; width:70px; min-height:30px; }
#subGamesOffset				{ position:relative; padding:10px; background:#111; border:1px solid #464646; width:90px; margin:30px 0 0; display:none; }
#subGames ul				{ margin:0; padding:0; list-style-type: none; }
#subGames ul li				{ clear:both; margin:0; padding:0; width: 130px; }
#subGames ul li a			{ font-size:11px; }

#subRules					{ position:absolute; z-index:300; top:0; left:0; width:70px; min-height:30px; }
#subRulesOffset				{ position:relative; padding:10px; background:#111; border:1px solid #464646; width:150px; margin:30px 0 0; display:none; }
#subRules ul				{ margin:0; padding:0; list-style-type: none; }
#subRules ul li				{ clear:both; margin:0; padding:0; width: 150px; }
#subRules ul li a			{ font-size:11px; }

.divTable 					{ }
.divTableHeader div 		{ font-weight:bold; float:left; padding:2px; margin:0 0 5px 0; }
.divTableBody 				{ background-color:#f00; }
.divTableBody div 			{ float:left; padding:2px; color:#fff; }
.divTableBody div a 		{ color:#000; }
.divTableRowEnd 			{ clear:both; height:0px; line-height:0px; }

.invite_header td			{ color: #fff; font-weight: bold; }

.zebra1 					{ background-color:#111; }
.zebra2 					{ background-color:#333; }

.diaryWrapper 				{ position:relative; width:200px; height:294px; float:left; margin:20px 70px 10px 0;}
.diaryLink 					{ position:absolute; top:0; left:0; width:200px; height:294px; z-index:150; }
.diaryOverlay 				{ position:absolute; top:0; left:0; width:200px; height:294px; background:url(../images/diary.png) no-repeat; z-index:50;}
.diaryImage 				{ position:absolute; width:120px; height:120px; top:30px; left:30px; z-index:0; }
.diaryInfo 					{ position:absolute; top:190px; left:20px; width:150px; z-index:100; text-align:center; }
.diaryTitle 				{ font-family:"Trajan Pro", "Trebuchet MS", Verdana, Arial; color:#f00; font-size:14px; font-weight:bold; margin:0;}
.diaryDate 					{ color:#000; font-size:9px;}

.loading 					{ background-image:url(../images/loader.gif); height:24px; width:24px; }
#ajaxResponse				{font-weight:bold}

/* used to hide template nodes */


.addresCrimetime			{ position:relative; width:600px; margin:0 auto; padding:10px 0 0; font-size:10px; color:#fff; }
#clock						{ font-size:14px;color:#fff; }
#clock div					{ float:left; }

#orderSteps					{ margin:15px 0 0; text-align:center; font-size:12px; }
#orderSteps	a				{ color:#fff; text-decoration:none; }
#orderSteps .active			{ color:#fff; border-bottom: 3px solid #b20000; padding: 0 0 5px; }

.faq						{ float: left; margin: 2px 0 0 20px; }
#language                   { position:absolute; right:15px; top:5px}

/* as long as flash game does not work: 
.play_flash_game {display: none;}
*/