html {
	font-size: 12pt ;
	font-family: Times, serif ;
	background-color: #F7F7F7 ;
	overflow-y: scroll;
	overflow-x: hidden;
	
}

/* borders and shadowing */

.info_box, .hitplot_image, .map_box {
	-webkit-box-shadow: 0px 0px 2px rgba( 0, 0, 0, 0.1 ) ;
/*	-moz-box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.1 ) ;
	box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.1 ) ; */
	background: white ;
	padding: 1% ;
	border: 1px solid #A2A2A2 ; /* IE */
	border: 1px solid rgba( 0, 0, 0, 0.6 ) ; /* other browsers */
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.info_tip_description {
	position: absolute ;
	z-index: 1000 ;

	-webkit-box-shadow: 2px 2px 3px rgba( 0, 0, 0, 0.5 ) ;
	-moz-box-shadow: 2px 2px 3px rgba( 0, 0, 0, 0.5 ) ;
	box-shadow: 2px 2px 3px rgba( 0, 0, 0, 0.5 ) ;
	background: #FFEE88 ;
	padding: 2px ;
	border: 1px solid #A2A2A2 ; /* IE */
	border: 1px solid rgba( 0, 0, 0, 0.6 ) ; /* other browsers */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	
	font-family: times ;
	font-weight: normal ;
	font-style: normal ;
	font-size: 10pt ;
	text-align: justify ;
}

.info_box {
	margin-bottom: 2em ;
}

.info_box, .hitplot_image, .map_box {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.allele_frequencies {
	width: 100% ;
}

.allele_frequencies_table {
	width: 100% ;
}

.allele_frequencies_table th {
}

.allele_frequencies_table tr, .allele_frequencies_table td {
	padding: 0px ;
	margin: 0px ;
}
.allele_frequencies_table td {
	text-align: center ;
}
/* positions */

.manhattan_outer_container {
	position: fixed ;
	height: 100% ;
	width: 350px ;
	left: 0px ;
	top: 0px ;
	overflow: auto ;
}

.manhattan_container {
	position: absolute ;
	/*
	width: 400px;
	height: 1600px ;
	*/
	width: 330px;
	height: 1200px ;
	left: 0px ;
	top: 0px ;
	z-index: 100 ;
	padding: 0px ;
}

.manhattan_container > img {
	position: absolute ;
	left: 0px ;
	top: 0px ;
	width: 400px ;
	height: 1600px ;
	width: 300px;
	height: 1200px ;
}

.clickable_hit, .selected_hit, .clickable_hit_gene, .selected_hit_gene {
	position: absolute ;
}

.clickable_hit, .selected_hit {
	width: 140px ;
	left: 11% ;
}

.clickable_hit_gene, .selected_hit_gene {
	display: block ;
	left: 192px;
	height: 1em ;
	padding: 0px ;
	margin: 0px ;
}

.clickable_hit_gene > p, .selected_hit_gene > p {
	padding: 0px ;
	margin: 0px ;
}

.mainpage {
	position: absolute ;
	top: 0px ;
	left: 350px ;
	padding-left: 3% ;
	right: 3% ;
	min-height: 100% ;
/*	bottom: 0px ; */
	border-left: 1px solid rgba( 0, 0, 0, 0 ) ;
	border-right: 1px solid rgba( 0, 0, 0, 0 ) ;
}

.titlebox {
	float: right;
	width: auto ;
	padding: 13px ;
	margin-top: 25px ;
	margin-bottom: 10px ;
	z-index: 1000 ;
}

.titlebox, .instructions {
	padding: 1% ;
}

/*
.titlebox, .instructions, .instructions > div > p, .titlebox > p  {
	border: 1px dotted black ;
}
*/

.titlebox > .title {
	text-align: center ;
	margin-left: auto ;
	margin-right: auto ;
}

.titlebox > p, .instructions > div > p {
	padding-left: 13px ;
	padding-right: 13px ;
	margin-bottom: 0px;
	text-align: justify ;
}

.instructions {
	float: left ;
	width: 100% ;
	margin-top: 10% ;
	margin-bottom: 20% ;
	clear: both ;
}

.instructions > img {
	float: left ;
	clear: none ;
	width: 64px ;
	height: 16px ;
	margin: 10px ;
}

.main_instruction, .help_instruction {
	float: left ;
	clear: none ;
    height: 16px ;
    bottom: 10px ;
  	margin-top: 10px ;
  	margin-bottom: 10px ;
    margin-left: 5px ;
	vertical-align: baseline ;
	/* border: 1px solid black ; */
}

.main_instruction {
	/* font-family: sans-serif ; */
 	font-size: 16px ;
}

.help_instruction {
	font-size: 10px;
	padding-top: 3px ;
}


.website_info {
	position: absolute ;
	bottom: 5px ;
	right: 0px ;
}

.clear {
	clear: both ;
}

.details {
/*
	float: right ;
	clear: both ;
*/
	margin-top: 1% ;
	padding-bottom: 3% ;
	display: none ;
	left: 450px ;
	right: 3% ;
	z-index: 200 ;
	margin-bottom: 20px ;
}

.hitplot_image_caption, .hitplot_image {
	float: right ;
	padding: 1% ;
	width: 60% ;
	max-width: 100% ;
}

.hitplot_image_caption {
	margin-bottom: 20px ;
}

.full_width {
	width: 80% ;
	margin-left: 10% ;
	margin-right: 10% ;
}

.caption_box {
	clear: right ;
	margin-top: 2px ;
}

.info_box {
	display: none ;
	float: left ;
	width: 33% ;
}

.hitplot_image {
	/* max-height: 70% ; */
}

.hitplot_image_hover {
	border: 1px solid red ;
}

.clear {
	clear:both ;
}

/*
.region_info {
	float: left ;
	width: 25% ;
}

.proximal_genes {
	float: left ;
	width: 25% ;
}

.signal_info {
	float: left ;
	max-width: 100% ;
}
*/

.info_box > p {
	width: 80% ;
	font-family: sans-serif ;
	font-size: 10pt ;
	font-weight: bold ;
	margin-left: auto ;
	margin-right: auto ;
	text-align: center ;
	border-bottom: 1px solid black ;
}

.info_box > table {
	padding: 5px ;
}

.info_box td {
	position: relative ;
	/* border-bottom: 1px solid grey ; */
}

.visible_info {
	display: block ;
}

.hit_info > div > table {
	padding: 5px ;
}

.hit_info td {
	/* border-bottom: 1px solid grey ; */
}

/* colours and opacity */

.manhattan_outer_container, .manhattan_container {
	background-color: #F7F7F7;
}

.clickable_hit {
	border: 1px ;
}

.clickable_hit_gene {
	border: 1px solid #F7F7F7; /* Background-colour border so text does not move on hover. */
}

.clickable_hit_hover, .selected_hit, .clickable_hit_gene_hover, .selected_hit_gene {
	background-color: #FFCC33 ;
	border: 1px solid #FFCC33 ;
	border-radius: 2px ;
	-moz-border-radius: 2px ;
}

.clickable_hit_hover, .selected_hit {
	opacity: 0.5 ;
}

.clickable_hit_hover, .clickable_hit_gene_hover {
	border: 1px solid red ;
}

.clickable_hit_tip {
	background-color: #FFCC33 ;
	display: none ;
	position: fixed ;
	/* width: 300px ; */
	/* bottom: 105%; */
	padding: 2px ;
	border: 1px solid black ;
}

.clickable_hit_gene, .selected_hit_gene {
	position: absolute ;
	padding-left: 10px ;
	padding-right: 10px ;
}

.selected_hit_gene {
	background-color: #FFCC33 ;
}

.clickable_hit_hover {
	border: 1px solid red ;
	opacity: 0.5 ;
}

/* fonts */

.titlebox > .title {
	font-family: sans-serif ;
	font-weight: bold ;
	font-size: 14pt ;
}

.titlebox > .separator {
	background: black ;
	width: 100% ;
	height: 1px ;
}

.instructions {
	font-family: sans-serif ;
	font-weight: normal ;
}
.titlebox > p, .main_help {
	font-family: times ;
	font-size: 10pt ;
}

.titlebox > .title > h2 {
	font-size: 14pt ;
}

.clickable_hit_gene > p, .selected_hit_gene > p {
	font-size: 10pt ;
	font-family: sans-serif ;
	font-style: italic ;
}

.show_main_help, .hide_main_help {
	font-size: 8pt ;
/*	font-family: sans-serif ; */
	font-style: normal ;
	font-weight: bold ;
}

.show_main_help {
	display: none ;
}

.main_help {
	float: left ;
	clear: both ;
	display: inline ;
}

.InTableNovel > p, .InTableSuggestive > p {
	color: #000000 ;
}

.InTableNovel > p {
	font-weight: bold ;
}

.InTableKnown > p {
	color: #555555 ;
}

.hit_info .info_box .table_header {
	font-weight: bold ;
	text-align: right ;
}

.open_tip {
	font-family: times ;
	font-size: 8px ;
	font-weight: bold ;
	color: #FF0000 ;
	display: inline ;
	position: relative ;
	left: 0px ;
	bottom: 5px ;
}

.open_tip_gene {
	display: inline ;
	position: relative ;
	left: 0px ;
}

.info_box {
	font-size: 10pt ;
}

.caption_box, .website_info {
	font-size: 8pt ;
	text-align: justify ;
}

.website_info, .allele_frequencies_table {
	font-size: 8pt ;
}

.gene_name {
	/* font-family: sans-serif ; */
	font-style: italic ;
}