html, body
{
	margin: 0;
	text-align: left;
	background-color: white;
	padding-bottom: 20px;
	font-size: 12pt;
}

#hetpdbnavi
{
    min-width: 1024px;
}

h1, h2, h3
{
	margin-top: 10px;
}

.email-provider:before {
  content: '@'
}

.email-domain:before {
  content: '.'
}

input[type=text]
{
	box-sizing : border-box;
}

table 
{
    table-layout:fixed;
    word-wrap: break-word;
}

.inline{
	display: inline;
}

.page-header
{
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 5px;
	border-bottom: white;
}


/*header*/

#top-header
{	
	height: 60px;
	background-color: white;
	font-size: 12pt;
	margin: 0;
	width: 1024px;
}

#topimg
{
	display: inline-block;
	width: 480px;
}

#topmail
{
	display: inline-block;
	text-align: right;
	width: 480px;
	margin-right: auto;
	font-size: 10pt;
}

#topmail a:link, #top-header a:visited
{
	color: black;
}


/* navi */

#navtab
{
	float: left;
	margin: 0;
	width: 1000px;
}

.nav-tabs li
{
	width: 161px;
	text-align: center;
}

/* menu */

#menu
{	
	background-color: white;
	/*float: left;*/
	margin-top: 30px;
	width: 900px;
	/*height: auto !important;*/
	height: 200px;
	font-size: 20px;
	padding-left: 10px;
	padding-right: 0;
}

#menu h3
{
	font-size: 30px;
}

/*#menu form
{
	display: flex;
	border: 2px solid lightgrey;
	width: 800px;
}*/

#input-box
{
	display: flex;
	border: none;
	width: 880px;
}

#menu input
{
	border: 2px solid lightgrey;
	margin: 10px 0 5px 0;
	padding-left: 10px;
	width: 90%;
	height: 60px;
	font-size: 20px;
}

#submit_btn
{
	display: block;
	border: 2px solid lightgrey;
	margin-top: 10px;
	margin-left: 2px;
	background-color: lightgrey;
	height: 59px;
}

#res_close
{
	display: none;
	border: 2px solid lightgrey;
	margin-top: 10px;
	background-color: lightgrey;
	height: 59px;
}

#menu form button svg
{
	fill: grey;
}

#menu p
{
	padding-top: 10px;
	padding-bottom: 10px;
	text-indent: 0;
	font-size: 12pt;
}

#example
{
	padding-left: 10px;
}

input[type=radio]
{
	display: none;
}

#example label:hover
{
	color: #999;
}

.hidden
{
	display: none;
}

#footer
{
	clear: both;
	padding-top: 70px;
}

#information
{
	margin: 0 20px;
	float: left;
}

#copy
{
	float: right;
	margin: 0 10px;
}

#link
{
	float: left;
	margin-left: 100px;
}

.affix-top,.affix
{
	position: static;
}

#sidebar.affix-top
{
	position: static;
	margin-top:0;
	width:150px;
}

#sidebar.affix
{
	position: fixed;
	top: 20px;
	width: 150px;
}

#search_code
{
	display: none;
	width: 880px;
	height: auto !important;
	color: #666666; /*文字色*/
	font-size: 0.8em;
	border: 1px solid #ccc; /*線の太さ・色*/
	background-color: #f7f7f7; /*背景色*/
	border-radius: 8px; /*角の丸み*/
	overflow: hidden;
	position: relative;
	padding-top: 5px;
}

#het_result
{
	width: 20%;
	float: left;
	padding-left: 40px;
}

#pdb_result
{
	width: 20%;
	float: left;
	padding-left: 40px;
}

#kegg_result
{
	width: 30%;
	float: left;
	padding-left: 40px;
}

#drug_result
{
	width: 30%;
	float: left;
	padding-left: 40px;
}

#het_result li, #pdb_result li, #kegg_result li, #drug_result li
{
	list-style: none;
}

/*content*/

#content
{
	float: left;
	width: 990px;
	margin-left: 10px;
	margin-top: 10px;
	background-color: white;

}

#home
{
	margin: 30px 10px 0 10px;
}

/* OVERVIEW */

#overview
{
	text-indent: 50px;
}

/* references*/

#history
{
	margin-top: 30px;
	margin-left: 10px;
	width: 950px;
}

#acknowledge
{
	margin: 90px 10px 0 10px;
}

#acknowledge h1
{
	font-size: 16pt;
	margin: 25px 0 5px 0;
}

#references
{
	margin: 90px 10px 0 10px;
}

#references h1
{
	font-size: 16pt;
	margin: 25px 0 5px 0;
}

#references p.indent
{
	text-indent: 50px;
} 

/* links */

#links p
{
	margin-left: 30px;
}

/* SEARCH (Het List and PDB List) */

#search .tab-content
{
	margin-top: 10px;
}

#search .tab-content h2
{
	margin-top: 10px;
}

#search .page-header h1
{
	margin-top: 0;
}

#search .inline
{
	display: inline;
}


#search .nav-pills .het-pills a, #search .nav-pills .het-pills a:hover, #search .het-pills
{
    background-color: rgb(98,83,163);
    color: white;
    text-decoration: none;
}

#search .nav-pills .pdb-pills a, #search .nav-pills .pdb-pills a:hover, #search .pdb-pills
{
    background-color: rgb(237,48,145);
    color: white;
    text-decoration: none;
}

#search tr:hover
{
    cursor: pointer;
}

#search th
{
	font-size: 0.7em;
}

#search td
{
	font-size: 0.7em;
}

#search td:nth-child(1)
{
	font-size: 0.8em;
}

.info
{
	position: relative;
}

#search input
{
	display: inline-block;
}

/* search_result table */
.table
{
	margin-top: 10px;
}

.table_th
{
	display: table;
	border-top: solid 1px #ccc;
	background-color: #d9edf7;
	width: 940px;
	height: 20px;
	line-height: 20px;
	padding-left: 3px;
	font-size: 0.9em;
}

.table_td
{
	display: table;
	border-top: solid 1px #ccc;
	width: 940px;
	height: 30px;
	line-height: 30px;
	padding-left: 20px;
	font-size: 0.9em;
	vertical-align: middle;
}

.result_item
{
	position: relative;
}

.result_item .divlink
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.db_item
{
	color: #5ab4bd;
}

.formula-field
{
	width: 200px;
}

#search th:nth-child(1)
{
	width: 70px;
}

#het-pills th:nth-child(3)
{
	width: 180px;
}

#het-pills th:nth-child(4)
{
	width: 150px;
}

#het-pills th:nth-child(5)
{
	width: 80px;
}

#het-pills th:nth-child(6)
{
	width: 80px;
}

#het-pills.number
{
    text-align: right;
}

#pdb-pills th:nth-child(2)
{
	width: 200px;
}

#pdb-pills th:nth-child(3)
{
	width: 100px;
}

#pdb-pills th:nth-child(4)
{
	width: 100px;
}

#pdb-pills th:nth-child(5)
{
	width: 50px;
}

.name-field
{
	width: 500px;
}

#sidebar li>a.active
{
	background-color: #EEE;
}

.red
{
	background-color: red;
}

/* het */

.het-pills
{
    background-color: rgb(98,83,163);
    color: white;
    text-decoration: none;
}

#threeD, #twoD
{
	height: 400px;
}

#jmoldivhet, #imgdivhet
{
	height: 320px;
	width: 395px;
	border-radius: 10px;
	border: 1px solid #d7dfc1;
	background-color: rgb(255,255,255);
	padding: 9px 14px 9px 14px;
	position: relative;
}

#imgdivhet img
{
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: auto;
	max-height: 300px;
	max-width: 360px;
}

#hetdata th
{
	width: 175px;
}

#pdblist th
{
	width: 75px;
	padding-left: 10px;
}

#pdblist td
{
	padding-left: 10px;
}

#pdblist td.code
{
	font-weight: bold;
}

#pdblist .pagination
{
	position: relative;
	padding-bottom: 50px;
	margin-top: 10px;
	margin-left: 0;
	margin-right: -100px;
}

/* pdb */

.pdb-pills
{
    background-color: rgb(237,48,145);
    color: white;
    text-decoration: none;
}

#pdbdata
{
	height: 710px;
}

#jmoldivpdb
{
	position: relative;
	z-index: 2;
	height: 450px;
	width: 450px;
	border-radius: 10px;
	border: 1px solid #d7dfc1;
	background-color: rgb(255,255,255);
	margin: 5px;
	display: table-cell;
	vertical-align: middle;
}

#jmoldivpdbnodisplay
{
	position: relative;
	z-index: 2;
	height: 390px;
	width: 390px;
	border-radius: 10px;
	border: 1px solid #d7dfc1;
	background-color: rgb(255,255,255);
	margin: 5px;
	display: none;
	vertical-align: top;
}

#jmoldivpdbnodisplay p
{
	font-size: 10pt;
}

#jmoldiv p
{
	font-size: 10pt;
}

#jmoldiv
{
	padding-top: 10px;
	width: 430px;
}

#selunit, #selhetatm, #selchain, #selmolcolor
{
	border-style: solid;
	border-width: thin;
	border-color: #ddd;
	padding-top: 10px;
	background-color: #f5f8fb;
}

#hetinpdbtable, #hetinpdbtable1, #hetinpdbtable2, #hetinpdbtable3
{
	font-size: 10pt;
	padding-bottom: 5px;
	margin-top: 0;
}

#hetinpdbtable caption, #hetinpdbtable1 caption, #hetinpdbtable2 caption, #hetinpdbtable3 caption
{
	font-weight: bold;
}

#hetinpdbtable .code, #hetinpdbtable1 .code, #hetinpdbtable2 .code, #hetinpdbtable3 .code
{
	width: 50px;
}

#hetinpdbtable .saccharide
{
	width: 20px;
}

#hetinpdbtable .link, #hetinpdbtable .view, #hetinpdbtable1 .view, #hetinpdbtable2 .view, #hetinpdbtable3 .view
{
	width: 65px;
	text-align: center;
}

#hetinpdbtable2 .view
{
	width: 80px;
}

#hetinpdbtable .model
{
	width: 100px;
	text-align: center;
}

#linklist
{
	font-size: 10pt;
}

#summarytable th
{
	vertical-align:top;
	width: 130px;
}

#compoundtable
{
	margin: 0;
	padding: 0 5px 0 5px;
}

#compoundtable .molid
{
	width: 50px;
	height: 10px;
}

#compoundtable th
{
	height: 10px;
}

#sourcetable
{
	margin: 0;
	padding: 0 5px 0 5px;
}

#sourcetable .molid
{
	width: 50px;
}

#citation
{
	margin: 0;
	padding: 0 5px 0 5px;
	border: 1px solid #d7dfc1;
}

#reactiontable th
{
	width: 115px;
}

#reactionsubtable, #cofactortable
{
	margin: 0;
	padding: 0;
	border: 1px solid #d7dfc1;
}

#reactionsubtable tr th, #cofactortable tr th
{
	background-color: #d9edf7;
}

#reactionsubtable .react, #cofactortable .name
{
	width: 200px;
}

#reactionsubtable .ec, #cofactortable .evidence
{
	width: 100px;
}

#reactionsubtable th, #reactionsubtable td, #cofactortable th, #cofactortable td
{
	vertical-align: middle;
}

/* search_result */
.tabs
{
	margin-top: 0;
	padding-bottom: 40px;
	width: 100%;
}

.tab_item
{
	width: calc(100%/8);
	height: 75px;
	border-bottom: 3px solid #5ab4bd;
	background-color: #d9d9d9;
	line-height: 25px;
	font-size: 16px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	font-weight: bold;
	transition: all 0.2s ease;
}

.tab_item a
{
	color: #565656;
	text-decoration: none;
	display: block;
}
 
.tab_item:hover
{
	opacity: 0.75;
}

input[name="tab_item"] {
	display: none;
}

.tab_content
{
	display: none;
	padding: 20px 10px 0;
	clear: both;
	overflow: hidden;
}

#het_code:checked ~ #het_code_content,
#het_name:checked ~ #het_name_content,
#het_synonym:checked ~ #het_synonym_content,
#het_drugname:checked ~ #het_drugname_content,
#pdb_code:checked ~ #pdb_code_content,
#pdb_header:checked ~ #pdb_header_content,
#pdb_title:checked ~ #pdb_title_content,
#pdb_keywords:checked ~ #pdb_keywords_content
{
	display: block;
}

.tabs input:checked + .tab_item
{
	background-color: #5ab4bd;
	color: #fff;
}

.tabs input:checked + .tab_item > a
{
	color: #fff;
}

#result_count ul li
{
	width: 100%;
}

#result_count ul li
{
	display: inline-block;
	padding: 10px;
	font-size: 1.2em;
}

#result_count ul li div a
{
	text-decoration: none;
	color: #333333;
}

#result_count ul li div a:hover
{
	color: #337ab7;
}

#result_count .count
{
	text-align: center;
}

#het-code-table
{
	display: none;
}

/* het_list */

#toppager
{
	margin-bottom: 10px;
}

#hetlisttable
{
	margin-top: 20px;
}

#hetlisttable th
{
	padding: 1px;
	font-size: 0.9em;
}

#hetlisttable tr
{
	padding: 0;
	font-size: 0.9em;
}

#hetlisttable .num
{
	width: 40px;
}

#hetlisttable th.code
{
	width: 65px;
}

#hetlisttable td.code
{
	width: 65px;
	padding-left: 10px;
}

#hetlisttable .sim
{
	width: 80px;
}

#hetlisttable .count
{
	width: 65px;
}

#bottompager
{
	margin-top: 10px;
}

/* simhet */
#listhead
{
	height: 45px;
}

/* sequence */

#seqwin
{
	display: none;
	position: absolute;
	z-index: 1;
	top: 2px;
	left: 465px;
	width: 500px;
	height: 370px;
	font-size: 10pt;
	background-color: rgb(255,255,250);
	border: 1px solid #d7dfc1;
	text-align: left;
	padding: 5px 10px;
	border-radius: 10px;
	overflow: auto;
}

#seqwin div.seq
{
	font-family: Courier, Monospace;
	margin: 0;
	padding: 4px 0;
	font-size: 9pt;
	cursor: auto;
}

#seqlegend
{
	font-family: Courier, Monospace;
	margin: 0;
	padding: 4px 0;
	font-size: 10pt;
	text-align: center;
}

#seqlegend p
{
	font-size: 10pt;
	padding: 0;
	margin: 0;
}

#seqwin .intres
{
	background-color: rgb(80,80,255);
	color: rgb(230,230,230);
	cursor: pointer;
}

#seqwin .disordered
{
	background-color: rgb(170,170,170);
	color: rgb(100,100,100);
}

#seqwin .clicked
{
	background-color: rgb(240, 180, 10);
	color: black;
	cursor: pointer;
}

#ipop
{
	padding: 0;
	background-color: #fed;
	border: 1px solid #aaa;
	width: 250px;
	height: 200px;
	position: absolute;
	display: none;
	z-index: 9999;
	resize: both;
	overflow: auto;
	font-size: 12px;
}

#ipop_title
{
	background-color: #fdc;
	cursor: move;
}

#ipop_close
{
	cursor: pointer;
	float: right;
}

#center_coord
{
	margin-left: 20px;
	margin-top: 5px;
	text-align: left;
}

#interact_res
{
	margin-left: 20px;
	text-align: left;
}

#ipop_elm
{
	margin-left: 25px;
}

#prolms
{
	margin-top: 20px;
}

#hetcode tr:hover, #hetname tr:hover, #hetsynonym tr:hover, #hetdrugname tr:hover, #pdbcode tr:hover, #pdbheader tr:hover, #pdbtitle tr:hover, #pdbkeywords tr:hover
{
    cursor: pointer;
}

#hetcode td, #hetname td, #hetsynonym td, #hetdrugname td, #pdbcode td, #pdbheader td, #pdbtitle td, #pdbkeywords td
{
	font-size: 0.75em;
}

#hetcode th, #hetname th, #hetsynonym th, #hetdrugname th, #pdbcode th, #pdbheader th, #pdbtitle th, #pdbkeywords th
{
	font-size: 0.75em;
}

#hidechainlabel {
	font-weight: normal !important;
}

#pdb_left_info
{
	width: 460px;
}

#pdb_right_info
{
	width: 510px;
	padding-left: 0;
	padding-right:0;
}

#label_pdb_left
{
	width: 460px;
}

#label_pdb_right
{
	width: 510px;
	padding-left: 0;
	padding-right:0;
}