/*** PRESETS ***/

body{
	font-family: 'PT Sans', sans-serif;
	color: #353535;
}

.banner{ /*background :#e6dfb6;*/ }
.banner a{ width: 100%; height: 100%; padding: 0; float: left;}
.marginTop15{ margin-top: 15px; }

.gris{ background-color: #e0dfdf;}
.blue{ background-color: #99c2de;}
.grisTxt{color: #353535;}

h1:hover, 
h2:hover, 
h3:hover{ color: #6b1212;}

.mobi{ display: none;}
.strong{ font-weight: 800;}

/*** HEADER ***/

header{ position: relative;}

header h4{font-family: 'Libre Baskerville', serif; color: #ac1b10; font-size:2.2em; padding: 0 0 0.2%; margin:0.6em 0 0 0;}
header h5{font-family: 'Libre Baskerville', serif; font-size: 1.4em; margin: 0 0 1em 0;}

header div{ 
	float: right; 
	position: absolute; 
	top: 0;
	right: 0;
	padding: 4px 0 0 0;
}

header div span, header div a{ display: block; float: right; margin: 0 2px;}
header .date{ padding: 2px; }
header .edition{ padding: 4px; background-color: #f2f2f2; font-size: 0.8em; font-weight: bold;}
header .twitter{ padding: 4px 2px; }
header .facebook{ padding: 4px 2px 4px 4px; }


/*** STRUCTURE ***/

.primaryContainer {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 1150px;
}

#cntLeft {
    float: left;
    height: auto;
    margin: 15px 0;
    clear: none;
    width: 48.79%;
}
#cntRight {
    float: left;
    height: auto;
    margin: 15px 0 15px 2.40%;
    clear: none;
    width: 48.80%;
}

#banner1, #banner2, #banner3, #banner4, #banner5, #banner6 {
    float: left;
    height: 67px;
    clear: left;
    width: 100%;
}
.banner{ overflow: hidden;}
.banner img{ width: 100%; height: 100%;}

#art1, #art2 {
    float: left;
    height: 445px;
    clear: left;
    width: 100%;
	position: relative;
}
#art1:hover, #art2:hover{ background-color:#d1d1d1; color: #fff;}

#foto1, #foto2 {
    float: left;
    height: 65%;
    margin: 0px;
    clear: none;
    width: 100%;
	overflow: hidden;
}
#foto1 img, #foto2 img{ max-width: 100%;}

#box10, #box16 {
    float: left;
    height: auto;
    clear: both;
    width: 100%;
}

#local1, #local2 {
    float: left;
    height: 445px;
    margin: 0%;
	padding: 0;
    clear: none;
    width: 47.57%;
	list-style: none;
	overflow: hidden;
}
.local li{
	width: 90%;
	height: auto;
	margin: 4% 5%;
	padding: 0 0 4% 0;
	border-bottom: dotted 1px #bababa;
	height: 27.60%; overflow: hidden;
}
.local h2{
	padding: 0 0 1.5%;
	margin: 0;
	font-size: 0.90em;
    text-align: left;
    font-weight: 800;
    line-height: 1.4em;
    word-wrap: break-word;
	color: #303030;
}
.local p{
	font-size: 0.78em;
    text-align: left;
    font-weight: 400;
    line-height: 1.4em;
    word-wrap: break-word;
    overflow: hidden;
}

#meteo {
    float: right;
    height: 233px;
    margin-left: 0px;
    margin-top: 0px;
    clear: none;
    width: 47.45%;
    margin-right: 0%;
}
#meteo ul{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
#meteo li{
	display: block;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 33.32%;
	height: auto;  		
}
#meteo li .img{
	display: block;
	float: left;
	width: 100%;
	height: 50%;
	background-color: #9bbcbf;
	padding: 20% 0;  
}
#meteo li .img img{ margin: 0 auto; display: block;}
#meteo li .temp{
	display: block;
	float: left;	
	width: 100%;
	height: 40%;
	padding: 16% 0;
	text-align: center; 
	color: #353535; 
}
#meteo li .temp em{ float: left; width: 100%; font-style: normal; line-height: 1.45em; font-size: 0.9em;}
#meteo li .temp b{ float: left; clear: both; width: 100%;}		
#meteo li .temp:hover{ color: #BB0A0A;}
#link2 {
    float: right;
    height: 92px;
    margin-left: 0px;
    margin-top: -198px;
    clear: right;
    width: 47.45%;
}

#link1 {
    float: right;
    height: 92px;
    margin-left: 0px;
    margin-top: 120px;
    clear: right;
    width: 47.45%;
}
.link{ position: relative; }
.link img{ max-width: 100%;}
.link p{    
	background-color: #BB0A0A;
    color: #FFFFFF;
    font-weight: 800;
    left: 10px;
    padding: 2% 4%;
    position: absolute;
    bottom: 10px;
	z-index: 99;
	-moz-opacity: 0.90;
	opacity: 0.90;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=90);	
}

#column1, #column2 {
    float: right;
    height: 133px;
    clear: none;
    width: 42.47%;
	padding: 9.5% 2.5% 5% 2.5%;
	position: relative;
}
.column a{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;   
}
.column h3{
	padding: 0 0 1.5%;
	margin: 0;
	font-size: 0.88em;
    text-align: left;
    font-weight: 800;
    line-height: 1.4em;
    word-wrap: break-word;
	color: #303030;
}
.column p{
	font-size: 0.78em;
    text-align: left;
    font-weight: 400;
    line-height: 1.4em;
    word-wrap: break-word;
    overflow: hidden;
}

#art1 .holder, #art2 .holder{
	float: left;
	height: 28.80%;
	width: 90%;
	padding: 2.50% 5%;
	overflow: hidden;
} 
h1 {
    float: left;
    clear: both;
    width: 100%;
    height: auto;
    min-height: 9.66%;
	margin: 0;
	padding: 0 0 1.50% 0;	
	color: #303030;
	font-size: 1em;
    text-align: left;
    font-weight: 800;
    line-height: 1.4em;
    word-wrap: break-word;
}
#art1 .txt, #art2 .txt {
    float: left;
	clear: both;
	width: 100%;
    height: auto;
	max-height: 58%;
    margin: 0;

	font-size: 0.8em;
    text-align: left;
    font-weight: 400;
    line-height: 1.5em;
    word-wrap: break-word;
    overflow: hidden;
}
span.plus{ position: absolute; bottom: 0px; right: 0px; background-color: #b1b1b1; color: #fff; display: block; padding: 4px 10px; cursor: pointer;}
span.plus:hover{ background-color:#C00;}
span.ribbon{ position: absolute; top: 10px; left: -0.80%; background-color: #bb0a0a; color: #fff; font-weight: 800; padding: 2% 4%; border-bottom: solid 1px #890c0c;}

footer{
	width: 100%;
	background-color: #414141;
	color: #fff;
	display: block;
	float: left;
	padding: 20px 0;
	font-size: 0.9em;
}
footer a{ color: #fff; text-decoration: none;}
footer p{ width: 40%; margin: 0 2.5%;}
footer p.left{ float: left;}
footer p.right{ float: right; text-align: right;}

.interna p{
	font-size: 0.85em;
    line-height: 1.5em;
    text-align: left;
    word-wrap: break-word;
}
.interna h1{font-size: 1.4em; padding: 0 0 18px 0; color: #303030;}
.interna h1:hover{color: #303030;}
.interna img.align{ margin: 0 25px 10px 0; max-width: 100%; }
.interna .banner{ margin: 0 0 18px 0;}

.interna .article{ margin: 0 0 24px 0; border-bottom: 1px dotted #BABABA; padding: 0 0 18px 0;}

#paging {
    background-color: #EED1D4;
    display: block;
	float: left;
	height: auto;
    margin: 0 0 18px 0;
    padding: 0;
    width: 100%;
	font-size: 0.9em;
}
#pagingPrev, #pagingPages, #pagingNext {
    display: block;
    float: left;
    width: 27%;
}
#pagingPages{ width: 40%;}
#pagingPrev {
    font-weight: bold;
    padding: 8px 10px;
    text-align: left;
}
#pagingPages {
    font-weight: bold;
    padding: 8px 0;
    text-align: center;
}
#pagingNext {
    font-weight: bold;
    padding: 8px 0;
    text-align: right;
}
#paging a:link {
    color: #BB0310;
    text-decoration: none;
}
#paging a:visited {
    color: #BB0310;
    text-decoration: none;
}
#paging a:hover {
    color: #BB0310;
    text-decoration: underline;
}
#paging a:active {
    color: #BB0310;
    text-decoration: none;
}

/* calendar*/
.calArticle {
    background-color: #E6E4DD;
    border: 1px solid #CFCDC7;
    padding: 8px;
	font-size: 0.9em;
}

/* columns*/
.profile {
    background-color: #E7E7E6;
    border: 1px solid #DADADA;
    display: block;
    margin: 20px 0;
    padding: 2%;
    width: 96%;
	float: left;
}
.profile img {
    float: left;
    margin-right: 5%;
}

/* adverteren*/
.prijslijst {
    background-color: #E7E7E6;
    border-bottom: 1px solid #DADADA;
    border-top: 1px solid #DADADA;
    display: block;
    font-size: 13px;
    padding: 20px;
    width: 313px;
}

/* links*/
.interna table.table{
    border-collapse: separate;
    border-spacing: 1px;	
}
.interna .table tr {
    background-color: #E7E7E6;
}
.interna .table th {
    background-color: #DBDBD9;
    padding-left: 10px;
}
.interna .table td {
    padding-left: 10px;
}

/* adwords */
.adwords{
	clear: left;
    float: left;
    height: auto;
    width: 100%;
	margin: 15px 0 0 0;
}

@media only screen and (max-width: 1030px) {

   .primaryContainer {
        width: 90%;
   }

   #cntLeft, #cntRight {
        float: left;
        height: auto;
        margin-left: 0%;
        clear: none;
        width: 48.78%;
   }
   #cntRight { margin-left: 2.41%; }

   #art1, #art2 {
        clear: both;
        width: 100%;
   }
   #foto1, #foto2 {
        float: left;
        clear: none;
        width: 100%;
   }
   #foto1 img, #foto2 img {
		width: auto;
		min-width: 100%;
		min-height: 100%;
	} 
   
   #banner1, #banner2, #banner3, #banner4 {
        float: left;
        height: auto;
        clear: none;
        width: 100%;   
   }

	.banner img{ height: 45px;}

   #box10, #box16  {
        float: left;
        height: auto;
        clear: both;
        width: 100%;
   }

   #local1, #local2 {
        float: left;
        height: 445px;
        clear: none;
        width: 47.58%;
   }
   .local li{ height: 28.30%; overflow: hidden;}

   #meteo {
        float: left;
        height: 233px;
        margin-left: 4.82%;
        margin-top: 0px;
        clear: none;
        width: 47.45%;
   }
   
   #link2 {
        float: left;
        height: 92px;
        margin-left: -47.45%;
        margin-top: 246px;
        clear: none;
        width: 47.45%;
   }
   #link1 {
        float: left;
        height: 92px;
        margin-left: -47.45%;
        margin-top: 353px;
        clear: none;
        width: 47.45%;
   }

   #column1, #column2 {
        float: right;
        height: 148px;
        clear: none;
		padding-top: 10.1%;
   }
   .column .ribbon{ left: -0.2em;}
}
@media only screen and (max-width: 768px) {
	.noMobi{ display: none;}

   #column1, #column2 {
        height: 148px;
		padding-top: 14%;
		padding-bottom: 6.20%;
   }
   .link{ overflow: hidden;}
   .link img{ height: 100%; width: auto; max-width:none;}
   
	#meteo li .temp em{ float: left; width: 100%; font-style: normal; line-height: 1.45em; font-size: 0.78em;}
	#meteo li .temp b{ float: left; clear: both; width: 100%; font-size: 0.78em;}		

    .link p{ font-size: 0.85em;  left: 4px;}
}
@media only screen and (max-width: 720px) {

   #art1, #art2 {
        height: 300px;
   }
   #art1 .holder, #art2 .holder{ height: 30%;}
   #art1 .txt, #art2 .txt{ height: 45%; font-size: 0.75em;}
   
   h1{ font-size: 0.85em;}   
   
   #foto1 img, #foto2 img {
		width: auto;
		min-width: 100%;
		min-height: 100%;
	}   

   #local1, #local2 {
        height: 300px;
   }
   .local li{ height: 28.50%; overflow: hidden;}
   .local h2{ font-size: 0.8em;}
   .local p{ font-size: 0.75em;}

   #meteo {
        height: 150px;
   }
   #link2 {
        margin-top: 164px;
        margin-left: -47.49%;
        clear: none;
        height: 60px;
   }
   #link1 {
        height: 60px;
        margin-top: 240px;
        margin-left: -47.49%;
        clear: none;
   }
   #column1, #column2 {
        height: 87px;
		padding-top: 12.80%;
   }
   .column .ribbon{ font-size: 0.85em;  padding: 3% 4%;}
   .column h3{ font-size: 0.80em;}
   .column p { font-size: 0.75em;} 
	
}
@media only screen and (max-width: 480px) {
	.noMobi{ display: none;}
	.mobi{ display: inline;}

	header h4{font-size:2.0em; }
	header h5{font-size: 1em; line-height: 1.45em; }
	header div{ font-size: 0.86em; display: none;}

   #cntLeft {
        width: 100%;
		margin-bottom: 0;
   }   
   #cntRight {
        width: 100%;
        margin-left: 0%;
        margin-top: 15px;
        clear: both;
   }
   #art1, #art2 {
        width: 100%;
        height: 124px;
   }
   #foto1, #foto2 {
        height: 124px;
        width: 42.44%;
        margin-top: 0px;
        margin-left: 0%;
   }
   
	#foto1 img, #foto2 img {
		width: 100%;
	}   

	#art1 .holder, #art2 .holder{ 
		float: left;
		clear: none;
		width: 47.56%;
		height: 85%;
	}
	
	h1{ padding: 0 0 3.0% 0; }
	#art1 .txt, #art2 .txt {
    	font-size: 0.75em;
    	height: 50%;
	}

   #box10 {
        margin-top: 15px;
        margin-left: 0%;
        clear: both;
        width: 100%;
   }

   #local1, #local2 {
        height: auto;
        width: 100%;
   }
   
   .banner img{ height: 50px;}
   
   #meteo {
        margin-top: 15px;
        margin-left: 0%;
        clear: both;
        height: 136px;
   }
   
   #link2 {
        margin-top: -136px;
        margin-left: 52.44%;
        clear: none;
   }
   #link1 {
        margin-top: 90px;
        margin-left: 0px;
        clear: none;
        margin-right: 0%;
        float: right;
   }
   .link img{ height: 100%; width: auto; width:100%;}

   #column1, #column2 {
        width: 100%;
        height: auto;
		margin-top: 15px;
		padding-top: 15%;
   }
   
   footer p{ width: 90%; margin: 1.4% 2.5%; font-size: 0.94em; }
   footer p.left{ float: left; text-align: center; font-size: 0.90em;}
   footer p.right{ float: left; clear: left; text-align: center; }
   
   .interna h1{font-size: 1.2em;}
   
   #pagingPages{ display: none;}
   
}
@media only screen and (max-width: 320px) { 
 
	header h4{font-size:1.8em; }
	header h5{font-size: 0.85em; line-height: 1.45em; } 
 	header .date{ display: none;}
	
	.banner img{ height: 38px;}
 
	#foto1 img, #foto2 img {
		width: auto;
		max-width: none;
		max-height: 100%;
	}
	span.ribbon{ font-size: 0.8em;}
	#column1, #column2 {
		padding-top: 18%;	
	}
}