/* ============== Basics ============== */ body { font-size: .9em; /* inherit line-height 1.4 from Boilerplate */ font-family: Verdana, sans-serif; } h1, h2, h3, h4, h5, h6 { /* word-spacing: 0.1em; if bold */ font-family: Centaur, serif; } .serif { font-family: Centaur, serif; font-size: 1.4em; /*adjustment since Centaur is smaller than Verdana */ } /* ============== Primary LAYOUT ============== */ body { /* alistapart width = 965px */ width: 950px; /* if you change this then modify width for main section and main aside */ margin: 0 auto; /* centered in window */ } main { overflow: auto; /* contains the floated section and aside; alternative is to add content after the aside and use clear:both; */ } /* 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. */ main section { float: left; width: 556px; /* example 950 - 304 - (50 + 40) = 556 */ padding: 0 50px 0 40px; /* right and left gutter */ /* Warning: Using width with padding can sometimes make elements larger than you expect. */ } #asidenone section {width: 860px;} main aside { float: right; width: 304px; } main aside .box { width: 300px;/* total width is 304 including borders */ border: 2px solid #333; margin: 20px 0; }/* Warning: Using width with border can sometimes make elements larger than you expect.*/ main aside .b250 {/*old size box*/ width: 250px;/* total width is 252 including borders */ margin-left: 50px; } /* ============== breadcrumbs and banner Header ============== */ #breadcrumb { /* you are here navigation */ padding: 5px; font-size: .7em; } header[role="banner"] { position: relative;} header[role="banner"] form { position: absolute; right: 0; font-size: 0.8em; padding: 10px; } header[role="banner"] form p { text-align: right; margin: 0; padding: 0; } /* h1 : normalize has font-size: 2em; margin: 0.67em 0; */ header[role="banner"] h1 { margin: 0; padding: 0 0 0 40px; /* have them lined up, match this to the section left margin */ } header[role="banner"] h1 { /* normalize has font-size: 2em; margin: 0.67em 0; */ display: inline-block; /* display: inline; does not contain the line height, or the background */ line-height: 1.2; font-size: 3em; } header[role="banner"] nav {/* body has line-height: 1.4; */ font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid #bbb; background: #ddd; } header[role="banner"] nav ul { line-height: 2; margin: 0; padding: 0; } header[role="banner"] nav li, main nav ul li { display: inline-block; /* Necessary: triggers line elements */ /* width: 30%; Necessary: for most situations [he used 30% for 3 li items) */ vertical-align: top; /* Not necessary: provides controls how the blocks line up vertically (if more than one line). Bottom, middle, baseline are also options. */ zoom: 1; *display: inline; /*Dirty IE 6-7 Hack to make inline-block*/ } header[role="banner"] nav a, main nav a, main nav strong { display: block; /* width: 100%; need this? */ /* text-align: center; need this if the li is aligned right or left */ padding: 0 15px; border-left: 1px solid #bbb; } /* moved font styles up to nav element so it inherits down */ /* =================== 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; */ main nav ul { margin: 0; padding: 0; } main aside .box { border-top-left-radius: 1em; border-bottom-left-radius: 1em; } /* scale down h3=no; h4=? ; p=yes ; ul=? */ main aside .box h3 { /* normalize has font-size: 1.17em; margin: 1em 0; */ font-size: 1.3em; margin: 0; padding: 10px 5px 5px 20px; border-bottom: 1px solid #333; } main aside .box p { /* any paragraphs whether in a box or not */ font-size: .9em; margin: 10px 10px 10px 20px; } main aside .box ul, main aside .box ol { /* any paragraphs whether in a box or not */ font-size: .8em; } /* for two levels of nested quotations */ q {quotes: '“' '”' '‘' '’';} /* extra content definitions for pre-2011 WebKit */ q:before {content: '“'; content: open-quote;} q:after {content: '”'; content: close-quote;} q q:before {content: '‘'; content: open-quote;} q q:after {content: '’'; content: close-quote;} /* q in blockquote */ blockquote q:before {content: '‘'; content: open-quote;} blockquote q:after {content: '’'; content: close-quote;} blockquote q q:before {content: '“'; content: open-quote;} blockquote q q:after {content: '”'; content: close-quote;} /* blockquote hanging opening quote */ blockquote:before {display: block; height: 0; content: "“"; margin-left: -.6em; font: italic 400%/1 Cochin,Georgia,"Times New Roman",serif; color: #999;} /*original had margin-left: -.95em; */ aside figure blockquote { /*normalize has margin: 1em 40px; */ margin: 0.5em 0 0 0; font-size: 0.8em; padding: 5px; border-bottom: 1px solid #aaa; } aside figcaption { padding: 0 0 0 5px; font-size: 0.7em; } aside dl { /*normalize has margin: 1em 0; */ margin: 0; } aside dd { /*normalize has margin: 0 0 0 40px; */ margin: 0 0 0 10px; } .county {float: right;} .county figcaption {text-align: center;} /* ============== HOME PAGE ============== */ /* font-variant: small-caps; */ #home address { font-family: Centaur, serif; font-style: normal; padding: 20px 30px; line-height: 1; text-align: right; float: right; font-size: 1.5em; } header img { float: left; padding: 17px 17px 0 20px; } main header h1, main header h2 { margin: 0; padding: 0 0 0 40px; /* have them lined up, match this to the section left margin */ } #home header h1 { line-height: 1.2; font-size: 5em; } main header h2 { padding-bottom: 10px; line-height: 1; font-size: 1.7em; } #home section { width: 910px; padding: 0 0 0 40px;} #home p {max-width: 500px;} #homepic { display: block; float: right; border: 4px solid #bbb; padding: 0; margin: 0 0 0 20px; } .badge {float: right;} #home main section { position: relative; } #home main nav { position: absolute; right: 20px; top: 20px; margin: 0 0 0 20px; } #home main nav ul { position: relative; }/* otherwise the UL is also treated as Absolute and all the ULs stack up on top of each other. This problem shows up with Firefox online, but not IE, and not Firefox on local Uniform Server. */ #home main nav ul li { display: block; /* Necessary: triggers line elements */ } #home main nav ul ul { } #home main nav a, main nav strong { display: block; /* width: 100%; need this? */ /* text-align: center; need this if the li is aligned right or left */ padding: 0 15px; } #home footer { padding: 0 0 0 40px; }