/* General layout styles */
/* --------------------- */

body,html {
    height: 100%;
    margin: 0;
    margin-left: 0;
    padding: 0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: small;
    z-index: 1;
}

body {
    background: #FFF url() no-repeat center 80% fixed;
}

hr {
    margin-right: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 3px;
    background-color: #B0D0E0;
}

.hiddenplaceholder {
    visibility: hidden;
}

#wrap {
    min-width: 600px;
    overflow: hidden;
}

#header {
    padding-right: 10px;
    padding-left: 10px;
    background: #003366;
}

#headerVIVIN {
    padding-right: 10px;
    padding-left: 10px;
    background: #60377b;
}

#headerCompany {
    text-align:center;
    font-size:150%;
    color: #FFF;
}

.headerText {
    margin: 0;
    padding: 1px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 100%;
    color: #FFF;
}

.supportLink {
    margin: 0;
    padding: 1px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 100%;
    font-weight: bold;
    color: #0F0;
}

#main {
    padding-top: 10px;
    padding-right: 10px;
}

#leftandcontent {
    float: left;
    clear: left;
    width: 80%;
}

#left {
    float: left;
    width: 25%;
}

#content {
}

#right {
    float: right;
    width: 20%;
}

#footer {
    color: #FFF;
    background-color: #6699CC;
    padding-left: 10px;
    clear: both;
}

/* Style for links */
/* --------------- */

a {
    color: #003366;
    text-decoration: none;
}

a:hover,
a span:hover {
    text-decoration: underline;
}

a img {
    border: none;
    vertical-align: middle;
}


/* Styles for the standard display window */
/* -------------------------------------- */

.box {
    line-height: 1.5em;
    color: #003366;

    /* The following two directives fix the IE 6/7 bug about "position: relative" in a content box (the box shadow, causing somehow the hiding of a few contents like ZK calendar and listboxes) */
    position: relative;
    overflow: auto;

    left: -5px; /* To allow for the shadow (the shadow is 5 pixels wide) */
    top: -5px; /* To allow for the shadow (the shadow is 5 pixels wide) */
}

.boxheader {
    font-size: large;
    text-align: center;
    background: #E2E3F6;
}

.boxbody {
    font-size: 95%;
    color: #003366;
    background: #F2F1F8;
}

.boxbodypadding {
    padding: 10px; /* Padding within the body */
    overflow: auto;
}

.boxgap {
    margin-left: 10px; /* To provide a gap between adjacent boxes */
    margin-bottom: 10px; /* To provide a gap between adjacent boxes */
}

/* Styles common to menu and box */
/* ----------------------------- */

.bordertop {
    background: url(../images/box/dot.jpg) top repeat-x;
}

.borderbottom {
    background: url(../images/box/dot.jpg) bottom repeat-x;
}

.borderleft {
    background: url(../images/box/dot.jpg) left repeat-y;
}

.borderright {
    background: url(../images/box/dot.jpg) right repeat-y;
}

.headertopleft {
    background: url(../images/box/boxheadertopleft.jpg) top left no-repeat;
}

.headertopright {
    background: url(../images/box/boxheadertopright.jpg) top right no-repeat;
    padding: 10px; /* Padding within the header */
}

.bodybottomleft {
    background: url(../images/box/boxbodybottomleft.jpg) bottom left no-repeat;
}

.bodybottomright {
    background: url(../images/box/boxbodybottomright.jpg) bottom right no-repeat;
}

.shadowtopright {
    background: url(../images/box/boxshadowtopright.jpg) right top no-repeat;
}

.shadowbottomleft {
    background: url(../images/box/boxshadowbottomleft.jpg) left bottom no-repeat;
    padding-top: 5px; /* To allow for the shadow (the shadow is 5 pixels wide) */
    padding-left: 5px; /* To allow for the shadow (the shadow is 5 pixels wide) */
}

.bordershadow {
    /* The following directive fix the IE 6/7 bug about "position: relative" in a content box (the box shadow, causing somehow the hiding of a few contents like ZK calendar and listboxes) */
    position: relative;

    background: url(../images/box/shadow.jpg) bottom right;
    *display: inline-block; /* Ugly hack for IE7 */
    _display: inline-block; /* Ugly hack for IE6 */
}


/* Styles for input fields */
/* ----------------------- */

fieldset {
    border: 1px solid #6699CC;
    margin-bottom: 10px;
}

fieldset legend {
    font-weight: bold;
    font-size: 110%;
}

/* Create a 3D raised button effect */
.inputtitle {
    border-top: 2px solid #E2E3F6;
    border-left: 2px solid #E2E3F6;
    border-right: 2px solid #6699CC;
    border-bottom: 2px solid #6699CC;
    color: #003366;
    background-color: #B0D0E0;
    text-align: right;
    font-weight: normal;
    margin-right: 2px;
    padding-right: 10px;
    min-width: 165px;
}

.ie6 .inputtitle { width: 165px; }

.inputtitlechecked {
    background: url(../images/checked.png) no-repeat 0 50%;
}

.inputtitleunchecked {
    background: url(../images/unchecked.png) no-repeat 0 50%;
}

textarea {
    font-size: 100%;
}

/* Create a 3D sunken box effect */
input[type="text"],
input[type="password"] {
    font-family: Tahoma, Arial, sans-serif;
    border-left: 2px solid #6699CC;
    border-top: 2px solid #6699CC;
    border-right: 2px solid #E2E3F6;
    border-bottom: 2px solid #E2E3F6;
    margin-left: 0px;
    padding: 2px 1px 2px 4px;
}

input[type="text"][class~="base"]{
    min-width: 200px;
}

input[type="text"][class~="required"]{
    min-width: 200px;
}

input[type="text"][class~="validate-date"]{
    width: 80px;
    min-width: 80px;
}

input[type="text"][class~="validate-number"]{
    min-width: 200px;
}

/* Style for graduated shadow on input boxes
input[type="text"],
input[type="password"] {
    border: 0px #FFFFFF solid;
    background: url(../images/input_shadow.png) top left;
    font-family: Tahoma, Arial, sans-serif;
    border-right: 1px solid #E2E3F6;
    border-bottom: 1px solid #E2E3F6;
    margin-left: 0px;
    padding: 5px 0px 4px 5px;
    min-width: 200px;
}
*/

select, textarea {
    font-family: Tahoma, Arial, sans-serif;
    border-left: 2px solid #6699CC;
    border-top: 2px solid #6699CC;
    border-right: 2px solid #E2E3F6;
    border-bottom: 2px solid #E2E3F6;
    margin-left: 0px;
    padding: 1px 0px 1px 0px;
}

/* Style for graduated shadow on input boxes
select {
    border: 0px #FFFFFF solid;
    background: url(../images/input_shadow.png) top left;
    font-family: Tahoma, Arial, sans-serif;
    border-right: 1px solid #E2E3F6;
    border-bottom: 1px solid #E2E3F6;
    margin-left: 0px;
    padding: 4px 0px 2px 3px;
    min-width: 200px;
}
*/

input[type="button"]
input[type="submit"] {
    font-family: Tahoma, Arial, sans-serif;
}

/* Change the background colour to highlight the selected input box */
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    background: #FFDF4B;
}

/* Style for graduated shadow on input boxes
input[type="text"]:focus,
input[type="password"]:focus {
    background: url(../images/input_shadow_focus.png) top left;
    border-right: 1px solid #E2E3F6;
    border-bottom: 1px solid #E2E3F6;
}

select:focus {
    border: 0px #FFFFFF solid;
    background: url(../images/input_shadow_focus.png) top left;
    border-right: 1px solid #E2E3F6;
    border-bottom: 1px solid #E2E3F6;
}

select option {
    background: #FFDF4B;
}
*/

/* Remove the border around a disabled input field */
input[type="text"]:disabled,
input[type="password"]:disabled,
textarea:disabled,
select:disabled {
    border: 2px solid #F2F1F8 !important;
    background-color: #F2F1F8 !important;
    color: #003366 !important;
    margin-left: -6px !important;
}

/* Style for graduated shadow on input boxes
input[type="text"]:disabled,
input[type="password"]:disabled,
select:disabled {
    border: 2px solid #F2F1F8 !important;
    background-image: none;
    background-color: #F2F1F8 !important;
    color: #003366 !important;
    margin-left: -6px !important;
}
*/

/* Change the sunken box outline to red for invalid inputs */
input[type="text"][class~="validation-failed"],
input[type="password"][class~="validation-failed"],
textarea[class~="validation-failed"],
select[class~="validation-failed"] {
    border-left: 2px solid #FF5353;
    border-top: 2px solid #FF5353;
    border-right: 2px solid #FFBBBB;
    border-bottom: 2px solid #FFBBBB;
}

/* Style for graduated shadow on input boxes
input[type="text"][class~="validation-failed"],
input[type="password"][class~="validation-failed"],
select[class~="validation-failed"] {
    background: url(../images/input_shadow_invalid.png) top left;
    border-right: 1px solid #FFD2D2;
    border-bottom: 1px solid #FFD2D2;
}

input[type="text"][class~="validation-failed"]:focus,
input[type="password"][class~="validation-failed"]:focus,
select[class~="validation-failed"]:focus {
    background: url(../images/input_shadow_invalid_focus.png) top left;
    border-right: 1px solid #FFD2D2;
    border-bottom: 1px solid #FFD2D2;
}
*/

/* Small text etc in LH Margin */
.smallinputtitle {
    border-top: 2px solid #E2E3F6;
    border-left: 2px solid #E2E3F6;
    border-right: 2px solid #6699CC;
    border-bottom: 2px solid #6699CC;
    color: #003366;
    background-color: #B0D0E0;
    text-align: left;
    font-weight: bold;
    /*margin-right: 2px;*/
    padding-left: 5px;
    min-width: 100px;
    font-size: 80%;
}

.ie6 .smallinputtitle { width: 100px; }

input[type="text"][class~="smalltextbox"] {
    border-left: 2px solid #6699CC;
    border-top: 2px solid #6699CC;
    border-right: 2px solid #E2E3F6;
    border-bottom: 2px solid #E2E3F6;
    margin-left: 0px;
    padding: 1px 1px 1px 4px;
    min-width: 100px;
    font-size: 80%;
    font-weight: bold;
}

.smallButton {
   font-size:70%;
}

.smalltext {
    font-size: 80%;
}

.validation-advice {
    font-size: 80%;
    color: red;
    margin-left: 5px;
}

.warningimage {
    background: url(../images/dialog-warning.png) no-repeat 0% 50%;
    position: relative;
    top: 3px;
}

.warningmessage {
    margin-left: 20px;
}

/* Miscellaneous styles */
/* -------------------- */

.locked {
    background: url(../images/lock.png) no-repeat 100% 0;
}

.unlocked {
    background: url(../images/unlock.png) no-repeat 100% 0;
}

.add {
    background: url(../images/list-add.png) no-repeat 100% 50%;
}

.checked {
    background: url(../images/checked.png) no-repeat 50% 50%;
}

.unchecked {
    background: url(../images/unchecked.png) no-repeat 50% 50%;
}

.brainsicon {
    position: relative;
    top: 3px;
}

.largeErrorMessage {
    font-size: 120%;
    color: red;
}

.errormessage {
    font-size: 80%;
    color: red;
}

.successMessage {
    color: green;
}

.question {
    font-weight: bold;
    color: green;
}

.warning {
    font-weight: bold;
    color: red;
}

#tooltip {
    position: absolute;
    width: 300px;
    border: 1px solid black;
    padding: 2px;
    font-size: 75%;
    color: #003366;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
}

.extrafaults {
    padding-top: 10px;
    padding-left: 20px;
}

#newClaim {
    text-align: right;
    display: block;
    margin-bottom: 10px;
}

/* Hacks for dodgy browsers */
/* ------------------------ */

#clearfix:after {
    content: ".";
    display: block;
    height: 1px;
    clear: both;
    visibility: hidden;
}

.smallTextbox, .smallTextbox input {
    width: 50px;
    font-size: 10px;
    background-color:black;
}

.smallTextbox-focus, smallTextbox-focus input {
    width: 50px;
    font-size: 10px;
    background-color:black;
}