/* -------------------------------------------------------------- 
BLUEPRINT CSS
* Filename:grid.css
* Version:0.7.1 (2008-02-25) YYYY-MM-DD
* Website:http://code.google.com/p/blueprintcss/
Generated by:* Blueprint CSS Grid Generator (2008-11-17) [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:910 px
* Number of columns:24
* Column width:36 px
* Margin width:2 px
======================================
By default,the grid is 910px wide,with 24 columns 
spanning 36px,and a 2px 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
-------------------------------------------------------------- */
/* reset.css */
html,body,object,iframe,blockquote,pre,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,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.5;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
table,td,th{vertical-align:middle;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a img{border:none;}
/* A container should group all your columns. */
.container{width:910px;margin:0 auto;}
/* Use this class on any div.span / container to see the grid. */
.showgrid{/* background:url(grid.png);*/}
/* Body margin for a sensile default look. */
body{margin:0;background:#FBFAF8 url(../images/background.gif) repeat-x top right;}
/* Columns
-------------------------------------------------------------- */
/* Sets up basic grid floating and margin. */
div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,div.span-7,div.span-8,div.span-9,div.span-10,div.span-11,div.span-12,div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24{float:left;margin-right:2px;}
/* The last column in a row needs this class. */
div.last{margin-right:0;}
/* Use these classes to set the width of a column. */
.span-1{width:36px;}
.span-2{width:74px;}
.span-3{width:112px;}
.span-4{width:150px;}
.span-5{width:188px;}
.span-6{width:226px;}
.span-7{width:264px;}
.span-8{width:302px;}
.span-9{width:340px;}
.span-10{width:378px;}
.span-11{width:416px;}
.span-12{width:454px;}
.span-13{width:492px;}
.span-14{width:530px;}
.span-15{width:568px;}
.span-16{width:606px;}
.span-17{width:644px;}
.span-18{width:682px;}
.span-19{width:720px;}
.span-20{width:758px;}
.span-21{width:796px;}
.span-22{width:834px;}
.span-23{width:872px;}
.span-24,div.span-24{width:910px;margin:0;}
/* Add these to a column to append empty cols. */
.append-1{padding-right:38px;}
.append-2{padding-right:76px;}
.append-3{padding-right:114px;}
.append-4{padding-right:152px;}
.append-5{padding-right:190px;}
.append-6{padding-right:228px;}
.append-7{padding-right:266px;}
.append-8{padding-right:304px;}
.append-9{padding-right:342px;}
.append-10{padding-right:380px;}
.append-11{padding-right:418px;}
.append-12{padding-right:456px;}
.append-13{padding-right:494px;}
.append-14{padding-right:532px;}
.append-15{padding-right:570px;}
.append-16{padding-right:608px;}
.append-17{padding-right:646px;}
.append-18{padding-right:684px;}
.append-19{padding-right:722px;}
.append-20{padding-right:760px;}
.append-21{padding-right:798px;}
.append-22{padding-right:836px;}
.append-23{padding-right:874px;}
/* Add these to a column to prepend empty cols. */
.prepend-1{padding-left:38px;}
.prepend-2{padding-left:76px;}
.prepend-3{padding-left:114px;}
.prepend-4{padding-left:152px;}
.prepend-5{padding-left:190px;}
.prepend-6{padding-left:228px;}
.prepend-7{padding-left:266px;}
.prepend-8{padding-left:304px;}
.prepend-9{padding-left:342px;}
.prepend-10{padding-left:380px;}
.prepend-11{padding-left:418px;}
.prepend-12{padding-left:456px;}
.prepend-13{padding-left:494px;}
.prepend-14{padding-left:532px;}
.prepend-15{padding-left:570px;}
.prepend-16{padding-left:608px;}
.prepend-17{padding-left:646px;}
.prepend-18{padding-left:684px;}
.prepend-19{padding-left:722px;}
.prepend-20{padding-left:760px;}
.prepend-21{padding-left:798px;}
.prepend-22{padding-left:836px;}
.prepend-23{padding-left:874px;}
/* Border on right hand side of a column. */
div.border{padding-right:0px;margin-right:0px;border-right:2px solid #f6f6f6;}
/* Border on left hand side of a column. */
div.border-left{padding-right:0px;margin-right:0px;border-left:2px solid #f6f6f6;}
/* Border with more whitespace,spans one column. */
div.colborder{padding-right:38px;margin-right:35px;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:-38px;}
.pull-2{margin-left:-76px;}
.pull-3{margin-left:-114px;}
.pull-4{margin-left:-152px;}
.pull-5{margin-left:-190px;}
.pull-6{margin-left:-228px;}
.pull-7{margin-left:-266px;}
.pull-8{margin-left:-304px;}
.pull-9{margin-left:-342px;}
.pull-10{margin-left:-380px;}
.pull-11{margin-left:-418px;}
.pull-12{margin-left:-456px;}
.pull-13{margin-left:-494px;}
.pull-14{margin-left:-532px;}
.pull-15{margin-left:-570px;}
.pull-16{margin-left:-608px;}
.pull-17{margin-left:-646px;}
.pull-18{margin-left:-684px;}
.pull-19{margin-left:-722px;}
.pull-20{margin-left:-760px;}
.pull-21{margin-left:-798px;}
.pull-22{margin-left:-836px;}
.pull-23{margin-left:-874px;}
.pull-24{margin-left:-912px;}
.pull-1,.pull-2,.pull-3,.pull-4,.pull-5,.pull-6,.pull-7,.pull-8,.pull-9,.pull-10,.pull-11,.pull-12,.pull-13,.pull-14,.pull-15,.pull-16,.pull-17,.pull-18,.pull-19,.pull-20,.pull-21,.pull-22,.pull-23,.pull-24{float:left;position:relative;}
.push-1{margin:0 -38px 1.5em 38px;}
.push-2{margin:0 -76px 1.5em 76px;}
.push-3{margin:0 -114px 1.5em 114px;}
.push-4{margin:0 -152px 1.5em 152px;}
.push-5{margin:0 -190px 1.5em 190px;}
.push-6{margin:0 -228px 1.5em 228px;}
.push-7{margin:0 -266px 1.5em 266px;}
.push-8{margin:0 -304px 1.5em 304px;}
.push-9{margin:0 -342px 1.5em 342px;}
.push-10{margin:0 -380px 1.5em 380px;}
.push-11{margin:0 -418px 1.5em 418px;}
.push-12{margin:0 -456px 1.5em 456px;}
.push-13{margin:0 -494px 1.5em 494px;}
.push-14{margin:0 -532px 1.5em 532px;}
.push-15{margin:0 -570px 1.5em 570px;}
.push-16{margin:0 -608px 1.5em 608px;}
.push-17{margin:0 -646px 1.5em 646px;}
.push-18{margin:0 -684px 1.5em 684px;}
.push-19{margin:0 -722px 1.5em 722px;}
.push-20{margin:0 -760px 1.5em 760px;}
.push-21{margin:0 -798px 1.5em 798px;}
.push-22{margin:0 -836px 1.5em 836px;}
.push-23{margin:0 -874px 1.5em 874px;}
.push-24{margin:0 -912px 1.5em 912px;}
.push-1,.push-2,.push-3,.push-4,.push-5,.push-6,.push-7,.push-8,.push-9,.push-10,.push-11,.push-12,.push-13,.push-14,.push-15,.push-16,.push-17,.push-18,.push-19,.push-20,.push-21,.push-22,.push-23,.push-24{float:right;position:relative;}
/* Misc classes and elements
-------------------------------------------------------------- */
/* Use a .box to create a padded box inside a column. */ 
.box{padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
/* 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.45em;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] */
.clearfix:after,.container:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix,.container{display:inline-block;}
* html .clearfix,
* html .container{height:1%;}
.clearfix,.container{display:block;}
/* Regular clearing
apply to column that should drop below previous ones. */
.clear{clear:both;}