/* main home */
.header-panel { background-color: #689f38; height: 140px; position: relative; z-index: 3; }
.header-panel div { position: relative; height: 100%; }
.header-panel h1 { color: #FFF; font-size: 20px; font-weight: 400; position: absolute; bottom: 10px; padding-left: 35px; }
.header-panel img {margin-top:30px;width:180px}

.xmenu {width:305px;float:left}
.xbody {margin-left:310px;}

.menu { padding: 0 0 0 5px; margin: 0; min-height:900px; }
.menu, .menu * { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.menu ul { padding: 0; margin: 5px; }
.menu ul li { list-style: none; padding: 0px; font-size: 15px; font-weight: normal; cursor: pointer; }
.menu ul li.active { background-color: #dedede; position: relative; }
.menu ul li a { color: rgb(51, 51, 51); text-decoration: none; }
.menu ul.nav a:hover { color: brown !important; }

.pages { position: absolute; top: 0; left: 310px; right: 0; z-index: 4; padding: 0; overflow: auto; }
.pages > div { padding: 0 5px; padding-top: 64px; }
.pages .header { color: rgb(82, 101, 162); font-size: 24px; font-weight: normal; margin-top: 5px; margin-bottom: 15px; letter-spacing: 1.20000004768372px; }
.page { transform: translateY(1080px); transition: transform 0 linear; display: none; opacity: 0; font-size: 16px; }
.page.active { transform: translateY(0px); transition: all 0.3s ease-out; display: block; opacity: 1; }

#source-modal h4 { color: black; }

.minhgt700 {min-height:700px}
.minhgt600 {min-height:600px}
.minhgt300 {min-height:300px}

/* common */
.liz { font-family: "ElizabethSerif",Georgia,serif; font-weight: 500; font-size: 17px; line-height: 32px; }
.bdr {border:solid 1px red}
.clear {clear:both}
.fl {float:left}
.fr {float:right}
.top15 {top:15px}
.top20 {top:20px}
.top25 {top:25px}
.top30 {top:30px}
.spc15 {margin-left: 15px;}
.spc20 {margin-left: 20px;}
.wid400 {width:400px}
.mt5 {margin-top:5px}
.mt100 {margin-top:100px}
.mt200 {margin-top:200px}
.ml15 {margin-left:15px}
.mln35 {margin-left:-35px}
.widPagerBtn {min-width:85px}
.vctr {vertical-align: middle}
.line {height:1px;background:#717171;border-bottom:1px solid lightblue;width:100%}

/* Tip */
.qaqst { min-height: 200px; overflow:auto}
.qatip { min-height: 350px; overflow:auto}
.qaans { min-height: 150px; overflow:auto}
.freetxt { min-height: 700px; overflow:auto}
.codebox { background-color: #CCFFCC; margin-bottom: 10px; border: 1px solid #d4d4d4; font-size: 110%; overflow: hidden; }



/* Hide v-scroll & show h-scroll when needed: merged to shCore.css
.syntaxhighlighter { overflow-y: hidden !important; overflow-x: auto !important; }
*/

/* Quiz */
.qzqst { min-height: 300px}
.qztip { min-height: 200px}
.qzans { min-height: 50px}
.qzshowbtn {width:160px !important}
.qz .qzq {color:#110fef; margin-bottom: 15px;}
.qzline span { margin-left: 12px; }
.qztbwid {width: 600px; max-width: 600px;}

.qzcard {width:300px; height:300px}
.qzcard img {width:300px; height:150px}
.qzcard .qzpadding {background-color:aquamarine; padding:10px;}

.qzone {margin:15px}
.testanswer { margin: 10px 0px 10px 15px; }
.testanswer label.correct {color:green}
.testanswer span.correct { margin-left: 10px;color:green }
.testanswer label.wrong {color:red}
.testanswer span.wrong { margin-left: 10px;color:red }
#scoreLabel {padding:30px 8px 0px 0px;height: 120px;}
#scoreGauge {width:280px; height: 140px;}

/* Right Pane */
.rightpane {padding:15px;min-height:700px}
.rightcontent img {max-width:100%;display:block;margin-left:auto;margin-right:auto}

/* Tools */
.toolitem {height:320px;padding:10px}
.toolitem .toolimg {float:left;margin-right:10px;height:100%}
.toolitem img {width:300px;height:250px}
.toolitem .tooldesc {float:left;height:100%;padding:15px;}
.toolitem .tooldesc h4 {color:brown;font-weight:800}
.toolitem .tooldesc a {margin-left:20px}

.guidht {min-height:550px}
.bigtxt {font-size:xx-large; font-weight:bold;margin-top:20px;margin-bottom:20px;width:800px;text-align:center}
.others li span {color:darkblue;}