
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);

body
{
	color: #050505;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 1px;
  background:#FFFFFF;
}

table 
{
	margin-left: auto; margin-right: auto;
}

td
{
	font-size: 11px;
	text-align: left;
}

td.di1
{
	text-align: left;
	font-weight: bold;	
}

td.di2
{
	text-align: right;
}

td.di3
{
	text-align: center;
	
}

.header
{
  background:url("https://www.surfplaza.be/2014/images/header-bg3.gif");		
	height: 89px;
}

.header2
{
  background:url("https://www.surfplaza.be/2014/images/header-bg2.gif");		
	height: 89px;
}

.header-nav
{
  background:url("https://www.surfplaza.be/2014/images/nav.gif");		
	height: 26px;
  text-transform: uppercase;	
	border-top: solid #EBEBEB 1px;
	font-size: 11px;
}

.header-nav2
{
  background:url("https://www.surfplaza.be/2014/images/nav.gif");		
	height: 22px;
	vertical-align: middle;
  text-transform: uppercase;	
	border-right: solid #DCDCDD 1px;
	border-left: solid #DCDCDD 1px;  
	border-bottom: solid #DCDCDD 1px;  
	font-size: 10px;
}

th
{
	font-size: 11px;
	height: 22px;
	text-align: left;
	background-color: #FDC95B;
	border-left: solid #FDC95B 8px;	
}

th.hi2
{
	text-align: right;
	border-right: solid #FDC95B 4px;
	font-weight: normal;	
	font-family: Annie Use Your Telescope, Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing:0.2em;		
}

th.hi3
{
	font-size: 11px;
	height: 23px;
	text-align: left;
	background-color: #FDC95B;
	border-left: solid #FDC95B 5px;	
}



.search
{
  background-color: #E5E5E5;		
	vertical-align: middle;
  padding: 12px;			
  margin-top:1px;
  margin-bottom:5px;
}


.nieuws
{
  background:url("https://www.surfplaza.be/2014/images/grey.png");		
	border-left: solid #D3D4D4 1px;	
	border-top: solid #D3D4D4 1px;		
	border-right: solid #D3D4D4 1px;			
}

.netontdekt
{
  background:url("https://www.surfplaza.be/2014/images/grey.png");		
	border-top: solid #D3D4D4 1px;	
	border-right: solid #D3D4D4 1px;			
}


.main1
{
	text-align: center;	
}

.main2
{
	text-align: center;
	border-left: solid #D3D4D4 1px;	
	border-right: solid #D3D4D4 1px;				
}

.main3
{
	text-align: center;			
}

.main4
{

	border-top: solid #D3D4D4 1px;	
	border-left: solid #D3D4D4 1px;		
	border-right: solid #D3D4D4 1px;				
}

.col1
{
	font-weight: bold;
	color: #FFFFFF;
	height: 24px;
	text-align: left;
	background-color: #002F5E;
	border-left: solid #002F5E 5px;	
}

.col1b
{
	font-weight: bold;
	color: #FFFFFF;
	height: 24px;
	text-align: left;
	background-color: #002F5E;
	border-left: solid #002F5E 5px;	
}

.col2
{
	font-weight: bold;	
	color: #050505;
	height: 24px;
	text-align: left;
	background-color: #FDC95B;
	border-left: solid #FDC95B 5px;	
}

.col2b
{
	font-weight: bold;	
	color: #FFFFFF;
	height: 24px;
	text-align: left;
	background-color: #41781D;
	border-left: solid #41781D 5px;	
}

.col3
{
	font-weight: bold;	
	color: #FFFFFF;
	height: 24px;
	text-align: left;
	background-color: #6699CC;
	border-left: solid #6699CC 5px;	
}

.content1
{
	border-top: solid #FFFFFF 5px;	
	vertical-align: top;		
	height: 131px;					
}

.content1b
{
  background:url("https://www.surfplaza.be/2014/images/combell.png");
	border-top: solid #FFFFFF 5px;	
	vertical-align: top;		
	height: 131px;					
}

.content2
{
	border-top: solid #FFFFFF 5px;	
	vertical-align: top;		
	height: 100px;					
}

.content3
{
	border-top: solid #FFFFFF 5px;	
	vertical-align: top;		
	height: 80px;					
}

.content4
{
  padding-top: 7px;
	padding-left: 10px;
	padding-right: 7px;		
	padding-bottom: 11px;							
}


.content4 a
{
display: block;
	line-height: 16px;
margin-bottom: -6px;
}


.content4 .head
{
	line-height: 22px;

}

.content4b
{
  padding-top: 7px;
	padding-left: 10px;
	padding-right: 7px;		
	padding-bottom: 11px;							
}

.content4b a
{
	display: block;
	line-height: 16px;
margin-bottom: -6px;					
}

.content4b .head
{

	line-height: 22px;

}


.grey
{
	font-size: 10px;
  color: #C1C1C1;
}

.grey2
{
    color: #C1C1C1;
    font-family: arial;
    font-size: 10px;
}

.hcom
{
    color: #0030C5;
    font-weight: bold;

}
	

.blue
{
    color: #0030BF;
    font-weight: bold;
		font-size: 11px;
}

.blue2
{
    color: #0030BF;
    font-size: 11px;
}

.blue3
{
    color: #0030BF;
    font-weight: bold;
		font-size: 13px;
}

.head
{
    color: #111;
    font-weight: bold;
		line-height: 17px;	
}

.footer
{
    padding: 6px;
		font-size: 11px;
		color: #666; 
}


A
{

	text-decoration: none;
	color: #0030BF; 
	line-height: 17px;	

}
A:link {color: #0030BF; }
A:active {color: #666666;}
A:hover {color: #666666;}


A.sel
{
	font-weight: bold;
}

A.sel2
{
	font-weight: bold;
	font-size: 11px;
	font-family: verdana;
}


A.link
{

	text-decoration: none;
	color: #0030BF;


}
A.link:link {color: #0030BF; }
A.link:active {color: #666666;}
A.link:hover {color: #666666;}

A.more
{

	text-decoration: none;
	color: #0030BF; 
	font-weight: bold;

}
A.more:link {color: #0030BF; }
A.more:active {color: #666666;}
A.more:hover {color: #666666;}

A.normal
{

	text-decoration: none;
	color: #0030BF; 
	line-height: 12px;
	font-weight: normal;

}
A.normal:link {color: #0030BF; }
A.normal:active {color: #666666;}
A.normal:hover {color: #666666;}

input 
{
	font-size: 13px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.button 
{
	font-size: 13px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.select 
{
	font-size: 13px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.cl{clear:both;}
div.center_screen{width:880px;margin:auto;min-height:100%;}
div.main_screen{width:747px;float:left;}
div.side_screen{width:120px;float:right;margin-top:130px;}
div.di1{float:left;height:70px;}
div.di1 a{height:100%;display:block;position:relative;}
div.di1 img{position:absolute;bottom:0;left:20px;}
div.di2{float:right;margin-top:10px;margin-right:10px;height:60px;width:468px;}
div.di3{float:right;margin-top:10px;margin-right:10px;}
header{margin-top:10px;border:1px solid #DCDCDD;border-top-right-radius:10px;border-top-left-radius:10px;}
div.header{border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden;
background-color:#fff;background-repeat:no-repeat;background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DDDDDD', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
background-image:-moz-linear-gradient(top, rgba(255, 255, 255,0.3) 0%, rgba(255, 255, 255,0.8) 100%);
background-image:-webkit-linear-gradient(top, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 100%);
background-image:-o-linear-gradient(top, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 100%);
background-image:-ms-linear-gradient(top, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,221,221,0.3)), color-stop(100%,rgba(255, 255, 255,0.8)));
background-image:linear-gradient(to bottom, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 100%);}
div.header-nav {background-image:none;
background-color:#fff;background-repeat:no-repeat;background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DDDDDD',GradientType=0 ); /* IE6-9 */
background-image:-moz-linear-gradient(top, rgba(255, 255, 255,0.8) 0%, rgba(221, 221, 221,0.5) 100%);
background-image:-webkit-linear-gradient(top, rgba(255, 255, 255,0.8) 0%, rgba(221, 221, 221,0.5) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255,0.8) 0%, rgba(221, 221, 221,0.5) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255,0.8) 0%, rgba(221, 221, 221,0.5) 100%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(221, 221, 221,0.8)));
background-image:linear-gradient(to bottom, rgba(255, 255, 255,0.8) 0%, rgba(221, 221, 221,0.5) 100%);}
div.header-nav > a{display:block;float:left;padding:0 14px;line-height:normal;margin-top:7px;border-right:1px solid rgb(221, 221, 221); }
div.header-nav a.last{border-right:0px solid black!important;}

div.gele_balk{width:100%;height:28px;margin-top:5px;background:#FDC95B;}
div.fl_left{display:inline-block;padding-left:10px;line-height:28px;color: #111111;font-size:11px;font-weight:bold;}
.hi2 {float: right;line-height: 28px;padding-right: 10px;letter-spacing: 0.2em;font-family: Annie Use Your Telescope, Arial, Helvetica, sans-serif;font-size: 15px;font-weight: normal;width: auto;display: inline-block;}

div.search{padding-bottom:5px;}
div.search div.fl_left{padding-left:50px;padding-top:0px;}
div.search div.fl_right{display:inline-block;vertical-align:10px;}

div.col-md-12{width:100%;float:left;}
div.laatste-nieuws{width:99.7%;width:calc(100% - 3px);border:1px solid #D3D4D4;font-size:11px;}
.gradient{
background-color:#fff;background-repeat:no-repeat;background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DDDDDD', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
background-image:-moz-linear-gradient(top, rgba(255, 255, 255,0.3) 0%, rgba(255, 255, 255,0.8) 30%);
background-image:-webkit-linear-gradient(top, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 30%);
background-image:-o-linear-gradient(top, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 30%);
background-image:-ms-linear-gradient(top, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 30%);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,221,221,0.3)), color-stop(30%,rgba(255, 255, 255,0.8)));
background-image:linear-gradient(to bottom, rgba(221, 221, 211,0.3) 0%, rgba(255, 255, 255,0.8) 30%);}
div.col-md-8{width:66.66666666%;float:left;}
div.col-md-4{width:33.33333333%;float:left;}
div.col-md-88{width:50%;float:left;}
div.col-md-44{width:50%;float:left;}


div.nieuws{background-image:none;border:0px;width:50%;width:calc(50% - 1px);heights: 240px;border-right:1px solid #D3D4D4;}
div.netontdekt{background-image:none;border:0px;heights: 240px;}



div.blokjes{font-size:11px;border-left:1px solid #D3D4D4;border-right:1px solid #D3D4D4;border-bottom:1px solid #D3D4D4;border-top:0px;overflow:hidden;width:99.7%;width:calc(100% - 3px);}
div.main2{width:33%;width:calc(33.33333333% - 2px);}
div.col3, div.col2, div.col1, div.col1b{border-left:0px;margin:9px 10px 0px 10px;padding:6px 0px 6px 10px;font-size:11px;height:auto;}
div.content3, div.content2, div.content1{text-align:left;padding:0px 10px;}

a.icon_resp{display:none;margin:0;padding:0;}
@media screen and (max-width:880px){

div.nieuws{height: 100%;}
div.netontdekt{height: 100%;}

	div.center_screen{width:100%;}
	div.main_screen{width:100%;}
	div.side_screen{display:none;}
	
	div.col-md-88{width:100%;}
	div.col-md-44{width:100%;}	
	
	div.col-md-8{width:100%;}
	div.col-md-4{width:100%;}
	div.col-md-4.main1, div.col-md-4.main2, div.col-md-4.main3{width:50%;border:0px;}
	div.main3{clear:both;}
		div.col1b{display:none;}
		div.content1b{display:none;}
	div.di2, div.di3{display:none;}
	div.header-nav{display:none;overflow:hidden;}
	div.header-nav {height: auto;padding-bottom: 10px;float: none;width: 100%;position: relative;text-align: left;}
	div.header-nav a{float:left;width:100%;margin-top:20px;}
	a.icon_resp{display: block;position: absolute;top: 67px;right: 20px;font-size: 15px;width: 1.875em;height: 0.313em;background: #000;padding:0;}/* kleur? #DDDDDD orange */
	a.icon_resp:before {content: "";position: absolute;top: 0;left: 0;margin-top: -0.625em;width: 1.875em;height: 0.33em;background: #000;}
	a.icon_resp:after {content: "";position: absolute;bottom: 0;left: 0;margin-bottom: -0.625em;width: 1.875em;height: 0.313em;background: #000;}
	
	form input[type=text]{width:150px;}
}
@media screen and (max-width:570px){
	div.col-md-4.main1, div.col-md-4.main2, div.col-md-4.main3{width:100%;border:0px;}
	div.fl_left{display:none;}
	div.hi2 {float: left; padding-left: 12px;}
	div.search div.fl_left{padding-left:0px;width:100%;}
	div.search div.fl_left img{margin:auto;display:block;}
	form input[type=text]{width:55%;}
	form input[type=submit]{width:30%;}
}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}