/* 

Simple Boxes Framework
-------------------------------------------------------------------------------------------------------

Steve Woods - LaniLogic Technology Solutions Ltd
May 2013

This is a very simple framework for setting up column-based layouts in CSS, which also allow
you to very easily over-ride with responsive values simply by specifying a new width percentage
for each column type.

Column declarations
-----------------------
Take care to make sure that all columns add up to 100%, i.e.

	<div class='col col25'></div>
	<div class='col col50'></div>
	<div class='col col25'></div>
	<br class='clearFix' />

3 Column Layouts example.
	Also notice that .col34 exists for using .col33 in a 3 column layout:
	33%+33%+33% = 99% so we make one 34% to equal 100%
	Other examples:
	34% + 66% = 100%

Add your own column permutations as you see fit :-)

For responsiveness, simply over-ride the .col class with your own desired percentage in your media-queries i.e.;
	.col { width: 100% !important; }

	or even specific columns, such as:
	.col33 { width: 100%; } 
	to convert a 3 column section into a single column that will then stack 
	(Don't forget to add the same override to .col34 if you do this)

Enjoy!

*/


.col10 { width:	10%; }
.col20 { width:	20%; }
.col23 { width:	23%; }
.col24 { width:	24%; }
.col25 { width:	25%; }
.col26 { width:	26%; }
.col30 { width:	30%; }
.col33 { width:	33%; }
.col34 { width:	34%; }
.col35 { width:	35%; }
.col37 { width:	37%; }
.col38 { width:	38%; }
.col40 { width:	40%; }
.col44 { width: 44%; }  
.col50 { width:	50%; }
.col55 { width: 55%; }
.col60 { width:	60%; }
.col65 { width:	65%; }
.col66 { width:	66%; }
.col67 { width:	67%; }
.col70 { width:	70%; }
.col75 { width:	75%; }
.col80 { width:	80%; }
.col90 { width:	90%; }
.col100 { width:	100%; }

.col { float: left; }

/* Clear the float parameters of any preceding containers */
.clearFix { clear:	both; }

/* Align the contents of a .col to the left | center | right */
.col-contents-left { text-align:	left; }
.col-contents-right { text-align:	right; }
.col-contents-middle { text-align: center; }


/* Shadows */
.shadow5 {
	-webkit-box-shadow: 0px 5px 2px rgba(50, 50, 50, 0.4);
-moz-box-shadow:    0px 5px 2px rgba(50, 50, 50, 0.4);
box-shadow:         0px 5px 2px rgba(50, 50, 50, 0.4);
}