@activecolor: #3498db;
@bordercolor:#E3E3E4;
@unselectcolor:#DDDDDD;
@bgcolor:#FFFFFF;
@headerbgcolor:#FFFFFF;
@pgwidth:1400px;
*{
	padding: 0px;
	margin: 0px;
}
html{
	body{
		&{
			& {
				background-color: @bgcolor;
				color: #484848;
			}
			.container-fluid{
				padding: 0px;
			}
			.loginbg{
				height: 100vh;
				background:url("../img/login_bg.jpg") center no-repeat;
			}
			.nopadding{
				padding: 0px!important;
			}
			.padding{
				padding:10px;
			}
			.noleftpadding{
				padding-left: 0px!important;
			}
			.norightpadding{
				padding-right: 0px!important;
			}
			h1,h2,h3,h4,h5,h6{
				margin-top: 0px;
			}
			a{
				color: #484848;
			}
			a,a:hover,a:visited{
				text-decoration: none;
			}
			.glyphicon,.fa{
				text-indent: 0px;
			}
			.fa{
				font-size: 17px;
			}
			.bg{
				background-color: #F8F8F8;
			}
			.nbg{
				background-color: #FFFFFF;
			}
			.intro{
				font-weight: normal;
				font-size:12px;
				color:#999999;
			}
			.bigtitle{
				&{
					position:relative;
					line-height:40px;
					text-indent: 5px;
				}
				&:after{
					background: @activecolor none repeat scroll 0 0;
					bottom: -3px;
					content: "";
					height: 3px;
					left: 5px;
					position: absolute;
					width: 2em;
				}
			}
			tr.noborder{
				td{
					border-top:0px;
				}
			}
			.radio-inline, .checkbox-inline{
				padding-left: 0px;
			}
			.qq-uploader-selector{
				max-width: 270px;
			}
			h1 {
				&.wikititle {
					font-size: 21px;
					font-weight: 800;
					padding: 10px 14px;
					border-bottom: 1px #eeeeee solid;
					border-left: 12px solid #4F9CEE;
				}
			}
			h2{
				&.wikititle{
					font-size: 18px;
					font-weight: 600;
					padding: 14px 10px 14px 0px;
				}
			}
			.sliderimg{
				&{
					border:1px solid #E3E3E4;
					padding:5px;
					width: 100%;
					height:68px;
					display:inline-block;
					overflow: hidden;
					text-align: center;
				}
				&.active{
					border-color: #ca141d;
				}
			}
			.btn{
				&.btn-error{
					background-color: #E3E3E4;
				}
				&.btn-primary{
					background-color: #3498db;
					border-color: #66afe9;
					&:hover{
						background-color: #66afe9;
					}
				}
			}
			input:focus{
				border-color: #66afe9;
				outline: 0;
				-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
				box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
			}
		}
		.modal{
			.badge{
				border-radius: 2px;
				padding: 5px 10px;
			}
			.modal-dialog{
				margin-top: 20vh;
				width: 500px;
			}
			.modal-content{
				&{
					padding: 15px;
				}
				.modal-header{
					&{
						padding:10px 10px 10px 0px;
					}
					.close {
						position: absolute;
						top: 25px;
						right: 15px;
						z-index: 9;
					}
					.modal-title{
						& {
							font-size: 16px;
							font-weight: 800;
							position: relative;
							padding-left: 10px;
						}
						&:after{
							background: #000000 none repeat scroll 0 0;
							bottom: -12px;
							content: "";
							height: 2px;
							left: 0px;
							position: absolute;
							width: 90px;
						}
					}
				}
				.modal-body{
					font-size: 15px;
				}
			}
		}
		.pages{
			&{
				font-size: 16px;
			}
			&.fixtop{
				margin-top: 75px;
			}
			.header{
				&{
					height: 75px;
					background-color: @headerbgcolor;
					color: #3c3c3c;
					clear: both;
					overflow: hidden;
					box-shadow: 1px 1px 20px rgba(0,0,0,0.1);
					&.fix{
						position: fixed;
						top: 0;
						width: 100%;
						z-index: 999;
					}
				}
				.nav{
					&{
						width: @pgwidth;
						margin: auto;
						ul{
							height: 100%;
							margin-bottom: 0px;
						}
						.userphoto{
							width: 30px;
							height: 30px;
							border-radius: 50%;
							margin-right:5px;
							border:1px solid #F8F8F8;
						}
					}
					.logo{
						line-height: 60px;
						margin-top: 8px;
						margin-bottom: 8px;
					}
					.menu{
						height: 100%;
						line-height:75px;
						min-width: 100px;
						display: block;
						text-align: center;
						color: #3c3c3c;
						font-size:18px;
						position: relative;
						&:hover{
							background-color: #f0f0f0;
							color:@activecolor;
							text-decoration: none;
						}
						&.active{
							background-color: #f0f0f0;
							height:75px;
							color:@activecolor;
							border-bottom: 3px solid @activecolor;
						}
					}
					.topbar {
						& {
							font-size:14px;
							line-height:75px;
						}
						input{
							width:260px;
							height:35px;
							line-height:35px;
							border-top-left-radius: 20px;
							border-bottom-left-radius: 20px;
							border:1px solid #DDDDDD;
							padding-left:20px;
							border-right:0px;
						}
						button{
							&.btn{
								border-left: 0px;
								border-radius: 50%;
								border-top-left-radius: 0;
								border-bottom-left-radius: 0;
								border-color: #DDDDDD;
								padding:0;
								width: 35px;
								height:35px;
								margin-bottom: 2px!important;
								&.btn-default{
									color: #666666;
								}
							}
						}
					}
				}
			}
			.topnews{
				line-height: 40px;
				font-size:14px;
			}
			.appbar{
				padding:20px;
				background: url('../img/login_bg.jpg') center no-repeat;
			}
			.breadcrumb{
				border-radius: 2px;
				padding: 0 30px;
				font-size: 14px;
				background-color: #F8F8F8;
				width: @pgwidth;
				margin:0 auto;
			}
			.content{
				&{
					width: @pgwidth;
					margin: 0px auto;
					height: auto;
					overflow-x: hidden;
				}
				#questionindex{
					width:320px;
					z-index:9;
					border: 1px solid @bordercolor;
				}
				.content-box{
					&{
						border-radius: 3px;
						margin-top: 15px;
						overflow: hidden;
					}
					&.noground{
						background-color: transparent;
					}
					&.corebox{
						padding:100px 0;
						h1{
							margin-top:50px;
							line-height:60px;
							&{
								position:relative;
								text-indent: 5px;
							}
							&:after{
								background: @activecolor none repeat scroll 0 0;
								bottom: -5px;
								content: "";
								height: 5px;
								left: 5px;
								position: absolute;
								width: 110px;
							}
						}
						p{
							line-height:24px;
							padding:20px 0;
							color:#666666;
						}
					}
					&.hotnews{
						h2{
							&{
								position:relative;
								line-height:40px;
								text-indent: 5px;
							}
							&:after{
								background: @activecolor none repeat scroll 0 0;
								bottom: -3px;
								content: "";
								height: 3px;
								left: 5px;
								position: absolute;
								width: 60px;
							}
						}
						ul{
							margin-top:20px;
							&.list-box{
								border-bottom: 0px;
							}
							li{
								padding:0 10px;
								.newsbox{
									width: 100%;
									height:260px;
									border:1px solid #f2f2f2;
									border-radius: 5px;
									img{
										border-top-left-radius: 5px;
										border-top-right-radius: 5px;
										width: 100%;
										height:120px;
									}
									.newstitle{
										padding:5px;
										font-size:16px;
										line-height:24px;
									}
									.intro{
										padding:5px;
										font-size:12px;
										line-height: 20px;
										color:#999999;
									}
								}
							}
						}
					}
					&.loginbox{
						background-color: rgba(255,255,255,0.8);
						box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
						margin:10px auto;
						border-radius: 10px;
						padding:20px;
					}
					.row{
						padding:10px;
						.thumbnail{
							border:none;
							box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
							&:hover{
								box-shadow: 0px 0px 10px rgba(52,152,219,0.5);
							}
							img{
								height:170px;
								width: 100%;
							}
							p{
								color:#666666;
								font-size:14px;
							}
						}
					}
					.coursedesc{
						padding:30PX;
						font-size:16px;
						border-radius: 20px;
						line-height:28px;
						background-color: #f2f2f2;
						margin:30px;
					}
					.cattitle{
						line-height:50px;
						background: #3498DB;
						color: #FFFFFF;
						font-size:20px;
						font-weight: bolder;
						margin-bottom: 0px;
						border-top-left-radius: 5px;
						border-top-right-radius: 5px;
					}
					.badge{
						border-radius: 2px;
						padding: 5px 10px;
					}
					.right{
						width: 208px;
						height: 208px;
						background: url("../img/right.png");
						position: absolute;
						right:0px;
						z-index: 9;
						margin-top:60px;
					}
					.wrong{
						width: 208px;
						height: 208px;
						background: url("../img/wrong.png");
						position: absolute;
						right:0px;
						z-index: 9;
						margin-top:60px;
					}
					.pagination{
						&{
							border-radius: 0px;
							margin: 0px;
						}
						li{
							margin: 5px;
							display: inline-block;
							a,span{
								border: 0px;
								border-radius: 4px;
								background-color: #999999;
								color: #FFFFFF;
								&:hover{
									background-color: #333333;
								}
								&.current{
									background-color: #000000;
								}
							}
							&:last-child{
								display: none;
							}
						}
					}
					.title{
						&{
							position:relative;
							border-bottom:1px solid #EEEEEE;
							line-height:40px;
							font-weight:500;
							font-size:16px;
							text-indent: 5px;
						}
						&:after{
							background: @activecolor none repeat scroll 0 0;
							bottom: -2px;
							content: "";
							height: 2px;
							left: 0px;
							position: absolute;
							width: 90px;
						}
						.badge{
							margin-top: 10px;
							border-radius: 2px;
							padding: 5px 10px;
							margin-left: 10px;
						}
					}
					form,div{
						&{
							font-size: 15px;
							form{
								padding: 0px 15px;
							}
							input,select{
								vertical-align: middle;
								&.noborder{
									background-color: transparent;
									outline: 0;
									border: 0px;
									line-height: 1;
									box-shadow:none;
									-webkit-box-shadow: none;
									padding:0px;
								}
								&.form-control{
									padding: 6px 12px;
								}
							}
							input::-webkit-input-placeholder {
								color: #C0C0C0;
							}
							textarea{
								line-height: 24px!important;
							}
							&.bg{
								background-color: #FFFFFF;
								input,select{
									background-color: #FFFFFF;
								}
							}
							&.top{
								margin-top: 5px;
							}
							&.bottom{
								margin-bottom: 5px;
							}
						}
						.logbox{
							padding-top: 2vh;
							width: 100%;
							margin: auto;
							.borderinput{
								border: none;
								border-bottom:1px solid #DDDDDD;
								width: 100%;
								padding:0 10px;
								font-size: 14px;
								background-color: rgba(255,255,255,0);
							}
							input:focus{
								border-color: #66afe9;
								outline: 0;
								-webkit-box-shadow: none;
								box-shadow: none;
							}
						}
						.form-group{
							&{
								line-height: 37px;
								padding: 5px;
								clear: both;
								overflow: hidden;
							}
							input{
								font-size: 15px;
							}
							&.underline{
								&{
									border-bottom: solid 1px @bordercolor;
								}
								&:hover{
									border-color: @activecolor;
								}
							}
							.tip{
								padding-left: 20px;
								font-weight: 800;
							}
							select{
								margin-right: 15px;
							}
							.help{
								&{
									color: #C0C0C0;
								}
								&.error{
									color: #d9534f;
								}
								&.success{
									color: #4cae4c;
								}
							}
						}
						label {
							&{
								margin-bottom: 0px;
							}
							&.block{
								display: block;
								font-weight: normal;
							}
							&.inline{
								&{
									display: inline-block;
									vertical-align: middle;
									padding-right: 24px;
									font-weight: normal;
								}
								.selector{
									&:before{
										font-family: "Glyphicons Halflings";
										content: "\e084";
										display: inline-block;
										vertical-align: bottom;
										color:@unselectcolor;
										font-size: 21px;
										margin: 0px 5px;
									}
								}
								input[type="checkbox"],input[type="radio"] {
									display: none;
									&:checked + .selector:before {
										color: @activecolor;
									}
								}
                                input[type="checkbox"]{
                                    & + .selector:before {
										content: "\e067";
									}
                                }
							}
						}
						textarea{
							&{
								border-radius: 2px;
								padding: 10px;
								border: 1px solid @bordercolor;
							}
						}
						select{
							&{
								border-radius: 4px;
								line-height: 28px;
								padding: 10px;
								display: inline-block;
								border-color: @bordercolor;
								vertical-align: middle;
							}
							&.block{
								display: block;
								width: 100%;
							}
						}
						.btn{
							&{
								border-radius: 4px;
								padding: 9px 15px;
								display: inline-block;
								border: 1px solid @bordercolor;
								vertical-align: middle;
								text-align: center;
							}
							&:focus{
								border-width: 1px;
								outline: 0;
							}
							&.login{
								padding: 9px 25px;
								margin: 0px 10px;
							}
						}
					}
					ul{
						.qindex{
							margin-bottom: 5px;
							padding:6px 0px;
							text-align: center;
							width: 36px;
							height:36px;
							font-size: 14px;
						}
						&.list-txt{
							>li{
								&{
									line-height: 32px;
									font-size: 15px;
									padding: 5px 10px;
									clear: both;
								}
								a{
									height:100%;
									width: 100%;
									display: block;
								}
								&.active{
									background-color: #f6f6f6;
									.badge{
										background-color: #2b542c;
									}
									a{
										color: @activecolor;
									}
								}
								.badge{
									&.finish{
										background-color: #337ab7;
									}
								}
								&.indent{
									padding-left: 15px;
								}
								&.border{
									border-bottom: 1px solid #EEEEEE;
									&:last-child{
										border:0px;
									}
								}
								&.striped{
									margin-bottom: 5px;
									&:nth-child(even)
									{
										background-color: #f6f6f6;
									}
								}
								.glyphicon,.fa{
									margin-left: 5px;
									margin-right: 5px;
								}
								.tool{
									line-height: 36px;
									font-size: 15px;
									margin-left: 25px;
									font-size: 14px;
									.btn{
										padding-left: 25px;
										padding-right: 25px;
										border-radius: 2px;
									}
								}
							}
						}
						&.courselist{
							>li{
								&{
									height: 60px;
									line-height: 60px;
									clear: both;
									padding:0px;
								}
								a{
									width: 120px;
									display: inline;
									margin-left:10px;
								}
								.btn{
									border-radius: 20px;
									border: none;
								}
							}
						}
						&.list-searchtxt{
							>li{
								&{
									float: left;
									line-height: 25px;
									font-size: 12px;
									padding: 0 15px;
									text-align: center;
									margin-top:10px;
								}
								a{
									height:100%;
									width: 100%;
									display: block;
								}
								&.active{
									background-color: #337ab7;
									color: #FFFFFF;
									border-radius: 20px;
									a{
										color: #FFFFFF;
									}
								}
							}
						}
						&.list-box{
							&{
								overflow: hidden;
								margin-bottom: 0px;
								border-bottom: 1px solid #EEEEEE;
								&:last-child{
									border-bottom: 0px;
									margin-bottom: 15px;
								}
							}
							>li{
								&.box{
									&{
										padding: 20px;
										border-right: 1px solid #EEEEEE;
									}
									&:last-child
									{
										border-right: 0px;
									}
									&:hover{
										background-color: @bgcolor;
									}
									.img{
										img{
											width: 100%;
											border-radius: 3px;
										}
									}
									.intro{
										clear: both;
										overflow: hidden;
										font-size: 14px;
										line-height: 21px;
										color:#999999;
										padding-top: 10px;
									}
									.box-title{
										font-weight: 600;
										margin-top: 15px;
										margin-bottom: 5px;
									}
								}
								.coursebox{
									&{
										background-color: #FFFFFF;
										height:250px;
										border-radius: 5px;
										box-shadow: 1px 5px 10px rgba(0,0,0,0.1);
										margin:20px 0;
									}
									&:hover{
										box-shadow: 1px 5px 10px rgba(52,152,219,0.3);
									}
									.img{
										img{
											width: 100%;
											height:160px;
											border-top-left-radius: 5px;
											border-top-right-radius: 5px;
										}
									}
									.intro{
										clear: both;
										overflow: hidden;
										font-size: 14px;
										line-height: 21px;
										color:#999999;
										padding:0 10px;
									}
									.box-title{
										padding:10px;
										font-size:18px;
										font-weight: 500;
										padding-bottom:0px;
									}
								}
								.course-box{
									&{
										background-color: #FFFFFF;
										height:200px;
										border-radius: 5px;
										box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
										margin:10px 0;
									}
									&:hover{
										box-shadow: 0px 0px 10px rgba(52,152,219,0.3);
									}
									.img{
										img{
											width: 100%;
											height:160px;
											border-top-left-radius: 5px;
											border-top-right-radius: 5px;
										}
									}
									.intro{
										clear: both;
										overflow: hidden;
										font-size: 14px;
										line-height: 21px;
										color:#999999;
										padding:0 10px;
									}
									.box-title{
										padding:10px;
										font-size:18px;
										font-weight: 500;
										padding-bottom:0px;
									}
								}
								.exambox{
									&{
										background-color: #FFFFFF;
										height:160px;
										border-radius: 5px;
										box-shadow: 1px 5px 10px rgba(0,0,0,0.1);
										margin:20px 0;
									}
									&:hover{
										box-shadow: 1px 5px 10px rgba(52,152,219,0.3);
									}
									.img{
										img{
											width: 100%;
											height:160px;
											border-top-left-radius: 5px;
											border-top-right-radius: 5px;
										}
									}
									.intro{
										clear: both;
										overflow: hidden;
										font-size: 14px;
										line-height: 21px;
										color:#999999;
										padding:0 10px;
									}
									.box-title{
										padding:10px;
										font-size:18px;
										font-weight: 500;
										padding-bottom:0px;
									}
								}
								&.certbox{
									&{
										width: 20%;
										float: left;
										margin: 20px;
										background-color: #FFFFFF;
										height:250px;
										border-radius: 5px;
										box-shadow: 1px 5px 10px rgba(0,0,0,0.1);
									}
									&:first-child{
										margin-left:5px;
									}
									&:last-child
									{
										margin-right:5px;
									}
									&:hover{
										box-shadow: 1px 5px 10px rgba(52,152,219,0.3);
									}
									.img{
										img{
											width: 100%;
											height:180px;
											border-top-left-radius: 5px;
											border-top-right-radius: 5px;
										}
									}
									.intro{
										clear: both;
										overflow: hidden;
										font-size: 14px;
										line-height: 21px;
										color:#999999;
										padding:0 10px;
									}
									.box-title{
										padding:10px;
										font-size:18px;
										font-weight: 500;
										padding-bottom:0px;
									}
								}
							}
						}
						&.list-img{
							>li{
								&{
									line-height: 28px;
									font-size: 15px;
									overflow: hidden;
									padding-bottom: 10px;
									position: relative;
									&:hover{
										//background-color: #EEEEEE;
									}
									&.padding{
										padding:10px;
									}
									&.morepadding{
										padding:20px;
									}
								}
								&.border{
									border-bottom: 1px solid #EEEEEE;
									&:last-child{
										border:0px;
									}
								}
								.more{
									position: absolute;
									bottom:10px;
									right:15px;
								}
								.shorttitle{
									font-size: 18px;
									font-weight: 800;
									margin-bottom: 10px;
									line-height: 32px;
								}
								.img{
									padding-left: 0px;
									img{
										max-width: 100%;
										border-radius: 3px;
									}
								}
								.intro{
									clear: both;
									overflow: hidden;
									font-size: 14px;
									line-height: 21px;
									color:#999999;
									.desc{
										margin-top: 10px;
										color:#666666;
										&#content{
											font-size: 16px;
											line-height: 32px;
											p{
												text-indent: 2em;
											}
										}
										.toolbar{
											font-size: 12px;
											color:#999999;
										}
									}
								}
								td{
									font-size: 14px;
									line-height: 28px;
									.glyphicon,.fa{
										margin: auto 5px;
									}
								}
							}
						}
					}
				}
				.banner{
					width: 600px;
					height: 270px;
					overflow: hidden;
					border-radius: 5px;
					img{
						width: 100%;
					}
				}
			}
			.footer{
				&{
					margin-top: 15px;
					background-color: #4f4f4f;
					color: #FFFFFF;
					border-top: #444444 5px solid;
					font-size: 14px;
				}
				.footer-content{
					width: @pgwidth;
					margin: auto;
					padding:25px 10px;
					a{
						color:#999999;
						text-decoration: none;
						&:hover{
							color:#FFFFFF;}
					}
				}
			}
		}
	}
}