/*
 * Developed by Altum, Inc.
 * 12100 Sunset Hills Rd, Suite 101, Reston, VA 20190 USA
 * Copyright (c) 2014-2015 Altum, Inc.
 * All rights reserved.
 */
/*
Changes to toxnet/css/style.css:
	Replaced banner H1 with div as for Search Engines, H1 should be the most vital information specific to that page.
	Updated ChemIDplus database icon to be molecule.png
*/
div#site-title a { width:205px; height:82px; display:block; margin:0 0 0 10px; background:url(../toxnet/img/nihlogo.png) no-repeat 0 0; text-indent:-9999px; outline:none; font-size:1px;float:left;}
div#site-title2 a { width:233px; height:82px; display:block; margin:0 0 0 0px; background:url(../toxnet/img/toxnetlogo.png) no-repeat 0 0; text-indent:-9999px; outline:none; font-size:1px;float:left;}
#home-banner div	{ display:none;}
#main.database	{ background:#FFF;}
#database-banner { background:url(../toxnet/img/molecule.png) no-repeat 0 0; background-color:#FFF; background-size:150px; background-position:0 -30px;}
#database-banner div	{ color:#339384; font-weight:normal; width:180px; float:left; margin-left:140px; font-size:28px;line-height: 1em;}
#database-banner div span.sub-title	{ display:block; font-size:14px;line-height: 1.4em;}
#database-banner div span.sub-links { display:block; font-size:13px;line-height: 1em;}

#database-banner{
	height:66px;
	margin-bottom:9px;
}

body a.skipNavOne{
	color:#f2f2f2;
	position:absolute;
	text-decoration:none;
	outline:none;
}
#main.database{
	padding-bottom:0;
}


.oldIE #database-banner{
	float:none;
}

#database-banner div{
	cursor:default;
}

.siteTitles{
	width:450px;
}
.breadSearch .lcLeft{
	width:315px;
}
.acSearch{
	width:337px;
	margin-top:2px;
	margin-left:auto;
	margin-right:auto;
	font-size:14px;
}
.acSearch button{
	font-size:14.25px;
}
.home-search-body .acSearch{
	width:100%;
	font-size:13.6px;
}
.home-search-body .acSearch .selects{
	margin-bottom:5px;
}
.home-search-body .acSearch #genericNameStems{
	clear:left;
}
.home-search-body #QF1{
	width:140px;
}
.home-search-body #QO1{
	width:110px;
}
.searchAreas .acSearch{
	font-size:13.6px;
}
.searchAreas #QF1{
	width:130px;
}
.searchAreas #QO1{
	width:100px;
}
.home-search-body .acSearch select{
	height:28px;
}
.acSearch .selects{
	display:block;
}
.acSearch select{
	margin-right:10px;
	height:22px;
}
.acSearch li.currentSearch{
	color:#339384;
	font-style:italic;
}
#QV1{
	padding:0;
	text-transform:uppercase;
	font-size:15px;
	width:250px;
	text-transform:uppercase;
}
.searchAreas #QV1{
	font-size:13px;
	width:300px;
}
.hasTopSearch .acSearch{
	width:483px;
	padding:5px;
	margin:0 20px 0 auto;
	background: #eee;
	border-radius: 0px 0px 10px 10px; 
	-moz-border-radius: 0px 0px 10px 10px; 
	-webkit-border-radius: 0px 0px 10px 10px; 
	border: 1px solid #ccc;
}
.hasTopSearch .acSearch .selects{
	display:inline-block;
}
.hasTopSearch .acSearch select{
	padding:0;
}
.hasTopSearch .acSearch button{
	padding:2px 3px;
}
.hasTopSearch #QF1{
	width:133px;
}
.hasTopSearch #QO1{
	width:100px;
}
.hasTopSearch #QV1{
	width:165px;
	padding:2px 4px 0 4px;
	vertical-align:-1px;
	margin-bottom:0;
}
.hasTopSearch .acSearch select,
.hasTopSearch .acSearch input{
	margin-right:5px;
}
ul.breadcrumb{
	font-size:13px;
	padding-top:0;
	padding-bottom:0;
	padding-right:0;
	height:28px;
	margin-bottom:0;
}
.breadcrumb li{
	vertical-align:top;
	padding-top:5px;
}
.divider{
	padding:0 5px;
}
.breadcrumb a:visited{
	color:#0088bb;
}

@media (max-width: 860px){
	.hasTopSearch .acSearch{
		width:240px;
	}
	.hasTopSearch #QF1{
		width:135px;
	}
	.hasTopSearch #QO1{
		margin-right:0;
	}
	.hasTopSearch .acSearch select{
		margin-bottom:4px;
	}
}
@media (max-width: 620px){
	.hasTopSearch .breadSearch .lcLeft,
	.hasTopSearch .breadSearch .lcRight{
		width:100%;
	}
	.hasTopSearch .acSearch{
		width:483px;
		margin:0 auto;
		border-radius: 10px 10px 10px 10px; 
		-moz-border-radius: 10px 10px 10px 10px; 
		-webkit-border-radius: 10px 10px 10px 10px;
	}
	.hasTopSearch #QF1{
		width:133px;
	}
	.hasTopSearch #QO1{
		margin-right:5px;
	}
	.hasTopSearch .acSearch select{
		margin-bottom:0;
	}
}
@media (max-width: 540px){
	.hasTopSearch .acSearch{
		width:260px;
	}
	.hasTopSearch #QF1{
		width:135px;
		margin:8px 8px 4px 8px;
	}
	.hasTopSearch #QO1{
		margin-right:8px;
	}
	.hasTopSearch #QV1{
		margin:8px;
	}
	.hasTopSearch .acSearch button{
		margin-right:8px;
	}
	.divider,
	.breadcrumb .divider{
		padding:8px;
	}
	ul.breadcrumb{
		margin:8px 8px 3px 8px;
	}
}
#spellCheckMsg{
	color:red;
	text-align:center;
	background: #eee;
	border: 1px solid #afafaf;
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.58);
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.58);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.58);
}

/* http://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line */
.lineContainer{
	overflow:hidden; /* clear the float */
}
.lineContainer .lcLeft{
	float:left;
	/* set the width */
}
.lineContainer .lcRight{
	overflow:hidden;
}
.bannerMain .lcLeft{
	width:305px;
}

.lineContainer2{
	overflow:hidden; /* clear the float */
}
.lineContainer2 .lc2Right{
	float:right; /* Put this element first in HTML and not in order */
	/* set the width */
}
.lineContainer2 .lc2Left{
	overflow:hidden;
}


.queryFormBox{
	margin:0 auto 25px auto;
	border:2px solid rgb(207, 232, 255);
	padding:18px;
	width:380px;
}
.oldIE .queryFormBox{
	width:390px;
}
.queryFormBox input{
	font-size:18px;
	margin-bottom:0;
}
.queryFormBox a{
	font-size:14px;
	vertical-align:2px;
}
@media (max-width:620px){
	.queryFormBox{
		margin-top:18px;
	}
}

.noBread #database-banner{
	margin-top:10px;
}

.mainPage{
	width:100%;
	display:inline-block;
}

.showOnlyWhenTiny{
	position:absolute;
	top:-999em;
	left:-999em;
}

#home-promo{
	background-size:cover;
	background-position:right 0;
}

.home-search-body{
	padding-bottom:12px;
}
.home-search-body #QV1{
	width:400px;
}
#home-search-container ul.tab{
	width:100%;
}
li.home-search-tab{
	width:33.3%;
}
#home-search-container li.home-search-tab a{
	width:100%;
}

.callout{
	overflow:auto;
}
.callout h2{
	margin-bottom:0.5em;
	margin-top:0;
}

div.mob1,
div.mob2,
li.mob,
tr.mob{
	display:none;
}
div.mob1,
div.mob2,
.mob a{
	color:#060;
}


@media (max-width: 1020px) {
	.container{
		width:100%;
		padding-top:0;
	}
}
@media (max-width: 980px){
	#footer ul.menu{
		float:none;
		display:inline-block;
	}
	#footer .siteinfo{
		margin-top:10px;
		float:none;
	}
}
@media (max-width: 860px){
	#menu-main-menu{
		margin-top: 15px;
		right:auto;
		left:50px;
	}
	/* Summary View - display mobile locators when the banner changes to one column */
	tr.mob{
		display:block;
		display:table-row;
	}
	div.mob1{
		display:block;
	}
}
@media (max-width: 820px) {
	.home-search-body #QV1{
		width:75%;
	}
}
@media (max-width: 767px){
	/* Full Record View - display mobile locators only when it shrinks to one column, as the column balancing code does not count them */
	li.mob{
		display:inline;
		display:inline-block;
	}
	div.mob2{
		display:block;
	}
}
@media (max-width: 720px){
	.home-search-body #QV1{
		width:72%;
	}
	li.home-search-tab{
		height:30px;
		padding-bottom:20px;
	}
	li.home-search-tab a{
		height:20px;
	}
	li.home-search-tab a span{
		padding:0 20px;
		display:inline-block;
	}
}
@media (max-width: 680px){
	.home-search-body #QV1{
		width:70%;
	}
}
@media (max-width: 640px){
	.container{
		width: 620px;
	}
	.allowTiny{
		width: 100%;
	}
	.hideWhenTiny{
		position:absolute;
		top:-999em;
		left:-999em;
	}
	.showOnlyWhenTiny{
		position:static;
	}
}
@media (max-width: 540px){
	.container-fluid{
		padding-left:2px !important;
		padding-right:2px !important;
	}
}

@media (max-width: 480px){
	.allowTiny{
		width: 460px;
	}
	.container,
	.mainPage,
	.innerMain{
		margin-left:0 !important;
		margin-right:0 !important;
		padding-left:0 !important;
		padding-right:0 !important;
	}
}