html, body
{
	height:100%;
	padding:0px;
	margin:0px;
	font-size:14px;
}

.centered
{
	margin-left:auto;
	margin-right:auto;
}

.rounded_corners(@radius) 
{  
    border-radius:@radius;
}

.clearfix
{
	clear:both;
}

/*RED*/
@color_red_text: #FFAAAA;

.theme_red
{
	font-family:arial;

	.container
	{
		width:100%;
		height:100%;
		background: url(../img/bg_red00.jpg);
		background-repeat:no-repeat;
		background-position:center center;
		background-size:cover;
	}

	.header_wrapper
	{
		width:20%;
		height:100%;
		float:left;
		background: url(../img/bg_red01.jpg);
	}

	.body_wrapper
	{
		width:70%;
		height:90%;
		float:right;
		border-bottom:3px double @color_red_text;
	}

	.footer_wrapper
	{
		width:70%;
		float:right;
		height:10%;
	}

	.content_wrapper
	{
		width:100%;
	}

	.content
	{
		color:@color_red_text;
		padding:10px;
	}

	.header
	{
		color:@color_red_text;
		font-family:georgia;
		font-size:7em;
		-webkit-transform-origin:100% 100%;
		-webkit-transform:rotate(-90deg);
		transform-origin:100% 100%;
		transform:rotate(-90deg);
		margin-top:1em;
	}

	.content1
	{
		width:45%;
		float:left;
		.content;
	}

	.content2
	{
		font-size:1.5em;
		width:45%;
		height:50%;
		float:right;
		.content;
	}

	.content3
	{
		width:45%;
		height:300px;
		margin-top:10px;
		float:right;
		background-image:url(../img/bg_red02.jpg);
		background-repeat:no-repeat;
		background-position:left center;
		background-size:contain;
	}

	.footer
	{
		color:#FFFFFF;
		font-size:0.7em;
	}
}

/*GREEN*/
@green_content_background: rgba(100,255,100,0.7);
@color_green_text: rgba(0,0,0,0.8);

.theme_green
{
	font-family:arial;
	font-size:1.2em;

	.container
	{
		width:100%;
		height:100%;
		background: url(../img/bg_green00.jpg);
		background-repeat:no-repeat;
		background-position:left top;
		background-size:20%;
	}

	.header_wrapper
	{
		width:100%;
		height:20%;
	}

	.body_wrapper
	{
		width:100%;
		height:65%;
	}

	.footer_wrapper
	{
		width:100%;
		height:15%;
		background: #FFFFFF; /* Old browsers */
		background: -moz-linear-gradient(top, #FFFFFF 0%, @green_content_background 41%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #FFFFFF 0%,@green_content_background 41%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #FFFFFF 0%,@green_content_background 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='@green_content_background',GradientType=0 ); /* IE6-9 */
	}

	.content_wrapper
	{
		width:95%;
		padding-top:2%;
		padding-bottom:2%;
		.centered;
	}

	.content
	{
		.rounded_corners(2em);
		border:0.5em solid darken(@green_content_background,50%);
		background-color: darken(@green_content_background,10%);
		color:@color_green_text;
		width:75%;
		.centered;
		padding:1em;
	}

	.header
	{
		width:80%;
		height:20%;
		.centered;
		text-align:center;
		font-size:6.5em;
		font-family: impact;
		color:darken(@green_content_background,50%);
	}

	.content1
	{
		width:100%;
		.content;
	}

	.content1:after
	{
		display:block;
		content:"";
		clear:both;
	}

	.content1 p
	{
		float:left;
		margin-left:2em;
	}

	.content2
	{
		width:100%;
		margin-top:1em;
		.content;
		.centered;
	}

	.content3
	{
		width:100%;
		height:150px;
		background-image:url(../img/bg_green01.jpg);
		background-repeat:no-repeat;
		background-position:right center;
		background-size:contain;
		margin-top:-10%;
		margin-right:-10%;
	}

	.footer
	{
		margin-top:1em;
		color:@color_green_text;
		font-size:0.7em;
	}
}

/*BLUE*/
@color_blue_overlay: rgba(50,50,100,0.7);
@color_blue_content_background: rgba(255,255,255,0.8);
@color-blue-border: #4444FF;
@color-blue-text: #AAAAFF;

.theme_blue
{
	font-family:verdana;

	background-image:url(../img/bg_blue00.jpg);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:cover;

	.container
	{
		width:70%;
		height:100%;
		background-color: @color_blue_overlay;
		.centered;
	}

	.header_wrapper
	{
		background-color: darken(@color_blue_overlay,50%);
		width:100%;
		height:20%;
		text-align:center;
	}

	.body_wrapper
	{
		width:100%;
		height:70%;
	}

	.footer_wrapper
	{
		background-color: darken(@color_blue_overlay,10%);
		width:100%;
		height:10%;
	}

	.content_wrapper
	{
		width:98%;
		padding-top:1%;
		padding-bottom:1%;
		.centered;
	}

	.content
	{
		border:2px solid @color-blue-border;
		background-color: darken(@color_blue_overlay,10%);
		color:@color-blue-text;
		padding:1em;
		.rounded_corners(0.5em);
	}

	.header
	{
		font-size:5.5em;
		font-family:verdana;
		color: lighten(@color_blue_overlay,50%);
		font-weight:bold;
	}

	.content1
	{
		width:35%;
		float:left;
		font-size:0.85em;
		.content;
	}

	.content2
	{
		width:55%;
		float:right;
		.content;
	}

	.content3
	{
		width:400px;
		height:400px;
		float:right;
		background-image:url(../img/bg_blue01.png);
		background-repeat:no-repeat;
		background-position:center center;
		background-size:contain;
	}

	.footer
	{
		color:lighten(@color-blue-text,10%);
		font-size:0.7em;
	}
}