/* -------------------------------------------------------------- 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. -------------------------------------------------------------- */ /* Import stylesheets and hide from IE/Mac \*/ /* End import/hide */ /* -------------------------------------------------------------- Reset.css * Resets default browser CSS styles. Original 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; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1; color: #333; background: white; } /* 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] Read more about using a baseline here: * alistapart.com/articles/settingtypeontheweb -------------------------------------------------------------- */ body { font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; line-height: 1.5; /* Unitless for proper inheritance */ } /* This is where you set your desired font size. The line-height and vertical margins are automatically calculated from this. You have to add an extra calculation here because of IE, so that all users may resize text manually in their browsers. The top one is for IE: The percentage is of 16px (default IE text size) 10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth). The second value is what all other browsers see (the wanted font size). */ body { font-size: 85%; } /* IE */ html > body { font-size: 14px; } /* Other browsers */ /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif; color:#111; clear:both; } h1 { font-size: 4.8em; } h2 { font-size: 2.5em; } h3 { font-size: 1.9em; line-height:2; } h4 { font-size: 1.9em; line-height:1.25; font-weight:bold; } h5 { font-size: 1.4em; font-weight:bold; } h6 { font-size: 1.4em; } /* Text elements -------------------------------------------------------------- */ p { margin: 0.5 0 2.1em 0; text-align:justify; } p.last { margin-bottom:0; } p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; } p img.top { margin-top:0; } /* Use this if the image is at the top of the

. */ ul, ol { margin: 0 0 1.5em 1.5em; } ol { list-style-type: decimal; } dl { margin: 1.5em 0; } dl dt { font-weight: bold; } a { color: #125AA7; text-decoration: underline; outline: none; } a:hover { color: #000; } blockquote { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } pre { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; } code { font:0.9em Monaco, monospace; } /* Use this to create a horizontal ruler across a column. */ hr { background: #B2CCFF; color: #B2CCFF; clear: both; float: none; width: 100%; height: 0.1em; margin: 0 0 1.4em 0; border: none; } * html hr { margin: 0 0 1.2em 0; } /* IE6 fix */ /* Tables -------------------------------------------------------------- */ table { margin-bottom: 1.4em; border-top:0.1em solid #ddd; border-left:0.1em solid #ddd; } th,td { height: 1em; padding:0.2em 0.4em; border-bottom:0.1em solid #ddd; border-right:0.1em solid #ddd; } th { font-weight:bold; } /* Forms -------------------------------------------------------------- */ label { font-weight: bold; } textarea { height: 180px; width: 300px; } /* Some default classes -------------------------------------------------------------- */ p.small { font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; } p.large { font-size: 1.2em; line-height: 2.5em; } p.quiet { color: #666; } .hide { display: none; } /* Extra fancy typography -------------------------------------------------------------- */ /* For great looking type, use this code instead of asdf: asdf Best used on prepositions and ampersands. */ .alt { color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; font-size: 1.2em; line-height: 1%; /* 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). (You may have to change this value depending on your font size). */ .dquo { margin-left: -.7em; } /* Reduced size type with incremental leading (http://www.markboulton.co.uk/journal/comments/incremental_leading/) This could be used for side notes. For smaller type, you don't necessarily want to follow the 1.5x vertical rhythm -- the line-height is too much. Using this class, it reduces your font size and line-height so that for every four lines of normal sized type, there is five lines of the sidenote. eg: New type size in em's: 10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems) New line-height value: 12px x 1.5 = 18px (old line-height) 18px x 4 = 72px 60px / 5 = 14.4px (new line height) 14.4px / 10px = 1.44 (new line height in em's) */ p.incr, .incr p { font-size: 0.83333em; /* font size 10px */ line-height: 1.44em; margin-bottom: 1.8em; /* Still 1.5 x normal font size as baseline */ } /* -------------------------------------------------------------- BLUEPRINT CSS * Filename: grid.css * Version: 0.6 (2007-09-21) YYYY-MM-DD * Website: http://code.google.com/p/blueprintcss/ Generated by: * Blueprint CSS Grid Generator (2007-10-16) [http://kematzy.com/blueprint-generator/] Based on work by: * Olav Bjorkoy [bjorkoy.com] * Nathan Borror [playgroundblues.com] * Jeff Croft [jeffcroft.com] * Christian Metts [mintchaos.com] * Khoi Vinh [subtraction.com] == STRUCTURE: ======================== * Page width: 792 px * Number of columns: 25 * Column width: 24 px * Margin width: 8 px ====================================== By default, the grid is 792px wide, with 25 columns spanning 24px, and a 8px margin between columns. If you need fewer or more columns, use this formula to calculate the new total width: Total width = (number_of_columns * column_width) - margin_width Read more about using a grid here: * subtraction.com/archives/2007/0318_oh_yeeaahh.php -------------------------------------------------------------- */ /* A container should group all your columns. */ .container { width: 792px; margin: 0 auto; } /* Columns -------------------------------------------------------------- */ /* Use this class together with the .span-x classes to create any composition of columns in a layout. */ .column { float: left; margin-right: 8px; } /* The last column in a row needs this class. */ .last { margin-right: 0; } /* Use these classes to set the width of a column. */ .span-1 { width: 24px;} .span-2 { width: 56px;} .span-3 { width: 88px;} .span-4 { width: 120px;} .span-5 { width: 152px;} .span-6 { width: 184px;} .span-7 { width: 216px;} .span-8 { width: 248px;} .span-9 { width: 280px;} .span-10 { width: 312px;} .span-11 { width: 344px;} .span-12 { width: 376px;} .span-13 { width: 408px;} .span-14 { width: 440px;} .span-15 { width: 472px;} .span-16 { width: 504px;} .span-17 { width: 536px;} .span-18 { width: 568px;} .span-19 { width: 600px;} .span-20 { width: 632px;} .span-21 { width: 664px;} .span-22 { width: 696px;} .span-23 { width: 728px;} .span-24 { width: 760px;} .span-25 { width: 792px; margin: 0; } /* Add these to a column to append empty cols. */ .append-1 { padding-right: 32px;} .append-2 { padding-right: 64px;} .append-3 { padding-right: 96px;} .append-4 { padding-right: 128px;} .append-5 { padding-right: 160px;} .append-6 { padding-right: 192px;} .append-7 { padding-right: 224px;} .append-8 { padding-right: 256px;} .append-9 { padding-right: 288px;} .append-10 { padding-right: 320px;} .append-11 { padding-right: 352px;} .append-12 { padding-right: 384px;} .append-13 { padding-right: 416px;} .append-14 { padding-right: 448px;} .append-15 { padding-right: 480px;} .append-16 { padding-right: 512px;} .append-17 { padding-right: 544px;} .append-18 { padding-right: 576px;} .append-19 { padding-right: 608px;} .append-20 { padding-right: 640px;} .append-21 { padding-right: 672px;} .append-22 { padding-right: 704px;} .append-23 { padding-right: 736px;} .append-24 { padding-right: 768px;} /* Add these to a column to prepend empty cols. */ .prepend-1 { padding-left: 32px;} .prepend-2 { padding-left: 64px;} .prepend-3 { padding-left: 96px;} .prepend-4 { padding-left: 128px;} .prepend-5 { padding-left: 160px;} .prepend-6 { padding-left: 192px;} .prepend-7 { padding-left: 224px;} .prepend-8 { padding-left: 256px;} .prepend-9 { padding-left: 288px;} .prepend-10 { padding-left: 320px;} .prepend-11 { padding-left: 352px;} .prepend-12 { padding-left: 384px;} .prepend-13 { padding-left: 416px;} .prepend-14 { padding-left: 448px;} .prepend-15 { padding-left: 480px;} .prepend-16 { padding-left: 512px;} .prepend-17 { padding-left: 544px;} .prepend-18 { padding-left: 576px;} .prepend-19 { padding-left: 608px;} .prepend-20 { padding-left: 640px;} .prepend-21 { padding-left: 672px;} .prepend-22 { padding-left: 704px;} .prepend-23 { padding-left: 736px;} .prepend-24 { padding-left: 768px;} /* Border on right hand side of a column. */ .border{ padding-right:3px; margin-right:4px; border-right:1px solid #eee; } /* Border with more whitespace, spans one column. */ .colborder { padding-right:21px; margin-right:20px; border-right:1px solid #eee; } /* Use these classes on an element to push it into the next column, or to pull it into the previous column. */ .pull-1 { margin-left: -32px;} .pull-2 { margin-left: -64px;} .pull-3 { margin-left: -96px;} .pull-4 { margin-left: -128px;} .push-0 { margin: 0 0 0 18px; float: right; } /* Right aligns the image. */ .push-1 { margin: 0 -32px 0 18px; float: right;} .push-2 { margin: 0 -64px 0 18px; float: right;} .push-3 { margin: 0 -96px 0 18px; float: right;} .push-4 { margin: 0 -128px 0 18px; float: right;} .push-0, .push-1, .push-2, .push-3, .push-4 { float: right; } /* Misc classes and elements -------------------------------------------------------------- */ /* Use a .box to create a padded box inside a column. */ .box { padding: 1.5em; margin-bottom: 1.5em; background: #eee; } /* Use this to create a horizontal ruler across a column. */ hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.4em; border: none; } hr.space { background: #fff; color: #fff; } /* Clearing floats without extra markup Based on How To Clear Floats Without Structural Markup by PiE [http://www.positioniseverything.net/easyclearing.html] */ .clear { display: inline-block; } .clear:after, .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clear { height: 1%; } .clear { display: block; } /* -------------------------------------------------------------- Buttons.css * Gives you some great buttons for many purposes. Created by Kevin Hale [particletree.com] * particletree.com/features/rediscovering-the-button-element W3C: "Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities." Usage: Change Password Cancel -------------------------------------------------------------- */ a.button, button { display:block; float:left; margin:0 0.583em 0.667em 0; padding:5px 10px 6px 7px; /* Links */ border:0.1em solid #dedede; border-top:0.1em solid #eee; border-left:0.1em solid #eee; background-color:#f5f5f5; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; } button { width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */ } button[type] { padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ } *:first-child+html button[type] { padding:4px 10px 3px 7px; /* IE7 */ } button img, a.button img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; } /* Button colors -------------------------------------------------------------- */ /* Standard */ button:hover, a.button:hover{ background-color:#dff4ff; border:0.1em solid #c2e1ef; color:#336699; } a.button:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff; } /* Positive */ .positive { color:#529214; } a.positive:hover, button.positive:hover { background-color:#E6EFC2; border:0.1em solid #C6D880; color:#529214; } a.positive:active { background-color:#529214; border:0.1em solid #529214; color:#fff; } /* Negative */ .negative { color:#d12f19; } a.negative:hover, button.negative:hover { background:#fbe3e4; border:0.1em solid #fbc2c4; } a.negative:active { background-color:#d12f19; border:0.1em solid #d12f19; color:#fff; } /* Compressed version: [http://teenage.cz/acidofil/tools/cssformat.php] Comment out @import statements above, and add this one when your site has launched (Ca 60% compressed): @import "lib/compressed.css"; */ /* Uncomment the line below to see the grid and baseline. (Assuming you've wrapped your columns in a container). .container { background: url(lib//css/img/grid.png); } .container { background: url(lib/img/baseline.png); } */ body { background: white url('/v1/css/img/blu_bdy_bg.gif') repeat-x; } .container { background: transparent url('/v1/css/img/sep-bkgd.gif') no-repeat; } .container table { width: 98%; margin: 35px auto; } .container table th, .container table td { text-align: center } h2, h3, h4, h5 { text-align: center } .container #header { width: 792px; height: 220px; background: transparent url('/v1/css/img/shark-hdr.jpg') no-repeat top center; } .container #header h1 { display: block; text-indent: -1000px; overflow: hidden; width: 100%; height: 100%; } .container h2 { } .container h2, .container h3 { font-weight: bold; color: #33627D; } .container h4 { font-weight: bold; color: #A7CADF; } .container h5 { font-style: italic; color: #B6C8DB; } .container table th { font-size: 110%; font-weight: bolder } .container table td { font-size: 100%; font-weight: bold } .container hr { } .container .cen { float: none; margin: 3px auto; text-align: center } .container p { margin: 0.2em 1.8em 0.6em 2.5em; } .container .cen p { text-align: center; margin: 0.2em auto 0.6em auto; } .container #wmvs { width: 575px; height: auto; margin: 3px auto; } .container #wmvs ul, .container #wmvs li { } .container #wmvs ul { list-style: none; width: auto; list-style: none; margin: 0; } .container #wmvs li { text-align: center; float: left; margin-left: 5px; margin-right: 5px; } .container #reviews { width: 782px; margin-left: 5px; margin-right: 5px; } .container #reviews .title { margin-left: 25px; width: 757px; } .container #reviews .title dl { margin-left: 5px; } /* */ /* */ #footer dl { margin-top: 0px; left: 0px; margin-bottom: 0px; } #footer dt { margin-left: 0px; border-right-width: 0px; width: auto; } #footer dd { width: auto; float: left; margin-left: 5px; margin-right: 5px; } .bigBlue { background-color:#E0EEF5; color:#21507C; font-size:18px; font-weight:bold; margin:3px auto; padding:5px 8px; text-transform: uppercase; } .container ul#mNavigation { list-style: none; width: auto; list-style: none; margin: 0; } .container ul#mNavigation li { text-align: center; float: left; margin-left: 5px; margin-right: 5px; } label { font-weight: bold; } /* Fieldsets */ fieldset { padding: 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ddd; } legend { padding: 0 .4em; font-weight: bold; font-size: 1.2em; } /* Textareas */ textarea { margin: 0.5em 0.5em 0 0; } textarea { padding: .4em; } /* hForm -------------------------------------------------------------- */ form.hform p { margin: 0 0 .5em; } form.hform p label { float: left; width: 100px; } form.hform p input { width: 200px; } form.hform p select { width: 200px; } form.hform p input.button { width: auto; } form.hform p input.checkbox { width: auto; } form.hform p input.radio { width: auto; } form.hform p.checkbox { margin-left: 100px; } form.hform p.checkbox label { float: none; } form.hform p.checkbox input { width: auto; } /* vForm -------------------------------------------------------------- */ form.vform p { margin: 0 0 .5em; } form.vform p label { display: block; } form.vform p.checkbox label { display: inline; } #contactFrm { float: left; width: 338px; } #contactFrm form { width: 380px; margin-left: 0px; } #contactFrm fieldset { margin-left: 8px; } #contactFrm textarea { width: 187px; } #contactFrm .button { margin-left: 328px; } #contactTxt { float: right; width: 325px; } #henrysgigs { margin: 1.614em auto .614em auto; font-size: 120%; line-height: 160%; border: 1px solid #6F8CC5; width: 88%; } #henrysgigs strong { text-transform: uppercase; } #henrysgigs .cloudcast a { text-transform: uppercase; color: #F95E04; } #henrysgigs em { font-style: normal !important; }