html {
    overflow: auto;
}

body {
    /*margin: 0px;
    border: 0px;
    padding: 0px;
    font-family: Calibri;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-image: url("scripts/img/yovin_coffee.jpg");*/   
    text-align: center;
    min-width: 850px;
    font-family: Calibri;

}

.wrapper_sub {
    /*width: 80%;    
    opacity: 0.95;
    background-color:white;
    margin-left: 100px;*/
    text-align: left;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color:white;
    opacity: 0.95;
}


.wrapper {
    /*width: 80%;    
    opacity: 0.95;
    background-color:white;
    margin-left: 100px;*/
    text-align: left;
    width: 820px;
    margin-left: auto;
    margin-right: auto;
    background-color:white;
    opacity: 0.95;
    height: 970px;
}

.inwrapper {
    margin-right: auto;
    margin-left: 80px;
}
/* Screen Layout */
.sid {
    width: 792px;
    height: 13px;
    padding: 1px 4px 4px 4px;
    text-align: right;
    font-size: 10px;
    font-family: arial;
}
/* Screen ID */
.slo {
    width: 800px;
    height: 462px;
    overflow: auto;
}
/* Screen Lay Out (no footer) */
.flo {
    width: 800px;
    height: 580px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

.flo2 {
    width: 800px;
    height: 416px;
    overflow-y: visible;
}

.flp {
    width: 800px;
    height: 240px;
    overflow: auto;
}
/* Form Lay Out */
.ftr {
    width: 800px;
    height: 46px;
    text-align: center;
}
/* Footer */
.mbg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    z-index: 10000;
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    background-image: url(../img/ajax-loader.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
/* Modal Background */
/* Form Elements (containers) */
.fe5_sh {
    width: 200px;
    height: 20px;
    padding: 4px;
    text-align: left;
}
.fe1_sh {
    width: 200px;
    height: 44px;
    padding: 4px;
    text-align: left;
}
.fe1 {
    width: 792px;
    height: 44px;
    padding: 4px;
    text-align: left;
}
/* Form Element 1 */
.fe2 {
    width: 792px;
    height: 44px;
    padding: 4px;
    text-align: left;
}
/* Form Element 2 */
.fe3 {
    width: 792px;
    height: 44px;
    padding: 4px;
    text-align: left;
}
/* Form Element 3 */
.fe4 {
    width: 792px;
    height: 44px;
    padding: 4px;
    text-align: left;
}
/* Form Element 4 */
.fe5 {
    width: 792px;
    height: 20px;
    padding: 4px;
    text-align: left;
}
/* Form Element 5 */
.fe6 {
    width: 792px;
    height: 44px;
    padding: 4px;
    text-align: left;
}
/* Form Element 6 */
.fe7 {
    width: 792px;
    height: 48px;
    padding: 2px;
    text-align: left;
}
/* Form Element 7 */
.mb1 {
    width: 800px;
    height: 44px;
    padding: 4px;
    text-align: left;
    overflow-x: hidden;
}
/* Menu Button 1 */
.mb2 {
    width: 784px;
    height: 52px;
    text-align: center;
}
/* Menu Button 2 */

.hdg {
    width: 792px;
    height: 44px;
    padding: 4px 4px 30px 4px;
    text-align: center;
}
/* Heading */
.gv1 {
    width: 800px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}
/* Grid View 1 */
.gv2 {
    width: 800px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}
/* Grid View 2 */
.gv1-sml {
    width: 784px;
    height: 104px;
    overflow-y: auto;
}
/* Grid View 1 Small */
.gv2-sml {
    width: 784px;
    height: 104px;
    overflow-y: auto;
}

.gv1-mid {
    width: 784px;
    height: 156px;
    overflow-y: auto;
}
/* Grid View 2 Small */
.gv1-big {
    width: 784px;
    height: 312px;
    overflow-y: auto;
}
/* Grid View 1 Big */
.fe1-2xh {
    width: 792px;
    height: 96px;
    padding: 4px;
    text-align: left;
}
/* Form Element 1 (2 times height) */
/* Labels (left side of the form) */
.lbl30 {
    font-size: 15px;
    width: 30px;
    display: inline-block;
}

.lbl40 {
    font-size: 15px;
    width: 40px;
    display: inline-block;
}
.lbl {
    font-size: 15px;
    width: 10px;
    display: inline-block;
}
/* Label */
.lblc {
    font-size: 15px;
    width: 60px;
    display: inline-block;
    color: red;
}
/* Label */
.lbw {
    font-size: 15px;
    width: 100px;
    display: inline-block;
    font-style: italic;
}
.lbw125 {
    font-size: 15px;
    width: 125px;
    display: inline-block;
    font-style: italic;
}
.lbw350 {
    font-size: 15px;
    width: 350px;
    display: inline-block;
    font-style: italic;
}
.lbw250 {
    font-size: 15px;
    width: 250px;
    display: inline-block;
    font-style: italic;
}
.lbw180 {
    font-size: 15px;
    width: 180px;
    display: inline-block;
    font-style: italic;
}
.lbwlong {
    font-size: 15px;
    width: 798px;
    display: inline-block;
    font-style: italic;
}
/* Label Wide */
.lbw1 {
    font-size: 15px;
    width: 150px;
    display: inline-block;
}
/* Label Wide */

.lbn {
    font-size: 15px;
    width: 120px;
    display: inline-block;
}
/* Label Small */
.lbm {
    font-size: 20px;
    width: 500px;
    display: inline-block;
}
/* Label Small */
.lb150 {
    font-size: 15px;
    width: 130px;
    display: inline-block;
}

.lb160 {
    font-size: 15px;
    width: 180px;
    display: inline-block;
}


.lb145 {
    font-size: 15px;
    width: 145px;
    display: inline-block;
}
.lb140 {
    font-size: 15px;
    width: 135px;
    display: inline-block;
    text-align: center;
}

.lbfull {
    font-size: 32px;
    width: 780px;
    display: inline-block;
}
/* Form Controls */
.chk {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
}
/* Check Box */
.txt {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 480px;
    color: #00008B;
}
/* Text Box */
.num {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 120px;
    color: #FF0000;
}
/* Text Box (number) */
.lst {
    font-size: 20px;
    font-family: arial;
    font-weight: bold;
    width: 486px;
}

.lsts250 {
    font-size: 20px;
    font-family: arial;
    font-weight: bold;
    width: 250px;
}

.lsts100 {
    font-size: 20px;
    font-family: arial;
    font-weight: bold;
    width: 100px;
}


/* List */
.lsw {
    font-size: 15px;
    /*font-family: arial;*/
    /*font-weight: bold;*/
    width: 781px;
}
/* List Wide */
.lxw {
    font-size: 10px;
    font-family: arial;
    font-weight: bold;
    width: 781px;
}
/* List Extra Wide */
.lsn {
    font-size: 30px;
    font-family: arial;
    font-weight: bold;
    width: 180px;
}
/* List Narrow */
.grd {
    font-size: 27px;
    font-family: arial;
    font-weight: bold;
    width: 360px;
}
/* Grid */
.grd2 {
    font-size: 27px;
    font-family: arial;
    font-weight: bold;
    width: 98%;
}
/*blank space*/
.bsp{
    width: 30px;
    height: 20px;
}
/* Grid */
.btnck {
    font-size: 15px;
    width: 20px;
    height: 20px;
    border: none;
    padding: 0;
    background: #ebebeb;
}
/* Button */
.btn {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 300px;
    height: 42px;
    margin: 1px 10px 3px 10px;
}
/* Button */
.btn_l {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 300px;
    height: 42px;
}
/* Button */
.btn-tny {
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
}
/* Button Tiny */
.btn-sml {
    font-size: 24px;
    font-family: arial;
    font-weight: bold;
    width: 150px;
    height: 32px;
    margin: 0px;
}
/* Button Small */
.btn-lbl {
    font-size: 24px;
    font-family: arial;
    font-weight: bold;
    width: 180px;
    height: 32px;
    margin: 0px;
}
/* Button Label */
.btn-med {
    font-size: 24px;
    font-family: arial;
    font-weight: bold;
    width: 225px;
    height: 32px;
    margin: 0px;
}
/* Button Medium */
.btn-big {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 450px;
    height: 42px;
    margin: 2px;
}
/* Button Big */
.txt-sml {
    font-size: 10px;
    font-family: arial;
    font-weight: bold;
    width: 20px;
    color: #00008B;
}
/* Text Box Small */
.txt-med {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 120px;
    color: #00008B;
}
/* Text Box Medium */
.txt-lrg {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 180px;
    color: #00008B;
}
/* Text Box Large */
.txt-xlrg {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 240px;
    color: #00008B;
}
/* Text Box XLarge */
.num-tny {
    font-size: 10px;
    font-family: arial;
    font-weight: bold;
    width: 5px;
    color: #FF0000;
}
/* Text Box Tiny (number) */
.num-sml {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 60px;
    color: #FF0000;
}
/* Text Box Small (number) */
.num-med {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 120px;
    color: #FF0000;
}
/* Text Box Medium (number) */
.lst-med {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 100px;
}
/* List Wide */
.lst-lrg {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 132px;
}
/* List Large */
.lst-big {
    font-size: 32px;
    font-family: arial;
    font-weight: bold;
    width: 166px;
}
/* List Big */
.ta-lrg1 {
    font-size: 32px;
    font-family: arial;
    width: 784px;
    height: 240px;
    border: 2px solid #cccccc;
    padding: 4px;
    margin-bottom: 8px;
}
/* Text Area Large (5 Rows) */
.ta-big1 {
    font-size: 32px;
    font-family: arial;
    width: 784px;
    height: 344px;
    border: 2px solid #cccccc;
    padding: 4px;
    margin-bottom: 8px;
}
/* Text Area Big   (7 Rows) */
/* Fonts */
.fnt1 {
    font-size: 32px;
    font-family: arial;
    color: navy;
}

.fnt {
    font-family: Arial;
    color: navy;
    font-size: xx-large;
    font-weight: bold;
}
/* Font (regular) */
.fnt-num {
    font-family: Arial;
    color: red;
    font-size: xx-large;
    font-weight: bold;
}
/* Font (regular) */
.fnt-sys {
    font-size: 32px;
    font-family: arial;
    color: black;
    font-weight: bold;
    text-align: left;
}
/* Font (system) */
.fnt-one {
    font-size: 30px;
    font-family: arial;
    color: black;
    font-weight: bold;
}
/* Font (minus one) */
.fnt-two {
    font-size: 27px;
    font-family: arial;
    color: black;
    font-weight: bold;
}
/* Font (minus two) */
.fnt-sml {
    font-size: 20px;
    font-family: arial;
    color: navy;
    font-weight: bold;
}
.fnt-smlll {
    font-size: 15px;
    font-family: arial;
    color: navy;
    font-weight: bold;
}
/* Font (small) */
.fnt-big {
    font-size: 40px;
    font-family: arial;
    color: navy;
    font-weight: bold;
}
/* Font (big) */
.fnt-ttl {
    font-size: 40px;
    font-family: verdana;
    color: navy;
    font-weight: bold;
}
/* Font (title) */
/* Other */
.info {
    background-color: white;
    width: 800px;
    height: 416px;
    font-family: arial;
    font-size: 32px;
    font-weight: bold;
    overflow: auto;
}

.txtNavy {
    font-size: medium;
    font-weight: bold;
    width: 150px;
    text-align: center;
    color: navy;
}

.lst-chz {
    font-size: 30px;
    font-family: arial;
    width: 474px;
}

.btn-60{
    font-size: 12px;
    font-family: arial;    
    width: 60px;
    background-color: Transparent;
    border: none;             /* Your can add different style/properties of button Here*/
    cursor:pointer;   
    font-style:italic;
}

.btn-120{
    font-size: 25px;
    font-family: arial;    
    width: 120px;
    background-color: Transparent;
    border: none;            /* 1px solid blue; Your can add different style/properties of button Here*/
    cursor:pointer;   
    font-style:italic;
}


.button_noborder{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}
/* List (use only when necessary) */