/*css重置*/
body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,input,textarea,table,td{
   margin:0;
   padding:0;
}
body{
   font-family:'Times New Roman',Arial,'Microsoft YaHei',SimHei;
   font-size:18px;
   background-color: #fcfcfc;
}
th{
    white-space: nowrap; 
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

/*全局样式*/
.container{
   width:90%;
   margin:0 auto;
}
header{
   width:100%;
   background: #003366;
   position: center;
   height: 3%;
}
section{
   padding:50px 0;
   min-height:700px;
}
.af:after{
   display:block;
   content:" ";
   clear:both;
}
.bf{
   display:table;
   content:" ";
}
ul,ol{
   list-style-type: none;
}
a{
   text-decoration: none;
   color:blue;
}
a:hover{
   text-decoration: none;
   color:red;
}
a:visited{
	color:#642a8f;
}
input{
    border-radius: 7px;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.inputS{
    width:70%;
}
.selectBox{
    border-radius: 7px;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
option{
    font-size:18px;
}

select{
    border-radius:7px; 
    border:2px solid #cccccc;
}

/*头部样式*/
.logo{
   display:block;
   width:40%;
   height: auto;
   padding-top: 10px;
   padding-left: 60px;
   margin-bottom:0px;

}
.nav{
   width:45%;
   float: right;
   margin-top: -2.2%;
   margin-right: 0;
   margin-left: 0;
}
.nav>li{ 
   box-sizing: border-box;
   float: right;
   border-right:3px solid #003366;
   width:16%;
   position: relative;
   font-size: 120%;
}
.nav>li>a{ 
   box-sizing: border-box;
   display:block;
   padding:8px 0;
   background:#003366; 
   color:#fff;
   text-align: center;
}
.nav>li>a:hover{
   background: #003366;
   color: #ffcc00;
}
.downward:before{
   content: "\f107";
}
.secondNav{
   box-sizing: border-box;
   width:110%;
   position:absolute;
   left:100px;
   top:30px;
   border:0;
   padding: 0px;
   background-color: #fcfcfc;
   font-size: 80%; 
   /* top: 40px; */
   /* padding-top: 0px; */
   padding:1px;
   /* display:none; */
}
.secondNav>li>a{
   /* box-sizing: border-box; */
   /* display:block; */
   /* padding:8px 0; */
   background:#003366; 
   color:#ffffff; 
   /* text-align: center; */
   border-bottom:3px solid #003366; 
   /* font-size:13px; */
}
.secondNav>li>a:hover{
   background: #003366;
   color: #ffcc00;

}


/* Menu Styles */

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 200px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    text-align: center;
    font: bold 15px TimesNewRoman;
}


.third-level-menu > li
{
    height: 30px;
    background: #003366;
}
.third-level-menu > li:hover { background: #003366; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    font: bold 15px TimesNewRoman;
}

.second-level-menu > li
{
    position: relative;
    height: 30px;
    background: #003366;
}
.second-level-menu > li:hover { background: #003366; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 120px;
    background: #003366;
}
.top-level-menu > li:hover { background: #003366; }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 15px TimesNewRoman, Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-decoration: none;
    padding: 0 0 0 5px;
    
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #ffcc00; }

.float_center {
  float: right;
  color: #003366;
  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}

/*尾部样式*/
footer{
   width:100%;
   height:80px;
   border-top:5px solid #003366;
   background: #F7F7F7;
}
.btn{
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 30px;
   font-size: 14px;
   font-weight: normal;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
   color: #fff;
   background: #5bc0de;
   border:1px solid #46b8da;
}

/*首页样式*/
.index{
   float:left;
   box-sizing: border-box;
   width:22%;
   padding:40px 15px;
   border-radius:4px;
   text-align: center;
}
.index h3{
   margin:10px 0;
}
.indexOne{
   color: #31708f;
   border:1px solid #bce8f1;
   margin-right:4%;
}
.indexTwo{
   color: #3c763d;
   border:1px solid #d6e9c6;
   margin-right:4%;
}
.indexThree{
   color: #8a6d3b;
   border:1px solid #faebcc;
   margin-right:4%;
}
.indexFour{
   color: #a94442;
   border:1px solid #ebccd1;
}
.indexFive{
   float:left;
   width:64%;
   border:1px solid #faebcc;
   border-radius:4px;
}
.indexFiveTop{
   color:#8a6d3b;
   background:#fcf8e3;
   padding:15px 0 15px 15px;
}
.indexFiveBottom{
   padding:15px;
}
.indexFiveBottom .bottom{
   padding-left:10px;
   background: url(../img/index.png) no-repeat;
   margin:25px auto;
}
.indexFiveBottom .bottom p{
   line-height:25px;
}
.indexFiveBottom .bottomOne{
   width:100%;
}
.indexFiveBottom .bottomTwo{
   width:90%;
}
.indexFiveBottom .bottomThree{
   width:80%;
}
.indexSix{
   float:right;
   width:30%;
   color: #31708f;
   background: #d9edf7;
   border:1px solid #bce8f1;
   padding:15px;
   border-radius: 4px;
   text-align: center;
}
.indexSix h3{
   width:90%;
   padding:10px 0;
   border-bottom: 1px solid #a6e1ec;
   margin:5px auto 30px;
}
.indexSix p{
   width:90%;
   padding:5px 0 22px;
   border-bottom: 1px solid #a6e1ec;
   margin:5px auto 30px;
   line-height:25px;
}


/*Varieties页面样式*/
.varietiesSearch{
   margin: 40px 0;
}
.varietiesSearch p{
   width:50%;
   float:left;
}
.varietiesSearch p label{
   display:inline-block;
   font-weight: bold;
   width:110px;
}
.varietiesSearch p span{
   font-weight: bold;
}
.varietiesSearch p input{
   font-size:18px;
   padding:2px 5px;
}
.tableDD{
   width:100%;
   overflow-x: hidden;
   margin:10px 0;
}
.tableLength select{
   width:75px;
   display:inline-block;
}
.tableSearch{
   float:right;
}
.tableSearch input{
   width:190px;
   display:inline-block;
}
.btn{
   margin-right:2px;
   font-size:18px;
}

/*TE页面样式*/
.TE{
   margin: 40px 0;
}
.TE p{
   width:50%;
   float:left;
}
.TE p label{
   display:inline-block;
   font-weight: bold;
   width:155px;
}
.TE p span{
   font-weight: bold;
}
.TE p input{
   font-size:18px;
   padding:2px 5px;
}
.TEsmall{
   width:80px;
}
.TE p select{
   width:100px;
   padding:5px;
   font-size:16px;
}

/*searchByTE*/
.searchByTE{
   margin: 20px 0;
}
.searchByTE p label{
   display:inline-block;
   font-weight: bold;
   width:130px;
}
.searchByTE p span{
   font-weight: bold;
}
.searchByTE input{
   font-size:18px;
   padding:2px 5px;
}
.searchByTE textarea{
	width:250px;
   height:150px;
   vertical-align: middle;
}
.arrow_right{
   display:inline-block;
   box-sizing: border-box;
   width:29px;
   height:29px;
   border:1px solid #999999;
   border-radius: 5px;
   background: url(../img/arrow_right.png) no-repeat center center;
   background-color: #E9E9E9;
   padding:7px 20px;
}
#searchByTEHide{
   display:none;
}
.filterHeader{
    border:2px solid #f5f5f5; 
    border-radius:10px; 
    background:#f5f5f5; 
    width:200px; 
    padding:8px; 
    white-space:nowrap; 
    position: relative;
    top: 10px;
}
.filterBody{
    border:2px solid #f5f5f5; 
    border-radius:10px; 
    background:#f5f5f5;
    padding-left: 20px
}


/*searchByVarieties*/
.searchByVarieties{
   margin: 40px 0;
}
.searchByVarieties p{
   width:30%;
   float:left;
   min-width:330px;
}
.searchByVarieties p label{
   display:inline-block;
   font-weight: bold;
   width:130px;
}
.searchByVarieties p span{
   font-weight: bold;
}
.searchByVarieties p input{
   font-size:18px;
   padding:2px 5px;
}
.searchByVarieties p select{
   width:100px;
   padding:5px;
   font-size:16px;
}
#searchByVaruetiesHide{
	display:none;
}
#searchByGeneHide{
	display:none;
}
#Polymorphism{position: absolute;width: 20px;height: 20px;background: #E92333;}

/*Blast*/
.Query{
   width:70%;
   height:300px;
   color: rgb(137, 137, 137);
   font-size: 12px;
}
#searchByBlastTwo{
   display:none;
}
/*Browser*/
.Browser{
   width:98%;
   height:620px;
   overflow-y: auto;
   border:2px solid #000;
   padding:15px;
   margin-top:-20px;
   margin-left:1%;
   border-radius: 10px;
}
.BrowserSameP{
   font-size:16px;
   margin:20px 0;
}
.Browser ul{
   list-style-type: square;
   font-size: 14px;
   margin:10px 0 30px 35px;
}
.Browser ul li{
   margin:5px 0;
}
.error{
   padding:3px;
   border:1px solid #000;
   background:#ff8888;
   font-size:15px;
   width:95%;
   margin:10px auto;
}

/*download*/
.download h2{
   font-size: 30px;
   font-weight: 500;
   margin:20px 0;
}

/*JBStyle*/
.JBStyle{
   padding:30px;
   font-size:18px;
}
.JBStyle p{
   margin:15px 0;
}
table{
   border-left:1px solid #000;
   border-top:1px solid #000;
}
table td{
   border-right:1px solid #000;
   border-bottom:1px solid #000;
   font-size: 16px;
}
.table1 td{
   padding:2px 20px;
}
.table2{
   width:80%;
}
.table2 td{
   padding:4px 10px;
}

/*JBDownload*/
.JBDownload{
   padding:30px;
   font-size:18px;
   width:80%;
   margin:0 auto;
}
.JBDownload h3{
   border-bottom:1px solid #ddd;
}
.JBDownload p{
   margin:15px 0;
}
.table3{
   width:100%;
}
.table3 td{
   padding:4px 10px;
}
.table3 ul{
   list-style-type: square;
   margin:10px 0 0 35px;
}
.table4 td{
   padding:4px 10px;
}
.table4 ul{
   list-style-type: square;
   margin:10px 0 0 35px;
}
.table4 .jieshi{
   display:inline-block;
   padding-left:35px;
}
.bg{
   background: #F8F8F8;
   border:1px solid #ddd;
   padding:2px;
   border-radius: 5px;
}



/*varieties*/
#page{
	width:60%;
	box-sizing:border-box;
	text-align:right;
	float:right;
}
#page li{
	display:inline-block;
	vertical-align:middle;
}
#page li:not(:last-child){
	margin-right:2px;
}
#page li a{
	display:inline-block;
	padding:7px 15px;
	border:1px solid #C0D3E6;
	border-radius:3px;
	font-size:14px;
	color:blue;
}
#page .disabled a{
	color:#8D9092;
}
#page .active a{
	background:#428BCA;
	color:#fff;
}

/*水平滚动条*/
.silderBarBox{width: 100%;height: 20px;position: relative;border:1px solid white;margin: 0 auto;overflow: hidden;}
.silderBar{width: 100%; height: 20px;position: absolute;top: 0.5%;right: 0.5%;background: red;border-radius: 5px;overflow: hidden;}
.silderBar span{height: 100%;width: 20px;top: 0;left: 0;position: absolute;display: block;background: blue}



/*varities css */
.select_style{display:inline-block;padding:5px 10px;font-size:18px;border-radius:3px;color:#555;background-color:#fff;border:2px solid #ccc; text-transform:none; margin:0; box-sizing:border-box;overflow:visible !important; align-items:left; white-space:pre;-webkit-rtl-ordering:logical; cursor:default;}
.select_style option{font-size:18px;padding:50px 50px;padding-top:100px; padding-bottom:100px;}


/* tutorials */
.Qbox{
    width:80%; 
    background-color:#003366; 
    border-radius: 15px;
    color: #fcfcfc;
    height: 50px;
}

.Qbox>p {
    font-size:24px;
    padding-left: 40px;
    padding-up: 50%;
}
.ui-autocomplete { height: 100px; overflow-y: scroll; overflow-x: hidden;}
#svg-panel {
        width:100%;
}