/* 
    Document   : common
    Created on : May 13, 2013, 5:11:46 PM
    Author     : Beny Setioko
    Description:
        This stylesheet contains style for all elements in (almost) every page of the application
*/

* {
    outline: none;
    margin: 0;
    padding: 0;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

body {
    margin: 0 auto;
    padding: 0 0 20px 0;
    background-color: #eeeeee;
    width: 1300px;
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    overflow-x: auto;
}

#main-content {
    border: 1px solid #cccccc;
    margin: 0 0 30px 0;
    padding: 0 0 20px 0;
    min-height: 300px;
}

.arrow-black,
.arrow-blue {
  border-style: solid;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
  cursor: pointer;
}

.arrow-black {
    border-color: #333333;
}

.arrow-black:hover {
  border-color: #0099ff;
}

.arrow-blue {
  border-color: #0099ff;
}

.arrow-blue:hover {
    border-color: #ff9900;
}

.arrow-right {
    margin: 0 10px 0 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow-left {
    margin: 0 0 0 10px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.arrow-up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.cmn-btn {
    width: 210px;
    margin: 0 0 20px 0;
    border:1px solid #cacaca;
    -webkit-box-shadow: #B4B5B5 2px 2px 2px  ;
    -moz-box-shadow: #B4B5B5 2px 2px 2px ;
    box-shadow: #B4B5B5 2px 2px 2px  ;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;border-radius: 3px;
    font-size:16px;
    font-family: 'Cbt Font Serif', "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    padding: 5px 5px 5px 5px;
    text-decoration:none;
    display:inline-block;
    color: #666666;
    background-color: #F3F3F3; background-image: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#CCCCCC));
    background-image: -webkit-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: -moz-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: -ms-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: -o-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: linear-gradient(to bottom, #F3F3F3, #CCCCCC);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F3F3F3, endColorstr=#CCCCCC);
    position: inherit;
    vertical-align: middle;
}

.cmn-btn:hover {
    border:1px solid #b3b3b3;
    /*color: #636363;*/
    color: #333333;
    background-color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
    background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: -ms-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: -o-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: linear-gradient(to bottom, #FFFFFF, #CCCCCC);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CCCCCC);
}

.cmn-btn:active {
    padding: 7px 5px 3px 5px;
}

.cmn-btn:disabled {
    border:1px solid #b3b3b3;
    color: #333333;
    background-color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#AFAFAF), to(#AFAFAF));
    background-image: -webkit-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: -moz-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: -ms-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: -o-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: linear-gradient(to bottom, #AFAFAF, #AFAFAF);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#AFAFAF, endColorstr=#AFAFAF);
    padding: 5px 5px 5px 5px;
}

.cmn-text-input {
    padding: 2px 5px 2px 5px;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    width: 400px;
}

.cmn-date-input {
    padding: 5px 5px 5px 5px;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    width: 400px;
}

.cmn-file-input {
    padding: 5px 10px 5px 10px;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #333333;
    border: 1px solid #999999;
    border-radius: 10px;
}

.cmn-select-input {
    padding: 2px 5px 2px 5px;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    width: 420px;
}

.cmn-select-input option {
    padding: 2px 5px 2px 5px;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    min-width: 400px;
}

.cmn-number-input {
    padding: 3px 5px 3px 5px;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
}

/*---------------------------------------------- MESSAGE BAR ---------------------------------------------*/

#msg {
    width: 1298px;
    background-color: #ff6633;
    border: 1px solid #ff0000;
    margin: 10px 0 0 0;
    position: fixed;
    top: 71px;
    z-index: 3;
    display: none;
    box-sizing: border-box;
}

#msg #msg-content {
    width: 1255px;
    line-height: 30px;
    color: #ffffff;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    text-align: center;
    display: inline-block;
    cursor: default;
    vertical-align: middle;
}

#msg #close-btn {
    width: 25px;
    height: 25px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}

/*---------------------------------------------- END OF MESSAGE BAR ---------------------------------------------*/

#screen-cover {
    background-color: #000000;
    opacity: 0.8;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9900;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------- MESSAGE DIALOG ---------------------------------------------- */

#msg-box {
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    position: fixed;
    top: 30px;
    left: 50%;
    min-width: 750px;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    margin: 0 0 5px 0;
    text-align: center;
    z-index: 9901;
    display: none;
}

#msg-dialog {
    text-align: left;
    border: 1px solid #666666;
}

#msg-dialog .member {
    padding: 10px 10px 10px 10px;
    cursor: default;
}

#msg-dialog-title {
    font-family: 'Cbt Font Serif', "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 4px 0 4px 0;
    background-color: #aaaaaa;
}

#msg-dialog-content {
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #666666;
    display: inline-block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------- END OF MESSAGE DIALOG ------------------------------------------ */

/* ----------------------------------------------- CONFIRMATION DIALOG ------------------------------------------- */

#confir-box {
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    position: fixed;
    top: 30px;
    left: 50%;
    min-width: 750px;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    margin: 0 0 5px 0;
    text-align: center;
    z-index: 9901;
    display: none;
}

#confir-dialog {
    text-align: left;
    border: 1px solid #666666;
}

#confir-title {
    font-family: 'Cbt Font Serif', "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 4px 0 4px 0;
    background-color: #aaaaaa;
    cursor: default;
}

#confir-msg {
    box-sizing: border-box;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #666666;
    display: inline-block;
    text-align: center;
    padding: 30px 10px 20px 10px;
    width: 100%;
    cursor: default;
}

#confir-btn-box {
    box-sizing: border-box;
    padding: 10px 0 20px 0;
    width: 100%;
    text-align: center;
}

#confir-btn-box input[type="button"] {
    margin: 20px 20px 20px 20px;
}

/* -------------------------------------------- END OF CONFIRMATION DIALOG --------------------------------------- */

/* ----------------------------------------------- PROCESS LOADER ------------------------------------------- */

#fullscreen-loader-box {
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    border-radius: 10px;
    position: fixed;
    top: 30px;
    left: 50%;
    min-width: 750px;
    min-height: 200px;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    margin: 0 0 5px 0;
    text-align: center;
    z-index: 9901;
    display: none;
}

#fullscreen-loader-ctn {
    text-align: center;
    border: 1px solid #666666;
}

#fullscreen-loader-title {
    font-family: 'Cbt Font Serif', "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 4px 0 4px 0;
    background-color: #aaaaaa;
    cursor: default;
}

#fullscreen-loader-msg {
    box-sizing: border-box;
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #666666;
    display: inline-block;
    text-align: center;
    padding: 30px 10px 20px 10px;
    width: 100%;
    cursor: default;
}

#fullscreen-loader-img {
    margin: 20px 0 20px 0;
}

/* -------------------------------------------- END OF PROCESS LOADER ------------------------------------------- */

.info-field {
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    padding: 5px 5px 5px 5px;
}

.info-field * {
    vertical-align: top;
}

.info-field .info-label {
    min-width: 150px;
    max-width: 300px;
    display: inline-block;
    padding: 0 5px 0 5px;
}

.info-field .mid-separator {
    width: 10px;
    display: inline-block;
    text-align: center;
    padding: 0 5px 0 5px;
}

.info-field .info-value {
    min-width: 200px;
    max-width: 600px;
    display: inline-block;
    padding: 0 5px 0 5px;
    text-align: justify;
}

.cmn-text {
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
}

.dark-blue-text {
    color: #0066cc !important;
}

.blue-text {
    color: #0099cc !important;
}

.green-text {
    color: #339900 !important;
}

.dark-green-text {
    color: #009900 !important;
}

.red-text {
    color: #ff0000 !important;
}

.orange-text {
    color: #ff6633 !important;
}

.purple-text {
    color: #ff33ff !important;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.bg-subtle-blue {
    background-color: #a9dafb;
}

.bg-subtle-red {
    background-color: #ffc0df;
}

.bg-subtle-green {
    background-color: #b1ebd6;
}

.bg-subtle-grey {
    background-color: #e3e3e3;
}

.back-to-top {
    cursor: default;
    float: right;
}

.back-to-top:hover {
    cursor: pointer;
    color: #0099ff;
}

#process-indicator {
    display: none;
    padding: 100px 0 0 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

#process-indicator progress {
    width: 400px;
    height: 25px;
}

#footer {
    margin: 0 auto;
    margin-top: 10px;
}

#copyright {
    font-family: 'Cbt Font Sans Serif', "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    text-align: center;
    margin-bottom: 10px;
}

#result-page-nav {
    display: none;
    padding: 10px 0 10px 0;
    text-align: center;
}

#result-page-nav .result-page-idx {
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    color: #666666;
    padding: 4px 15px 4px 15px;
    text-align: center;
}

#result-page-nav .result-page-idx:hover {
    color: #333333;
    padding: 3px 14px 3px 14px;
    border: 1px solid #0099ff;
    background-color: #33ccff;
    cursor: pointer;
}

#result-page-nav .active-result-page-idx {
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    color: #ffffff;
    padding: 4px 15px 4px 15px;
    background-color: #0099cc;
    cursor: default;
}

.result-arrow {
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #666666;
    padding: 4px 15px 4px 15px;
    text-align: center;
}

.result-arrow:hover {
    color: #333333;
    padding: 3px 14px 3px 14px;
    border: 1px solid #0099ff;
    background-color: #33ccff;
    cursor: pointer;
}

#search-result-statistics {
    font-family: 'Cbt Font Sans Serif', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    color: #666666;
    padding: 20px 0 0 0;
    text-align: center
}

.row-shading {
    background-color: #CCCCCC;
}