/* -------------------------------------------------------------- Blueprint CSS Framework [bjorkoy.com/blueprint] * Screen & Projection Styles * This is the main CSS-file for the framework. Include this in the of every page. See the Readme file in this directory for further instructions. Modified for SilContent2 by Ingo Kasprzak -------------------------------------------------------------- */ /* -------------------------------------------------------------- Reset.css * Resets default browser CSS styles. Created by Erik Meyer: * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ -------------------------------------------------------------- */ 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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* Remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } /* Remove possible quote marks (") from ,

. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* -------------------------------------------------------------- Typography.css * Sets some default typography. Based on work by: * Nathan Borror [playgroundblues.com] * Jeff Croft [jeffcroft.com] * Christian Metts [mintchaos.com] * Wilson Miner [wilsonminer.com] * Typogrify [code.google.com/p/typogrify] The default font size is 12px. The baseline is set to 18px. When you're setting heights of elements, always remember to use a multiple of the baseline (18,36,54..). The height of images shoud also be a multiple of 18. Read more about using a baseline here: * alistapart.com/articles/settingtypeontheweb -------------------------------------------------------------- */ body,ul,ol,dl,h1,h2,h3,h4,h5,h6,td,th, caption,pre,p,blockquote,input,textarea { font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px; /* Baseline here at 150%. This is set multiple places. */ color: #333; } /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif; margin: 0; padding: 9px 0; color:#111; clear:both; } /* Total height for each heading has to be a multiple of the baseline (18). */ h1 { font-size: 36px; line-height: 36px; padding: 18px 0; } h2 { font-size: 28px; line-height: 36px; } h3 { font-size: 18px; } h4 { font-size: 14px; } h5 { font-size: 12px; font-weight:bold; } h6 { font-size: 10px; font-weight:bold; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 18px 0; text-align:justify; } p.last { margin-bottom:0; } p img { float: left; margin: 18px 18px 18px 0; padding:0; } p img.top { margin-top:0; } /* Use this if the image is at the top of the
. */ ul, ol { margin: 18px 0 18px 18px; list-style-type:disc; } li { line-height:18px; } ol { list-style-type: decimal; } dl { margin: 18px 0; } dl dt { font-weight: bold; } a { color: #00127F; text-decoration: none; outline: none; } a:hover { color: #ca0000; } blockquote { margin: 18px 0 18px 23px; font-size: 0.9em; color: #666; font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } pre { margin-bottom: 18px; line-height:18px; background: #eee; padding:8px; border:1px solid #ddd; } code { font:0.9em Monaco, monospace; } /* Tables -------------------------------------------------------------- */ table { margin-bottom: 13px; border-top:1px solid #ddd; border-left:1px solid #ddd; } th,td { height:17px; padding:0 8px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } th { font-weight:bold; } /* Some default classes -------------------------------------------------------------- */ .small, .small p { font-size: 10px; } .large, .large p { font-size: 14px; } .quiet, .quiet p { color: #666; } .hide { display: none; } /* TODO: Implement image captions. */ .caption { } /* Extra fancy typography -------------------------------------------------------------- */ /* For great looking ampersands, use this code instead of &: & */ .amp { color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; font-size: 1.1em; line-height:10%; /* Fix to maintain correct baseline */ font-style: italic; } /* For great looking quote marks in titles, replace "asdf" width: “asdf” (That is, when the title starts with a quote mark). */ .dquo { margin-left: -.7em; } /* (You may have to change this value depending on your font size). */ /* -------------------------------------------------------------- Grid.css * Creates an easy to use grid of 14 columns. Based on work by: * Nathan Borror [playgroundblues.com] * Jeff Croft [jeffcroft.com] * Christian Metts [mintchaos.com] * Khoi Vinh [subtraction.com] By default, the grid is 960px wide, with columns spanning 50px, and a 20px margin between columns. If you need fewer or more columns, use this formula to find the new total width: Total width = (columns * 70) - 20 -------------------------------------------------------------- */ body { text-align: center; /* IE Fix */ margin:36px 0; } /* A conainer should group all your columns. */ .container { text-align: left; position: relative; padding: 0; margin: 0 auto; /* Centers layout */ width: 960px; /* Total width */ } /* Clear fix */ .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Use this to create a horizontal ruler across a column. BUG: Margins butchered in IE */ hr { background: #ca0000; color: #ca0000; /* IE Fix */ clear: both; float: left; width: 100%; height: 2px; margin: 8px 0 8px 0; padding: 0; border: none; } /* Columns -------------------------------------------------------------- */ /* Use this class together with the .span-x classes to create any compsition of columns in a layout. Nesting columns works like a charm (remember .first and .last). */ .column { float: left; margin: 0 10px; padding: 0; } /* Add this class to a column if you want a border on its right hand side. This should be customized to fit your needs. */ .border { padding-right: 9px; margin-right: 0; border-right: 1px solid #eee; } /* The first and last elements in a multi-column block needs one of these classes each. */ .first { margin-left: 0; } .last { margin-right: 0; } /* Use span classes to set how wide a column should be. */ /* Add append classes to a column to append empty cols. */ /* Add prepend classes to a column to prepend empty cols. */ .span-1 { width: 50px; } .append-1 { padding-right: 70px; } .prepend-1 { padding-left: 70px; } .span-2 { width: 120px; } .append-2 { padding-right: 140px; } .prepend-2 { padding-left: 140px; } .span-3 { width: 190px; } .append-3 { padding-right: 210px; } .prepend-3 { padding-left: 210px; } .span-4 { width: 260px; } .append-4 { padding-right: 280px; } .prepend-4 { padding-left: 280px; } .span-5 { width: 330px; } .append-5 { padding-right: 350px; } .prepend-5 { padding-left: 350px; } .span-6 { width: 400px; } .append-6 { padding-right: 420px; } .prepend-6 { padding-left: 420px; } .span-7 { width: 470px; } .append-7 { padding-right: 490px; } .prepend-7 { padding-left: 490px; } .span-8 { width: 540px; } .append-8 { padding-right: 560px; } .prepend-8 { padding-left: 560px; } .span-9 { width: 610px; } .append-9 { padding-right: 630px; } .prepend-9 { padding-left: 630px; } .span-10 { width: 680px; } .append-10 { padding-right: 700px; } .prepend-10 { padding-left: 700px; } .span-11 { width: 750px; } .append-11 { padding-right: 770px; } .prepend-11 { padding-left: 770px; } .span-12 { width: 820px; } .append-12 { padding-right: 840px; } .prepend-12 { padding-left: 840px; } .span-13 { width: 890px; } .append-13 { padding-right: 910px; } .prepend-13 { padding-left: 910px; } .span-14 { width: 960px; } .append-14 { padding-right: 980px; } .prepend-14 { padding-left: 980px; } /* Use a .box to create a padded box inside a column. Sticking to 18px wide gaps since that's the baseline. */ .box { padding: 18px; margin-bottom: 18px; background: #f0f0f0; } /* Nudge your elements [subtraction.com/archives/2007/0606_nudge_your_e.php]: All block elements (not hr) inside a col should have a 5px padding on each side. (Not everyone wants this, but feel free to uncomment if you do.) p,ul,ol,dl,h1,h2,h3,h4,h5,h6, caption,pre,blockquote,input,textarea { padding-left: 5px; padding-right: 5px; } div, table { margin-left: 5px; margin-right: 5px; padding: 0; } */ /* Images -------------------------------------------------------------- */ /* Remember the baseline (typography.css). */ img { margin: 0 0 18px 0; } /* Use these classes to make an image flow into the column before or after it. This technique can also be used on other objects. */ .pull-1 { margin-left: -70px; } .pull-2 { margin-left: -140px; } .pull-3 { margin-left: -210px; } .push-1 { margin: 0 -52px 18px 18px; float: right; } .push-2 { margin: 0 -122px 18px 18px; float: right; } .push-3 { margin: 0 -192px 18px 18px; float: right; } (%if $blueprint_show_grid==true %) /* Uncomment the line below to see the grid and baseline. (Assuming you've wrapped your columns in a container). */