﻿.foo {} /* validator on webrichtlijnen.nl requires the file to start with a selector, not a comment */

/*
	TABLE OF CONTENTS:
	- Browser reset		Removes most browser differences
	- HTML elements		Styling of tags
	- Generic content	Styling for text created with rich text editors
	- Main containers	Styling of all containers and its content
	- Form				All styling of forms
	- General			Styles that are not confined to a specific container
	- Page				All style resets that start with "body.ClassName"
	- CMS				Styles that are used in the page editor of the CMS
	- Hacks				Mainly Firefox hack
	- Print				Extra styling in case the page is printed
 */






/*
 * Begin browser reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0
}
html {
	height:100%;
	overflow:-moz-scrollbars-vertical;
	overflow-x:auto
}
table {
	border:0;
	border-collapse:collapse;
	border-spacing:0
}
fieldset,img {
	border:0
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal
}
em,cite {
	font-style:italic
}
strong {
	font-weight:bold
}
ol,ul {
	list-style:none
}
caption,th {
	text-align:left
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
	margin:0;
	padding:0
}
q:before,q:after {
	content:''
}
abbr,acronym {
	border:0
}

/*
 * End browser reset
 */






/*
 * Begin HTML elements
 */

body {
	background: url(/images/bg-body.png) repeat-y left top;
}

body,
input,
select,
textarea {
	color: #FFF;
	font: normal 12px/20px Arial, Helvetica, sans-serif;
}

a:link,
a:hover,
a:active,
a:visited {
	color: #FFF;
	text-decoration: underline;
}
a:hover,
a:focus {
	text-decoration: none;
}

p {
	margin: 0 0 1em 0;
}

ul,
ul li {
	margin: 0;
	list-style-type: none;
}

ul {
	padding: 0px 0px 20px 0px;
}

ul li {
	padding: 0 0 0 17px;
	background: url(/images/bg-li.png) no-repeat 5px 8px;
}

ol {
	padding: 0 0 0 40px;
	list-style: decimal;
}

h2 {
	font-weight: bold;
}

/*
 * End HTML elements
 */







 
 
 
 
 
/*
 * Begin main containers
 */

.containerColumnLeft {
	width: 426px;
	min-height: 0;
	float: left;
}
* html .containerColumnLeft {
	height: 0;
}

.containerColumnRight {
	width: 534px;
	min-height: 0;
	float: left;
	background: url(/images/bg-containerColumnRight.png) repeat-y left top;
}
* html .containerColumnRight {
	height: 0;
}

/*
 * End main containers
 */


/*
 * Begin page
 */
.containerColumnLeft .logoMagic {
	width: 100%;
	height: 477px;
	float: left;
	background: url(/images/bg-containerColumnLeft-logoMagic.png) no-repeat left top;
}

.containerColumnLeft .youTubeWrapper {
	width/**/:/**/426px; /* 426px */
	height/**/:/**/230px; /* 269px */
	padding: 21px 0px 18px 35px;
	float: left;
}

.containerColumnLeft .logoWizards {
	width: 100%;
	height: 59px;
	float: left;
}

.containerColumnLeft .logoWizards a:link,
.containerColumnLeft .logoWizards a:visited,
.containerColumnLeft .logoWizards a:active,
.containerColumnLeft .logoWizards a:hover {
	margin: 0px 0px 0px 31px;
	width: 86px;
	height: 59px;
	display: block;
	float: left;
	background: url(/images/bg-containerColumnLeft-logoWizards.png) no-repeat left top;
}

.containerColumnLeft .logoWizards a span {
	display: none;
}
 
.containerColumnRight .top {
	width: 460px;
	height: 367px;
	float: left;
	background: url(/images/bg-containerColumnRight-top.png) repeat-x left top;
}

.containerColumnRight .top .payOff {
	position: relative;
	width: 436px;
	height: 254px;
	float: left;
	background: url(/images/bg-containerColumnRight-payOff.png) no-repeat left top;
}

.containerColumnRight .top .payOff .inschrijven {
	position: absolute;
	top: 146px;
	left: 58px;
	width: 370px;
	height: 108px;
}

.containerColumnRight .top .payOff .inschrijven a:link,
.containerColumnRight .top .payOff .inschrijven a:visited,
.containerColumnRight .top .payOff .inschrijven a:active,
.containerColumnRight .top .payOff .inschrijven a:hover {
	width: 370px;
	height: 108px;
	display: block;
	background: url(/images/bg-containerColumnRight-payOff-inschrijven.png) no-repeat left top;
}

.containerColumnRight .top .payOff .inschrijven a span {
	display: none;
}

.containerColumnRight .top .textWrapper {
	position: relative;
	width: 436px;
	height: 80px;
	padding: 0px;
	float: left;
}

.containerColumnRight .top .textWrapper .text {
	position: absolute;
	top: 0px;
	left: 0px;
	width/**/:/**/316px; /* 436px */
	height/**/:/**/69px; /* 80px */
	padding: 11px 60px 0px 60px;
	z-index: 15000;
}


.containerColumnRight .top .storeFinder  {
	width/**/:/**/376px; /* 436px */
	height: 32px;
	padding: 0px 0px 0px 60px;
	float: left;
}

.containerColumnRight .top .storeFinder a:link,
.containerColumnRight .top .storeFinder a:visited,
.containerColumnRight .top .storeFinder a:active,
.containerColumnRight .top .storeFinder a:hover {
	width: 162px;
	height: 32px;
	display: block;
	float: left;
	background: url(/images/bg-containerColumnRight-storeFinder.png) no-repeat left top;
}

.containerColumnRight .top .storeFinder a span {
	display: none;
}

.containerColumnRight .middle {
	position: relative;
	width: 100%;
	height: 110px;
	float: left;
	background: url(/images/bg-containerColumnRight-middle.png) no-repeat left top;
}

.containerColumnRight .middle .character {
	position: absolute;
	right: 15px;
	top: -106px;
	width: 273px;
	height: 446px;
	z-index: 100;
	background: url(/images/bg-containerColumnRight-character.png) no-repeat left top;
}

.containerColumnRight .middle .inschrijven {
	position: absolute;
	left: 0px;
	top: 25px;
	width: 460px;
	height: 60px;
	z-index: 200;
}

.containerColumnRight .middle .inschrijven a:link,
.containerColumnRight .middle .inschrijven a:visited,
.containerColumnRight .middle .inschrijven a:active,
.containerColumnRight .middle .inschrijven a:hover {
	width: 460px;
	height: 60px;
	display: block;
	float: left;
	background: url(/images/bg-containerColumnRight-middle-inschrijven.png) no-repeat left top;
}

.containerColumnRight .middle .inschrijven a span {
	display: none;
}

.containerColumnRight .bottom {
	position: relative;
	width: 100%;
	min-height: 0;
	float: left;
}
* html .containerColumnRight .bottom {
	height: 0;
}

.containerColumnRight .learnToPlay {
	position: absolute;
	top: 19px;
	left: 6px;
	width: 424px;
	height: 190px;
	float: left;
	z-index: 15000;
	background: url(/images/bg-containerColumnRight-learnToPlay.png) no-repeat left top;
}

.containerColumnRight .learnToPlay .text {
	width/**/:/**/221px; /* 424px */
	height/**/:/**/78px; /* 123px */
	padding: 45px 28px 0px 175px;
	font-size: 16px;
	text-align: right;
	float: left;
}

.containerColumnRight .learnToPlay .buttons {
	width/**/:/**/180px; /* 424px */
	height: 32px;
	padding: 0px 18px 0px 226px;
}

.containerColumnRight .learnToPlay .buttons a:link,
.containerColumnRight .learnToPlay .buttons a:visited,
.containerColumnRight .learnToPlay .buttons a:active,
.containerColumnRight .learnToPlay .buttons a:hover {
	margin: 0px 8px 0px 0px;
	width: 82px;
	height: 32px;
	display: block;
	float: left;
}

.containerColumnRight .learnToPlay .buttons a.video:link,
.containerColumnRight .learnToPlay .buttons a.video:visited,
.containerColumnRight .learnToPlay .buttons a.video:active,
.containerColumnRight .learnToPlay .buttons a.video:hover {
	background: url(/images/bg-containerColumnRight-buttons-video.png) no-repeat left top;
}

.containerColumnRight .learnToPlay .buttons a.pdf:link,
.containerColumnRight .learnToPlay .buttons a.pdf:visited,
.containerColumnRight .learnToPlay .buttons a.pdf:active,
.containerColumnRight .learnToPlay .buttons a.pdf:hover {
	background: url(/images/bg-containerColumnRight-buttons-pdf.png) no-repeat left top;
}

.containerColumnRight .learnToPlay .buttons a span {
	display: none;
}

.containerColumnRight .actieVoorwaarden {
	position: absolute;
	top: 222px;
	left: 0px;
	width/**/:/**/430px; /* 460px */
	padding: 0px 15px 0px 15px;
	font-size: 11px;
}
/*
 * End page
 */











/*
 * Begin general
 */

div.safeBox {
	min-height: 1em;
}
* html div.safeBox {
	height: 1em;
}

ul.semantic li {
	padding: 0;
	background: none
}

*.displayNone {
	display: none;
}

*.floatLeft {
	float: left;
}

*.clear {
	width: 100%;
	height: 0;
	overflow: hidden;
	clear: both;
}

*.map {
	display: block;
	overflow: hidden;
	background-color: #EFEBE2;
}

label {
	cursor: pointer;
}

/*
 * End general
 */






/*
 * Begin page
 */



/*
 * End page
 */













/*
 * Begin hack
 */
div.containerMain:after {
	content:"";
	display:block;
	height:0;
	clear:both;
}

/*
 * End hack
 */






/*
 * Begin print
 */

@media print {

	ul {
		padding: 0 0 0 20px;
	}

	ul li {
		padding: 0;
		list-style: disc;
		background: none;
	}	

}

/*
 * End print
 */

