/* Theme Name: Marmalade Theme URI: http://www.marmalade.eu.com/ Description: Theme for marmalade.eu.com website Version: 0.1 Author: Mark Chitty */ /* General */ * { margin: 0; padding: 0; border: none; outline: none; font-weight: normal; font-style: normal; } p, ul, ol { margin-bottom: 1.2em; } ul { margin-left: 3em; list-style: disc outside url(images/list-bullet.gif); } /* Typography */ body { font: 88% "Tahoma","Helvetica","Arial",sans-serif; color: #3e3e3e; } h1, h2, h3, h4 { color: #002a67; } h1 { font-size: 3.0em; text-indent: -2000px; } h2 { font-size: 2.1em; line-height: 1.1; margin-bottom: 0.3em; } h3 { font-size: 1.25em; } h4 { font-size: 1.2em; display: inline; } #content, .caption { line-height: 1.4; } .caption { color: #777; font-size: 0.95em; } .caption h3 { color: #777; font-size: 1.4em; line-height: 1; margin-bottom: 4px; } #footer { font-size: 0.9em; line-height: 1.1; } #quote, #projectBrief, #contact { color: #99a5b1; } code { font: 0.9em "Andale Mono", "Courier New", Courier, monospace; } strong { font-weight: bold; } /* Page structure */ /* The page is designed to compress up in a narrow browser by dropping the main column from its usual position at the top of the page, to underneath the company logo. Important rules (the ones that took bloody hours to figure out): - height:100% on html, body, #container and min-height:100% on #page ensure the blue column stretches full page height - #gutter is an empty div floating top right which ensures the white space to the right of #page is preserved when #page drops below #logo in a narrow browser - clear:both on #containerEnd makes #container stretch to enclose #page. The usual float clearing approach of using overflow: auto|hidden doesn't work here beacuse container has a fixed 100% height. overflow:auto introduces a scroll bar, overflow:hidden chops off content. So we end up adding some purely presentational html elements to the page to get the toast in the right place. Shocking, I know. */ html, body { height: 100%; } #container { height: 100%; position: relative; margin: 0 auto; max-width: 900px; padding: 0 10px; } html { background: #FDFFFE; } #page { min-height: 100%; float: left; width: 420px; background: #001f3b; position: relative; z-index: 1; } #logo { float: left; width: 225px; padding: 91px 15px 10px 0; } #gutter { float: right; width: 200px; height: 175px; } #nav { background: #cf6218 url(images/marmalade.jpg) no-repeat; position: relative; padding: 0; } #content { min-height: 300px; background: #fcf7ee url(images/content-bg-armal.gif) no-repeat bottom left; } #content, #quote { padding: 10px 15px; } #content .sample { margin-left: 98px; position: relative; margin-top: 1.2em; } #content .sample img { border: 1px solid #ccc; width: 290px; } #content .caption, #subNav { position: absolute; width: 180px; top: -3px; } #content .caption { left: 320px; } #wp_quotes { height: 70px; font-size: 0.95em; line-height: 1.1; background: url(images/quotes-open.gif) no-repeat top left; } .wp_quotes_quote { background: url(images/quotes-close.gif) no-repeat bottom right; padding: 0.4em 0 0.7em 2.2em; text-align: justify; } .wp_quotes_author { margin-top: 0.25em; font-style: italic; font-size: 0.9em; text-align: right; } #subNav { left: 435px; } #footer { padding: 12px 15px 0px 15px; _height: 1%; } #projectBrief { float: right; text-align: right; width: 40%; } #containerEnd { clear: both; } #toast div { background: url(images/toast.jpg) no-repeat bottom right; height: 310px; } #toast { background: url(images/page-background.gif) repeat-x bottom; margin-top: -310px; height: 310px; } /* Links */ a { color: #e6860f; } a:hover { color: #ffffff; background-color: #e6860f; text-decoration: none; } #logo a:hover { background: transparent; } h3 a, h4 a { color: #4e8d25; text-decoration: none; } h3 a:hover, h4 a:hover { background-color: #4e8d25; } /* Navigation */ /* We're using a semi-transparent png background image instead of css 'opacity' in order to preserve text opacity. IE specific rules are in style-ie.css */ #topNav ul, #subNav ul { list-style: none; margin: 0; } #topNav a, #subNav a { text-decoration: none; } #topNav li { font-size: 1.25em; } #topNav li a { color: #001f3b; display: block; width: 405px; padding: 2px 0 4px 15px; } #topNav li.current_page_item a, #topNav li.current_page_parent a { color: #fff; background: url(images/30-percent-white.png); } #topNav li a:hover { background: url(images/30-percent-white.png); } #subNav a { color: #777; line-height: 1.3; } #subNav a:hover { text-decoration: underline; background-color: #fff; } #subNav li.current_page_item a { color: #e6860f; } .galleryNav ul { list-style: none; margin: 0; overflow: hidden; } .galleryNav li { float: left; padding: 0 7px 7px 0; } .galleryNav img { border: 1px solid #002a67; } .galleryNav a { display: block; } .galleryNav a.curThumbnail { background-color: #e6860f; } /* Footer */ #footer a { text-decoration: none; } #footer a:hover { color: #001f3b; } #contact #email { background: url(images/envelope.gif) no-repeat left; padding-left: 24px; } #contact #tel { background: url(images/telephone.gif) no-repeat 2px top; padding-left: 24px; } #contact #address { background: url(images/house.gif) no-repeat 1px top; padding-left: 24px; } #doc a { display: block; padding-right: 32px; background: url(images/document.gif) no-repeat right; line-height: 1.3; font-size: 1.2em; } #doc a:hover { color: #e6860f; background: url(images/document-hover.gif) no-repeat right; } /* Miscellaneous */ .editLink { float: right; } .httpError { text-align: right; font-style: italic; color: #aaa; margin-top: 3em; } h3.price { float: right; } .priceItem { background: url(images/30-percent-white.png); padding: 3px 8px 6px 8px; border: 1px solid #fbe8d3; margin-bottom: 1em; } .priceItem p { margin: 0; } #homeCopy { font: 0.95em Arial; line-height: 1.1em; } #homeCopy td { vertical-align: top; } #homeCopy td.col1 { padding-right: 20px; } #homeCopy h4 { color: #3e3e3e; font-size: 1em; line-height: 1.1em; font-weight: bold; }