/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
    text-align: left !important;
    overflow-x: hidden;
}

::-moz-selection {
    background: #CC0000;
    text-shadow: none;
    color: #fff;
}

::selection {
    background: #CC0000;
    color: #fff;
    text-shadow: none;
}

p {
	margin: 0;
	line-height: 16px !important;
}

div#header {margin-top: 40px !important;}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

ul.menu li a {
	color: white;
	text-decoration: none;
}

ul.menu {margin: 6px 10px 0 !important;}
textarea {resize: vertical;}
.main article .widget {width: auto !important;} 

.video {
	width: 100%;
	height: 270px;
	display: block;
}

.video span { 
	background: url('../images/speel.png');
	width: 100px;
	height: 100px;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 85px;
}

/* ===== Body, Wrapper Title  Styles ================================================== */

body 	 {font: 11px/16px Verdana, Geneva, Arial, Helvetica, sans-serif;}
.wrapper {width: 100%; margin: 0 0%;}
.title   {color: white;}

/* ==============  Mobiel: Menu  ============== */

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

nav ul	    {margin: 0; padding: 0;}
nav ul li   {display: none;} 
nav a:hover {text-decoration: none;}

/* ==============  Mobiel: Footer  ============== */

.footer-container footer {
	background: white url('../images/bg-footer.jpg') top right no-repeat !important;
	height: 30px;
	color: white;
	text-align: left;
	padding-top: 10px;
}
	
.footer-container footer a {color: #fff; text-decoration: underline; text-shadow: 0px 0px 2px #000;
        filter: dropshadow(color=#000, offx=0, offy=0);}
.footer-container footer p {margin-left: 10px; margin-top: 4px;}	

/* ===============  IE Fixes  =============== */

.ie7 .title {padding-top: 20px;}

/* ===============  Custom styles ============ */
nav {height: 33px;}

nav ul   { 
	max-width: 960px;
	background-color: #C00;
	height: 33px;
	margin: 10px;
}

nav select {
	position:relative;
	top: -35px;
	left: 15px;
	width: 87%;
	height: 20px;
}

h1, h2 {
	color: #C00;
	font-family: bnnfont, Arial;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: normal;
}

.text h2 { 
	margin:0px;
    padding:0;    
}

div#header { 
	width: 100% !important;
	height: 90% !important;
}

#header img { 
  width: 100%;
}

header h1 { 
	background-color: #c00;	
	margin: 10px;
	padding: 10px;
	max-width: 650px;
	margin-top: 10px;
}

.main article, .main .sidebar, .main .social {
	max-width: 650px;
	
}

.main .sidebar, .main .social {
	 width: 90%;
	 display: none;
}   

.wrapper {
	background-color: #fff;
} 



/* ====================  Media Queries  ==================== */

@media only screen and (min-width: 480px) {

	nav a {
	    float: left;
	    padding: 15px;
	}

ul.programma-media-thumbs li {
	height: 94px !important;
}


	.main .sidebar {
		clear: both;
	    margin-top: -10px;
		margin-left: 0px;
		padding: 10px;
		color: black;
		display: none;	
	}  

.main .social  {
		width: 23%;
		float: left;
		color: black;
		margin-bottom: 58px;
		min-width: 220px;
		display: none;
    }  
    
 

/* =============  IE Fixes  =================== */

	nav ul li 		{display: inline;}
	.oldie nav a 	{margin: 0 0.7%;}

} /* einde 480px */

@media only screen and (min-width: 768px) {

 	.wrapper  {
		background-image: url('../images/bg-content.jpg');
		width: 720px;
		margin: 0 auto;
	}
	
    .main article {
       float: left;
       width: 480px;
    }
    
    nav select {
 		display: none;
	}
	
   .main .social  {
		width: 23%;
		float: left;
		color: black;
		margin-bottom: 58px;
		min-width: 220px;
		display: block;
    }
       
	.main .sidebar {
		clear: both;
		width: 460px;
		margin-left: 0px;
		display: none;
		padding: 10px;
		color: black;
	}
 
	header h1 { 
		max-width: 440px;
	}
	
} /* einde 768px */

@media only screen and (min-width: 940px)  {

    .wrapper {
       width: 960px; 
       margin: 0 auto;
       background-image: url('../images/bg-content.jpg');
    }

	.main .sidebar, 
	.main .social  {
		width: 23%;		
		float: left;
	   	padding: 5px 0% 10px;
		margin-left: 0px;	
		display: block;
		margin-top: -5px;
	}

	.main .sidebar { 
		background-color: transparent;		
		clear: none;
	}	

	.main .sidebar { 
		color: #000;
	}   
	
} /* einde 940px */

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }
    
    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   overschrijven factsheets-responsive.css 
   ========================================================================== */

#bnn-highlights .highlight-item {
	width: 220px !important;
}

#photogallery-container {
	width: 200px;
	display: block !important;
}

#vandaag-bijbnn {
	width: 263px !important;
}

ul.programma-media-thumbs {
	width: 450px !important;
}

.bg-photogallery-container {
	width: 220px !important;
}

.main .sidebar { 
	margin-top: -5px !important;
	margin-left: 20px !important;
}

.text p a img { 
	float: left;
	text-align: left;
	/* width: 100% !important;*/
}

.text img { 
	margin-bottom: 30px !important; 
}

.text h2 { 
	margin-top: -5px !important;
}

.widget big { 
	margin-bottom: 30px !important;
	}

.video-thumbs ul { 
    padding: 0;    
	width: 110% !important;
}

.programma-media embed { 
	width: 100% !important;
	max-width: 440px !important; 
}
	
ul.programma-media-thumbs {
	width: 102% !important;
	margin-top: 0px !important;
}

.html5player a img{
	width: 100%;
	height: 100%;
	margin-top: -100px;
}

.html5player .home { 
	margin-top: -5px !important;
	max-width: 440px !important;
	margin-bottom: 0px !important; 
	}

ul.programma-media-thumbs li {
	height: 106px !important;
}

span.video-name { 
	position: relative;
	top: -25px;
}

li.md a span,
span.video-name { 
	line-height: 14px !important;
	display: block !important;
}



/*  CMS generated CSS  */

ul.errors li{color:red}
h3.video-home{ /* width:300px;*/  float:left}
h3.meer-video{width:110px; float:right;padding-left: 10px;padding-right: 0px;}
h3.meer-video a{color:#cc0000; text-decoration:none; }

ul.programma-media-thumbs {
    height: auto;
    overflow: hidden;
    padding:0;
    width: 440px;
    margin-top:5px
}
ul.programma-media-thumbs  li {
    display: block;
    float: left;
    height: 110px;
    margin-right: 10px;
    width: 102px;
}
ul.programma-media-thumbs  li a{text-decoration:none; display:block}
ul.programma-media-thumbs  li.active a{color:#cc0000}

ul.programma-media-thumbs  li img{height: 60px;width: 102x; display:inline;}
ul.programma-media-thumbs  li.active img{height: 60px;width: 107x; display:inline; zoom: 1;filter: alpha(opacity=100);opacity: 1;}
ul.programma-media-thumbs  li img.play-img, .video-thumbs ul li img.play-img{
    height: 30px;
    padding: 0;
    position: absolute;
    width: 30px;
    margin-left: 35px;
    margin-top: 15px;
}
span.video-name{display:block; line-height: 11px;}

/* end update */

dl.zend_form dt#_submit-label {display:none;}
dl.zend_form input#_submit{width:auto;height:auto; border:1px solid #000; margin: 3px 0 0 0; padding:3px; font-weight:bold;}

dl.zend_form label{padding-bottom:3px; line-height: 2px;  font-weight:bold; }
dl.zend_form input, dl.zend_form textarea {
    width: 190px;
    height: 20px;
    padding: 0;
    margin: 0;
}
dl.zend_form textarea{height:110px;}
dl.zend_form .multi-radio { clear: both;float: left;width: 20px;margin-top: 5px;margin-right: 3px; }





#blog .blog-item-container h3{background-color:#CC0000; color:#fff; padding-left:10px; margin:0;}
#blog .blog-item-container h3 a{color:#fff; text-decoration:none}
#blog .blog-item-container h3 a:hover{text-decoration:underline}

#blog .blog-item{padding:10px 0 10px 10px;height: auto;overflow: hidden;}
#blog .blog-item .intro {font-weight:bold;}
#blog .blog-item .intro img{display:block;float:left; padding:5px 5px 5px 0}
.item-share{ display:block;padding:10px 0 10px 0; overflow:hidden}
.item-share .google-plus{ display:block; height:30px; float:left; width:70px;}
.item-share .facebook{ display:block; height:30px; float:left; width:250px;}
#blog .blog-item .date-author{ height:20px; display:block;color: #999;padding-top: 5px;}
#blog .blog-item .date{block; float:left; }
#blog .blog-item .author{  display: block;float: left; width: 150px; margin-left: 4px;}

ul.nicam{position:absolute; width:910px; margin:10px 0 0 0}
ul.nicam li{display:block;float:right;background: url("/data/images/factsheet-master-6.0.png") no-repeat; width:55px; height:50px}
ul.nicam li span{display:none}
ul.nicam li.grof-taalgebruik{background-position: -323px -252px}
ul.nicam li.discriminatie{background-position: -323px -152px;}
ul.nicam li.drugs-en-alcoholmisbruik{background-position: -323px -202px;}
ul.nicam li.seks{background-position: -323px -102px;}
ul.nicam li.angst{background-position: -323px -51px;}
ul.nicam li.geweld{background-position: -323px 0px;}
ul.nicam li.al{background-position: -264px 0}
ul.nicam li.nicam-16{background-position: -264px -203px;}
ul.nicam li.nicam-12{background-position: -264px -152px;}
ul.nicam li.nicam-9{background-position: -264px -102px;}
ul.nicam li.nicam-6{background-position: -264px -51px;}

.abc-searchpagination ul{ width:460px; height:30px; font-family: bnnfont, Arial;font-size: 13px; text-transform: uppercase; margin-left:10px}
.abc-searchpagination ul li{display:block; float:left; margin-right:5px}
.abc-searchpagination ul li.active, .abc-searchpagination ul li.disabled{color:#999}
#header ul#sociallinks {
    height: 40px;
    margin-left: 830px;
    margin-top: 150px;
    position: absolute;
    width: 200px;
    z-index: 6;
}
#bnn_navigation{background-color:#000 !important}
#header ul#sociallinks li {background: url("/data/images/factsheet-master-6.0.png") no-repeat; width:40px; height:40px; display:block;float:left}
#header ul#sociallinks li span{ display:none}
#header ul#sociallinks li a{ display:block; width:40px; height:40px;}
#header ul#sociallinks li#sociallinks-facebook{}
#header ul#sociallinks li#sociallinks-hyves{ background-position:-45px 0}
#header ul#sociallinks li#sociallinks-twitter{ background-position:-89px 0}
a{color:#000000}
@font-face
{
    font-family: bnnfont;
    src: url('/data/fonts/font.eot');
    src: url('/data/fonts/font.otf'),
url('/data/fonts/font.eot?#iefix') format('embedded-opentype');
}
body {
    padding:0;
    margin:0 auto;
    color:#000;
    font-size: 11px;
    text-align: center;
    font-family:  Verdana, Arial, Helvetica, verdana, sans-serif;
    background:#cc0000 url('/data/images/bg-page.jpg') top center repeat-y;
}
p {
    line-height: 16px; 
}
h1, h2, h3, ul.menu li {
    font-family: bnnfont, Arial;
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px 10px;
    font-weight: normal;
    margin: 0;
}
h4 {
    margin: 0; 
    padding: 8px 10px;
    font-style: bold;
    color: #999;
}
ul.menu{ display:block; background-color:#CC0000; overflow: hidden; margin: 10px 10px 0}
ul.menu li {display:block; float:left}
ul.menu li a{color:#fff; text-decoration:none; padding: 1px 3px 0;}
ul.menu li.active a{color:#000; background-color:#fff;}

.volgende-afl img{float:right;padding:0 0 0 5px}
div#all { margin:40px 0 0 0; }

span.datum{display:block; float:left; width: 160px;}
span.zender{  
    display: block;
    float: left;
    height: 18px;
    margin-left: 5px;
    position: relative;
    width: 27px;
}

.uitzendingen h2 {margin: 0px;}
ul.uitzendingen li{margin-bottom:3px; display:block; height:20px}
ul.uitzendingen { margin: 0px; padding: 0px; }


span.zender.nl3, span.zender.NED3 { background: url("http://assets.bnn.nl/bnnmenu/images/ned3.png") no-repeat; }
span.zender.ra1 { background: url("http://assets.bnn.nl/bnnmenu/images/rad1.png") no-repeat;}
span.zender.nl1, span.zender.NED1 { background: url("http://assets.bnn.nl/bnnmenu/images/ned1.png") no-repeat;}
span.zender.ra3 {background: url("http://assets.bnn.nl/bnnmenu/images/rad3.png") no-repeat;}
/**/
.video-container{height:280px;overflow:hidden;}
.video-thumbs ul li{display:block; float:left;height:140px; width:107px; margin-right:10px}
.video-thumbs ul li.active a{color:#CC0000}
.video-thumbs ul li a{color:#000; text-decoration:none; width:107px; overflow:hidden; display:block}

.video_container_home { padding-left: 20px; padding-right:20px;}
.video_container_home h3 { color:#CC0000; }


/* ### HEADER - OVERLAY - TITLE ### */
div#container {
    width: 960px;
    margin: 0 auto;
}

div#header {
    height: 200px;
    margin: 0;
    padding: 0;
    text-align: left;
}

div#header div.image {
    position: relative;
    height: 200px;
    z-index: 1;
}

div#header div.image img {
    width: 960px;
    height: 200px;
}


div#main {
    width:960px;
    margin:0px;
    padding: 0px;
    text-align: left;
    overflow:hidden;
    background: #fff url('/data/images/bg-content.jpg') top left repeat-y;
}

div#footer {
    background: #fff url('/data/images/bg-footer.jpg') top left no-repeat;
    height: 28px;
    color: #fff;
    text-align: left;
    padding: 12px 0 0 12px;
}
div#footer a { color: #fff; text-decoration: underline; }
dl.zend_form .text{padding:0;margin:0; line-height:16px;}

.widget{ margin: 10px;  }
div.big h1 {
    color: white;
    background: #C00;
    margin-bottom: 10px;
}
.text {
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
    line-height: 16px;
}
.text img{display:block;float:left;padding:5px 10px 0 0}
.grid_6 .widget h2, h3 {
    text-transform: upper;
    padding-left:0;
}
.big h2, .big h3 {
    color: #CC0000;
}
div.grey h1, div.grey h2, div.grey h3, div.grey h4 {
    color: #CC0000;
    padding-left:0
}
#bnnreactiestextflash h2 { 
	margin: 0
} 


.durfteklikken{width:200px; height:50px;margin-left: 10px;margin-top: 5px;}
.durfteklikken span{display:none}
.durfteklikken a{display:block; width:200px; height:50px;background: url("/data/images/factsheet-master-6.0.png") no-repeat 0 -400px;}

#vandaag-bijbnn { height:auto; overflow:hidden; margin-top:10px; width: 263px;}
#vandaag-bijbnn-header{ background: url("/data/images/factsheet-master-6.0.png") no-repeat 4px -42px; width:240px; height:30px;}
#vandaag-bijbnn-header h2{ padding:8px 0 0 20px; margin:0; color:#FFF}

#vandaag-bijbnn-content ul#programma-vandaag {margin:0; padding:0 0 0 0; width:240px; overflow:hidden;}
#vandaag-bijbnn-content ul#programma-vandaag li{  height:20px; width:230px;}
#vandaag-bijbnn-content ul#programma-vandaag li a{ color:#000; font-weight:bold; text-decoration:none; display:block; height:20px; width:214px; overflow:hidden; padding-left:20px; background: url("/data/images/factsheet-master-6.0.png") no-repeat 3px -85px;}
#vandaag-bijbnn-content ul#programma-vandaag li a:hover{ background: url("/data/images/factsheet-master-6.0.png") no-repeat 3px -105px;color:#cc0000}
#vandaag-bijbnn-content ul#programma-vandaag li a span{ position:relative; top:3px;}
#vandaag-bijbnn-content ul#programma-vandaag li em{ display:block; float:right; padding-right:12px; width:14px; height:14px; 
    background: url("/data/images/factsheet-master-6.0.png") no-repeat -235px -42px; position:relative; top:3px}
#vandaag-bijbnn-content ul#programma-vandaag li em span{ display:none}
#vandaag-bijbnn-footer{ background: url("/data/images/factsheet-master-6.0.png") no-repeat 3px -127px; width:240px; height:18px; clear:both}

/*BNN HIGHLIGHTS*/
#bnn-highlights{ margin:0px 10px 10px 10px; width: 220px;}
#bnn-highlights .highlight-item{ background-color:#cc0000; margin-bottom:10px;}
#bnn-highlights .highlight-item .bnn-highlight-image img.highlight{ width:200px; height:auto; margin:10px 0 0 10px; overflow:hidden}
.bnn-highlight-text h3{margin:0;padding-left:10px}
#bnn-highlights .highlight-item  .bnn-highlight-text h3, #bnn-highlights .highlight-item  .bnn-highlight-text p, #bnn-highlights .highlight-item  .bnn-highlight-text a{ color:#FFF}
#bnn-highlights .highlight-item  .bnn-highlight-text p { padding:0px 10px 10px 10px; line-height: 16px;}
#bnn-highlights .highlight-item  .bnn-highlight-text a { padding:0px 0px 0px 10px; font-weight:bold; text-decoration:none; display:block}

#bnn-highlights .highlight-item .bnn-highlight-text { background-color:#cc0000; padding-bottom:10px;} 


/* form */
dl.zend_form dt#_submit-label {display:none;}
dl.zend_form input#_submit{width:auto;height:auto; border:1px solid #000; margin: 3px 0 0 0; padding:3px; font-weight:bold;}

dl.zend_form label{padding-bottom:3px; line-height: 2px;  font-weight:bold; }
dl.zend_form input, dl.zend_form textarea {
    width: 210px;
    height: 20px;
    padding: 0;
    margin: 0;
}
dl.zend_form textarea{height:110px;}
dl.zend_form .multi-radio { clear: both;float: left;width: 20px;margin-top: -4px;margin-right: 3px; }
dl.zend_form dd { margin:0px; -webkit-margin-start: 0px;}

div.npoplayer_wrapper {
    float: left;
}