/*basics*/
.clear {clear: both}


/*layout*/
html,
body {background: #ffffff}
#wrapper {width: 820px; margin: 0 auto; padding: 20px 0}
hr {background: url(../img/layout/dot.jpg) repeat-x top center; border: none; clear:both; display:block; height:5px; margin:20px 0 0 0; width:100%;}
h1#logo {float:left; width:300px;}
h1#logo a {text-indent: -9999px; height: 108px; width: 300px; display: block; background: url(../img/layout/logo.jpg) no-repeat}

p {padding: 5px 0}

/*slideshow*/
#slide_show {width: 820px; height: 750px; overflow: hidden}
#nav {height: 68px; padding: 10px 0 10px 20px;}
#nav a {color: #a6a8ab; font-size: 40px; line-height: 74px; width: 68px; height: 68px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; display: block; float: left; margin: 0 10px 0 0; background: url(../img/layout/nav_link.jpg) no-repeat 0 -9999px; text-align: center}
#nav a:hover {background: url(../img/layout/nav_link.jpg) no-repeat 0 0; color: #ffffff}
#nav a.selected {background: url(../img/layout/nav_link.jpg) no-repeat 0 -68px; color: #ffffff}

#tooltip {color: #fff; position:absolute; padding:20px 30px; display:none; font-size:18px; line-height: 190%; z-index: 999; background: url(../img/layout/ntbg.png); border-radius: 10px;   -moz-border-radius: 10px;   -webkit-border-radius: 10px; font-weight: bold; text-shadow:0 1px 1px #222222; }


/*slides*/
div.slide_holder {width: 820px; height: 350px; border-radius: 20px;   -moz-border-radius: 20px;   -webkit-border-radius: 20px; position: relative}


div#slide1 	.slide_holder	{background: url(../img/slides/1.jpg) no-repeat center center}
div#slide2 	.slide_holder	{background: url(../img/slides/2.jpg) no-repeat center center}
div#slide3 	.slide_holder	{background: url(../img/slides/3.jpg) no-repeat center center}
div#slide4 	.slide_holder	{background: url(../img/slides/4.jpg) no-repeat center center}
div#slide5 	.slide_holder	{background: url(../img/slides/5.jpg) no-repeat center center}
div#slide6 	.slide_holder	{background: url(../img/slides/6.jpg) no-repeat center center}
div#slide7 	.slide_holder	{background: url(../img/slides/7.jpg) no-repeat center center}
div#slide8 	.slide_holder	{background: url(../img/slides/8.jpg) no-repeat center center}
div#slide9 	.slide_holder	{background: url(../img/slides/9.jpg) no-repeat center center}
div#slide10 .slide_holder	{background: url(../img/slides/10.jpg) no-repeat center center}


div.slide_holder a.fancybox {display: block; height: 70px; width: 70px; text-indent: -9999%; background: url(../img/layout/link.png) no-repeat 0 0; position: absolute}
div.slide_holder a.fancybox:hover {background: url(../img/layout/link.png) no-repeat 0 -70px}

div.slide_holder a#link-1a {	top: 70px; 		left: 740px}
div.slide_holder a#link-1b {	top: 90px; 		left: 220px}
div.slide_holder a#link-1c {	top: 210px; 	left: 320px}
div.slide_holder a#link-1d {	top: 300px; 	left: 70px}
div.slide_holder a#link-1e {	top: 10px; 		left: 520px}

div.slide_holder a#link-2a {	top: 210px; 	left: 50px}
div.slide_holder a#link-2b {	top: 290px; 	left: 100px}
div.slide_holder a#link-2c {	top: 210px; 	left: 320px}
div.slide_holder a#link-2d {	top: 300px; 	left: 270px}
div.slide_holder a#link-2e {	top: 100px; 	left: 720px}
div.slide_holder a#link-2f {	top: 80px; 		left: 520px}
div.slide_holder a#link-2g {	top: 120px; 	left: 220px}



/*intros*/

h2 {font-family:Helvetica,Arial,sans-serif; font-size:30px; font-weight:bold; padding: 20px 0 10px 0}
h3 {font-family:Helvetica,Arial,sans-serif; font-size:30px; font-weight:bold;}
h5 {font-family: Georgia, Garamond, serif; font-size: 18px; line-height: 28px; font-weight: normal; padding: 10px; text-align: center }
.intro {font-family: Georgia, Garamond, serif; padding: 40px 0; font-size: 18px; line-height: 28px }
.intro p {padding: 10px 0 0 0}


.intro div {width: 500px; margin: 0 0 30px 70px}


div#slideIntro 	.intro {background: url(../img/layout/gerard.jpg) no-repeat 420px 0px; min-height: 350px}
div#slide1 		.intro {background: url(../img/layout/gerard1.jpg) no-repeat 580px 50px}
div#slide2 		.intro {background: url(../img/layout/gerard2.jpg) no-repeat 600px 50px}
div#slide3 		.intro {background: url(../img/layout/gerard3.jpg) no-repeat 570px 50px}
div#slide4 		.intro {background: url(../img/layout/gerard4.jpg) no-repeat 570px 30px}
div#slide5 		.intro {background: url(../img/layout/gerard5.jpg) no-repeat 590px 60px}
div#slide6 		.intro {background: url(../img/layout/gerard6.jpg) no-repeat 600px 60px}
div#slide7 		.intro {background: url(../img/layout/gerard7.jpg) no-repeat 590px 60px}
div#slide8 		.intro {background: url(../img/layout/gerard8.jpg) no-repeat 570px 60px}
div#slide9 		.intro {background: url(../img/layout/gerard9.jpg) no-repeat 590px 70px}
div#slide10		.intro {background: url(../img/layout/gerard10.jpg) no-repeat 570px 80px}

div#slideIntro p {font-size:26px;line-height:30px; width: 340px}

/*footer*/
#footer p {width: 45%; padding: 20px 0; font-size: 11px}
p.right {float: right; text-align: right}
p.left {float: left}

/*menu*/
#menu {list-style: none; width: 60%; float: right; padding:40px 0 0 0;}
#menu li {float: right; margin: 0 0 0 10px}
#menu li a {background:none repeat scroll 0 0 #A6A8AB; color:#f7f7f7; font-size:15px; padding:9px 13px 7px 13px; text-decoration:none;  border-radius: 20px;   -moz-border-radius: 20px;   -webkit-border-radius: 20px; text-shadow:0 1px 1px #818489;}
#menu li a:hover {color: #ffffff; background: #6e3a6a}

/*links*/
#menu li#games a:hover,
#menu li#games a.selected,
#submenu.games li a.selected,
#submenu.games li a:hover {background: #8b9f5f; color: #ffffff; text-shadow:0 1px 1px #818489;}

#menu li#downl a:hover,
#menu li#downl a.selected,
#submenu.downloads li a:hover,
#submenu.downloads li a.selected {background: #5b7a86; color: #ffffff; text-shadow:0 1px 1px #818489;}

#menu li#tekeningen a:hover,
#menu li#tekeningen a.selected,
#submenu.tekeningen li a:hover,
#submenu.tekeningen li a.selected {background: #6e3a6a; color: #ffffff; text-shadow:0 1px 1px #818489;}

#menu li#strips a:hover,
#menu li#strips a.selected,
#submenu.strips li a:hover,
#submenu.strips li a.selected {background: #e0b83f; color: #ffffff; text-shadow: none;}

#menu li#start a:hover,
#menu li#start a.selected {background: #e0b83f; text-shadow: none}

div.slide_holder  a.pageturn {width: 185px; height: 185px; text-indent: -9999%; display: block; background: url(../img/layout/page_turn.png) no-repeat 0 0 ; position: absolute; bottom: 0; right: 0}

div.slide_holder  a.pageturn:hover {background: url(../img/layout/page_turn.png) no-repeat 0 -185px ;}

/*submenu*/
#submenu {list-style: none; padding:15px 0;}
#submenu li {float: right; margin: 0 0 15px 10px}
#submenu li a {background:#ffffff; color:#A6A8AB; font-size:15px; padding:9px 13px 7px 13px; text-decoration:none;  border-radius: 20px;   -moz-border-radius: 20px;   -webkit-border-radius: 20px;}


/*games*/
div.game_holder {text-align: center; margin: 20px 0}

div.image_holder {width: 820px; height: 450px; position: relative}
div.image_holder img {position: absolute; top: 0; left: 0}
div.image_holder img.invisible {visibility: hidden}
#answers {z-index: 100}
#toggler {cursor: pointer; -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

/*downloads*/
.download_holder {padding: 25px 0; clear: both}
.download_link {width: 200px; float: left}

#little_slide_show {    float: right;    height: 200px;    margin: 20px 20px 20px 50px;    width: 200px;}
#little_slide_show img {width: 200px; height: 200px}

div.knot {padding: 10px 0}

img.knot {width: 651px; margin: 10px 0 10px 100px}

div.knot p, div.knot li {font-family: Georgia, Garamond, serif; padding: 10px 0 10px 0; font-size: 17px; line-height: 23px; font-style: italic }

/*landing*/
.landing {
	padding: 20px 0 40px 0;
	}
	
.landing img {
	float: right;
	}
	
.landing h1 {
	font-family: Georgia, Garamond, serif; padding: 30px 0 10px 0; font-size: 28px; line-height: 32px; font-style: italic ;
	}
	
.landing p {
	font-family: Georgia, Garamond, serif; padding: 10px 0 10px 0; font-size: 22px; line-height: 28px; font-style: italic ;
	}	
	
.landing .button {
	background: none repeat scroll 0 0 #E0B83F;
	font-size: 30px;
	font-weight: bold;
    border-radius: 30px;
    color: #F7F7F7;
    padding: 12px 20px;
    text-decoration: none;
    position: relative;
    top: 30px;
    left: 70px;
	}		
	
.landing .button:hover {
	background: #875e82;
	}	
	
/*strip*/	
.strip {
	text-align: center;
	}
	
.strip img {
	background: #fff;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 0 5px #e4e4e4;
	margin: 20px;
	}	
	
/*misc*/	
.hidden {display: none}