* { box-sizing: border-box; padding:0; margin:0; }
#section-1{
padding: 10px 16px 1px 50px;

left:20px;
}


.pt_wrapper {
 	  height: 448px;
    left: 15px;
    margin: 30px auto;
    position: relative;
    width: 900px;

} 

.pt_main:after {
 	clear:both;
  content:"";
  display:table;
}
 
.pt_main li {
  border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 0 rgba(255, 255, 255, 0.4) inset;
    cursor: pointer;
    float: left;
    font-size: 18px;
    height: 67px;
    margin: 1px;
    overflow: hidden;
    padding: 35px 12px 0;
	text-align:center;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease-in 0s;
    width: 46px;

}

.pt_main li span {
 
 color: black;
    font-size: 8px;
    left: 3px;
    line-height: 1;
  
    position: absolute;
    text-align: center;
    top: 5px;
    width: 35px;
}

.pt_main .empty {
 	border:none; 
  box-shadow:none;
  cursor:default;
  z-index:-100;
  color:#FFFFFF;
}

.deactivate {
 	opacity:0.5;
  -webkit-filter:grayscale(70%);
  filter:grayscale(70%);
}

.pt_main li:before,
.pt_main li:after {
 	content:attr(data-pos);
  position:absolute;
  top:20px;
  left:5px;
  right:auto;
  width:35px;
  color:black;
  font-size:10px;
  line-height:1;
  text-align:center;
}

.pt_main li:after {
  content:attr(data-nb);
  left:auto;
  right:3px;
  display:none;
}

.pt_main li:hover {
 	transform:scale(1.2);
  z-index:100;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
} 
.pt_main li.active{
 transform:scale(1.2);
  -webkit-transform: scale(1.2);  
      -ms-transform: scale(1.2);  
        
  z-index:100;
  
 
} 
.pt_main .empty:hover {
 	box-shadow:none;
  transform:none;
}

.type-0 { background:#fff; }
.type-1 { background:#99ccff; }
.type-2 { background:#ccff33; }
.type-3 { background:#ffff00; }
/*.type-4 { background:#f3f300; }
.type-5 { background:#3bd93b; }
.type-6 { background:#dd9999; }
.type-7 { background:#4CAFFA; }
.type-8 { background:#ffaa88; }
.type-9 { background:#ddaacc; }*/

.cat-0 { color:#222; }
.cat-1 { color:#0000dc; }
.cat-2 { color:#b10601; }
.cat-3 { color:#555; }

.exp1_btn{
background-image:url('../images/exp_1.png');
width:130px;
height:38px;
  background-repeat: no-repeat;
  margin-right:20px;
    display:inline-block;
   
}
.exp1_btn:hover{
background-image:url('../images/exp_1_hover.png');
width:130px;
height:38px;
  background-repeat: no-repeat;

}
.exp1_active{
background-image:url('../images/exp_1_active.png');
width:130px;
height:38px;
  background-repeat: no-repeat;
   margin-right:20px;
     display:inline-block;
}
.exp2_btn{
background-image:url('../images/exp_2.png');
width:130px;
height:38px;
  background-repeat: no-repeat;
  display:inline-block;
   
}
.exp2_btn:hover{
background-image:url('../images/exp_2_hover.png');
width:130px;
height:38px;
  background-repeat: no-repeat;
   display:inline-block;
}
.exp2_active{
background-image:url('../images/exp_2_active.png');
width:130px;
height:38px;
  background-repeat: no-repeat;
     display:inline-block;
   
}

.groups{
  left: 30px;
    position: relative;
    top: 50px;
    z-index: 200;
}
.periods{
 left: 40px;
    position: absolute;
    top: 180px;
}
.periods_span{
  left: 10px;
    position: absolute;
    top: 300px;

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.lab_btns {
    bottom: 36px;
    left: 300px;
    position: relative;
    text-align: center;
    width: 450px;
}

.red_G_active{
cursor:pointer;
background-image: url("../images/rnd_red.png");

  display: table;
    float: left;
    font-size: 15px;
    height: 21px;
    margin-left: 1px;
    overflow: hidden;
    padding: 0 10px;   
    text-align: center;   
    width: 47px;
	z-index:200;
	user-select:none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
	
}
.red_P_active{
cursor:pointer;
background-image: url("../images/rnd_redP.png");
  font-size: 15px;
    height: 66px;
    margin-bottom: 2px;
    overflow: hidden;
    padding: 20px 0;
    text-align: center;
    width: 21px;
	z-index:200;
	user-select:none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
	
}
a:focus{outline:none;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.title_span{
 position: absolute;
    text-align: center;
    top: 160px;
    width: 1000px;
	left: -54px;
}
.groups_span{
 position: absolute;
    text-align: center;
    top: 220px;
    width: 1000px;
	left: -60px;
}

.prd_nos{
  /*background-color: #4eb857;*/
    font-size: 15px;
    height: 66px;
    margin-bottom: 2px;
    overflow: hidden;
    padding: 20px 0;
    text-align: center;
    width: 20px;
	user-select:none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
	
}
.grp_nos{
 /* background-color: #4eb857;*/

   display: table;
    float: left;
    font-size: 15px;
    height: 20px;
    margin-left: 1px;
    overflow: hidden;
    padding: 0 10px;   
    text-align: center;
   user-select:none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
    width: 47px;
}
.grp_nos_down{
 position: relative;
   top: 140px;
   user-select:none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

#detPopup{

 background-image: url('../images/pp.png');
 	 height:426px;
	 width:905px;
	  background-repeat: no-repeat;
	  left:50px;
	
	 position:absolute;
	 z-index:300;
}
#eleDetails{
left: 61px;
    position: absolute;
    top: 105px;
    width: 268px;
}
#for_graph{
     left: 545px;
    position: absolute;
    top: 110px;
}

#pp_exit{
 margin-top: 20px;
    position: relative;
    right: 10px;
    text-align: center;
    width: 70px;
	 color: #999999;
    cursor: pointer;
    float: right;
    font-size: 30px;
    height: 40px;
}
#eq_exit{
 margin-top: 20px;
    position: relative;
    right: 10px;
    text-align: center;
    width: 70px;
	 color: #999999;
    cursor: pointer;
    float: right;
    font-size: 30px;
    height: 40px;
}
#eleGraphDetails{
left: 80px;
    position: absolute;
    top: 120px;
    width: 268px;
	font-size:13px;

}
#eleGraphDetails tr td{
padding-bottom:20px;

}

#eleDetails tr td{
padding-bottom:9px;

}
#eleDetails tr:first-child td {
    width:90px;
}
#eleDetails tr td:nth-child(2) {
  text-align: center;
    width: 10px;
}
.legend {
	 background-image:url('../images/legend.jpg');
	 height:66px;
	 background-repeat: no-repeat;
}

.legend:after {
 	content:"";
  display:table;
  clear:table;
}

.legend ul { float:left; list-style: none; }

.legend .list-2 {
 	margin-left:40px; 
  width:200px;
}

.legend .list-1 li { margin:7px 0; }
.legend .list-1 li:first-of-type { margin-top: 2px; }

.legend .list-1 span {
 	border:1px solid black; 
  display:inline-block;
  padding:3px;
  width:20px;
  text-align:center;
  height:20px; 
  margin-right:5px;
}

.legend .list-2 li {
  margin:2px;
  padding:3px;
 	float:left; 
  border:1px solid rgba(0,0,0,0.2);
  width:48%;
  cursor:pointer;
}
.exp2_wrapper {
background-image: url('../images/exp_2.jpg'); 
	  background-repeat: no-repeat;
 	width:900px;
	height:448px;
  margin:30px auto;
  position:relative;
  display:none;
    left: 0px;

} 
.exp_2_btn {

    height: 70px;
    left: 104px;
   
    position: absolute;
    top: 180px;

}
.exp_2_btn ul{
margin: 0;
		    padding: 20px;
		    list-style: none;
		   display: inline;
		

}

.exp_2_btn li {
		    margin: 0 30px 0 0;
		    float:left;		
				cursor:pointer;
		}
		
		.exp2_question{

 	 height:426px;
	 width:905px;
	  background-repeat: no-repeat;
	  left:50px;
	display:none;
	 position:absolute;
	 z-index:200;
	}	
	 .highcharts-yaxis-title {
    color: #707070;
    left: -15px;
   
    position: absolute;
  
  

}
 .highcharts-xaxis-title{
 color:#707070;
 }				
		
.btn_1 {
height:70px;
width:70px;

}
.btn_2 {
height:70px;
width:70px;

}
.btn_3 {
height:70px;
width:70px;

}
.btn_4 {
height:70px;
width:70px;

}
.btn_5 {
height:70px;
width:70px;

}
.btn_6 {
height:70px;
width:70px;

}
.btn_7 {
height:70px;
width:70px;

}
.btn_1:hover{
height:70px;
width:70px;
background-image: url('../images/exp_2/bnt_1_over.png'); 
}
.btn_2:hover{
height:70px;
width:70px;
background-image: url('../images/exp_2/bnt_2_over.png'); 
}
.btn_3:hover{
height:70px;
width:70px;
background-image: url('../images/exp_2/bnt_3_over.png'); 
}
.btn_4:hover{
height:70px;
width:70px;
background-image: url('../images/exp_2/bnt_4_over.png'); 
}
.btn_5:hover{
height:70px;
width:70px;
background-image: url('../images/exp_2/bnt_5_over.png'); 
}
.btn_6:hover{
height:70px;
width:70px;
background-image: url('../images/exp_2/bnt_6_over.png'); 
}
.btn_7:hover{
height:70px;
width:70px;
background-image: url('../images/exp_2/bnt_7_over.png'); 
}