body { margin: 0; padding: 0; background: #ffffff url('../images/bg_header.jpg') center 62px repeat-x; }
ul, ol, li { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, li, tr, th, td, div { margin: 0; padding: 0; font-family: 'Microsoft JhengHei', '微軟正黑體', '新細明體'; }
a { text-decoration: none; outline: none; hlbr:expression(this.onFocus=this.blur()); }

#bg { margin: 0 auto; padding: 0; width: 1024px; }

#bg #header { height: 200px; }
#bg #header h1 { font-size: 60px; font-weight: bold; text-align: center; line-height: 200px; color: #C40000; }
#bg #header h1 span { font-size: 100px; font-family: 'Matura MT Script Capitals'; }
#bg #header h1 a { border: none; color: #C40000; }
#bg #header h1 img { border: none; padding: 0; margin: 0; display: block; }

#bg #menu { margin-top: 15px; width: 100%; height: 40px; background: #000000; }
#bg #menu ul { display: block; width: 926px; margin: 0 auto; }
#bg #menu ul li { float: left; height: 20px;  border-right: #ffffff solid 1px; margin: 10px 0; position: relative; }
#bg #menu ul li:last-child { border-right: none; }
#bg #menu ul li a { display: block; width: 125px; height: 40px; font-size: 21px; line-height: 40px; text-align: center; color: #ffffff; margin-top: -10px; }
#bg #menu ul li a:hover { color: #e3e3e3; }
#bg #menu ul li a.lightOn { width: 170px; height: 70px; font-size: 30px; font-weight: bold; line-height: 70px; margin-top: -28px; color: #000000; background: url('../images/menu_button.png') center center no-repeat; }
#bg #menu ul li a.lightOn:hover { color: #666666; }
#bg #menu ul li ul { display: none; width: 125px; margin: 0; padding: 0; }
#bg #menu ul li ul li { float: none; display: block; width: 125px; height: 40px; }
#bg #menu ul li ul li a { display: block; width: 125px; height: 40px; font-size: 21px; line-height: 40px; text-align: center; color: #ffffff; background: #000000; }

#bg #content { min-height: 730px; background: url('../images/bg_money.jpg') top center no-repeat; }

#bg #content #slogen { padding-top: 400px; font-size: 60px; font-weight: bold; text-align: center; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;  }

#bg #content #clock { margin: 30px auto 30px; width: 800px; height: 90px; }
#bg #content #clock .barL { width: 30px; height: 90px; float: left; background-color: #000000; border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
#bg #content #clock .barL p { width: 90px; height: 30px; transform: translate(-90px, 0) rotate(-90deg); transform-origin: right top 0px; -webkit-transform: translate(-90px, 0) rotate(-90deg); -webkit-transform-origin: right top 0px; -o-transform: translate(-90px, 0) rotate(-90deg); -o-transform-origin: right top 0px; -ms-transform: translate(-90px, 0) rotate(-90deg); -ms-transform-origin: right top 0px; color:#ffffff; font-size:18px; line-height: 30px; text-align: center; }
#bg #content #clock .barL p.ie8 { width: 30px; height: 90px; line-height: 22px; }
#bg #content #clock .barR { width: 30px; height: 90px; float: right; background-color: #000000; border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
#bg #content #clock .barR p { width: 90px; height: 30px; transform: translate(30px, 0) rotate(90deg); transform-origin: left top 0px; -webkit-transform: translate(30px, 0) rotate(90deg); -webkit-transform-origin: left top 0px; -o-transform: translate(30px, 0) rotate(90deg); -o-transform-origin: left top 0px; -ms-transform: translate(30px, 0) rotate(90deg); -ms-transform-origin: left top 0px; color:#ffffff; font-size:18px; line-height: 30px; text-align: center; }
#bg #content #clock .barR p.ie8 { width: 30px; height: 90px; line-height: 22px; }
#bg #content #clock #timeCount { width: 740px; height: 90px; float: left; font-size: 24px; font-weight: bold; line-height: 30px; text-align: center; }
#bg #content #clock #timeCount span { font-size: 90px; font-family: 'Verdana'; font-weight: normal; line-height: 90px; color: #E14F00; padding-left: 10px; }

#bg #content #news { margin: 40px auto 0; padding: 15px 20px 0 84px; width: 550px; height: 230px; background: url('../images/bg_news.png') center center no-repeat; position: relative; }
#bg #content #news ul li { width: 550px; height: 32px; line-height: 32px; font-size: 16px; }
#bg #content #news ul li a { width: 430px; display: block; float: left; color: #000000; }
#bg #content #news ul li a:hover { color: #0058A5; }
#bg #content #news div { width: 150px; height: 18px; position: absolute; bottom: 0; right: 0; background-color: #303030; font-size: 12px; text-align: center; color: #303030; }
#bg #content #news div a {color: #fff; }
#bg #content #news div #homeNewsBotP { padding: 0 10px; cursor: pointer; color: #fff; display: none; }
#bg #content #news div #homeNewsBotN { padding: 0 10px; cursor: pointer; color: #fff; }


/*#bg #content #information { margin: 60px auto 0; padding: 30px 180px 0 180px; width: 600px; }*/
#bg #content #information { margin: 0px auto; padding: 30px 180px 0 180px; width: 600px; }
#bg #content #information ul { display: block; width: 520px; margin: 0 auto; }
#bg #content #information ul li { font-size: 18px; text-align: left; line-height: 25px; }
#bg #content #information ul li span.closer { color: #C40000; }
#bg #content #information ul li span.explan { color: #a60000; }
#bg #content #information ul li span.explan:before { content: '　　　　　　　'; }

#bg #footer { margin: 80px 0 15px 0; padding: 20px 0 0 0; border-top: 1px solid #000000; }
#bg #footer p { text-align: center; font-size: 12px; }
#bg #footer p a { text-decoration: underline; color: #000; }
#bg #footer p a:hover { text-decoration: none; }

#introArea { width: 570px; height: 470px; padding: 15px; overflow: hidden; overflow-y: auto; }
#introArea h2 { text-align: center; color: #C40000; padding-bottom: 20px; }
#introArea #innerCon p { font-size: 14px; line-height: 1.6em; padding-bottom: 10px; }
#introArea #innerCon ul { list-style: disc; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#introArea #innerCon ol { list-style: decimal; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#introArea #innerCon ul li { font-size: 14px; line-height: 1.6em; list-style: disc; list-style-position: outside; }
#introArea #innerCon ol li { font-size: 14px; line-height: 1.6em; list-style: decimal; list-style-position: outside; }
#introArea #innerCon th, #introArea #innerCon td { font-size: 14px; line-height: 1.6em; }

#partnerArea { width: 570px; height: 470px; padding: 15px; overflow: hidden; overflow-y: auto; }
#partnerArea h2 { text-align: center; color: #C40000; padding-bottom: 20px; }
#partnerArea #innerCon p { font-size: 14px; line-height: 1.6em; padding-bottom: 10px; }
#partnerArea #innerCon ul { list-style: disc; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#partnerArea #innerCon ol { list-style: decimal; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#partnerArea #innerCon ul li { font-size: 14px; line-height: 1.6em; list-style: disc; list-style-position: outside; }
#partnerArea #innerCon ol li { font-size: 14px; line-height: 1.6em; list-style: decimal; list-style-position: outside; }

#signupArea { width: 360px; height: 500px; padding: 0 30px; overflow: hidden; overflow-y: auto; }
#signupArea h2 { text-align: center; color: #C40000; padding-bottom: 20px; }
#signupArea #innerCon p { font-size: 14px; padding-bottom: 5px; }
#signupArea #innerCon p label { display: block; font-size: 12px; color: #333333; padding: 0; margin: 0; }
#signupArea #innerCon p input { width: 290px; height: 20px; border: 1px solid #c3c3c3; padding: 0 5px; border-radius: 5px; font-size: 14px; }
#signupArea #innerCon p label span.success { padding-left: 20px; background: url('../images/icon_success_10x10.jpg') 8px center no-repeat; color: #009900; }
#signupArea #innerCon p label span.failure { padding-left: 20px; background: url('../images/icon_failure_10x10.jpg') 8px center no-repeat; color: #C30000; }
#signupArea #innerCon p.moreBot { text-align: left; }
#signupArea #innerCon ul { list-style: disc; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#signupArea #innerCon ol { list-style: decimal; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#signupArea #innerCon ul li { font-size: 14px; line-height: 1.6em; list-style: disc; list-style-position: outside; }
#signupArea #innerCon ol li { font-size: 14px; line-height: 1.6em; list-style: decimal; list-style-position: outside; }

#signupArea #innerCon #noteArea p { padding-bottom: 10px; text-align: center; font-size: 16px; font-weight: bold; color: #6F0000; }
#signupArea #innerCon #noteArea ol li { padding-bottom: 10px; }

#signupArea #innerCon .noteWord { display: none; }
#signupArea #innerCon #signupForm { display: none; }
#signupArea #innerCon #moreStudent { display: none; }
#signupArea #innerCon #signupTeacher { display: none; }
#signupArea #innerCon #moreTeacher { display: none; }
#signupArea #innerCon #signupTeacher h5 { font-size: 14px; text-align: center; color: #990000; }

#signupArea #innerCon #signupEndCheck { display: none; }
#signupArea #innerCon #signupEndCheck h3 { text-align: center; font-size: 16px; font-weight: bold; color: #004EC3; }
#signupArea #innerCon #signupEndCheck h4 { text-align: right; font-size: 12px; font-weight: bold; color: #303030; }
#signupArea #innerCon #signupEndCheck table { border: 1px solid #c3c3c3; margin-bottom: 5px; }
#signupArea #innerCon #signupEndCheck table td { padding: 3px 2px; font-size: 12px; text-align: left; font-family: '新細明體'; }
#signupArea #innerCon #signupEndCheck table th { padding: 3px 2px; font-size: 12px; text-align: right; border-right: 1px solid #dedede; }

#signupArea #innerCon a#botStepB { display: block; width: 300px; height: 30px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 20px; line-height: 30px; text-align: center; color: #ffffff; }
#signupArea #innerCon a#botStepB:hover { background: #004EC3; }
#signupArea #innerCon a#botStepF { display: block; display: none; width: 300px; height: 30px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 20px; line-height: 30px; text-align: center; color: #ffffff; }
#signupArea #innerCon a#botStepF:hover { background: #004EC3; }
#signupArea #innerCon a#botStepS { display: block; display: none; width: 300px; height: 30px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 20px; line-height: 30px; text-align: center; color: #ffffff; }
#signupArea #innerCon a#botStepS:hover { background: #004EC3; }
#signupArea #innerCon a#botStepL { display: block; display: none; width: 300px; height: 30px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 20px; line-height: 30px; text-align: center; color: #ffffff; }
#signupArea #innerCon a#botStepL:hover { background: #004EC3; }

#signupArea #innerCon a#botStepBS { display: block; display: none; width: 150px; height: 20px; margin: 5px auto; padding: 5px; background: #cfcfcf; border-radius: 5px; font-size: 12px; line-height: 20px; text-align: center; color: #000000; }
#signupArea #innerCon a#botStepBS:hover { background: #e3e3e3; }
#signupArea #innerCon a#botStepBL { display: block; display: none; width: 150px; height: 20px; margin: 5px auto; padding: 5px; background: #cfcfcf; border-radius: 5px; font-size: 12px; line-height: 20px; text-align: center; color: #000000; }
#signupArea #innerCon a#botStepBL:hover { background: #e3e3e3; }

#newsArea { width: 570px; height: 470px; padding: 15px; overflow: hidden; overflow-y: auto; }
#newsArea h2 { text-align: center; color: #C40000; padding-bottom: 10px; }
#newsArea #datetime { font-size: 12px; font-family: 'Verdana'; text-align: center; color: #606060; padding-bottom: 15px; }
#newsArea #innerCon p { font-size: 14px; line-height: 1.6em; padding-bottom: 10px; }
#newsArea #innerCon ul { list-style: disc; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#newsArea #innerCon ol { list-style: decimal; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#newsArea #innerCon ul li, #newsArea #innerCon ol li { font-size: 14px; line-height: 1.6em; list-style: inherit; }

#editArea { width: 360px; height: 500px; padding: 0 30px; overflow: hidden; overflow-y: auto; }
#editArea h2 { text-align: center; color: #C40000; padding-bottom: 20px; }
#editArea #innerCon p { font-size: 14px; padding-bottom: 5px; }
#editArea #innerCon p label { display: block; font-size: 12px; color: #333333; padding: 0; margin: 0; }
#editArea #innerCon p input { width: 290px; height: 20px; border: 1px solid #c3c3c3; padding: 0 5px; border-radius: 5px; font-size: 14px; }
#editArea #innerCon p label span.success { padding-left: 20px; background: url('../images/icon_success_10x10.jpg') 8px center no-repeat; color: #009900; }
#editArea #innerCon p label span.failure { padding-left: 20px; background: url('../images/icon_failure_10x10.jpg') 8px center no-repeat; color: #C30000; }
#editArea #innerCon p.moreBot { text-align: right; }
#editArea #innerCon ul { list-style: disc; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#editArea #innerCon ol { list-style: decimal; list-style-position: outside; padding-left: 28px; padding-bottom: 10px; }
#editArea #innerCon ul li, #editArea #innerCon ol li { font-size: 14px; line-height: 1.6em; list-style: inherit; }

#editArea #innerCon #loginForm p { padding: 0 30px 5px 30px; }
#editArea #innerCon #loginForm p input { width: 295px; }
#editArea #innerCon #loginForm #botLogin { display: block; width: 300px; height: 30px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 20px; line-height: 30px; text-align: center; color: #ffffff; }
#editArea #innerCon #loginForm a#botLogin:hover { background: #004EC3; }
#editArea #innerCon #loginForm #botGetpwd { display: inline-block; width: 100px; height: 20px; margin: 5px auto; padding: 5px; background: #cfcfcf; border-radius: 6px; font-size: 12px; line-height: 20px; text-align: center; color: #000000; }
#editArea #innerCon #loginForm a#botGetpwd:hover { background: #e3e3e3; }

#editArea #innerCon #loginForm #pwdArea { display: none; width: 290px; margin: 5px auto; padding: 5px; border: 1px dashed #939393; }
#editArea #innerCon #loginForm #pwdArea p { padding: 0 30px 5px 30px; }
#editArea #innerCon #loginForm #pwdArea p input { width: 200px; }
#editArea #innerCon #loginForm #pwdArea #botPwdGot { display: block; width: 150px; height: 20px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 12px; line-height: 20px; text-align: center; color: #ffffff; }
#editArea #innerCon #loginForm #pwdArea a#botPwdGot:hover { background: #004EC3; }

#editArea #innerCon #loginForm #tidArea { display: none; width: 290px; margin: 5px auto; padding: 5px; border: 1px dashed #939393; }
#editArea #innerCon #loginForm #tidArea p { padding: 0 30px 5px 30px; }
#editArea #innerCon #loginForm #tidArea p input { width: 200px; }
#editArea #innerCon #loginForm #tidArea #botPwdGot { display: block; width: 150px; height: 20px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 12px; line-height: 20px; text-align: center; color: #ffffff; }
#editArea #innerCon #loginForm #tidArea a#botPwdGot:hover { background: #004EC3; }

#editArea #innerCon #editForm { display: none; }
#editArea #innerCon #editForm ul { display: block; list-style: none; padding: 0; height: 25px; }
#editArea #innerCon #editForm ul li { float: left; list-style: inherit; padding: 0; }
#editArea #innerCon #editForm ul li a { display: block; width: 100px; height: 25px; margin: 0 6px; padding: 0; line-height: 25px; background: #0078E1; border-radius: 6px; color: #ffffff; text-align: center; }
#editArea #innerCon #editForm ul li a:hover { background: #004EC3; }
#editArea #innerCon #editForm ul li a.selected { width: 98px; height: 23px; line-height: 23px; border: 1px solid #0078E1; background: #ffffff; color: #0078E1; }
#editArea #innerCon #editForm p input[readonly=true] { background: #efefef; color: #666666; cursor: default; }
#editArea #innerCon #moreStudent { display: none; }
#editArea #innerCon #signupTeacher { display: none; }
#editArea #innerCon #moreTeacher { display: none; }
#editArea #innerCon #signupStudent{ display: none; }
#editArea #innerCon #editPassword {  }
#editArea #innerCon #editPassword h5 { font-size: 14px; text-align: center; color: #990000; }
#editArea #innerCon a#botSubmit { display: block; display: none; width: 300px; height: 30px; margin: 5px auto; padding: 5px; background: #0078E1; border-radius: 6px; font-size: 20px; line-height: 30px; text-align: center; color: #ffffff; }
#editArea #innerCon a#botSubmit:hover { background: #004EC3; }
#editArea #innerCon ##editEndCheck { display: none; }
#editArea #innerCon ##editEndCheck p { color: #0078E1; }

#signupArea #innerCon #signupStudent .MailSelected { display: block; }
#signupArea #innerCon #signupStudent .mail_account { width: 150px; }
#signupArea #innerCon #signupStudent .addr { width: 145px; display: inline-block; /*text-align: right;*/ }

#teamList { width: 570px; height: 420px; padding: 15px; overflow: hidden; overflow-y: auto; }
#teamList h2 { text-align: center; color: #C40000; padding-bottom: 20px; }
#teamList #search { padding: 5px; margin-bottom: 10px; text-align: right; }
#teamList #search span { line-height: 25px; padding: 0 5px; font-size: 13px; }
#teamList #search input { width: 200px; height: 25px; border: 1px solid #c3c3c3; padding: 0 5px; border-radius: 5px; font-size: 14px; }
#teamList #search input[type=submit] { width: 80px; height: 27px; color: #fff; background: #0078E1; cursor: pointer; }
#teamList #search input[type=submit]:hover { background: #004EC3; }
#teamList #search a { border: 1px solid #c3c3c3; padding: 3px 15px 2px; border-radius: 5px; font-size: 14px; color: #fff; background: #0078E1; cursor: pointer; }
#teamList #search a:hover { background: #004EC3; }
#teamList #innerCon table thead tr th { color: #C40000; }
#teamList #innerCon table tbody tr td { min-height: 48px; font-size: 13px; color: #636363; padding: 5px 2px; text-align: center; border-top: 1px dashed #c3c3c3; }
#teamList #innerCon table tbody tr td.listTeamNum { width: 40px; font-size: 16px; border-right: 1px dashed #c3c3c3; }
#teamList #innerCon table tbody tr td.listTeamName { width: 120px; font-size: 18px; border-right: 1px dashed #c3c3c3; }
#teamList #innerCon table tbody tr td.listTeamStudent { width: auto; text-align: left; border-right: 1px dashed #c3c3c3; }
#teamList #innerCon table tbody tr td.listTeamAccount { width: 80px; }
#teamList #innerCon table tbody tr td span { display: block; float: left; padding: 2px 5px; margin: 3px; border: 1px solid #000; }
#teamList #innerCon table tbody tr td a:hover { color: #7BA4EA; }
#teamList #innerCon table tfoot tr td { font-size: 15px; color: #912700; padding: 5px 0; border-top: 1px dashed #c3c3c3; }
#teamList #innerCon table tfoot tr td a { color: #912700; }
#teamList #innerCon table tfoot tr td a:hover { color: #FF6600; }
#teamList #innerCon table tfoot tr td a.op_left { display: none; width: 50%; text-align: center; float: left; }
#teamList #innerCon table tfoot tr td a.op_right { display: block; width: 50%; text-align: center; float: right; }


/*

*/
#RankContainer { margin: 0 auto; width: 74%; background-color: #fff; border: 20px solid rgba(180,0,0,0.3); border-top: 15px solid rgba(180,0,0,0.3); border-bottom: 15px solid rgba(180,0,0,0.3); border-radius: 1.5em; /*cursor: move;*/ }
#RankContainer { -moz-background-clip: border; /* Firefox 3.6 */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */ 
background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ -moz-background-clip: padding; /* Firefox 3.6 */ 
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */ background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ 
-moz-background-clip: content; /* Firefox 3.6 */ -webkit-background-clip: content; /* Safari 4? Chrome 6? */ 
background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ }
.cWindow { position: absolute; right: 1em; top: 1em; z-index: 1; font-weight: bold; width: 2em; height: 2em; border-radius:99em; background-color: #eee; cursor: pointer;}
#Rank { background-color: #fff; padding: 0 0.4em 1.4em; border-radius: 99%; cursor: auto; }
#LeaderboardContainer { width: 100%; text-align: center; }
.Leaderboard { width: 100%; }
.Leaderboard tr { height: 2.5em; }
.Leaderboard th { font-size: 1.2em; }
.Leaderboard td { text-align: center; }
.Leaderboard td:nth-child(1), .Leaderboard th:nth-child(1) { width: 8%; }
.Leaderboard td:nth-child(2), .Leaderboard th:nth-child(2) { width: 12%; }
.Leaderboard td:nth-child(3), .Leaderboard th:nth-child(3) { width: 40%; }
.Leaderboard td:nth-child(4), .Leaderboard th:nth-child(4) { width: 40%; }
.Leaderboard tr:nth-child(1) td:nth-child(1), .Leaderboard tr:nth-child(2) td:nth-child(1), .Leaderboard tr:nth-child(3) td:nth-child(1) { background-color: #f0f0f0; }
h5 { background-color: #fff; float: left; }