.WidgetArea {
    
}

.WidgetHolder {
    float: left;
    vertical-align: top;
}
	.WidgetHolder.FloatRight {
		float: right;
	}
	.WidgetHolder.ClearLeft {
		clear: left;
	}

.WidgetHolderContent {
    position: relative;
}

.WidgetColumnSpan1, .WidgetColumnSpan2, .WidgetColumnSpan3, .WidgetColumnSpan4, .WidgetColumnSpan5 {
    width: 100%;
    margin: 0 0 12px 0;
}

.WidgetColumns2 .WidgetColumnSpan1 { width: 50%; }
.WidgetColumns2 .WidgetColumnSpan2 { width: 100%; }

.WidgetColumns3 .WidgetColumnSpan1 { width: 33.3%; }
.WidgetColumns3 .WidgetColumnSpan2 { width: 66.6%; }
.WidgetColumns3 .WidgetColumnSpan3 { width: 99.9%; }

.WidgetColumns4 .WidgetColumnSpan1 { width: 25%; }
.WidgetColumns4 .WidgetColumnSpan2 { width: 50%; }
.WidgetColumns4 .WidgetColumnSpan3 { width: 75%; }
.WidgetColumns4 .WidgetColumnSpan4 { width: 100%; }

.WidgetColumns5 .WidgetColumnSpan1 { width: 20%; }
.WidgetColumns5 .WidgetColumnSpan2 { width: 40%; }
.WidgetColumns5 .WidgetColumnSpan3 { width: 60%; }
.WidgetColumns5 .WidgetColumnSpan4 { width: 80%; }
.WidgetColumns5 .WidgetColumnSpan5 { width: 100%; }

.hasWidgetRowSpan{
	overflow-y: hidden;
}

.hasWidgetRowSpan .WidgetHolderContent{
	height: 100%;
}

/*$baseheight: 200px;*/
.WidgetRowSpan1{
	height: 200px; /*$baseheight*/
}
.WidgetRowSpan2{
	height: 400px; /*$baseheight*2*/
}
.WidgetRowSpan3{
	height: 600px; /*$baseheight*3*/
}
.WidgetRowSpan4{
	height: 800px; /*$baseheight*4*/
}
.WidgetRowSpan5{
	height: 1000px; /*$baseheight*5*/
}

@media all and (max-width: 800px) {
	.WidgetColumns3 .WidgetColumnSpan1 { width: 50%; }
	.WidgetColumns3 .WidgetColumnSpan2 { width: 100%; }
	.WidgetColumns3 .WidgetColumnSpan3 { width: 100%; }
	
	.WidgetColumns4 .WidgetColumnSpan1 { width: 50%; }
	.WidgetColumns4 .WidgetColumnSpan2 { width: 100%; }
	.WidgetColumns4 .WidgetColumnSpan3 { width: 100%; }
	.WidgetColumns4 .WidgetColumnSpan4 { width: 100%; }
	
	.WidgetColumns5 .WidgetColumnSpan1 { width: 50%; }
	.WidgetColumns5 .WidgetColumnSpan2 { width: 100%; }
	.WidgetColumns5 .WidgetColumnSpan3 { width: 100%; }
	.WidgetColumns5 .WidgetColumnSpan4 { width: 100%; }
	.WidgetColumns5 .WidgetColumnSpan5 { width: 100%; }
}

@media all and (max-width: 400px) {
	.WidgetColumns2 .WidgetColumnSpan1 { width: 100%; }
	.WidgetColumns2 .WidgetColumnSpan2 { width: 100%; }
	
	.WidgetColumns3 .WidgetColumnSpan1 { width: 100%; }
	.WidgetColumns3 .WidgetColumnSpan2 { width: 100%; }
	.WidgetColumns3 .WidgetColumnSpan3 { width: 100%; }
	
	.WidgetColumns4 .WidgetColumnSpan1 { width: 100%; }
	.WidgetColumns4 .WidgetColumnSpan2 { width: 100%; }
	.WidgetColumns4 .WidgetColumnSpan3 { width: 100%; }
	.WidgetColumns4 .WidgetColumnSpan4 { width: 100%; }
	
	.WidgetColumns5 .WidgetColumnSpan1 { width: 100%; }
	.WidgetColumns5 .WidgetColumnSpan2 { width: 100%; }
	.WidgetColumns5 .WidgetColumnSpan3 { width: 100%; }
	.WidgetColumns5 .WidgetColumnSpan4 { width: 100%; }
	.WidgetColumns5 .WidgetColumnSpan5 { width: 100%; }
	
	.WidgetRowSpan1, .WidgetRowSpan2, .WidgetRowSpan3, .WidgetRowSpan4, .WidgetRowSpan5{
		height: initial;
	}
}