/**
 * @site CSI Haaglanden - homocide subsite
 * @revision $Revision: 1.1.2.13 $
 *
 * @styleguide:
 *  colors {
 *   white: #fff;
 *   black: #000;
 *   gray:  #707070;
 *   blue:  #2327a6;
 *  }
 *  fonts {
 *   contentheader: Bankgothic
 *   headers:       Verdana, Helvetica, sans-serif;
 *   text:          Verdana, Helvetica, sans-serif;
 *  }
 */

/**
 * Elements
 * HTML elements, such as ul, img, p, a, etc.
 */

/* links */
a { padding: 0 0 2px 0; color: #2327a6; text-decoration: none; }
a:hover { padding-bottom: 1px; border-bottom: 1px solid #2327a6; }

/* headers */
h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; font-family: Verdana, Helvetica, sans-serif; color: black; }
h1 { font-size: 1.2em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1em; }

/* images */
img, a img { border: 0; }

/* paragraphs */
p { margin-top: 0; }

/* lists and definition lists */
ul { }
    ul li {}

dl {}
    dl dt {}
    dl dd {}

/* tables */
table { font-size: 1em; vertical-align: top; border-collapse: collapse; }
    table thead { }
    table tbody { }
    table td, table th { text-align: left; }

/* form elements, labels & fieldsets */
form { margin: 0; }

input, select, textarea { border: 1px solid #999; padding: .2em 0; font: normal 1em Verdana, Helvetica, sans-serif; }
    input:hover, textarea:hover { border-color: #bbb; }
    input:focus, textarea:focus { border: 1px inset #afafaf; }
    input.disabled { cursor: default; background-color: #e8e8e8; }

fieldset { border: 1px solid #a80000; padding: 0 1em 1em 1em; }
    fieldset legend { margin: 0 0 .5em .4em; padding: .1em .7em; color: white; font-weight: bold; background-color: #a80000; }

label { cursor: pointer; }
    label:hover { color: #a80000; }

iframe { min-height: 35em; }

/**
 * Page layout
 */

html, body { height: 100%; margin: 0; padding: 0; border: 0; background-color: #2327a6; }
body { font: normal .73em/1.6 Verdana, Helvetica, sans-serif; color: white; text-align: center; }

#body { position: relative; top: -1px; border-top: 1px solid black; margin: 0 auto; width: 1000px; height: 649px; text-align: left; background: url(/images/24-7/b_body.jpg) left top no-repeat; }
    #container { border-top: 1px solid black; min-height: 400px; background: url(/images/24-7/b_container.gif) 613px 15px no-repeat; }

        #content { margin: 110px 450px 20px 200px; }

        #header { position: absolute; top: 0; left: 0; width: 100%; height: 80px; }
            #header h2 { position: absolute; left: 20px; top: 14px; margin: 0; padding: 0; width: 142px; height: 51px; background: url(/images/24-7/l_24-7.png) left top no-repeat; }
                #header h2 a { display: block; height: 100%; padding: 0; border: 0; }
            #header h3 { position: absolute; left: 200px; top: 16px; margin: 0; padding: 0; width: 330px; height: 35px; border-left: 3px solid white; background: url(/images/24-7/l_haaglanden.gif) 5px 10px no-repeat; }
                #header h2 span, #header h3 span { visibility: hidden; }

            #clock-container { position: absolute; top: 120px; left: 10px; padding-top: 5px; width: 176px; height: 30px; background: transparent url(/images/24-7/bg_clock.png) no-repeat left top; }
                #clock-container #clock { font-family: Courier; font-weight: bold; letter-spacing: -1px; color: #eef2ed; padding: 0 0 0 12px; }

        #mainnav { position: absolute; left: 5px; top: 90px; width: 180px; }
            #mainnav ol { margin: 0; padding: 0; list-style-type: none; }
                #mainnav ol li {  }
                    #mainnav ol li a { display: block; padding: 0; border: 0; background-position: left top; background-repeat: no-repeat; }
                        #mainnav ol li a:hover { }
                        #mainnav ol li a span { visibility: hidden; }

        #globalnav { position: absolute; left: 15px; top: 622px; padding-left: 10px; height: 22px; background: transparent url(/images/24-7/bg_globalnav_left.gif) no-repeat left top; }
            #globalnav ul { float: left; margin: 0; padding: 6px 10px 5px 0; height: 11px; list-style-type: none; background: transparent url(/images/24-7/bg_globalnav_right.gif) no-repeat right top; }
                #globalnav ul li { float: left; margin-left: 10px; padding-left: 10px; border-left: 1px solid white; }
                   #globalnav ul li.first-item { margin-left: 0; padding-left: 0; border-left: 0; }
                    #globalnav ul li a { display: block; background-color: transparent; background-repeat: no-repeat; background-position: left top; }
                        #globalnav ul li a:hover { border-color: white; }
                        #globalnav ul li a span { visibility: hidden; }

        #globalnav h2 { display: none; }

        #copyright { color: #333; float: left; font-size: .9em; margin: .2em 0 0 1em; }

            #book { position: absolute; right: 40px; top: 75px; width: 779px; height: 523px; color: black; background: url(/images/24-7/b_book.gif) right top no-repeat; }
                #book h1 { margin: 0 0 .5em 0; background-position: left top; background-repeat: no-repeat; }
                    #book h1 span { visibility: hidden; }
                #book h1.chaptertitle { margin-top: 60px; background-position: center top; }
                #book h1.pagetitle { font-size: .5em; height: auto; padding: 0 0 .8em 0; border-right: 10px solid black; color: white; background-position: 15px 0px; background-color: #707070; }

                #book h2.pagetitle { margin: 0 0 .5em 0; background-position: left top; background-repeat: no-repeat; }
                    #book h2.pagetitle span { visibility: hidden; }
                #book h2.pagetitle { font-size: .5em; height: auto; padding: 0 0 .8em 0; border-right: 10px solid black; color: white; background-position: 15px 0px; background-color: #707070; }

                #book .page { z-index: 2; position: absolute; top: 20px; width: 340px; height: 463px; overflow: auto; background-color: white; }
                .page.left { left: 25px; }
                .page.right { right: 30px; }

            #page-content-block { position: relative; top: 30px; height: 360px; padding: 15px 0 5px 0; overflow: auto; border-right: 18px solid #e7e7e7; }
                #page-content { position: absolute; top: 0; width: 320px; margin: 5px 0; }
            #scroll-up, #scroll-down { visibility: hidden; color: black; font-size: .8em; text-align: right; display: none; position: absolute; top: 56px; right: 413px; padding-right: 25px; border-bottom: 1px solid #a3a3a3; width: 315px; z-index: 4; background: white url(/images/24-7/scroll_up.gif) no-repeat right top; }
                .content-page #scroll-up, .content-page #scroll-down { visibility: visible; right: 30px; }
            #scroll-down { top: 455px; background-image: url(/images/24-7/scroll_down.gif); }
                #scroll-up:hover, #scroll-down:hover { border-color: black; cursor: pointer; }

            .no-overflow #page-content-block { overflow: hidden; }
            .no-overflow #scroll-up, .no-overflow #scroll-down { display: block; }

            .order-book { display: none; position: absolute; top: 463px; right: 283px; width: 87px; height: 19px; z-index: 3; white-space: nowrap; background: transparent url(/images/24-7/button_orderbook.gif) no-repeat left top; z-index: 15; }
            .content-page .order-book, .content-subpage .order-book { display: block; }
                .order-book span { visibility: hidden; }

            #book.cover { color: white; background-image: none; }
                #book.cover h1 { margin: 0 0 .5em 0; border-right: 0; background-position: left top; background-color: transparent; }
                #book.cover .page.left { background-color: transparent; }
                #book.cover .page.right { top: 0px; right: 10px; width: 395px; height: 523px; background: url(/images/24-7/book_cover.gif) right top no-repeat transparent; }
                #book.cover #page-content { padding-top: 50px; }

                #book.cover a { color: #a80000; }
                #book.cover a:hover { border-bottom: 1px solid #a80000; }

                .sheet { z-index: 4; position: absolute; top: 10px; right: 16px; width: 376px; height: 495px; background-position: left top; background-repeat: no-repeat; }
                #sheet01 { background-image: url(/images/24-7/sheet_01.gif); }
                #sheet02 { background-image: url(/images/24-7/sheet_02.gif); }
                #sheet03 { background-image: url(/images/24-7/sheet_03.gif); }
                #sheet04 { background-image: url(/images/24-7/sheet_04.gif); }
                #sheet05 { background-image: url(/images/24-7/sheet_05.gif); }
                #sheet06 { background-image: url(/images/24-7/sheet_06.gif); }
                #sheet07 { background-image: url(/images/24-7/sheet_07.gif); }
                #sheet08 { background-image: url(/images/24-7/sheet_08.gif); }
                #sheet09 { background-image: url(/images/24-7/sheet_09.gif); }
                #sheet10 { background-image: url(/images/24-7/sheet_10.gif); }

                .page-turn { z-index: 4; position: absolute; bottom: 5px; width: 33px; height: 40px; background-position: left top; background-repeat: no-repeat; }
                .page-turn-left { left: 5px; bottom: 6px; background-image: url(/images/24-7/page_turn_left.png); }
                .page-turn-right { right: 8px; background-image: url(/images/24-7/page_turn_right.png); }
                    .page-turn a, .page-turn a:hover { position: relative; z-index: 2; display: block; height: 100%; padding: 0; border: 0; }
                    .page-turn a:focus { outline: none; }
                        .page-turn a span { display: none; }

                #toc { z-index: 1; position: absolute; right: -2px; top: 15px; width: 19px; }
                    #toc h2 { display: none; }
                    #toc ol { margin: 0; padding: 0; list-style-type: none; }
                        #toc ol li { margin: 0; padding: 0; background-position: left top; background-repeat: no-repeat; }
                            #toc ol li a { display: block; width: 100%; height: 100%; padding: 0; border: 0; }
                                #toc ol li span { display: none; }

.sheet .dossier { z-index: 2; position: absolute; top: 60px; left: 15px; width: 340px; height: 463px; overflow: auto; }
.dossier { font-size: .9em; }
    .dossier a { color: white; }
    .dossier dt { margin-top: 1em; padding: 2px; color: white; background-color: #707070; }
    .dossier dd { margin: 0; padding: 0; border: 1px solid #dfdfdf; background: url(/images/24-7/b_dossier_item.gif) left top repeat-y; }
        .dossier dd div { padding: 0 0 0 20px; background: url(/images/24-7/bullet.gif) left center no-repeat; }
            .dossier dd div a, .dossier dd div a:hover { padding-bottom: 1px; border-bottom: 1px solid #707070; color: #707070; }
            .dossier dd div p { margin: 0; }

.chaptervisual { margin-top: 20px; text-align: center; }

.photolist { }
    .photolist a { padding: 0; border: 0; color: #707070; }
    .photolist .photo { position: relative; float: left; width: 105px; height: auto; min-height: 110px; margin-bottom: 20px; text-align: center; }
    .photolist .photo:hover { background-color: #efefef; }
        .photolist .photo .holder { position: absolute; width: 100%; height: 90px; left: 0; top: 0; margin-top: 20px; }
        .photolist .photo p { position: relative; margin-top: 90px; font-size: .8em; text-align: left; text-decoration: underline; z-index: 1; }


/* basicform styles form elements, marked up in a definition list */
.basicform dl input, .basicform dl textarea, .basicform dl select { width: 100%; color: black; background-color: #e6eaeb; }
    .radio, .radio:hover, .checkbox, .checkbox:hover { width: auto !important; border: 0 !important; }
    .basicform dl dt { clear: both; width: 40%; float: left; color: black; font-weight: bold; }
    .basicform dl dd { width: 55%; float: left; margin: 0 0 1em 0; color: black; }
    .errors { font-style: italic; color: red; }
    .header { margin: 1em 0; }
    .header.formpage { display: block; width: auto; float: none; border-bottom: 1px solid #a80000; }
        .header.formpage+dd { display: none; }


input.button { width: auto; border: 0px; cursor: pointer; padding: 5px 0; font: bold .9em Verdana, Helvetica, sans-serif; color: white !important; text-transform: uppercase; background: url(/images/24-7/b_button.gif) no-repeat right center #9c9c9c !important; }

.pagevisual { border-bottom: 15px solid black; }

.content-subpage .pagevisual { margin-top: 15px; }

.subpages { width: 95%; }
.subpages h2 { color: white; margin: 0; padding: 0 10px; background-color: black; }
.subpages ul { margin: 0; padding: 0; list-style-type: none; }
    .subpages ul li { background-color: #e7e7e7; }
        .subpages ul li:hover { background-color: #a3a3a3; }
        .subpages ul li a { display: block; color: black !important; margin: 0; padding: 0 0 0 25px; border-bottom: 1px solid white !important; background: transparent url(/images/24-7/pijltje_01.png) no-repeat left top; }
            .subpages ul li a span { display: block; padding-left: 5px; border-left: 1px solid white; }

/* preview bar */
#preview-bar { position: fixed; left: 0; right: 0; top: 0; margin: 0; padding: 0; border-bottom: 2px solid #a80000; text-align: center; background-color: white; }
    #preview-bar #previewselect { margin: 0; padding: .5em 0; background-color: #ffa; opacity: .5; }
        #preview-bar:hover #previewselect { opacity: .8; }
    #preview-bar #previewselect input, #preview-bar #previewselect select { margin: 0 1em; }

/**
 * Common
 * Very often used classes
 */

/* positioning and visibility */
.clear-both     { clear: both; }
.float-left     { float: left; }
.float-right    { float: right; }
.inline         { display: inline; }
.block-level    { display: block; }
.nodisplay      { display: none; }
.show           { visibility: visible; }
.hide           { visibility: hidden; }
.align-left     { text-align: left; }
.align-right    { text-align: right; }

/* coloring and text decoration/transformation */
.no-border      { text-decoration: none; }
.back           { padding-left: 15px !important; background: url(/images/arrow_left.gif) center left no-repeat; }
.back:hover     { background-image: url(/images/arrow_left_over.gif); }
.red            { color: #a80000; }
.req            { color: #a80000; }
.err            { color: #a80000; font-weight: bold; }
input.err       { font-weight: normal; background-color: #ffbfbf; }
.notice         { background-color: #ffa; color: #a80000; border: 1px solid #2327a6; padding: .3em; }
.white          { color: white; }
.chosen         { color: #a80000; font-weight: bold; }

/* odd, even and first for row coloring (zebra tables and distinctive first row) */
.odd           { background-color: #fff; }
.even          { background-color: #2327a6; }
.first         { background-color: #2327a6; border: solid #e8e8e8; border-width: 0 1px; }