/* reset styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote, b, dt, dd, dl, table, tr, td, th {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}

ul
{
    list-style-type:none;
}

a {
    color:darkblue;
	text-decoration:none;
}


img {
	border:none;
}

/* end reset styles */

body {
    font-size: .8em;
    font-family: Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header, footer, nav, section {
    display: block;
}


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 0 0 0.7em 0;
}

.editor-field {
    margin: 0 0 0.4em 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

body
{
    min-height: 650px;
    /*background: url(../images/BG/bgc0.png); */
}

.tm-wrapper
{
    margin: 0 auto;
    background-color:white;
}

.tm-wrapper2
{
    margin: 0 0px;
    background-position: right top;
}

.tm-header-wrapper
{
    margin: 0 auto;
}

.tm-header-logo
{
    background: url(../images/traffic-light.png) no-repeat ;
    background-position: 5px center;
    font-family:Tahoma, Arial, Verdana, sans-serif;
    color: maroon;
}

.coder-layout
{
    background-color:#0186bd;
}

.coco-layout
{
    background-color:#780400;
}

.tm-menu
{
    margin: 0 auto;
}

.tm-menu-wrapper, .tm-footer-wrapper
{
    margin: 0 auto;
}

.tm-menu > img
{
    display:block;
    float:left;
}

.tm-menu ul
{
    list-style-type:none;
	overflow:hidden;
	padding: 5px 0 4px 0;
}

.tm-menu li
{
    float:left;
    margin: 0 2px 0 2px;
}

.tm-menu li a
{
    padding: 6px 3px 6px 10px;
    display:block;
  
    color:White;
    
}

.tm-menu li b
{
    display:block;
    padding-right: 7px;
    
}

.tm-menu li.active a
{
    color:Black;
    background: url(../images/menu-item-left.png) no-repeat;
}

.tm-menu li.active b
{
    background: url(../images/menu-item-right.png) no-repeat;
    background-position:right top;
}

.sub-menu li.active a
{
    font-weight:bold;
}

ul.sub-menu 
{
    list-style-type:none;
	overflow:hidden;
	padding: 5px 0 4px 0;
}

ul.sub-menu li
{
    float:left;
    margin: 0 2px 0 2px;
}

ul.sub-menu li a
{
    padding: 6px 3px 6px 10px;
    display:block;
    color:Black;
    
}

ul.sub-menu li b
{
    display:block;
    padding-right: 7px;
    
}


#search
{
	padding:8px 8px 0px 5px;
}

#search form
{
	position: relative;
	width: 170px;
}
#search input[type='text']
{
	width:140px;
	color: #777;
	font-size: 90%;
	margin-top: 0px;
	position:absolute;
	z-index:100;
}

#search input[type='image']
{
	float:right;
}

#search_result 
{
	background-color: Yellow;
}

#trangchulink
{
    width:18px;
    height:16px;
    margin-left: 10px;
    background: url(../images/home-icon.png) no-repeat;
    background-position: center center;
}

.tm-body
{
    margin: 0 auto;
    min-height:700px;
    padding: 0px 8px;
}

.tm-right-pane
{
    padding-top:0px;
}

.tm-content2-pane
{

}

.tm-content-pane
{
   
}

.tm-box
{
    margin: 10px 0 10px 0 ;
    border: 1px solid #e0e0e0;
}

.tm-box2
{
    padding: 10px 0px 10px 0;
}

div.space-top
{
    margin-top: 45px;
}

.tm-box-right
{
    margin: 10px 0 10px 0 ;
    border: 1px solid #e0e0e0;
}

.tm-box-header
{
    padding: 3px 3px 3px 5px;
    background-color: #e0e0e0;
    color:#444;
    font-size:110%;
}

.tm-box-header p
{
    float:right;
    background: url(../images/more_arrow.png) no-repeat;
    background-position: right center;
    padding-right: 20px;
    font-weight:bold;
    font-size: 70%;
    margin-top:2px;
}
.tm-box-header p a
{
    color:#222;
}

.tm-box .tm-float li
{
    padding: 8px 5px 8px 6px;
    float:left;
    width: 170px;
    border-bottom: 1px solid #ccc;
    /*border-right: 1px solid #ccc;*/
}

.tm-box .tm-float li p
{
    text-align: center;    
}

.product-name
{
 	/*white-space: nowrap;*/
 	height: 32px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 10px 0px 3px 0px;
}

.clear-fix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
	}
* html .clear-fix             { zoom: 1; } /* IE6 */
*:first-child+html .clear-fix { zoom: 1; } /* IE7 */

.tm-footer
{
    margin: 7px auto 0 auto;
    border-top: 1px solid #ccc;
    clear: both;
    color: #fff;
    font-size: 100%;
    padding: 7px 10px 7px 10px;
    font-family: Tahoma, Verdana;
}

.ntu
{
    float:left;
}

.honor
{
    float:right;
}


.tm-footer a
{
    color:#eee;
}
.tm-footer a:hover
{
    color:White;
    text-decoration:underline;
}

.holder-container
{
    padding: 5px 0;
}
.holder
{
    float:right;
}

.content-title
{
    margin: 10px 0;
    text-decoration: underline;
    font-style: italic;
    color: Maroon;
    font-weight:bold;
}

div.content p
{
    margin: 6px 0 3px 0;
    line-height: 130%;
    text-align:justify;
    font-size: 100%;
    font-family:Verdana;
}

div.content h3
{
   margin-top: 6px;
   margin-bottom: 6px;
   font-weight:bold;
}

div.content div
{
   margin-top: 6px;
   margin-bottom: 6px;
}

div.content ul
{
   list-style: disc;
}

div.content li
{
   margin-left: 30px;
}

.blog
{
    padding: 10px 0px;
    border-bottom:1px solid #eee;
}

.blog p
{
    line-height: 1.5em;
}

.blog-comment-count
{
    text-align:right;
    font-style:italic;
}

.blog-title 
{
    font-size: 180%;
    color:maroon;
    font-family:'Segoe UI', Arial, Tahoma, sans-serif
}

.blog-title2 
{
    font-size: 180%;
    color:maroon;
    font-family:'Segoe UI', Arial, Tahoma, sans-serif
}

.blog-title a
{
    color: Maroon;
}

.blog-title a:hover
{
    color: #C00000;
}

.blog-date
{
    color: #888;
    padding-bottom: 10px;
}

#login {
	margin-right: 10px;
    margin-top:5px;
    color:white;
}

#login a {
    color:white;
}

#welcome b
{	
	font-weight:bold;
}

#account_menu, #account_menu ul
{
	list-style-type:none;
} 

#account_menu 
{
	float: left;
} 	

#account_menu > li > a 	
{
	display:block;	
	width:100px;
	background: url(../images/account.png) no-repeat;	 
	padding: 5px 0px 6px 8px;
	font-weight: bold;
	color: Black;
}

#account_menu ul
{
	border: 1px solid #BDBBA6;
	border-bottom-style:none;
	z-index:1000;
}

#account_menu > li > ul a
{	display: block;
	background: #FAF8EE;
	padding: 5px 5px 5px 5px;
	color: black;
	/*width: auto;	
	white-space: nowrap;*/
	border-bottom: 1px solid #BDBBA6;
}

#account_menu > li > ul a:hover
{	
	background: white;
	color: Navy;
}
		
#account_menu ul
{	
	position: absolute;
	visibility: hidden;
	border-top: 1px solid white;
	zoom:1;
}

input[type='text'], input[type='password'], input[type='file'], textarea, select {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  border: 1px solid #CCC;
}

input[type='text']:focus, input[type='password']:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  border: 1px solid rgba(81, 203, 238, 1);
}

.dataTables_wrapper
{
    margin: 10px;
}

.margin10 {
    margin: 10px;
}

.qc-image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.qc-image h2 { 
   position: absolute; 
   top: 180px; 
   left: 0; 
   width: 220px; 
   height: 16px;
   overflow:hidden;

   color: #ccc; 
   font-size: 14px; 
   font-weight: bold;
   font-family: Verdana, Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.5);
   padding: 10px; 
   text-wrap:none;
   text-overflow:ellipsis;
   white-space:nowrap;
}

.refresh-status
{
	background: url(../images/checking.gif) no-repeat;
	background-position:center center;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.box-form {
    padding:20px;
}

.emphasize {
    font-weight:bold;
}

div.ui-widget-header {
    border:1px solid #ddd;
    background: #eee;
}

div.ui-corner-all {
    border-radius: 0px;
}

.tm-box-search {
    margin-top:10px;
    padding:10px;
}

.tm-box-search .tm-box {
    margin-bottom:20px;
}

.tm-box-search li {
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.tm-theme {
    margin-top: 10px;
    float:right;
}

.underline {
    text-decoration:underline;
}

td.alt { background-color: #e8e8e8; }

.float-left {
    float:left;
}

.input-filter-container {
    padding: 5px;
}

#input-filter {
    border: 1px solid #888;
    color: #888;
}

.message .checking
{
	background: url(../images/checking.gif) no-repeat;
    background-position:right;
}

th.header { 
    background-image: url(../images/sort_bg.gif); 
    cursor: pointer; 
    background-repeat: no-repeat; 
    background-position: center right; 
} 

th.headerSortUp { 
    background-image: url(../images/asc.gif); 
} 

th.headerSortDown { 
    background-image: url(../images/desc.gif); 
} 

a.back-to-top {
	display: none;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 10px;
	bottom: 10px;
	background: url("../images/icon_gototop.png") no-repeat center;
}

.error-code {
    margin-top:10px;
    font-family: 'Courier New', Consolas, sans-serif;
}

.fb-share-button {
    float:right;
}



.question-prev
{
    width:40px;
    float:left;
}

.question-next
{
    width:40px;
    float:right;
}

.button
{
    text-align: center;
    padding:5px 10px;
    border: 1px solid gray;
    border-radius: 5px;
    background-color:#ddd;
}

.button:hover
{
    border: 1px solid black;
    color: black;
    cursor:pointer;
}

.question
{
    margin-left: 60px;
    margin-right: 60px;
    font-size:110%;
    overflow:hidden;
}

.question-main
{
    font-weight:bold;
    color:black;
    padding-bottom:20px;
    padding-top:5px;
    font-size:130%;
}

.question-content
{
    font-size:120%;
    padding-bottom:20px;
}

.question-image
{
    text-align:center;
    padding-bottom:20px;
}

.answer-list
{
    width:100%;
    font-size:120%;
    border-collapse:collapse;
}

.answer-list .solution
{
    background-color:lightgreen;
    color:black;
}

.answer-list td
{
    padding: 8px;
}

.button-index
{
    width: 25px;
    height: 25px;
    text-align: center;
    border: 2px solid gray;
    border-radius: 50%;
    color: black;
    font-size: 100%;
    line-height: 23px;
}

.button-unselect
{
    border: 2px solid gray;
    background-color: none;
    color: black;
}

.button-select
{
    border: 2px solid #0186BD;
    background-color: #0186BD;
    color: white;
}

.answer-index
{
    width:35px;
}

.on-progress:hover
{
    background-color: #f0f0f0;
    cursor:pointer;
}

.question-list
{
    padding: 8px;
}

.question-list li
{
    float:left;
}

.question-list li a
{
    display:block;
    margin: 7px;
    width: 38px;
    height: 38px;
    text-align: center;
    border-radius: 50%;
    font-size: 120%;
    line-height: 36px;
}

.question-current
{
    background-color:gray;
    border: 1px solid gray;
    color:black;
}

.question-answered
{
    background-color:#0186BD;
    border: 1px solid #0186BD;
    color:white;
}

.question-right
{
    background-color:green;
    border: 1px solid green;
    color:white;
}

.question-wrong
{
    background-color:red;
    border: 1px solid red;
    color:white;
}

.question-notyet
{
    color:gray;
    border: 1px solid gray;
}

.clock
{
    text-align:center;
    padding: 4px;
    background-color: #E0E0E0;
    border-radius: 8px;    
    font-family: Verdana, Tahoma, sans-serif;
    font-size:100%;
    font-weight:bold;
    color:red;
}

.clock .countdown, .clock .endclock
{
    font-size:200%;
}

.result-wrapper
{
    margin-top: 10px;
}

.result
{
    text-align:center;
    padding: 6px;
    border: 2px solid lightgray;
    color:#030303;
    border-radius: 8px;    
    font-size:140%;
    margin-left: 60px;
    margin-right: 60px;
}

.pass
{
    color:green;
    font-weight:bold;
}

.failed
{
    color:red;
    font-weight:bold;
}

.tm-menu-wrapper span, .tm-menu-wrapper a 
{
    display:block;

    font-size: 110%;
    text-transform: uppercase;
}

.tm-menu-wrapper span.value
{
    font-weight:bold;
}

.tm-menu-wrapper span
{
    float:left;
    color:white;
    padding: 10px;
}

.tm-menu-wrapper a.box
{
    float:left;
    margin: 5px;
    padding: 5px 20px;
    border-radius:5px;
    background-color:white;
    color:blue;
}

#login-box input[type="text"], 
#login-box input[type="password"],
#login-box select
{
	margin-top:2px;
	margin-bottom: 2px;
	width:230px; 
}

#contest 
{
    font-size:200%;
}

.tm-helps
{
    font-size:130%;
    margin:auto;
    clear:both;
}

table.phonghoc {
	/*width: 100%; */
    border-collapse: collapse;
}
.phonghoc tr:nth-of-type(2n+1) {
	background: rgb(255, 255, 255);
}
.phonghoc th {
	background: #e0e0e0; 
    color: black; 
    font-weight: normal;
}
.phonghoc td {
	padding: 3px 4px; 
    border: 1px solid #ccc; 
    border-image: none; 
    text-align: left;
}

.phonghoc td.center {
    text-align:center;
}
.phonghoc th {
	padding: 4px 8px; 
    width: 100px;
    border: 1px solid rgb(204, 204, 204); 
    border-image: none; 
    text-align: center;
    color:navy;
}

table.kekhai {
	width: 100%; 
    border-collapse: collapse;
}
.kekhai tr:nth-of-type(2n) {
	background: #fff;
}
.kekhai th {
    background: #fff;
    color: black;
    font-weight: bold;
    border: 1px solid #ccc;
}
.kekhai td {
	padding: 2px 4px; 
    border: 1px solid #ccc; 
    text-align: left;
}

.kekhai td.center {
    text-align:center;
}
.kekhai th {
	padding: 4px 8px; 
    text-align: center;
    color:black;
}

.tm-box-body h3{
    font-size:120%;
    font-weight:bold; 
    padding:5px;
}

.tm-box-body h3 span {
    color:red;
}

#login_form2 input.txtGiaTri
{
    width:60px;
    background-color:transparent;
    text-align:center;
}

#login_form2 input.txtGhiChu
{
    width:100px;
    background-color:transparent;
}

.tm-button-container
{
    float:right;
}

.view-detail{
    cursor: pointer;
    text-decoration: underline;
    color: blue;
}

@media (max-width: 999px) {
       
    .tm-header-logo
    {
        background-size: auto 100%;
        height: 40px;
        padding-left: 70px;
        padding-top: 15px;
        font-size:130%;
        font-family:Tahoma, Arial, Verdana, sans-serif;
        font-weight:bold;
    }

    #login 
    {
	    text-align:right;
    }

    #search
    {
	    display:none;
    }

    .tm-box2 img {
        max-width: 100%;
        height:initial;
        width:initial;
    }

    .extra {
        display:none;
    }
}

@media (min-width: 1000px) {
    
    .tm-header-wrapper
    {
        width: 1000px;
    }

    .tm-menu-wrapper, .tm-footer-wrapper, .tm-helps
    {
        width: 1000px;
    }

    .tm-body
    {
        width:1000px;
    }

    .tm-right-pane
    {
        width: 240px;
        float: right;
    }

    .tm-content-pane
    {
        width: 740px;
        float: left;
    }

   .tm-header-logo
    {
        height: 60px;
        background-position: 10px center;
        padding-left: 90px;
        padding-top: 20px;
        font-size:250%;
    }

    #login {
	    float:right;
    }

    #search
    {
	    float:right;
    }

    .smiley-box {
        width: 150px;
        float:right;
    }

    .check-info {
        margin-top:100px;
    }
}