body{margin:0;padding:0;background-attachment: fixed;font: 13px/18px "trebuchet ms",helvetica,arial,sans-serif;letter-spacing:0.05em;}

h1,h2,h3,h4,h5{color:#4c7c43}
a{color:#804000;}
a:hover{color:#DF7000;}
a:hover{color:#cc6700;}
h1#logo{color:#804000;}

h1{font-size:24px;letter-spacing:0.06em;}
h2{font-size:17px;font-family: arial,sans-serif;}
h3{font-size:1.2em;}

.box h1{font-size:17px;font-family: arial,sans-serif;}
.box h2{font-size:14px;}

a{text-decoration:none;font-weight:bold;font-family:arial,sans-serif;}
a img{border:0;}
a:hover{text-decoration:underline;}

#puzmenu{letter-spacing:0.01em;text-align: justify;margin-bottom:2em;}
#kolomab h1{margin-bottom:1em;}


.person{font-variant: small-caps;letter-spacing:0.07em;}
.name{font-style:italic;}
.title{font-style:italic;}
	.wie{float:left;width:160px;margin-right:7px;text-align: center;}
.wie img{border:4px solid white;}
.red{color:red;}
#wrapper{	width: 960px;margin-left:auto;margin-right: auto;}
#xxheader{background-image: url(http://studiosteenhuis.nl/img/transMenuBg.png);background-repeat: repeat-x;height:90px;}
#header{height:90px;}			
#logo{width:150px;float:left;padding-left:10px;padding-top:6px;}

h1#logo{font:36px/95% times,helvetica,arial,serif;font-weight: bold;letter-spacing: 0.05em;}


#menu{width:800px;float:right;background-image: url(http://studiosteenhuis.nl/img/menu.png);margin-top:10px;height:90px;margin-bottom:30px;background-repeat: no-repeat;}

#animatie{width:800px;height:90px;background-repeat: no-repeat;}


#menu ul{list-style: none;margin:0;padding:0;}
#menu ul li{float:left;}
#menu ul li a{text-decoration:none;display:block;font-family: arial;font-size:1.2em;height:90px;}
#xxmenu ul li a:hover{color:#804000;}

#ma a span{width:170px;padding-top:80px;display:block;text-align:center;}
#ma a:hover{background-image: url(http://studiosteenhuis.nl/img/menu_over.png);}

#mb a span{width:110px;padding-top:30px;display:block;text-align:center;}
#mb a:hover{background-image: url(http://studiosteenhuis.nl/img/menu_over.png);background-position: -170px}

#mc a span{width:140px;padding-top:80px;display:block;text-align:right;}
#mc a:hover{background-image: url(http://studiosteenhuis.nl/img/menu_over.png);background-position: -280px}

#md a span{width:145px;padding-top:16px;display:block;text-align:center;}
#md a:hover{background-image: url(http://studiosteenhuis.nl/img/menu_over.png);background-position: -420px}

#me a span{width:100px;padding-top:80px;display:block;text-align:left;}
#me a:hover{background-image: url(http://studiosteenhuis.nl/img/menu_over.png);background-position: -565px}

#mf a span{width:130px;padding-top:15px;display:block;text-align:right;}
#mf a:hover{background-image: url(http://studiosteenhuis.nl/img/menu_over.png);background-position: -665px}

#contentblok{color:black;float: left;margin-bottom: 20px;}

#koloma{float: left;width:304px;margin-left:40px;margin-right:40px;clear: left;margin-top:20px;}

#kolomb{float: left;width:324px;margin-right:40px;margin-top:20px;}

#koloma .box img{margin-left:20px;margin-bottom:5px;float:right;width:96px;}
#kolomb .box img{margin-left:20px;margin-bottom:5px;float:right;width:96px;}

#kolomc{float:right;width:152px;font-size:0.9em;margin-right:40px;margin-top:20px;}

#kolomab{float: left;width:668px;margin-left:40px;margin-right:40px;margin-top:20px;}

#kolomvier{float: left;width:668px;margin-left:40px;margin-right:40px;margin-top:20px;}
#kolomvijf{float: left;width:668px;margin-left:40px;margin-right:40px;margin-top:20px;}

#footer{width:960px;float:left;text-align:center;margin-bottom:20px;font-size:10px;}


.box{margin-top:20px;border-bottom: 1px solid silver;padding-bottom: 10px;text-align: justify;}
#kolomab .box{text-align: left;}
#kolomb hr{margin-right:20px;margin-bottom:20px;}

#kolomvijf .box{float:left;margin-right:0;min-height:185px;width:133px;margin-top:0;border:0;text-align: center;padding-bottom:0;}
#kolomvijf .box h2{width:100%;text-align: center;}

#kolomvier .box{float:left;margin-right:0;min-height:185px;width:167px;margin-top:0;border:0;text-align: center;padding-bottom:0;}
#kolomvier .box h2{width:100%;text-align: center;}


.transparant_class{background-image: url(http://studiosteenhuis.nl/img/transWit.png)}


.no_transparant_class{background-color:green;opacity:0.9;}



#cartIcon img{float: left;width:50px;margin:0;margin-right:5px;}


.rechts{float:right;margin-left:20px;margin-bottom:20px;}



/* comments */

#comments{width:668px;}
.reactie{padding:20px;margin-bottom:10px;margin-right:10px;background-image: url(http://studiosteenhuis.nl/img/transWit.png);border:1px solid silver;}
.bericht{font-family:courier,serif;font-size:13px;padding-bottom:10px;border-bottom: 1px solid silver;}


/* 20 years ago */

.twenty{background-image: url(http://studiosteenhuis.nl/img/20jaar/bg-bottom.png);background-position: left bottom;padding-bottom:10px;width:100%;}
.papier{background-image: url(http://studiosteenhuis.nl/img/20jaar/bg.png);padding:15px;font-family: georgia,serif;font-size: 11px;color:#302E2D;}
.papier hr{margin-bottom:8px;}
.papier table{color:blue;font-family: Comic Sans MS;font-size:13px;font-weight: bold;background: transparent;margin-bottom:8px;text-transform: uppercase}
.papier table td{width:18px;height:18px;text-align:center;margin:0;padding:0;}
.papier table td.letter{border:1px solid #655d4a;width:16px;}
.papier table td.blok{background-image: url(http://studiosteenhuis.nl/img/20jaar/blokje.jpg);border:1px solid #655d4a;}
.papier div.oms20{font-family: georgia;font-size: 12px;font-weight: bold;color:#302E2D}
.papier span#datum{float:right;display:inline-block;}
#mijn_opl{font-weight: bold;}

/* diagram.css */


div#puzzel_container{padding-top: 20px;;}

div#puzzel{	display: table-row;}

div#kruis{	padding: 0;float: left;}

div#clues{	padding: 0;float: right;margin-left: 10px;}

div.diagram{	position: relative;}

div.diagram div.letter, div.diagram div.leeg, div.diagram div.dicht{	position: absolute;margin: 0px;padding: 0px;width: 20px; height: 20px;}

div.diagram div.letter{	border: 1px solid #000;}

div.diagram div.dicht{	background-color: #000;border: 1px solid #000;}

div.diagram div.letter input{	position: absolute;height: 13px;width: 15px;top: 3px;left: 0px;text-align: center;color: #000;margin: 0px;padding: 0px;font-family : Arial, Helvetica, Verdana, Geneva, sans-serif;font-weight: bold;font-size: 16px;border: none;background-color: #FFF;outline: none; /* google chrome */
}


div.diagram div.letter div.puzzelnummer{	position: absolute;text-align: left;vertical-align: top;top: 0px;left: 0px;padding: 0px;margin: 0px;font-size: 7px;height: 8px;font-family : Arial, Helvetica, Verdana, Geneva, sans-serif;color: #000;background: transparent;z-index: 1;}



/* dit moet lager dan algemeen: dynamisch */

div.diagram div.inwoord input, div.diagram div.inwoord{	background-color: #ccc;}
div.diagram div.actieveletter input,
div.diagram div.actieveletter{	background-color: #ff9;}

/*
CLUES:
<table class='diagram_cluetable'>
<tr>
	<td colspan='2' class='diagram_richting'>Horizontaal:</td>
</tr>
<tr class='diagram_clue' id='..'>
	<td class='diagram_clue_nr'>...:</td>
	<td class='diagram_clue_tekst'>..</tr>
</tr>
</table>

De tr van de actieve clue heeft extra class 'diagram_clue_actief'

*/

td.diagram_richting, td.diagram_clue_nr, td.diagram_clue_tekst{	font-family: Arial, sans-serif;font-size: 12px;}
td.diagram_richting{	font-weight: bold;color: #000;}
tr.diagram_clue{	cursor: pointer;}
tr.diagram_clue_actief{	background-color: #ff9;}
td.diagram_clue_nr{	font-weight: bold;text-align: right;padding-right: 4px;color: #666;}
td.diagram_clue_tekst{	color: #666;}

/*
	DIV CLUES
*/

div.diagram_richting_blok{overflow: auto;height: 200px;width: 300px;border: 1px solid #999;padding: 5px;}
div.diagram_richting_tekst{font-weight: bold;}
div.diagram_richting_blok_horizontaal{	margin-bottom: 10px;}
div.diagram_richting_blok_verticaal{}
div.diagram_clue{}
div.diagram_clue_nr{display: inline;}
div.diagram_clue_tekst{margin-left: 4px;display: inline;}
div.diagram_clue_actief{background-color: #ff9;}




/* shop */

div#cartIcon{	float: right;}
div#cartHolder{	text-align: center;}
div#orderNow{	float: right;}
table.cart{	margin-left: auto;margin-right: auto;}
#cartTable tr td{	padding-right: 30px;text-align: center;}
#customerTable{	margin-left: auto;margin-right: auto;display: table;}
div.tableRow{	display: table-row;}
div.customer label{	display: table-cell;}
div.customer input{	display: table-cell;margin: 5px;margin-left: 10px;}
div.customer div{	position: relative;display: table-cell;margin: 5px;margin-left: 10px;font-weight: bold;}
div.customer div.error-message{	display: table-cell;color: #AA0000;}
input.btnCancel{	margin-left: 0px;margin-right: 100px;}
input.btnNext{	margin-right: 0px;}
.overview{ 	font-size: small;}


#submenu{float:left;margin-top:10px;height:24px;margin-bottom:0px;background:transparant;margin-left:40px;}
#submenu ul{list-style: none;margin:0;padding:0;}
#submenu ul li{float:left;background-image: url(http://studiosteenhuis.nl/img/tabje.png);height:24px;margin-right:6px;}
#submenu ul li a{text-decoration:none;display:block;font-family: arial;font-size:12px;margin-right:1px;width:109px;text-align: center;letter-spacing:0.1em;margin-top:3px;border-bottom: 1px solid #aaa;font-weight:bold;padding-bottom:3px;}
#submenu ul li span{text-decoration:none;display:block;font-family: arial;font-size:12px;margin-right:1px;width:109px;text-align: center;letter-spacing:0.01em;margin-top:3px;border-bottom:0;color:#cc6700;font-weight:bold;}
#submenu ul li a:hover{text-decoration:underline;border-bottom: 0;}