/* $Id: layout.css,v 1.3 2009/08/14 18:29:12 jmburnz Exp $ */
/* adaptivethemes.com */

/**
 * AdaptiveTheme layout methods
 * 
 * @file      layout.css
 * @author    Jeff Burnz
 */
	
/*********************************************************

*--// Setting up the Sidebar Layout:
  
  In your subthemes page.tpl.php replace the body id="layout-1b" 
  with your chosen layout:
  
  e.g. id="layout-2c" (see below for all layout options).
  
  
  There are 3 main sidebar layouts and each has 3 unit variants:
	
  i. A layout controls the position of the sidebars:
  
     layout-1  -  Left  |  Content  |  Right  (standard 3 column)
     layout-2  -  Content  |  Left  |  Right  (two sidebars on the right)
     layout-3  -  Left  |  Right  |  Content  (two sidebars on the left)
  
  
  ii.Each variant uses a different relative unit (em, percentage or pixel):
  
     a variants are em's (elastic sidebars)
     b variants are percentages (fluid sidebars)
     c variants are pixels (fixed width sidebars)
     

  All layout variations:
  
  layout-1a  -  Left (20em)  |  Content  |  Right (20em)
  layout-1b  -  Left (25%)   |  Content  |  Right (25%)
  layout-1c  -  Left (240px) |  Content  |  Right (240px)
		
  layout-2a  -  Content  |  Left (20em)  |  Right (20em)
  layout-2b  -  Content  |  Left (25%)   |  Right (25%)
  layout-2c  -  Content  |  Left (240px) |  Right (240px)
		
  layout-3a  -  Left (20em)  |  Right (20em)  |  Content
  layout-3b  -  Left (25%)   |  Right (25%)   |  Content
  layout-3c  -  Left (240px) |  Right (240px) |  Content


*--// How to Modify a Layout:

  Copy it to the page.css file and modify it there.
  Changing it here will not work since this file is for example 
  only.
  
  Note: examples can be found in the layout-examples.css file.


*--// How to set the Width:

  The overall width is set on the #container div in page.css.
  See you subthemes page.css, around line 106. All layouts can
  be elastic, fluid or fixed width.
	

*--// Tip:

  If your site uses a page-front.tpl.php or any other page
  template suggestion your site can have multiple layouts.
		

/*********************************************************

  Layout 1
   
  The layout-1 layout is a standard 3 column layout, i.e.
			
  Left | Content | Right
			
  There are 3 variants that use one of Ems, Percentages or 
  Pixels to set the widths and margins:
			
  #layout-1a - Ems (elastic sidebars)
  #layout-1b - Percentages (fluid sidebars)
  #layout-1c - Pixels (fixed sidebars)
 
*********************************************************/
/**
 * #layout-1a
 * Unit:   em
 * Layout: Standard 3 col - left/content/right
 */
#layout-1a .two-sidebars .content-inner{margin:0 20em;}
#layout-1a .sidebar-first .content-inner{margin-left:20em;}
#layout-1a .sidebar-last .content-inner{margin-right:20em;}
#layout-1a #sidebar-first{width:20em;margin-left:-100%;}
#layout-1a #sidebar-last{width:20em;margin-left:-20em;}

/**
 * #layout-1b
 * Unit:   %
 * Layout: Standard 3 col - left/content/right
 */
#layout-1b .two-sidebars .content-inner{margin:0 25%;}
#layout-1b .sidebar-first .content-inner{margin-left:25%;}
#layout-1b .sidebar-last .content-inner{margin-right:25%;}
#layout-1b #sidebar-first{width:25%;margin-left:-100%;}
#layout-1b #sidebar-last{width:25%;margin-left:-25%;}

/**
 * #layout-1c
 * Unit:   px
 * Layout: Standard 3 col; left/content/right
 */
#layout-1c .two-sidebars .content-inner{margin:0 240px;}
#layout-1c .sidebar-first .content-inner{margin-left:240px;}
#layout-1c .sidebar-last .content-inner{margin-right:240px;}
#layout-1c #sidebar-first{width:240px;margin-left:-100%;}
#layout-1c #sidebar-last{width:240px;margin-left:-240px;}


/*********************************************************
   
  Layout 2
   
  The layout-2 layouts postion both sidebars to the right
  of the main content column, i.e.
			
  Content | Left | Right
			
  There are 3 variants that use one of Ems, Percentages or 
  Pixels to set the widths and margins:
			
  #layout-2a - Ems (elastic sidebars)
  #layout-2b - Percentages (fluid sidebars)
  #layout-2c - Pixels (fixed sidebars)
 
**********************************************************/
/**
 * #layout-2a
 * Unit:   em
 * Layout: Both sidebars on the right; content/left/right
 */
#layout-2a .two-sidebars .content-inner{margin-right:40em;}
#layout-2a .sidebar-first .content-inner{margin-right:20em;}
#layout-2a .sidebar-last .content-inner{margin-right:20em;}
#layout-2a #sidebar-first{width:20em;margin-left:-40em;}
#layout-2a #sidebar-last{width:20em;margin-left:-20em;}
#layout-2a .sidebar-first #sidebar-first{width:20em;margin-left:-20em;}

/**
 * #layout-2b
 * Unit:   %
 * Layout: Both sidebars on the right; content/left/right
 */
#layout-2b .two-sidebars .content-inner{margin-right:50%;}
#layout-2b .sidebar-first .content-inner{margin-right:25%;}
#layout-2b .sidebar-last .content-inner{margin-right:25%;}
#layout-2b #sidebar-first{width:25%;margin-left:-50%;}
#layout-2b #sidebar-last{width:25%;margin-left:-25%;}
#layout-2b .sidebar-first #sidebar-first{width:25%;margin-left:-25%;}

/**
 * #layout-2c
 * Unit:   px
 * Layout: Both sidebars on the right; content/left/right
 */
#layout-2c .two-sidebars .content-inner{margin-right:480px;}
#layout-2c .sidebar-first .content-inner{margin-right:240px;}
#layout-2c .sidebar-last .content-inner{margin-right:240px;}
#layout-2c #sidebar-first{width:240px;margin-left:-480px;}
#layout-2c #sidebar-last{width:240px;margin-left:-240px;}
#layout-2c .sidebar-first #sidebar-first{width:240px;margin-left:-240px;}


/*********************************************************
   
  Layout 3
   
  The layout-3 layouts postion both sidebars to the left
  of the main content column, i.e.
			
  Left | Right | Content
			
  There are 3 variants that use one of Ems, Percentages or 
  Pixels to set the widths and margins:
			
  #layout-3a - Ems (elastic sidebars)
  #layout-3b - Percentages (fluid sidebars)
  #layout-3c - Pixels (fixed sidebars)
 
**********************************************************/
/**
 * #layout-3a
 * Unit:   em
 * Layout: Both sidebars on the left - left/right/content
 */
#layout-3a .two-sidebars .content-inner{margin-left:40em;}
#layout-3a .sidebar-first .content-inner{margin-left:20em;}
#layout-3a .sidebar-last .content-inner{margin-left:20em;}
#layout-3a #sidebar-first{width:20em;margin-left:-100%;}
#layout-3a #sidebar-last{width:20em;margin-left:-100%;}
#layout-3a .two-sidebars #sidebar-last{width:20em;position:relative;left:20em;}

/**
 * #layout-3b
 * Unit:   %
 * Layout: Both sidebars on the left - left/right/content
 */
#layout-3b .two-sidebars .content-inner{margin-left:50%;}
#layout-3b .sidebar-first .content-inner{margin-left:25%;}
#layout-3b .sidebar-last .content-inner{margin-left:25%;}
#layout-3b #sidebar-first{width:25%;margin-left:-100%;}
#layout-3b #sidebar-last{width:25%;margin-left:-100%;}
#layout-3b .two-sidebars #sidebar-last{width:25%;position:relative;left:25%;}

/**
 * #layout-3c
 * Unit:   px
 * Layout: Both sidebars on the left - left/right/content
 */
#layout-3c .two-sidebars .content-inner{margin-left:480px;}
#layout-3c .sidebar-first .content-inner{margin-left:240px;}
#layout-3c .sidebar-last .content-inner{margin-left:240px;}
#layout-3c #sidebar-first{width:240px;margin-left:-100%;}
#layout-3c #sidebar-last{width:240px;margin-left:-100%;}
#layout-3c .two-sidebars #sidebar-last{width:240px;position:relative;left:240px;}


/*********************************************************
   
  Layout 4 - The Golden Rule
   
  The layout-4 layout is two column only. This layout is 
  commonly known as the Golden Rule Layout (1:1.618).
			
  Content | Left or Right (one only)
			
  There is only one variant:
			
  #layout-4 - Percentages (fluid)
 
**********************************************************/
/**
 * #layout-4
 * Unit:   %
 * Layout: Two column (one sidebar) content/left or right
 */
#layout-4 .two-sidebars .content-inner{margin-right:37%;}
#layout-4 .sidebar-first .content-inner{margin-right:37%;}
#layout-4 .sidebar-last .content-inner{margin-right:37%;}
#layout-4 #sidebar-first{width:37%;margin-left:-37%;}
#layout-4 #sidebar-last{width:37%;margin-left:-37%;}
#layout-4 .sidebar-first #sidebar-first{width:37%;margin-left:-37%;}


/*********************************************************
*                        Padding
**********************************************************/
/* Add padding to align elements to the grid. */
.node,.block,.block-at-admin,.comment,#skip-nav,#branding,#search-box,.primary-inner,.secondary-inner,
#mission,#main-content-header,.footer-message-inner,#attribution {padding:0 10px;}


/*********************************************************
*               Header elements basic styles
**********************************************************//
#branding{float:left;width:300px;}
#search-box{float:right;width:300px;}
#header-blocks{float:left;width:320px;}


/*********************************************************
*             Position floating Aside region
**********************************************************/
#content-aside{float:right;padding-left:10px;width:240px;}


/*********************************************************
*                 Skinr grid classes
**********************************************************/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {float:left;clear:none!important;display:inline;}

.grid_1 {width: 40px;}
.grid_2 {width: 100px;}
.grid_3 {width: 160px;}
.grid_4 {width: 220px;}
.grid_5 {width: 280px;}
.grid_6 {width: 340px;}
.grid_7 {width: 400px;}
.grid_8 {width: 460px;}
.grid_9 {width: 520px;}
.grid_10 {width: 580px;}
.grid_11 {width: 640px;}
.grid_12 {width: 700px;}
.grid_13 {width: 760px;}
.grid_14 {width: 820px;}
.grid_15 {width: 880px;}
.grid_16 {width: 940px;}


/*********************************************************
*            Helper classes for all layouts
**********************************************************/
/* Automatic centering for widths less than 100%. */
#container {
  margin: 0 auto;
  position: relative; /* Trigger hasLayout. */
} 

/* Trigger hasLayout. */
#columns {
  display: inline-block;
  margin-bottom: 1em;
}
/* Reset for compliant browsers. */
#container > #columns {
  display: block;
}

/* Float the columns. */
#content-column,
#sidebar-first,
#sidebar-last {
  float: left;
}

/* Set a width on main content column. */
#content-column {
  width: 100%;
  margin-bottom: 1em;
}

/* Helper class for clearing both. */
.clear,
#nav,
#columns,
#breadcrumb,
#content-bottom,
#secondary-content,
#tertiary-content,
#footer-wrapper,
#footer,
#footer-message {
  clear: both;
}

.hide {
  height: 0; 
  overflow: hidden;
}