html {
    min-height: 101%;
}
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font: 70% Arial, serif;
    line-height: 155%;
    color: #1d1060;;
    text-align: center;
}
a {
    text-decoration: none;
    color: #1d1060;;
}

img             {margin: 0; border: 0;}
form            {margin: 0;}
input           {margin: 0;}

.icon           {cursor: pointer;}
.nowrap         {white-space: nowrap;}
.error          {color: red;}

p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

/* Clear Floats Without Structural Markup
http://www.positioniseverything.net/easyclearing.html
----------------------------------------------------------*/
/* put period after content and clear it to expand div */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}
/* Hide from IE Mac \*/
.clearfix {display: block;}
/* End hide from IE Mac */
/* lay out */
#center {
    margin: 20px auto 200px auto;
    padding: 0px 0px 0px 0px;
    text-align: left;
    width: 959px;
    color: #1d1060;;
    border: 0px solid #344F68;
    background-color: #FFFFFF;
    background: url('../img/background/bg_content.gif') repeat-y;
}
#right_column {
    float: right;
    width: 781px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
}
    #right_column #top {
        padding: 0px 0px 0px 11px;
        margin: 0px 0px 10px 0px;
        font-family: 'Arial', serif;
        font-size: 120%;
        color: #1d1060;
        background: url('../img/background/header_top.gif') no-repeat;
        height: 61px;
        line-height: 61px;
    }
        #right_column #top a {
            color: #7c74a8;
        }
            #right_column #top a:hover {
                color: #1d1060;
            }

#left_column {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#footer {
    clear: both;
    height: 14px;
    background: url('../img/background/bg_footer.gif') no-repeat;
}

/* nav-main */
ul#nav-main {
    margin: 0px 0px 30px 0px;
    padding: 0px 0px 0px 0px;
    width: 144px;
    /*background-color: #e6e6e6;*/
}
    ul#nav-main li {
        list-style-type: none;
        padding: 0;
    }
        ul#nav-main li a {
            display: block;
            width: 144px;
            padding: 4px 10px 4px 10px;
            line-height: 20px;
            font-size: 110%;
            color: #1d1060;;
            text-decoration: none;
            background: #e6e6e7 url('../img/menu/background_li.gif') repeat-x 0 0;
        }
            ul#nav-main li a.sel {
                font-weight: bold;
            }
            ul#nav-main li a:hover {
                text-decoration: underline;
            }

            /* nested lists */
            ul#nav-main ul {
                margin: 0;
                padding: 0;
                background-color: #f9f9fa 
            }
            ul#nav-main ul li a {
                width: 134px;
                margin: 0;
                padding: 2px 10px 1px 20px;
                background: #f9f9fa url('../img/menu/background_nested_li.gif') repeat-x 0 0;
            }


/* breadcrumb */
ul#nav-breadcrumb {
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    background-color: #e6e6e6;
}
    ul#nav-breadcrumb li {
        float: left;
        padding: 0px 0px 0px 0px;
        list-style-type: none;
    }
        ul#nav-breadcrumb li a {
            display: block;
            padding: 0px 15px 0px 5px;
            font-size: 110%;
            line-height: 200%;
            text-decoration: none;
            background: transparent url('../img/menu/breadcrumb_arrow.gif') no-repeat 100% 50%; /* x-pos y-pos */
        }
        ul#nav-breadcrumb li a:hover {
            text-decoration: underline;
        }
/* multi-page-nav */
.multi-page-nav {
    height: 25px;
    background-color: transparent;
    color: white;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
}
    /* 11 t/m 20 van 45 */
    .multi-page-nav .counter {
        padding: 0px 5px 0px 35px;
    }
    /* << prev span | next span >> */
    .multi-page-nav .prev-next {
        padding: 0px 0px 0px 0px;
        font-weight: bold;
    }
        .multi-page-nav .prev-next .dots,
        .multi-page-nav .prev-next a {
            padding: 0px 3px 0px 3px;
            font-weight: bold;
            color: white;
        }
        .multi-page-nav .prev-next a:hover,
        .multi-page-nav .prev-next a.sel {
            color: #FF0000;
        }

    /* detail view << prev item | next item >> */
    .multi-page-nav .prev {
        white-space: nowrap;
        padding: 0px 5px 0px 5px;
        overflow: hidden;
    }
    .multi-page-nav .next {
        white-space: nowrap;
        padding: 0px 5px 0px 5px;
        overflow: hidden;
    }
/* home screenhot */
#screen-shot {
    width: auto;
    height: 400px;
    background: url('../../screen.png') no-repeat 40% 50%;
}

/* left-menu header */
#homer {
    width: 164px;
    background-color: white;
}
    #homer a {
        display: block;
        height: 70px;
        font-size: 1px;
        line-height: 999em;
        overflow: hidden;
        color: #D0DAE5;
        background: url('../../logo.png') no-repeat top center;
    }
        #homer a:link:focus,
        #homer a:visited:focus {
            -moz-outline: 0px;
        }

/* headers */
h1 {
    margin: 0px 0px 0px 0px;
    font-family: Georgia, serif;
    font-size: 220%;
    height: auto;
    line-height: 3em;
    color: #D0DAE5;
    background-color: #e6e6e6;
}

    h1 .user-title {
        display: block;
        float: right;
        padding-right: 5px;
        font-size: 50%;
        line-height: auto;
        font-style: normal;
    }

h2 {
    margin: 15px 0px 5px 0px;
    font-family: Georgia, serif;
    font-size: 150%;
    font-style: italic;
    color: #D0DAE5;
}

/* language switch */
#lang_header {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 39px;
}
    #lang_header a {
        color: #344F68;
    }


/* show list table-header */
.header {
    position: relative;
    font-size: 12px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
    height: 25px;
    line-height: 25px;
    color: #fff;
    background-color: #344F68;
    border: 1px solid #F2F1EC;
}
    .header input.search {
        position: absolute;
        top: 3px;
        right: 53px;
        padding: 0px 5px 0px 5px;
        height: 18px;
        width: 100px;
        color: #1d1060;;
        background-color: #fff;
        border: 1px solid #494949;
        line-height: 125%;
    }
    .header button.search {
        position: absolute;
        top: 3px;
        right: 27px;
        height: 22px;
        width: 22px;
        border: none;
        background: transparent url('../img/icons/search/search.gif') no-repeat 50% 50%;
        cursor: pointer;
    }
        .header button.search span {
            display: none;
        }
    .header .new-item,
    .header .list-items {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 25px;
        height: 22px;
    }

/* show list table */
table.showlist {
    width: 100%;
    border: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-collapse: collapse;
    font-size: 110%;
    color: black;
    background-color: #FFFFFF;
}
    /* rescale fonts sub-tables */
    table.showlist table.showlist {
        font-size: 100%;
    }
    /* table rows */
    table.showlist tr.light {
        background-color: #e6e6e6;
    }
    table.showlist tr.dark {
        background-color: #fff;
    }

    /* table heads */
    table.showlist th {
        line-height: 25px;
        padding: 0px 0px 0px 0px;
        background-color: #f3f3f3;
        border: 1px solid #FFFFFF;
    }
        /* field headers */
        table.showlist th .field-header {
            /* position: relative; /* */
            /* height: 25px; /* */
        }
            /* select filter */
            table.showlist th .field-header select {
                margin-top: 3px;
                height: 20px;
                font-size: 100%;
                font-weight: bold;
                font-family: Arial, sans-serif;
                color: #1d1060;;
                padding: 0px;
                background-color: #f3f3f3;
                border: 1px solid #f3f3f3;
            }
            /* sorter */
            table.showlist th .field-header a.sorter {
                display: block;
                width: 100%;
                padding: 0px 0px 0px 0px;
                background-color: transparent;
                background-repeat: no-repeat;
                background-position: 100% 50%;
                cursor: pointer;
            }
                /* sort icons */
                table.showlist th .field-header a.sorter.up {
                    background-image: url('../img/icons/filesystem/sort_up4.gif');
                }
                table.showlist th .field-header a.sorter.down {
                    background-image: url('../img/icons/filesystem/sort_down4.gif');
                }
            table.showlist th .field-header a:hover {
                background-color: #fff;
            }
                table.showlist th .field-header a .sort-label {
                    padding: 0px 5px;
                }


    /* table data */
    table.showlist td {
        padding: 0px 5px;
        height: 25px;
        line-height: 25px;
        white-space: nowrap;
        border: 1px solid #FFFFFF;
    }
        /* sub-tables */
        table.showlist td.sub-table {
            padding: 15px 0px 10px 26px;
            background: white url('../img/background/sub_table_connect.gif') no-repeat 0px -10px;
        }

        /* specific data fields */
        table.showlist td.radio {
            text-align: center;
            width: 72px;
            padding: 0px 0px 0px 0px;
        }
        table.showlist td.datetime {
            width: 110px;
        }
        /* new, edit, del, folder anchor/icons */
        table.showlist td.folder,
        table.showlist td.edit,
        table.showlist td.del {
            padding: 0px 0px 0px 0px;
            width: 25px;
        }
            .header .new-item a,
            .header .list-items a,
            table.showlist td.folder a,
            table.showlist td.edit a,
            table.showlist td.del a {
                display: block;
                width: 25px;
                line-height: 999em;
                height: 25px;
                font-size: 0.1em;
                overflow: hidden;
                background-repeat: no-repeat;
                background-position: 50% 3px;
                background-color: transparent;
            }
            table.showlist td.folder a {
                background-position: 50% -22px;
            }
                table.showlist td.folder.sel a,
                table.showlist td.folder a:hover {
                    background-position: 50% 0px;
                }
            /* place icons */
            .header      .new-item   a {background-image: url('../img/icons/document/add_item.gif');}
            .header      .list-items a {background-image: url('../img/icons/document/list_items.gif');}
            table.showlist td.folder a {background-image: url('../img/icons/filesystem/folder.gif');}
            table.showlist td.edit   a {background-image: url('../img/icons/document/edit_item.gif');}
            table.showlist td.del    a {background-image: url('../img/icons/document/delete_item.gif');}

/* del-record form */
form.del-record {
    position: relative;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 22px;
    width: 22px;
}
    form.del-record input.submit {
        position: absolute;
        top: 2px;
        left: 2px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }

/* edit-record form */
form#edit-record {
    margin: 0px 0px 0px 0px; 
    padding: 10px 10px 10px 10px;
    font-size: 11px;
    border: 1px solid #FFFFFF;
    background-color: #f5f5f5;
}
    form#edit-record div.fieldcontainer {
        padding: 5px 0px 5px 0px;
        border-bottom: 1px solid #D0DAE5;
    }
    form#edit-record label {
        display: block;
        float: left;
        padding: 0px 5px 0px 0px;
        font-size: 110%;
        font-weight: bold;
        line-height: 135%;
    }
    form#edit-record p {
        float: left;
        padding: 0px 0px 0px 0px;
        width: 500px;
        font-size: 110%;
    }
    form#edit-record ul.checked-values {
        float: left;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        width: 500px;
        font-size: 110%;
    }
    form#edit-record ul.checked-values li {
        margin: 0px 0px 0px 15px;
    }
        form#edit-record label.main {
            clear: both;
            width: 160px;
            height: 100%;
        }
        form#edit-record label.error {
            display: block;
            line-height: 15px;
            height: 15px;
            width: 100%;
            margin: 0px 0px 0px 0px;
            padding: 15px 0px 0px 0px;
            text-align: left;
            font-size: 9px;
        }

    /* field inputs */
    form#edit-record input,
    form#edit-record select {
        float: left;
    }
    /* select field */
    form#edit-record select {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
        /* text field */
        form#edit-record input.text {
            margin: 0px 0px 0px 0px;
        }
        /* textarea */
        form#edit-record textarea {
            margin: 0px 0px 0px 0px;
        }
        .fieldcontainer .wym_skin_tinymce {
            float: left;
            width: 504px;
        }
        /* date field */
        form#edit-record input.date_day {
            margin: 0px 5px 0px 0px;
            padding: 0px 0px 0px 0px;
            width: 20px;
        }
        form#edit-record input.date_month {
            margin: 0px 5px 0px 5px;
            padding: 0px 0px 0px 0px;
            width: 20px;
        }
        form#edit-record input.date_year {
            margin: 0px 5px 0px 5px;
            padding: 0px 0px 0px 0px;
            width: 40px;
        }

        /* radio field */
        form#edit-record input.radio {
            margin: 0px 3px 0px 0px;
            padding: 0px 0px 0px 0px;
            height: 20px;
        }

        /* checkbox */
        form#edit-record .checkbox_container {
            float: left;
        }
            form#edit-record .checkbox_container input.checkbox {
                float: left;
                clear: left;
                margin: 0px 5px 0px 2px;
                padding: 0px 0px 0px 0px;
                height: 20px; /* get it aligned in FF */
            }
            form#edit-record .checkbox_container label {
                display: block;
                float: left;
                line-height: 20px;
            }

        /* file upload field */
        form#edit-record .fieldcontainer.file .label-container {
            float: left;
            width: 160px;
        }
            /* delete checkbox */
            form#edit-record .fieldcontainer.file input.checkbox,
            form#edit-record .fieldcontainer.file label.checkbox {
                display: block;
                float: left;
                margin-bottom: 20px;
            }
            form#edit-record .fieldcontainer.file input.checkbox {
                margin-right: 5px;
                height: 20px;
            }
            form#edit-record .fieldcontainer.file label.checkbox {
                line-height: 20px;
            }
        form#edit-record .fieldcontainer.file .input-container {
            float: left;
            width: 550px;
            padding: 0px 0px 0px 5px;
        }
            form#edit-record .fieldcontainer.file a {
                float: left;
                text-decoration: none;
            }
                form#edit-record .fieldcontainer.file a img {
                    vertical-align: bottom;
                    margin: 0px 0px 5px 0px;
                }
            form#edit-record .fieldcontainer.file input.file {
                float: left;
                height: 22px;
                margin: 0px 0px 5px 0px;
                padding: 0px 0px 0px 0px;
            }

        /* submit field */
        form#edit-record input.submit {
            margin: 20px 0px 0px 0px;
        }
/* login form */
form#login {
    margin: 50px 0px 30px 0px;
    padding: 0px 0px 0px 0px;
    width: 300px;
}
    form#login fieldset {
        margin: 0px 0px 0px 0px;
        padding: 20px 15px 15px 15px;
        border: 0px solid #D0DAE5;
    }
    form#login .field-container {
        background-color: white;
        margin: 0px 0px 10px 0px;
    }
    form#login label {
        display: block;
        margin: 0;
        padding: 0;
        float: left;
        clear: left;
        width: 110px;
        font-size: 110%;
        line-height: 18px;
        color: #344F68;
    }
    form#login input {
        float: right;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 5px;
        height: 18px;
        width: 145px;
        font-family: Arial, sans-serif;
        font-size: 110%;
        color: #344F68;
        border: 1px solid #D0DAE5;
        background-color: #e6e6e6;
    }
        form#login input.submit {
            float: right;
            padding: 0px 0px 0px 0px;
            width: auto;
            height: 20px;
            color: #344F68;
            border: 1px solid #D0DAE5;
        }
    form#login .error {
        color: red;
    }