﻿html
{
  background: url(/img/bg_main.png) repeat-x #DBFA54;
  height: 100%;
}

body
{
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS' , monospace, Arial;
  height: 100%;
  position: relative;
}

img
{
  border: 0;
}

#otherSite
{
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 25px;
  left: 0;
  display: none;
  background: #fff;
}
.otherSite #otherSite
{
  display: block;
}
.otherSite .bgWrap
{
  display: none;
}
.otherSite
{
  overflow: hidden;
}

#eventCatcher
{
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#bgImage
{
  background-image: url(/img/bg_bottom.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 200px;
  position: absolute;
  top: 400px;
  width: 100%;
  z-index: -1;
}
h1
{
  font-size: 20px;
  margin: 0 -20px;
  padding: 8px 20px;
  background-color: #0f0;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  background: transparent url(/img/bg_bottom.png) no-repeat scroll left -70px;
}

a
{
  color: #006800;
  text-decoration: none;
  font-weight: bold;
}

.pageHeader a:hover
{
  background: none;
}

#mainMenu a
{
  display: block;
  padding: 2px 4px;
  border-bottom: solid 1px white;
}

#mainMenu a:hover, #mainMenu .selected
{
  color: Black;
}
#mainMenu .selected
{
  border-bottom: solid 1px green;
  background: url(/img/bg_bottom.png) no-repeat scroll left -70px;
}
#mainMenu .unselected
{
  background-color: white;
}
.main
{
  width: 600px;
  margin: 0 auto 0 auto;
  position: relative;
  background: url(/img/dropshadow.png) bottom center no-repeat;
  padding-bottom: 100px;
}
#bigQuek
{
  bottom: 100px;
  position: absolute;
  right: 20px;
}

.bgWrap
{
  position: relative;
  width: 969px;
  margin: 0 auto;
  min-height: 100%;
  overflow: hidden;
}
.pageHeader
{
  padding-top: 20px;
  position: relative;
  text-align: center;
}

.pageHeader a img
{
  border: 0;
}

.content
{
  margin-top: 78px;
  border: 2px solid black;
  padding: 20px;
  line-height: 1.4em;
  background-color: rgba(255,255,255,0.7);
  position: relative;
  font-size: 14px;
}

.presto .content, .ie .content
{
  background-color: #F7FEDC;
}
.content h2
{
  font-size: 14px;
  margin: 20px -20px 20px -20px;
  padding: 0px 20px;
  background-color: #0f0;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  background: transparent url(/img/bg_bottom.png) no-repeat scroll right -113px;
  clear: both;
}
.content a:hover
{
  background: transparent url(/img/bg_bottom.png) no-repeat scroll left -70px;
}
.content p img
{
  height: 17px;
}
.content small
{
  display: block;
}
.quekImage
{
  float: right;
  border: none;
  background-color: #DCFF82;
  border: 2px solid black;
  margin: 4px 4px 24px 14px;
  padding: 7px;
}
.loggedin .quekImage
{
  opacity: 0.5;
}
.actionMenuList
{
  margin: 0px;
  padding: 0;
  list-style-type: none;
}
.actionMenuList li
{
  font-size: 14px;
  line-height: 10px;
  margin-bottom: 17px;
}
.actionMenuList img
{
  margin-right: 10px;
  vertical-align: middle;
}

.loggedin .content
{
  margin-top: 78px;
}
#glassPane
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0.4;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  display: none;
}

#joinPopup
{
  position: absolute;
  top: 80px;
  left: 50%;
  width: 240px;
  margin-left: -140px;
  background: #fff;
  border: 1px solid black;
  display: none;
  padding: 20px;
}
#joinPopup a
{
  position: relative;
  float: right;
  top: -14px;
  right: -11px;
  font-size: 10px;
  font-weight: normal;
}
.otherSite #glassPane, .otherSite #joinPopup
{
  display: block;
}

.loggedin #glassPane, .loggedin #joinPopup
{
  display: none;
}

.header
{
  font-weight: bold;
  background-color: #00FF00;
  margin: 0px -20px;
  padding: 0px 20px;
}

#joinForm
{
  font-size: 18px;
  position:absolute;
  left: 150px;
  
}

#hideJoinForm
{
  position:absolute;
  top: 0px;
  right: 5px;
}

#joinForm input
{
  font: bold 16px Arial, sans-serif;
  padding: 1px 4px;
}

#joinForm p
{
  margin: 0px;
  padding: 0px;
}

#joinFormInContent
{
  text-align:center;
  margin-top: 20px;
}

#joinFormInContent .inputButton,
#joinForm .inputButton
{
  border: 2px solid black;
  margin-left: 4px;
  font-size: 16px;
  padding: 0px 4px;
  background-color: #FAFA00;
  xbackground:transparent url(/img/bg_bottom.png) no-repeat scroll -100px -70px;
}

#joinFormInContent .inputButton
{
  margin-top:10px;
}

#joinFormInContent #name
{
  border: 2px solid black;
  font-size: 40px;
  line-height: 40px;
  width: 400px;
}

.loggedin #joinForm
{
  display: none;
}

#mainMenu
{
  position: absolute;
  top: 238px;
  width: 165px;
  font-size: 13px;  
}

#mainMenu
{
  left: -175px;
}
#linkMenu
{
  right: -200px;
}

#mainMenu ul, #linkMenu ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: solid 2px black;
}

ul.thumbnails
{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.thumbnails li
{
  float: left;
  margin: 0 25px 10px 0;
  text-align: center;
}

ul.thumbnails li img
{
  border: none;
}

.disclaimer
{
  position: absolute;
  bottom: 10px;
  left: 0px;
  width: 100%;
  text-align: center;
  display: block;
  margin: 0;
}

.blauweQuek
{
  position: absolute;
  top: -33px;
  left: 120px;
}


.steps
{
  border: solid 2px black;
  clear: both;
  margin-top: 20px;
}

.step
{
  float: left;
  width: 30%;
  border-right: solid 1px black;
  padding: 0 1.5% 0 0;
}

.stepnumber
{
  font: bold 42px Arial;
  float: left;
  margin: 0 8px 0 0;
  color: yellow;
  background-color: black;
  padding: 6px 7px 6px 10px;
}

#step1
{
  background-color: #defede;
}
#step2
{
  background-color: #fedefe;
}
#step3
{
  border-right: none;
  background-color: #fdefde;
  width: 35%;
}
#step3 .stepnumber
{
  color: Gray;
}

.disabled
{
  text-decoration: line-through;
  color: gray;
}

.step p
{
  line-height: 14px;
  height: 30px;
}

.yourQuek
{
  float: left;
  margin: 15px 25px 7px 0;
}
#urlCreatorPopup
{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -90px;
  margin-left: -270px;
  width: 500px;
  height: 160px;
  background: #fff;
  border: 2px solid #000;
  z-index: 1;
  padding: 20px 20px 0;
}
#popupCloser
{
  position: absolute;
  right: 4px;
  top: -1px;
  font-weight: normal;
}

.setLanguage
{
  position: absolute;
  top: 0px;
  right: 5px;
}

.setLanguage a
{
  margin-left: 3px;
}

.copyLink
{
  color:Gray;
}

/* Homepage */
.home #mainMenu
{
  display:none;
}

.home.loggedin #mainMenu
{
  display:block;
}


.home .bgWrap
{
  background:none;
}
.home .content
{
  border:none;
  background:none;  
}
.home.loggedin .main
{
  background-image:none;
}
.home.loggedin .content
{
  display:none;
}
.home .bgWrap
{
  border:none;
}