@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* Note: the Google Web Fonts @import must be the very first line of the CSS file */
/*
	Todd Motto Labs
	URL: www.toddmotto.com
	Modified starting November 2017 by RDM & CEM
	
	Styles for CHROMAXION website
*/

/*------------------------------------*\
    RESET
\*------------------------------------*/

*,
*:after,
*:before {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

body {		/* EDIT: here we set the body text font.  Set the font size in pixels here.  All other font sizes set as a % of this main font size */
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	line-height: 1.5;
	font-size: 13px;
	color: #444;		/* EDIT: here we set the body text color.  Could be darker, e.g. #444; */
}
div.wrapper {
	/*max-width:1280px;
	/*max-width: 600px;		 for testing on Carol's 1200px-wide monitor */
	/* EDIT: SET THE OVERALL BACKGROUND COLOR HERE */
	background-color: #f0f0f0;		/* Carol likes #f2f6f7 pale blue. */
	position: relative;
	padding: 15px 20px 25px;		/* Top/bottom affects blue space above navbar; left/right affects space when browser width gets narrower ... than ... ? */
}
header {
	padding: 10px 25px 5px;	/* less padding for bottom - CEM 3/2 */
	background: white; 
	overflow: hidden;
	border-bottom: 1px solid #e8eced;		/* subtle, darker shade of original background color */
}
.logo {
	float: left;
}
.logo-img {
	width: 467px;		/* CEM changed 12/22: Revised SVG logo with tagline needs specific height and width */
	height: 95px;
}
.header-right {
	text-align: right;
	color: #444;
	font-size: 115%;
}
.header-right a {
	color: #415a72;	/* Navbar normal blue */
} 
.header-right a, .breadcrumbs a {
	text-decoration: underline;
}
.header-right a:hover, .breadcrumbs a:hover {
	text-decoration: none;
}
h3[itemprop] a:hover {			/* select a that's a child of h3 having attribute itemprop */
	text-decoration: none;		/* Don't show an underline under the phone number, as it's not a real link */
}

/* Breadcrumbs, including breadcrumb right-caret characters
 * Use like this: <i class="fa fa-caret-right"></i>
 * see: https://fontawesome.io/icon/caret-right/
 */
/*.fa {
	font: normal normal normal 1.5em/1;
}*/
.breadcrumbs .fa-caret-right {
	color: orange;		/* I like this orange after all (it's #ffa500). */
}
.breadcrumbs i.fa {
	margin: 0;
	padding: 0 0 0 0.1em;		/* Put a little space to the left of the caret */
	vertical-align: -0.1em;		/* Move the caret down in the line just a tad */
	font-size: 140%;
}
.breadcrumbs {
	text-align: left;
	font-weight: bold;
	font-size: 80%;
	margin-top: 0.5em;
}
/* EDIT: set the background color of the breadcrumbs here.  Comment out the background-color if you don't want any contrasting background color for the breadcrumbs */
.breadcrumbs span {
	/* background-color: white; */
	padding: 0 0.4em;		/* Can I make the white stick out beyond the article text, so that the bread-crumbs left-align even with the body text? */
}

footer {
	border-top: 4px solid #0fa4b3; /* teal from logo.  blue #5371b0 from logo.  original teal: #2ba6cb; */
	text-align: center;
	font-size: 90%;
	padding: 15px 10px;
}


/*------------------------------------*\
    Responsive Navigation
\*------------------------------------*/
a,
a:hover {
	text-decoration:none;
}
nav ul, nav ol {
	list-style:none;
}
.main {
	width: 100%;
	/*max-width: 800px;	* Width of content within - no, let individual content areas set this max width, e.g. see .content-text below */
	margin: 0px auto;		/* center the main box within wrapper */
	text-align: center;
}
/* Robin, here is where the main content is aligned, including the Spectral Library table. */
article.content {
	margin: 1em auto;		/* Center the article horizontally */
	max-width: 800px;
	text-align: left;		/* Within the centered article, left-align the objects */
}
/* Navigation styling */
.nav {
	position:relative;
	display:inline-block;
	font-size:15px;		/* was 14px */
	font-weight:900;
}
.nav-list {
	
}
.nav-item {
	float:left;
	*display:inline;
	zoom:1;
}
.nav-item a {
	display:block;
	padding:15px 15px;		/* 2/20 was 20px left/right, make narrower to accomodate one new menu item */
	color:#FFF;
	background: #415a72; /* nav blue */
}
.nav-item:first-child a {
	border-radius:5px 0 0 5px;
}
.nav-item:last-child a {
	border-radius:0 5px 5px 0;
}
.nav-item a:hover {
	background:#2C3E50;
}
/* Mobile Navigation */
.nav-mobile {
	display:none; /* Hide from browsers that don't support media queries */
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	background:#415a72 url(../img/nav.svg) no-repeat center center;
		/* was #34495E; make this a little lighter for better contrast */
	height:40px;
	width:40px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

/* A vertical menu of links, like a submenu in a sidebar ***************************/
nav.links {
	display: block;
}
nav.links ul {
	padding: 0;
}
nav.links li a {
	display: block;
	padding: 7px 15px;
	color: white;
	font-size: 15px;
	font-weight: bold;
	background: #415a72;
	/*border-radius: 5px;*/
	text-decoration: none;
}
nav.links li a:hover {
	background: #2c3c50;
	text-decoration: none;
}
nav.links li:first-child a {
	border-radius: 5px 5px 0 0;		/* upper left, upper right, lower right, lower left */
}
nav.links li:last-child a {
	border-radius: 0 0 5px 5px;
}


/*------------------------------------*\
    Content elements
    See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
\*------------------------------------*/

/* Container for items to wrap according to page width */
.flex-wrapper {
	margin: 1em auto;		/* same as for other content area "wrappers" such as article.content */
	display: flex;
	/* flex-direction is row by default */
	flex-wrap: wrap;	/* flex items will wrap onto multiple lines, from top to bottom */
	/* justify-content is flex-start by default: items are packed toward the start of the line */
	justify-content: center;	/* Looks better to me for the home page boxes */
	align-items: flex-start;	/* flex items will be top-aligned */
	align-content: flex-start;		/* how to space flex items vertically when there is more than one row.  Flex-start means start at the top left and start next row just below the row above, no extra vertical space */
}
article.home-block {
	width: 300px;		/* Width for each block.  Determines how many blocks will fit in a row */
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	padding: 10px 19px;
	margin: 0 0 25px 25px;	/* Use these margins for (left) flex-start justify-content */
	margin: 0 12px 25px;	/* Use these margins for center justify-content */
	border: 1px solid #d8d8d8;
	background: white;
	text-align: left;
}


/*------------------------------------*\
    Headings, paragraphs, typography
\*------------------------------------*/

p {
	margin: 0 0 1em;	/* Paragraph margins: zero except 1em for the bottom */
}
p.hanging {			/* When you want subsequent lines of the paragraph to be indented */
	padding-left: 1.2em;		/* Overall indent - set to match four &nbsp; */
	text-indent: -1.2em;		/* Negative indent for the FIRST line of the paragraph */
}
.indent {
	padding-left: 1.2em;		/* Apply to div or p to match the hanging indent amount */
}
h1, h2, h3, h4, .spectral-note {		/* EDIT: here we set the heading colors */
	color: #415a72;	/* Navbar normal blue */
	line-height: 1.3;
	margin: 0 0 0.5em;
}
/* What font for headings?  Roboto?  Oswald?  Open Sans?  */
/* If Roboto, that's a Google Web Font and must be loaded at the beginning of this style sheet */
/* Class "spectral-note" is for styling the blue filter note on the Spectral Library page.  It should look like h3 except inline */
h1, h2, h3, h4, .spectral-note {
	font-family: Roboto, Lucida Grande, Ariel, Verdana, sans-serif;
}
h1 {	
	font-size: 150%;
}
h2 {
	font-size: 128%;
	/*color: #905493;		* Purple - Robin, set H2 color here, I think same dark blue as H1 is a little boring, compared to the orange from your old website.  That orange looks too bright here: #ff8000.  Another color I like is #c25084 rose, between purple and red of the logo dots, that's pretty good but I think no better than the purple - CEM *
	color: #c25084;		* Rose - do you like it better than purple?  Let's try it for a while - CEM *
	No, actually for RMI I like the dark blue after all */	
}
article.home-block h2 {
	color: #415a72;	/* Navbar normal blue.  Because ... the purple looks odd in the home page blocks */
}
h3, .spectral-note {
	font-size: 115%;
}
h4 {
	font-size: 106%;
}

/*------------------------------------*\
    Website-specific items
\*------------------------------------*/

.productsIcon {
	margin: 0px 5px 5px 0px;
	float: left;
}
.skyblue, .spectral-note {
	color: #0071f0;	/* changed from #0080ff; for accessibility CEM 3/22 */
}

/* List with colored bullets */
/* See: https://stackoverflow.com/questions/5839553/how-can-i-change-the-color-of-the-dot-in-an-unordered-list */

/* First though, restore some padding after the above CSS "reset" to eliminate browser differences.  See: https://stackoverflow.com/questions/5561101/html-css-reset-list-padding-to-default */

article ul {
	padding: 0 0 0 2.0em;
	margin: 0 0 0.7em 0;
}
p.list-intro {
	margin-bottom: 0.3em;	/* regular paragraph bottom margin is 1.0em, too much space */
}

/* Many sources, including: https://www.sitepoint.com/use-webfont-icons-bullet-points-html5-lists/
https://fontawesome.io/cheatsheet/
fa-plus [&#xf067;] fa-circle [&#xf111;] fa-caret-right [&#xf0da;] fa-check [&#xf00c;]
 */

article ul.circle, article ul.check {
	list-style-type: none;		/* remove list bullets to start */
	/* Leave padding and margins alone */
}
article ul.circle li, article ul.check li {
	text-indent: -1.4em;		/* Match width below, to give room for the icons */
}
article ul.circle li::before, article ul.check li::before {
	font-family: 'FontAwesome';
	float: left;
	width: 1.4em;
}
article ul.circle li::before {
	font-size: 0.7em;
	padding-top: 0.2em;		/* move the bullet down a tad */
	color: #0fa4b3;
	content: '\f111';	/* fa-circle */
}
article ul.circle-skyblue li::before {
	color: #0071f0;
}
article ul.check li::before {
	font-size: 0.7em;
	padding-top: 0.2em;		/* move the bullet down a tad */
	color: orange;		/* later: sample from logo color dots */
	content: '\f00c';	/* fa-check */
}

/* Alert!  the list icons can't be larger than 0.7em, otherwise the indent increases with every list item.  Test here if you have more ideas to try to fix.  It seems like some indent is being applied cumulatively */
article ul.test {
	list-style-type: none;		/* remove list bullets to start */
	/* Leave padding and margins alone */
	/* Resetting them to zero here does not help */
}
article ul.test li {
	text-indent: -1.4em;		/* Match width below, to give room for the icons */
}
article ul.test li::before {
	font-family: 'FontAwesome';
	float: left;
	width: 1.4em;
	font-size: 1.0em;
	padding-top: 0.2em;		/* move the bullet down a tad */
	color: #905493;		/* purple from logo.  later: sample from logo color dots */
	content: '\f00c';	/* fa-check */
}

article ol li {		/* Otherwise our FAQ answers start outside the article left margin */
	margin: 0px 0px 0.7em 1.2em;		/* FYI Left margin matches that of class "indent" */
}

article a, p a, 
table.info-table th a /* info-table has not migrated thoroughly to the 2018 version of the websites - needs more testing, so far intended to apply only to the table in information/color_charts.html and ... oh look: the information/neutral_references.html page has links in the table headings too!  - CEM 3/18 */ {
	/* color: #0fa4b3; 	teal from logo. */
	/* color: #3b98a0;	 * 2021: a slightly less saturated, and darker teal but flunks contrast accessibility test */
	color: #1b7880;	/* still too light: #25828a; "a darker teal that meets WCAG AA contrast requirements" */
	background-color: white;		/* CEM added 12/22: color link backgrounds white to be more visible */
	border-radius: 4px;
	padding: 0px 2px;
}
.breadcrumbs a,
table.features a,
table.papers-media a,
table.color-info a {
	color: #1b7880;	/* Meets WCAG AA contrast requirements against #f0f0f0 gray or #fff9f2 seashell background */
}
article a, p a {
	text-decoration: underline;
}
article a:hover, p a:hover {
	text-decoration: none;
}

div.development {						/* For the home page development notice */
	background-color: #ffe8a2;
	outline: 4px dotted #ffe8a2;
}
div.development p a {
	color: #116b73;
	background-color: #ffe8a2;
	padding: 0;
}



/* Note: the remaining styles for the fine art paper tables are in fine_art_paper.html */

/* Tables in general: add some margin at the bottom - adjust if this selector is too general - CEM */
table {
	margin-bottom: 1em;
}

table.features, table.features-gray {
	background: white;
	padding: 2px;
}
table.features th {
	/* color: #0080ff;	 * skyblue */
	/* color: #0071f0;	 * accessibility skyblue - except not contrasty enough against the lt. orange bg. */
	color: #006eed;		/* ANDI tool says use this slightly darker blue instead */
	/*background: #fff9f2;		* The light orange - 6/22 no leave it white for contrast, note 8/22 I'm still seeing light orange bg in colorchecker.html */
	text-align: center;
}
table.features-gray th {
	color: #555;
	background: #efefef;
	text-align: center;
}
/* https://www.w3.org/Style/Examples/007/evenodd.en.html */
table.features tr:nth-child(even) {
	background: #fff9f2;	/* was #fffaf4; */
	/* Note: it's difficult to restart this alternating background on specific rows */
}
table.features td, table.features th, table.features-gray td, table.features-gray th {
	padding: 0px 2px;
}
/* Note there are more features table settings in the products area */

/* HR: color it like this: <hr style="border-color: orange;" /> */

hr {
	border-color: #dddddd;
	border-style: solid none none;
	border-width: 1px 0 0;
	height: 0;
	margin: 2em 0;
}

/*------------------------------------*\
    Settings for the sidebar
    - for desktops
\*------------------------------------*/

aside.right-sidebar {
	min-width: 200px;
	width: 35%;
	float: right;
	background-color: white;
	padding: 0.5em 1.0em;
	margin: 0.5em 0 1.0em 0.7em;
}
aside.right-sidebar h1,
aside.right-sidebar h2 {
	border-bottom: 2px solid #0fa4b3;
}

/* ------------------------------------------------------------------ *\
 * Products and Color Information Pages
\* ------------------------------------------------------------------ */

.productsIcon		/* For shadowed round-cornered images in the products overview table */
{
	margin: 0px 8px 5px 0px;
	float: left;
}
ul.double-spaced li {
	margin-bottom: 1em;
}
table.features tr td {		/* Center-align all columns except ... */
	text-align: center;
}
table.features tr td:nth-child(1) {	/* the first column */
	text-align: left;
}
/* Note features-gray tables are NOT included in the centering rule above, so their cells will be left-justified by default */
table.features-gray tr td:nth-child(1) {	/* the first column, make it gray */
	background: #efefef;
}
/* If you want a features table to have the peach alternating stripes but also left column background peach, ADD this class to the table, e.g. table class="features peach-left" */
table.peach-left tr td:nth-child(1) {
	background: #fffaf4;
}
table.left tr td {
	text-align: left;	/* Add "left" class to tables where you want the table cell data left-aligned, like on the spectrometer page. */
}
/* For color charts tested tables - adjust styles or add more if we need other than centered and bold */
td.color-red {
	color: #ef0000;		/* Accessible color for red "no" text in Imaging Encyclopedia.  Was "red." */
}
td.color-green {
	color: #008a00;		/* Accessible color for green "yes" text in Imaging Encyclopedia.  Was #00aa00 */
}
td.color-red, td.color-green {
	text-align: center;
	font-weight: bold;
}

/* Note there are more table settings within the general tables section */


/* For hiding columns 5 and 6 based on browser width: see https://stackoverflow.com/questions/17020595/hide-columns-in-responsive-table-using-css */


/*------------------------------------*\
    Media Queries
    Override the default settings above.
\*------------------------------------*/

/*@media only screen and (min-width: 320px) and (max-width: 768px) {*/
/* Switch to "hamburger" menu when browser width becomes less than 600px */
/* We may need to adjust the max-width based the width of the menu items */
/* Yup - adjusted wider to 680px - CEM Feb 2020 - for add of link to sibling website */
@media only screen and (max-width: 680px) {
	.nav-mobile {
		display:block;
	}
	.nav {
		width:100%;
		padding:40px 0 0;
	}
	.nav-list {
		display:none;
	}
	.nav-item {
		width:100%;
		float:none;
	}
	.nav-item a {		/* background color of handheld menu */
		background-color: #415a72; /* was #34495E; make this a little lighter for better contrast */
		padding:10px;
	}
	.nav-item:first-child a {
		border-radius:5px 0 0;
	}
	.nav-item:last-child a {
		border-radius:0 0 5px 5px;
	}
	.nav-active {
		display:block;
	}
	.nav-mobile-open {
		border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
	}
	table#spectral-library th.col6, table#spectral-library td.col6 {
		display: none;
	}
}

@media only screen and (max-width: 480px) {	/* iPhone = 320 - 480 px wide */
	article.home-block {
		width: 100%;
	}
	.logo-img {
		width: 100%;
		height: auto;
	}
	aside.right-sidebar {
		width: 100%;
	}
	/* Hide the Source column (2nd column) for small screen widths */
	table#spectral-library tr td:nth-child(2),
	table#spectral-library tr th:nth-child(2) {
		display: none;
	}	
}

/*------------------------------------*
 * For Spectral Library
 * 
 * Styles for the checkbox grid layout.  Thanks to: https://css-tricks.com/getting-started-css-grid
 *------------------------------------*/

/* We must specify the number of columns, so set up some media queries for that */

.checkbox-grid {
	display: grid;
	grid-template-columns: 1fr;	/* 1 column = 1 fr-action of our grid */
}
.checkbox-grid .check-me {
	text-align: right;
	padding: 4px 0px;		/* Give vertical separation between checkboxes for small screens */
	display: block;		/* Set up to vertically align the checkboxes relative to labels - CEM 3/22 */
}
@media screen and (min-width: 320px) {	/* If larger than 320px, display two columns */
	.checkbox-grid { grid-template-columns: 1fr 1fr; }
}
@media screen and (min-width: 500px) {
	.checkbox-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (min-width: 750px) {
	.checkbox-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
@media screen and (min-width: 1024px) {
	.checkbox-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	.checkbox-grid .check-me { padding: 2px 0px; }
}	

/* For the Spectral Library filter checkboxes - make them bigger.  And align them vertically relatively to their labels CEM 3/22.  Thanks to https://www.geeksforgeeks.org/how-to-align-checkboxes-and-their-labels-on-cross-browsers-using-css/ */
div.checkbox-grid input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	vertical-align: bottom;
	position: relative;
   bottom: 1px;
}

/*----------------------------------------------------*\
    Spectral Library Table
    and Color Information Table
    use class "color-info" for the exceptions - well -- see if that can get precedence over ID
\*----------------------------------------------------*/

table#spectral-library {
	border-collapse: collapse;
	background: white;
	border: 1px solid #ddd;
	border: 2px solid white;
}

table#spectral-library tr th,
table#spectral-library tr td {
	padding: 0px 5px;
	border: 2px solid white;
	line-height: 1.5;		/* don't make rows taller than they need to be - the icons are big already */
								/* 1.2 might be ideal for spectral library and let the icons push it larger */
								/* But 1.2 is too close for Color Information table.  See if 1.5 will do for both */
}
table#spectral-library tr th {
	background: #415a72; /* nav blue */
	text-align: center;
	color: white;
	font-weight: normal;
}
	
table#spectral-library h2,
table#spectral-library h3 {
	margin: 0;
	font-weight: normal;
}
	
table#spectral-library h2 {
	color: #cd3d53;		/* icon red dot */
	color: #905493;		/* icon(?) purple dot */
}
table#spectral-library h3 {
	padding-left: 1.5em;
	color: #0071f0;	/* Was #0080ff now accessibility skyblue 3/22 */
}
/* Indent an ordinary data row (which is one without class "head"), first cell */
table#spectral-library tr:not([class='head']) td:first-child {
	padding-left: 3.7em;
}
/* Even-odd row background styling
 * I'd like to restart the styling after every heading within the table, but it looks tricky to figure out, if it's even possible - CEM 1/2018 */
table#spectral-library tr:nth-child(even) {
	background: #fff9f2;	/* pale peach */
}

table#spectral-library tr.head,
table.links            tr.head {
	background: white;
}

table#spectral-library tr td a img {	/* SVG icon widths */
	width: 15px;
}

/* Center the download/link icons, 4th and 5th columns of the table */
table#spectral-library tr td:nth-child(4),
table#spectral-library tr td:nth-child(5) {
	text-align: center;
}


/*----------------------------------------------------------------------------------*\
    Links Table - note these rules should NOT affect nav.links, but do be careful
\*----------------------------------------------------------------------------------*/

table.links {
	border-collapse: collapse;
	background: white;
	border: 1px solid #ddd;
	border: 2px solid white;
}

table.links tr th,
table.links tr td {
	border: 2px solid white;
	line-height: 1.6;
}
table.links tr th {
	background: #f8f8f8;
	border: 2px solid #f8f8f8;
	padding: 1.0em 5px 0.3em;		/* put some extra space above each table section */
											/* and while you're at it, put space below the row head title, but keep the left and right padding unchanged (5px) */
	text-align: left;
	color: #006dec;		/* Robin's blue #0080ff, "accessibility skyblue" #0071f0 not enough contrast 3/22 */
	font-weight: bold;
}
table.links tr td {
	padding: 0px 5px;
}
table.links tr td:first-child {
	padding-left: 1.5em;		/* Indent the data rows in the links table */
}

/* ------------------------------------------------------------------ *\
 * Styles from old website, still used
\* ------------------------------------------------------------------ */

.info-table {
	background-color: white;		/* default cell background color, unless otherwise modified below */
	border: 1px solid black;		/* TD's all get an "inner" border, for a uniform width all around, give the outer edge of the table a border too */
}
.info-table th.left-col {			/* Was applied to TD before.  Now we are being more discerning between TH and TD.  This column of row headers has been re-tagged to THs */
	background-color: #fffaf4;
	font-weight: bold;
	/* font-size: 95%; CEM 7/22 no reason to be smaller, now that we're being more discerning between TH and TD */
}
.info-table td, .info-table th {		/* For tables, attribute "border" is deprecated.  Use CSS like this instead - CEM 7/22 */
	border: 1px solid black;
}
.info-table th, .info-table th a {
	background-color: #fffaf4;
	color: #555;
	/*vertical-align: top;	* Thins the top border of the cell, so I removed this - CEM */
	/* font-size: 95%; CEM 7/22 no reason to be smaller, now that we're being more discerning between TH and TD */
}
/* text1 class is used often at old website, but it is not defined.  Use it here to get padding back in tables.  The new style sheet resets all padding, so new tables by default have no cell padding */
table.text1 td, table.text1 th, .info-table td, .info-table th {
	padding: 0px 2px;
}