/* --------------------------------------------------------
--- MKG
--- Start Date: 25.01.2012
--- Last Update: 22.02.2012
--- Last Update By: Mazhar Kaan Girti
--------------------------------------------------------*/



/* GENERAL
--------------------------------------------------------*/
body, html { width: 100%; height: 100%; }
body { margin: 0px; }
.clear { clear: both; }
.noWrap { white-space: nowrap; }
img { border: 0px; }
.hide { display: none; }


/* FONTS
--------------------------------------------------------*/
div, td, th, span, input, select, legend, fieldset, textarea { font-size: 13px; font-family: Arial; color: #555; }


/* LINKS
--------------------------------------------------------*/
a { text-decoration: none; color: #2B6F88;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
a:hover, a:focus { color: #60AFC9; }


/* DIV TABLE
--------------------------------------------------------*/
.table { display: table; }
.table .row { display: table-row; }
.table .cell { display: table-cell; }
.noSpacing, .noSpacing div { border-collapse: collapse; border-spacing: 0px; } 


/* WIDTH & HEIGHT
--------------------------------------------------------*/
.full, .full .row, .full .cell { width: 100%; height: 100%; }
.fullWidth, .fullWidth .row, .fullWidth .cell { width: 100%; }
.fullHeight, .fullHeight .row, .fullHeight .cell { height: 100%; }
.minWidth { width: 1%; }
.overflow { overflow: auto; }


/* DIRECTION
--------------------------------------------------------*/
.right { text-align: right; }
.left { text-align: left; }
.center { margin: auto; }
.centerText { text-align: center; }
.middle { vertical-align: middle; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }


/* FORM
--------------------------------------------------------*/
.formMaster { margin: 0px; padding: 0px; width: 100%; height: 100%; }
.formMaster .label { text-align: right; color: #777; padding: 5px 8px 5px 8px; background: #F0F0F0; 
    font-weight: bold; cursor: default; margin: 0px 3px 0px 0px; white-space: nowrap;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}


/* INPUT and TEXTAREA
--------------------------------------------------------*/
.form input, 
.form textarea,
.form .input { padding: 5px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.form textarea { resize: none; }
.form .integer { text-align: right; }
.form .date { width: 68px; }
.form .datetime { width: 102px; }

input[type="text"],
input[type="password"], 
input[type="file"],
input[type="radio"],
textarea,
.input { background-color: #FFF; border: 1px solid #CCC; margin: 0px; outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
       -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
            transition: border linear 0.2s, box-shadow linear 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
textarea:focus,
.input:focus { border-color: rgba(0, 133, 178, 0.6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085), 0 0 8px rgba(0, 133, 178, 0.6);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085), 0 0 8px rgba(0, 133, 178, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085), 0 0 8px rgba(0, 133, 178, 0.6);
}

input[readonly="readonly"], 
textarea[readonly="readonly"] { background-color: #F0F0F0; color: #999; }
input[readonly="readonly"]:focus, 
textarea[readonly="readonly"]:focus { border-color: #CCC;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
}


/* DROPDOWN
--------------------------------------------------------*/
.dropdown { background-color: #FFF; border: 1px solid #CCC; padding: 4px 2px 4px 2px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
       -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
            transition: border linear 0.2s, box-shadow linear 0.2s;
}
.dropdown select { outline: 0; border: 0px; width: 99%; margin: 0px; }


/* CHECKBOX
--------------------------------------------------------*/
.checkbox { background-color: #FFF; border: 1px solid #CCC; padding: 3px 2px 3px 2px; width: 22px; cursor: pointer;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.085);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
       -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
            transition: border linear 0.2s, box-shadow linear 0.2s;
}
.checkbox input[type="checkbox"] { outline: 0; border: 0px; width: 99%; margin: 3px 0px 0px 0px; cursor: pointer; padding: 0px; }
.checkbox:hover { background-color: #F0F0F0; }


/* BUTTON
--------------------------------------------------------*/
button,
input[type="submit"],
input[type="button"],
.loadingButton {
    display: inline-block;
    margin: 0px;
    line-height: 20px;
    font-size: 14px;
    padding: 4px 14px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-repeat: repeat-x;
    border: 1px solid #bbbbbb;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #49afcd;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
button:hover, 
input[type="submit"]:hover,
input[type="button"]:hover { color: #FFF; background-color: #2F96B4; background-position: 0 -10px; }
button:active, 
input[type="submit"]:active,
input[type="button"]:active { color: #5bc0de; background-position: 0 0px; background-color: #2F96B4; 
    background-image: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
       -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
}
.smallButton { padding: 1px 7px 1px 5px !important; font-size: 11px !important; }
.loadingButton { padding: 1px 14px 6px 14px !important; }



/* GREEN BUTTON
--------------------------------------------------------*/
.greenButton {
    display: inline-block;
    margin: 0px;
    line-height: 20px;
    font-size: 14px;
    padding: 4px 14px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-repeat: repeat-x;
    border: 1px solid #bbbbbb;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #509F00;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#A3D900), to(#509F00)) !important;
    background-image: -webkit-linear-gradient(top, #A3D900, #509F00) !important;
    background-image: -o-linear-gradient(top, #A3D900, #509F00) !important;
    background-image: linear-gradient(to bottom, #A3D900, #509F00) !important;
    background-image: -moz-linear-gradient(top, #A3D900, #509F00) !important;
    background-repeat: repeat-x;
    border-color: #509F00 #509F00 #1f6377 !important;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#A3D900', endColorstr='#509F00', GradientType=0) !important;
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.greenButton:hover { color: #FFF; background-color: #509F00 !important; background-position: 0 -10px; }
.greenButton:active { color: #BBF900 !important; background-position: 0 0px; background-color: #509F00 !important; 
    background-image: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
       -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
}


/* RED BUTTON
--------------------------------------------------------*/
.redButton {
    display: inline-block;
    margin: 0px;
    line-height: 20px;
    font-size: 14px;
    padding: 4px 14px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-repeat: repeat-x;
    border: 1px solid #bbbbbb;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #8C0000;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FF2626), to(#8C0000)) !important;
    background-image: -webkit-linear-gradient(top, #FF2626, #8C0000) !important;
    background-image: -o-linear-gradient(top, #FF2626, #8C0000) !important;
    background-image: linear-gradient(to bottom, #FF2626, #8C0000) !important;
    background-image: -moz-linear-gradient(top, #FF2626, #8C0000) !important;
    background-repeat: repeat-x;
    border-color: #8C0000 #8C0000 #1f6377 !important;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FF2626', endColorstr='#8C0000', GradientType=0) !important;
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.redButton:hover { color: #FFF; background-color: #8C0000 !important; background-position: 0 -10px; }
.redButton:active { color: #FF7373 !important; background-position: 0 0px; background-color: #8C0000 !important; 
    background-image: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
       -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.085);
}


/* GRAY BUTTON
--------------------------------------------------------*/
.grayButton,
.loadingButton {
    color: #888 !important;
    text-shadow: none !important;
    background-color: #E5E5E5;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#E5E5E5)) !important;
    background-image: -webkit-linear-gradient(top, #F8F8F8, #E5E5E5) !important;
    background-image: -o-linear-gradient(top, #F8F8F8, #E5E5E5) !important;
    background-image: linear-gradient(to bottom, #F8F8F8, #E5E5E5) !important;
    background-image: -moz-linear-gradient(top, #F8F8F8, #E5E5E5) !important;
    background-repeat: repeat-x;
    border-color: #F8F8F8 #E5E5E5 #C0C0C0 !important;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#E5E5E5', GradientType=0) !important;
    background-image: -moz-linear-gradient(top, #F8F8F8, #E5E5E5) !important;
    border-left-color: #C0C0C0 !important;
    border-right-color: #C0C0C0 !important;
    border-top-color: #C0C0C0 !important;
    border-bottom-color: #999999 !important;
}
.grayButton:hover { color: #555; background-color: #E5E5E5 !important; background-position: 0 -10px; }
.grayButton:active { color: #C0C0C0 !important; background-position: 0 0px; background-color: #C0C0C0 !important; }
.grayButtonInput { padding: 3px 8px 3px 8px !important; }


/* FIELDSET
--------------------------------------------------------*/
fieldset { display: inline; margin: 0px;
    border-bottom: 1px solid #C9C9C9; border-right: 1px solid #C9C9C9; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
fieldset legend { color: #666; padding: 6px 10px 6px 10px; background: #E5E5E5; font-weight: bold; margin-bottom: 5px; cursor: default;
    border-bottom: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0; border-top: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5;
    -webkit-box-shadow: 1px 1px 1px 0.1px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 1px 0.1px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    background-image: -ms-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: -moz-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: -o-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #E0E0E0));
    background-image: -webkit-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: linear-gradient(to bottom, #FFF 0%, #E0E0E0 100%);
}
/*
fieldset:hover { border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; border-top: 1px solid #C9C9C9; border-left: 1px solid #C9C9C9;
    background-color: #F5F5F5;
}
fieldset:hover legend { color: #222;
    border-bottom: 1px solid #B0B0B0; border-right: 1px solid #B0B0B0; border-top: 1px solid #D5D5D5; border-left: 1px solid #D5D5D5;
    -webkit-box-shadow: 1px 1px 1px 0.1px rgba(0, 0, 0, 0.3);
            box-shadow: 1px 1px 1px 0.1px rgba(0, 0, 0, 0.3);
}
*/


/* GRID
--------------------------------------------------------*/
.grid { border-collapse: collapse; border: 0px; }
.grid caption { text-align: center; font-weight: bold; padding: 5px; cursor: default; background-color: #F0F0F0; 
    color: #666; border: 1px solid #D9D9D9; border-bottom: 0px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-image: -ms-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: -moz-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: -o-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #E0E0E0));
    background-image: -webkit-linear-gradient(top, #FFF 0%, #E0E0E0 100%);
    background-image: linear-gradient(to bottom, #FFF 0%, #E0E0E0 100%);
}
.grid .header a { display: block; }
.grid thead th, .grid thead td, .grid .header th { 
    text-align: center; font-weight: bold; padding: 5px; cursor: default; 
    background-image: -ms-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -moz-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -o-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
    background-image: -webkit-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: linear-gradient(to bottom, #EBEBEB 0%, #BFBFBF 100%);
}
.grid tbody td { padding: 3px 4px 3px 4px; }
.grid td, .grid th { border: 1px solid #C9C9C9; }
.grid .gridRow { background-color: #FFFFFF; cursor: pointer; }
.grid .gridRow:hover { background-color: #E9E9E9; }
.grid .alternate { background-color: #F5F5F5; }
.grid .page:hover { background-color: transparent; }
.grid .page td { padding: 0px; 
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.grid .page td span { display: block; background-color: #2f96b4; color: #FFF; padding: 3px 10px 3px 10px; 
    cursor: default; font-weight: bold; }
.grid .page td a { display: block; background-color: #E5E5E5; color: #555; padding: 3px 10px 3px 10px; }
.grid .page td a:hover { background-color: #999; color: #FFF; }
.grid button, .grid input[type="submit"], .grid input[type="button"] { padding: 0px 6px; font-size: 11px; }
.grid .check label { display: none; }
.grid .empty td { border: 0px; }


/* PANEL
--------------------------------------------------------*/
.panel { padding: 5px; display: table; border: 1px solid #E9E9E9;
    background-image: -ms-linear-gradient(top, #F9F9F9 0%, #E9E9E9 100%);
    background-image: -moz-linear-gradient(top, #F9F9F9 0%, #E9E9E9 100%);
    background-image: -o-linear-gradient(top, #F9F9F9 0%, #E9E9E9 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9F9F9), color-stop(1, #E9E9E9));
    background-image: -webkit-linear-gradient(top, #F9F9F9 0%, #E9E9E9 100%);
    background-image: linear-gradient(to bottom, #F9F9F9 0%, #E9E9E9 100%);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
       -webkit-box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.25);
          -moz-box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.25);
               box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.25);
}
.panelBlock { padding: 8px 10px 8px 10px; }


/* MESSAGE
--------------------------------------------------------*/
.message { position: fixed; top: 10px; left: 10px; z-index: 100; display: table; }
.message .messageBox { cursor: pointer; padding: 5px; display: none; margin-bottom: 10px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
       -webkit-box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.25);
          -moz-box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.25);
               box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.25);
}

.message .info, .message .info div { color: #3091AD; }
.message .info { border: 1px solid #BCE2ED;
    background-image: -ms-linear-gradient(top, #EDF9FC 0%, #BCE2ED 100%);
    background-image: -moz-linear-gradient(top, #EDF9FC 0%, #BCE2ED 100%);
    background-image: -o-linear-gradient(top, #EDF9FC 0%, #BCE2ED 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EDF9FC), color-stop(1, #BCE2ED));
    background-image: -webkit-linear-gradient(top, #EDF9FC 0%, #BCE2ED 100%);
    background-image: linear-gradient(to bottom, #EDF9FC 0%, #BCE2ED 100%);
}

.message .error, .message .error div { color: #FFFFFF; }
.message .error { border: 1px solid #CC0000;
    background-image: -ms-linear-gradient(top, #FF0000 0%, #CC0000 100%);
    background-image: -moz-linear-gradient(top, #FF0000 0%, #CC0000 100%);
    background-image: -o-linear-gradient(top, #FF0000 0%, #CC0000 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF0000), color-stop(1, #CC0000));
    background-image: -webkit-linear-gradient(top, #FF0000 0%, #CC0000 100%);
    background-image: linear-gradient(to bottom, #FF0000 0%, #CC0000 100%);
}

.message .warning, .message .warning div { color: #B25900; }
.message .warning { border: 1px solid #FFE682;
    background-image: -ms-linear-gradient(top, #FFFFC4 0%, #FFE682 100%);
    background-image: -moz-linear-gradient(top, #FFFFC4 0%, #FFE682 100%);
    background-image: -o-linear-gradient(top, #FFFFC4 0%, #FFE682 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFC4), color-stop(1, #FFE682));
    background-image: -webkit-linear-gradient(top, #FFFFC4 0%, #FFE682 100%);
    background-image: linear-gradient(to bottom, #FFFFC4 0%, #FFE682 100%);
}

.message .success, .message .success div { color: #468C00; }
.message .success { border: 1px solid #82FFA2;
    background-image: -ms-linear-gradient(top, #DFFFE8 0%, #82FFA2 100%);
    background-image: -moz-linear-gradient(top, #DFFFE8 0%, #82FFA2 100%);
    background-image: -o-linear-gradient(top, #DFFFE8 0%, #82FFA2 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DFFFE8), color-stop(1, #82FFA2));
    background-image: -webkit-linear-gradient(top, #DFFFE8 0%, #82FFA2 100%);
    background-image: linear-gradient(to bottom, #DFFFE8 0%, #82FFA2 100%);
}


/* POPUP
--------------------------------------------------------*/
.popupBackground { position: fixed; width: 100%; height: 100%; background-color: #000000; top: 0px; left: 0px;
    opacity: 0.5; z-index: 1000; }
.popup { position: fixed; top: 40%; left: 40%; z-index: 1001; width: 300px; height: 150px; cursor: default; 
         background-color: #FFFFFF; padding: 5px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
       -webkit-box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.25);
          -moz-box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.25);
               box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.25);
}
.popup .title { margin-bottom: 5px; display: table; width: 100%;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    background-color: #888888;
    background-image: -ms-linear-gradient(top, #C0C0C0 0%, #888888 100%);
    background-image: -moz-linear-gradient(top, #C0C0C0 0%, #888888 100%);
    background-image: -o-linear-gradient(top, #C0C0C0 0%, #888888 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C0C0C0), color-stop(1, #888888));
    background-image: -webkit-linear-gradient(top, #C0C0C0 0%, #888888 100%);
    background-image: linear-gradient(to bottom, #C0C0C0 0%, #888888 100%);
}
.popup .title .name { padding: 5px; color: #FFF; font-weight: bold; display: table-cell; }
.popup .title .buttonClose { color: #FFF; font-weight: bold; display: table-cell; text-align: center; width: 20px; 
    cursor: pointer; font-size: 11px; padding: 5px; }
.popup .title .buttonClose:hover { opacity: 0.5; }
.popup .content { width: 100%; height: 100%; }
.popup .content .contentTop { height: 10%; }
.popup .content .contentMiddle { height: 90%; }
.popup .contentTable { width: 100%; height: 100%; }
.popup .contentTable .contentCenter { height: 90%; }
.popup .contentTable .contentBottom { height: 10%; background-color: #F0F0F0; }
.popup .contentTable .contentBottom button,
.popup .contentTable .contentBottom input,
.popup .contentTable .contentBottom div,
.popup .contentTable .contentBottom span { margin: 5px 2px 5px 2px; }


/* DATE PICKER
--------------------------------------------------------*/
.ui-corner-all { 
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.ui-datepicker { background-color: #FFF; padding: 5px; border: 1px solid #CCC; cursor: default;
    -webkit-box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.40);
        -moz-box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.40);
            box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.40);
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
.ui-datepicker-header { padding: 2px; margin: 2px 0px 4px 0px; }
.ui-datepicker-prev, .ui-datepicker-next { border-top: 1px solid #F0F0F0; border-left: 1px solid #F0F0F0; 
    border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; 
    padding: 2px 6px 2px 6px; margin-right: 5px; background-color: #E5E5E5; cursor: pointer; }
.ui-datepicker-title { font-weight: bold; text-align: right; float: right; }
.ui-datepicker-prev:hover { background-color: #F5F5F5; }
.ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-title { display: inline; }
.ui-datepicker-calendar thead th, .ui-datepicker-calendar thead td { 
    text-align: center; font-weight: bold; padding: 5px; 
    background-image: -ms-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -moz-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -o-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
    background-image: -webkit-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: linear-gradient(to bottom, #EBEBEB 0%, #BFBFBF 100%);
}
.ui-datepicker-calendar .ui-state-default { display: block; padding: 2px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.ui-datepicker-calendar .ui-state-default:hover { background-color: #E0E0E0; color: #000; }
.ui-datepicker-calendar .ui-state-active { background-color: #2F96B4; color: #FFF; }
.ui-datepicker-calendar .ui-state-highlight { background-color: #F0F0F0; color: #333; font-weight: bold; }


/* AUTOCOMPLETE
--------------------------------------------------------*/
.autoComplete { position: relative; cursor: text; }
.autoComplete .autoCompleteInput { padding: 2px; }
.autoComplete .autoItem, .autoComplete input { float: left; }
.autoComplete .autoItem { border: 1px solid #E5E5E5; padding: 3px 6px 3px 6px; background-color: #BFBFBF; color: #777;
    margin: 0px 2px 0px 0px; cursor: default;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    background-image: -ms-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -moz-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -o-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
    background-image: -webkit-linear-gradient(top, #EBEBEB 0%, #BFBFBF 100%);
    background-image: linear-gradient(to bottom, #EBEBEB 0%, #BFBFBF 100%);
}
.autoComplete .autoText { float: left; }
.autoComplete .autoClose { padding: 0px 5px 3px 5px; float: right; margin-left: 5px;
    font-size: 10px; cursor: pointer; font-weight: bold;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.autoComplete .autoClose:hover { opacity: 0.7;
    background-image: -ms-linear-gradient(top, #BFBFBF 0%, #EBEBEB 100%);
    background-image: -moz-linear-gradient(top, #BFBFBF 0%, #EBEBEB 100%);
    background-image: -o-linear-gradient(top, #BFBFBF 0%, #EBEBEB 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BFBFBF), color-stop(1, #EBEBEB));
    background-image: -webkit-linear-gradient(top, #BFBFBF 0%, #EBEBEB 100%);
    background-image: linear-gradient(to bottom, #BFBFBF 0%, #EBEBEB 100%);
}
.autoComplete input { width: 5%; border: 0px; padding: 4px;
    -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: none; -moz-transition: none;
     -o-transition: none; transition: none;
}
.autoComplete input:focus { border-color: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.autoCompleteMenu { position: absolute; border: 1px solid #C0C0C0; background-color: #F9F9F9; padding: 5px; margin-top: 2px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}