@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 ROBIN MYERS IMAGING 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: auto;
}
.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:
* see: http://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 */
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/
http://fontawesome.io/cheatsheet/
fa-plus [] fa-circle [] fa-caret-right [] fa-check []
*/
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 */
/*background: #fff9f2; * The light orange - 6/22 no leave it white for contrast */
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 {
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 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. */
}
/* 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;
}
}
/* Style.css for the Chromaxion website has more styles below this point. Style.css for both websites should match above this point, for ease of maintenance. */