/**
 *  Stylesheet for E-grip demo website
 *  ===============================================================
 *  $Id: default.css,v 1.38.2.28 2010/05/07 09:16:32 hoogeboom Exp $
 *  ===============================================================
 *
 *  global styleguide:
 *
 *  colors {
 *    white  : #fff;
 *    black  : #000;
 *    orange : #f60;
 *    blue   : #039;
 *  }
 *
 *  fonts {
 *    logo    : Arial;
 *    headers : Georgia, Times New Roman, serif;
 *    text    : Tahoma, Helvetica, sans-serif;
 *  }
 */


/**
 * GLOBAL HTML ELEMENTS
 *
 * default html elements, such as html, body, img, p, a.
 */

html {
background-image: url("/images/bg_total.gif");
background-color: white; background-repeat: repeat-y; background-position: top left; }

html, body {
margin: 0; padding: 0;
height: 100%;
background-color: white; }

body {
font: normal .67em/1.6em Verdana, Helvetica, sans-serif;
color: #4c4c4c;
margin-left: 7px;
background-color: white; }


/* links */
a, a:link {
padding-bottom: 1px;
color: #ff6600; text-decoration: none; }

a:visited { color: #ff6600; }
a:active { color: #003384; }
a:hover { color: #003384;  }


/* headers */
h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; font-family: Verdana, "Times New Roman", serif; color: #039; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }


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


/* paragraphs */
p { }


/* lists and definition lists */
ul { list-style-type: none; margin: 0; padding: 0; }
    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 #919191; }
    input:hover, input:focus, textarea:hover, textarea:focus { border: 1px inset #aaaaaa; }
    input.disabled { cursor: pointer; }

fieldset { border: 1px solid #003384; padding: 0 1em 1em 1em; }

    fieldset legend {
    margin: 0 0 .5em 1em; padding: .1em .7em;
    color: white; font-weight: bold;
    background-color: #003384; }

label { cursor: default; }
    label:hover {}



/**
 * BASIC PAGE LAYOUT
 *
 * describes the default page layout
 */

#body { height: 100%; }

    #container { height: 100%; background-color: white; }

        #body>#container { height: auto; min-height: 100%; }

        #content {
        border-top: 1px solid white;
        width: 520px; height: 100%;
        margin: 0 0 10px 195px; padding: 181px 1em 40px 0;
        background-color: white; }

            /* Problem: to fill the content div in the body, height is set to 100%. IE auto-stretches the element, !IE does not. */
            /* Solution: set the height back to auto, and provide a min-height value of 100% */
            #container>#content { margin: 0 0 50px 195px; padding: 180px 1em 40px 0; height: auto; }

            /* Problem: IE takes the full screen width for the content div. When setting it to 100%, it removes the width which is used by mainnav. */
            /* Solution: set the width back to auto for !IE */
            #container>#content { width: 510px; }

            #content h1 {
            padding: 0; margin: 0;
            line-height: 24px;
            text-indent: -9000px;
            font-size: 13px;
            font-weight: bold;
            color: #003384; }

        #header {
        position: absolute;
        top: 0; left: 0;
        height: 140px; width: 100%;
        background-color: transparent; background-repeat: no-repeat; background-position: top left; }

            #header_logo {
            position: absolute;
            top: 0; left: 7px;
            width: 195px;
            height: 140px;
            text-indent: -9000px;
            background-image: url("/images/l_egrip1.gif");
            background-color: white; background-repeat: no-repeat; background-position: 44px 20px; }

            #header_logo h1 { width: 100%; height: 100%; margin: 0; }
                #header_logo h1 a { display: block; height: 100%; border: 0; }

            #header_visual {
            position: absolute;
            top: 0; left: 202px;
            width: 345px;
            height: 140px;
            background-color: white; background-repeat: no-repeat; background-position: top left; }

        #header_title {
        position: absolute;
        top: 128px; left: 547px;
        width: 165px; height: 12px;
        background-image: url("/images/l_egrip2.gif");
        background-color: transparent; background-repeat: no-repeat; background-position: top left; }

        #mainnav {
        position: absolute;
        top: 180px; left: 0;
        margin-left: 7px;
        width: 195px; }

            #mainnav li { height: 25px; }

                #mainnav li a {
                display: block;
                width: 100%; height: 100%;
                padding: 0; margin: 0;
                border: 0;
                background-color: transparent; background-position: center left; background-repeat: no-repeat; }

                    #mainnav li a span { display: none; }


        #breadcrumbs {
        position: absolute;
        top: 140px;
        width: 100%; height: 20px;
        padding-left: 195px; }

            /* Problem: breadcrumbs div doesn't stretch to 100% in IE. */
            /* Solution: For IE, width: 100% is used with a left padding. For !IE, just use absolute positioning. */
            #container>#breadcrumbs {
            left: 202px; right: 0;
            padding-left: 0;
            width: auto; }

            #breadcrumbs span {
            float: left;
            font-size: .9em;
            color: #4c4c4c;
            margin: .4em .4em 0 0; 
            }
            #breadcrumbs span.separator {
            padding-left: 0;
            color: #aaa;
            }

                #breadcrumbs span a { border: 0; color: #aaa; }
                    #breadcrumbs span a:hover { color: #4c4c4c; }
                #breadcrumbs span#firstcrumb { padding-left: 0; background-image: none; }

        #globalnav {
        position: absolute;
        top: 5px; left: 567px;
        color: #aaa; }

            #globalnav ul li {
            float: left; }

                #globalnav ul li a {
                border: 0;
                padding: 0 .2em .3em .3em;
                font-size: .9em;
                text-decoration: none; color: #aaa;
                background-color: transparent; background-repeat: no-repeat; background-position: left top; }

                    #globalnav ul li a:hover { color: #4c4c4c; }
                    #globalnav ul li a span { visibility: hidden; }

        #breadcrumbs h2, #globalnav h2 { display: none; }

    #footer {
    background-color: transparent; background-repeat: no-repeat; background-position: 20px 0; }

    #page_footer {
    clear: both;
    margin-top: -50px;
    margin-left: 195px;    padding-top: .5em;
    width: 510px; height: 40px;
    color: #aaaaaa;
    border-top: 1px solid #aaaaaa;
    background-color: white; }

        #page_footer .left { float: left; }
        #page_footer .right { float: right; }

        #page_footer a { color: #aaaaaa; }
            #page_footer a:hover { color: #4c4c4c; }

        #page_footer a.back {
        color: #aaaaaa;
        padding-left: 15px;
        background: url(/images/a_pijl_terug.gif) center left no-repeat transparent; }

            #page_footer a.back:hover { color: #4c4c4c; background-image: url(/images/a_pijl_terug.gif); }

        #page_footer .print {
        color: #aaaaaa;
        padding-left: 15px;
        cursor: pointer;
        background: url(/images/i_print.gif) center left no-repeat transparent; }

            #page_footer a.print:hover { color: #4c4c4c; background-image: url(/images/i_print.gif); }


/**
 * PAGE-SPECIFIC ELEMENTS
 *
 * Style specially for pages
 */

/* contenttext: for all basic content text, such as page body's */
.contenttext { padding: 10px 0 0 0; margin-top: 0; }
     .contenttext ul { list-style-type: disc; margin-left: 3em; }
     .contenttext p { padding-top: 0; margin-top: 0; }

        /* Problem: padding behaves differently for IE and !IE. */
        /* Solution: set the right padding for !IE. */
        #content>.contenttext { padding: 9px 0 0 0; margin-top: 0; }


/* block: (news)blocks on the homepage */
.block {
clear: both;
margin-bottom: 2em; }

    .block h2 {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 1.1em; }

        .block h2 a {
        text-decoration: none;
        border: 0; }

    .block img {
    float: left;
    margin: 0 1em 1em .3em;
    border: 1px solid #68ade4; }

    .block p { margin: 0; padding: 0; }


/* inline list */
.inline_list_default {
padding: .8em 0; }

    .inline_list_default li { margin-bottom: .5em; border: 1px solid white; }

        .inline_list_default li a, .inline_list_default li a:visited {
        display: block;
        color: #003384;
        padding: 0 0 0 15px; margin: 0;
        background: transparent url(/images/a_pijl_blauw.gif) no-repeat 0 .6em; }

            .inline_list_default li a:hover { color: #ff6600; background: transparent url(/images/a_pijl_oranje.gif) no-repeat 0 .6em; }

/* default and rich menu */
.menu_default {
padding: .8em 0; }

    .menu_default li { margin-bottom: .1em; border: 1px solid white; }

        .menu_default li a, .menu_default li a:visited {
        display: block;
        color: #003384;
        padding: 0 0 0 10px; margin: 0;
        background: transparent url(/images/a_bullet_bl.gif) no-repeat 0 .7em; }

            .menu_default li a:hover { color: #ff6600; background: transparent url(/images/a_bullet_or.gif) no-repeat 0 .7em; }

.menu_rich { margin: 1em 0 2em 0; }
    .menu_rich li { clear: both; }
        .menu_rich li a { display: block; border: 0; }
    .menu_rich img {
    vertical-align: top;
    margin: 0 .2em 2em 0; }


/* Default and rich lists */
ul.default { }

    ul.default li { margin-bottom: 1em; }

        ul.default li h2 {
        font-size: 1em;
        color: #4c4c4c;
        margin: 0; padding: 0; }

            ul.default li h2 a, ul.default li h2 a:visited {
            font-size: 1em;
            color: #4c4c4c;
            margin: 0; padding: 0; }

            ul.default li h2 a:hover { color: #ff6600; }

ul.rich { }

    ul.rich li {
    border-top: 1px solid white;
    margin-bottom: 2em; }

        ul.rich li h2 {
        font-size: 1em;
        padding: 0; margin: 0; }

            ul.rich li h2 a, ul.rich li h2 a:visited {
            display: block;
            color: #4c4c4c;
            text-decoration: none;
            border: 0; }

            ul.rich li h2 a:hover { color: #ff6600; }

        ul.rich li img { margin: 0 0 .5em .5em; }

        ul.rich li div {
        padding: 0 14em 0 0; margin: 0; }

        ul.rich li div a, ul.rich li div a:visited {
        color: #003384;
        padding-right: 15px;
        background: url(/images/a_pijl_blauw.gif) center right no-repeat transparent; }

            ul.rich li div a:hover {
            color: #ff6600;
            background: url(/images/a_pijl_oranje.gif) center right no-repeat transparent; }

    li.group { margin-bottom: 2em; }
        li.group h2 { margin-bottom: .5em; }


/* default and rich group */
.group { }

    .group dt { margin-bottom: .2em; }

        .group dt a { font-weight: bold; color: #4c4c4c; }

            .group dt a:hover { color: #ff6600; }

    .group dd { margin: 0; padding: 0; }

        .group dd a {
        padding-left: 10px;
        color: #4c4c4c;
        background: url(/images/a_sitemap.gif) center left no-repeat transparent; }

            .group dd a:hover { color: #ff6600; background-image: url(/images/a_sitemap_over.gif); }

.group_default { }

    .group_default dt { margin-bottom: .5em; }

        .group_default dt a, .group_default dt a:visited {
        padding-left: 15px;
        color: #4c4c4c;
        background: url(/images/a_bul010.gif) center left no-repeat transparent; }

            .group_default dt a:hover { background-image: url(/images/a_bul011.gif); }

.group_rich { }

    .group_rich dt {
    clear: both;
    margin-top: 1em; padding: .3em;
    background-color: #f8f8f8; }

    .group_rich h2 { font-size: 1.2em; margin-bottom: .2em; }

        .group_rich h2 a, .group_rich h2 a:visited {
        display: block;
        border: 0;
        color: #4c4c4c;
        margin-bottom: .2em;
        background-color: #e8e8e8; }

               .group_rich h2 a:hover {
               color: #ff6600; }

    .group_rich dd {
    margin: 0; padding: 1em .5em 0em .5em;
    border-bottom: 2px solid #e8e8e8;
    background-color: #f8f8f8; }

        .group_rich dd a, .group_rich dd a:visited {
        color: #003384; }

               .group_rich dd a:hover {
               color: #ff6600; }

        .group_rich img {
        vertical-align: top;
        margin-right: .2em; }

    .group_rich h3 { font-size: 1.1em; margin-bottom: .2em; }

        .group_rich h3 a, .group_rich h3 a:visited {
        display: block;
        border: 0;
        color: #4c4c4c; }

               .group_rich h3 a:hover {
               color: #ff6600; }

        .group_rich div {
        padding: 0 14em 0 0; margin: 0; }


/* default and rich linkbox */
.linkbox_default {
margin: 0;
padding: .8em 0; }

    .linkbox_default li { margin-bottom: .1em; padding: 0; }

        .linkbox_default li a {
        color: #4c4c4c;
        padding-left: 10px;
        border: 0;
        background: url(/images/a_bullet_or.gif) center left no-repeat transparent; }

            .linkbox_default li a:hover { color: #003384; }

.linkbox_rich {
margin: 0 0 2em 1em;
border: 1px solid #e8e8e8;
background-color: #f8f8f8; }

    .linkbox_rich li {
    clear: both;
    margin-bottom: 1em; padding: .3em;
    height: 100px;
    border-bottom: 2px solid #e8e8e8; }

        /* Problem: linkboxes should at least be high enough to display the entire thumbnail, for IE, setting the height is adequate. !IE doesn't auto-stretch the element. */
        /* Solution: set the height back to auto, and provide a min-height value. */
        .linkbox_rich>li { height: auto; min-height: 150px; }

        .linkbox_rich li a { display: block; border: 0; }

    .linkbox_rich h2 { margin-bottom: .2em; background-color: #e8e8e8; }

    .linkbox_rich img {
    vertical-align: top;
    margin-right: .2em; }


/* semicolumn, for providing a 2-column layout, to be used in conjunction with float-left/float-right */
.semicolumn { width: 49%; padding: 0; margin: 1em 0; }

/* imgbox, for displaying an image with description in a box */
.imgbox {
float: right;
width: 100px;
margin: 0 0 2em 2em; }

    .imgbox img {
    float: none;
    display: block;
    margin: 0;
    border: 0; }

    .imgbox p {
    margin: 0; padding: .3em .3em .3em 0;
    font: bold .8em/1.2em Verdana, Helvetica, sans-serif; color: #aaa; }


/* basicform styles form elements, marked up in a definition list */
.basicform dl input, .basicform dl textarea, .basicform dl select { width: 95%; color: #4c4c4c; }

    /* IE displays border around radio buttons and checkboxes, which is ugly */
    .radio, .radio:hover, .checkbox, .checkbox:hover { width: auto !important; border: 0 !important; }

    .basicform dl dt {
    clear: both;
    width: 35%;
    float: left;
    color: #4c4c4c; }

    .basicform dl dd {
    width: 60%;
    float: left;
    margin: 0 0 1em 0;
    color: #4c4c4c; }

        .basicform dl dd div { clear: both; }

            .basicform dl dd div input.radio, .basicform dl dd div input.checkbox { float: left; }
            .basicform dl dd div label { display: block; margin-left: 2em; padding: 0; }

    .basicform input.button {
    float: right;
    width: 100px;
    border: 0;
    cursor: pointer;
    padding: 0px 3px 2px 3px;
    font: 1em Verdana, Helvetica, sans-serif; color: #aaaaaa;
    background-image: url("/images/a_pijl_verder.gif");
    background-color: transparent; background-repeat: no-repeat; background-position: right center; }

        .basicform input.button:hover { color: #4c4c4c; background-image: url("/images/a_pijl_verzend.gif"); }
        .basicform input.button:active { color: #ff6600; background-image: url("/images/a_pijl_verzend.gif"); }

/* search styles: form, info and results */
#resultsinfo { background-color: #e8e8e8; padding-bottom: .6em; }

    #resultsinfo h2 {
    float: left;
    font-size: 1.2em; }

    #resultsinfo p { float: right; margin: 0; }

    #resultsinfo h2, #resultsinfo p { margin: 0; padding: .2em 1em .1em .3em; }

#searchform {
margin: 1em 0; padding-bottom: 1em;
clear: both; }

    #searchform label { font-weight: bold; }
    #searchform input { width: 300px; }
    #searchform input.button {
    width: 100px;
    border: 0;
    cursor: pointer;
    padding: 0px 3px 2px 3px;
    font: 1em Arial, Helvetica, sans-serif; color: #aaaaaa;
    background-image: url("/images/a_pijl_verder.gif");
    background-color: transparent; background-repeat: no-repeat; background-position: right center; }

        #searchform input.button:hover { color: #4c4c4c; background-image: url("/images/a_pijl_verzend.gif"); }
        #searchform input.button:active { color: #ff6600; background-image: url("/images/a_pijl_verzend.gif"); }

#searchresults {
clear: both;
margin: 1.5em 0 0 0; }

    #searchresults dt { margin: 2em 0 .6em 0; }

    #searchresults dd { margin: .3em 0 0 1.4em; }


/* highlighting for search terms */
.highlight { background-color: #fecb89; }


/* forum styles */
.forum, .topic {
width: 97%;
margin: 0 0 2em 1em;
border: 1px solid #e8e8e8;
background-color: #f8f8f8; }

    .forum thead th, .topic thead th { margin-bottom: .2em; background-color: #e8e8e8; border: 2px solid #d8d8d8; }
    .forum tbody th, .forum tbody td { border-right: 2px solid #e8e8e8; }
    .forum tr, .topic tr { border-bottom: 2px solid #e8e8e8; }
    .forum td, .forum th, .topic td, .topic th { vertical-align: top; padding: .3em; }
    .forum img, .topic img { vertical-align: top; }
    .forum p { margin-top: 0; }

.post { }
.post th { border-right: 2px solid #e8e8e8; }
.author { }

.postform { background-color: #f8f8f8; }
    .postform .basicform dt { width: 15%; }
    .postform .basicform dd { width: 85%; }

/* odd, even and first for row coloring (zebra tables and distinctive first post) */
.odd { background-color: #fff; }
.even { background-color: #f8f8f8; }
.first { background-color: #68ade4; border: solid #d8d8d8; border-width: 0 2px; }

/* special icons for announcements, sticky topics and locked topics */
td.announcement, td.sticky, td.locked { padding-left: 25px; }
td.announcement { background: url(/images/i_announcement.gif) left center no-repeat; }
.announcement { font-weight: bold; }
td.sticky { background: url(/images/i_sticky.gif) left center no-repeat; }
td.locked { background: url(/images/i_locked.gif) left center no-repeat; }
.locked, .locked a { color: #e8e8e8; border-color: #e8e8e8; background-color: #039; }


/* bannercolumn */
#bannercolumn {
position: absolute;
top: 182px; left: 792px;
width: 182px; }

    /* Problem: to fill the content div in the body, height is set to 100%. IE auto-stretches the element, !IE does not. */
    /* Solution: set the height back to auto, and provide a min-height value of 100% */
    #container>#bannercolumn { top: 181px; }

    #bannercolumn h2 {
    padding: 0; margin: 0;
    line-height: 24px;
    font-size: 13px;
    font-weight: bold;
    color: #003384; }

    #banners { position: absolute; top: 249px; }

    #banners a { border: 0; }
    #banners img { margin-right: 1em; }

#banner_nav_main { position: absolute; top: 430px; margin-left: 20px; }


/* sitemap */
ul.sitemap {
margin: 1em 1em 1em 0; padding: 1em 1em 1em 0; }

    ul.sitemap li { }
        ul.sitemap li a {
        color: #4c4c4c;
        padding-left: .8em;
        border: 0;
        background-image: url("/images/a_sitemap.gif");
        background-color: transparent; background-repeat: no-repeat; background-position: left center; }

        ul.sitemap li a:hover {
        color: #003384;
        background-image: url("/images/a_sitemap_over.gif"); }

    ul.sitemap ul { margin: .3em 1em 1em .5em; padding: 0; }
        ul.sitemap ul li { padding-left: 2em; }


/* chapters in documents */
#chapters { margin: 1em 0; padding: .5em 0; }
    #chapters li { padding: .3em; }
        #chapters li a {
        color: #4c4c4c;
        padding-left: .8em;
        border: 0;
        background-image: url("/images/a_sitemap.gif");
        background-color: transparent; background-repeat: no-repeat; background-position: left center; }

        #chapters li a:hover {
        color: #003384;
        background-image: url("/images/a_sitemap_over.gif"); }

/* navbox, for displaying next/previous/index links */
.navbox {
margin-top: 2em; padding: .3em .2em;
text-align: center; }

    .navbox a { color: #aaaaaa; }
        .navbox a:hover, .navbox a:active { color: #4c4c4c; }

    /* previous, next, index and page links in navbox */
    .prev { float: left; padding-left: 15px; background: url("/images/a_pijl_terug.gif") no-repeat left center; }
    .next { float: right; padding-right: 15px; background: url("/images/a_pijl_verder.gif") no-repeat right center; }
    .index { }
    .page { margin: 0 .2em; padding: 2px 6px; }


/* more: paragraph with a "read more" link */
.more {
clear: both;
text-align: left;
padding: 0; margin: 0; }

    .more:first-letter { float: none !important; font-size: 1em !important; }

    .more a {
    color: #003384;
    padding-right: 15px;
    background: url(/images/a_pijl_blauw.gif) center right no-repeat transparent; }

        .more a:hover { color: #ff6600; background-image: url(/images/a_pijl_oranje.gif); }

.back { color: #aaaaaa; }

/* date: date in messages */
.date {
line-height: 35px;
font-weight: bold;
color: #4c4c4c; }


/* button: transforms a normal button to a styled button */
.button {
border: 1px outset #999;
cursor: pointer;
padding: 0px 3px 2px 3px;
font: 1em Arial, Helvetica, sans-serif; color: black;
background-color: #e8e8e8; }

    .button:active { border-style: inset; }


/* .feed: RSS-feed button placement */
.feed { float: right; border: 0 !important; margin: .5em .5em 1.5em 2em; padding: 0; }


/*
 * GLOBAL CLASSES
 *
 * global classes are used for very common styles, such as floating, coloring or clearing. Often used in combination, such as: <a href="link.html" class="align-right no-border">link aan de rechterkant zonder underline</a>.
 */

.clear-both     { clear: both; }
.float-left     { float: left; }
.float-right    { float: right; }

.inline         { display: inline; }
.show           { display: block; }
.hide           { display: none; }

.align-left     { text-align: left; }
.align-right    { text-align: right; }

.no-border      { text-decoration: none; }

.req            { color: red; }
.red            { color: #ff6600; }
.notice         { background-color: #ffa; color: #f60; }

.white          { color: white; }