@import url("../css/reset.css");

.clearBoth{clear: both;}



/* leftColumn */

.leftColumn{
	width: 100%;
	float: none;
}

.loginArea{
	width: 100%;
	background: #009fda;
	padding:0px;
	margin: 0 auto;
	margin-bottom: 15px;
}

.loginArea .inputBox{
	padding: 15px 20px;
}

.loginArea .inputBox p.schoolName{
	font-size: 13pt;
	color: #fff;
	line-height: 1.5;
	margin-bottom: 5px;
}

.loginArea .inputBox p.userName{
	font-size: 12pt;
	color: #fff;
}
.loginArea .inputBox p.userName:before{
/* 	content: "contector:"; */
}

.loginArea .inputBox a:link, .loginArea .inputBox a:visited{
	color: #F0F8FF;
	text-decoration: none;
	font-size: 12px;
	width: 100%;
	display: block;
	text-align: center;
}

.loginArea h2{
	color: white;
	font-size: 15pt;
	line-height: 2;
}

.loginArea input{
	border: 1px solid #ccc;
	background: white;
	color: #ccc;
	width: 95%;
	padding: 5px;
	margin-bottom: 5px;
}

.loginArea .inputBox input:last-of-type{
	margin-bottom: 15px;
}


.loginArea button{
	background: #004c76;
	border: 0;
	color: white;
	text-align: center;
	width: 100%;
	padding: 8px;
	font-size: 15px;
	cursor: pointer;
}

.loginArea button:hover{
	background: #126490; 
}

.regBox{
	margin-bottom: 10px;
}

.regBox a:link, .regBox a:visited{
	width: 100%;
	height: 50px;
	display: block;
	line-height: 50px;
	text-align: center;
	color: white;
	text-decoration: none;
	background: #FF1493;
}

.regBox a:hover{
	background: #FF69B4;
	color: black;
}

.menuBox{
	margin-bottom: 10px;
}

.menuBox ul{
	width: 100%;
	margin: 0 auto;
}

.menuBox ul li{ 
	list-style: none;
}

.menuBox ul li a{
	
	display: block;
    padding: 0.30775em 0 0.30775em 1.231em;
    border-bottom: dotted 1px #333;
    font-weight: bold;
    text-decoration: none;
    background: transparent url("http://www.cambridgeenglish.org/tw/images/icons/icon-chevron-right-333-png.png") no-repeat scroll 0 center;
/*
    background-image:transparent url("http://www.cambridgeenglish.org/tw/images/icons/icon-chevron-right-333-png.png");
    background-repeat: no-repeat;
    background-position: 0 center;
*/
    color: #000;
    list-style: outside none;
    line-height: 1.464em;
}

.menuBox ul li a:visited{
	color: #333;
}

.menuBox ul li a:hover{
	 background-color: #e6e6e6;
}

.bannerArea{
	width: 213px;
	margin: 0 auto;
}

#cycler{
	position: relative;
	margin-bottom: 20px;
	width: 213px;
	height: 130px;
	display: block;
}


#cycler img {
	width: 213px;
	height: auto;
    position: absolute;
    z-index: 1;
    top: 5px;
}

#cycler h4{
	width: 100%;
	height: 30px;
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	color: white;
	font-size: 15px;
	line-height: 20px;
	padding: 5px;
	
}

.bannerArea .meritSchoolBanner{}

.bannerArea .meritSchoolBanner .bannerBox{
	position: relative;
	margin-bottom: 20px;
}

.bannerArea .meritSchoolBanner .bannerBox a{
	width: 100%;
	height: 129px;
	display: block;
	position: absolute;
	background-size: 213px 129px;
}


.bannerArea .meritSchoolBanner .bannerBox img, .bannerArea .meritSchoolBanner .leftBanner img{
	width: 213px;
	border: 1px solid gray;
}

.bannerArea .meritSchoolBanner .bannerBox h4{
	width: 100%;
	height: 30px;
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	color: white;
	font-size: 15px;
	line-height: 20px;
	padding: 5px;
}

.bannerArea .meritSchoolBanner .leftBanner{
	position: relative;
	margin-bottom: 20px;
}

.bannerArea .meritSchoolBanner .leftBanner .bannerText{
	width: 100%;
	height: 98%;
	top:0;
	position: absolute;
	background: rgba(0,0,0,0.4);
	text-align: center;
	line-height: 129px;
	cursor: pointer;
}


.bannerArea .meritSchoolBanner .leftBanner .bannerText h4{
	color: white;
	font-size: 18px;
	text-shadow: 2px 2px 0px black;
}


.bannerArea .meritSchoolBanner .leftBanner .bannerText:hover{
	background: rgba(0,0,0,0);
}



.bannerArea .meritSchoolBanner h3{
	color: #004c76;
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 5px;
}

/* rightColumn */

.rightColumn{
	width: 100%;
	float: none;
	margin-left: 0px;
}

.mainBanner{
	width: 100%;
	height: 245px;
	margin: 0 auto;
}

.mainBanner img{
	width: 100%;
}

.newsBar{
	background: #c81f66;
	width: 100%;
	height: 75px;
	margin: 0 auto;
	margin-bottom: 20px;
	overflow: hidden;
}

.newsBar a:link, .newsBar a:visited{
	font-size: 15pt;
	line-height: 75px;
	color: white;
	text-decoration:none;
	padding-left: 25px;
}

.supportArea{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
}

.supportArea h2{
	width: 100%;
	float: none;
	color: #004c76;
	border-left: 10px solid #00a4a1;
	padding-left: 15px;
	font-size: 20pt;
	height: 35px;
	line-height: 35px;
	margin-bottom: 10px;
}

a.status:link, a.status:visited{
	float: none;
	width: 100px;
	padding: 10px;
	background: #FFD700;
	color: brown;
	text-decoration: none;
	text-align: center;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

a.status:hover{
	background: #FFFACD;
}


.supportArea h2 em{
	font-size: 12px;
	color: gray;
	line-height: 1.5;
	margin-left: 10px;
}

.supportArea h2 em:before{

}

.stuffWrapper{
	width: 100%;
	margin: 0 auto;
	background: #f2f2f2;
	padding: 20px;
	padding-bottom: 15px;
	
}


.stuffWrapper form{
	margin-left: -13px;
}

.stuffBox{
	width: 100%;
	min-height: 300px;
	float: none;
	margin-bottom: 20px;
	margin-left: 13px;
	border: 1px solid #c7c7c7;
	background: #fff;
	padding: 10px;
}

.stuffBox img{
	max-width: 200px;
	max-height:135px; 
	
	margin: 0 auto;
	margin-bottom: 5px;
}

.stuffWrapper button{
	width: 100px;
	margin: 0 auto;
	margin-left: 45%;
	padding: 10px;
	border-radius: 0;
	border: 0;
/* 	border: 1px solid #05465e; */
	background: #009fda;
	color: white;
	cursor: pointer;
}


.stuffWrapper button:hover{
	background: #4fc4ef;
}


.stuffWrapper button.noLogin{
	background: gray;
	cursor: auto;
}

.stuffWrapper button.noLogin:hover{
	background: gray;
}

.stuffBox .stuffImgBox{
	width: 100%;
	height: 135px;
	text-align: center;
	vertical-align: middle;
	background: #f1f1f1;
	margin-bottom: 10px;
}


.stuffBox .stuffTitle{
	width: 100%;
	margin-bottom: 25px;
	height: 50px;
	
}

.stuffBox .stuffTitle input, .stuffBox .stuffTitle h3{
/* 	float: left; */
}

.stuffBox .stuffTitle input{
/* 	margin-top: 5px; */
}

.stuffBox .stuffTitle h3{
	width: 150px;
	color: #009fda;
	font-size: 15px;
	line-height: 1.5;
	margin-left: 5px;
	display: block;
}

.stuffBox h4{
	font-size: 14px;
	color: #FF1493;
	line-height: 1.6;
}

.stuffBox p{
	font-size: 10pt;
	line-height: 1.5;
}

.stuffBox ol{
	margin-left: 20px;
}

.stuffBox ol li{
	list-style: decimal;
	font-size: 15px;
	color: gray;
	line-height: 1.6;
}

/*
.bottomImg{
	clear: both;
	background: url("../images/waveBottom.jpg");
	width: 979px;
	height: 140px;
}
*/


/* 內頁 */


.articleArea{
	width: 726px;
	margin: 0 auto;
	margin-bottom: 20px;
}

.articleArea h1{
	color: #004c76;
	border-left: 10px solid #00a4a1;
	padding-left: 15px;
	font-size: 20pt;
	height: 35px;
	line-height: 35px;
	margin-bottom: 10px;
}

.articleArea h2{
	color: #938048;
	font-size: 15pt;
	line-height: 2;
	margin-bottom: 10px;

}

.articleArea a.downloadApplyForm:link, .articleArea a.downloadApplyForm:visited{
	width: 40%;
	margin: 0 auto;
	padding: 25px 15px;
	background: #FF69B4;
	color: white;
	text-align: center;
	text-decoration: none;
	margin-bottom: 20px;
	display: block;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.articleArea a.downloadApplyForm:hover{
	background: #FF1493;
}

.articleArea .articleBanner{
	margin-bottom: 20px;
}

.articleArea .articleBanner, .articleArea .articleBanner img{
	width: 726px;
}

.articleArea p{
	font-size: 15px;
	margin-bottom: 15px;
	color: gray;
	line-height: 1.6;
}

.articleArea p.remind{
	width: 100%;
	font-size: 10pt;
	line-height: 1.5;
	text-align: center;
	color: #FF1493;
/*
	background: #FF1493;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
*/
}

.articleArea p.newsdate{
	font-size: 10pt;
	color: #000;
}

.articleArea p.regWarnning{
	width: 100%;
	padding: 20px;
	font-size: 13pt;
	line-height: 2.5;
	color: #fff;
	background: #FF1493;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.articleArea p.regWarnning a:link, .articleArea p.regWarnning a:link{
	text-decoration: none;
	background: white;
	color: #00008B;
	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-left: 10px;
}

.articleArea p.regWarnning a:hover{
	background: #00BFFF;
	color: white;
}

.articleArea ol{
	margin-bottom: 15px;
	margin-left: 15px;
}

.articleArea ol li{
	list-style: decimal;
	padding-left: 0px;
	font-size: 15px;

	color: gray;
	line-height: 1.6;
}

/* 註冊頁面 */

.articleArea table{}

.articleArea table tr{
	background: #c9edec;
}

.articleArea table tr:nth-child(odd){
	background: #e3f6f6;
}

.articleArea table tr th{
	background: #00b3b3;
	color: white;
	text-align: center;
	padding: 10px;
}

.articleArea table tr td{
	padding: 10px;
}

.articleArea table tr td a:link{
	text-decoration: none;
	color: gray;
}

.articleArea table tr td a:visited{
	color: gray;
}

.articleArea table tr td a:hover{
	color: black;
}


.articleArea table.tableList{
	margin-bottom: 15px;
}

.articleArea table.tableList tr{}

.articleArea table.tableList tr td{
	vertical-align: top;
	font-size: 15px;
	color: gray;
	line-height: 1.6;
}

.articleArea table.tableList tr td input{
	padding: 3px;
}


span.noteTag{
	color: #FF1493;
	font-size: 9pt;
	margin-left: 10px;
	position: relative;
/* 	top:5px; */
}


h2 span.noteTag{
	font-size: 12px;
	position: relative;
	top:0px;
}


.articleArea form.regForm button{
	width: 100px;
	height: 40px;
	display: block;
	padding: 0;
	margin: 0 auto;
	background: #FF69B4;
	line-height: 30px;
	color: #fff;
	border: 0px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.articleArea form.regForm button:hover{
	background: #FF1493;
}

/* 下載專區 */

.articleArea.download{}

.articleArea.download h2{
	width: 120px;
	text-align: center;
	display: block;
	padding: 5px;
	padding-bottom: 0px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: #E6E6FA;
	color: #4169E1;
/*
	border-top: 1px solid #6495ED;
	border-left: 1px solid #6495ED;
	border-right: 1px solid #6495ED;
*/
	margin-bottom: 0px;
}



.articleArea.download ul{}

.articleArea.download ul li{
	float: left;
	margin-left: 2px;
}

.articleArea.download ul li:first-child{
	margin-left: 0px;
}


.articleArea.download ul li a{
	width: 120px;
	text-align: center;
	display: block;
	padding: 12px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: #e7f4ff;
	color: #91c5f1;
	margin-bottom: 0px;
	text-decoration: none;
	font-size: 20px;
}

.articleArea.download ul li a.current{
	background: #E6E6FA;
	color: #6495ED;
}


.articleArea.download .downloadSection{
	padding: 20px;
	width: 100%;
/* 	border: 1px solid #6495ED; */
	background: #E6E6FA;
	margin-bottom: 30px;
	margin-top: 0px;
}



/*
.articleArea.download .downloadSection a:link, .articleArea.download .downloadSection a:visited{
	width: 130px;
	height: 150px;
	padding: 10px;
	display: block;
	background-color: #FFF;
	background-image: url(../images/pdf-icon.png);
	background-size: 75px 75px;
	background-repeat: no-repeat;
	background-position: top 10px center;
	border: 1px solid #ccc;
	float: left;
	margin-left: 6px;
	margin-bottom: 15px;
	font-size: 13px;
	text-decoration: none;
	text-align:left;
	position: relative;
	color: #696969;
}
*/


.articleArea.download .downloadSection a:link, .articleArea.download .downloadSection a:visited{
	width: 200px;
	height:260px;
	padding: 15px;
	display: block;
	background-color: #f6f6f6;
	border: 1px solid #ccc;
	float: left;
	margin-left: 20px;
	margin-bottom: 20px;
	font-size: 13px;
	text-decoration: none;
	text-align:center;
	color: #696969;
}

.articleArea.download .downloadSection a:hover{
	background-color: #FFFFF0;
}

.articleArea.download .downloadSection a img{
	width: 130px;
	height: auto;
	margin: 0 auto;
	vertical-align: middle;
	margin-bottom: 10px;
}


.articleArea.download .downloadSection a p{
	line-height: 1.5;
	text-align: left;
}

/* 忘記密碼頁面 */

.articleArea .forgetPassBox{
	padding: 20px;
	background:#e6f3f9;
}

.articleArea .forgetPassBox input{
	float: left;
	margin-left: 10px;
	height: 30px;
}

.articleArea .forgetPassBox input#mail{
	padding: 5px;
	font-size: 12px;
	line-height: 1.3;
	width: 300px;
	margin-bottom: 15px;
}

.articleArea .forgetPassBox input#submit{
	padding: 10px;
	width: 60px;
	line-height: 10px;
	display: block;
	border-radius: 0;
	border:1px solid #ccc;
	background: #F0F8FF;
	cursor: pointer;
}

.articleArea .forgetPassBox input#submit:hover{
	background: #fff;
}

/* 訂單狀況頁 */

.articleArea.order .orderList{
	width: 100%;
	padding: 5px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background: #fffcea;
	margin-bottom: 20px;
}

.articleArea.order h1, .articleArea.history h1{
	width: 500px;
	float: left;
}

.articleArea.order .orderList .orderImg{
	float: left;
}


.articleArea.order .orderList .orderInfo{
	float: left;
	margin-left: 15px;
}


.articleArea.order .orderList .orderInfo h2{
	margin-bottom: 5px;
}

.articleArea.order .orderList .orderInfo h4{
	font-size: 15px;
	color: #FF1493;
	line-height: 1.6;
}

.articleArea.order .orderList .orderInfo p.status{
	padding: 5px;
	line-height: 1;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: white;
	margin-bottom: 0px;
	text-align: center;
}

.articleArea.order .orderList .orderInfo p.status.process{
	
	background: #0089ff;
	
}

.articleArea.order .orderList .orderInfo p.status.shipping{
	background: #32CD32;
}

/* 訂單歷史紀錄頁面 */



.articleArea.history .orderHistoryList{

}



.articleArea.history .orderHistoryList a:link, .articleArea.history .orderHistoryList a:visited{
	font-size: 13pt;
	height: 50px;
	line-height:40px;
	border-radius: 10px;
	padding: 5px;
	padding-left: 15px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background: #ccc;
/* 	border: 1px solid gray; */
	display: block;
	text-decoration: none;
	color: black;
	position: relative;
	margin-bottom: 10px;
}



.articleArea.history .orderHistoryList a:hover{
	background: #FFD700;
/* 	border: 1px solid #FF8C00; */
	color: brown;
}




.articleArea.history .orderHistoryList a span{
	font-size: 15px;
	color: black;
	background: #fff;
	position: absolute;
	right: 10px;
	padding:10px;
	line-height: 18px;
	border-radius: 40px;
	-webkit-border-radius:40px;
	-moz-border-radius: 40px;
}


.articleArea.history .orderHistoryList a.HistoryInfoLink.processing{
	background: #32CD32	;
/* 	border: 1px solid #32CD32; */
}


.articleArea.history .orderHistoryList a.HistoryInfoLink.processing span{
	background: #ADFF2F;
	color: #000;
}

.articleArea.history .orderHistoryInfo{
	padding: 10px;
	margin-bottom:15px;
	padding-left: 20px;
	background: #FFFFE0;
}

.articleArea.history .orderHistoryInfo h2{
	line-height: 1.3;
}

.articleArea.history .orderHistoryInfo h4{
	font-size: 15px;
	color: #FF1493;
	line-height: 1.6;
}

.articleArea.history .orderHistoryInfo p{
	margin-bottom: 5px;
}

/* lineBox */
.lineBox{
	width: 100%;
	margin-bottom: 10px;
	padding: 5px;
	padding-top: 8px;
	padding-left: 0;
	text-align: center;
	background: #ceceb3;
}

.lineBox h3{
	font-size: 15px;
	color: #004c76;
	line-height: 1.5;
	margin-bottom: 10px;
}

.lineBox img.qrcode{
	width: 180px;
	height: auto;
}

.lineBox p{
	float: none;
	font-size: 12pt;
	width: auto;
	color: #fff;
	margin-bottom: 10px;
}


.lineBox a{
	float: none;
}

.goodsStatus{
	width: 100%;
	height: 20px;
	background: #eea4a4;
	color: white;
	font-size: 11pt;
	line-height: 20px;
	padding-left: 5px;
	margin-bottom: 5px;
}

.goodsStatus.dealed{
	background: #9a9a9a;
	color: #ccc;
}

.checkBar{
	width: 100%;
	height: 20px;
	background: #aed74a;
	margin-bottom: 5px;
}

.checkBar label{
	font-size: 11pt;
	color: white;
	height: 20px;
	line-height: 20px;
}

.forgetPass{
	width: 600px;
	height: 180px;
	margin: 0 auto;
	background:#009fda;
	 border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: white;
	margin-top: 100px;
	padding: 30px;
}

.forgetPass h1, .updatePass h1{
	font-size: 20pt;
	line-height: 1.5;
	color: #fff;
	margin-bottom: 15px;
}

.forgetPass p, .forgetPassBox p{
	line-height: 1.5;
}

.forgetPass form input{
	padding: 5px;
}

.forgetPass form .si-group{
	margin-bottom: 15px;
}

.updatePass{
	width: 600px;
	height: auto;
	margin: 0 auto;
	background:#009fda;
	 border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: white;
	margin-top: 100px;
	padding: 30px;
}

.updatePass .si-group{
	padding: 10px;
}

.forgetPassBox input{
	padding: 5px;
}