/*----------------------------------------------------------------------------------------------------------------------------------------------------------
      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'>)
      
      Do not remove these styles! 
  ------------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

#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: none; } /* Left column background colour */

.columns1 #container1 {background: none; } /* Main content background colour */
.leftcol #container2,
.rightcol #container1,
.columns3 #container2 { background: none; }

.rightcol #container2, 
.columns3 #container3 { background: none; } /* Right column background colour */

.columns1 #col2,
.rightcol #col2 {
background: transparent url('http://www.accessauto.co.nz/uploads/access/images/col2Bg.png') repeat-x; -moz-border-radius: 8px 0 0 0; min-height:726px; } 

.rightcol #col3 { background: transparent url('http://www.accessauto.co.nz/uploads/access/images/col2Bg.png') repeat-x; min-height:726px; }

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

.home-page .rightcol #container1 { border-top: 1px solid #CCE5FF; }

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

.columns1 #container1,
.columns3 #container3, 
.leftcol #container2,
.rightcol #container2,
.doublecol #container2 { margin-bottom: 20px;/* 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: 15px; width: 920px; max-width: 950px; }

/* 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: 2px; padding-top: 20px; margin-top: 10px;}

.rightcol #col2 { margin-left: 0px; padding: 15px; width: 555px; max-width: 555px; }

.rightcol #col3 { margin-left: 27px; padding: 15px; width: 310px; max-width: 310px; }

/* 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;
	margin-bottom: 10px;
	position: relative;
	width: 100%;
} 

.contentBlock:after,
.imageBlock:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.contentBlock img { max-width: 100%; } /* Contain within containing block */