@charset "UTF-8";
/* CSS Document */

/******************************** CSS reset of browser ****************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/************************* benoem nu eerst de typografie ********************************/

@font-face {
    font-family: 'Masque';
    src:url('webfonts_Masque/Masque.ttf.woff') format('woff'),
        url('webfonts_Masque/Masque.ttf.svg#Masque') format('svg'),
        url('webfonts_Masque/Masque.ttf.eot'),
        url('webfonts_Masque/Masque.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

h1 {
/*	font-family: 			'Ultra', serif; */
	font-family: 			'Masque';
	font-size: 				2.5em;
	text-shadow: 			4px 4px 4px #aaa;
	margin-bottom:			-0.2em;
	margin-top:				1.5em;
	margin-left:			0.2em;							/* 0.5 / 2.5 */
	margin-right:			0.2em;
}

h2 {
	font-family: 			'Fondamento', cursive;
	font-size:				1.8em;
	text-shadow: 			4px 4px 4px #aaa;
	margin-bottom:			-0.2em;
	margin-top:				1em;
	margin-left:			0.2777em;						/* 0.5 / 1.8 */
	margin-right:			0.2777em;
}

h3 {
	font-family: 			'Comfortaa', cursive;
	font-size:				1.3em;
	text-shadow: 			3px 3px 3px #aaa;
	margin-bottom:			-0.2em;
	margin-top:				0.5em;
	margin-left:			0.3846em;						/* 0.5 / 1.3 */
	margin-right:			0.3846em;
}

h4 {
	font-family: 			'Andika', sans-serif;
	font-size:				1.3em;
	text-shadow: 			3px 3px 3px #aaa;
	margin-bottom:			-0.2em;
	margin-top:				0.5em;
	margin-left:			0.3846em;						/* 0.5 / 1.3 */
	margin-right:			0.3846em;
}

p {
	margin-top:				0.5em;
	margin-bottom:			0.5em;
	margin-left:			0.5em;
	margin-right:			0.5em;
}

.fontMasque {
	font-family:			'Masque';
}
.fontSnippet {
	font-family: 			'Snippet', sans-serif;
}
.fontAndika {
	font-family: 			'Andika', sans-serif;
}
.fontMaiden {
	font-family: 			'Maiden Orange', cursive;
}
.fontQuicksand {
	font-family: 			'Quicksand', sans-serif;
}
.fontMontaga {
	font-family: 			'Montaga', serif;
}
.fontFondamento {
	font-family: 			'Fondamento', cursive;
}
.fontStoke {
	font-family: 			'Stoke', serif;
}
.fontVampiro {
	font-family: 			'Vampiro One', cursive;
}
.fontUltra {
	font-family: 			'Ultra', serif;
}
.fontComfortaa {
	font-family: 			'Comfortaa', cursive;
}			

.lookUp {
	vertical-align:			text-bottom;
} 

.sCaps {
	font-variant:			small-caps;
	font-style:				normal;
}

.schreef {
	font-style:				italic;
}

.blok {
	display:				block;
}

td img.blok {
	margin-top:				0.3em;
}

td.bodem {
	vertical-align:			bottom;
}

.noBorders {
	padding:				0;
	margin:					0;
	border:					none;
}

a.sCaps:link {
	color:					#919191;
	text-decoration:		none;
}

td a.sCaps:link {
	color: 					#000; /*					#919191; */
	text-decoration:		none;
}

a.sCaps:visited {
	text-shadow: 			4px 4px 4px #aaa;
	color:					#3D3D3D;
}

td a.sCaps:visited {
	text-shadow: 			4px 4px 4px #aaa;
	color:					#3D3D3D;
}

a.sCaps:hover {
	color:					#000;
	border-top:				0.125em solid #666;				/* 2/16 */
	border-bottom:			0.125em solid #666;				/* 2/16 */
}

a.noLines:hover {
	color:					#000;
/*	border-top:				0.125em solid #666;				/* 2/16 */
/*	border-bottom:			0.125em solid #666;				/* 2/16 */
}

td a.sCaps:hover {
	color:					#000;
	border-top:				0.125em solid #666;				/* 2/16 */
	border-bottom:			0.125em solid #666;				/* 2/16 */
}

a.sCaps:active {
	color:					#FFF;
	background-color:		#919191;
}

td a.sCaps:active {
	color:					#FFF;
	background-color:		#919191;
}

p.centreer {
	margin-left:			auto;
	margin-right:			auto;
}

.olijf {
	color:					rgb(145, 148, 123);
}

.oranje {
	color:					rgb(249, 146, 97);
}

.oudroze {
	color:					rgb(185, 149, 162);
}

.rood {
	color:					rgb(239, 86, 82);
}

.abrikoos {
	color:					rgb(254, 205, 150);
}

.groen {
	color:					rgb(56, 149, 162);
}

.donkergrijs {
	color:					#333;
}

.mediumgrijs {
	color:					#666;
}

.grijs {
	color:					#999;
}

.lichtgrijs {
	color:					#CCC;
}


.schaduw {
	text-shadow: 		4px 4px 4px #aaa;
}
	

/****************************** zet nu de layout ****************************************/

	
* {
    margin:0;padding:0;
}

header,footer,div {
   width: 100%; 
}

html {
	background-image:		url(../media/site/buttons/sax-bg.png); 
}

.bodyOlijf {
	background-color:		rgb(145, 148, 123);				/* de achtergrondkleur verschilt per pagina en komt overeen met de knopkleur */
}

.bodyOranje {
	background-color:		rgb(249, 146, 97);
}

.bodyRoze {
	background-color:		rgb(185, 149, 162);
}

.bodyAbrikoos {
	background-color:		rgb(254, 205, 150);
}

.vet {
	font-weight:			bold;
}

html {
    height: 100%;
}


body {
	width:					94%;
	height:					94%;
	position:				relative; 						/* BELANGRIJK! */
	margin-top:				3%;								/* een bovenmarge vergelijkbaar met de marges links & rechts */ 
	margin-left:			auto;							/* om horizontaal te centreren */
	margin-right:			auto;							/* om horizontaal te centreren */		
	margin-bottom:			3%;
	background-color:		#FFF;
}

body:before {
	content:				"";
	position:				absolute;
	top:					0;
	bottom:					0;
	left:					0;
	right:					0;
	background-image:		url(../media/site/divers/logoBig.png);
	background-repeat:		no-repeat;						/* we willen één logo zien 		*/ 
	background-size:		contain; 						/* hierdoor schaalt het logo 	*/
	background-position:	center;   
	opacity:				0.2;
	z-index:				12;
}

header {
	position:				relative;
	height:					120px;
	overflow:				hidden;
	z-index:				1;
	background-size:		cover;
}

header.impressies {
	background-image:		url(../media/site/headers/saxoholics2012.png);
	background-position:	60% 40%;
}

header.info {
	background-image:		url(../media/site/headers/saxoholics2013-2.png);
	background-position:	40% 40%;
}

header.agenda {
	background-image:		url(../media/site/headers/saxoholics2013-3.png);
	background-position:	50% 30%;
}

header.wie {
	background-image:		url(../media/site/headers/saxoholics2013.png);
	background-position:	50% 40%;
}


.container {
    height: 100%;
	width:	100%;
    margin: -120px 0 -60px;
    padding: 120px 0 60px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#content {
    overflow:auto;
    height:100%;
}

.block {
	width:					33.33%; /* 32.62%; */
    height: 				100%;
	float:					left;					/* belangrijk: zonder de float: left krijg je geen drie kolommen aansluitend naast elkaar! */
	display: 				inline-block;
	-webkit-box-sizing:		border-box;
    -moz-box-sizing: 		border-box;
    box-sizing: 			border-box;
    text-align: 			justify;
/*	background-color:		pink; */
}

.scrollDiv {
	float:					left;
	position:				relative;
	width:					100%;
	max-height:				100%; /* 71.5981%; */
	overflow:				scroll;
	text-align:				justify;
	padding-left:			1%;
	padding-right:			1%;
/*	border: 				#FF0 dotted; 					/* geel alleen vanwege testen */
	z-index:				12;
}

footer {
    height: 60px;
    position: relative;
    z-index:12;
}

.homeButton {
	float:					left;
	width:					3em;
	height:					3em;
	padding-top:			0.5em;
	margin-left:			0.5em;
	background-repeat:		no-repeat;						/* we willen één logo zien 		*/ 
	background-position:	left;
}

.homeButton.oranje {
	background-image:		url(../media/site/buttons/home-oranje.png); 	/* center top no-repeat;		*/	
}

.homeButton.olijfgroen {
	background-image:		url(../media/site/buttons/home-olijfgroen.png); 	/* center top no-repeat;		*/	
}

.homeButton.oudroze {
	background-image:		url(../media/site/buttons/home-oudroze.png); 	/* center top no-repeat;		*/	
}

.homeButton.abrikoos {
	background-image:		url(../media/site/buttons/home-abrikoos.png); 	/* center top no-repeat;		*/	
}

.homeButton:hover {
	background-image:		url(../media/site/buttons/home-hover.png);
}

.sidkLogo {
	display:				block;
	float:					right;
	width:					5em;
	height:					2em;
	background-image:		url(../media/site/buttons/sidk.png);
	background-repeat:		no-repeat;					/* we willen één logo zien 		*/ 
	background-size:		contain; 					/* hierdoor schaalt het logo 	*/
	background-position:	right;
	margin-top:				1em;
	margin-right:			1em;
}

.sidkLogo:hover {
	background-image:		url(../media/site/buttons/sidk-grey.png);
}

table {
	width: 					96%;
	margin-left:			auto;
	margin-right:			auto;
}

td {
	vertical-align: 		top;
	background-color:		rgb(249, 146, 97);
	padding-left:			0.5em;
	padding-right:			0.5em;
}

td.fontMontaga {
	width:					30%;
}

td.fontStoke {
	width:					65%;
}

td img {
	max-width:				100%;
}

.iFramePagina {
	width:					100%;
	overflow:				auto;
	-webkit-overflow-scrolling:	touch;
}

iframe {
	float:					left;
	padding-left:			0.5em;
	padding-right:			0.5em;
	margin-left:			auto;
	margin-right:			auto;
	opacity:				0.5;
}