/*----------------------------------------------------------------------------------------------------------------------------------------------------------
      ONE TO THREE COLUMNED LAYOUTS
      To create layouts with more columns, simply copy the 3column template & rename <div class='container columnsx'>
      where x = the number of columns you require, then add in the applicable styles.
      This will allow you to run multiple templates (with a varying number of columns) off this one layout stylesheet.
      If you have added more columns, ensure you also add more div's in the theme template (i.e. <div class='container4'></div>)
      
      Do not remove these styles! 
  ------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.container {
	background-color: transparent; /* Default background-colour */
	margin: auto; /* Center on page */
	position: relative;
	width: 960px; /* or width 100% if no width specified */
}

#container1,
#container2,
#container3 {
	float: left;
	position: relative;
	width: 100%;
}

#col1, #col2, #col3 {
	float: left;
	min-height: 400px;
	height: auto;
	overflow: hidden;
	position: relative;
}

/* This is required on the outer container to chop off overhanging containers*/
.columns3 #container3,
.columns2 #container2,
.columns1 #container1 { overflow: hidden; right: 0px; }

/*----------------------------------------------------------------------------------------------------------------------------------------------------------
      BACKGROUND COLOURS AND INTERIOR BORDERS
      
      Do not remove these styles! 
  ------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ---------------------------BACKGROUNDS --------------------------------- */ 
.leftcol #container1,
.columns3 #container1 { background: #FFF url('http://holdenkapiti.co.nz/uploads/holden/images/content-gradient.png') repeat-x; } /* Left column background colour */

.columns1 #container1 {background: #FFF url('http://holdenkapiti.co.nz/uploads/holden/images/content-gradient.png') repeat-x; } /* Main content background colour */
.leftcol #container2,
.rightcol #container1,
.columns3 #container2 { background: #FFF url('http://holdenkapiti.co.nz/uploads/holden/images/content-gradient.png') repeat-x; }

.rightcol #container2, 
.columns3 #container3 { background: #FFF url('http://holdenkapiti.co.nz/uploads/holden/images/content-gradient.png') repeat-x; } /* Right column background colour */

/* --------------------- BORDERS - Column interior borders -----------------*/
.leftcol #container1,
.rightcol #container1,
.columns3 #container1,
.columns3 #container2 { border-right: none; }

/* --------------------- BORDERS - Column exterior borders -----------------*/

.columns1 #container1,
.columns3 #container3, 
.leftcol #container2,
.rightcol #container2,
.doublecol #container2 { /* width: auto; */ }

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------
      STYLES FOR SPECIFIC COLUMN LAYOUTS
      Do not remove these styles!
      
      * Widths, padding and left/right positioning are all adjustable.
      * Ensure max-width is applied to all #cols (value: widht + padding) - 
        This is required so all floats remain within containing div.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* One column */
.columns1 #col2 { left: 0; padding: 0 50px; width: 860px; max-width: 960px; }

/* Two columns: Left Col */
.leftcol #container1 { right: 770px; }
.leftcol #col1 { left: 770px; padding: 0 10px; width: 170px; max-width: 190px; }
.leftcol #col2 { left: 770px; padding: 0 10px; width: 750px; max-width: 770px; }

/* Two columns: Right Col */
.rightcol #container1 { right: 390px; }
.rightcol #col2 { left: 390px; padding: 20px; width: 530px; max-width: 570px; }
.rightcol #col3 { left: 390px; padding: 20px; width: 350px; max-width: 390px; }

/* Two columns: Double Col - Useful for Contact page */
.doublecol #container1 { right: 460px; }
.doublecol #col1 { left: 460px; padding: 0 10px 0px 50px; width: 410px; max-width: 470px;}
.doublecol #col2 { left: 460px; padding: 0 50px 0px 10px; width: 410px; max-width: 470px;}

/* Three columns */
.columns3 #container1 { right: 580px; }
.columns3 #container2 { right: 190px; }
.columns3 #col1 { left: 770px; padding: 0 10px; width: 170px; max-width: 190px; }
.columns3 #col2 { left: 770px; padding: 0 10px; width: 560px; max-width: 580px; }
.columns3 #col3 { left: 770px; padding: 0 10px; width: 170px; max-width: 190px; }

/* -----------------------------------------------------------------
     Content Blocks
-------------------------------------------------------------------*/
 
.contentBlock,
.imageBlock { 
	clear: both; 
	float: left; /* This is required to encapsulated floated images inside the div */
	height: 100%;
	position: relative;
	width: 100%; /* This is required so that subsequent items eg menus are positioned correctly */
}

.contentBlock img { max-width: 100%; } /* This ensures images are contained */