
.clear{
	clear:both;
}

/*########################################## search region */
#searchHeader{
	text-align:center;
}
#searchHeader button{
	
	
}
#region4view{
	border:1px solid #4682B4;
}
#inputRegion{
	margin:10px 0px;
}
#inputRegion input{
	padding: 7px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: gray 1px solid;
}
/*#################################################  overall view region */
#visualize{
	position:relative;
	border:1px solid black;
}
.btn{
	width:10px;
}
.side{
	width:20px;
}
.data>div{
	width:900px;
	overflow:hidden;
}
.data{
	/*overflow:hidden; background:#F8F8FF;
	height:500px;
	border:1px solid black;
	*/
	overflow:hidden;
 	position:relative;
	
	width:900px;
	
	margin-left:auto;
	margin-right:auto;
	
	background: linear-gradient(to left, #E6E6FA 1px,#F8F8FF 0);
    /*线性渐变的宽度*/
    background-size:15px ;
    border-left:1px solid red;
   
   /* 
    overflow:hidden;
    */
}
.data:hover{
	background: linear-gradient(to left, #E6E6FA 1px,#F8F8FF 0);
    /*线性渐变的宽度*/
    background-size:15px ;
}

.dataLabel{
	text-align: center;
	font-size:10px;
	
}

/*####################################################### ref gene region  */
/*##### draw direction*/
.geneDirec {
	border-radius: 6px 6px 6px 6px;  
	width: 6px;  
    height: 6px;
      
	float:left;
   	margin-top:-3.5px;
   	/*
   	margin-left:5px;
   */
}

.positiveDirec{
	border-right:1px solid black;
}
.negativeDirec{
	border-left:1px solid black;
}


/*###### draw one gene area*/
.gene{
	height:12px;
	/*
border:1px solid blue;
*/

/***position relative*/

position:relative;

/***position absolute*/
}
 
 .genelabel{
 	font-size:10px;
	vertical-align:50%;
	padding-right:3px;
 }
 /*##### draw gene line */
 .geneline{
 	/*width:55.066px;*/
	height:1px;
	background-color:black;
	margin-top:5px;
 }
 .geneBody{
 	/*background-color:pink;*/
	position:absolute;
	display:inline;
 	
 }
 
 /*##### draw exon*/
 .geneExon {
	/*width: 50px;
	
	*/
	
	height: 10px;
	background-color: black;
	
	position:absolute;
	margin-top:-5px;
}
 .terminal {
	/*width: 50px;
	
	*/
	
	height: 6px;
	background-color: black;
	
	position:absolute;
	margin-top:-3px;
}
 
 
/*########### mouse position dash line */
 #posiHoriz{
 	border-top:1px dashed #0066cc;
 	height: 1px;
 	overflow:hidden;
 	position:absolute;
 }
 #posiVertic{
 	border-left:1px dashed #0066cc;
 	width: 1px;
 	overflow:hidden;
 	position:absolute;
 }

 /*########################################### genome index row */
 #genomeIndexLine{
 	border-left:1px solid black;
 	border-right:1px solid black;
 	height:10px;
 	width:200px;
 	display:inline-block;
 }
 #region{
	background:rgba(0,255,0,.2);
	position:absolute;
	height:100%;
}
#box{
	position:relative;
}


/*############################################## methylation visualize  */
.methylSite{
	background:blue;
	position:absolute;
	bottom:0;
	width:1px;
}
.methylOneSampleData{
	position:relative;
	height:25px;
	border-top:1px solid #FFB7DD;
	border-bottom:1px solid #E6E6FA;
}
.controlTrackModule{
	float:left;
	margin:10px 20px;
	width:90px;
	height:60px;
}
.controlHeader{
	background:#00457c;
	padding:10px;
	color:white;
	text-align:center;
	font-weight:800;
	font-size:18px;
}
.controlHeader button{
	float:left;
	padding:0px 10px;
	font-weight:600;
	font-size:20px;
}

#controlModule>div{
	margin-top:5px;
}
.controlBody{
	min-height:100px;
}

/*############################### diff status */
.DMR,.N-DMR{
	height:25px;
	width:1px;
	position:absolute;
}
.DMR{
	background:red;
}
.N-DMR{
	background:blue;
}
.diffStatus{
	position:relative;
	height:25px;
}

/*###################################### regulation  */
.regulationRegion{
	height:15px;
	position:absolute;
	bottom:0;
	/*opacity: 0.5;*/
}
.regulationTrack{
	margin-top:15px;
	position:relative;
}


/*#################  search samples */
#searchSamples{
	width:100%;
	z-index:9999;
	position:relative;
	background:white;
	padding:20px 0px;
	/*
	border-bottom:1px solid #cccccc;
	border-top:1px solid #cccccc;
	*/
}
#searchSamples #searchRes table{
	font-size: 12px !important;
}

#searchForm,#searchRes{
	width:800px;
	margin:0px auto;
	border:1px solid #cccccc;
	padding:10px;
}

.oneSearchTerm{
	height:150px;
	/*
	border-top:1px solid #cccccc;
	display:block;
	*/
	left:0px;
	clear:both;
	position:relative;
}

.oneSearchTerm>label{
	float:left;
	width:180px;
	margin:45px 10px 0px 0px;
	text-align:right;
}

.searchButton{
	margin-top:20px;
	text-align:center;
}

