/* ################################################### */
/* # version:   1.1		                               # */
/* # author:    A. Kaasschieter | Ibuildings         # */
/* # e-mail:    info@ibuildings.nl                   # */
/* # website:   http://www.ibuildings.nl             # */
/* ################################################### */



/* GLOBAL STYLES */
/* ################################################### */

body
{
  background: url(../images/body_bg.gif);
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 0.8em;
}

/* START STYLING TOPNAVIGATIE ESTA */

table.topnavigatie
{
	font: normal 12px Verdana,Arial,Helvetica,sans-serif;
	padding: 0px;	
	background-color: #7F7F7F;			/* Aanpasbaar */	
	margin: 0px 0px 0px 0px;
	color: #ffffff;
}

table.topnavigatie a
{
	font:normal 12px Verdana,Arial,Helvetica,sans-serif;
	text-decoration:none;
	color: #ffffff;
}

table.topnavigatie td
{
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-align: center;	
}

td.topnavigatie_link, td.topnavigatie_linkout
{
	border-top: solid 1px #7F7F7F;		/* Aanpasbaar */
	border-bottom: solid 1px #7F7F7F;		/* Aanpasbaar */
	border-right: solid 1px #ffffff;
}

td.topnavigatie_linkover
{	
	background-color: #ffffff; 
	border-top: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;
	border-right: solid 1px #ffffff;
}

td.topnavigatie_linkover a 
{
	color: #7F7F7F;				/* Aanpasbaar */
}

table.topnavigatie table#navigatie-links td:hover {cursor:pointer;} 
table.topnavigatie table#navigatie-links td {border-right:solid 1px #ffffff;}
table.topnavigatie table#navigatie-links td#topnavigatie_first {border-left:solid 1px #ffffff;}

/* EINDE STYLING TOPNAVIGATIE */





#siteTable
{
	width: 948px;
	border: none;
	position: relative;	
}

#header
{
  padding-top: 11px;
  color: #444444;
}

#headerTop
{
  height: 11px;
  background: url(../images/header_top.gif) no-repeat left top;
  font-size: 0;
}

#headerTop .right
{
	float: right;
	width: 9px;
	height: 11px;
	background: url(../images/header_top_right.jpg) no-repeat right top;
}

#headerContent
{
  position: relative;
  height: 70px;
  background: #FFFFFF;
}

#headerContent .logo
{
  display: block;
  float: left;
  background: url(../images/header_logo.jpg) no-repeat left top;
  width: 228px;
  height: 70px;
  margin-left: 10px;
}

#headerContent .banner
{
  display: block;
  float: left;
  background: url(../images/banner_top.jpg) no-repeat left top;
  width: 468px;
  height: 60px;
  margin-left: 12px;
}

.bannerRight
{
  position: absolute;
  top: 23px;
  width: 120px;
  padding-left: 10px;
  border: none;
}

.bannerRight img
{
	border: none;
}

* html .bannerRight
{
	right: -130px;
}

#headerStatus
{
  background: #7f7f7f;
  padding: 3px 10px 3px 14px;
  color: #FFFFFF;
}

#headerStatusTable        { width: 100%; height: 13px; }
#headerStatusTable .left  { text-align: left; }
#headerStatusTable .right { text-align: right; }

.search
{
  position: absolute;
  width: 50px;
  right: 64px;
  top: 7px;
  z-index: 10;
}

* html .search
{
	right: 17px;
}

.search #searchTable .searchbox input
{
  width: 90px;
  border: 1px solid #444444;
  padding: 1px;
}

.search #searchTable .searchbutton
{
  padding: 5px 0 0 0;
}

.search #searchTable .searchbutton a
{
  display: block;
  width: 94px;
  height: 24px;
  background: url(../images/bt_zoek.jpg) no-repeat left top;
}



/* MENU STYLES */
/* ################################################### */


#siteMenu
{
  width: 120px;
  background: url(../images/wrapper_bg.gif) repeat-y left top;
  vertical-align: top;
}

#menu
{
  width: 120px;
  float: left;
  margin: 0 5px 0 5px;
  color: #444444;
}

.menuBlock
{
  padding: 5px 0 5px 7px;
}

* html .menuBlock
{
  padding: 5px 0 5px 3px;
}

.menuBlock a
{
  display: block;
  font-weight: bold;
  color: #FFFFFF;
  padding: 0 0 0 14px;
  background: url(../images/menulink.gif) no-repeat left 2px; 
  letter-spacing: -1px;
  text-decoration: none;
  cursor: pointer;
}

.menuBlock a:hover
{
  text-decoration: underline;
}

#menu h4, #menu h4 a
{
  text-transform: uppercase;
  color: #000000;
  font-size: 1em;
  margin-bottom: 4px;
  background: none;
  padding: 0;
  text-decoration: none;
}

#siteContent
{
	background: #FFFFFF;
	padding: 13px;
	vertical-align: top;
}

#tableHome
{
  width: 100%; 
}

#tableHome td
{
  padding: 0 7px 8px 0;
  vertical-align: top;
}

#nieuwsbrief input
{
	width: 100px;
  border: 1px solid #444444;
  padding: 1px;
  margin-bottom: 3px;
  color: #444444;
}


/* PANEL STYLES */
/* ################################################### */


.panel
{
  position: relative;
}

.panel .paneltop
{
  position: relative;
  height: 36px;
  background: #FFFFFF url(../images/panel_top.jpg) no-repeat left top;
}

.panel .paneltop h1
{
  display: block;
  float: left;
  padding: 10px 10px 0 7px; 
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: bold;
  white-space: nowrap;
  font-size: 1em;
  margin: 0;
}

.panel .paneltop .text
{
  display: block;
  float: left;
  padding: 10px 10px 0 7px; 
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: bold;
  white-space: nowrap;
  font-size: 1em;
  margin: 0;
}

.panel .paneltop .paneltopright
{
  display: block;
	float: right;
  height: 36px;
  width: 30px;
  background: url(../images/panel_topright.jpg) no-repeat right top;
}

.panel .panelcontent
{
  padding: 2px 5px 5px 7px;
  border-left: 1px solid #ed1c24;
  border-right: 1px solid #ed1c24;

  color: #444444;
}

.panel .panelcontent a,
.panel .panelcontent a:visited
{
	display: block;
	color: #444444;
}

.panel .panelcontent a:hover
{
	text-decoration: none;
}

.panel .panelcontent .thumblink img
{
	position: relative;
	border: 1px solid #616060;
	width: 30px;
	margin-right: 5px;
	clear: both;
	margin-bottom: 5px;
}

.panel .panelfooter
{
	display: none;
  position: absolute;
  bottom: 15px;
  right: 7px;
  text-align: right;
}

.panel .panelfooter img
{
	border: none;
}

.panel .panelfooter a,
.panel .panelfooter a:visited 
{
  font-weight: bold;
  color: #444444;
}

.panel .panelfooter a:hover
{
	text-decoration: none;
}

.panel .panelbottom
{
  position: relative;
  height: 11px;
  background: url(../images/panel_bottom.gif) no-repeat left top;
}

.panelbottomright
{
  display: block !important;
  float: right;
  height: 11px;
  width: 9px;
  background: url(../images/panel_bottomright.gif) no-repeat left top;
}

.preview
{
	padding: 0;
	background: #FFFFFF;
	border: 1px solid #444444;
	color: #000000;
	width: 161px;
	height: 122px;
}

.panel h5
{
	color: #F31F1E;
	font-size: 1em;
	font-weight: bold;
}


/* CATEGORYPANEL STYLES */
/* ################################################### */


.categoryPanel .panelcontent
{
  padding: 2px 5px 25px 7px !important;
  border-left: 1px solid #ed1c24;
  border-right: 1px solid #ed1c24;

}

.categoryPanel .paneltop a
{
  color: #fff;
  text-decoration: none;
}

.categoryPanel .panelfooter
{
	display: block !important;
  position: absolute;
  bottom: 15px;
  right: 7px;
  text-align: right;
}


/* RATING */
/* ################################################### */


.gamerating
{
	position: absolute;
	top: 9px;
	left: 7px;
	height: 16px;
	width: 80px;
	float: left;
}

.starOff
{
	display: block;
	position: relative;
	float: left;
	width: 14px;
	height: 16px;
	background: url(../images/star_off.gif) no-repeat left top;
}

.starOn
{
	display: block;
	position: relative;
	float: left;
	width: 14px;
	height: 16px;
	background: url(../images/star_on.gif) no-repeat left top;
}



/* GAMEPANEL STYLES */
/* ################################################### */



.gamePanel				{	min-width: 161px; }
* html gamePanel	{	width: 161px; }

.gamePanel .panelcontent img
{
	max-width: 161px;
	width: 161px;
}

.gamePanel .panelcontent
{
  padding: 2px 0px 37px 0px !important;
}

.gamePanel .panelfooter
{
	display: block;
  position: absolute;
  bottom: 15px !important;
  right: 7px;
  left: 7px;
  text-align: right;
}

.btRemove
{
	display: block;
	float: right;
	width: 25px;
	height: 30px;
  background: url(../images/bt_remove.jpg) no-repeat left top;
}

.btPlay
{
	display: block;
	float: right;
	width: 60px;
	height: 30px;
	margin-left: 7px;
  background: url(../images/bt_play.jpg) no-repeat left top;
}

.age
{
	display: block;
	padding: 3px 0 0 0;
	float: left;
	width: 20px;
	height: 30px;
}

.btPlay span, .btRemove span
{
	display: none;
}

.gametext
{
	padding: 7px;
	width: 140px;
	color: #444444;
}



/* GAME DETAIL PANEL */
/* ################################################### */


.detailPanel h1
{
  display: block;
  float: left;
  padding: 9px 10px 0 7px !important; 
  text-transform: uppercase;
  color: #FFFFFF !important;
  height: 26px;
  font-weight: bold;
}

.detailPanel .preloader .loading
{
  width: 317px;
  height: 20px;
  margin: auto;
  background: url(../images/loading.gif) no-repeat left top;
}


.detailPanel .preloader .wrapper
{
  width: 175px;
}

.detailPanel .preloader .wrapper .skipaction
{
  float:  left;
}

.detailPanel .preloader .wrapper .countdown
{
  float:  right;
}

.detailPanel .game
{
	text-align: center;
	margin-bottom: 10px;
}

.detailPanel a				{	color: #FFFFFF; }
.detailPanel a:hover  { text-decoration: none;}

.detailPanel .panelcontent
{
  padding: 2px 0px 27px 0px !important;
}

.detailPanel .panelcontent .gamefunctions
{
	padding: 0 0 0 10px;
	display: block;
}

.detailPanel .panelcontent .gamefunctions a
{
	float: left;
	padding: 5px 6px 5px 20px;
}

.detailPanel .panelcontent .gamefunctions .balloon			{ background: url(../images/icon_balloon.gif) no-repeat 3px 4px; }
.detailPanel .panelcontent .gamefunctions .star					{ background: url(../images/icon_star.gif) no-repeat 3px 4px; }
.detailPanel .panelcontent .gamefunctions .envelope			{ background: url(../images/icon_envelope.gif) no-repeat 2px 4px; }
.detailPanel .panelcontent .gamefunctions .add					{ background: url(../images/icon_add.gif) no-repeat 2px 4px; }
.detailPanel .panelcontent .gamefunctions .bell					{ background: url(../images/icon_bell.gif) no-repeat 2px 4px; }
.detailPanel .panelcontent .gamefunctions .larger				{ background: url(../images/icon_larger.gif) no-repeat 2px 4px; }
.detailPanel .panelcontent .gamefunctions .smaller			{ background: url(../images/icon_smaller.gif) no-repeat 2px 4px; }
.detailPanel .panelcontent .gamefunctions .fullscreen		{ background: url(../images/icon_fullscreen.gif) no-repeat 2px 4px; }

.detailPanel .panelcontent .gamestats
{
	padding: 3px 0 0 12px;
}

.detailPanel .panelcontent .gamestats .starOn						{ background: url(../images/star2_on.gif) no-repeat left top; }
.detailPanel .panelcontent .gamestats .starOff					{ background: url(../images/star2_off.gif) no-repeat left top; }
.detailPanel .panelcontent .gamestats .label						{ display: block; float: left; }
.detailPanel .panelcontent .gamestats div								{ 	}

.detailPanel .panelcontent .gamestats .played,
.detailPanel .panelcontent .gamestats .sent,
.detailPanel .panelcontent .gamestats .ratinggraphics,
.detailPanel .panelcontent .gamestats .ratingsound,
.detailPanel .panelcontent .gamestats .ratingaddictive
{
	position: relative;
	margin-right: 13px;
	float: left;
}

.detailPanel .panelcontent .gamestats .ratinggraphics .stars,
.detailPanel .panelcontent .gamestats .ratingsound .stars, 
.detailPanel .panelcontent .gamestats .ratingaddictive .stars 
{
	width: 70px;
}

.detailPanel .panelbottom
{
	/*display: none;*/
}


/* NAVIGATION STYLES */
/* ################################################### */


.navPanel
{
  position: relative;
  margin: 0 7px 10px 0 !important;
  color: #FFFFFF;
  height: 21px;
}

.navPanel .paneltop
{
  background: url(../images/navleft.jpg) no-repeat left 6px;
}

.navPanel .topfilter
{
	position: absolute;
	right: 40px;
	top: 6px;
}

.navPanel a				{	color: #FFFFFF; }
.navPanel a:hover { text-decoration: none;}

.navPanel .text
{
  display: block;
  float: left;
  padding: 5px 10px 0 7px !important; 
  text-transform: uppercase;
  color: #FFFFFF;
  height: 26px;
  font-weight: bold;
}

.navPanel .panelcontent
{
	display: none !important;
}

.navPanel .paneltopright
{
  display: block;
  position: absolute;
  top: 6px !important;
  right: -1px !important;
  height: 21px !important;
  width: 6px !important;
  z-index: 20 !important;
  background: #ffffff url(../images/navright.jpg) no-repeat left top !important;
}

.navPanel .panelbottom
{
	display: none;
}

.navPanel2
{
  position: relative;
  margin: 0 7px 10px 0 !important;
  color: #FFFFFF;
  height: 21px;
}

.navPanel2 .paneltop
{
  background: url(../images/nav2left.jpg) no-repeat left 6px;
}

.navPanel2 .topfilter
{
	position: absolute;
	right: 40px;
	top: 6px;
}

.navPanel2 a				{	color: #FFFFFF; }
.navPanel2 a:hover { text-decoration: none;}

.navPanel2 .text
{
  display: block;
  float: left;
  padding: 5px 10px 0 7px !important; 
  text-transform: uppercase;
  color: #FFFFFF;
  height: 26px;
  font-weight: bold;
}

.navPanel2 .panelcontent
{
	display: none !important;
}

.navPanel2 .paneltopright
{
  display: block;
  position: absolute;
  top: 6px !important;
  right: -1px !important;
  height: 21px !important;
  width: 6px !important;
  z-index: 20 !important;
  background: #ffffff url(../images/nav2right.jpg) no-repeat left top !important;
}

.navPanel2 .panelbottom
{
	display: none;
}

.topfilter
{
	position: absolute;
	right: 40px;
}

.topfilter select
{
	display: block;
	font-size: 0.85em;
  margin: 1px 0 0 0;
  width: 130px;
}


/* REACTION STYLES */
/* ################################################### */


.reactionTable
{
	width: 676px;
	color: #444444;
}

* html .reactionTable
{
	width: 671px;
}

.reactionTable .left
{
	width: 50%;
}

.reactionTable .left .text input
{
	width: 108px;
	border: 1px solid #444444;
	padding: 1px;
	margin: 0;
	color:  #444444;
}

.reactionTable .left .text textarea
{
	width: 330px;
	border: 1px solid #444444;
	padding: 1px;
	margin: 0;
	color: #444444;
}

.reactionTable .left .button
{
	padding-bottom: 1px !important;
}

.reactionTable .left .reactionform td
{
	vertical-align: middle !important;
}

.reactionTable .left .ratingform td
{
	padding-right: 4px !important;
}

.reactionTable .left .ratingform
{
	width: 343px;
}

* html .reactionTable .left .ratingform
{
	width: 335px;
}

.btReageer
{
	display: block;
	float: right;
	width: 92px;
	height: 24px;
  background: url(../images/bt_reageer.jpg) no-repeat left top;
}

.btRate
{
	display: block;
	float: right;
	width: 70px;
	height: 22px;
	margin-right: 3px !important;
  background: url(../images/bt_rate.jpg) no-repeat right top;
}

.reactionTable .right
{
	width: 50%;
}

.reactionTable .right div.reactions
{
	border: 1px solid #444444;
	margin: 10px;
	height: 270px;
	overflow: auto;
	background: #FFFFFF;
}

.reactionTable .right div.reactions .post
{
	border: 1px solid #444444;
	margin: 10px;
	padding: 10px;
	width: 230px;
	background: url(../images/panel.gif) repeat-x left top;
}

.reactionTable .right div.reactions .post .label
{
	font-weight: bold;
}

.reactionTable .right div.reactions .post .postfooter
{
	margin-top: 15px;
	padding-bottom: 10px;
}

.reactionTable .right div.reactions .post .myrating
{
	margin-top: 20px;
	width: 165px;
	font-weight: bold;
}

.reactionTable .right div.reactions .post .average
{
	white-space: nowrap;
	font-weight: bold;
	width: 100%;
}

.myrating td
{
	padding-bottom: 2px !important;
	white-space: nowrap;
}

.myrating .starOff2
{
	display: block;
	float: left;
	width: 14px;
	height: 16px;
	background: url(../images/star2_off.gif) no-repeat left top;
}

.myrating .starOn2
{
	display: block;
	float: left;
	width: 14px;
	height: 16px;
	background: url(../images/star2_on.gif) no-repeat left top;
}


/* SEND A FRIEND */
/* ################################################### */


.sendfriendTable
{
	width: 676px;
	color: #444444;
}

* html .sendfriendTable
{
	width: 671px;
}

.sendfriendTable .left
{
	width: 50%;
}

.sendfriendTable .text input
{
	width: 148px;
	border: 1px solid #444444;
	padding: 1px;
	margin: 0;
	color:  #444444;
}

.sendfriendTable .text textarea
{
	width: 280px;
	border: 1px solid #444444;
	padding: 1px;
	margin: 0;
	color: #444444;
}

.sendfriendTable .left .button
{
	padding-bottom: 1px !important;
}

.sendfriendTable .left .sendfriendform td
{
	vertical-align: middle !important;
}

.sendfriendTable .left .sendfriendform td
{
	padding-right: 4px !important;
}

.sendfriendTable .left .sendfriendform
{
	width: 343px;
}

* html .sendfriendTable .left .sendfriendform
{
	width: 335px;
}

.btSend
{
	display: block;
	float: right;
	width: 120px;
	height: 23px;
	margin-right: 3px !important;
  background: url(../images/bt_verstuur.jpg) no-repeat right top;
}


/* FOOTER STYLES */
/* ################################################### */


#siteFooter a
{
  color: #444444;
}

#siteFooter #footerTable
{
  width: 100%;
  color: #444444;
  border-left: 5px solid #FFFFFF;
  border-right: 5px solid #FFFFFF;
  background: #e3e3e3;
}

#siteFooter #footerTable .left
{
  padding-left: 15px;
}

#siteFooter #footerTable .center
{
  padding-top: 15px;
}

#siteFooter #footerTable .ashomepage
{
  display: block;
  width: 120px;
  height: 77px;
  background: url(../images/ashomepage.jpg) no-repeat left top;
}

#siteFooter #footerTable .bookmark
{
  display: block;
  width: 120px;
  height: 77px;
  float: right;
  background: url(../images/bookmark.jpg) no-repeat 0px top;
}

.footerBottom 
{
  height: 9px;
  font-size: 1px;
  background: url(../images/footerbottom.jpg) no-repeat left top;
}

.footerBottomRight
{
	height: 9px;
	width: 13px;
	float: right;
  background: url(../images/footerbottomright.jpg) no-repeat right top;
}

/* GLOBAL FORM */
/* ################################################### */


form 
{
  margin: 0;
  padding: 0;
  display: inline;
}
 
input, select, textarea 
{
  font: 1em arial, helvetica, sans-serif;
}
 
textarea 
{
  line-height: 1.25;
}
 
label 
{
  cursor: pointer;
}


/* ERRORS */
/* ################################################### */

.errors 
{
	font-weight: bold;
	color: red;
}

INPUT.error, TEXTAREA.error 
{ 
	border: 1px solid red !important;
}


/* GLOBAL CLASSES */
/* ################################################### */


.clear        { clear: both; }
 
.floatleft    { float: left; }
.floatright   { float: right; }
 
.textleft     { text-align: left; }
.textright    { text-align: right; }
.textcenter   { text-align: center; }
.textjustify  { text-align: justify; }
 
.bold         { font-weight: bold; }
.italic       { font-style: italic; }
.underline    { border-bottom: 1px solid; }
.highlight    { background: #ffc; }
 
.imgleft      { float: left; margin: 4px 10px 4px 0; }
.imgright     { float: right; margin: 4px 0 4px 10px; }
 
.nopadding    { padding: 0; }
.noindent     { margin-left: 0; padding-left: 0; }
.nobullet     { list-style: none; list-style-image: none; }

.hidden       { display: none; }