/*----------------------------------------------------------------------------------------------------------------------------------------------------------
      ONE TO THREE COLUMNED LAYOUTS
      To create layouts with more columns, simply copy the 3column template <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! 
     (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;
	width: 950px; /* or width 100% if no width specified */
}

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

#col1, #col2, #col3 {
	float: left;
	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,
.columns2 #container2 {background: #FFF url('/uploads/optics/images/flax.jpg') repeat-y; } /* Main content background colour */ height: 1057px;
.leftcol #container2,
.rightcol #container1,
.columns3 #container2 { background: none; }

.rightcol #container2, 
.columns3 #container3 { background: none; } /* 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.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.columns1 #col2 { left: 0; width: 950px; max-width: 950px; }

/* Two columns: Left Col */
.leftcol #container1 { right: 646px; }
.leftcol #col1 { left: 646px; padding: 0 0 0 10px; width: 202px; max-width: 212px; }
.leftcol #col2 { left: 646px; padding: 0 10px; width: 626px; max-width: 646px; }

/* Two columns: Right Col */
.rightcol #container1 { right: 190px; }
.rightcol #col2 { left: 190px; padding: 0 50px; width: 670px; max-width: 670px; }
.rightcol #col3 { left: 190px; padding: 0 10px; width: 170px; max-width: 190px; }

/* 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; }

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

#inner { background: transparent url(/uploads/optics/images/content-bg.png) no-repeat scroll 26px 100px; float: left; }

#contentInner { background: #FFF; float: left; margin: 80px 26px 0 26px; padding: 10px 20px; width: 858px; }

/* remove styles below this point for launch +++ */

/*
.home-page .columns1 #col2,
.calendar-page .columns1 #col2,
.photos-page .columns1 #col2 { margin-top: 80px; }
*/

/* Pages with sub Tabs 
.classifieds-page .columns1 #container1, 
.incontact-page .columns1 #container1 { background: #FFF url('/uploads/optics/images/flax-sq-corner.jpg') repeat-y; }*/