body
{
margin:0px; 
padding:0px;

/* default value */
font-family: Arial, sans-serif; 
font-size: 14px; 
color: #3b3c3c;
line-height: 180%;
/* default value */

}



a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px; 
	text-decoration: underline;
	color: black;
	
}
a:visited {
}
a:hover {
}
a:active {
}

/* henry - heading title for unit test - need to check other system */

h1{	color: #0b9569; }
.column_center h1 {margin-bottom:5%; margin-top:5%} 	/*only for unit test section */

h2{ 
   margin-bottom:0em;
   font-weight: bold;
   color: #0b9569;
   margin-bottom:2%;
   text-align:center;
}
h3{ 
   color: #0b9569;
   text-align:center;

    font-size: 20px;
}

.breadcrumb{
	background: #f1f1f1;
    border: 1px solid #e7e4e4;
    margin-bottom: 2%;
    /* display: table; */
    padding: 5px 20px;
    border-radius: 5px;
    margin-left:5%;
    margin-right:5%;
    text-align:center
}
.breadcrumb a{color: #3d3b3b !important;
    text-decoration: none;}
.breadcrumb a:hover{text-decoration: underline;}

.paging {text-align:center; margin:3% 0}

.paging a{
	background: #f1f1f1;
    padding: 5px 20px;
    border-radius: 5px;
    color: #121313 !important;
    text-decoration: none;
    border: 1px solid #b1abab;
    }

.paging a:hover{
	background: #c0c7c5;
    }


/* henry - heading title for unit test - need to check other system - EOF */


.test_notice{
	background: #f5f597;
    padding: 10px;
    margin-bottom: 3%;
    border-radius: 5px;
    }


.unit_purpose{
font-style:italic;
font-size:17px;
margin-bottom:3%;
text-align:center;
}


    
.contactbox{
	border:2px solid #9299d0;
	background:#d3d5e0;
	padding:10px;
	font-size:8.5pt;
}

.btn{
	border:2px solid #5560b2;
	color:#5560b2;
	font-weight:bold;
	background:url("../images/btnbg.gif") top left repeat-x #f5f5f5;
	font-size:8.5pt;
	padding:2 5 1 5px;
	cursor:pointer;
}


.style1, .style8 {
	font-size: 12px;
	font-weight: bold;
	font-family: Ari	al, Helvetica, sans-serif;
}



.column_left{
display:block; 
float: left; 
padding-left: 0px;
border: 0px solid green;
width: 20%;
box-sizing: border-box;
padding-right: 30px;

position: sticky; /*henry make menu left sticky when scroll down*/
top: 16%;		/*henry make menu left sticky when scroll down*/

}

.column_center{
display:block; 
float: left; 
width: 80%;
/* text-align: justify;*/
border: 0px solid black;
box-sizing: border-box;
margin-top: 40px;
margin-bottom: 40px;
padding: 0 3%;
}



.column_right{
display:block; 
float: right; 
padding-left: 0px;
width: 10%;
border: 0px solid blue;
box-sizing: border-box;
}




/*balloons*/
div.balloon {width: 250px;padding-top: 19px;margin-top:20px;background: url('/images/common/balloon_top.gif') no-repeat top left;}
div.balloon a:link {font-weight: bold;text-decoration: none;color: #000}
div.balloon a:visited {font-weight: bold;text-decoration: none;color: #000}
div.balloon a:hover {font-weight: bold;text-decoration: underline;color: #000}

div.leftBalloon {margin-right: 10px;}
div.balloonContent {background-color: #fff; border-left: 4px solid #d7d7d7;border-right: 4px solid #d7d7d7;padding: 0 2px; text-align: center;}
/*div.balloonContent a:link {font-weight: bold;text-decoration: none;color: #000}
div.balloonContent a:hover {font-weight: bold;text-decoration: underline;color: #000}
div.balloonContent a:visited {font-weight: bold;text-decoration: none;color: #000}
*/
div.balloonContent h2, div.balloonContent h3 {font-size: 1.8em;margin:0;}
div.balloonContent p {line-height:1.3em; margin: 0; text-align:center;}
div#content div.balloonContent a {padding-right:0;}
div.balloonBottom {background: url('/images/common/balloon_bottom.gif') no-repeat top left;height:19px;width:250px;}
div.balloon:hover, div.balloon:hover div.balloonBottom {background-position: -250px 0%;}
div.balloon:hover div.balloonContent {border-left: 4px solid #ffcc00;border-right: 4px solid #ffcc00;}

/*homepage balloons*/
div.balloonContent.homeBalloon p {font-weight: bold; text-decoration: none; font-size: 1.2em; padding-top: 0.5em; margin-bottom: -1px}
/*a:link {font-weight: bold;text-decoration: none;color: #000}
a:visited {font-weight: bold;text-decoration: none;color: #000}
a:hover {font-weight: bold;text-decoration: underline;color: #000} 
*/
*+html body div.balloonContent.homeBalloon p {margin-bottom: 0} /*ie6*/
div.balloonContent.homeTel {margin-left: 45px}

/*tools*/
.clearBoth {clear: both}
.floatLeft {float:left}
.floatRight {float:right}
.clearLeft {clear:left}
.textAlignLeft {text-align:left}
.textAlignCenter {text-align:center}
.textAlignRight {text-align:right}
.fontWeightNormal {font-weight:normal}
.fontWeightBold {font-weight:bold}
.hidden {display: none}
.threeCol {width: 33%; float: left}

.clearfix:after {content: ".";display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
.afterHeading {margin-top: 25px} /*for use after any level of heading*/


/***************** top section ***********************/
.top1{
background: #0b9569;
text-align:center;
padding: 20px 5px;

border-bottom: 5px solid #d7a50b;
}

.top1-1{
font-family: Georgia; Times;
font-size: 60px;
font-weight:bold;
color: white;
line-height: 100%;
}

.top1-2{
margin-top: 20px;
color: white;
}
.top1-2 span{
margin: 0px 15px;
}
.top1-2 a{
color: white;
}
.top1-2 a:hover{
text-decoration: underline;
color: yellow;
background: none;
}


.link_instructor{
	color:#ffffff;
}

.link_instructor:hover{
background-color:#FF0000;
color:#ffffff;
}


/*****CAT BOX on the left ********/
.catbox{
border:0px solid red;
padding:0px;
}

.catboxitem{
background: #0b9569;
padding: 5px 10px 5px;
border-bottom: 1px solid white;
}

.catboxitem:hover{
background: #d7a50b;
}


.catbox a, .catbox a:visited {
color: white !important;
text-decoration: none;

}
/*****CAT BOX on the left EOF********/

.ads_box{margin-top: 20px; text-align:center}
.ads_box_bottom{margin: 20px 0px; text-align: center}


/**** bo sung report ****/
.daynum{font-size: 26px; color: brown}
.daycel {/* width: 100px */}

img {max-width: 100%}
center {padding: 0 10px;}


/************************ Responsive Structure ****************/

/* for new/big desktop from 1200 px and bigger ....*/
@media (min-width: 1200px) and (max-width: 3000px) {
.minimal-menu-button {display: none;}
.minimal-menu-container{display: none;}

}

/* for medium/old desktop screen from 1024 to 1200px */
@media (min-width: 1024px) and (max-width: 1200px) {
.column_left {width: 20%; }
.minimal-menu-button {display: none;}
.minimal-menu-container{display: none;}

}


/* for medium view such as ipad  from 768 to 1024 */
@media (min-width: 768px) and (max-width: 1024px) {
.column_left {width: 20%;
}
.minimal-menu-button {display: none;}
.minimal-menu-container{display: none;}
}


/* for small view such as iphone, samsung : less than 768 */
@media (min-width: 0px) and (max-width: 767px) {
.column_left, .column_right, .column_center {width: 100%; }

.column_left {position: initial;top: initial; padding-right: 0px;
}

.row {padding:0}

.column_right {display:none}
.top1-1{font-size: 20px !important;}
.ads_box{display:none}
.ads_box_bottom{display: none}
#menu {display: none}

.daynum{font-size: 12px; }

/* Google sizes its sign-in iframe to the button; stretching it shifts the visible button left. */
iframe:not(.g_id_signin iframe) {
  width: 100% !important;    
/* height: 350px */ /*henry hide this since it affect java script popup in sign up page*/
 }

iframe.dl_calendar {height: 4000px}
}

************************ Responsive Structure EOF ****************/