#main_cont {
   height: 945px;
    width: 950px;
    border: 1px solid gray;
    position: relative;
}

body {
    margin: 0px;
    font-family:'Arial';
    cursor: default;
}

#container {
    position: relative;
    width: 100%;
    background-color: #dcdcdc;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 570px;
    top: 30px;
}


.top_cont {
    background-color: #dddddd;
    height:25px;
    
}
.graphContainer
{
    background-color: #666666;
    height:510px;
    border-bottom: 1px solid #2b2828;
}

#container2 {
     position: relative;
    display: block;
    width: 250px;
    vertical-align: top;
    margin-left: 141px;
    height: 20px;
    margin-top: 9px;
}



.opt_val {
    position: absolute;
    top: 0px;
    font-family: 'arial' !important;
    left: 0px;
    width: 156px;
    height: 16px;
    padding-top: 3px;
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    
}
.opt_drop {
    
    position: absolute;
    cursor: default;
    display: none;
    z-index: -1;
    max-height: 173px;
    overflow-y: scroll;
  
}
.arw {
    position: relative;
    left: 10px;
    width: 9px;
    height: 5px;
    background-image: url(../images/arw.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
    display: inline-block;
}

.opt_list_1 {
    width: 200px;
    height: 127px;
    background-color: #fff;
    position: absolute;
    top: 21px;
    left: 255px;
    line-height: 1.7;
    display: none;
    z-index: 100;
    cursor: default;
    overflow-y: scroll;
    font-size: 14px;
    
}

.option {
    line-height: 1.8;
    background-color: #ffffff;
    height:25px;
}
table{
		text-align: center;
		width: 515px;
        padding-top:5px;
		height: 450px;
        margin: 3px 0px 0px 3px;
}


.start_field
{
position:absolute;
top:32px;
font-size: 12px;
width:100%;
left:0px;
color:white;
z-index:1000;	
border-bottom:1px solid #999;

}


.select:hover{

background-color: #b2b2b2;
}




#drop_down {
    width: 75px;
    position: relative;
    height: 17px;
    border-radius: 4px;
    font-size: 13px;
    background-color: #444;
    border: 1px black solid;
    display: inline-block;
}

#drop_down:hover{
background-color: #999999;
}
/*


.dropdown-content {
    display: none;
    position: absolute;
    font-size: 13px;
    background-color: white;
    overflow: auto;
    z-index: 1;
    top: 18px;
    width: 75px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content .source,.dropdown-content .bg {
    color: black;
    padding: 4px 0px;
    font-size: 12px;
    display: block;
}
.dropdown-content .source:hover,
.dropdown-content .bg:hover {
    background-color: #cedbef;
}
*/

.selectedItem {
    width: 75px;
    height: 17px;
    border-radius: 4px;
    background-image: url('../images/bg_img1.png');
    background-repeat: repeat-x;
}

.headr {
    width: 120px;
    height: 18px;
    background: url('../images/bg_img1.png') repeat-x;
    background-color: #444;
    border-bottom: 1px solid black;
}



.bg_table {
    border: 1px solid white;
    width: 120px;
    height: 158px;
    position: relative;
    margin-top: 15px;
    display: inline-block;
}

.selectedItem1 {
    width: 125px;
    height: 17px;
}


.drop_txt {
    width: 48px;
    position: relative;
    height: 100%;
/*    background: red;*/
    display: inline-block;
    padding: 1px;
    padding-left: 6px;
}

.opt
{
    
 width:182px !important;   
}
#opt_1_1,.opt
{
    position: absolute;
    left: 254px;
    width: 90px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #b7babc;
/*    background-image: url(../images/drop_bg.png);*/
/*    background-color: #c8c8c8;*/
    z-index: 1002;
    background-repeat: repeat-x;
    background: -moz-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #e8e8e8), color-stop(49%, #f6f6f6), color-stop(52%, #e3e3e3), color-stop(100%, #e3e3e3));
    background: -webkit-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: -o-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: -ms-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: linear-gradient(to bottom, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #959595 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#e3e3e3', GradientType=0 );
}
#opt_1_2,.opt
{
    position: absolute;
    left: 254px;
    width: 90px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #b7babc;
    background-image: url(../images/drop_bg.png);
    background-color: #c8c8c8;
    z-index: 1002;
    background-repeat: repeat-x;
    background: -moz-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #e8e8e8), color-stop(49%, #f6f6f6), color-stop(52%, #e3e3e3), color-stop(100%, #e3e3e3));
    background: -webkit-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: -o-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: -ms-linear-gradient(top, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #e3e3e3 100%);
    background: linear-gradient(to bottom, #e8e8e8 0%, #f6f6f6 49%, #e3e3e3 52%, #959595 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#e3e3e3', GradientType=0 );
}
#opt_2_1
{
       position: absolute;
    top: 463px;
    left: 198px;
    width: 90px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #b7babc;
	background-image: url(../images/drop_bg.png);
    background-color: #c8c8c8;
	
    z-index:1002;
    background-repeat: repeat-x;
}

#opt_3_1
{
       position: absolute;
    top: 463px;
    left: 318px;
    width: 90px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #b7babc;
	background-image: url(../images/drop_bg.png);
    background-color: #c8c8c8;
    z-index:1002;
    background-repeat: repeat-x;
}
#opt_4_1
{
       position: absolute;
    top: 463px;
    left: 428px;
    width: 90px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #b7babc;
	background-image: url(../images/drop_bg.png);
    background-color: #c8c8c8;
    z-index:1002;
    background-repeat: repeat-x;
}
/*
#opt:hover,#opt_val:hover,#opt_drop:hover
{
    background-color: #c8c8c8;
    background-image: transparent;
}
*/
select > option:hover {
    background-color:yellow;
}/*
.option:hover{
background-color:#cedbef !important;

}*/

.outclass
{
border-left: 0px solid #666666;
background:#b7babc;
}


#select1
{
left:100px;

}

select
{
/*    background: #b2b2b2;*/
    background: #DCDCDC;
    width: 168px;
    height: 21px;
    font-size: 12px;
    border-radius: 4px;
    color: #000;
    z-index: -1;
}

.opt_Title {
        float: left;
    color: white;
    text-align: center;
    width: 380px;
    
}

.table_Title {
    height:33px;
    background-color: #DCDCDC;
    font-weight: 500;
    border-bottom: 1px solid #9a9898;
}

h4 {
    margin:0px;
    padding:9px;
}

.row_1 {
    height: 32px;
    background-color: #BBFCCD;
    border: 1px solid black;
    margin-bottom: 8px;
}

.row_Title {
    font-weight: bold;
    padding: 8px;
    width: 83px;
    display: inline-block;
    float: left;
}

.start {
    float: left;
    width: 240px;
    display: inline-block;
    padding: 7px;
    font-size: 14px;
    
}

.stop {
    float: left;
    width: 240px;
    display: inline-block;
    padding:7px;
        font-size: 14px;
}

.rotation
{
    width: 120px;
    display: inline-block;
    padding: 7px;
    font-size: 14px;
}
input[type="text"] {
    width: 85px;
    text-indent: 3px;
}
.table_Body {
    height: 335px;
    overflow-y: scroll;
}

#verticalruler {
    background-color: #BBCCDD;
    width: 8px;
    height: 494px;
    position: absolute;
    top: 50px;
    left: 47px;
}

#horizontalruler {
    background-color: #BBCCDD;
    width: 7px;
    height: 695px;
    position: absolute;
    top: 200px;
    left: 391px;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}


.graphImage {
    background-color: #666666;
    height:470px;
/*    border-bottom: 1px solid #2b2828;*/
}

.bottomCont {
       height: 40px;
    background-color: #666666;
}

.previous {
   width: 80px;
    height: 15px;
    background-color: #e7e7e7;
    padding: 5px;
    position: relative;
    top: 7px;
    left: 25px;
    display: inline-block;
    cursor: default;
    border: 1px solid black;
    border-radius: 3px;
    cursor: pointer;
}

.next {
   height: 15px;
    background-color: #e7e7e7;
    padding: 5px;
    position: relative;
    top: 7px;
    left: 755px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 6px;
    cursor: default;
    z-index: 100;
    display: inline-block;
    border: 1px solid black;
    border-radius: 3px;
    cursor: pointer;
}

.graph2 {
    display: block;
    top: 60px;
    position: relative;
    left: 2px;
}

#graphContainer_2{
/*    display: none;*/
   opacity:0;
/*    z-index: -1;*/
}
#graphContainer_3 {
    opacity: 0;
}

#graphContainer_1 {
    display: block;
}

.green {
    color: #00ff00;
}

.formula {
    float: right;
    position: relative;
    right: 165px;
    top: 0px;
}

.white {
    color: white;
}

.graphImage1 {
    background-color: #666666;
    height:460px;
    width: 950px;
  
}

.opt1 {
    padding: 1px 47px 2px 5px;
    width: 114px;
    position: relative;
}

.graph3 {
    display: block;
    top: 10px;
    position: relative;
    left: 0px;
}

#container3 {
     position: relative;
    margin-left: 216px;
    margin-top: 5px;
}

.graphImage2 {
    height: 478px;
}

.table_Title1 {
   
    height:40px;
    background-color: #DCDCDC;
    font-weight: 500;
    border-bottom: 1px solid #9a9898;

}

.controw_1 {
    height: 32px;
    background-color: #BBFCCD;
    border: 1px solid black;
    margin-top: 15px;
}

.controw_2 {
    height: 32px;
    background-color: #FF9494;
    border: 1px solid black;
    margin-top: 3px;
}

.controw_3 {
    height: 40px;
    background-color: #A6E9FA;
    border: 1px solid black;
    margin-top: 3px;
    padding-top: 5px;
}

.whiteRow {
        height: 5px;
    background-color: #fff;
    margin-bottom: 8px;
    margin-top: 3px;
}

.magnitude {
    width: 175px;
    height: 20px;
    background-color: #dacaca ;
    color: black;
    padding: 2px;
    margin-left: 5px;
    margin-top: 3px;
    border: 1px solid black;
    border-radius: 2px;
    display: inline-block;
    cursor: default;
}
.magnitude:hover,.equalhover
{
    background-color: #AEA1A1;
}

.calcMagnitude {
    width: 391px;
    color: black;
    font-weight: 700;
    margin-left: 15px;
    
}

.equal {
   width: 48px;
    background-color: #dacaca;
    padding: 3px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid black;
}

.ansMagnitude {
    color: black;
    font-weight: 700;
    display: none;
    margin-left: 25px;
}

.distance {
    width: 175px;
    height: 20px;
    background-color: #dacaca ;
    color: black;
    padding: 2px;
    margin-left: 5px;
    margin-top: 3px;
    border: 1px solid black;
    border-radius: 2px;
    display: none;
    cursor: default;
}

.calcDistance {
    width: 391px;
    color: black;
    font-weight: 700;
    display: none;
    margin-left: 15px;
}

.ansDistance {
     color: black;
    font-weight: 700;
   margin-left: 25px;
}

.velocity {
    width: 85px;
    border: 1px solid #a9a9a9;
    background-color: white;
    display: inline-block;
    height: 21px;
    position: relative;
    color: black;
    text-indent: 3px;
/*    top: 5px;*/
}

.km {
    display: inline-block;
    width: 50px;
    padding: 7px;
    font-size: 14px;
}

.equals {
    width: 48px;
    background-color: #dacaca;
    display: none;
    padding: 3px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid black;
    cursor: default;
}

#calcMagnitude_1 {
   display: none;
}

#equal_1,#equal_2,#equal_3 {
    display: none;
}

#calcMagnitude_2 {
    display: none;
}

#calcMagnitude_3 {
    display: none;
}

#ansDistance_2 {
    display: none;
}

#ansDistance_3 {
    display: none;
}

#ansDistance_1 {
    display: none;
}

#equals_3 {
    
}

.soln {
    display: inline-block;
}

.mathml {
    display: inline-block;
}
.yaxistitle {
    position: absolute;
    top: 234px;
    left: -13px;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    z-index: 100;
    font-size: 10px;
    color: white;
}
.xaxistitle {
    position: absolute;
    top: 487px;
    left: 457px;
    z-index: 100;
    font-size: 10px;
    color: white;
}
.xaxistitle1 {
      position: absolute;
    top: 491px;
    left: 457px;
    z-index: 100;
    font-size: 10px;
    color: white;
}

.yaxistitle1 {
      position: absolute;
    top: 234px;
    left: -15px;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    z-index: 100;
    font-size: 10px;
    color: white;
}



.drp {
    width:150px;
    display: inline-block;
    vertical-align: middle;
}
.option:hover {
    background-color: #CEDBEF;
}
.select
{
    background-color: #a8c6ee;
}
.hover
{
background:#a6a7a8 !important;
}
.previous:hover,.next:hover
{
    background-color: #a6a7a8;
}

.mathml table {
    width: auto;
    height: auto;
    position: relative;
    top: -29px;
    left: 10px;
    font-size: 11px;
    margin: 0 20px 0 8px;
    border-collapse: collapse;
}

.mathml table tr:nth-child(2) td {
    border-top: 1px solid #000;
}

.opt {
    text-indent: 2px;
}