/* Normalization and Common Styles Open Sans is used for all text except the company slogan, “We’re All About Service,” which is Lobster; both are from Google Fonts. (Type in the logos is graphics.) The basic type setting, used for body copy, is the browser’s default font size on a line height of 1.4375em (typically 16/23 pixels). Spacing between paragraphs is half the line height. Heading level 1 is used only for the top-level heading of the HTML section, “General Roll Leaf,” which is hidden visually—it’s twice the size of body copy, with twice the line height. The size and line height of headings levels 2 and 3 in body copy are 1.5 and 1.25 times the body copy. All headings are bold face and have the same space above and below: one and one-half the body copy line height, respectively. The footer’s basic font size and line height are reduced to 0.8125 of the body copy. Paragraph spacing in half the footer’s line height. Level 2 headings are The sizes, line heights, and spacing of all typographic elements are correspondingly reduced, except headings level 3, which are set the same size on the same line height as the footer body copy, with no space after. Paragraphs after level 3 headings have no space above. The top navigation menu is 0.875 the body copy size (14 pixels if the browser’s default is 16 pixels). */ body { font-family: "Open Sans", sans-serif; font-size: 1.5em; line-height: 1.5em; } p { margin: 0.75em 0 0 0; /* half the body line-height above and below */ } ul { margin: 0 0 0.75em 0; /* half the body line-height below */ } h2 { font-size: 1.25em; line-height: 1.5em; margin: 1.2em 0 0.6em 0; /* body line-height above, half below */ } * > h2:first-child { /* where margins don’t collapse */ margin-top: 0.6em; /* half the body line height */ } h3 { font-size: 1em; line-height: 1.5em; margin: 1.5em 0 0.75em 0; /* body line-height above, half below */ } h2 + h3, /* between headings */ * > h3:first-child { /* where margins don’t collapse */ margin-top: 0.75em; /* half the body line height */ } /* Page Header */ body > header { border-top: .5em solid rgb(207,185,74); text-align: center; color: rgb(221,221,221); } /* Hidden visually while remaining available to outline generators and screen readers (HTML5 Boilerplate's .visuallyhidden) */ body > header h1, body > header h2 { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Product Pages Links */ body > header nav * { /* outline: 1px solid silver;*/ } body > header nav { font-size: 0.9375em; /* 15px when body font is 16px */ font-weight: bold; margin-bottom: 1em; padding: 0.33333333333333em 2%; background: rgb(69,88,104); } body > header nav h2 { font-size: 1em; /* 15px when body font is 16px */ line-height: 2em; margin: 0; } body > header nav ul { margin: 0; padding: 0; } body > header nav li { display: inline-block; } body > header nav a { display: inline-block; padding: 0 0.5em; line-height: 2em; color: rgb(207,185,74); } body > header nav :link, body > header nav :visited { color: inherit; text-decoration: none; } body > header nav :link:hover, body > header nav :visited:hover { color: rgb(207,185,74); } /* Collapsed/Expanded Products Menu (header displayed, list hidden/revealed) 44em @ 16 pixels per em = 704 pixels */ @media only screen and (max-width: 46em) { /* Product pages menu header visible (when JavaScript is available, unless the browser is IE* or earlier). */ .js #product_pages_menu > h2 { clip: auto; height: auto; margin: 0; position: static; width: auto; cursor: pointer; } .lt-ie9 #product_pages_menu > h2 { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Product pages menu list hidden (when JavaScript is available), unless the browser is IE* or earlier). */ .js #product_pages_menu > ul { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .lt-ie9 #product_pages_menu > ul { clip: auto; height: auto; margin: 0; position: static; width: auto; cursor: pointer; } /* Product pages menu list revealed - a JavaScript listener for the click event on the menu header adds or removes "expanded" to the menu nav element's class */ #product_pages_menu.expanded > ul { clip: auto; height: auto; margin: 0; position: static; width: auto; } } /* Nameplate */ body > header .nameplate .General_Roll_Leaf_logo { padding: 0 3% 0 1%; max-height: 7.5em; max-width: 96%; vertical-align: bottom; } body > header .nameplate .Lustrofoil_logo { padding: 0 1%; max-height: 8em; max-width: 98%; vertical-align: bottom; } body > header .nameplate .slogan { margin: 0.375em auto 0.75em auto; font-family: "Lobster", cursive; font-size: 2em; line-height: 1.125em; color: rgb(151,0,43); } body > header .nameplate .slogan .kern-e’ { letter-spacing: -0.05em; /* kern e’ for Lobster */ } body > header .nameplate .slogan .kern-’r { letter-spacing: -0.12em; /* kern ’r for Lobster */ } /* Page Body */ body > section { margin: auto; width: 96%; max-width: 44em; } body > section section { width: 100%; clear: both; margin-bottom: 1.5em; } body > section:after, body > section section:after { clear: both; content: ""; display: table; } /* Figures When a main section contains one or more .figures div the other elements are given a right margin for a 2-column effect (rather than flowing around the .figures div). On the foil cutters page the main section contains a heading and two sub-sections; these aren't given a right margin but the child elements of the subsections are because each contains a .figures div. The general pattern is if the main section or child section has a .figures div give everything else a right margin (actually, give every element a right margin and override that for the .figures div). */ body > section > .figures ~ *, body > section > section > .figures ~ * { margin-right: 33%; } body > section .figures { float: right; clear: both; margin-right: 0; margin-bottom: 1em; width: 30%; } body > section .figures > figure { width: 100%; } body > section .figures img { width: 100%; } /* At narrower window/screen widths the body section drops to a 1-column layout, regardless of the presence of .figures divs. Elements that are children of sections that also have .figures div children are no longer given a right margin, any .figures divs are no longer floated right and span the width of the section. 28em @ 16 pixels per em = 448 pixels */ @media only screen and (max-width: 28em) { body > section > .figures ~ *, body > section > section > .figures ~ * { margin-right: 0; } body > section .figures { float: none; width: 100%; } } /* Slide Shows Images for a slide show are wrapped in figure elements that are children of a div with class "figures". Some figure elements also contain a figcaption element. The figure elements are stacked on top of one another and all but the first has its opacity set to 0. When slides are hidden they should still be available to assistive technologies (screen readers, keyboard interface). Hidden slides should also continue to affect the layout: the height of the slideshow should be determined by the height of all its slides superimposed on one another, rather than just the currently visible one, or the layout will shift as slides of different heights are shown. */ /* When JavaScript is available the figure children of a .figures div will become a slide show. The figure elements are stacked on top of each other, aligned to the top of the .figures div, but not removed from the layout's flow (as they would be if positioned absolutely). The opacity of all but the first is set to 0. A clearfix is applied to the .figures div. */ .js body > section .figures { content: ""; display: table; clear: both; } .js body > section .figures > figure { float: left; margin-right: -100%; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } .js body > section .figures figure:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } body > section { color: rgb(35,44,52); } body > section h2, body > section h3, body > section strong { color: rgb(69,88,104); } body > section ul { list-style-type: circle; } /* Normal links */ body > section a:link, body > section a:visited { color: rgb(69,88,104); text-decoration: underline; cursor: default; } body > section a:link:hover, body > section a:visited:hover { color: rgb(207,185,74); } /* Phone links*/ body > section a.phone_number:link, body > section a.phone_number:visited { color: inherit; text-decoration: none; cursor: default; white-space: nowrap; } body > section .phone_number:before { content: "☎ "; } #testimonials > p { font-style: italic; } #testimonials blockquote { margin: 2em 0 0 0; } #testimonials figcaption { text-align: right; font-style: italic; } #book_binding { padding-bottom: 3em; } /* Page Footer */ body > footer { font-size: 0.8125em; /* 13px when body font size is 16px */ line-height: 1.53846153846154em; /* 20px when footer font size is 13px */ color: rgb(221,221,221); margin-top: 1.84615384615385em; /* body line-height above */ border-top: 0.625em solid rgb(207,185,74); /* same color and thickness as header top border */ padding: 0.61538461538462em 0 1.53846153846154em 0; /* arbitrary space above, footer line height below */ background: rgb(151,0,43); } body > footer > div { margin: 0 auto; width: 96%; max-width: 68em; position: relative; /* allows the figure containing the logo and copyright notice to be positioned */ } /* Clearfix from http://css-tricks.com/snippets/css/clear-fix/ */ body > footer > div:after { content: ""; display: table; clear: both; } body > footer p { margin: 0.76923076923077em 0 0 0; /* half footer line height above */ } body > footer h2 { font-size: 1.38461538461538em; /* 18px when footer font size is 13px */ line-height: 1.5em; font-weight: normal; color: rgb(207,185,74); margin: 0.55555555555556em 0; /* half the footer line height above and below */ } body > footer h3 { font-size: 1em; /* same as footer font size */ line-height: 1.53846153846154em; /* same as footer line height */ font-weight: normal; color: rgb(207,185,74); margin: 0.76923076923077em 0 0 0; /* half the footer line height above */ } body > footer h3 + p { margin-top: 0; } body > footer h3:after { content: ": "; } body > footer :link, body > footer :visited { color: inherit; text-decoration: none; cursor: default; } #more_information :link:hover, #more_information :visited:hover, #GRL_sales_email_address:hover { color: rgb(207,185,74); cursor: auto; } #more_information h2 { margin-bottom: 0.27777777777778em; } #more_information a { display: inline-block; font-size: 1.07692307692308em; /* 14px when footer font is 13px */ line-height: 2.14285714285714em; /* 30px when font is 14px */ font-weight: bold; padding: 0 0.71428571428571em; margin: 0 0.71428571428571em 0 -0.71428571428571em; } #logo_copyright .General_Roll_Leaf_logo { max-width: 100%; max-height: 3.84615384615385em; vertical-align: bottom; } #logo_copyright figcaption { font-size: 0.92307692307692em; /* 12px when footer font is 13px */ } /* 3-Column Footer */ /*body > footer > div > * { float: left; width: 16%; padding: 0 2%; margin: 0; } */ #ordering_and_technical_information { width: 39%; float: left; } #ordering_and_technical_information > p { max-width: 22.25em; } #ordering_and_technical_information h2 { max-width: 16em; } #contact_information { width: 41%; float: left; } #contact_information > div { width: 44%; float: left; white-space: nowrap; } #contact_information > div:nth-child(even) { width: 56%; } #more_information { width: 20%; float: right; } #logo_copyright { width: 20%; position: absolute; bottom: 0; right: 0; padding-top: 1.4375em; } /* 2-Column Footer Equal Widths 47em @ 16 pixels per em = 752 pixels */ @media only screen and (max-width: 52em) { body > footer > div { max-width: 55em; } #ordering_and_technical_information { width: 50%; } #contact_information { width: 50%; } #more_information { width: 72%; float: left; clear: both; } #more_information h2 { margin-top: 1.11111111111111em; /* footer line height above */ } #more_information a:nth-of-type(3) { } #logo_copyright { width: 28%; } #logo_copyright figcaption { margin-bottom: 0.33333333333333em; } } /* 2-Column Footer, Narrow Right */ @media only screen and (max-width: 40em) { #ordering_and_technical_information { width: 64%; margin-right: 5%; } #ordering_and_technical_information p { max-width: 30em; } #ordering_and_technical_information h2 { max-width: 21.66666666666667em; margin-top: 0; } #contact_information { width: 69%; clear: both; } #more_information { float: none; clear: none; width: auto; } #more_information a { display: block; } #logo_copyright { width: 31%; } #logo_copyright figcaption { margin-bottom: 0; } } /* 1-Column Footer 33em @ 16 pixels per em = 528 pixels */ @media only screen and (max-width: 33em) { body > footer > div > * { padding: 0 2%; } #ordering_and_technical_information { width: 96%; } #contact_information { width: 96%; } #more_information { width: 96%; float: left; clear: both; margin-bottom: 0.76923076923077em; } #more_information a { display: inline-block; } #logo_copyright { position: static; float: none; width: 60%; margin: 0 auto; text-align: center; } } body > footer > div, body > footer > div > *, body > footer > div > * > * /*#contact_information > *, */ /*#more_information > *, */ /*#logo_copyright > * */ { /* outline: 1px solid silver;*/ }