/*----------------------------------------------------------------------------------------------------------------------------------------------------------
      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! 
     (c) Copyright Webz Development Limited 2009.  Not to be reused without permission.
  ------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.container {
	background-color: #FFF; /* Default background-colour */
	border: none;
	margin: auto; /* Center on page */
	position: relative;
        max-width: 1400px;
	min-width: 772px; 
        width: 100%;
}

#container1,
#container2,
#container3 {
  background-color: #FFF;
	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: transparent; } /* Left column background colour */

.leftcol #container1,
.rightcol #container1,
.columns3 #container2 { background: transparent; }

.columns1 #container1,
.columns2 #container2, 
.columns3 #container3 { background: #FFF; } /* 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 2%; width: 96%; max-width: 100%; }

/* Two columns: Left Col */
.leftcol #container1 { right: 70%; }
.leftcol #col1 { left: 70%; padding: 0  0 0 2%; width: 18%; max-width: 20%; }
.leftcol #col2 { left: 70%; padding: 0 2%; width: 76%; max-width: 80%; }

/* Two columns: Right Col */
.rightcol #container1 { right: 40%; }
.rightcol #col2 { left: 40%; padding: 0 2%; width: 56%; max-width: 60%; }
.rightcol #col3 { left: 40%; padding: 0 2%; width: 36%; max-width: 40%; }

/* Two columns: Double Col - Useful for Contact page */
.doublecol #container1 { right: 50%; }
.doublecol #col1 { left: 50%; padding: 0 2%; width: 46%; max-width: 50%;}
.doublecol #col2 { left: 50%; padding: 0 2%; width: 46%; max-width: 50%;}

/* Three columns */
.columns3 #container1 { right: 60%; }
.columns3 #container2 { right: 20%; }
.columns3 #col1 { left: 80%; padding: 0 0 0 2%; width: 18%; max-width: 20%; }
.columns3 #col2 { left: 80%; padding: 0 2%; width: 56%; max-width: 60%; }
.columns3 #col3 { left: 80%; padding: 0 2% 0 0; width: 18%; max-width: 20%; }

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

.contentBlock img { float: none; margin: 5px; }

.contentBlock img.floatNone   { float: none; }
.contentBlock img.floatLeft   { float: left; }
.contentBlock img.floatRight { float: right; }