/*
	Company: Mathtutor Educational Software
	Description: This file holds the CSS styles used for testing the JS Mathtutor Programs.
*/

#container {
	width:1000px;
	height:100%;
}

#canvas0 {
	position:absolute;
	left:147px;
	z-index:-1;
	top:36px;
	/*width:672px;*/
	/*height:10px;*/
	/*background-color:#FCFFD6;*/
	/*background-color:#0000FF;*/
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(left, #FFFFFF 0%, #E1F2FB 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(left, #FFFFFF 0%, #E1F2FB 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(left, #FFFFFF 0%, #E1F2FB 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #E1F2FB));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #E1F2FB 100%);
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to right, #FFFFFF 0%, #E1F2FB 100%);
	border-top:3px inset #0000d3;
	border-left:3px inset #0000d3;
	border-right:3px inset #0000d3;
}

#canvas1 {
	position:absolute;
	left:147px;
	z-index:0;
	top:44px;
	/*width:672px;*/
	/*height:575px;*/
	/*background-color:#FCFFD6;*/
	/*background-color:#0000FF;*/
   /*background: -webkit-linear-gradient(#FFFFFF, #C6E7F7);*/
   background: -webkit-linear-gradient(135deg,#C6E7F7,#FFFFFF);
   background: -moz-linear-gradient(135deg,#C6E7F7,#FFFFFF);
   /*background: linear-gradient(to bottom right, "#FFFFFF", "#000000");*/
	border-left:3px inset #0000d3;
	border-right:3px inset #0000d3;
	border-bottom:3px inset #0000d3;
}

#canvas2 {
	position:absolute;
	/*width:110px;*/
	/*height:585px;*/
	top:36px;
	left:741px;
	z-index:0;
	background-color:#d1d6eb;
	border-top:3px solid #0000d3;
	/*border-left:3px solid #0000d3;*/
	border-right:3px solid #0000d3;
}

#canvas3 {
	position:absolute;
	top:473px;
	left:175px;
	z-index:1;
	background-color:#ffffff;
	/*border:2px inset #ffffff;*/
   border:2px inset #c0c0c0;
}

#canvas4 {
	position:absolute;
	/*width:110px;*/
	/*height:585px;*/
	top:36px;
	left:34px;
	z-index:0;
	/*background-color:#FDFDFD;*/
	background-color:#d1d6eb;
	border-top:3px solid #0000d3;
	border-left:3px solid #0000d3;
	/*border-right:3px solid #0000d3;*/
}

#canvas5 {
	position:absolute;
	/*width:898px;*/
	/*height:100px;*/
	top:573px;
	left:34px;
	z-index:0;
	/*background-color:#FDFDFD;*/
	background-color:#a5bfdc;
	border-bottom:3px solid #0000d3;
	border-left:3px solid #0000d3;
	border-right:3px solid #0000d3;
}

#canvasTest {
	position:absolute;
	left:350px;
	z-index:0;
	top:200px;
	/*width:300px;*/
	/*height:300px;*/
	background-color:#FFFFFF;
	border:3px outset #FF0000;
}

#imgCanvas_1 {
	position:absolute;
	z-index:1;
}

#imgCanvas_2 {
	position:absolute;
	z-index:1;
}

#miscCanvas1 {
	position:absolute;
	z-index:1;
}

#picGraph2D1, #picGraph2D2, #picGraph2D3, #picGraph2D4, #picGraph2D5  {
	position:absolute;
	z-index:1;
}

#lcScreen {
	background-color:#FF0000;
	color:#FFFFFF;
	font:bold 16px Arial;
	border:2px inset #FFFFFF;
	position:absolute;
	height:85px;
	width:90px;
	top:44px;
	left:750px;
	z-index:1;
	text-align:center;
}

#lcChooseScreenTop {
	/*background-color:#d1d6eb;*/
	background-color:#a5bfdc;
	position:absolute;
	height:14px;
	width:200px;
	top:579px;
	left:175px;
	z-index:2;
	text-align:center;
	font:bold 14px Arial;
	color:#0000FF;
	cursor:default;
}

#lcChooseScreen {
	/*background-color:#d1d6eb;*/
	background-color:#a5bfdc;
	border:3px solid #0000FF;
	position:absolute;
	height:36px;
	width:247px;
	top:596px;
	left:147px;
	z-index:1;
	text-align:center;
}

#lcChooseScreen ul {
	width:275px;
	height:100%;
	margin: 0 auto;
	padding:0px;
	text-align:center;
}

#lcChooseScreen ul li {
	border:3px solid #FF0000;
	text-align:center;
	font:bold 18px Arial;
	line-height: 0.75;
	margin-top:4px;
	/*margin: 12px 10px;*/ /* top and bottom are 0px, right and left are 10px */
	list-style:none;
	cursor:default;
	height:22px;
	width:19px;
	float:left;
	z-index:3;
}

#lcChooseScreen ul li.margin-1 {
	margin-left:10px;
}

#lcChooseScreen ul li.margin-2 {
	margin-left:10px;
}

#lcChooseScreen ul li.margin-3 {
	margin-left:10px;
}

#lcChooseScreen ul li.margin-4 {
	margin-left:10px;
}

#lcChooseScreen ul li.margin-5 {
	margin-left:9px;
}

#lcChooseScreen ul li.margin-6 {
	margin-left:8px;
}

#lcChooseScreen ul li.margin-7 {
	margin-left:6px;
}

#lcChooseScreen ul li.margin-8 {
	margin-left:5px;
}

#lcChooseScreen ul li.margin-9 {
	margin-left:2px;
}

#lcChooseScreen ul li div {
	position:absolute;
	top:12px;
	margin-left:5px;
}

#lcChooseScreen ul li:first-child {margin-left:70px;}

.lcChooseScreenS {
	background-color:#FF0000;
	color:#FFFFFF;
}

.lcChooseScreenNS {
	background-color:#FFFFFF;
	color:#FF0000;
}

#ConceptContinue {
	background-color:#293184;
	border:3px outset #FFFFFF;
	color:#cef3fb;
	font:bold 14px Arial;
	position:absolute;
	top:590px;
	left:426px;
	z-index:1;
	height:50px;
	width:120px;
}

#ExampleContinue, #ExplanationContinue, #lessonTestExplanationContinue, #unitTestExplanationContinue {
	background-color:#293184;
	border:3px outset #FFFFFF;
	color:#cef3fb;
	font:bold 14px Arial;
	position:absolute;
	top:590px;
	left:385px;
	z-index:1;
	height:50px;
	width:120px;
}

#beginExample, #beginExplanation, #beginLessonTestExplanation, #beginUnitTestExplanation {
	background-color:#293184;
	border:3px outset #FFFFFF;
	color:#cef3fb;
	font:bold 14px Arial;
	position:absolute;
	top:590px;
	left:205px;
	z-index:1;
	height:50px;
	width:120px;
}

#endExample, #endExplanation, #endLessonTestExplanation, #endUnitTestExplanation {
	background-color:#293184;
	border:3px outset #FFFFFF;
	color:#cef3fb;
	font:bold 14px Arial;
	position:absolute;
	top:590px;
	left:565px;
	z-index:1;
	height:50px;
	width:120px;
}

#returnToMenu {
	background-color:#ffc1c1;
	border:3px outset #FFFFFF;
	color:#000000;
	font:bold 14px Arial;
	position:absolute;
	top:574px;
	left:752px;
	z-index:1;
	height:65px;
	width:90px;
}

#showRules {
	background-color:#ffc1c1;
	border:3px outset #FFFFFF;
	color:#000000;
	font:bold 10pt Arial;
	position:absolute;
	top:500px;
	left:48px;
	z-index:1;
	height:85px;
	width:90px;
   display:none;
}

#divRulesScrollBox {
	background-color:#ffffbd;
	border:2px outset #CCCCCC;
	position:absolute;
	top:200px;
	left:460px;
	z-index:1;
	height:266px;
	width:234px;
   overflow:scroll;
   overflow-x: hidden;
   display:none; 
 }

#ConceptContinue:active,#ExampleContinue:active,#ExplanationContinue:active,#returnToMenu:active,#beginExplanation:active,#endExplanation:active,#beginExample:active,#endExample:active,#endTestExplanation:active,#beginTestExplanation:active,#testExplanationContinue:active
{border:3px inset #FFFFFF;}

#animationSpeedTop {
	background-color:#FDFDFD;
	/*background-color:#d1d6eb;*/
	position:absolute;
	height:15px;
	width:60px;
	top:420px;
	left:65px;
	z-index:2;
	text-align:center;
	font:bold 12px Arial;
	cursor:default;
}

#animationSpeed {
	background-color:#FDFDFD;
	/*background-color:#d1d6eb;*/
	border:3px ridge #E0E0E0;
	position:absolute;
	height:100px;
	width:70px;
	top:425px;
	left:57px;
	z-index:1;
	text-align:left;
}

#animationSpeed ul {
	width:100%;
	margin:0px;
	padding:0px;
}

#animationSpeed ul li {
	font-size:12px;
	font-family:Arial;
	font-style:normal;
	font-weight:700;
	margin-top:13px;
	list-style:none;
	cursor:default;
}

#canvasA,#canvasB,#canvasC,#canvasD,#canvasE {
	position:absolute;
	background-color:#84ffff;
	border:2px ridge #E0E0E0;
	z-index:1;
}

#canvasA {
	top:391px;
	left:216px;
}

#canvasB {
	top:391px;
	left:472px;
}

#canvasC {
	top:468px;
	left:216px;
}

#canvasD {
	top:468px;
	left:472px;
}

#canvasE {
	top:545px;
	left:216px;
}

#answerA,#answerB,#answerC,#answerD,#answerE {
	position:absolute;
	z-index:2;
	//border:1px solid #FFFF00;
}

#answerA {
	top:396px;
	left:221px;
}

#answerB {
	top:396px;
	left:477px;
}

#answerC {
	top:473px;
	left:221px;
}

#answerD {
	top:473px;
	left:477px;
}

#answerE {
	top:550px;
	left:221px;
}

#table1 {
	position:absolute;
	top:788px;
	left:0px;
}

#table2 {
	position:absolute;
	top:788px;
	left:200px;
	text-align:left;
	z-index:3;
}

.show {display:block;}

.hidden {display:none;}

.showButton {
	display:block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/*width:102px;
	height:102px;*/
	position:absolute;
	left:755px;
}

.activeButton {
	display:block;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/*width:102px;
	height:102px;*/
	position:absolute;
	left:755px;
}

.notActiveButton {display:none;}

#lessonConceptSPic,#lessonConceptNSPic {top:150px;}

#seeExamplesSPic,#seeExamplesNSPic {top:250px;}

#practiceProblemsSPic,#practiceProblemsNSPic {top:350px;}

#lessonTestSPic,#lessonTestNSPic {top:450px;}

.modal {
	background-color:#fff;
	display:none;
	padding:15px;
	text-align:left;
	border:2px solid #333;
	opacity:1.0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-moz-box-shadow: 0 0 50px #ccc;
	-webkit-box-shadow: 0 0 50px #ccc;
}

.modal h2 {
	/*background:url(/media/img/global/info.png) 0 50% no-repeat;*/
	margin:0px;
	padding:10px 0 10px 45px;
	border-bottom:1px solid #333;
	font-size:20px;
}

.box
{
	position:absolute;
	top:833px;
}

.dialogClose
{
	color:black;
	background-color:#ece9d8;
	border:2px outset white;
	font:bold 16px Arial;
}

.dialogClose:active {border:2px inset white;}

.dialogButton
{
	padding: 0;
}

.dialogBG1 {background-color:#ece9d8;}
.dialogBG2 {background-color:#c0c0ff;}
.dialogBG3 {background-color:#c0c0c0;}
.dialogBG4 {background-color:#ffff00;}

.tab {height:270px;}

#overview {width:690px;}
#support {width:400px;}
#about {width:350px;}
#seeAnotherExample
{
	margin-top:150px;
	width:300px;
}
#seeSession {width:600px;}

#seeSession table 
{
	width:100%;
	text-align:center;
	border-spacing:0;
}

#seeSession table tr:first-child
{
	font-weight:700;
}

#seeSession table tr td
{
	padding:0;
}

#answer {width:350px;}

#answer table tr td button {width:130px;}

.correct
{
	font:Bold 24px Arial;
	color:green;
}

.incorrect
{
	font:Bold 24px Arial;
	color:red;
}

#testResults
{
	width:550px;
	text-align: center;
}

#testResults font:first-child 
{width:300px;}

#resultContainer
{
	text-align: center;
	width:450px;
	margin-top:20px;
	margin-bottom:10px;
	margin-left:50px;
}

#resultTable,#resultTableHeader
{
	text-align: center;
}

#resultTableFooter
{
	text-align: left;
	font:18px Arial;
}

#resultTable
{
	border: 2px inset #000000;
	background-color:white;
	color:black;
	font:18px Arial;
	width:100%;
}

#resultTable td,#resultTableHeader td,#resultTableFooter td
{
	width:18%;
}

#resultTable td:last-child,#resultTableHeader td:last-child,#resultTableFooter td:last-child
{
	width:28%;
}

#resultTable button {
	color:black;
	font:bold 12px Arial;
	width:120px;
}

#hiddenOverlay {
	width:100%;
	height:100%; 
	z-index:100;
	top:0; 
	left:0; 
	position:fixed; 
	background-color:transparent;
	cursor:wait;
}

#labelCanvas1, #labelCanvas2, #labelCanvas3 {
	position: absolute;
	z-index: 2;
	border: 2px ridge #C0C0C0;
}

.list {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 100%;
  line-height: 100%;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  box-shadow: 2px 2px 3px #7A7A7A;
  -webkit-box-shadow: 2px 2px 3px #7A7A7A;
  -moz-box-shadow: 2px 2px 3px #7A7A7A;
  background: #DEEBFF;
  border: solid 1px #6D6D6D;
  position:relative;
  z-index:900;
}
.list li {
  margin: 0px 0px 6px 0px;
  padding: 0px 6px 0px 6px;
  //float: left;
  position: relative;
  list-style: none;
}
.list a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 6px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-shadow: 2px 2px 3px #FFFFFF;
}
.list li ul li a {
  margin: 0;
}
.list .active a, .list li:hover > a {
  background: #0399D4;
  color: #000000;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
.list ul li:hover a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
.list ul a:hover {
  background: #0399D4 !important;
  background: linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 3px #FFFFFF;
}
.list ul {
  background: #DEEBFF;
  display: none;
  margin: 0;
  padding: 0;
  //width: 300px;
  position: absolute;
  top: 34px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
.list li:hover > ul {
  display: block;
}
.list ul li {
  float: none;
  margin: 0;
  padding: 0;
}
.list ul a {
  padding:10px 0px 10px 15px;
  color:#FFFFFF !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #000000;
}
.list ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
.list ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
.list:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.list {
  display: inline-block;
}
  html[xmlns] .list {
  display: block;
}

// body { background-image: url(http://subtlepatterns.com/patterns/ricepaper.png) }

#startButton {
	position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(31,205,5,1);
    font-family: 'Arial';
    //font-weight: 600;
    font-size: 16pt;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(15,120,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(15,120,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(15,120,5,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 10px auto;
	width: 160px;
	text-align: center;
	
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

#startButton:active {
    -webkit-box-shadow: 0px 3px 0px rgba(15,120,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(15,120,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(15,120,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}