html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ }

/* ------------------------------------- Home Button ----------------------------------------- */
.home-tile-size1 { width: 120px; height: 120px; }
.home-tile-size2 { width: 250px; height: 120px; }
a.home-tile-button { display: block; overflow: hidden; background-color: #0088CC; margin: 5px; text-decoration: none; }
a.home-tile-button:hover { background-color: #00BCF2; }
a.home-tile-button img { border-width: 0px; margin: 15px auto; display: block; }
a.home-tile-button span { color: #FFFFFF; margin-left: 5px; }
.home-tile-buttonTitle { margin: 5px; font-size: 1.2em; color: #B6B6B6; font-weight: bold; text-align: left; }
/* ------------------------------------------ Grid --------------------------------------- */
table.grid { border: 1px solid #0099D8; border-collapse: separate; border-spacing: 1px; width: 100%; }
table.grid th { padding: 4px; margin: 1px; background-color: #0099D8; font-weight: bold; color: #FFFFFF;  text-align: center}
.gridrow td { padding: 4px; margin: 1px; background-color: #FFFFFF; }
.gridrow_alternate td { padding: 4px; margin: 1px; background-color: #EEEEEE; }

.th-sort { cursor: pointer; text-decoration: underline; }
.th-sort:hover { background-color: #4e89c6; text-decoration:none;}

a.grid-sort { text-decoration: underline; color:#FFFFFF; }
a.grid-sort:hover { text-decoration:none; }

a.grid-btn1 { background-color: #00A200; display: inline-block; line-height: normal; margin: 0px 1px; width: 20px; height: 20px; background-repeat: no-repeat; }
a.grid-btn1:hover { background-color: #00BCF2; }
a.grid-btn2 { background-color: #0088CC; display: inline-block; line-height: normal; margin: 0px 1px; width: 20px; height: 20px; background-repeat: no-repeat; }
a.grid-btn2:hover { background-color: #00BCF2; }
a.grid-btn3 { background-color: #FF7228; display: inline-block; line-height: normal; margin: 0px 1px; width: 20px; height: 20px; background-repeat: no-repeat; }
a.grid-btn3:hover { background-color: #00BCF2; }
/*------------------------ For Small Screen ------------------------- */
div.grid{width: 100%;}
div.grid .item{border: 1px solid #0099D8; border-collapse: separate; border-spacing: 1px; width: 100%; margin-bottom:5px;}
div.grid .item .title{padding: 4px; margin: 1px; background-color: #0099D8; font-weight: bold; color: #FFFFFF;}
div.grid .item .content{padding: 4px; margin: 1px; background-color: #EEEEEE;}
/* --------------------------------------- Detail  ---------------------------------------------- */
table.detail { width: 100%; border-collapse: separate; border-spacing: 2px; border: 1px solid #CCCCCC; margin-bottom: 10px; }
.detail .title { background-color: #EEEEEE; padding: 0px 4px; line-height: 25px; color: #666666; font-weight: bold; }
.detail .content { background-color: #F5F5F5; padding: 0px 4px; line-height: 25px; color: #000000; }

/* ----------- Input Field ---------- */
.field-row { margin-left: 0px; margin-bottom: 5px;}
@media (max-width:991px)
{
	.field-row{ margin-right: 0px;}
	}
.field-head-title { text-align: right;padding: 0px 4px;  background-color: #EEEEEE; line-height: 25px; font-size: 0.85em; min-width: 75px; }
@media (max-width: 991px) {
    .field-head-title { text-align: left; }
}
.field-head-content {}
@media (max-width: 991px) {
    .field-head-content { padding-left:0px; padding-right:0px; }
}
.field-title { text-align: right; padding: 0px 4px; background-color: #E7E7E7; line-height: 25px; color: #666666; font-size: 0.85em; min-width: 85px; font-weight: bold; }
@media (max-width: 767px) {
    .field-title { text-align: left; }
}
.field-content { background-color: #F5F5F5; padding: 0px 10px; line-height: 25px; color: #000000; }
@media (max-width: 991px) {
    .field-content { padding-left:0px; padding-right:0px; }
}
input.btn-size1{width:100px;}
input.btn-size2{width:120px;}
input.btn-size3{width:150px;}
input.btn-size4{width:200px;}
input.btn-size5{width:250px;}
input.field-input, select.field-input { display: block; width: 100%; line-height: 25px; min-height: 25px; height: 25px; padding: 0px 4px; margin: 0px; font-size: 0.85em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input.field-input:focus, select.field-input:focus, textarea:focus { outline-style: none; }
select.field-input { padding: 0px 0px 0px 4px; }
.field-row [class*="span"] { min-height: 25px; }

a.big-btn { display: inline-block; height: 80px; width: 80px; background-color: #0088CC; color: #FFFFFF; font-weight: bold; margin: 10px auto; }
a.big-btn img { border-width: 0px; margin: 12px auto 0px auto; display: block; }
a.big-btn:hover { background-color: #00BCF2; text-decoration: none; }

/* --------------------- Page Section Head --------------------- */
.section-head { border-bottom: 3px solid #0088CC; font-size: 0.95em; font-weight: bold; color: #FFFFFF; margin-bottom: 5px; }
.section-head .section-title { padding: 2px 10px; background-color: #0088CC; width: 120px; }