/* ################################################## */
/*  MADE BY: WWW.DIRECTBASING.COM                     */
/*  ALEX VAN DER VEGT                                 */
/* ################################################## */

/* ### GENERAL ### */
* { margin: 0px; padding: 0px; }
html, body { font-family: 'Trebuchet MS', Trebuchet; font-size: 11px; color: #000; }
input, select, textarea { font-family: 'Trebuchet MS', Trebuchet; font-size: 11px; color: #000; }
body { background: url('../images/bodyBg.png') #c1edfa repeat-x; }
img { border: 0px; display: block; }

/* ### GLOBAL CLASSES ### */
.clear { clear: both; height: 1px; }

/* ### WRAPPER ### */
#wrapper { display: block; position: relative; width: 100%; min-height: 100%; }

/* ### MAIN CONTAINER ### */
#mainCntr { margin: 0 auto; width: 990px; }
	
	/* ### HEADER CONTAINER ### */
	#headerCntr { margin-bottom: 10px; position: relative; width: 990px; height: 171px; background: url('../images/headerBg.png') no-repeat; }
	#headerCntr h1 { position: absolute; top: 10px; left: 25px; width: 216px; height: 49px; text-indent: -9999px; background: url('../images/jofl.png') no-repeat; }
	#headerCntr h3 { position: absolute; top: 55px; left: 20px; width: 235px; height: 36px; text-indent: -9999px; background: url('../images/providing.png') no-repeat; }
		
		/* ### MENU CONTAINER ### */
		#menuCntr { position: absolute; top: 128px; left: 10px; width: 710px; }
		#menuCntr ul { overflow: hidden; width: 710px; list-style: none; }
		#menuCntr li { margin-left: 1px; float: left; display: inline; font-size: 15px; }
		#menuCntr li a { display: block; float: left; height: 36px; line-height: 32px; font-weight: bold; text-decoration: none; color: #585321; }
		#menuCntr li a span { display: block; float: left; height: 36px; cursor: pointer; }
		#menuCntr li a span span { padding: 0px 10px 0px 10px; }
		#menuCntr li a:hover, #menuCntr li.selected a { color: #fff; background: url('../images/menuBg.gif') repeat-x; }
		#menuCntr li a:hover span, #menuCntr li.selected a span { background: url('../images/menuL.gif') no-repeat left; }
		#menuCntr li a:hover span span, #menuCntr li.selected a span span { background: url('../images/menuR.gif') no-repeat right; }
		
		/* ### TOP BOX ### */
		.topBox { position: absolute; top: 8px; left: 280px; width: 250px; }
		.topBox ul { overflow: hidden; width: 250px; list-style: none; }
		.topBox li { margin-right: 15px; float: left; display: inline; }
		.topBox li a { padding-left: 30px; float: left; display: block; height: 21px; line-height: 21px; font-size: 10px; text-decoration: none; color: #7b9096; background: no-repeat left; }
		.topBox li a:hover { text-decoration: underline; }
		
		.topBox li.delicious a { background-image: url('../images/delicious.gif'); }
		.topBox li.hyves a { background-image: url('../images/hyves.gif'); }
		.topBox li.digg a { background-image: url('../images/digg.gif'); }
		.topBox li.twitter a { background-image: url('../images/twitter.gif'); }
		
		/* ### ZOEK BOX ### */
		.zoekBox { position: absolute; top: 10px; right: 7px; width: 321px; }
		.zoekBox fieldset { overflow: hidden; width: 321px; border: 0px; }
		.zoekBox input.field { padding: 10px 10px 0px 10px; float: left; width: 251px; height: 26px; font-weight: bold; font-size: 13px; color: #424242; border: 0px; background: url('../images/fieldBg.gif') no-repeat; }
		.zoekBox input.submit { float: right; }
		
		/* ### AD BOX ### */
		.adBox { padding: 10px 0px 0px 10px; position: absolute; top: 78px; left: 720px; width: 251px; height: 71px; background: url('../images/adBg.gif') no-repeat; }
		
	/* ### NEW CONTAINER ### */
	#newCntr { margin-bottom: 10px; position: relative; width: 990px; height: 89px; background: url('../images/newBg.gif') no-repeat; }
	#newCntr ul { padding: 15px 0px 0px 20px; overflow: hidden; width: 970px; list-style: none; }
	#newCntr li { padding-right: 7px; float: left; display: inline; }
	#newCntr li a img { width: 70px; height: 60px; border: 1x solid #000000; }
	#newCntr a.button { position: absolute; top: 8px; right: 11px; z-index: 10; width: 106px; height: 71px; text-indent: -9999px; }
	
	/* ### CONTENT CONTAINER ### */
	#contentCntr { overflow: hidden; width: 990px; }
	#contentCntr div.blue { margin-right: 0px; }
	
	#contentCntr div.left { float: left; }
	#contentCntr div.right { float: right; }
		
		/* ### GAME BOX ### */
		.gameBox { margin: 0px 0px 9px 0px; position: relative; width: 990px; background: url('../images/largeBg.gif') repeat-y; }
		.gameBox div.top { padding: 0px 2px 10px 2px; background: url('../images/largeBottom.gif') no-repeat bottom; }
		.gameBox div.bottom { padding-top: 60px; overflow: hidden; width: 986px; background: url('../images/orangeTop.gif') repeat-x left 52px; }
		.gameBox h3 { position: absolute; top: 0px; left: 0px; width: 990px; height: 51px; text-indent: -9999px; background: url('../images/playgame.gif') no-repeat; }
		.gameBox img { padding: 20px 0px 20px 0px; }
		.gameBox .rowGames { margin-bottom: 10px; position: relative; width: 990px; height: 89px; padding-left: 10px; }
		.gameBox .rowGames ul { padding: 15px 0px 0px 20px; overflow: hidden; width: 970px; list-style: none; }
		.gameBox .rowGames li { padding-right: 7px; float: left; display: inline; }
		.gameBox .rowGames li a img { width: 70px; height: 60px; border: 1x solid #000000; }
		.gameBox .rowGames a.button { position: absolute; top: 8px; right: 11px; z-index: 10; width: 106px; height: 71px; text-indent: -9999px; }
		
		/* ### INFO BOX ### */
		.infoBox { margin: 0px 0px 9px 0px; position: relative; width: 990px; background: url('../images/largeBg.gif') repeat-y; }
		.infoBox div.top { padding: 0px 2px 10px 2px; background: url('../images/largeBottom.gif') no-repeat bottom; }
		.infoBox div.bottom { padding-top: 60px; overflow: hidden; width: 986px; background: url('../images/greenTop.gif') repeat-x left 52px; }
		.infoBox h3 { position: absolute; top: 0px; left: 0px; width: 990px; height: 51px; text-indent: -9999px; background: url('../images/information.gif') no-repeat; }
		.infoBox p { padding: 0px 10px 10px 10px; }
		.infoBox .catname { margin-bottom: 5px; font-size: 16px; color: #339900; }
		.infoBox .catname .catlink {  color: #006600; font-weight:bold; font-style: italic; }
		
		/* ### HOT BOX ### */
		.hotBox { margin: 0px 0px 9px 0px; float: left; position: relative; width: 657px; background: url('../images/hotBg.gif') repeat-y; }
		.hotBox .catname { margin-bottom: 5px; font-size: 16px; color: #e79898; }
		.hotBox .catname .catlink {  color: #d40000; font-weight:bold; font-style: italic; }
		.hotBox div.top { padding: 0px 2px 10px 2px; background: url('../images/hotBottom.gif') no-repeat bottom; }
		.hotBox div.bottom { padding-top: 60px; overflow: hidden; width: 653px; background: url('../images/hotTop.gif') repeat-x left 52px; }
		.hotBox h3 { position: absolute; top: 0px; left: 0px; width: 657px; height: 51px; text-indent: -9999px; background: url('../images/hot.gif') no-repeat; }
		.hotBox div.left { margin-left: 8px; float: left; display: inline; width: 314px; }
		.hotBox div.right { float: right; overflow: hidden; width: 320px; }
		.hotBox ul { overflow: hidden; width: 320px; list-style: none; }
		.hotBox li { margin-bottom: 8px; padding: 0px 8px 8px 8px; height: 72px; line-height: 21px; color: #ea9d9d; border-bottom: 1px dotted #e79898; }
		.hotBox li img { margin-right: 15px; padding: 10px 10px 12px 10px; float: left; width: 60px; height: 50px; background: url('../images/redPic.gif') no-repeat; }
		.hotBox li h2 { padding-top: 5px; font-size: 15px; font-weight: bold; color: #d40000; }
		.hotBox li h2 a { text-decoration: none; color: #d40000; }
		.hotBox li h2 a:hover { text-decoration: underline; }
		.hotBox a.button { margin-right: 8px; float: right; display: block; width: 122px; height: 27px; line-height: 27px; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 12px; color: #fff; background: url('../images/redButton.gif') no-repeat; }
		.hotBox a.button:hover { text-decoration: underline; }
		.hotBox fieldset { padding: 10px; position: relative; overflow: hidden; width: 294px; height: 89px; border: 0px; background: url('../images/fieldsetBg.gif') no-repeat; }
		.hotBox input.field { margin-bottom: 2px; padding: 5px 5px 0px 5px; width: 240px; height: 21px; font-size: 12px; color: #8a8a8a; border: 1px solid #e3a5a5; background: #fff; }
		.hotBox input.submit { position: absolute; top: 28px; left: 260px; }
		.hotBox h4 { padding-bottom: 10px; font-size: 15px; font-weight: bold; color: #d40000; }
		.hotBox a.head { position: absolute; top: 0px; left: 0px; z-index: 10; width: 155px; height: 42px; text-indent: -9999px; }
		
		/* ### THUMBS BOX ### */
		.thumbsBox { margin: 0px 9px 9px 0px; float: left; position: relative; width: 324px; background: url('../images/thumbsBg.gif') repeat-y; }
		.thumbsBox div.top { padding: 0px 2px 10px 2px; background: url('../images/thumbsBottom.gif') no-repeat bottom; }
		.thumbsBox div.bottom { padding-top: 60px; background: repeat-x left 52px; }
		.thumbsBox h3 { position: absolute; top: 0px; left: 0px; z-index: 5; width: 324px; height: 51px; text-indent: -9999px; background: no-repeat; }
		.thumbsBox ul { overflow: hidden; width: 320px; list-style: none; }
		.thumbsBox li { margin-bottom: 8px; padding: 0px 8px 8px 8px; height: 72px; line-height: 21px; border-bottom: 1px dotted #000; }
		.thumbsBox li img { margin-right: 15px; padding: 10px 10px 12px 10px; float: left; width: 60px; height: 50px; background: no-repeat; }
		.thumbsBox li h2 { padding-top: 5px; font-size: 15px; font-weight: bold; }
		.thumbsBox li h2 a { text-decoration: none; }
		.thumbsBox li h2 a:hover { text-decoration: underline; }
		.thumbsBox a.button { margin-left: 8px; display: block; height: 27px; line-height: 27px; text-align: center; text-decoration: none; text-transform: uppercase; font-size: 12px; color: #fff; background: no-repeat; }
		.thumbsBox a.button:hover { text-decoration: underline; }
		.thumbsBox a.head { position: absolute; top: 0px; left: 0px; z-index: 10; height: 42px; text-indent: -9999px; }
		
		.orange div.bottom { background-image: url('../images/orangeTop.gif'); }
		.orange h3 { background-image: url('../images/action.gif'); }
		.orange li img { background-image: url('../images/orangePic.gif'); }
		.orange li { color: #e3b27e; border-color: #f27d00; }
		.orange li h2, .orange li h2 a { color: #a85700; }
		.orange a.button { width: 144px; background-image: url('../images/orangeButton.gif'); }
		.orange a.head { width: 114px; }
		
		.green div.bottom { background-image: url('../images/greenTop.gif'); }
		.green h3 { background-image: url('../images/arcade.gif'); }
		.green li img { background-image: url('../images/greenPic.gif'); }
		.green li { color: #acc249; border-color: #9fc701; }
		.green li h2, .green li h2 a { color: #86a300; }
		.green a.button { width: 144px; background-image: url('../images/greenButton.gif'); }
		.green a.head { width: 114px; }
		
		.pink div.bottom { background-image: url('../images/pinkTop.gif'); }
		.pink h3 { background-image: url('../images/puzzle.gif'); }
		.pink li img { background-image: url('../images/pinkPic.gif'); }
		.pink li { color: #ec94c4; border-color: #e183b6; }
		.pink li h2, .pink li h2 a { color: #de0c7e; }
		.pink a.button { width: 144px; background-image: url('../images/pinkButton.gif'); }
		.pink a.head { width: 108px; }
		
		.blue div.bottom { background-image: url('../images/blueTop.gif'); }
		.blue h3 { background-image: url('../images/shooting.gif'); }
		.blue li img { background-image: url('../images/bluePic.gif'); }
		.blue li { color: #8ed8f0; border-color: #2eb2db; }
		.blue li h2, .blue li h2 a { color: #1fadda; }
		.blue a.button { width: 144px; background-image: url('../images/blueButton.gif'); }
		.blue a.head { width: 145px; }
	
	/* ### FOOTER CONTAINER ### */
	#footerCntr { padding: 120px 0px 0px 10px; width: 980px; height: 80px; background: url('../images/footerBg.gif') no-repeat; }
	#footerCntr p { padding: 0px 0px 10px 5px; font-size: 15px; font-weight: bold; color: #2eb2db; }
	#footerCntr ul { overflow: hidden; width: 600px; list-style: none; }
	#footerCntr li { float: left; display: inline; font-size: 12px; color: #2eb2db; }
	#footerCntr li a { padding: 0px 5px 0px 5px; color: #2eb2db; }
	#footerCntr li a:hover { text-decoration: none; }