@charset "UTF-8";
/* Eenvoudige, dynamische media
   Opmerking: voor dynamische media moet u de hoogte- en breedtekenmerken voor de media verwijderen uit de HTML-code
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 biedt geen ondersteuning voor max-width en gebruikt standaard de breedte 100% */
.ie6 img {
	width:100%;
}

/*
	Eigenschappen van dynamisch raster van Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		9;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	30;
	
	Geïnspireerd door "Responsive Web Design" van Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	en "Golden Grid System" van Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobiele lay-out: 480 px en lager. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.8%;
	padding-left: 2.0999%;
	padding-right: 2.0999%;
	font-size: 12px;
}

#Header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 10px;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: auto;
	float: right;
	font-family: 'metapro-lightregular';
}

#SmaakLogo {
	clear: none;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 32px;
}

#Navigatie {
	clear: right;
	float: right;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 40px;
}

#SearchBar {
	float: right;
	margin-left: 0;
	width: 58.0645%;
	display: block;
	margin-top: 15px;
}

/* Search Box */

#search input[type="text"] {
	background: #fcfcfc url(../images/search-white.png) no-repeat 10px 6px;
	border: 1px solid #d1d1d1;
	font: 12px 'metapro-lightregular';
	color: #bebebe;
	width: 110px;
	padding: 6px 15px 6px 35px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 0px;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	-webkit-transition: all 0.7s ease 0s;
	-moz-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
	float: right;
    }
	
	#search input[type="text"]:focus {
    width: 160px;
	outline-style:solid;
    outline-color:#e10f49;/*your background color…	*/
    outline-width:0px;
    }
	
		/* Einde Search Box */

/* overlay gif */

div#overlay {
	display: none;
	z-index: 2;
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-align: center;
}

#specialWrapper {
	position:absolute;
	transform: translate(-50%,-50%);
	z-index: 6;
	width: 5120px; 
	height: 2880px;
	top: 50%;
	left: 50%;
	max-width: 100%;
	max-height: 100%;
	border: 50px dotted thick grey;
	box-sizing: border-box;
	}


#specialBox {
	z-index: 3;
	position:relative;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;

	box-sizing: border-box;
	
}

/* overlay gif */



	#Midden {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-size: 13px;
    }

	#KopMetStreep {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 10px;
	font-family: "metaotnormal";
	font-size: 18px;
	color: #4b4b4b;
    }

	#Streep {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    }

	#Fancybox {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 5px;
    }
	
	.NieuwsKop {
	font-family: 'metaotnormal';
	font-size: 16px;
	line-height: 130%;
	}

	#NieuwsKolomEen {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	margin-top: 25px;
	line-height: 150%;
	color: #4b4b4b;
	font-size: 13px;
    }

	#NieuwsKolomTwee {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	margin-top: 15px;
	line-height: 150%;
	color: #4b4b4b;
	font-size: 13px;
    }

	#NieuwsKolomDrie {
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	margin-top: 15px;
	line-height: 150%;
	color: #4b4b4b;
	font-size: 13px;
	float: left;
    }
	
	.Meer {
	font-family: 'metaotnormal';
	color: #e10f49;
}
	
#StreepTwee
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 30px;
	margin-bottom:5px;
}

#Wrapper
{
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: -255px;
	position: relative;
}

#ClearFooter
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 255px;
}

#Footer
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background: #f6f5f3;
	height: 365px;
	position: relative;
	min-height: 100%;
	z-index: -100;
	margin-top: 30px;
}

#ClearFooter .Kop {
	font-family: 'metaotnormal';
	font-size: 13px;
	line-height: 200%;
}

#FooterKolomEen
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	font-size: 13px;
	line-height: 140%;
	margin-top: 70px;
}

#FooterKolomTwee
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	font-size: 13px;
	line-height: 140%;
	margin-top: 15px;
}

#FooterKolomDrie
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 45px;
	text-align: center;
}

#AlgemeneVoorwaarden
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	font-size: 10px;
	color: 4b4b4b;
	margin-top: 15px;
	text-align: center;
}

#KeuzeBalkContainer
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#KeuzebalkEen
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#KeuzebalkTwee
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
    margin-right:8px;
}

#KeuzeBalkContainer
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#KeuzebalkEen
{
	clear: both;
	margin-left: 0;
	width: 130px;
	display: block;
	float:right;
}

#KeuzebalkTwee
{
	clear: none;
	margin-left: 1.9607%;
	width: 130px;
	display: block;
	float:right;
	margin-right:8px;
}

#MeerNieuws
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}



/* Tabletlay-out: 481 px tot 768 px. Neemt stijlen over van: mobiele lay-out. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.3173%;
	padding-left: 1.3413%;
	padding-right: 1.3413%;
}
#Header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 12px;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: auto;
	float: right;
	font-family: 'metapro-lightregular';
}

#SmaakLogo {
	clear: both;
	float: left;
	margin-left: 0px;
	width: 22.7722%;
	display: block;
	margin-top: 32px;
}
#Navigatie {
	clear: right;
	float: right;
	margin-left: 0;
	width: 74.2574%;
	display: block;
	margin-top: 22px;
}
#SearchBar {
	float: right;
	margin-left: 0px;
	width: 35.6435%;
	display: block;
	clear: right;
	margin-top: 65px;
}

/* Search Box */

#search input[type="text"] {
	background: #fcfcfc url(../images/search-white.png) no-repeat 10px 6px;
	border: 1px solid #d1d1d1;
	font: 12px 'metapro-lightregular';
	color: #bebebe;
	width: 110px;
	padding: 6px 15px 6px 35px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 0px;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	-webkit-transition: all 0.7s ease 0s;
	-moz-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
	float: right;
    }
	
	#search input[type="text"]:focus {
    width: 160px;
	outline-style:solid;
    outline-color:#e10f49;/*your background color…	*/
    outline-width:0px;
    }
	
	/* Einde Search Box */

	#Midden {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    }

	#KopMetStreep {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 45px;
	font-family: "metaotnormal";
	font-size: 21px;
	color: #4b4b4b;
    }

	#Streep {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    }

	#Fancybox {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 10px;
    }
	
	.NieuwsKop {
	font-family: 'metaotnormal';
	font-size: 21px;
	line-height: 130%;
	}

	#NieuwsKolomEen {
	clear: none;
	float: left;
	width: 31.5789%;
	display: block;
	margin-top: 30px;
	font-family: 'metapro-lightregular';
	font-size: 15px;
	line-height: 150%;
	color: #4b4b4b;
    }

	#NieuwsKolomTwee {
	clear: none;
	float: left;
	width: 31.5789%;
	display: block;
	margin-top: 30px;
	font-family: 'metapro-lightregular';
	font-size: 15px;
	line-height: 150%;
	color: #4b4b4b;
    	margin-left: 2.6315%;
}

	#NieuwsKolomDrie {
	clear: none;
	display: block;
	width: 31.5789%;
	margin-top: 30px;
	font-family: 'metapro-lightregular';
	font-size: 15px;
	line-height: 150%;
	color: #4b4b4b;
	float: left;
    	margin-left: 2.6315%;
}
	
	.Meer {
	font-family: 'metaotnormal';
	color: #e10f49;
}

#StreepTwee
{
	clear: right;
	float: left;
	margin-left: 0;
	display: block;
	margin-top: 30px;
	margin-bottom:10px;
}

#Wrapper
{
	width: 100%;
	margin-bottom: -255px;
	position: relative;
}

#ClearFooter
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 255px;
}

#Footer
{
	clear: both;
	float: left;
	width: 100%;
	display: block;
	height: 265px;
	position: relative;
	min-height: 100%;
	z-index: -100;
	margin-top: 70px;
}
#ClearFooter .Kop {
	font-family: 'metaotnormal';
	font-size: 13px;
	line-height: 200%;
}

#FooterKolomEen
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 31.5789%;
	display: block;
	font-family: 'metapro-lightregular';
	font-size: 13px;
	line-height: 140%;
	margin-top: 110px;
}

#FooterKolomTwee
{
	clear: none;
	float: left;
	margin-left: 2.6315%;
	width: 31.5789%;
	display: block;
	font-family: 'metapro-lightregular';
	font-size: 13px;
	line-height: 140%;
	margin-top: 110px;
}

#FooterKolomDrie
{
	clear: none;
	float: left;
	margin-left: 2.6315%;
	width: 31.5789%;
	display: block;
	margin-top: 270px;
	text-align: right;
}

#AlgemeneVoorwaarden
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	font-size: 11px;
	color: 4b4b4b;
	margin-top: 10px;
	text-align: right;
}

#KeuzeBalkContainer
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#KeuzebalkEen
{
	clear: both;
	float: right;
	margin-left: 0;
	width: 180px;
	display: block;
}

#KeuzebalkTwee
{
	clear: none;
	float: right;
	margin-left: 2.6315%;
	width: 180px;
	display: block;
    margin-right:8px;
}

#MeerNieuws
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

}

/* Bureaubladlay-out: 769 px tot maximaal 1232 px.  Neemt stijlen over van: mobiele lay-out en tabletlay-out. */

@media only screen and (min-width: 769px) {
.gridContainer.clearfix #Header {
}
.gridContainer.clearfix #Header #SmaakLogo {
	float: left;
	margin-top: 32px;
}
.gridContainer.clearfix #Midden #Streep {
}
.gridContainer.clearfix #Header #Navigatie {
	clear: right;
	float: right;
	margin: 20px 0px 0px;
}
.gridContainer.clearfix #Midden #KopMetStreep {
	margin-top: 55px;
	font-size: 21px;
	font-family: "metaotnormal";
	color: #4b4b4b;
}
.gridContainer.clearfix #Header #SearchBar {
	clear: right;
	float: right;
	margin-top: 65px;
}
.gridContainer.clearfix #Midden {
}
.gridContainer {
	width: 88.2692%;
	max-width: 1232px;
	padding-left: 0.8653%;
	padding-right: 0.8653%;
	margin: auto;
}
#Header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 12px;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: auto;
	float: right;
	font-family: 'metapro-lightregular';
}

#SmaakLogo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 15.0326%;
	display: block;
}
#Navigatie {
	clear: right;
	float: right;
	margin-left: 0;
	width: 83.0065%;
	display: block;
}
.gridContainer.clearfix #Midden #Fancybox {
	margin: 15px 0px 0px;
}
#SearchBar {
	clear: right;
	float: right;
	margin-left: 0;
	width: 32.0261%;
	display: block;
}

#search input[type="text"] {
	background: #fcfcfc url(../images/search-white.png) no-repeat 10px 6px;
	border: 1px solid #d1d1d1;
	font: 12px 'metapro-lightregular';
	color: #bebebe;
	width: 110px;
	padding: 6px 15px 6px 35px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 0px;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
	-webkit-transition: all 0.7s ease 0s;
	-moz-transition: all 0.7s ease 0s;
	-o-transition: all 0.7s ease 0s;
	transition: all 0.7s ease 0s;
	float: right;
    }
	
	#search input[type="text"]:focus {
    width: 160px;
	outline-style:solid;
    outline-color:#e10f49;/*your background color…	*/
    outline-width:0px;
    }
	
	/* Einde Search Box */

	#Midden {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    }

	#KopMetStreep {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: "metaotnormal";
	font-size: 21px;
	color: #4b4b4b;
	margin-top: 55px;
    }

	#Streep {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    }

	#Fancybox {
	clear: none;
	float: left;
	margin-left: 1.9607%;
	width: 100%;
	display: block;
	margin-top: 15px;
	height: auto;
    }
	
	.NieuwsKop {
	font-family: 'metaotnormal';
	font-size: 21px;
	line-height: 130%;
	}
.gridContainer.clearfix #Wrapper #Midden #ClearFooter {
	height: 255px;
	width: 100%;
}
	
	#NieuwsKolomEen {
	clear: both;
	float: left;
	margin-left: 0;
	width: 32.0261%;
	display: block;
	margin-top: 30px;
	font-family: 'metapro-lightregular';
	font-size: 15px;
	color: #4b4b4b;
	line-height: 150%;
    }
.gridContainer.clearfix #Wrapper {
	width: 100%;
	margin-bottom: -255px;
	position: relative;
}

	#NieuwsKolomTwee {
	clear: none;
	float: left;
	margin-left: 1.9607%;
	width: 32.0261%;
	display: block;
	margin-top: 30px;
	font-family: 'metapro-lightregular';
	line-height: 150%;
	color: #4b4b4b;
	font-size: 15px;
    }

	#NieuwsKolomDrie {
	clear: none;
	float: left;
	margin-left: 1.9607%;
	width: 32.0261%;
	display: block;
	margin-top: 30px;
	font-family: 'metapro-lightregular';
	color: #4b4b4b;
    }

.Meer {
	font-family: 'metaotnormal';
	color: #e10f49;
}

#StreepTwee
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 30px;
	margin-bottom: 10px;
}

#Wrapper
{
}

#ClearFooter
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 255px;
}

#Footer
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background: #f6f5f3;
	height: 260px;
	position: relative;
	min-height: 100%;
	z-index: -100;
	margin-top: 70px;
}

#ClearFooter .Kop {
	font-family: 'metaotnormal';
	font-size: 13px;
	line-height: 200%;
}

#FooterKolomEen
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 23.5294%;
	display: block;
	margin-top: 110px;
	font-family: 'metapro-lightregular';
	font-size: 13px;
	line-height: 140%
}

#FooterKolomTwee
{
	clear: none;
	float: left;
	margin-left: 1.9607%;
	width: 40.5228%;
	display: block;
	margin-top: 110px;
	font-family: 'metapro-lightregular';
	font-size: 13px;
	line-height: 140%
}

#FooterKolomDrie
{
	clear: none;
	float: left;
	margin-left: 1.9607%;
	width: 32.0261%;
	display: block;
	margin-top: 260px;
	text-align: right;
}

#AlgemeneVoorwaarden
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family: 'metapro-lightregular';
	font-size: 11px;
	color: 4b4b4b;
	margin-top: 10px;
	text-align: right;
}

#KeuzeBalkContainer
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#KeuzebalkEen
{
	clear: both;
	margin-left: 0;
	width: 180px;
	display: block;
	float:right;
}

#KeuzebalkTwee
{
	clear: none;
	margin-left: 1.9607%;
	width: 180px;
	display: block;
	float:right;
	margin-right:8px;
}

#MeerNieuws
{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family:"metaotnormal";
	font-size:16px;
}

}