/* -------------------------------------------------------------- 
   
   
   == STRUCTURE: ========================
    * Page margins:          30px
    * Body width:            950 px
    * Number of columns:     24
    * Column width:          30 px
    * Margin width:          10 px
    * Total Page Width:      1010px
   ======================================
   
   This is a stylesheet with generic classes that can
   be used to prototype templates within the existing
   grid structure on www.freebase.com

   By default, the grid is 950px wide, with 24 columns 
   spanning 30px across, and a 10px margin between columns.
   Each page also has a 30px left and right page margin,
   resulting in a total page width of 1010px.

   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
   
   ** NOTE: THIS IS FOR PROTOTYPING ONLY. THESE STYLES SHOULD NOT
      BE USED IN OUR PRODUCTION ENVIRONMENT.
      
   For any questions related to this stylesheet, please talk to me.
   
   -- Kai (kai@metaweb.com)
   
-------------------------------------------------------------- */

/* Add this class to #content if you want a visual representation of our grid */
.showgrid {  background: url(/freebase_grid_overlay_png) repeat-y; }
.showgrid #content { background: transparent; }

#content { width: 95em; }

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.c-1, div.c-2, div.c-3, div.c-4, div.c-5, div.c-6, div.c-7, div.c-8, div.c-9, div.c-10, div.c-11, div.c-12, div.c-13, div.c-14, div.c-15, div.c-16, div.c-17, div.c-18, div.c-19, div.c-20, div.c-21, div.c-22, div.c-23, div.c-24 {float:left;margin-right: 10px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.c-1  { width: 30px;}
.c-2  { width: 70px;}
.c-3  { width: 110px;}
.c-4  { width: 150px;}
.c-5  { width: 190px;}
.c-6  { width: 230px;}
.c-7  { width: 270px;}
.c-8  { width: 310px;}
.c-9  { width: 350px;}
.c-10 { width: 390px;}
.c-11 { width: 430px;}
.c-12 { width: 470px;}
.c-13 { width: 510px;}
.c-14 { width: 550px;}
.c-15 { width: 590px;}
.c-16 { width: 630px;}
.c-17 { width: 670px;}
.c-18 { width: 710px;}
.c-19 { width: 750px;}
.c-20 { width: 790px;}
.c-21 { width: 830px;}
.c-22 { width: 870px;}
.c-23 { width: 910px;}
.c-24, div.c-24 { width: 950px; margin: 0; }


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}


/* 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: -40px;}
.pull-2  { margin-left: -80px;}
.pull-3  { margin-left: -120px;}
.pull-4  { margin-left: -160px;}
.pull-5  { margin-left: -200px;}
.pull-6  { margin-left: -240px;}
.pull-7  { margin-left: -280px;}
.pull-8  { margin-left: -320px;}
.pull-9  { margin-left: -360px;}
.pull-10 { margin-left: -400px;}
.pull-11 { margin-left: -440px;}
.pull-12 { margin-left: -480px;}
.pull-13 { margin-left: -520px;}
.pull-14 { margin-left: -560px;}
.pull-15 { margin-left: -600px;}
.pull-16 { margin-left: -640px;}
.pull-17 { margin-left: -680px;}
.pull-18 { margin-left: -720px;}
.pull-19 { margin-left: -760px;}
.pull-20 { margin-left: -800px;}
.pull-21 { margin-left: -840px;}
.pull-22 { margin-left: -880px;}
.pull-23 { margin-left: -920px;}
.pull-24 { margin-left: -960px;}

.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 -40px 1.5em 40px;}
.push-2  { margin: 0 -80px 1.5em 80px;}
.push-3  { margin: 0 -120px 1.5em 120px;}
.push-4  { margin: 0 -160px 1.5em 160px;}
.push-5  { margin: 0 -200px 1.5em 200px;}
.push-6  { margin: 0 -240px 1.5em 240px;}
.push-7  { margin: 0 -280px 1.5em 280px;}
.push-8  { margin: 0 -320px 1.5em 320px;}
.push-9  { margin: 0 -360px 1.5em 360px;}
.push-10 { margin: 0 -400px 1.5em 400px;}
.push-11 { margin: 0 -440px 1.5em 440px;}
.push-12 { margin: 0 -480px 1.5em 480px;}
.push-13 { margin: 0 -520px 1.5em 520px;}
.push-14 { margin: 0 -560px 1.5em 560px;}
.push-15 { margin: 0 -600px 1.5em 600px;}
.push-16 { margin: 0 -640px 1.5em 640px;}
.push-17 { margin: 0 -680px 1.5em 680px;}
.push-18 { margin: 0 -720px 1.5em 720px;}
.push-19 { margin: 0 -760px 1.5em 760px;}
.push-20 { margin: 0 -800px 1.5em 800px;}
.push-21 { margin: 0 -840px 1.5em 840px;}
.push-22 { margin: 0 -880px 1.5em 880px;}
.push-23 { margin: 0 -920px 1.5em 920px;}
.push-24 { margin: 0 -960px 1.5em 960px;}

.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 {
    color: #fff;
    background: #fff;
}

/* Border on right hand side of a column. */
div.border {
  padding-right:4px;
  margin-right:5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:28px;
  margin-right:25px;
  border-right: 1px solid #eee;
}

p {
  margin-bottom: 1.5em;
}

img.left {float:left;margin:0 1.5em 1.5em 0;padding:0;}
img.right {float:right;margin:0 0 1.5em 1.5em;}