/*give the body height:100% so that its child
    elements can have percentage heights*/
body{ height:100%;
	  margin: 0;
      padding: 0;
      text-align: center;
	  	  }

/*this is what we want the div to look like*/
div.fullscreen{
  /*display:block;*/

  /*set the div in the top-left corner of the screen*/
  position:absolute;
  top:0;
  left:0;
  
  /*set the width and height to 100% of the screen*/
  width:100%;
  height:100%;
   z-index:1;
}
/*#floater {height:50%; margin-bottom:-600px;}*/

#helft1 {
 width:50%;
 height:100%;
 background-color:#FF0000;
float:left; 
 }

#helft2 {
 width:50%;
 height:100%; 
 background-color:#800000;
 float:right;
 }

#floater {
 width:800px;
 height:700px; 
 margin: 0px auto;
 margin-bottom:100px;
 margin-top:0px;}
	
div.total{
 width:800px;
 height:500px; 
 /*margin: 0px auto;*/
 /*background-color:#66CCCC;*/
 background-color:#FFFFFF;
 overflow-y:hidden;
 overflow-x:hidden;
 /*height:240px;*/
 /*position:relative;*/
} 

img#bg {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
} 

.band {
width : 800px;
height : 250px;
background-color:#6600CC;
}

.strook {
 width:50px;
 height:250px;
 float:left; 
}  

#strook1{
 /*margin: 0px auto;*/
 background-color:#6600CC;
 /*clear:both;*/
 /*height:240px;*/
 /*position:relative;*/
}  

#strook2{
 
 background-color:#6633CC;
 
}   

#strook3{
 
 background-color:#6666CC;
 
}      

#strook4{

 background-color:#6699CC;
 
} 

#strook5{

 background-color:#66CCCC;
 
}

.koptekst{
 /*width:50px;*/
 height:100px;
 /*left:100px;*/ 
 /*margin: 0px auto;*/
 /*background-color:#FF6600;*/
 /*clear:both;*/
 /*height:240px;*/
 /*position:relative;*/
 font-family:"Comic Sans MS", Times, serif;
 font-size:60px;
color : #FFFFFF 
}  

.voettekst{
 /*width:50px;*/
 height:100px;
 top:600px;
 overflow: auto;
 /*left:100px;*/ 
 /*margin: 0px auto;*/
 /*background-color:#FF6600;*/
 /*clear:both;*/
 /*height:240px;*/
 /*position:relative;*/
 font-family:"Comic Sans MS", Times, serif;
 font-size:20px; 
 color : #FFFFFF
}  

.tekst{
 width:120px;
 /*height:500px;*/
 float:left; 
 /*margin: 0px auto;*/
 /*background-color:#FF6600;*/
 /*lear:both;*/
 /*height:240px;*/
 /*position:relative;*/
}  

.container{
 height:250px;
 width : 800px;
 float:left; 
 font-family:"Comic Sans MS", Times, serif;
 font-size:20px;
 text-align: justify;
 background-color:#6600CC;
 color: white; 
}

.inspring{
 left: 50px;
 position:relative;
 }
 
.infiniteCarousel {
  width: 800px;
  height:250px;
  position: relative;
}

.infiniteCarousel .wrapper {
  width: 720px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  height: 240px;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul a img {
  border: 5px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
  width: 840px; /* single item * n */
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 10px;
  height: 160px;
  width: 160px;
}

.infiniteCarousel ul li img {
    -webkit-transition: border-color 400ms;
}

.infiniteCarousel ul:hover li img {
  border-color: #000;
}

.infiniteCarousel ul:hover li:hover img {
  border-color: #333;
}

.infiniteCarousel ul li a img {
  display:block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: url(images/arrow.png) no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
  outline: 0;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}