/********************************************************************************
    menublok.width = 270px
    menublok.height = 160px
********************************************************************************/
html, body
{
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.page
{
    max-width: 1170px; /*!!!  = 4 * menublok.width + 4 * menu.margin-left + 4 * menu.padding + top.padding-right  */
}
.top, .bottom
{
    float: left;
    padding-right: 10px;
}
.top
{
    height: 165px;
}
.bottom
{
    padding-bottom: 10px;
}
.menu
{
    width: 250px; /*!!! = menublok.width - padding-left - padding-right */
    text-transform: lowercase;
}
.content
{
    text-align: justify;
    font-size: smaller;
}
.content, .bottom .menu
{
    margin-top: 10px;
}
.content
{
    width: 810px; /* = 3 * menublok.width + 2 * menu.margin-left - content.padding-right - content.padding-left */
}
@media screen and (max-width: 866px)
{
    .content
    {
        width: 530px; /* = 2 * menublok.width + 1 * menu.margin-left - content.padding-right - content.padding-left */
    }
    .top
    {
        height: 330px;
    }
}
@media screen and (max-width: 586px)
{
    .content
    {
        width: 250px; /* = menublok.width + 1 * menu.margin-left - content.padding-right - content.padding-left */
    }
    .top
    {
        height: 660px;
    }

}
@media screen
{
    .menu, .content
    {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        background-color: #ffee99;
        float: left;
        margin-left: 10px;
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 5px 5px 10px #999; /* Safari and Chrome!!! */
        -moz-box-shadow: 5px 5px 10px #999; /* Firefox!!! */
        box-shadow: 5px 5px 10px #999;
    }
}
@media print
{
    .content
    {
        width: 100%;
    }
}
.top .menu
{
    margin-top: 10px;
    height: 150px; /*!!! = menublok.height - padding-top - padding-bottom */
    background: url(gradient.png); /* ee5500 ffee99 160px height 10px width */
    background: -moz-linear-gradient(top, #ee5500, #ffee99);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ee5500), to(#ffee99));
    background: linear-gradient(top, #ee5500, #ffee99);
}
.header
{
    position: relative;
}
.items
{
    font-size: smaller; /*position: relative;     padding-bottom: 5px;*/
}
.top .items
{
    bottom: 5px;
    position: absolute;
}
/********************************************************************************
  Text
********************************************************************************/
.menu .header, .menu .items, .rightmenuheader, .menu header
{
    font-weight: bold;
}
.menu .header, .menuheader, .menu header
{
    font-size: x-large;
    color: #ffee99;
}
.rightmenuheader
{
    /* see also h4 */
    color: #ee5500;
}
/********************************************************************************
  Hyperlinks
********************************************************************************/
a
{
    text-decoration: none;
}
@media screen
{
    a
    {
        color: #cc0000;
    }
    a:hover, .hover
    {
        color: #000000;
        border-bottom-style: dotted;
        border-bottom-width: 1px;
    }
    a.hle, a.hle:hover
    {
        background-repeat: no-repeat;
        background-position: right;
        padding-right: 16px;
        padding-bottom: 1px;
        white-space: nowrap; /* anders 2 keer icon */
    }
    a.hle
    {
        background-image: url('url_external.gif');
    }
    a.hle:hover
    {
        background-image: url('url_external_h.gif');
    }
    a.hli, a.hli:hover
    {
        border-style: none;
        color: #ee5500;
    }
}
@media print
{
    a
    {
        color: #000000;
    }
    a.hle:link:after, a.hle:visited:after
    {
        content: " (" attr(href) ") ";
    }
}
/********************************************************************************
  Common
********************************************************************************/
ul, ol
{
    text-align: left;
}
img
{
    border-style: none;
    border-width: 0px;
}
table
{
    border-collapse: collapse;
}
td
{
    padding: 0px;
}
@media screen
{
    h1, h2, h3, h5, .onderschrift
    {
        color: #ee5500;
    }
}
h1
{
    margin: 0px;
}
h2, h3, h4, h5, h6, hr
{
    margin: 15px 0px 0px 0px;
}
h1
{
    font-size: 260%;
}
h2
{
    font-size: 200%;
}
h3
{
    font-size: 140%;
}
h4, .rightmenuheader
{
    font-size: 140%;
}
h5
{
    font-size: 100%;
}
h6, .onderschrift
{
    font-size: 80%;
}
/********************************************************************************
  Afbeeldingen
********************************************************************************/
img.right
{
    margin-left: 10px;
    float: right;
}
img.left
{
    margin-right: 10px;
    float: left;
}
img.icon
{
    margin-left: 5px;
    vertical-align: baseline;
}
.onderschrift, .afbeelding
{
    text-align: center;
    vertical-align: middle;
}
.next
{
    margin-left: 10px;
}
.onderschrift
{
    font-weight: bold;
}
.slide
{
    height: 400px;
}
.slidebutton
{
    background-color: #FFEE99;
    width: 100px;
}
/********************************************************************************
  Special tag and controls
********************************************************************************/
@media screen
{
    .copyright
    {
        visibility: hidden;
        display: none;
    }
}
@media print
{
    .copyright
    {
        font-size: small;
        margin-bottom: 30px;
    }
}
@media print
{
    .noprint
    {
        visibility: hidden;
        display: none;
    }
}
hr
{
    border-style: none none dotted none;
    border-width: 0px 0px 2px 0px;
}
@media screen
{
    hr
    {
        border-color: #ee5500;
    }
}
table, td
{
    vertical-align: top;
}
.fullwidth
{
    width: 100%;
}
@media screen
{
.attentie
{
    color: #ee5500;
    font-weight: bold;
}
table.list tr:nth-child(even)
{
    background-color: #fff4bb;
}
table.list tr:nth-child(odd)
{
    background-color: #ffe892;
}
table.list tr:first-child
{
    background-color: #ffe877;
    font-weight: bold;
    color: #ee5500;
}
table.list td
{
    padding-right: 2px;
    padding-left: 2px;
    border: 1px dotted #ee5500;
}
    ul li
    {
        list-style-image: url('bullet.gif');
    }
}
@media print
    {
    .attentie
    {
        font-weight: bold;
    }
    table.list tr:nth-child(even)
        {
            background-color: #C0C0C0;
        }
    table.list tr:first-child, .darker
    {
        background-color: #808080;
        color: #FFFFFF;
    }
    table.list tr:first-child
    {
        font-weight: bold;
        color: #FFFFFF;
    }
    table.list td
    {
        padding-right: 2px;
        padding-left: 2px;
        border: 1px dotted #000000;
    }
    ul li
    {
        list-style-image: url('bullet.gif');
    }
}
.watermark
{
    color: #808080;
}
/*
sup
{
    vertical-align: text-top;
}
sub
{
    vertical-align: text-bottom;
}
*/
sup, sub
{
    vertical-align: 0;
    position: relative;
}
sup
{
    bottom: 1ex;
}
sub
{
    top: 0.8ex;
}
/********************************************************************************
  Error
********************************************************************************/
.error
{
    color: #FF00FF;
    font-weight: bold;
    text-decoration: underline;
}