@charset "UTF-8";
/* 

Title: 			Thema, de helden van QRC
Description:	Website design file deheldenvan.nl
Website:		www.deheldenvan.nl
Author:			Mike @ QRC
Datum:			19 januari 2010
Versie:			1.0

*/


/* 
--------------------------------------------------
DOCUMENT SETTINGS
--------------------------------------------------
*/

html { margin:0px;padding:0px; }
body { margin:0px;padding:0px;font-family:tahoma,arial, serif;overflow: hidden; }
a { outline:none;color:#333;text-decoration:underline;}
a:hover { color:#00b5dd;}
a img { border:0px; }
img#source-image {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#bg { 
  position: fixed; 
  margin: 0px; 
  border: 0px; 
  padding: 0px; 
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
  z-index: 0; 
} 

#bg img { 
  width: 100%; 
} 

/* 
--------------------------------------------------
WRAPPERS
--------------------------------------------------
*/



#pagecontent { 
  margin-left:auto;
  margin-right:auto;
  position: relative; 
  padding-top:1%;
  z-index: 10; 
  width:1000px;
} 


/* 
--------------------------------------------------
TOP STYLING (LOGO, SOCIAL MEDIA LINKS)
--------------------------------------------------
*/




/* 
--------------------------------------------------
MAKING THE TOP MENU
--------------------------------------------------
*/

#topmenu { 
	width:1000px;
	background:#00b5dd;
	padding:8px;
}

#topmenu ul { margin:0px;padding:0px;}
#topmenu ul li { list-style:none;display:inline; }
#topmenu ul li a {  
	background-repeat:no-repeat;
	background-position:right top;
	background-image:url(images/menuhover.jpg);
	padding-right:13px;
	diplay:block;
	float:left;
	font-size:14px;
}

#topmenu ul li a:hover {color:#fff;}

.paddingmenu { padding-top:18px;padding-left:10px;color:#fff;text-decoration:none; }
.paddingmenu small { font-size:10px; }
a:hover.paddingmenu small { color:#333;border-bottom:2px solid #333;}
.paddinglogo { margin-left:12px; }




/* 
--------------------------------------------------
THE MOVE DIVS
--------------------------------------------------
*/

#div1 {
 width: 200px;
 height: 180px;
 background: #E2007A;
 text-align:center;
 padding: 10px;
 top: 400px;
 right:420px;
 position: absolute;
 color:#fff;
}

#div2 {
 width: 360px;
 height: 170px;
 right:-16px;
 top:120px;
 font-size:13px;
 background: #fff;
 position: absolute;
 padding:10px;
 
}


#div3 {
 width: 260px;
 height: 160px;
 padding: 20px;
 top: 400px;
 left: 0px;
 position: absolute;
  background-image:url(images/qrctag2.png);
 background-repeat:no-repeat;
 background-position:bottom right;
font-style:italic;
color:#fff;
}

#div3 h2 { font-size:20px;color:#000;}

#div4 { 
width: 512px;
 height: 20px;
 background: #fff;
 padding: 10px;
 top: 640px;
 left: 46px;
 position: absolute;
 font-size:11px;
 }
 
 #div5 { 
width: 220px;
 height: 240px;
 background: #00b5dd;
 padding: 10px;
 top: 120px;
 right:400px;
 position: absolute;
 font-size:11px;
 color:#fff;
 }
 
 #div5 h3 { border-bottom:1px dotted #000;color:#000; }
 #div5 ul {margin:0px;padding:0px;}
 #div5 ul li { list-style:none;border-bottom:1px dotted #000;}


 #div6 { background:#dcdcdc;
 width:320px;
 height:250px;
 position:absolute;
 left:0px;
 top:120px;
 padding:10px;
 font-size:13px;
  }
  
  #div7 {
  background:#dcdcdc;
  position:absolute;
  right:-16px;
  width:400px;
  height:330px;
  top:350px;
  }
  
  h3 { font-size:14px;margin:0px;padding-top:0px;border-bottom:1px dotted #000;padding-bottom:8px;padding-bottom:8px;margin-bottom:8px;}
 #div5 ul li.nieuwstop { padding-bottom:8px;}
 #div5 ul li.nieuwsinvul { padding-bottom:8px;padding-top:8px; }
 li.nieuwstop a, li.nieuwsinvul a { color:#fff;text-decoration:none;}
 li.nieuwstop a:hover, li.nieuwsinvul a:hover { color:#000;text-decoration:none;}
 
 a.bluelink { color:#fff;}
 a:hover.bluelink { color:#000;}

/* 
--------------------------------------------------
MAKE THE DIVS MOVE
--------------------------------------------------
*/


.dynDiv_moveDiv {
 position: absolute;
 overflow: hidden;
}

.dynDiv_resizeDiv_tl,.dynDiv_resizeDiv_tr,.dynDiv_resizeDiv_bl,.dynDiv_resizeDiv_br {
 width: 10px;
 height: 10px;
 background: #faa;
 border: 1px solid #000;
 position: absolute;
}

.dynDiv_resizeDiv_tl {
 top: -1px;
 left: -1px;
}

.dynDiv_resizeDiv_tr {
 top: -1px;
 right: -1px;
}

.dynDiv_resizeDiv_bl {
 bottom: -1px;
 left: -1px;
}

.dynDiv_resizeDiv_br {
 bottom: -1px;
 right: -1px;
}

.dynDiv_moveParentDiv {
 width: 100%;
 margin: auto;
 height: 16px;
 font-size: 15px;
 position: absolute;
 top: -1px;
 left: -1px;
 background: #faa;
 border: 1px solid #aaa;
 border-left: 0;
 border-right: 0;
 padding: 0;
 overflow: hidden;
 white-space:nowrap;
}

.dynDiv_minmaxDiv {
 position: absolute;
 top: 1px;
 right: 15px;
 width: 15px;
 height: 15px;
 background: #faa;
 font-size: 15px;
 padding: 0;
 margin: 0;
}



#bg IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#bg IMG.active {
    z-index:10;
    opacity:1.0;
}

#bg IMG.last-active {
    z-index:9;
}

#div7 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#div7 IMG.active {
    z-index:10;
    opacity:1.0;
}

#div7 IMG.last-active {
    z-index:9;
}