@import "styles/style_reset.css";
@import "styles/tinymce_styles.css";
////////// .LESS VARIABLES: //////////
@NavBgColor: #FFC400;
@NavHoverBgColor: lighten(@NavBgColor, 20%);
@NavFontColor: #050505;
@NavHeight: 75px;
@LogoFontColor: #F21630;
@ContentBgColor: #050505;
@ShadowColor: #F7CA34;
@DefaultFont: Arial, Helvetica, sans-serif;
@FontColor: #DEC821;
@HeadingFontColor: #DEC821;
@H1FontSize: 24px;
@H2FontSize: 20px;
@H3FontSize: 16px;
@LinkLineType: solid;
@LinkColor: lighten(@FontColor,10%);
@BannerHeight: 200px;
@ContentWidth: 900px;
@SidebarWidth: 200px;
////////// .LESS FUNCTIONS: //////////
.verticalGradient(@start, @end, @stop1:0%, @stop2:100%){
	background: @end; 
	background: -moz-linear-gradient(top, @start @stop1, @end @stop2); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1,@start), color-stop(@stop2,@end));
	filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='%d', endColorstr='%d',GradientType=0 )", @start, @end));
}
.boxShadow(@horizontal:0px, @vertical:0px, @blur:5px, @color:#000000){
	-webkit-box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	box-shadow: @arguments;
}
.borderRadius(@topLeft:5px, @topRight:5px, @bottomRight:5px, @bottomLeft:5px){
	-webkit-border-radius-topleft: @topLeft;
	-webkit-border-radius-topright: @topRight;
	-webkit-border-radius-bottomright: @bottomRight;
	-webkit-border-radius-bottomleft: @bottomLeft;
	-moz-border-radius-topleft: @topLeft;
	-moz-border-radius-topright: @topRight;
	-moz-border-radius-bottomright: @bottomRight;
	-moz-border-radius-bottomleft: @bottomLeft;
	border-top-left-radius: @topLeft;
	border-top-right-radius: @topRight;
	border-bottom-right-radius: @bottomRight;
	border-bottom-left-radius: @bottomLeft; 
}
/////////////////////////////////////////////////////////////
@charset "utf-8";
/* CSS Document */
*,html,body{margin:0;padding:0;outline:none;}
html,body{width:100%;height:100%;position:relative;}
html{overflow-y:scroll;overflow-x:hidden;}
body{
	font-family: @DefaultFont;	
	color: @FontColor;
	font-size: 0.8em;
	background: @ContentBgColor;
}
h1, h2, h3 {
	font-weight: normal;
	color: @HeadingFontColor;	
}
h1 {font-size:@H1FontSize;}
h2 {font-size:@H2FontSize;}
h3 {font-size:@H3FontSize;}
	
#wrapper {
	width: @ContentWidth;
	margin: 0 auto;
}
#header {
	width: @ContentWidth;
	min-width: 700px;
	text-align:left;
	margin: 0 auto 20px auto;
	position: relative;
	
	#logo {
		float: left;
		height: @NavHeight;
		line-height: @NavHeight;
		text-decoration: none;
		font-weight: bold;
		font-size: 24px;
		color: @LogoFontColor;
		img {
			max-height: @NavHeight;
			line-height: @NavHeight;
		}
	}
	
	#nav {
		float: right;
		height: @NavHeight;
		li {
			list-style: none;
			float: right;
			margin: ((@NavHeight/2)-15) 10px;
			a {
				display: block;
				text-decoration: none;
				padding: 10px 15px;
				background: @NavBgColor;
				color: @NavFontColor;
				font-size: 1.2em;
				.borderRadius(20px,20px,20px,20px);			
				&:hover, &.active {
					background: @NavHoverBgColor;
				}
			}
		}
	}
	
	#banner {
		clear:both;
		height: @BannerHeight;
		width: @ContentWidth;
		img {width:100%;height:100%;}
	}
}
#contentWrapper {
	width: @ContentWidth;
	
	#article {
		width: @ContentWidth - @SidebarWidth - 40;
		float: left;
		
		img {
			padding: 10px;
			.borderRadius(15px, 15px, 15px, 15px);
			background: @NavBgColor;
		}
		p {
			line-height: 150%;
			margin-bottom: 20px;
			a:link, a:visited {
				text-decoration: none;
				color: @LinkColor;
				border-bottom: 1px @LinkLineType @LinkColor;
				&:hover, &:active {
					border-bottom: none;
					color: @FontColor;
				}
			}
		}
	}
	
	#aside {
		width: @SidebarWidth;
		float: right;
		padding: 10px;
		.borderRadius(15px, 15px, 15px, 15px);
		background: @NavBgColor;
		color: @NavFontColor;
		h3 {color: @NavFontColor;}
		img {
			max-width: @SidebarWidth;
		}
	}
}