/* 
© 2009 Baigent Ltd

Our main column structure is as follows:

<div id="gridOuterContainerRainbow">		Just used for inheritance
	<div class="colTop"></div>					Hats on all columns with a single image
	<div class="colBG">							Background colours to all columns with a single image
		<div id="col0"></div>					Container - 1st col (See below for content structure)
		<div id="col1"></div>					Container - 2nd col
		<div id="col2"></div>					Container - 3rd col
	</div>
	<div class="colBottom"></div>				Booties on all columns with a single image
</div>


Our column structure is as follows (This example includes additional white space for legibility) :

<div id="col0">
	<ul>
		<li>
			<a href="/5to7/Things2Do/201" title="Watch me! - 5 to 7" >
				<img src="/Content/Images/Watch_Me_5to7.png" alt="Watch me! - 5 to 7" />
			</a>
		</li>
	</ul>
</div>
*/



/* Sizing and allignment common to all colours values */
.colTop
{
    width: 800px;
	height:10px;
	float: left;
	overflow: hidden
}

.colBG
{
	width: 800px;
	float: left;
	padding: 10px 0 2px 0;
}

.colBottom
{
    width: 800px;
	height:70px;
	float: left;
}


/* Override the background images based on what colour(s) we need */
#gridOuterContainerRainbow .colTop		{background-image: url(/content/images/bg/rainbowtop.gif); }
#gridOuterContainerBlue .colTop			{background-image: url(/content/images/bg/bluewidetop.gif);}
#gridOuterContainerOrange .colTop		{background-image: url(/content/images/bg/orangewidetop.gif);}
#gridOuterContainerPurple .colTop		{background-image: url(/content/images/bg/purplewidetop.gif);}

#gridOuterContainerRainbow .colBG		{background-image: url(/content/images/bg/rainbowbg.gif);}
#gridOuterContainerBlue .colBG			{background-color: #01C8E7;}
#gridOuterContainerOrange .colBG		{background-color: #FF6A04;}
#gridOuterContainerPurple .colBG		{background-color: #993399;}

#gridOuterContainerRainbow .colBottom	{background-image: url(/content/images/bg/rainbowbottom.gif);}
#gridOuterContainerBlue .colBottom		{background-image: url(/content/images/bg/bluewidebottom.gif);}
#gridOuterContainerOrange .colBottom	{background-image: url(/content/images/bg/orangewidebottom.gif);}
#gridOuterContainerPurple .colBottom	{background-image: url(/content/images/bg/purplewidebottom.gif);}


/* Column sizing and alignment */
#col0, #col2
{
	float: left;
	width: 267px;
	
}
#col1
{
	float: left;
	width: 266px;
}
#col3
{
	float: left;
	width: 800px;
}

/* all layouts */
#col0 ul, #col1 ul, #col2 ul, #col3 ul
{
	list-style-type: none;
	margin: 10px 0px;
	float:left;
}

/* non-rainbow using columns 0-2 */
#col0 ul 
{
    padding-left: 17px;
}
#col1 ul 
{
    padding-left: 8px;
}
#col2 ul 
{
    padding-left: 0px;
}

/* rainbow using columns 0-2 */
#gridOuterContainerRainbow #col0 ul
{
    padding-left:0px;
}
#gridOuterContainerRainbow #col1 ul
{
    padding-left:9px;
}    
#gridOuterContainerRainbow #col2 ul
{
    padding-left:18px;
}     


/* using column 3 only */
#col3 ul{
    padding-left: 26px;
}




#col0 li,#col1 li,#col2 li, #col3 li
{
	margin: 0px 0px 8px 0px;
	padding: 0px 2px 0px 10px;
}
#col3 li
{
    float: left;
}

#col0 a,#col1 a,#col2 a,#col3 a
{
	text-decoration: none;
}

#col0 img,#col1 img,#col2 img,#col3 img
{
	border: none;
}

.clearFloats
{
	clear:both;
	height:1px;
	overflow: hidden;
}