/* Colors used in this site:
 * - HD Purple: #be003c
 * - HD rood donker: #6D0027
 * - HD rood donkergrijs: #8C5B6E
 * - HD rood lichtgrijs: #CE9DAE
 * - HD zwart: #000000
 * - HD donkerder grijs: #111111
 * - HD donkergrijs: #333333
 * - HD grijs: #666666
 * - Dark grey: #aaaaab
 * - Medium grey: #DDDDDE
 * - light grey: #eff2f2
 * - HD donkerder wit: #DADFDF
 *
 */

/* Base CSS for every page */
html, body {
    margin: 0;
    padding: 0;
}

/* Google Search */
.gsc-result-info {
    /* Don't show how many results have been found and how fast Google was finding them */
    display: none;
}

.gsc-table-result tr {
    vertical-align: top;
}

.gs-image {
    width: 125px;
    padding-right: 8px;
}

body {
    /* we define many fonts to accomodate Linux users without Arial */
    font-family : Arial, Helvetica, Sans, FreeSans, 'Nimbus Sans L', Garuda, sans-serif;
	font-size: 62.5%; /* Resets 1em to 10px */
    background: url('../img/bg/wrapper.png') repeat-y center center white;
}

h1, h2, h3, h4, .vagfont, #nav-global span, #site-info nav a, #searchbar input {
    font-family: 'vagrundschrift', Arial, Helvetica, sans-serif;
}

a, a:link {
    outline: none;
}

a:visited {

}

a:hover {

}
p {
    font-size: 1.2em;
    margin-bottom: 10px;
}

	p a,
	p a:link {
	    color: #be003c;
	    text-decoration: none;
	}

	p a:visited {
	    color: #6D0027;
	}

	p a:hover {
	    color: #231f20;
	}

	#main p a:hover {
	   background: #be003c;
	   color: white;
	}

em, i {
    font-style: italic;
}

strong, b {
    font-weight: bold;
}

h3 {
    color: #BE003C;
    font-size: 1.6em;
}

.clear {
    font-size: 1px;
	clear:both;
}

.jsonly {
    display: none;
}

.nopointer {
    cursor: default !important;
}

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

#npo-button {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2000;
}

/* Stuff that should be invisible */
#branding .skip, #logo img, #logo strong, #nav-global h6,
.breadcrumb h2, #search-box label, #main dl.photo dd.zoom,
#comments blockquote h3, #comments blockquote p cite img,
#comments .comment-count, #copyright, #nav-global em,
#search-box .button, #main .text-meta,
#nav-sec-home /* JIRA HDOC-351 */ {
    display: none;
}

#wrapper, #branding .content, #stage .content {
    width: 990px;
    margin: 0 auto;
    position: relative;
    clear: both;
}

#branding {
    background: url('../img/bg/branding.png') repeat-y center center #919497;
    height: 70px;
}

    #logo a {
        float: left;
        width: 325px;
        height: 70px;
        background: url('../img/logo.png') no-repeat;
    }
		#logo a *{
			display:none;
		}

    #nav-global {
        position: absolute;
        z-index: 1;
        right: 0;
    }

        #nav-global li {
            float: left;
            background: #919497;
        }

            #nav-global li:hover a {
                color: white;
            }

        #nav-global li.on a, #nav-global li.on strong {
            color: white;
            font-weight: normal;
            height: 92px;
        }

        #nav-global li.on span {
            padding-top: 70px;
        }

        #nav-global a, #nav-global strong {
            text-decoration: none;
            font-size: 1.6em;
            color: black;
            display: block;
            height: 70px;
            padding: 0 15px 0 14px;
			float:left;
        }

        #nav-global span {
            display: block;
            padding-top: 48px;
        }


#stage {
    background: url('../img/bg/stage.png') repeat-y center center #111;
    position: relative;
    min-height: 150px;
}

    #stage .content {
        overflow: hidden;
        padding: 35px 0 35px 0;
        color: white;
    }

        #stage .media.content {
            display: none;
            height: 475px;
        }

            #stage .media.content .box {
                position: absolute;
                bottom: 55px;
            }

            #stage .media.content .center.box {
                left: 165px;
            }

            #stage .media.content .right.box {
                right: 0;
            }

        #stage .media.content .hide {
            background: url('../img/icons/hidecurtain.png') no-repeat;
            width: 156px;
            height: 45px;
            text-indent: -9999px;
            position: absolute;
            right: 20px;
            cursor: pointer;
        }

            #stage .media.content .hide:hover {
                background-image: url('../img/icons/hidecurtainhover.png');
            }

            /* Hide the fullscreen icon when there is audio in the player */
            #stage .htmlplayer.hasaudio .fullscreen {
                display: none;
            }

            #stage .htmlplayer.hasaudio .scrubber {
                width: 408px;
            }

        /* It makes no sense to have this in the documentary page, see HDOC-414 */
        #documentary #stage .media.content .hide {
            display: none;
        }

    #stage .background {
        background-repeat: repeat-y;
        background-position: center center;
        position: absolute;
		left:0px;
        z-index: 0;
        width: 100%;
        height: 100%;
        opacity: 0.25;
        filter: alpha(opacity=25); /* IE */
    }

    #stage .box {
        float: left;
        min-height: 1px;
    }

    #stage .left, #stage .right {
        width: 155px;
    }

    #stage .left {
        padding: 0 10px 0 0;
    }

    #stage .right {
        padding: 0 0 0 10px;
    }

    #stage .center {
        width: 640px;
        padding: 0 10px;
    }

        #stage .right p {
            color: #929497;
            line-height: 1.4em;
        }

        #stage .right p b {
            color: #DDDDDE;
        }

        #stage .center h3 {
            color: #BE003C;
            font-size: 1.6em;
        }

        #stage .center h2 {
            color: white;
            font-size: 3.0em;
            margin-bottom: 10px;
        }

    #stage .mediainfo {
        padding-bottom: 10px;
    }

        #stage .url, #stage .categories a {
            text-decoration: none;
            font-size: 1.2em;
            color: #94908d;
            padding-left: 10px;
            background: url('../img/icons/libullet.png') no-repeat left 3px;
            display: block;
        }

        #stage .broadcaster.url {
            margin-bottom: 25px;
        }

            #stage .url:hover, #stage .categories a:hover {
                background-image: url('../img/icons/libulletstagehover.png');
                color: white;
            }

    #stage .categories {
        margin-bottom: 10px;
    }

        #stage .categories, #stage .categories a {
            color: #d29fae;
        }

        #stage .categories a {
            background-image: url('../img/icons/libulletstage.png');
            text-transform: lowercase;
        }

        #stage .moreinfo {
            color: #BE003C;
            background-image: url('../img/icons/libullethover.png');
            display: none;
        }

        #stage .mediainfo .info {
            color: #94908d;
            font-size: 1.2em;
            line-height: 20px;
            height: 240px;
            position: relative;
            overflow: hidden;
        }

            #stage .mediainfo .info strong {
                color: #dadfdf;
                font-weight: bold;
            }

            #stage .area {
                position: absolute;
                bottom: 0;
                width: 155px;
            }

        #stage .pager li {
            float: left;
            width: 10px;
            height: 10px;
            margin: 5px 5px 10px 0;
            background: #929497;
            cursor: pointer;
        }

            #stage .pager li:hover, #stage .pager li.on {
                background: #dadfdf;
            }


    #stage .curtain {
        position: absolute;
        top: 0;
        left: 0;
        height: 538px;
        width: 100%;
        display: none;
    }

        #stage .curtain .stage {
            background: url('../img/bg/stage.png') repeat-y top center;
            height: 491px;
        }

        #stage .curtain .shadow {
            background: url('../img/bg/curtain.png') repeat-x;
            height: 47px;
        }

        #documentary #stage #curtain {
            display: none;
        }

    .breadcrumb {
        position: absolute;
        left: 165px;
        top: -24px;
        height: 24px;
        background: white;
    }
		.breadcrumb ol{
			padding: 3px 10px;
		}

        .breadcrumb a, .breadcrumb li {
            text-decoration: none;
            color: black;
            font-weight: bold;
            font-size: 1.1em;
            padding: 0 8px 0 0;
        }

        .breadcrumb a {
            font-size: 1.0em;
            background: url('../img/icons/breadcrumb-sep.png') no-repeat right center;
        }

        .breadcrumb li {
            float: left;
            font-weight: normal;
            padding: 0 0 0 4px;
        }

        .breadcrumb a:hover {
            color: #BE003C;
        }

        #wrapper-2 .breadcrumb {
            top: auto;
            bottom: 0;
        }

    #searchbar {
        position: absolute;
        top: -24px;
        right: 0px;
        width: 155px;
        height: 24px;
        z-index: 1;
    }

        #searchbar input, #searchbar button {
            border: 0;
        }

        #searchbar input {
            float: left;
            border: 0;
            background: #be003c;
            color: white;
            width: 131px;
            height: 24px;
            font-size: 1.3em;
            line-height: 24px;
            cursor: text;
            text-indent: 7px;
        }

            #searchbar input:hover, #searchbar input.hover {
                background: white;
                color: black;
            }

        #searchbar button {
            float: right;
            width: 24px;
            height: 24px;
            background: url('../img/icons/search.png') no-repeat;
            cursor: pointer;
        }

#wrapper {
    position: relative;
}

    #wrapper-2 {
        overflow: hidden;
        position: relative;
        padding-bottom:25px;
    }

        #wrapper-2 .btntop {
            width: 155px;
            height: 24px;
            background: url('../img/icons/top.png') no-repeat 0 0;
            text-indent: -9999px;
            display: block;
            position: absolute;
            right: 0px;
            bottom: 0;
        }

            #wrapper-2 .btntop:hover {
                background-position: 0 -25px;
            }

    #wrapper-3 {
        clear: both;
        padding-top: 55px;
    }

    #side, #main {
        float: left;
    }

    #side {
        width: 155px;
        margin-right:10px;
    }

        #side h2 {
            color:#BE003C;
            /*font-weight:bold;*/
            font-size: 1.3em !important;
            text-transform: lowercase;
			background-position:left 3px;
        }


    #main {
        width: 420px;
        margin-bottom: 30px;
        padding: 0px 10px;
    }

        .postmeta {
            position:absolute;
			left:165px;
			top:0px;
			z-index:3;
        }
        .postmeta li {
            float: left;
            position: relative;
        }

        .postmeta li span, .postmeta li a.link {
        	float:left;
            color: #aaaaab;
            font-weight: bold;
            font-size: 1.1em;
            text-decoration: none;
            padding: 0 15px;
            height: 24px;
            line-height: 24px;
            display: block;
            cursor: pointer;
        }

        .postmeta li a:hover {
            background: #be003c;
            color: white;
        }

        #main p {
            line-height: 1.6em;
        }

        #main p.intro {
            font-weight: bold;
            color: #BE003C;
            margin-top: 0;
        }

        #main p.intro img, #main .introimage {
            float: left;
            margin: 0 10px 10px 0;
        }
		#main p.intro img, #main .introimage.above {
			float: none;
			margin: 0 0 10px 0;
		}
		#main p.intro img, #main .introimage.right {
			float: right;
			margin: 0 0 10px 10px;
		}

        #main p.intro img, #main .introimage dd{
            font-size: 1.2em;
        }

        #main p.intro img, #main .introimage .zoom a{
            text-decoration: none;
            font-weight: bold;
            color: #BE003C;
        }

        #main h1, #main h2 {
            color: #BE003C;
            margin-bottom: 5px;
            clear: both;
        }

        #main h1 {
            font-size: 1.6em;
        }

        #main h2 {
            font-size: 1.3em;
        }

	#extras{
		float:left;
		position:relative;
	}

	#extras p,
	#extras div.meta h3,
	#extras div.meta h2,
	#home #main p,
	#home #main div.meta h3,
	#home #main div.meta h2	{
		line-height:1.6em;
	}

    #side, #side .box, #extras-1 .box, #extras-2 .box {
        margin-bottom: 30px;
        float: left;
		clear:both;
    }

    #extras, #extras-1, #extras-2 {
        min-height: 1px;
        float: left;
        color: #929497
    }

    #extras-1 {
        width: 220px;
    }

    #extras-2 {
        width: 155px;
        margin-left: 10px;
    }

        #extras-2 h2{
            font-size: 1.3em;
        }

    #extras-3, #extras-4, #extras-5 {
        display: none;
    }

    #extras strong, #extras-1 strong, #extras-2 strong {
        color: #BE003C;
        font-weight: bold;
    }

#site-info {
    background: #aaaaab;
}

    #site-info #footer {
        width: 815px;
        padding: 16px 0 16px 175px;
        overflow: hidden;
        margin: 0 auto;
    }

    #site-info p {
        font-size: 1.3em;
		line-height:1.4em;
        color: #EFF2F2;
		width:280px;
    }

    #site-info p strong {
        color: white;
        font-weight: bold;
    }

    #site-info .broadcasters-small-a a {
        float: left;
        margin-right: 15px;
    }

#comments {
    width: 420px;
    margin: 10px 0 0 -10px;
}

    #comments h2,
    .comments-closed-message{
        height: 18px;
        line-height: 18px;
        padding: 3px 5px 3px 10px;
        background: #aaaaab;
        color: white;
        font-weight: bold;
        color: white;
        font-size: 1.2em;
        text-transform: lowercase;
        margin-bottom: 0;
    }

    .comments-closed-message{
        margin-left: -10px;
        width: 405px;
    }

        #comments h2 em {
            display: none;
        }

    #comments h3 {
        margin: 10px 0;
    }

    #comments a {
        text-decoration: none;
        color: #929497;
    }

        #comments a:hover {
            color: #F05223;
        }

    #comments li {
        background: white;
        border-bottom: 2px solid #e8e8e9;
    }

    #comments blockquote {
        position: relative;
        padding-top: 24px;
    }

    #comments blockquote p {
        padding: 8px 10px;
        margin: 0;
        color: #333;
        font-style: italic;
    }

    #comments p.comment-meta {
        position: absolute;
        top: 0;
        left: 0;
        background: #e8e8e9;
        height: 8px;
        font-size: 1.2em;
        line-height: 8px;
    }

    #comments .comment-name, #your-comment fieldset span {
        color: #929497;
        font-weight: bold;
    }

    #comments .comment-date {
        color: #929497;
    }

    #your-comment .required, #your-comment h2, #your-comment .c2 {
        display: none;
    }

    #your-comment {
        margin: 0 0 100px -10px;
        background: white;
        width: 420px;
    }

        #your-comment fieldset div {
						background:#e8e8e9;
            padding-bottom:2px;
            font-size: 1.2em;
        }

        #your-comment fieldset span {
            float: left;
            width: 80px;
            padding: 8px 10px;
            text-transform: lowercase;
        }

        #your-comment fieldset input[type="text"],
        #your-comment fieldset textarea {
            width: 300px;
            padding: 8px 10px;
            color: #333;
            border: 0;
        }

        #your-comment .button-wrapper {
            background: #eff2f2;
        }

        #your-comment .button-wrapper input {
						width:100px;
            height: 24px;
            padding: 3px 5px;
            background: #aaaaab;
            color: white;
            font-weight: bold;
            color: white;
            border: 0;
            cursor: pointer;
            text-transform: lowercase;
            line-height: 24px;
        }

        #your-comment .button-wrapper input:hover {
            background: #be003c;
        }

.broadcasters-small-a a, .broadcasters-small-b a {
    display: block;
    width: 0;
    height: 23px;
    background: url('../img/icons/logos-small.png') no-repeat 0 0;
    text-indent: -9999px;
}

    .broadcasters-small-a a.vpro, .broadcasters-small-b a.vpro {
        width: 40px;
        background-position: 0 0;
    }
    .broadcasters-small-a a.vpro:hover, .broadcasters-small-b a.vpro {
        background-position: 0 -46px;
    }

    .broadcasters-small-a a.nps, .broadcasters-small-b a.nps {
        width: 18px;
        background-position: -57px 0;
    }
    .broadcasters-small-a a.nps:hover, .broadcasters-small-b a.nps {
        background-position: -57px -46px;
    }

    .broadcasters-small-a a.ikon, .broadcasters-small-b a.ikon {
        width: 48px;
        background-position: -89px 0;
    }
    .broadcasters-small-a a.ikon:hover, .broadcasters-small-b a.ikon {
        background-position: -89px -46px;
    }

    .broadcasters-small-a a.human, .broadcasters-small-b a.human {
        width: 57px;
        background-position: -151px 0;
    }
    .broadcasters-small-a a.human:hover, .broadcasters-small-b a.human {
        background-position: -151px -46px;
    }

    .broadcasters-small-a a.kro, .broadcasters-small-b a.kro {
        width: 26px;
        background-position: -224px 0;
    }
    .broadcasters-small-a a.kro:hover, .broadcasters-small-b a.kro {
        background-position: -224px -46px;
    }

    .broadcasters-small-a a.ncrv, .broadcasters-small-b a.ncrv {
        width: 17px;
        background-position: -272px 0;
    }
    .broadcasters-small-a a.ncrv:hover, .broadcasters-small-b a.ncrv {
        background-position: -272px -46px;
    }

    .broadcasters-small-a a.vara, .broadcasters-small-b a.vara {
        width: 48px;
        background-position: -309px 0;
    }
    .broadcasters-small-a a.vara:hover, .broadcasters-small-b a.vara {
        background-position: -309px -46px;
    }

    .broadcasters-small-a a.rvu, .broadcasters-small-b a.rvu {
        width: 24px;
        background-position: -376px 0;
    }
    .broadcasters-small-a a.rvu:hover, .broadcasters-small-b a.rvu {
        background-position: -376px -46px;
    }

	.broadcasters-small-a a.ntr, .broadcasters-small-b a.ntr {
        width: 31px;
        background-position: -414px 0;
    }
    .broadcasters-small-a a.ntr:hover, .broadcasters-small-b a.ntr {
        background-position: -414px -46px;
    }

	.broadcasters-small-a a.eo, .broadcasters-small-b a.eo {
        width: 18px;
        background-position: -459px 0;
    }
    .broadcasters-small-a a.eo:hover, .broadcasters-small-b a.eo {
        background-position: -459px -46px;
    }

	.broadcasters-small-a a.avro, .broadcasters-small-b a.avro {
        width: 25px;
        background-position: -488px 0;
    }
    .broadcasters-small-a a.avro:hover, .broadcasters-small-b a.avro {
        background-position: -488px -46px;
    }

	.broadcasters-small-a a.bos, .broadcasters-small-b a.bos {
        width: 28px;
        background-position: -521px 0;
    }
    .broadcasters-small-a a.bos:hover, .broadcasters-small-b a.bos {
        background-position: -521px -46px;
    }

.broadcasters-big a {
    display: block;
    width: 0;
    height: 50px;
    background: url('../img/icons/logos-big.png') no-repeat 0 0;
    text-indent: -9999px;
}

    .broadcasters-big a.vpro{
        width: 91px;
        background-position: 0 0;
    }
    .broadcasters-big a.vpro:hover{
        background-position: 0 -50px;
    }

    .broadcasters-big a.nps{
        width: 43px;
        background-position: -124px 0;
    }
    .broadcasters-big a.nps:hover{
        background-position: -124px -50px;
    }

    .broadcasters-big a.ikon{
        width: 112px;
        background-position: -193px 0;
    }
    .broadcasters-big a.ikon:hover{
        background-position: -193px -50px;
    }

    .broadcasters-big a.human{
        width: 130px;
        background-position: -327px 0;
    }
    .broadcasters-big a.human:hover{
        background-position: -327px -50px;
    }

    .broadcasters-big a.kro{
        width: 61px;
        background-position: -491px 0;
    }
    .broadcasters-big a.kro:hover{
        background-position: -491px -50px;
    }

    .broadcasters-big a.ncrv{
        width: 42px;
        background-position: -595px 0;
    }
    .broadcasters-big a.ncrv:hover{
        background-position: -595px -50px;
    }

    .broadcasters-big a.vara{
        width: 108px;
        background-position: -677px 0;
    }
    .broadcasters-big a.vara:hover{
        background-position: -677px -50px;
    }

    .broadcasters-big a.rvu{
        width: 55px;
        background-position: -822px 0;
    }
    .broadcasters-big a.rvu:hover{
        background-position: -822px -50px;
    }

    .broadcasters-big a.hollanddoc {
        width: 76px;
        background-position: -921px 0;
    }

    .broadcasters-big a.hollanddoc:hover {
        background-position: -921px -50px;
    }

    .broadcasters-big a.ntr {
        width: 80px;
        background-position: -1020px 0;
    }

    .broadcasters-big a.ntr:hover {
        background-position: -1020px -50px;
    }

    .broadcasters-big a.eo {
        width: 50px;
        background-position: -1140px 0;
    }

    .broadcasters-big a.eo:hover {
        background-position: -1140px -50px;
    }

    .broadcasters-big a.bos {
        width: 50px;
        background-position: -1279px 0;
    }

    .broadcasters-big a.bos:hover {
        background-position: -1279px -50px;
    }

    .broadcasters-big a.avro {
        width: 80px;
        background-position: -1352px 0;
    }

    .broadcasters-big a.avro:hover {
        background-position: -1352px -50px;
    }

#welcome {
    display: none;
    position: fixed;
    background: url('../img/bg/welcome.png');
    z-index: 10000;
    width: 100%;
    height: 100%;
}

    #welcome .content {
        position: absolute;
        left: 155px;
        top: 15px;
        width: 600px;
        height: 600px;
    }

    #welcome h1 {
        width: 542px;
        height: 213px;
        background: url('../img/logobig.png');
        text-indent: -9999px;
    }

    #welcome .text {
        width: 215px;
        margin-top: 25px;
    }

    #welcome h2, #welcome p, #welcome a {
        color: white;
    }

    #welcome h2 {
        font-size: 2.4em;
        text-align: right;
    }

    #welcome p {
        font-size: 1.6em;
        line-height: 1.6em;
        text-align: right;
        padding-top: 25px;
    }

    #welcome a {
        text-decoration: underline;
    }