/* CSS Document */
body{ font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0px; background:#CCC; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;}
a{ text-decoration:none; cursor:pointer; color:#000000;}
a:hover{ text-decoration:none; color:#333;}
img{ border:0px;}
.clearBoth{ clear:both;}

/*index page*/
#mainContainer{ width:1024px; /*height:672px;*/ margin:auto; background:url(images/bg.png) #FFF; background-repeat:no-repeat; background-position:center; }
#topBanner{ width:575px; height:100px; margin: 0px auto; padding-top:35px; margin-bottom:25px;}
/*#indexContainer{ margin:0px auto; width:80%; height:410px; overflow:auto; }*/
#footer{/* position:absolute;*/ width:90%; height:40px; /*left:5%; top:620px;*/ padding-top:67px; margin:auto;}
#fContent{ font-size:11px!important; text-align:center; margin-bottom:27px; font-family:Verdana, Geneva, sans-serif;}
#fContent a{ color:#3366cc; text-decoration:underline; margin-left:4px; margin-right:4px;}
#loader{ position:absolute; top:50%; left:50%; display:none; z-index:20; }


/*classes*/

/*index*/
.chapterContainer{ width:600px; height:30px; margin-top:10px; padding:0px;}
.chapBullet{ width:29px; height:28px; background:url(../images/btn-red.png); background-repeat:no-repeat; float:left; margin-right:12px;}
.chapHead{ width:90%; height:18px; float:left; margin-top:4px; font-weight:bold; cursor:pointer; font-size:13px; font-family:arial;}
.chapHead:hover{color:#999;}
.chapHead a{ text-decoration:none; font:arial; font-size:1.3em; font-weight:bold; color:#000000;}
.chapHead a:hover{ text-decoration:none;color:#999;}

/*intropage*/
#introOuter{ background:url(images/bg-intro.png) #fff; background-repeat:no-repeat; background-position:center top; width:1024px; height:667px; margin: 0px auto; overflow:auto; padding-top:5px; cursor:default;}
#introBanner{ width:1005px; height:35px; margin:0px auto;}
.chapterHeading{ height:20px; color:#0072a8; text-transform:uppercase; font-family:"Times New Roman", Times, serif; float:left; font-size:14px; font-weight:bold;}
#chapNum{ margin-left:5px;}


.chapterTitle{ width:650px; height:50px; font-family:"Times New Roman", Times, serif; font-size:28px; float:left; margin-top:8px; clear:left; color:#8c4aa1;}
#topButtons{ width:80px; height:27px; border:solid 3px #0072a8; float:right; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; padding-left:5px;}

/*#contentScroll{width:98%; height:510px; margin:auto; overflow:auto; margin-top:0px; border:1px solid;}*/
#dyk{ width:920px; min-height:187px; margin:0px auto; border:2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background:#dfdfdf;  }

#dykHead{ width:93%; height:27px; padding-top:13px; padding-left:7%; background: #8c4aa1; float:left; color:#FFF; text-transform:uppercase; -webkit-border-top-left-radius:15px; -moz-border-top-left-radius:15px; border-top-left-radius:15px; -webkit-border-top-right-radius:15px; -moz-border-top-right-radius:15px; border-top-right-radius:15px;}

#vertiLine{ height:30px; float:left; border: solid 1px #0072a8; margin-left:5px; margin-right:3px;}
#bulb{ margin-top:-35px; margin-left:1%;} 
#dyk b{ width:300px; height:20px; font-weight:bold; color:#8c4aa1; font-size:15px; margin-top:10px;}
#dykText{ width:95%; min-height:150px; overflow:auto;  padding-left:28px; font-size:12px!important;}



.buttonText{ width:90%; color:#0072a8; font-size:13px; text-transform:uppercase; float:left; font-weight:bold; padding:3px; margin-top:3px; text-align:center;}
.buttonText:hover{opacity:.7;}
.buttonText a{ color:#0072a8;}
.buttonText a:hover{ text-decoration:underline;}

.contentArea{ width:93%; min-height:150px; margin:0px auto; margin-top:2px; padding:2px 2px 5px 2px;}
.blueHeading{ font-size:16px; color:#0072a8; text-transform:uppercase; font-weight:bold;}
.pageContent{ line-height:17px; margin-bottom:25px; font-size:12px;}

p{ padding-bottom:2px; }
.levelBox{ width:96%; margin:0px auto; min-height:150px; margin-top:30px; overflow:auto;}
.levelcount{ font-size:20px; color:#0072a8; width:600px; height:0px; margin-left:15px; margin-top:10px; font-weight:bold;}
.lBoxLeft{ width:263px; height:103px; margin-top:10px; background:url(../images/levelBg.png); background-repeat:no-repeat; background-position:top; background-position:right; text-align:left; /*cursor:pointer;*/}

.thinkBrain{ width:100px; height:99px; float:left; margin-top:2px; background:url(../images/thinking-brain.png); background-repeat:no-repeat;}
.levelheadBox{  width:90px; height:15px; margin-left:35px; margin-top:2px; color:#FFF; font-size:16px; /*border:1px solid;*/ }
.levelBoxLink{  width:155px; height:auto; margin-top:15px; margin-left:-7px; font-size:15px; text-align:center; text-transform:capitalize; /*border:1px solid;*/ }
.levelBoxLink a{ text-decoration:none; color:#000;}
.levelBoxLink a:hover{ text-decoration:underline;}
.levelBoxRight{float:right; width:150px; height:84px; margin-top:9px;/* border:1px solid;*/ margin-right:10px;}

/*scoreboard*/
/*#wrapper{ position:absolute; width:100%; background:#466871; left:0px; top:0px; opacity:.5; z-index:5; display:none;}*/
#sequencingPage{ top:3%; left:0px; background:url(images/bg-intro.png) #FFF; background-position:center; background-repeat:no-repeat; width:718px; height:590px; border:2px solid #333; z-index:6; -webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px; cursor:default; display:block;}

#scoreTopBanner{ height:46px; background:#8c4aa1; -webkit-border-top-left-radius:.6em; -webkit-border-top-right-radius:.6em; -moz-border-top-left-radius:.6em; -moz-border-top-right-radius:.6em; border-top-left-radius:.6em; border-top-right-radius:.6em;}
#scoreBannerLeft{ float:left; margin-left:8px; }
#scoreLogo{float:left; height:42px; width:42px; margin-top:2px;}
#scoreLogoText{ float:left; margin-left:15px; margin-top:5px; font-family:"Times New Roman", Times, serif; font-size:28px; color:#FFF;}
#scoreBannerRight{ float:right; margin-top:4px; cursor:pointer;}
#scoreDIcon{ float:left; margin-right:4px;}
#scoreDIText{ float:left; width:80px; margin-top:3px; color:#FFF}
#scoreBodyText{ width:680px; height:30px; margin:0px auto; margin-top:2px; background:#f1f1f1; padding: 5px 12px 5px 12px; border: solid 1px #e3e3e3;}
#scoreBoxOuter{ width:712px; margin:0px auto; }
#scoreBoxLeft{ width:510px;  background:#fcfcfc; border:2px solid #e3e3e3; margin-top:7px; float:left; height:338px;}
#scoreBoxRight{ width:193px;  background:#fcfcfc; border: solid 2px #e3e3e3; margin-top:7px; float:left; padding-top:6px; height:332px;}

.scoreSeqContainer{ float:left; margin-left:46px; margin-top:59px; }
#rightSlot{ margin-left:90px;}
.scoreSeq1{ width:171px; height:22px; margin-bottom:7px; border: solid 2px #8c4aa1; -webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px; text-align:left; padding-top:6px;  color:#900; font-weight:bold;}

.scoreSeqNo{ width:20px; text-align:center; float:left; margin-left:4px;}
.scoreSeqDrag{ width:140px; float:left; margin-left:3px;}
#allActivities{ width:90%; height:500px; border:1px solid;}

.scoreAns{ width:186px; margin:auto; height:23px; margin-bottom:4px; -webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px; background:#0072a8; padding-top:3px; color:#FFF;  cursor:pointer;}

.dragableText{width:123px; height:18px; font-weight:bold; text-align:left; float:left; margin-left:20px; overflow:hidden;}
.dragableText:hover{width:146px; height:auto; overflow:visible; }
.hiddenText{ display:none;}

#scoreArea{ width:712px; height:140px; margin: 0px auto; clear:both;}
#scoreNavi{ margin-top:5px;}
#scorePrev{ float:left;}
#scoreMoreOption{ float:left;  margin-left:50px; margin-top:2px;}
#scoreNext{ float:right; margin-left:5px;}
#submit-reset{ width:229px; margin: 0px auto; overflow:auto; float:right;}

.submit-reset{ float:right; width:59px; text-align:center; padding:5px; margin-right:10px; border: solid 2px #8c4aa1; -webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px; margin-top:5px; color:#3f829c; font-weight:bold; }
.submit-reset:hover{background:#8c4aa1; color:#FFF; cursor:pointer;}
/*.submit-reset a{ color:#0072a8;}
.submit-reset a:hover{ color:#FFF;}*/
#finalScore{ float:left; width:140px; height:90px; background:#f8f8f8; border: solid 1px #e3e3e3; margin-left:3px; padding-left:10px; margin-top:30px; float:left;}
#finalScore div{ margin-bottom:6px;}
#scoreBoxHead{ font-weight:bold; color:#323232; font-size:14px;}
#pageNavi{ margin:0px auto; width:255px; height:40px; margin-top:100px; float:right;}
#pageNavi div{float:left; margin-right:5px;}
#pageNavi div a{ color:#0072a8;}
#pageNavi #linkText{ margin-top:12px; color:#317697;}


/*part Puzzler*/
#partPuzzlerMainBox{ width:700px; height:338px; margin:auto; background:#fcfcfc; border:2px solid #e3e3e3; margin-top:7px; margin-left:4px; float:left; overflow:auto;}
.partBox{ width:640px; height:30px; margin:auto; background:#D4D4D4; margin-top:8px;}
.wordBox{ width:250px; height:24px; padding-top:3px; border:1px solid; margin-left:50px; float:left;}
.slash{ width:150px; height:24px; padding-top:3px; border:1px solid; margin-right:80px; float:right;}
/*part Puzzler*/

/*writeit image*/
#writeitImageBox{ width:400px; height:330px; margin:auto; background:#fcfcfc; border:2px solid #e3e3e3; margin-top:2px; }

/*writeit image*/

/*image analysis*/
#partPuzzlerMainBox{ width:700px; height:338px; margin:auto; background:#fcfcfc; border:2px solid #e3e3e3; margin-top:7px; margin-left:4px; float:left; overflow:auto;}
.floatLeft{float:left;  margin-left:80px;}
.floatRight{float:right;  margin-right:80px;}