/* Base CSS for every page */
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: white;
}

a, a:link {
    color: #231f20;
    text-decoration: underline;
}

a:visited {
    color: #939598;
}

a:hover {
    color: #f05223;
}

p {
    font-size: 1.2em;
    margin: 14px 0;
}

	p a,
	p a:link {
	    color: #f05223;
	    text-decoration: underline;
	}
	p a:visited {
	    color: #939598;
	}
	p a:hover {
	    color: #231f20;
	}

em, i {
    font-style: italic;
}

strong, b {
    font-weight: bold;
}

.clear{
	display:block;
	clear:both;
}

/* Colors used in this site:
 * - Warm black: #231f20
 * - Tegenlicht orange: #f05223
 * - Lighter orange: #f09579
 * - Dark grey: #939598
 * - Light grey: #e9e9ea
 * - Lighter grey: #f1f2f2
 */

/* Font-face styling */
h1, h2, h3, h4, .metafont, #nav-global span, #site-info .nav a, #searchbar, 
#nav-meta .day, #nav-meta .month, #nav-meta time, .comments-closed-message {
    font-family: 'vpro_thonik', Arial,Helvetica,Sans,FreeSans,'Nimbus Sans L',Garuda,sans-serif;

    /* IE7/8 render EOT fonts ugly with cleartype, this is a hack to turn it off */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://files.vpro.nl/fontface/iefix.png,sizingMethod=crop);
    zoom: 1;
}

/* Stuff that should be invisible */
#branding .skip, #logo img, #logo strong, #search-box h6, #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 {
    display: none;
}

/*
 * The grid for tegenlicht: 6 columns of 135px, with every column a margin on
 * both sides of 15px to avoid any 'last div in the row' problems
 * Borders and lines are 10px high warmblack
 */
#wrapper {
    width: 990px;
    margin: 0 auto;
    position: relative;
    background-repeat: no-repeat;
    overflow: hidden;
}
	#wrapper > br{
		display:none;
	}

#wrapper-2, #stage {
    background: url('../img/bg/lines.png') repeat-y 480px 0;
}

#wrapper-2 {
    padding-bottom: 50px
}

#wrapper-3 {
    background: url('../img/bg/lines-logo.png') no-repeat 480px bottom;
    overflow: hidden;
}

/* Header */
#topbackground {
    /* This is a hack to get the large black header at the top */
    width: 100%;
    height: 223px;
    left: 0;
	top: 0;
    position: absolute;
    background: url('../img/bg/header-side.png') repeat-x;
}

#vpro-logo {
	position:absolute;
	z-index:99;
	/*top: -11px;*/
	left: 15px;
}

#npo-button{
	position:absolute;
	z-index:99;
	right:13px;
	top:13px;
}

#branding {
    background: url('../img/overlays/header.png') no-repeat;
    height: 263px;
}

    body.site-backlight #branding {
        background-image: url('../img/overlays/bl-header.png');
    }

/* Just for easy clicking */
#logo a {
    width: 450px;
    height: 110px;
    cursor: pointer;
    background: url('../img/logo.png') no-repeat;
    position: absolute;
    top: 80px;
}

    body.site-backlight #logo a {
        background-image: url('../img/bl-logo.png');
    }

/* We abuse the nav-meta box for the episode information */
#nav-meta {
    position:absolute;
    width: 300px;
    height: 60px;
    right: 15px;
    top: 135px;
    overflow: hidden;
}

    #nav-meta div, #nav-meta h2, #nav-meta h3 {
        font-weight: bold;
    }

    #nav-meta h2 {
        color: #f05223;
        font-size: 15px;
        height: 20px;
        background: white;
        padding-left: 11px;
    }

    #nav-meta .date {
        height: 40px;
        position: relative;
        width: 43px;
        background: url('../img/icons/datebox.png');
    }
    
        #nav-meta .date div {
            position: absolute;
            width: 43px;
            height: 20px;
            text-align: center;
        }
    
        #nav-meta .date .day {
            color: white;
            font-size:10px;
            top: 11px;
        }
    
        #nav-meta .date .month {            
            color: #F15A29;
            font-size: 8px;
            top: 25px;
        }
    
    #nav-meta section {
        position: absolute;
        width: 245px;
        background: #231F20;
        height: 32px;
        right: 0;
        top: 20px;
        padding: 4px 6px;
    }

        #nav-meta section h3 {
            color: white;
            font-size: 15px;
            white-space: nowrap;
        }
    
        #nav-meta section time {
            font-size: 10px;
            color: white;
        }

/* Main navigation */
#nav-global, #site-info .nav {
    width: 825px;
    height: 25px;
    left: 0;
    position: absolute;
}

#nav-global {
    top: 200px;
}

#site-info .nav, #site-info .search {
    top: 15px;
}

    #nav-global li, #site-info .nav li {
        float: left;
        margin: 0 15px;
    }

    #nav-global a, #nav-global strong, #site-info .nav a {
        font-size: 1.5em;
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

        #nav-global strong {
            color: #f05223;
        }

    #nav-global em {
        /* Not a clue where this comes from..*/
        display: none;
    }

/* Searchbox */
#search-box, #site-info .search {
    position: absolute;
    right: 15px;
}

#search-box {
    top: 200px;
}

    #searchbar {
        width: 112px;
        height: 20px;
        background: white;
        color: black;
        font-size: 14px;
        float: left;
        text-align: right;
        padding-right: 5px;
        border: none;
    }

    #search-box .button, #site-info .button {
        background: #231f20 url('../img/icons/search.png');
        border: none;
        height: 20px;
        width: 21px;
        color: transparent;
        cursor: pointer;
        text-indent: -999px;
        color: transparent;
        text-transform: capitalize;
    }

/* Breadcrumb */
#breadcrumb {
    width: 630px;
    position: absolute;
    top: 225px;
    left: 15px;
}

    #breadcrumb li{
        float: left;
        font-size: 1.2em;
        line-height: 1.9em;
        background: url('../img/icons/link.png') 0 5px no-repeat;
        padding: 0 8px 0 16px;
        color: #f05223; /* 'active' page */
        
        /* This is a bit of hack to get the menu bar to not wrap */
        white-space: nowrap;
        max-width: 200px;
    }

    #breadcrumb a {
        color: #231f20;
    }

        #breadcrumb li:hover {
            background-image: url('../img/icons/link-active.png');
        }

        #breadcrumb li:hover a {
            color: #f05223;
        }

/* Stage */
#stage {
    clear: both;
    width: 990px;
    overflow: hidden;
}

/* Standard paragraph layout */
.box {
    float: left;
    width: 135px;
    margin: 0 15px;
}

    .text .box.vtk-images{
        margin: 0;
    }

/* Commented out for the time being */
.image .zoom a {
    display: none;
}

#extras-1, #extras-2 {
    min-height: 1px;
}

#extras-1 {
    width: 165px;
}

    /* Sigh :( */
    #extras-1 .links {
        width: 135px;
    }

#extras-2 {
    width: 330px;
}

/*
   Users shouldn't add extra paragraphs to anything else than extras-1 and
   extras-2, except on the homepage and file pages
*/
#extras-3, #extras-4, #extras-5, #extras-6 { display: none; }
#home #extras-3 { display: block; }

/* Footer */
#site-info {
    background: #ececec url('../img/bg/footer.png') repeat-x;
    float: left;
    width: 100%;
}

#footer {
    width: 990px;
    margin: 0 auto;
    background: url('../img/bg/footer-lines-logo.png') no-repeat 492px -75px;
    position: relative;
    min-height: 300px;
}

#footer div.box, #about {
    float: left;
    margin: 60px 0;
}

#about {
    width: 300px;
    text-align: right;
}

    #about h4, #footer div.box h2 {
        font-size: 1.4em;
        font-weight: bold;
    }

    #about .intro, #about p {
        font-size: 1.1em;
        line-height: 1.6em;
        margin: 0;
        width: 300px;
    }

#footer div.box {
    width: 135px;
    margin: 60px 15px 0 15px;
}

    #footer div.box.first {
        margin: 60px 195px 0 30px;
    }

/* Utility stuff */
.cmserror {
    padding: 10px;
    margin: 20px;
    border: 1px solid #f99;
    background: #fee;
}

/* Styling to make the edit buttons a little nicer */
/* Pretty hacky because Magnolia uses '!important' everwhere, which is a big pita */
body.author .mgnlControlBarSmall {
    position:relative;
    z-index:100;
}

body.author .mgnlControlBarSmall:hover {
    background: red;
}

body.author .mgnlControlBar td, body.author .mgnlControlBar tr,
body.author .mgnlControlBar {
    border: 0 !important;
    background: none !important;
}

    body.author .mgnlControlButton:hover,
    body.author .mgnlControlButtonSmall:hover {
        background: #c00 !important;
        cursor: pointer !important;
    }