/* ################################################### */
/* # 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;
  
}

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

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

#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 right top;
  width: 230px;
  height: 70px;
}

#headerContent .banner
{
  display: block;
  float: left;
  width: 468px;
  height: 60px;
  margin-left: 20px;
}

.bannerRight
{
  position: fixed; 
  border: none; 
  margin-left: 20px; 
  margin-top: 80px; 
  z-index: 100;
}

.bannerLeft
{
  position: fixed; 
  border: none; 
  margin-left: -130px; 
  margin-top: 80px; 
  z-index: 100;
}

#headerStatus
{
  background: #fffabb;
  padding: 3px 10px 3px 14px;
}

#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 #8c5f9a;
  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: #593867;
}

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

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

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

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

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

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

#tableHome
{
  width: 100%; 
}

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

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

/* BANNER IN GAME PAGINA */

a#remove-ad-link
{
  width: 13px;
  height:13px;
  display:block;
}

#tablebanner td
{
  padding: 0 0 0 0;
  vertical-align: top;
}

/* PANEL STYLES for normal panel */
/* ################################################### */


.panel
{
  position: relative;
}

.panel .paneltop
{
  position: relative;
  height: 36px;
  background: #FFFFFF url(../images/panel_top.gif) 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;
  overflow: hidden;
}

.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;
  position: absolute;
  right: 0;
  height: 36px;
  width: 30px;
  background: url(../images/panel_topright.gif) no-repeat right top;
}

.panel .panelcontent
{
  padding: 2px 5px 5px 7px;
  border-left: 1px solid #f1eff1;
  border-right: 1px solid #f1eff1;
  background: url(../images/panel.gif) repeat-x left top;
  color: #593867;
}

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

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

.panel .panelcontent .thumblink img
{
  border: 1px solid #616060;
  width: 30px;
  margin-right: 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: #845593;
}

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

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

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

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

.panel h5
{
  color: #845593;
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 5px 0;
}

/* PANEL STYLES for empty panel */
/* ################################################### */



.emptypanel .paneltop
{
  position: relative;
  height: 0px;
  background: #FFFFFF;
}

.emptypanel .paneltop h1
{
  display: block;
  float: left;
  padding: 0 0 0 0; 
  text-transform: uppercase;
  color: #593867;
  font-weight: bold;
  white-space: nowrap;
  font-size: 1em;
  margin: 0;
  overflow: hidden;
}

.emptypanel .paneltop .paneltopright
{
  display: block;
  position: absolute;
  right: 0;
  height: 0px;
  width: 0px;
  background: #FFFFFF;
}

.emptypanel .panelcontent
{
  padding: 0 0 0 0;
  border-left: 0px solid #f1eff1;
  border-right: 0px solid #f1eff1;
  background: #FFFFFF;
  color: #593867;
}

.emptypanel .panelbottom
{
  position: relative;
  height: 0px;
  background: #FFFFFF;
}

.emptypanel .panelbottom .panelbottomright
{
  display: block;
  float: right;
  height: 0px;
  width: 0px;
  background: #FFFFFF;
}


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


.categoryPanel .panelcontent
{
  padding: 2px 5px 25px 7px !important;
  border-left: 1px solid #f1eff1;
  border-right: 1px solid #f1eff1;
  background: url(../images/panel.gif) repeat-x left top;
}

.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: #845593;
}


/* 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 .bar
{
  border: 1px solid #ccc; 
  width: 320px; 
  height: 8px; 
  margin: auto; 
  color: orange;
}

.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;
  border: none !important;
}

.detailPanel .panelcontent #roadblock
{
  text-align: center;
}

.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.gif) 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.gif) 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.gif) 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.gif) 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: #593867;
}

* html .reactionTable
{
  width: 671px;
}

.reactionTable .left
{
  width: 50%;
}

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

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

.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 #replies
{
  width: 300px;
  height: 270px;
  margin: 10px;
  border: 1px solid #593867;
}

#replies 
{
  background: #fff; 
  padding: 0px;
  margin: 0px;
  overflow-y: auto;
}

#replies div.reactions
{
  margin: 5px;
}

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

#replies div.reactions .post .label
{
  font-weight: bold;
}

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

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

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

#replies div.reactions .navigation
{
  width: 230px;
  margin: 10px;
  color: #000;
  text-align: center;
}

#replies div.reactions .navigation a 
{
  color: #000;
  display: inline;
}

.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: #593867;
}

* html .sendfriendTable
{
  width: 671px;
}

.sendfriendTable .left
{
  width: 50%;
}

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

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

.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
{

}

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

#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.gif) 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;
}


/* DIALOG */
/* ################################################### */

#MB_overlay {
  position: absolute;
  margin: auto;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  background-color: #000!important;
}
#MB_overlay[id] { position: fixed; }

#MB_window {
  position: absolute;
  top: 0;
  border: 0 solid;
  text-align: left;
  z-index: 10000;
}

#MB_window[id] { position: fixed!important; }

#MB_frame {
  position: relative;
  background-color: #EFEFEF;
  height: 100%;
}

#MB_header {
  margin: 0;
  padding: 0;
}

#MB_content {
  padding: 6px .75em;
  overflow: auto;
}

#MB_caption {
  font: bold 100% "Lucida Grande", Arial, sans-serif;
  text-shadow: #FFF 0 1px 0;
  padding: .5em 2em .5em .75em;
  margin: 0;
  text-align: left;
}

#MB_close {
  display: block;
  position: absolute;
  right: 5px; top: 4px;
  padding: 2px 3px;
  font-weight: bold;
  text-decoration: none;
  font-size: 13px;
}

#MB_close:hover {
  background: transparent;
}

/* Color scheme */
#MB_frame {
  padding-bottom: 7px;
  -webkit-border-radius: 7px; 
  -moz-border-radius: 7px;
  border-radius: 7px;
}

#MB_window {
  background-color: #EFEFEF;
  color: #000;
  -webkit-box-shadow: 0 8px 64px #000; 
  -moz-box-shadow: 0 0 64px #000; 
  box-shadow: 0 0 64px #000;
  
  -webkit-border-radius: 7px; 
  -moz-border-radius: 7px;
  border-radius: 7px;
}

#MB_content { border-top: 1px solid #F9F9F9; }

#MB_header {
  background-color: #DDD;
  border-bottom: 1px solid #CCC;
}

#MB_caption { color: #000 }
#MB_close { color: #777 }
#MB_close:hover { color: #000 }


/* 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; }
#replynavigation { margin: 10px; }
#replynavigation a { display: inline; }