/******************************************
/ CSS for CAMEO Chemicals v2
/
/ Notes
/ - (Almost) everything is measured in em, not px. Yay!
/
/ - 4-argument padding/margin order is: top, right, bottom, left.
/
******************************************/

/* Things which have been changed for mobile devices:
	- Pseudo button margins (and floats)
	- Added result-name class for search results
	- Removed some h2 margins
	- changed searchbox (width and margins and padding)
	- changed section heading colors for chem, unna etc.
	- moving towards em measures (since we don't have to worry about IE6)
*/

@import url(mobile-site.css);

/* fix: some browsers put a blue box around images that are also anchors */
img.noborder { border-style: none; }

/* IE on Windows unique behavior: need float & clear or tables float left */
/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
table.simple_table
{
	float: none;
	clear: none;
	width: 99%;
}

/******************************************
 * Default styles
 *****************************************/

caption {
    font-weight: bold;
    text-align: center;
}

/******************************************
 * Styles for any page
 *****************************************/

.instructions {
 
    font-style: italic;
}

/* Hanging indent -- optimized for radio button with multi-line label */
.hanging {
    text-indent: -2.5em;
    padding-left: 2.5em;
}

/* It might be possible to get rid of this and add padding just to the un/na list */
div.mainbody > ul, div.mainbody  > ol {
	padding-left: 2em;
}

/* Creates seperation between textual elements and the side of the screen */ 
p, .field_label, .field_contents, div.show_hide_triangle, h2 {
	margin-left: .4em;
	margin-right: .4em;
}

/******************************************
/ Styles for Headers
******************************************/

/* main title for most pages */
/* make mobile site title (h1) the same font size as section headers (h2) */
h1 {
    color: black;
    font-weight: bold;
    font-size: 1em;
    font-family: Verdana, sans-serif, Helvetica;
    }

h2 {
    color: black;
    font-weight: bold;
    font-size: 1em;
    font-family: Verdana, sans-serif, Helvetica;
    }

h2.reactivity {
	float: none;
	clear: none;
	margin-bottom: 1em;
	color: black;
    font-weight: bold; 
    font-size: 1em;
}

h3.reactivity  {
	margin-top: 1em;
	margin-bottom: 1em;
	color: black;
    font-weight: bold; 
    font-size: 1em;
}

/* section titles within a page */
h3 { margin-top: 3em; color: black; font-weight: bold; font-size: 1em; font-family: Verdana, sans-serif, Helvetica; }

/* other titles within a page */
h4 { color: black; font-weight: bold; font-size: 1em; font-family: Verdana, sans-serif, Helvetica; }

/**********************************
 * Datasheet headers
 **********************************/

h1.datasheet {
	margin: .8em;
    font-weight: bold; 
    font-size: 1.1em;
}

h2.datasheet {
	float: none;
	clear: both;
	margin: 0px;
    border: 1px solid rgb(230, 230, 230);
	padding: .5em;
    text-align: left;
    font-weight: bold; 
    font-size: 1.1em;
	background-color: rgb(240, 248, 255);
}

h2.datasheet a {
	text-decoration: none;
	display: block;
}

h2.datasheet a img {
	float: right;
}

h3.datasheet {
	margin-top: 0.25em; 
	margin-bottom: 0.5em; 
	color: black; 
	font-weight: bold; 
	font-size: 1em; 
	font-family: Verdana, sans-serif, Helvetica; 
}


/******************************************
/ Styles for Anchors
******************************************/

/* default hyperlink look */
a, a:visited {
	color: #15008E;
}

/* special look for the search results (matches) */
a.match_name, a.match_name:visited, a.match_name:hover {
	color: black; 
	text-decoration: none;
	font-size: 1.1em;
	font-family: "Times new Roman";
	font-weight: bold;
	width: 100%;
	overflow: hidden;
}


.result-name { 
	margin: -.5em; 
	padding: .5em;
	overflow: hidden;
	background: white;
	position: relative;
}

.result-name div {
	overflow: hidden;
	float: left;
}

/* Each result-name div has two children: the first contains the actual result name,
	and the second is an empty div with an arrow as its background image to
	indicate it is a link to the datasheet */

.result-name div:first-child {
	width: 80%;
}

.result-name div:last-child {
	width: 20%;
	/* It takes 8 lines (6 here and 2 above) of css to put this arrow
		vertically centered with respect to the number of lines the result name
		takes up  */
	height: 100%;
	background: url("/images/right_arrow.png") no-repeat;
	background-position: right center;
	position: absolute;
	right: .5em;
	top: 0;
}

.result-name img {
	float: right;
}

.chemical-result .result-name {
	border: 3px solid rgb(72, 131, 161);
}

.unna-result .result-name {
	border: 3px solid rgb(221, 166, 95);
}

.react-result .result-name {
	border: 3px solid #CDBA96;
}


/* A hyperlink that should look sorta like a button */
a.pseudo_button, #clicked:hover
{
    border-style: solid;
    border-width: 2px;
    border-color: #DCDCDC #333333 #333333 #DCDCDC;
    background-color: #F2F2F2; 
    margin: .25em;
    padding: 0 0.5em;
    color: black; 
    text-decoration: none; 
    font-size: 1em; 
    font-family: Verdana, sans-serif, Helvetica;
	float: left;
}

#clicked, #clicked:hover {
	color: gray;
}

a.pseudo_button:hover 
{
	border: 2px solid #3D59AB;
    background-color: white; 
    color: #15008E; 
}

a.pseudo_button:visited 
{ 
    color: black; 
}

/*****************************************
/ Styles for paged regions
******************************************/

.navigator {
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: #eeeeee;
	background-color: #E0EEE0;
    padding: 0.25em;
    margin-bottom: 1.5em;
	text-align: center;
	font-size: 1.2em;
}

.navigator a {
    text-decoration: none;
}

#prev {
	float: left;
}

#next {
	float: right;
}

/******************************************
/ Lists and footnotes
*******************************************/

/* "no-bullet" lists have no item marker, just the items themselves
   in a vertical line. 
*/

ul.no-bullet {
    list-style: none;
    padding-left: 2em;
    }

ul.no-bullet2 {
    list-style: none;
    padding-left: 0;
    }

ul.no-bullet3 {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    }

ul.no-bullet3 {
    margin-bottom: 0.1em;
    }

/* "spaced" lists have extra space below each item. */

ul.spaced > li, ol.spaced > li, dl.spaced > dd {
    margin-bottom: 1em;
}

ul.spaced2 > li, ol.spaced2 > li, dl.spaced2 > dd {
    margin-bottom: 2em;
}


ul.spaced3 > li, ol.spaced3 > li, dl.spaced3 > dd {
    margin-bottom: 0.4em;
    }

/* "footnotes" div has vertical space; lists have no marker and
   specific vertical spacing.
*/

div.footnotes {
    margin: 0.3em 0;
}

ul.footnotes {
    margin: 0.25em 0 1em 0;
    padding: 0;
    list-style: none;
}

ul.footnotes li {
    margin: 0 0 0.5em 0;
    padding: 0;
}

/* "warnings" lists have a warning icon instead of a bullet */

ul.warnings {
	list-style: none;
}

ul.warnings li::before {
    background-image: url(../images/hazard_bullet_50.png);
	background-position: left bottom;
	background-repeat: no-repeat;
    /* background-size: 19px 18px; */
    background-size: contain;
    content: "";
    display: inline-block;
    margin-left: -19px;
    padding-right: 5px;
    height: 19px;
    width: 18px;
    vertical-align: bottom;
}

ul.warnings li {
	vertical-align: top;
	margin-left: 1em;
}

/******************************************
* Gridded tables (LOCs, Dupont, NFPA, etc)
*******************************************/

/* Gridded tables on datasheets have a common look and feel. 

   The known gridded tables are class="gridded dupont", "gridded aegls",
   "gridded erpgs", "gridded pacs", and "gridded lol". Some of the latter
   classes do not have distinct styles at this time.
*/

table.gridded {
    border-spacing: 0;
    border-collapse: collapse;
    }

table.gridded th {
    background-color: rgb(240, 248, 255);
    text-align: left;
    }

table.gridded th, table.gridded td {
    border: solid 1px;
    border-color: rgb(140, 140, 140);
    padding: 0.3em 0.85em;
    vertical-align: bottom;
    }
	
/**** AEGL table ****/
table.aegl th, table.aegl td {
    }

table.aegl td.value {
    min-width: 6em;
    }

div.aegl-cas {
    margin: 1em 0;
    }

/**** ERPG and PAC tables ****/
table.erpg th, table.erpg td, table.pac th, table.pac td {
    }

table.erpg td.name, table.pac td.name {
    min-width: 10em;
    max-width: 20em;
    }

table.erpg td.value, table.pac td.value {
    min-width: 6em;
    }

/**** CFATS table ****/

th.empty-th {
    border: none !important;
    background-color: white !important;
    }

th.cfats-release {
    color: white;
    background-color: #2FAA96 !important;   /* Same as #section4 header. */
    text-align: center !important;
    }

th.cfats-theft {
    color: white;
    background-color: #694489 !important;   /* Same as #section6 header. */
    text-align: center !important;
    }

th.cfats-sabotage {
    color: white;
    background-color: #4682b4 !important;   /* Same as #section3 header. */
    text-align: center !important;
    }


/**** PSM table ****/

table.psm th {
    height: 2em;
    vertical-align: bottom;
    }



/* UNNA table styles below should be consolidated into this section. */

/* NFPA table (not diamond) */

table.nfpa td.diamond {
    vertical-align: top;
    }

table.nfpa td.hazard {
    vertical-align: bottom;
    }

table.nfpa td.value {
    vertical-align: bottom;
    text-align: center;
    }

table.nfpa td.description {
    vertical-align: bottom;
    }

/* NFPA diamond table 
   (not gridded but sometimes contained in a gridded table) 
   NOTE: Must override incompatible styles inherited from table.gridded .
*/

table.nfpa-diamond
{
	background-image: url(../images/nfpa/nfpa.png);
	background-position: center;
	background-repeat: no-repeat;
	font-weight: bold;
	font-size: 16px; /* This always needs to be 16px b/c of background image */
	font-family: sans-serif;
    width: 75px;
    height: 75px;
    border-spacing: 0;
    border-collapse: collapse;

}

table.nfpa-diamond td {
    /* Override incompatible styles inherited from surrounding 
       table.gridded . Also styles common to all diamond cells.
    */

    padding: 0;
    border: none;
    width: 33%;
    height: 33%;
    }

table.nfpa-diamond td.nfpa-flam {
    text-align: center;
    vertical-align: bottom;
    }

table.nfpa-diamond td.nfpa-health {
    text-align: right;
    vertical-align: middle;
    }

table.nfpa-diamond td.nfpa-react {
    text-align: left;
    vertical-align: middle;
    }

table.nfpa-diamond td.nfpa-special-1 {
    text-align: center;
    vertical-align: top;
    }

table.nfpa-diamond td.nfpa-special-2 {
    text-align: center;
    vertical-align: top;
    }

table.nfpa-diamond td.nfpa-special-3 {
    text-align: right;
    vertical-align: bottom;
    }

/******************************************
/ Styles for chemical.html
******************************************/

div.dsht_buttons
{
	float: right;
}

div.pretitle
{
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 1em;
}

.title-box
{
	float: none;
	clear: none;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
}

.title-box table {
	display: inline-table;
}

div.section_help
{
	margin-bottom: 2em;
}

.no_data { color: #999999; }
.prop_label { 
	font-weight: bold; 
	vertical-align: top;
}

div.field_label { font-weight: bold; margin-top: 1em; margin-bottom: 0.5em; }
div.field_contents { margin-top: 0.5em; margin-bottom: 1.5em; }
div.physical_props { margin-top: 0.5em; margin-bottom: 0.5em; }

table.horizontal-fields
{
	width: 99%;
	border: 0px;
}

table.horizontal-fields th
{
	text-align: left;
}

table.horizontal-fields td
{
	vertical-align: top;
	padding: 0px;
}

/* Puts some white space after rows of data in the table. */
table.horizontal-fields tbody  td {
	padding-bottom: 1em;
}
	
/******************************************
/ Styles for unna.html
******************************************/

ul.attention {
	/* Note: pixel measurement because it has to match image size */
	margin-left: 15px;
	padding-left: 0px;
	list-style-image: url(../images/green_arrow.png);
}

table.erg_info
{
	width: 100%;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

div.erg_names
{
	border: 1px solid #3B6AA0;
	padding: 0.5em;
	background-color: #F0F8FF;
}
/* Note: remove if we put these back into a table */
.erg_names, .erg_guide {
	margin-bottom: .5em;
}

/* Indenting li elements courtesy of CSS Cookbook (O'Reilly) p.107 */
div.erg_names ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}

div.erg_names li
{
	text-indent: -1em;
	margin: 0.33em 0.5em 0.33em 2em;
}

div.erg_guide
{
	border: 1px solid #E3701A;
	padding: 0.5em;
	background-color: #FFF8DC;
}

div.erg_greenpages
{
	border: 1px solid #009900;
	margin-bottom: 1em;
	padding: 0.5em;
	background-color: #F0FFF0;
}

/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
table.cfr49
{
	width: 99%;
	border: 1px solid #B4B4B4;
}

table.cfr49 thead th
{
	border-right: 1px solid #B4B4B4;
	padding-left: 1em;
	padding-right: 1em;
	text-align: left;
}

table.cfr49 tfoot td
{
	font-size: .9em;
}

table.cfr49 tbody td
{
	padding-left: 1em;
}

/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
table.erg_distances
{
	width: 99%;
	border: 1px solid #B4B4B4;
	margin-top: 1em;
	background-color: white;
}

table.erg_distances thead th
{
	font-weight: normal; 
	text-align: center;
}

/* Separate the unit line in some table headers */
div.unit {
    margin-top: 0.7em;
}

/* ALSO USED IN MyChemicals page!!!! */
.odd {
    background-color: white;
}

.even {
    background-color: #f0f8ff;
}


/******************************************
/ Styles for search
******************************************/

table.searchbox
{
    float: none;
    clear: none;
    background-color: #F2F2F2;
    border: 1px solid #DDDDDD;
    margin-left: 1em;
}

div.searchbox 
{
	width: 100%;
    background-color: #F2F2F2;
    border: 1px solid #DDDDDD;
}

/* Not changing these pixel measurements b/c I can't find a result_nav anywhere */
div.result_nav
{
	background-color: #E0EEE0;
	padding: 4px;
	margin-bottom: 15px;
}

div.result
{
    background-color: #F2F2F2;
    padding: .5em;
    border: 1px solid #DDDDDD;
    margin-top: .5em; 
    margin-bottom: .5em;
	overflow: hidden;
}

div.chemical-result {
    background-color: #f2f2f2;
}

div.react-result {
    background-color: #e5e4c6;
    border: 1px solid #CDBA96;
}

div.unna-result {
	background-color: #FFF8DC;
	border: 1px solid #ECC3BF;
}

	
.react_lable
{
    color: black; 
    font-weight: bold; 
    font-size: .8em; 
    font-family: Verdana, sans-serif, Helvetica;
}

ul.synonyms { 
    margin-top: 0px;
    list-style: disc;
}

/* field names (labels) on the results page are formatted diff from field data */
.match_label { 
    color: black; 
    font-weight: bold; 
    font-size: .9em; 
    font-family: Verdana, sans-serif, Helvetica;
}

/* Keep span.match and strong.highlight identical; we're transitioning to
   the latter. */

span.match {
    background-color: #b4eeb4;
}

strong.highlight {
    background-color: #b4eeb4;
}

div.partial_matches
{
	margin-top: .5em;
	margin-left: .5em;
	
}

/* Keep span.match and strong.highlight identical; we're transitioning to
   the latter. */

span.match {
    background-color: #b4eeb4;
}

strong.highlight {
    background-color: #b4eeb4;
}


div.advanced-criterion {
    margin-bottom: 1em;
}

/******************************************
/ Styles for forms
******************************************/

form.standard {
    /*background-color: #F2F2F2;*/
    margin: 1ex 0;
    padding: 0.5ex 1ex;
    }

fieldset {
	margin-bottom: 1.5em;
	padding-left: 1em;
	padding-bottom: 0.5em;
    }

legend {
	margin-bottom: 1em;
    color: black;
}

.error-message {
    color: #cc0000;
    background-color: #ffeeee;
    font-size: normal;
    font-weight: bold;
    font-style: italic;
}

input {
	font-size: inherit;
}


/************************************************
/ Utility forms (used mainly on developer pages)
*************************************************/

form.utility {
    border: double;
    margin: 1ex  0;
    padding: 1ex;
    }

form.utility h1 {
    font-size: x-large;
    background-color: #f2f2f2;
    margin: 0 0 0.5ex 0;
    padding: 0.25ex;
    }

table.compact-form {
    margin: 0;
    }

table.compact-form th {
    text-align: left;
    padding: 0 1ex;
    /* border: solid 1px; */
    }

table.compact-form td {
    /* border: solid 1px; */
    }

table.compact-form td.submit {
    }
    
/******************************************
/ Styles for MyChemicals and reactivity
******************************************/

/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
.materials-list {
	/*float: none;*/
	/*clear: none;*/
	width: 99%;
    border: 1px solid #F2F2F2;
    text-align: left;
}

/* main list of hazard statements on the reactivity page*/
div.hazards, ul.hazards
{
	float: none;
	clear: none;
    background-color: white;
    border: 1px solid #DDDDDD;
    padding: .4em;
    margin: 1em 0 1em 0;
}

ul.hazards li {
    margin-left: 1em;
}

div.pairwise_hazards, div.pairwise_hazards_selected {
	float: none;
	clear: none;
    background-color: #F2F2F2;
    border: 1px solid #DDDDDD;
    padding: .5em;
    margin: 1em 0 1em 0;
}

div.pairwise_hazards_selected {
    background-color: #FFFFCC;
}

div.pairwise_nohazards
{
	float: none;
	clear: none;
    background-color: #F5FFFA;
    border: 1px solid #CCFFCC;
    padding: .9em;
    margin: 1em 0 1em 0;
}

div.documentation
{
	float: none;
	clear: none;
    background-color: white;
    border: 1px solid #DDDDDD;
    padding: .9em;
    margin: 1em 0 1em 0;
}

table#compat_chart
{
	background-color: white;
	min-width: 99%;
	margin-top: .5em;
}

table#compat_chart th
{
	border: 1px solid #B4B4B4;
	background-color: #E0EEE0;
    padding: .5em;
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
}

table#compat_chart td
{
	border: 1px solid #B4B4B4;
    padding: .5em;
    text-align: left;
    vertical-align: top;
}

table#compat_chart td.compatChartCell:hover
{
	/*background-color:yellow;*/
	background-color: #FFFFCC;
	cursor: pointer;
}

td.noHazards
{
	background-color: #CCFFCC;
	/*background-color: #F5FFFA;*/
}


/******************************************
/ Styles for about.html
******************************************/

/* The table comparing CAMEO Chemicals platforms ("formats") */

table.cc-formats {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 3em;
    }

table.cc-formats th {
    background-color: #9abfd1;   /* From mobile app. */
    text-align: center;
    }

table.cc-formats th, table.cc-formats td {
    border: solid 1px;
    border-color: rgb(140, 140, 140);
    padding: 0.5em 1em;
    vertical-align: middle;
    }


table.cc-formats col.features {
    width: 40%;
    }

table.cc-formats col.yes_no {
    width: 15%;
    }

table.cc-formats td.yes {
    /* "Yes" cells have green background.
     *     #b4eeb4 = search results highlight
     *     #ccffcc = mobile app color
     */
    background-color: #b4eeb4;
    text-align: center;
    }

table.cc-formats td.no {
    text-align: center;
    }


/******************************************
/ Styles for Javascript and popdown help
******************************************/
.chem_info, div.synonyms {
	display: none;
}

div.helptext {
    margin: 0.5em 2em 1em 2em;
    border: 1px dashed #AAAAAA;
    padding: .25em;
    background-color: #FFFFCC;
    display: none;
}
/* The bigger font size made this margin look odd */
div.helptext p:first-child {
	margin-top: 0;
}

img.dropdown
{
	border-style: none;
	vertical-align: baseline;
}

div.show_hide_triangle {
    display: block;
}

/* Styles for mobile landing page */

.landing {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

h1.landing {
	font-size: 1.1em;
}

.landing-buttons {
	text-align: center;
}

.landing-buttons button {
	font-size: 1.3em;
}