/* ============== Basics ============== */ body { font-size: 1em; /* inherit line-height 1.4 from Boilerplate */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, .serif, #home header p { /* word-spacing: 0.1em; if bold */ font-family: Georgia, Times, "Times New Roman", serif; } h1{font-size:1.7em;margin:0.82em 0;} h2{font-size:1.3em;margin:1.07em 0;} h3{font-size:1.1em;margin:1.27em 0;} h4{font-size:1em;margin:1.4em 0;} h5{font-size:0.83em;margin:1.68em 0;} h6{font-size:0.67em;margin:2.09em 0;} /* ============== Primary LAYOUT ============== */ /* #site, nav, section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } */ img { box-sizing: content-box; max-width: 100%; /* images will shrink to fit their container width (but border and padding are included in this width) , but will not get bigger than their full size */ height: auto !important; /* just in case, to force correct aspect ratio */ /* width: auto\9; */ /* ie8 */ /* -ms-interpolation-mode: bicubic; */ /* ie7 for resizing */ } #site { position: relative; margin: 0 auto; max-width: 960px; /* set this to no more than background image */ padding-bottom: 1em; } main { position: relative; overflow: auto; /* contains the floated section and aside; alternative is to add content after the aside and use clear:both; */ } main { padding-bottom: 1em; } /* total width = width + padding + border + margin(which can collapse) IE8 and earlier versions of IE, included padding and border in the width property. To fix this problem, add a to the HTML page. */ section { max-width: 32em; padding: 0 2% 0 3%; /* right and left gutter */ }/* make measure <= 80 characters */ /* ============== banner Header ============== */ header img { float: left; margin: 1% 2%; } #home address { margin: 4em 2% 1em; font-style: normal; line-height: 1.2; float: left; } #home header h1 { float: left; margin: 0; padding: 0 2%; } /* subtitle: */ #home header p { float: left; margin: 0; padding: 0 2% 0.5em; font-size: 1em; font-weight: bold; } /* =================== MAIN =================== */ /* see the banner header above for the styles on the main header h1 */ /* the normalize p{margin: 1em 0;} is also involved here */ /* h2 normalize has font-size: 1.5em; margin: 0.83em 0; */ #home main nav { position: relative; margin: 1em 0 1em 2em; border: 1px solid; padding: 1em 1em 0 0; } .clear {clear: both;} /* hr, */ .floatright {float: right; padding-left:20px;} #asidenone figure.map238 figcaption {float: right; width: 450px;} /* #asidenone section width is 720px */ dl, menu, ol, ul { margin: 0 0 1em 0; } ol ul, ul ul { margin: 0; } menu, ol, ul { padding: 0 0 0 20px; } #home footer { padding: 0 0 0 3%; } .badge {float: right;opacity: 0.5; transition: all 0.3s ease;} .badge:hover, .badge:focus {opacity: 1;} /* ============== Media queries ============== */ /* http://css-tricks.com/why-ems/ http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ */ main nav { padding: 0 0 1em 1em; position: relative; float: right; } @media screen and (max-width: 43em) { html { font-size: 90%; } #home address { font-size: 90%; /* 90% of html 90% */ } section { } footer .badge { display: none; } } @media screen and (min-width: 29em) { #home address { text-align: right; float: right; } #home header h1 { margin: 0; padding: 2% 2% 0; } } @media screen and (min-width: 38em) { #home address { font-size: 1em; } #home header h1 { font-size: 2em; line-height: 1.4; margin: 0; padding: 1% 2% 0; } #home header p { font-size: 1.2em; line-height: 1.4; margin: 0; padding-bottom: 10px; } } @media screen and (min-width: 55em) { #home address { font-size: 1.2em; } #home header h1 { font-size: 3em; line-height: 1.4; margin: 0; padding: 20px 2% 0; } #home header p { font-size: 1.3em; line-height: 1.4; margin: 0; padding-bottom: 10px; } } /* =================== palette =================== */ html { color: #222; background: #cdf; } section a:visited {color: purple;}/*#306 standard purple */ html body a:hover, html body a:focus, html body a:active {color: red;} /* #812 burgundy */ /* using html body will overide the a:link, a:visited styles below */ section a:link, section a:visited { text-decoration: none; padding-bottom: 1px; border-bottom: 1px dotted; }/*border color inherited, and the dotted focus box overlaps it. */ h1 a:link, h1 a:visited { color: #62583C; padding-bottom: 0; border-bottom: 0; }/* cancel previous rule for section */ h1, h2, h3, h4, h5, h6, #home header p { color: #827A66; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } #home header h1, #home header p { color: #607232; text-shadow: 3px 3px 0 rgba(0,0,0,0.2); } main { box-shadow: 0 1px 0 rgba(0,0,0,0.2); background: #fff; /* padding-bottom: 1em; without padding here the lowermost contained element's bottom margin is ignored */ border-bottom-left-radius: 2em; } main footer {color: #827A66;} header { background: #EEE3C6 url(../img/header.jpg) left top no-repeat; } header div { background: #fff;/*fallback, IE8 etc*/ background: rgba(238,233,219,0.2); /* color of page background #EEE9DB */ } @media screen and (min-width: 43em) { .featurepic { display: block; max-width: 50%; float: right; border: 4px solid #607232; padding: 0; margin: 10px 10px 10px 20px; } .icon1 { display: block; float: right; padding: 0; margin: 10px 10px 10px 20px; } /* .icon2 { display: block; float: left; padding: 0; margin: 10px 10px 10px 20px; } */ #home main nav { position: absolute; margin: 0 0 0 20px; border: none; padding: 0; right: 20px; top: 20px; z-index: 2; /* raise it above Section, which follows */ } #home main nav ul { position: relative; margin: 0; padding: 0; line-height: 25px; }/* height: 27px; Warning: Using height with padding can sometimes make elements larger than you expect. Don't use height here because the nested LI and UL will not be positioned properly */ #home main nav ul li { display: block; } nav a { display: block; text-decoration: none; font-size: 1.3em; border: 4px solid #eed8c6; padding: 0 22px; border-bottom-left-radius: 1em; border-top-left-radius: 1em; background: #fff;/*fallback, IE8 etc*/ background: rgba(255,255,255,0.7); } #home nav ul ul a { margin: 0.2em 0 0.3em 1em; } #home nav ul a { margin: 0.2em 2em 0.3em 0; } nav a:link, nav a:visited { text-transform: uppercase; color: #716D29; transition: all 0.3s ease; } nav a:hover, nav a:focus { color: red; background: #fff;/*fallback, IE8 etc*/ background: rgba(255,255,255,0.9); } }