/* ============== Basics ============== */ body { font-size: 1em; /* inherit line-height 1.4 from Boilerplate */ font-family: Georgia, serif; } h1, h2, h3, h4, h5, h6, .serif, #home header p { /* word-spacing: 0.1em; if bold */ } 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, #content { -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: 970px; /* 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; } #homepic, #featurepage, #featurepic { display: none; } /* 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: 1% 2%; 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;} .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000; background: #eee;/*fallback, IE8 etc*/ background-color: rgba(235, 235, 235, 0.60); font-size: 0.8em; padding: 1em; display: none; } .back-to-top:hover { background: #ddd;/*fallback, IE8 etc*/ background-color: rgba(215, 215, 215, 0.80); } @media only screen and (max-width: 30em) { .back-to-top {bottom:1em;font-size:0.7em;} } /* ============== 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: 0 2%; } #home header p { font-size: 1.3em; line-height: 1.4; margin: 0; padding-bottom: 10px; } } /* =================== palette =================== */ html { color: #222; background: #EEE9DB; } #home address a{ color: #62583C; /* was too pale: color: #827a66; */ text-decoration: none; } #home address a:hover, #home address a:focus, #home address a:active {color: red;} section a, section a:link { /* putting transition here affects all styles of links regardless of later styling */ color: #22a;/* indigo */ text-decoration: none; transition: all 0.3s ease; } 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); } 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/triccali970.jpg) left top no-repeat; } header div { background: #fff;/*fallback, IE8 etc*/ background: rgba(238,233,219,0.6); /* color of page background #EEE9DB */ } #homepic, #featurepage, #featurepic { border: 4px solid #EED8C6; } @media screen and (min-width: 43em) { #homepic, #featurepage, #featurepic { display: block; max-width: 50%; float: right; border: 4px solid #EED8C6; padding: 0; margin: 0 0 0 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); } } /* iNaturalist widget to show a few observations */ .inat-widget { font-family: Georgia, serif; padding: 10px; line-height: 1;} .inat-widget-header {margin-bottom: 10px;} .inat-widget td {vertical-align: top; padding-bottom: 10px;} .inat-label { color: #888; } .inat-meta { font-size: smaller; margin-top: 3px; line-height: 1.2;} .inat-observation-body, .inat-user-body { padding-left: 10px; } .inat-observation-image {text-align: center;} .inat-observation-image, .inat-user-image { width: 48px; display: inline-block; } .inat-observation-image img, .inat-user-image img { max-width: 48px; } .inat-observation-image img { vertical-align: middle; } .inat-widget-small .inat-observation-image { display:block; float: left; margin: 0 3px 3px 0; height:48px;} .inat-label, .inat-value, .inat-user { font-family: "Trebuchet MS", Arial, sans-serif; } .inat-user-body {vertical-align: middle;} .inat-widget td.inat-user-body {vertical-align: middle;} .inat-widget .inat-footer td.inat-value {vertical-align: middle; padding-left: 10px;} /* iNaturalist widget MODIFICATIONS */ .inat-widget { border: 4px solid #EED8C6; }