/*@font-face {
     font-family: 'Pearson_normal';
     src: url('fonts/SourceSansPearsonW041486742.woff') format('woff'), url('fonts/SourceSansPearsonW041486742.ttf') format('truetype') 
}
 @font-face {
     font-family: 'Pearson_bold';
     src: url('fonts/SourceSansPearsonW04Bold.ttf') format('truetype') 
}
 @font-face {
     font-family: 'Pearson_bold_italic';
     src: url('fonts/SourceSansPearsonW041486745.ttf'), format('truetype') 
}*/
 body {
     background-color: #fff;
     margin: 0px;
     overflow: hidden;
     font-family:'Pearson_normal',sans-serif;
     font-size:18px;
}
 #Interactive3D {
     position: relative;
     border: solid 3px Black;
     height: 740px;
     width: 1080px;
     top:0px;
     left:0px;
     background:#ffffff;
}
 .textBox{
     position: absolute;
     Background: #0066A6;
     color: #fff;
     left: 0px;
     top: -2px;
     width: 323px;
     height: 501px;
     border: solid 2px BLACK;
     overflow: auto;
     padding: 0px 10px;
     text-align: left;
     font-size: 28px;
}
 #scene1{
    display:block
}
 #scene2{
    display:none
}
 #scene3{
    display:none
}
 #scene4{
    display:none
}
 #help{
     position: absolute;
     Background: #0066A6;
     color: #fff;
     left: 0px;
     top: -2px;
     width: 1058px;
     height: 501px;
     border: solid 2px BLACK;
     overflow: auto;
     padding: 0px 10px;
     text-align: left;
     font-size: 25px;
     z-index: 1000;
}
 #Text{
     padding: 0px 10px;
     text-align: left;
     font-size: 28px;
}  


 #menu-wrap{
     position: absolute;
     border: solid 2px BLACK;
     width: 1058px;
     bottom: -2px;
     height: 217px;
     padding: 10px;
     background:black;
}
 #dev-wrap{
     position: absolute;
     border: 2px red dashed;
     color: black;
     width: 500px;
     top: 778px;
     left:100px;
     padding: 10px;
}
 .RangeVal{
     width: 500px;
     padding: 10px;
     display:inline;
}
 .overlay{
     position:absolute;
     top:0px;
     z-index:100!important;
}
 .underlay{
     position:absolute;
     top:0px;
     left:0px;
     z-index:1 !important;
     display:none;
}
 #CubeOver {
    left:-1px 
}
 #inbetween, canvas{
     z-index: 50 !important;
}
 #scene3d{
    /* border: black 2px solid; */
    position: absolute;   /*Animated*/
    right: 62px;
    top: 85px; 
 
}
 .MenuButton{
     text-align : center;
     border : 1px solid black;
     width : 150px;
     height : 50px;
     font-size : 28px;
     font-weight : bold;
     background : linear-gradient(to bottom, #ffffff 0%, #f2f2f2 82%, #dcdddf 100%);
}
 #btnHelpClose{
    display:block;
}
 .ImageButton{
     text-align : center;
     border : 1px solid black;
     border-radius:5px;
     width: 100px;
     height: 100px;
     font-size : 11px;
     position: relative;
     top:0px ;
}
hide{
	 color:#0000;
	 padding:0;
	 margin:none;
	 font-size:0px;
 }



 #objBox{
    background: url('img/OBL_3D_Square.png') repeat-x 0 0 #fff;
}
 #objCylinder{
    background: url('img/OBL_3D_Cylinder.png') repeat-x 0 0 #fff;
}
 #objCone{
    background: url('img/OBL_3D_Cone.png') repeat-x 0 0 #fff;
}
 #Pre1-1{
    background: url('img/OBL_01_Triangle.png') repeat-x 0 0 #fff;
}
 #Pre1-2{
    background: url('img/OBL_01_Square.png') repeat-x 0 0 #fff;
}
 #Pre1-3{
    background: url('img/OBL_01_Rectangle.png') repeat-x 0 0 #fff;
}
 #Pre1-4{
    background: url('img/OBL_01_Quadrilateral.png') repeat-x 0 0 #fff;
}
 #Pre1-5{
    background: url('img/OBL_01_Pentagon.png') repeat-x 0 0 #fff;
}
 #Pre1-6{
    background: url('img/OBL_01_Hexagon.png') repeat-x 0 0 #fff;
}
 #Pre2-1{
    background: url('img/OBL_02_Rectangle.png') repeat-x 0 0 #fff;
}
 #Pre2-2{
    background: url('img/OBL_02_Circle.png') repeat-x 0 0 #fff;
}
 #Pre2-3{
    background: url('img/OBL_02_Ellipse.png') repeat-x 0 0 #fff;
}
 #Pre2-4{
    background: url('img/OBL_02_Parabolic.png') repeat-x 0 0 #fff;
}
 #Pre3-1{
    background: url('img/OBL_03_Triangle.png') repeat-x 0 0 #fff;
}
 #Pre3-2{
    background: url('img/OBL_03_Circle.png') repeat-x 0 0 #fff;
}
 #Pre3-3{
    background: url('img/OBL_03_Ellipse.png') repeat-x 0 0 #fff;
}
 #Pre3-4{
    background: url('img/OBL_03_Parabolic.png') repeat-x 0 0 #fff;
}
 #Pre3-5{
    background: url('img/OBL_03_Parabolic2.png') repeat-x 0 0 #fff;
}
 .MenuButton:hover {
     background : #000000;
     color : #ffffff;
     border : 2px solid white;
}
 .MenuButton:focus {
     background : #000000;
     color : #ffffff;
     border : 2px solid white;
}
 #shapeBtn-wrap{
     width:900px;
}
 .buttonOff{
     position:relative;
     top:1px;
     opacity: .25;
     cursor: no-drop;
     background:#fff;
     border-radius:5px;
}
 #btnHelpOpen,#btnHelpClose{
     position: absolute;
     right: 30px;
     bottom: 95px;
}
 #btnHelpReset{
     position: absolute;
     right: 30px;
     bottom: 160px;
}
 #btnTranscript{
     position: absolute;
     right: 30px;
     bottom: 30px;
}