/******************************************
/ CSS for CAMEO Chemicals v2
/
/ Notes
/ - The units 'em' don't work reliably on IE 6 for Windows, they are way too big compared to how the 
/	same value is displayed in Netscape, Firefox on Windows and Netscape, Firefox, Safari, and IE on Mac
/ - So, I am using mostly pixel units for margins, etc.
/
/ - 4-argument padding/margin order is: top, right, bottom, left.
/
******************************************/

@import url(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;
    }

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

/* main title for most pages */
h1 {
    margin-bottom: 1.6em;
    color: black;
    font-size: 18px;
    font-family: Verdana, sans-serif, Helvetica;
    }

h2 {
    margin-top: 2em;
    color: black;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana, sans-serif, Helvetica;
    }

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

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

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

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

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

h1.datasheet {
	margin: 16px;
    font-weight: normal; 
    font-size: 20px;
}

h2.datasheet {
	float: none;
	clear: none;
	margin-top: 20px;
	margin-bottom: 0em;
    border: 1px solid black;
	padding: 6px;
    text-align: left;
    font-weight: bold; 
    font-size: 14px;
    color: white;
}

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


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

/* default hyperlink look */
a { color: #15008E; text-decoration: underline; font-size: 12px; font-family: Verdana, sans-serif, Helvetica; }
a:visited { color: #15008E; text-decoration: underline; font-size: 12px; font-family: Verdana, sans-serif, Helvetica; }
a:hover { color: black; text-decoration: underline; font-size: 12px; font-family: Verdana, sans-serif, Helvetica; }

/* special look for the search results (matches) */
a.match_name { color: #15008E; text-decoration: underline; font-size: 14px; font-family: Verdana, sans-serif, Helvetica; }
a.match_name:visited { color: #15008E; text-decoration: underline; font-size: 14px; font-family: Verdana, sans-serif, Helvetica; }
a.match_name:hover { color: black; text-decoration: underline; font-size: 14px; font-family: Verdana, sans-serif, Helvetica; }

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

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

.navigator a {
    text-decoration: none;
    }

/******************************************
/ 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-image: url(/images/warning.png);
}

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;
	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;
	/* fix for IE7 cutting off button borders, doesnt work for IE8 */
	padding-top: 6px;
	padding-bottom: 6px;
}

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

/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
table.title-box
{
	float: none;
	clear: none;
	width: 99%;
	border: 1px dashed #AAAAAA;
	margin-top: 0px;
	margin-bottom: 1em;
}

#section1 { background-color: #698B22; }
#section2 { background-color: #E3701A; }
#section3 { background-color: #4682B4; }
#section4 { background-color: #2FAA96; }
#section5 { background-color: #AA6600; }
#section6 { background-color: #694489; }
/* section7 is used in UN datasheets */
#section7 { background-color: #B4B4B4; }
/*#section7 { background-color: #6996AD; }*/

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

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

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 with multiple fields displayed */
/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
table.horizontal-fields
{
	width: 99%;
	margin-bottom: 1em;
	/*this may work, but I don't care that much -- margin-left: -1px;*/
	border: 0px;
}

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

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


/******************************************
/ Styles for unna.html
******************************************/

ul.attention
{
	list-style-image: url(/images/green_arrow.png);
}

/* WAS FOR UN/NA text at top of page
ul.attention ul
{
	list-style-image: none;
}
*/

/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
table.erg_info
{
	width: 99%;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

div.erg_names
{
	border: 1px solid #3B6AA0;
	padding: 0.5em;
	background-color: #F0F8FF;
}

/* 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: 11px;
}

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 
{
    background-color: #F2F2F2;
    border: 1px solid #DDDDDD;
    margin-left: 1em;
    padding-left: 1em;
}

div.result_nav
{
	background-color: #E0EEE0;
	padding: 4px;
	margin-bottom: 15px;
}

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

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;
	/*border: 1px solid #E3701A;*/
    /*background-color: #f5deb3;*/
    }

.react_lable
{
    color: black; 
    font-weight: bold; 
    font-size: 11px; 
    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: 11px; 
    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-left: 2em;
}

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

/* Workaround for older Macintoshes */
input[type="text"] {
    border: solid 1px rgb(178, 178, 178) ;

    }

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


/************************************************
/ 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: 8px;
    margin: 1em 0 1em 0;
}

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

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

div.pairwise_hazards_selected
{
	float: none;
	clear: none;
    background-color: #FFFFCC;
    border: 1px solid #DDDDDD;
    padding: 10px;
    margin: 1em 0 1em 0;
}

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

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

/* IE 6: width=100% causes table on home page to wrap below the sidebar!! */
table#compat_chart
{
	background-color: white;
	min-width: 99%;
}

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

table#compat_chart td
{
	border: 1px solid #B4B4B4;
    padding-top: 6px;
    padding-left: 18px;
    padding-bottom: 6px;
    padding-right: 6px;
    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
******************************************/

div.helptext {
    /*margin: 1em 15px;*/
    margin: 0.5em 2em 1em 2em;
    border: 1px dashed #AAAAAA;
    padding: 6px;
    background-color: #FFFFCC;
    display: none;
    }

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

div.show_hide_triangle {
    display: block;
    }