/* CSS Document */

body {
	margin:0; padding:0;
	font: 11pt Arial, Helvetica, sans-serif;
}
.clear { clear:both; }

label {
  display: inline !important;
  padding-left:3px;
}

@font-face {
  font-family: 'FontSchoolname';
  src: url('../fonts/pfennigbold.eot'); /* IE9 Compat Modes */
  src: local('pfennigbold'), 
       url('../fonts/pfennigbold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pfennigbold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pfennigbold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pfennigbold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'FontSlogan';
	src: url('../fonts/BrushScriptStd.eot');
	src: local('BrushScript Std'), local('BrushScriptStd'), 
	     url('../fonts/BrushScriptStd.woff') format('woff'), 
	     url('../fonts/BrushScriptStd.ttf') format('truetype');
}

@font-face {
	font-family: 'FontPagename';
	src: url('../fonts/Redressed-webfont.eot');
	src: local('Redressed-webfont'), 
	     url('../fonts/Redressed-webfont.woff') format('woff'), 
	     url('../fonts/Redressed-webfont.ttf') format('truetype');
}

@-webkit-keyframes blinker { 50% { opacity: 0.5; } 100% { opacity: 1; } }
@-moz-keyframes blinker { 50% { opacity: 0.5; } 100% { opacity: 1; } }
@-o-keyframes blinker { 50% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes blinker { 50% { opacity: 0.5; } 100% { opacity: 1; } }
.blink {
	-webkit-animation: blinker 0.3s infinite; /* Safari 4+ */
	-moz-animation:    blinker 0.3s infinite; /* Fx 5+ */
	-o-animation:      blinker 0.3s infinite; /* Opera 12+ */
	animation:         blinker 0.3s infinite; /* IE 10+, Fx 29+ */
}

/* Blink for Webkit and others (Chrome, Safari, Firefox, IE, ...) . Ex:<span class="blink">This text blinks! :) </span> */
@-webkit-keyframes blinker2 { from {opacity: 1.0;} to {opacity: 0.6;} }
.blink2 {
	text-decoration: blink;
	-webkit-animation-name: blinker2;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

@-webkit-keyframes blinker-neon { 
	from {opacity: 1.0; } 
	to {opacity: 0.5; text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18; } 
}
.blink-neon {
	text-decoration: blinker-neon;
	-webkit-animation-name: blinker-neon;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
	
}

#header { margin:10px auto; padding:10px; border-bottom:1px solid #ccc; }
#header .logo { float:left; width:120px; }
#header .sitename { float:left; width:600px; }
#header .sitename .schoolname { font-family: 'FontSchoolname' !important; font-size:12pt; color:Black; text-shadow:0 0 1px #000000; }
#header .sitename .schoolname2 { font-family: 'FontSchoolname' !important; font-size:22pt; color:Red; text-shadow:1px 1px 1px #000000; margin-top:-5px; }
#header .sitename .slogan { font-family: 'FontSlogan' !important; font-size:18pt; color:Blue; white-space: nowrap; }
#header .banner {  float:right; width:310px; margin-right:150px; } 
#header .banner .pagename { font-family: 'FontPagename' !important; font-size:28pt; color:Blue; text-shadow:1px 1px 2px #666666; margin:0 0 5px 0 ; }
#header .banner .div-warning { color:Red; padding:10px; text-align:center; font-size:16px; }

.title { color:Red; font-size:14pt; text-transform:uppercase; font-weight:bold; }
.title2 { color:Blue; font-size:14pt; margin:10px 0 5px 0; }
.form-value { font-weight: bold; }
.row { padding: 3px 0; }
.row-region { margin-bottom: 25px; }
.text-message { color:red; font-size:14pt; font-weight:bold; font-style:italic; text-align:center; }
.box-cover { border:1px solid #666; padding: 50px; margin-bottom:50px; }
.box-frame { border:1px solid #333; padding: 50px; }




#block-login {
	margin:100px auto 0;
	width:400px;
	
	/*border:1px solid #c71b79;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;*/
}
#block-login .header {
	background:#1b86c7 url(../images/login-form-blue/login-header.jpg) left top no-repeat; /* #c71b79; */
	height:87px;
}
#block-login .content {
	background:#1b86c7; /* #c71b79; */
}
#block-login .footer {
	background:#1b86c7 url(../images/login-form-blue/login-footer.jpg) left top no-repeat; /* #c71b79; */
	height:6px;
}

#block-login .form-item { clear:both; }
#block-login .form-item ul { margin:0; padding:0; list-style:none; }
#block-login .form-item ul li { float:left; height:40px; }
#block-login .form-item ul li.column1 { 
	width:5px; 
	background:url(../images/login-form-blue/login-label-left.jpg) left top no-repeat; 
}
#block-login .form-item ul li.column2 { 
	color:#fff; font-size:12pt; 
	width:96px; height:33px; padding:7px 0 0 10px; 
	background:url(../images/login-form-blue/login-label-center.jpg) repeat-x; 
}
#block-login .form-item ul li.column3 { 
	width:8px; 
	background:url(../images/login-form-blue/login-input-left.jpg) repeat-x; 
}
#block-login .form-item ul li.column4 { 
	width:239px; 
	background:url(../images/login-form-blue/login-input-center.jpg) repeat-x; 
}
#block-login .form-item ul li.column5 { width:36px; }
#block-login .form-item .form-text { 
	background: transparent; color:#0072b7; /*#820047*/ 
	font-size:18px; width:225px; 
	margin:1px 0 0 10px; padding:5px 0 5px 0; 
	border:0; 
	/*margin:15px\9; /* IE8 and older, but there’s more… */
	*margin-left:15px; /* IE7 and older */
	_margin-left:15px; /* IE6 and older */
}

#block-login #item-user, #block-login #item-pass, #block-login #item-captcha-text { margin-left:-5px; }
#block-login #item-user .column5  
{
    background:url(../images/login-form-blue/login-input-right-user.jpg) no-repeat; 
}
#block-login #item-pass .column5  
{
    background:url(../images/login-form-blue/login-input-right-pass.jpg) no-repeat; 
}
#block-login #item-captcha-text .column5  
{
    background:url(../images/login-form-blue/login-input-right-captcha.jpg) no-repeat; 
}

#block-login #item-captcha-image { padding: 0 0 0 107px; }
#block-login #item-captcha-image div { background:transparent !important; }
#block-login #item-remember { padding:0 0 0 102px; color:#fff; } 
#block-login #item-warning { color:Yellow; text-align:center; }
#block-login #item-warning span { display:block; padding-bottom:5px; }

#block-login .form-item .description { position:relative; width:220px; margin:-15px 0 0 275px; font-size:9pt; font-style:italic; }
#block-login .form-item .description .blank { float:left; width:28px; border-top: 1px dashed red; }
#block-login .form-item .description .content { float:left; width:168px; padding:5px 10px; border:1px dashed red; background:#fff4b4; text-align:justify; box-shadow:2px 2px 5px #ffb762; }

#block-login .form-submit { 
	width:387px; height:44px; margin-left:6px; border:0;
	background:url(../images/login-form-blue/login-submit.jpg) no-repeat; 
} 
#block-login .form-submit:hover { cursor:pointer; }
#block-login .form-due { color:#fff; letter-spacing:9px; text-align:center; padding:3px 0 7px 0; opacity:0.3; } 


/*Trang dang ky hoc*/

#page-dangkyhoc { width:960px; margin:10px auto; padding:10px; }
#page-dangkyhoc h3 { color:Blue;  text-shadow:0px 1px 2px #666666; }

.panel-left { float:left; width:460px; }
.panel-right { float:right; width:490px; }
.form-exit { float:right; }

.box-info {}
.box-info .info-item { padding:3px 0; }
.box-info .div-label { float:left; width:220px; }
.box-info .div-object {}
.box-info .buttons { margin:15px 0 10px 0;}

.div-note { margin:5px 0 10px 0; padding:10px; border:1px dashed #666; font-size:10pt;  }
.div-note h3 { color:red !important; margin:0; padding:0 0 5px 0; text-shadow:0 0 0 #000 !important; }
.div-note ul { margin:0; }

.table-result { border:1px solid #084278; border-collapse:collapse; }
.table-result tr.head { background:#b4c0cc; font-weight:bold; }
.table-result tr.head th { text-align:center; padding:5px 3px 3px 3px; line-height:1.2em; }
.table-result tr.head td { text-align:center; padding:5px 3px 3px 3px; line-height:1.2em; }
.table-result tr.odd td { background:#fff; }
.table-result tr.even td { background:#f2f2f2; }
.table-result td { padding:5px 5px 3px 5px; font-size:11pt; line-height:1.5em; /*vertical-align:top;*/ }

/*Trang lockUser*/
.page-lockuser {}
.page-lockuser .block-lockuser  
{
    position: absolute;
    top: 50%;
    left: 50%;
    width:600px; height:240px; 
    margin-left: -300px; margin-top: -120px;
    box-shadow:2px 2px 5px #666666;
    
    background:#000; color:#ffffff;
    border:3px solid #ffdb01;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.page-lockuser .block-lockuser .title  
{
    font-size:14pt; text-shadow:1px 1px 2px #000; 
    background:#ffdb01; color:#000; 
    border:3px solid #000; 
    padding: 7px 20px;
    
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}
.page-lockuser .block-lockuser .content { padding:10px; }
.page-lockuser .block-lockuser .content .div-icon { float:left; width:130px; padding:20px 0 0 15px; }
.page-lockuser .block-lockuser .content .div-text { float:left; width:430px; }
.page-lockuser .block-lockuser .content ul { margin:0 0 0 15px; padding:0;}
.page-lockuser .block-lockuser .note { color:Yellow; text-align:center; padding:5px; }


/* Login form */
#block-login { width: 565px; border:1px solid #CCC; padding: 15px; margin: 30px auto 0 auto; }
#block-login .imgcontainer { text-align: center; margin: 24px 0 12px 0; }
#block-login img.login-avatar { width: 40%; border-radius: 50%; }
#block-login input[type=text], 
#block-login input[type=password] { width: 100%; padding: 9px 15px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; }
#block-login .btn-primary { width:100%; margin-top:10px; padding:10px; }

#block-quytrinh { border:1px solid #ccc; padding:10px; margin-bottom:15px; }
#block-quytrinh a { display:block; text-decoration:none; color:Red; padding:5px; }
#block-quytrinh a:hover { background:#C1FFC1; }
#block-quytrinh ol { margin:0; padding-left: 15px; }
#block-quytrinh ol li { margin:0; padding:0; }
#block-quytrinh ol li ul { padding-left:10px; }
#block-quytrinh ol li ul li { text-align:justify; text-decoration:none; color:#333; font-style:italic; font-size:10pt; padding:2px 0; }

#block-mavach { margin-bottom:30px; }
#block-chuyennganh { margin-bottom:30px; }