/*
 * Developed by Altum, Inc.
 * 12100 Sunset Hills Rd, Suite 101, Reston, VA 20190 USA
 * Copyright (c) 2014-2016 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;
}


.old-ie #database-banner{
	float:none;
}

#database-banner div{
	cursor:default;
}

.siteTitles{
	width:450px;
}

@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;
	}
}

/* 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;
}
.banner-main .lcLeft{
	width:305px;
}

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


.queryFormBox{
	margin:0 auto 25px auto;
	border:2px solid rgb(207, 232, 255);
	padding:18px;
	width:380px;
}
.old-ie .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;
	}
}

.no-bread #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;
	}
}