html, body
{
    height: 100%;
}

body
{
    background-color: #ffffff;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #000000;
    line-height: 1.5em;
}

a:link
{
    color: #034af3;
    text-decoration: underline;
}
a:visited
{
    color: #505abc;
}
a:hover
{
    color: #1d60ff;
    text-decoration: none;
}
a:active
{
    color: #12eb87;
}

p, ul
{
}

/* FIX OVERLAY
----------------------------------------------------------*/

.ui-widget-overlay
{
    /*position: fixed;*/
}

/* TABLES
----------------------------------------------------------*/

table th
{
    text-align: left; /*border-left: 1px groove #cccccc;*/
}

/* MASTERPAGE LAYOUT
----------------------------------------------------------*/

#main
{
    width: 100%;
    height: 100%;
}

#main #leftmenu
{
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    width: 200px;
    overflow: auto;
    border-right: 1px solid #eeeeee; /*background: #ffffff url('gradient2.png') repeat-x fixed left top;*/ /*background: #ffffff url('Gradient/test.png') repeat-x fixed left top;*/
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #ffffff; /* later overriden */
    background-image: none; /* later overriden */
}

#menuToggle
{
    background-color: lightgray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    position: absolute;
    left: 200px;
    width: 8px;
    top: 0px;
    bottom: 0px;
}
#menuToggle > table td
{
    height: 100%;
    width: 8px;
    vertical-align: middle;
    text-align: center;
}
#menuToggle > table td div
{
    margin-left: -4px;
}
#menuToggle > table
{
    width: 8px;
    height: 100%;
}

#main #header
{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 80px;
    background: #0073ea url('gradient.png') repeat-y fixed;
    position: absolute;
}

#main #header #publisherChooser
{
    float: right;
    margin-top: 30px;
    width: 290px;
    border: 0px solid black;
}

#main #header #culturechooser
{
    float: right;
}

#main #content
{
    position: absolute;
    top: 0px;
    left: 210px;
    bottom: 0;
    right: 0;
    overflow: auto; /*overflow-y:scroll;*/
}

#main #content #content-resizable
{
    position: absolute;
    width: 100%;
    height: 6px;
    z-index: 999;
    cursor: n-resize;
}

/*
#main #content .content-top-bottom
{
}
// --> Now in Sppage
*/
/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, .editor-label, .display-field, .editor-field
{
    float: left;
    margin-bottom: 2px;
}

.display-label, .editor-label
{
    clear: both;
    width: 150px;
}
.editor-submit
{
    margin: 10px 0 0 150px;
}

.editor-submit input
{
    margin-right: 4px;
}

.spFormWidget .editor-label
{
    display: block;
}

.spFormWidget .editor-field
{
    display: block;
}

h2
{
    float: left;
    margin-bottom: 2px;
    display: block;
    clear: both;
    width: 100%;
    border-bottom: 1px dotted gray;
}
fieldset
{
    float: left;
}

.display-field
{
    display: inline;
}

input[type="text"], select
{
    width: 250px;
}
input[disabled], select[disabled], spFormDisabled
{
    color: gray !important;
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

/*bart */
.clear
{
    clear: both;
}

legend
{
    font-weight: bold;
}

fieldset
{
    margin-bottom: 1em;
    border: 0px solid #cccccc;
    margin-left: 1em;
}

.pageBox
{
    padding: 4px;
}

/*.pageBox .ui-widget-content,*/
.pageBox .ui-widget-header
{
    padding: 4px 0 4px 4px;
}

.pageBox table.bodyTable td, .pageBox table.headerTable th, .pageBox table.footerTable td
{
    height: 25px;
    vertical-align: middle;
    padding: 0 0 0 4px;
    border-left: 1px solid #eeeeee;
}
.pageBox table.bodyTable td
{
    height: 20px;
}

.pageBox table.bodyTable th /* onzichtbare header */
{
    padding: 0 0 0 4px;
    border-left: 1px solid #eeeeee;
}
.pageBox table.headerTable .sortHeaderIcon
{
    margin-right: 3px;
}

.pageBox table.bodyTable
{
    /*border-top: 0; /* dubbele border */
    border-width: 0 1px 1px 0; /* only bottom & right */ /*border-right: 0;  webkit scrollbar bug? nu opgelost! */
}

.pageBox table.headerTable td /* waar searchbox in zit */
{
    border-left: 1px solid #eeeeee;
    text-align: center;
    vertical-align: middle;
}
.pageBox table.headerTable td input
{
    border: 0;
    height: 15px;
    width: 99%;
    background-color: transparent;
    padding-left: 20px;
}

.pageBox table.bodyTable tr
{
    /*border-bottom: 1px solid #eeeeee;     border-top: 1px solid #eeeeee;*/
}

.pageBox table.bodyTable tr.ui-state-highlight
{
    background-position: 50% 50%;
    font-weight: bold;
}

h1.pageTitle
{
    display: block;
    margin: 4px;
    padding: 6px 4px 6px 4px;
    font-size: 14px;
}

input.text-s
{
    width: 100px;
}

input.text-m
{
    width: 150px;
}

#validationBottom
{
    position: fixed;
    bottom: -1px;
    right: 30px;
    display: inline-block;
    padding: 0px;
    border-bottom: 0 !important;
    height: 0px;
    width: 0px;
    overflow: hidden;
    z-index: 999;
}

#validationBottom ul
{
    margin: 0 20px 0 20px;
}
#validationBottom div
{
    margin: 20px 0 0 20px;
    white-space: nowrap;
    display: inline-block;
}

#validationBottom li
{
    list-style-type: square;
    margin-left: 10px;
    white-space: nowrap; /*display: block;     white-space:nowrap;*/
}

#logoDiv
{
    height: 70px;
    width: 100%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

#logoDiv img
{
    height: 100%;
    width: 100%;
}

#publisherSwitcher .publisherSwitcherItem
{
    position: relative;
    float: left;
    width: 200px;
    height: 70px;
    margin: 5px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: none; /* later overriden */
    cursor: pointer;
    text-align: center;
    padding-top: 40px; /* verical center text */
    font-size: 14px;
}

#publisherSwitcher .publisherSwitcherItemImage
{
    text-indent: -9999px;
}

#publisherSwitcher .ui-state-hover, #publisherSwitcher .ui-state-hover a
{
    background-image: none;
    color: inherit;
}

#publisherSwitcher .publisherSwitcherItem .publisherSwitcherItemCorner
{
    text-indent: 0px;
    position: absolute;
    font-size: 10px;
    left: -1px;
    bottom: -1px;
    padding: 0 3px 0 3px;
}

/* COLORPICKER */

.colorpicker
{
    width: 356px;
    height: 176px;
    overflow: hidden;
    position: absolute;
    background: url(ColorPicker/colorpicker_background.png);
    font-family: Arial, Helvetica, sans-serif;
    display: none;
}
.colorpicker_color
{
    width: 150px;
    height: 150px;
    left: 14px;
    top: 13px;
    position: absolute;
    background: #f00;
    overflow: hidden;
    cursor: crosshair;
}
.colorpicker_color div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: url(ColorPicker/colorpicker_overlay.png);
}
.colorpicker_color div div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    overflow: hidden;
    background: url(ColorPicker/colorpicker_select.gif);
    margin: -5px 0 0 -5px;
}
.colorpicker_hue
{
    position: absolute;
    top: 13px;
    left: 171px;
    width: 35px;
    height: 150px;
    cursor: n-resize;
}
.colorpicker_hue div
{
    position: absolute;
    width: 35px;
    height: 9px;
    overflow: hidden;
    background: url(ColorPicker/colorpicker_indic.gif) left top;
    margin: -4px 0 0 0;
    left: 0px;
}
.colorpicker_new_color
{
    position: absolute;
    width: 60px;
    height: 30px;
    left: 213px;
    top: 13px;
    background: #f00;
}
.colorpicker_current_color
{
    position: absolute;
    width: 60px;
    height: 30px;
    left: 283px;
    top: 13px;
    background: #f00;
}
.colorpicker input
{
    background-color: transparent;
    border: 1px solid transparent;
    position: absolute;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #898989;
    top: 4px;
    right: 11px;
    text-align: right;
    margin: 0;
    padding: 0;
    height: 11px;
}
.colorpicker_hex
{
    position: absolute;
    width: 72px;
    height: 22px;
    background: url(ColorPicker/colorpicker_hex.png) top;
    left: 212px;
    top: 142px;
}
.colorpicker_hex input
{
    right: 6px;
}
.colorpicker_field
{
    height: 22px;
    width: 62px;
    background-position: top;
    position: absolute;
}
.colorpicker_field span
{
    position: absolute;
    width: 12px;
    height: 22px;
    overflow: hidden;
    top: 0;
    right: 0;
    cursor: n-resize;
}
.colorpicker_rgb_r
{
    background-image: url(ColorPicker/colorpicker_rgb_r.png);
    top: 52px;
    left: 212px;
}
.colorpicker_rgb_g
{
    background-image: url(ColorPicker/colorpicker_rgb_g.png);
    top: 82px;
    left: 212px;
}
.colorpicker_rgb_b
{
    background-image: url(ColorPicker/colorpicker_rgb_b.png);
    top: 112px;
    left: 212px;
}
.colorpicker_hsb_h
{
    background-image: url(ColorPicker/colorpicker_hsb_h.png);
    top: 52px;
    left: 282px;
}
.colorpicker_hsb_s
{
    background-image: url(ColorPicker/colorpicker_hsb_s.png);
    top: 82px;
    left: 282px;
}
.colorpicker_hsb_b
{
    background-image: url(ColorPicker/colorpicker_hsb_b.png);
    top: 112px;
    left: 282px;
}
.colorpicker_submit
{
    position: absolute;
    width: 22px;
    height: 22px;
    background: url(ColorPicker/colorpicker_submit.png) top;
    left: 322px;
    top: 142px;
    overflow: hidden;
}
.colorpicker_focus
{
    background-position: center;
}
.colorpicker_hex.colorpicker_focus
{
    background-position: bottom;
}
.colorpicker_submit.colorpicker_focus
{
    background-position: bottom;
}
.colorpicker_slider
{
    background-position: bottom;
}

/* FARBTASTIC */
/*
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(Farbtastic/wheel.png) no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url(Farbtastic/mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden;
  background: url(Farbtastic/marker.png) no-repeat;
}
*/
/* Logon */

#logonWrapper
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -307px;
    background: #ffffff url('logos/vlak donkerblauw.png') no-repeat;
    width: 800px;
    height: 614px;
}

#logonScreen
{
    /*     position: absolute;     top: 50%;     left: 50%;     margin-left: -319px;     margin-top: -150px;     width: 641px;     height: 300px;     background: #ffffff url('splogo.gif') no-repeat;     border: 1px solid black;     */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -319px;
    margin-top: -90px;
    width: 641px;
    height: 300px;
    background: #ffffff url('logos/Logo_SPA_SPC.png') no-repeat;
    border: 1px solid black;
}

#logonScreenInner
{
    margin-top: 115px;
    margin-left: 15px;
}

#logonScreen #UserName, #logonScreen #Password
{
    width: 210px;
}

#Hp_Logos
{
    margin-left: 0px;
    margin-top: 0px;
    width: 700px; /* 641px; */
    height: 200px; /* 150px; */
    background: #ffffff url('logos/Logo_SPA_SPC.png') no-repeat;
    background-position: center;
}

.SP_Contactdata
{
    width: 700px;
    background-color: #FFFFFF;
}

.SP_Contactdata td
{
    width: 50%;
    padding-left: 50px;
}

/* ----- spPage ----- */

.spPage
{
    /*margin-left: 5px;      margin-top: 5px;      margin-right: 5px*/
    position: relative;
    height: 200px;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}

.spPage h1
{
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: bold;
}

.spPage .spPage-breadcrumb
{
    display: inline-block;
    padding: 2px 4px 2px 4px;
    margin-top: 5px;
}
.spPage .spPage-breadcrumb-selected
{
    border-bottom-width: 0;
}
.spPage .spPage-bar
{
    margin-top: 0px;
    padding: 5px;
}

.spPage .spPage-bar-empty
{
    margin-top: 0px;
    padding: 1px;
}

.spPage .spPage-content
{
    border-top-width: 0;
    padding: 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: 63px; /* 58 + margin-top breadcrumb (5) */
    bottom: 0px;
}
.spPage .spPage-content-no-bar
{
    top: 31px; /* 26? + margin-top breadcrumb (5) */
}

.spPage .spPage-content .spPage-content-inner
{
    position: absolute;
    top: 0;
    bottom: 22px;
    width: 100%;
    overflow: auto;
}

.spPage-Maint
{
    width: 100%;
}

.spPage-in-page-top
{
    position: absolute;
    top: 0;
    width: 100%;
    overflow: auto;
}

.spPage-in-page-bottom
{
    position: relative;
    bottom: 22px;
    width: 100%;
    overflow: auto;
}

.spPage .spPage-content-footer
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
}

.spPage .spPage-tab
{
    display: inline-block;
    padding: 3px 6px 3px 6px;
}
.spPage .spPage-content .pageof-spPage
{
    padding: 4px;
}

.spPage-3col-container
{
    border: 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.spPage-3col-col-1-container, .spPage-3col-col-2-container, .spPage-3col-col-3-container
{
    padding: 2px;
    width: 33%;
}

.spPage-3col-col-1, .spPage-3col-col-2, .spPage-3col-col-3
{
    width: 100%;
    padding: 0px;
}

.spPage-3col-col-1-label, .spPage-3col-col-2-label, .spPage-3col-col-3-label
{
    width: 50%;
}

.spPage-3col-col-1-field, .spPage-3col-col-2-field, .spPage-3col-col-3-field
{
    width: 50%;
}

/* ----- Price ----- */
.prce-clear
{
    clear: both;
}

.prce-div
{
    width: 100px;
    float: left;
    padding: 2px;
}

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

.prce-div-hr
{
    float: left;
    padding: 2px;
    margin-left: 100px;
}

.prce-value-input
{
    width: 80px !important;
    text-align: right;
}

.prce-value-span
{
}

.prce-name-input
{
    width: 90px !important;
    background: none;
    border: 0;
    border-bottom: 1px solid #cccccc;
}

.spPage-mjd-form
{
    width: 100%;
}

#publisherSwitcher
{
    width: 900;
    top: 10px;
}