@import "elements";

/*
body {
	.gradient(@bgLight, @bgLight, #FFF);
}
*/

div#wrapper {
	margin: 0 auto 2em auto;
	width: 900px;
}

div#container {
	background-color: @contentBg;
	.bordered(@contentBg,@contentBg,@contentBg,@contentBg, 5px);
	.rounded(10px);
	
	.drop-shadow(0, 0, 20px, 0.5);
	
	div.inner {
		border: 1px @bgLight solid;
		.rounded;
	}
}

/* HEADER */
header {
	padding: 1em;
	
	a {
		border-bottom: 0;
		
		&:link{
			color: @textColor;
		}
	}
	h1 {
		color: @primaryColor;
		font-size: 2em;
		font-weight: bold;
		margin-bottom: 0.2em;
	}
	h2 {
		color: @subtleText;
		font-size: 1.5em;
	}
}

div.loginform {

	width: 420px;
	a#signup-link {
		margin: 0 0 0.5em 0;
		float: right;
		text-align: right;
	}
	
	a#password-link {
		float: right;
		margin-top: 7px;
	}
	div.checkbox {
		background: transparent;
		margin-top: 10px;
		margin-left: 1em;
		padding: 0;
		float: left;
		width: 200px;
		
	}
	input#UserPassword {
		float: left;
		width: 40%;
	}
	input.submit {
		border: 5px @bgLight solid;
		float: left;	
		font-weight: bold;
		padding: 0.2em 0.5em 0.2em 0.5em;
		color: @textColorAlternate;
		background-color: @primaryColor;
		.rounded;
	}
}
/* Login page */
div.login-page {
	.flexbox(horizontal,start,start);
	
	div {
		.flexbox-children(0);
		margin-right: 2em;
	}
}

/*Retreive password form */
form#UserRetrievePasswordForm,
form#UserAddForm {
	float: left;
	margin-bottom: 2em;
}
nav {
	float: right;
	margin-right: 0.5em;
}

div.primary {
	.flexbox(horizontal, start);
	width: 100%;
	
	iframe {
		.flexbox-children;
		width: 500px;
	}
	div.cta {
		.flexbox(vertical, center, center);
		.flexbox-children(1);
		
		div {
			color: @subtleText;
			padding: 1em;
			width: 220px;
			
			p {
				margin-top: 0.1em;
				width: auto;
			}
		}
	}
}
a.cta1 {
	.button;
	display: block;
	width: 200px;
	height: 30px;
	padding-top: 0.8em;
}
a.cta2 {
	/* Primary color, aux color, hover color, hover color2, active color */
	.button(#ee432e, #c63929, #cb0500, #db504d, #9c1500);
	display: block;
	width: 200px;
}

/* PRIMARY CONTENT */
div#content {
	clear: both;
	padding: 0 1em 2em 1em;
	color: @textColor;
	background-color: @contentBg;
}

div.tour {
	div {
		width: 33em;
	}
}
div.primary p {
	font-size: 1em;
	}

/* DESCRIPTION */
div.description {
	width: 70%;
	float: left;
	
	description p {
		margin: 0 0 1.5em 0;
	}
}
/* IMPORTANT LINKS - WHAT - WHY - HOW*/
div.important {
	margin: 6px 1.5em 0 0;
	width: 20%;
	float: right;
	}
img.important {
	margin: 0 0 0 0;
	}
ul.important li {
	margin: 0 0 1.5em 0;
}
a.important {
	font-size: 3em;
	border: 0;
}
a.important:link {
	padding: 3px;
	color: @primaryColor;
	background-color: @contentBg;
	border: 3px @primaryColor solid;
}
a.important:visited {
	padding: 3px;
	color: @primaryColor;
	background-color: @contentBg;
	border: 3px @primaryColor solid;
}
a.important:hover {
	padding: 3px;
	color: @textColorAlternate;
	background-color: @primaryColor;
	border: 3px @primaryColor solid;
}
a.important:active {
	padding: 3px;
	color: @primaryColor;
	background-color: @contentBg;
	border: 3px @primaryColor solid;
}

ul.slogan {
	margin: 0 0 2em 1em;
}
ul.slogan li {
	width: 450px;
	list-style-type: disc;
	}


/* AUXILIARY DIV */
div#content {
	
	.auxiliary {
		padding: 0 1em 0 1em;
		background-color: @bgBase;
	
		h3 {
			padding: 0;
			color: @textColorAlternate;
			border-bottom: 2px solid @primaryColor;
		}
		ul {
			color: @textColorAlternate;
			
			li {
				margin: 1em 0 0 0;
				font-size: 0.8em;
				list-style-type: none;
				border-bottom: 1px solid #808080;
			}
		}
		div.readable-information {
			width: 14em;
			float: left;
		}
	}
}

/* CONTACT PAGE */
div.contact {
	.flexbox;
	
	div {
		margin-right: 1em;
		.flexbox-children(1);
	}
}