/* Footer */

/* IMPORTANT COLORS 
Yellow: #ECB731   //Uit background moet zijn #F1C23F
Black: #000000
White: #FFFFFF
MenuBackground: #F9E3AC
*/

body 
{
  border:none;
  padding:0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-family: Helvetica;
  font: 16px helvetica,sans-serif;
  background: url("../images/BackgroundCross.png") center ;
}


.page
{
  width: 100%;
  height: 100%;
}

.topbar
{
  width: 100%;
  height: 30px;
  background: #F1C23F;
  border-bottom: 2px solid #FFFFFF;
}

.topbarContent
{
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

.logo
{
  font-size: 24px;
  font-weight: bold;
  color: #FFFFFF;
  float: left;
  width: 300px;
  height: 30px;
  text-transform: uppercase;
  margin-left: 10px;
  cursor: pointer;
}

.topbarButtons
{
  float: right;
  height: 30px;
  font-weight: bold;
}

.facebook
{
  float: left;
  padding: 5px 5px 0px 5px;
  cursor:pointer;
}

.twitter
{
  float: left;
  padding: 5px 5px 0px 5px;
  cursor:pointer;
}
.news
{
  float: left;
  padding: 5px 5px 0px 5px;
  cursor:pointer;
}

.pagecontent
{
  //background: url("../images/BackgroundCross.png") repeat center;
  width: 100%;
  height: 700px;
}

.content
{
  height: 700px;
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

.contentBlock
{
  width: 1024px;
  height: 405px;
  margin-left: auto;
  margin-right: auto;
}
.contentBlockLeft
{
  float: left;
  width: 500px;
  height: 500px;
  margin-top: 60px;
}

.contentBlockRight
{
  color: white;
  float: right;
  width: 500px;
  height: 500px;
  margin-top: 60px;
}

.clickable
{
  cursor: pointer;
}

.whiteStripes
{
  margin-top: 31px;
  background: url("../images/WhiteStripes.png");
  width: 493px;
  height: 27px;
}

.blackStripes
{
  float: left;
  background: url("../images/BlackStripesMirror2.png");
  width: 493px;
  height: 27px;
  margin-top: 2px;
  margin-bottom: 3px;
}

.blackStripesBox
{
  float: left;
  width: 500px;
  height: 27px;
  margin-top: 2px;
  margin-bottom: 3px;
}

.blackStripesSmallBox
{
  float: left;
  width: 450px;
  height: 27px;
}

.blackStripesSmall
{
  //float: left;
  background: url("../images/blackStripesSmallMirror.png");
  width: 450px;
  height: 26px;
}

.blackStripesSmallFillerLeft
{
  position: relative;
  left: 0px;
  top: -26px;
  background: url("../images/blackStripesSmallFillerLeft.png");
  width: 22px;
  height: 26px;
  z-index: 10;
}
.blackStripesSmallFillerMiddle
{
  position: relative;
  left: 22px;
  top: -52px;
  background: url("../images/blackStripesSmallFillerMiddle.png");
  background-repeat: repeat-x;
  width: 1px;
  height: 26px;
  z-index: 10;
}
.blackStripesSmallFillerRight
{
  position: relative;
  left: 23px;
  top: -78px;
  background: url("../images/blackStripesSmallFillerRight.png");
  width: 23px;
  height: 26px;
  z-index: 10;
}

.blackStripesSmallFillerText
{
  float: right;
  padding-top: 2px;
  text-indent: 18px;
  font-weight: bold;
}

.blackStripesNumber
{
  height: 27px;
  //width: 20px;
  float: left;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
}

/* Start page */

.startText
{
  color: #FFFFFF;
  font-size: 120px;
  font-weight: bold;
  width: 500px;
  height: 120px;
  text-transform: uppercase;
  margin-top: -15px;
}

.startTextBlack
{
  float: left;
  color: #000000;
  font-size: 140px;
  font-weight: bold;
  width: 85px;
  height: 150px;
  text-transform: uppercase;
  margin-top: -15px;
}

.startTextLeerGoImage
{
  margin-top: -6px;
  float: left;
  width: 149px;
  height: 148px;
  background: url("../images/1.png");
}

.startTextIn10MinImage
{
  margin-top: -6px;
  float: right;
  width: 149px;
  height: 148px;
  background: url("../images/2.png");
}

.startTextGoImage
{
  float: left;
  height: 110px;
  width: 250px;
}


.contentBlockRightStartMenu
{
  height: 370px;
  width: 500px;
}

.contentBlockRightStartMenuBlackStone
{
  height: 136px;
  width: 136px;
  background: url("../images/10.png");
}

.contentBlockRightStartMenuWhiteStone
{
  height: 136px;
  width: 136px;
  background: url("../images/12.png");
}

.buttonFloatRight 
{
  float: right !important;
  margin-right: 8px;
}

.stoneTopLeft
{
  position:relative;
  left: 55px;
  top: 65px;
}
.stoneTopRight
{
  position:relative;
  left: 325px;
  top: -70px;
}
.stoneBottomMiddle
{
  position:relative;
  left: 192px;
  top: -70px;
}

/* Menu Page */

.menuImage
{
  margin-left: 30px;
  height: 30px;
  width: 32px;
  float: left;
  background: url("../images/menuIcon.png");
}
.menuHeader
{
  padding-top: 2px;
  margin-left: 10px;
  width: 420px;
  height: 30px;
  font-size: 22px;
  font-weight: bold;
  float: left;
  color: #FFFFFF;
  //background: #F1C23F;
}

.menuHeaderBig
{
  padding-top: 2px;
  margin-left: 10px;
  width: 430px;
  height: 30px;
  font-size: 22px;
  font-weight: bold;
  float: left;
  color: #FFFFFF;
  //background: #F1C23F;
}

.whiteStripesMenu
{
  margin-top: 0px;
  float: left;
  margin-bottom: 1px;
}

.menuBox
{
  float: left;
  height: 410px;
  width: 470px;
  padding-top: 15px;
  margin-left: 1px;
  background: #F9E3AC;
}

.menuItem
{
  float: left;
  width: 470px;
  height: 35px;
  padding-top: 5px;
  cursor:pointer;
}
.menuItem:hover
{
  background: #FFFFFF;
}
.menuItemVideo
{
  margin-left: 30px;
  height: 27px;
  width: 27px;
  float: left;
  background: url("../images/Play.png");
}
.menuItemVideoDone
{
  background: url("../images/PlayDone.png");
}
.menuItemProblems
{
  margin-left: 33px;
  margin-top: 3px;
  margin-right: 4px;
  height: 21px;
  width: 21px;
  float: left;
  background: url("../images/ProblemSet.png");
}
.menuItemProblemsDone
{
  background: url("../images/ProblemSetDone.png");
}
.menuItemItem
{
  margin-left: 33px;
  margin-top: 3px;
  margin-right: 4px;
  height: 21px;
  width: 21px;
  float: left;
  background: url("../images/Uitgang.png");
}
.menuItemName
{
  margin-top: 2px;
  margin-left: 15px;
  font-size: 18px;
  font-weight: bold;
  float: left;
  color: #000000;
}
.menuItemNameDone
{
  color: #999999;
}


/* video Page */

.videoPlayer
{
  margin-top: 32px;
}

.infoBox
{
  float: left;
  height: 302px;
  width: 450px;
  padding-top: 15px;
  margin-left: 1px;
  margin-right: 25px;
  background: #F9E3AC;
  color: #000000;
  padding-left: 10px;
  padding-right: 10px;
}

.infoBoxTop
{
  float: left;
  height: 135px;
  width: 450px;
  background: #F9E3AC;
  color: #000000;
}

.infoBoxBottom
{
  float: left;
  height: 130px;
  width: 450px;
  border-top: 1px solid;
  border-color: #ffffff;
  background: #F9E3AC;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
}

.problemCorrectIcon
{
  margin-top: 2px;
  margin-right: 5px;
  height: 27px;
  width: 27px;
  float: left;
  background: url("../images/correct.png");
}

.problemIncorrectIcon
{
  margin-top: 2px;
  margin-right: 5px;
  height: 27px;
  width: 27px;
  float: left;
  background: url("../images/incorrect.png");
}

.videoIcon
{
  margin-left: 30px;
  height: 27px;
  width: 27px;
  float: left;
  background: url("../images/6.png");
}
.problemIcon
{
  margin-left: 33px;
  margin-top: 3px;
  margin-right: 4px;
  height: 21px;
  width: 21px;
  float: left;
  background: url("../images/7.png");
}

/* problems page */
.goPlayerBox
{
  margin-top: 34px;
  margin-left: 120px;
}


.contentBlockRightHeader
{
  font-size: 28px;
  width: 300px;
  border: none;
  padding-top: 10px;
}

.contentBlockRightInfo
{
  width: 300px;
  margin-top: 5px;
  border: none;
}

.playerChoiceRight
{
  float: right;
  width: 300px;
  height: 30px;
  margin-top: 5px;
  color: #FBB900;
  background-color: #1D1D1B;
  border: 1px solid #333333;
  text-indent:10px;
  padding-top:10px;
}

.playerChoiceRight:hover
{
  float: right;
  width: 300px;
  height: 30px;
  margin-top: 5px;
  border: 1px solid #333333;
  text-indent:10px;
  padding-top:10px;
 
  color: #FBB900;
  background-color: #3F3F3B;
  cursor:pointer;
}

.bottombarGradient
{
  margin-top: -5px;
  background: url("../images/gradient2.png") repeat-x;
  width: 100%;
  height: 5px;
}

.bottombar
{
  width: 100%;
  height: 150px;
  background: #E9E9E9;
}

/* end page */
.infoBoxTopEndPage
{
  float: left;
  height: 80px;
  width: 450px;
  background: #F9E3AC;
  color: #000000;
}

.infoBoxBottomEndPage
{
  float: left;
  height: 220px;
  width: 450px;
  border-top: 1px solid;
  border-color: #ffffff;
  background: #F9E3AC;
  color: #000000;
}


.infoBoxBottomItem
{
  width: 450px;
  height: 65px;
  cursor: pointer;
}

.infoBoxBottomItem:hover
{
  background-color: #ffffff;
}

.infoBoxBottomText
{
  float: left;
  width: 300px;
  height: 55px;
  padding-top: 10px;
}

.goBondImage
{
  float: left;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  width: 100px;
  height: 57px;
  background: url("../images/NGB.png");
  background-repeat: no-repeat;
  background-position:center;
}

.image321Go
{
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 2px;
  float: left;
  width: 100px;
  height: 60px;
  background: url("../images/321GO.png");
  background-repeat: no-repeat;
  background-position:center;
}

.goKGSImages
{
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  float: left;
  width: 100px;
  height: 45px;
  background: url("../images/kgs.png");
  background-repeat: no-repeat;
  background-position:center;
}

/* contact page */
.infoBoxBottomItemContact
{
  width: 450px;
  height: 40px;
}
.infoBoxBottomItemContactSmall
{
  width: 450px;
  height: 20px;
}

/* buttons */ 

.button
{
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  cursor: pointer;
  float: left;
  width: 150px;
  height: 50px;
  padding-top: 5px;
  font-size: 24px;
  font-weight: bold;
  background: #F1C23F;
  text-align: center;
  text-transform: uppercase;
}

.button:hover
{
  border: 3px solid #F1C23F;
  color: #F1C23F;
  background: #FFFFFF;
}

.leftButton
{
  margin-left: 25px;
}

.blackButton
{
  border: 3px solid #000000;
  color: #F1C23F;
  background: #000000;
}

.middleButton
{
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  margin-left: 20px;
}

.infoBoxButton
{
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  background: #F1C23F;
  cursor: pointer;
  float: right;
  width: 130px;
  height: 30px;
  padding-top: 3px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.infoBoxButton:hover
{
  border: 3px solid #F1C23F;
  color: #F1C23F;
  background: #FFFFFF;
}