/*                                                     		*/
/* Styles for the responsive layout template 1-2-2-3-1 		*/
/*													   		*/
/* 	- should work with all div-based layouts          		*/
/*	- dont go up to 100%. reserve some space for padding	*/
/*													   		*/
/*			#content-wrapper { width: 100%; }				*/


	
.tplrow 	{ display: table; width: 100%; }
.lfr-column { display: table-cell; vertical-align: top; }

.lfr-column.width10 {	width: 10%; }
.lfr-column.width20 {	width: 20%; }
.lfr-column.width30 {	width: 30%; }
.lfr-column.width40 {	width: 40%; }
.lfr-column.width50 {	width: 50%; }
.lfr-column.width60 {	width: 60%; }
.lfr-column.width70 {	width: 70%; }
.lfr-column.width80 {	width: 80%; }
.lfr-column.width90 {	width: 90%; }
.lfr-column.width100 { 	width: 100%; }

/* ---------------------------------------------------- */
/* --------- MEDIA QUERIES FOR SMALL LAYOUTS ---------- */
/* ---------------------------------------------------- */
@media all and (max-width: 600px){

	/* SEMANTIC ATTRIBUTED CONTENT */
	#wrapper #banner { width: 100%; }
	#wrapper #banner .logo a { width: 100%; background-size: contain; }
	#wrapper #banner #smallLogo { width: 5%; display: block; }
	#wrapper #banner .lfr-dock {}
	#wrapper #banner #navigation { margin: 0; padding: 0; }
	#wrapper #banner #navigation ul li{ font-size: 0.7em; }
	#wrapper #banner #navigation a{ margin: 0 0 3px 0; }
	
	#wrapper #content-wrapper .tplrow { display: block; width: 100%; }
	
	#wrapper #content-wrapper .lfr-column { display: block; width: 100%; }
	
	#wrapper #footer { width: 100%; }

	/* TYPES OF CONTENT */
	img, embed, object, video {
		max-width: 100%;
	}
}


@media all and (max-width: 800px){
	.user-greeting span { font-size: 0.7em }	
}


/* This CSS controls the column layout. It is not recommended that you change this file. */

/* ---------- Wrapper ---------- */

.lfr-grid {
	border-collapse: collapse;
	width: 100%;
}

.lfr-grid .lfr-column {
	padding: 0px;
	padding: 5px;
	
}

/* ---------- Column widths ---------- */

.lfr-grid.dragging .lfr-column {
	height: 100px;
	min-height: 100px;
}

.lfr-column.ten {
	width: 10%;
}

.lfr-column.twenty {
	width: 20%;
}

.lfr-column.thirty {
	width: 30%;
}

.lfr-column.forty {
	width: 40%;
}

.lfr-column.fifty {
	width: 50%;
}

.lfr-column.sixty {
	width: 60%;
}

.lfr-column.seventy {
	width: 70%;
}

.lfr-column.eighty {
	width: 80%;
}

.lfr-column.ninety {
	width: 90%;
}

/* ---------- 1 column ---------- */

.columns-1 #column-1, .columns-max #column-1 {
	clear: both;
	display: table;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

/* ---------- 2 columns ---------- */

.columns-2 #column-1 {
	padding-left: 0;
}

.columns-2 #column-2 {
	padding-right: 0;
}

/* ---------- 3 columns ---------- */

.columns-3 #column-1 {
	padding-left: 0;
}

.columns-3 #column-2 {
}

.columns-3 #column-3 {
	padding-right: 0;
}

/* ---------- 1/2/1 ---------- */

.columns-1-2-1 #column-1, .columns-1-2-1 #column-4 {
	padding-left: 0;
	padding-right: 0;
}

.columns-1-2-1 #column-2 {
	padding-left: 0;
}

.columns-1-2-1 #column-3 {
	padding-right: 0;
}

/* ---------- 2/2 ---------- */

.columns-2-2 #column-1, .columns-2-2 #column-2 {
	padding-left: 0;
}

.columns-2-2 #column-4 {
	padding-right: 0;
}

/* ---------- Freeform ---------- */

.freeform .lfr-column {
	position: relative;
}

.columns-2-2 #column-4 {
	padding-right: 0;
}