@charset "utf-8"; /* --------------------------------------- */ /* Chapter 11: Layout with Styles */ /* Section: Finished Page with Fixed Width */ /* --------------------------------------- */ /* NOTE: This is the same as base.css except percentage widths (and one margin-left) are replaced with pixel widths, making the widths fixed instead of flexible. You *can* use both pixel and percentage widths in the same page if you'd like. If the outermost container has a fixed width (that is, a width set in pixels), the page width won't grow or shrink when the browser size changes, and neither will any elements with percentage widths. In fact, all that was required to give this page a fixed width was to change #container { width: 90%; } to #container { width: 950px; }. But, I changed other % widths to pixels just so you'd see it's allowed. */ /* NOTE: You will notice a few selectors that begin with either .ie6 or .ie7. These rules use the ie6 and ie7 classes that are applied to the the element via conditional comments near the beginning of the HTML page to specify styles only intended for specific versions of Internet Explorer. All other browsers ignore them. */ /* CSS RESET ------------------------------------------------ */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } /* Note from Bruce: The Meyer Reset includes this rule, but I've commented it out so it doesn't take effect. If it weren't commented out, it would turn off the numbers before list items in an ol, and the bullets before list items in an ul. ol, ul { list-style: none; } */ blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* GENERAL ---------------------------------------------- */ body { color: #1d3d76; font: 100% "Trebuchet MS", Verdana, sans-serif; padding-bottom: 20px; } h1, h2, h3, h4, h5, h6, .logo { color: #b74e07; font-weight: bold; } h1 { font-size: 1.5em; /* 24px/16px */ margin-bottom: .75em; text-transform: lowercase; } h2 { font-size: 1.375em; /* 22px/16px */ } p { margin: 0 0 .5em; padding-right: 10px; } /* link states */ a { padding: .2em; } a:link { text-decoration: none; color: #597dbd; } a:visited { text-decoration: none; color: #597dbd; } a:focus, a:hover, a:active { background: #f3cfb6; text-decoration: underline; } .nav a:hover { text-decoration: none; } a.current { color: #1d3d76; } a:hover.current { background: white; cursor: default; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* CONTAINERS ---------------------------------------------- */ #container { background: url(../img/bg-bluebench.jpg) repeat-y; margin: 20px auto; width: 950px; /* establishes fixed page width because it's the outer container */ padding: 30px 10px 0 0; } .ie6 #container { /* Applied in IE6 only */ width: 900px; } #page { background: #fff; padding: 10px 10px 10px 0; width: 930px; } #masthead { padding-bottom: 20px; } #main { float: left; width: 660px; } #related { margin-left: 670px; } #footer { border-top: 2px dotted #b74e07; clear: both; margin-top: 10px; } /* MASTHEAD ---------------------------------------------- */ #masthead { border-bottom: 2px dotted #1d3d76; margin-bottom: 30px; } /* Logo */ .logo { float: left; font-size: 2.5em; /* 40px/16px */ margin: 0; } .logo a { color: #1d3d76; padding: 0; } .logo a:hover { background: transparent; color: #597dbd; text-decoration: none; } .logo span { color: #1d3d76; display: block; font-size: 0.3em; /* 12px/40px */ font-style: italic; font-weight: normal; margin: 3px 0 0 1em; } /* ::: Navigation and Search Form ::: */ #masthead div { float: right; position: relative; } .ie6 #masthead div, .ie7 #masthead div { /* Applied in IE6 and IE7 only */ width: 380px; } /* Search */ #masthead form { position: absolute; top: 7px; right: 0; } input, label, .entry .date, .continued , .sidebar p, .archive ol { font-size: .75em; /* 12px/16px */ } input[type="text"] { padding: 2px 3px; width: 150px; } input[type="submit"] { vertical-align: top; } /* Site Nav */ .nav { margin-top: 45px; } .nav li { float: left; font-size: .75em; /* 12px/16px */ /* makes the bullets smaller */ padding: 0 25px 0 3px; } .nav li a { font-size: 1.5em; /* 18px/12px */ /* makes the linked text larger than the bullets */ } .nav li:first-child { list-style: none; padding-left: 0; } .nav li:last-child { padding-right: 0; } /* CONTENT ---------------------------------------------- */ /* Blog snippet */ .entry { border-right: 2px dashed #b74e07; margin: 0 .5em 2em 0; } .ie6 .entry { /* Applied in IE6 only */ margin-right: 0; } .entry h2 { font-size: 1.25em; /* 20px/16px */ line-height: 1; } .continued, .entry .date { text-align: right; } .entry .date { line-height: 1; margin: 0 1em 0 0; padding: 0; position: relative; top: -1em; } .continued { font-style: italic; margin-top: -5px; } /* Photos */ .intro { margin: -5px 0 0 110px; } .ie6 .intro { /* Applied in IE6 only */ margin-top: 0; } .photo { float: left; height: 75px; width: 100px; } .photo a { margin: 0; padding: 0; } .photo a:focus, .photo a:hover, .photo a:active { background: #fff; } /* SIDEBAR ---------------------------------------------- */ .sidebar { background: #f5f8fa; padding: 10px; } aside h2 { font-size: .9375em; /* 15px/16px */ margin-bottom: 3px; text-transform: lowercase; } .feature { font-style: italic; } /* Archive */ .archive ol { list-style: disc; /* changes list items from numbers to bullets */ padding-left: 18px; } .archive .continued { margin-top: 0; } /* FOOTER ---------------------------------------------- */ #footer h1 { font-size: 1em; margin-bottom: .25em; padding-top: .25em; } #footer p { font-size: .6875em; } .thumbnails { list-style: none; padding-top: 4px; } .thumbnails li { display: inline; } .thumbnails img { vertical-align: middle; }