@import "styles/style_reset.css";
@import "styles/tinymce_styles.css";
////////// .LESS VARIABLES: //////////
@NavBgColor: #191C5E;
@NavFontColor: #ffffff;
@NavHeight: 50px;
@LogoFontColor: #9E9400;
@LogoHeight: 100px;
@LogoBgLightColor: #ffffff;
@LogoBgDarkColor: #ffffff;
@BorderColor: #ffffff;
@ContentBgColor: #f0f0f0;
@ShadowColor: #4d4d4d;
@DefaultFont: Arial, Helvetica, sans-serif;
@FontColor: #000000;
@HeadingFontColor: #191C5E;
@H1FontSize: 24px;
@H2FontSize: 20px;
@H3FontSize: 16px;
@LinkLineType: solid;
@LinkColor: lighten(@FontColor,0%);
@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;
}
.textShadow(@horizontal:0px, @vertical:0px, @blur:5px, @color:#000000){
	-webkit-text-shadow: @arguments;
	-moz-text-shadow: @arguments;
	text-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; 
}
.postItEffect(){
	.boxShadow(1px, 1px, 3px, @ShadowColor);
	border: 10px solid @BorderColor;
}
/////////////////////////////////////////////////////////////
@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;	
	.textShadow(0, 1px, 1px, #ffffff);
}	
h1 {font-size:@H1FontSize;}
h2 {font-size:@H2FontSize;}
h3 {font-size:@H3FontSize;}
#wrapper {
	width: @ContentWidth;
	margin: 0 auto;
}
#headerWrapper {
	width: 100%;
	height: @NavHeight;
	text-align:left;
	margin-top: (@LogoHeight/2);
	margin-bottom: (@LogoHeight/2);
	position: relative;
	background: @NavBgColor;
	border-top: 1px solid darken(@NavBgColor, 15%);
	border-bottom: 1px solid darken(@NavBgColor, 15%);
	
	#header {
		width: @ContentWidth;
		height: @NavHeight;
		margin: 0 auto;
	
		#logo {
			float: right;
			height: @LogoHeight;
			width: @SidebarWidth;
			line-height: @LogoHeight;
			text-align: center;
			padding: 0 10px;
			.verticalGradient(@LogoBgLightColor, @LogoBgDarkColor, 50%, 100%);
			margin-top: -((@LogoHeight/2)-(@NavHeight/2)+10);
			.postItEffect;
			.textShadow(0, 1px, 1px, #ffffff);
			color: @LogoFontColor;
			text-decoration: none;
			font-weight: bold;
			font-size: 22px;
			img {
				max-height: @LogoHeight;
				line-height: @LogoHeight;
				max-width: @SidebarWidth;
			}
		}
		
		#nav {
			ol {
				height: @NavHeight;
				li {
					list-style: none;
					float: left;
					padding: 0 10px;
					margin: 10px 0;
					border-right: 1px solid darken(@NavBgColor, 15%);
					a {
						display: block;
						height: (@NavHeight - 20);
						line-height: (@NavHeight - 20);
						text-decoration: none;
						padding: 0 5px;
						color: @NavFontColor;
						font-size: 1.2em;		
						&:hover, &.active {border-bottom: 1px solid @NavFontColor;}
					}
				}
			}
		}
	}
}
#contentWrapper {
	width: @ContentWidth;
	margin: 0 auto;
	
	#article {
		width: @ContentWidth - @SidebarWidth - 100;
		float: left;
		margin-bottom: 50px;
		.boxShadow(1px, 1px, 3px, @ShadowColor);
		background: @BorderColor;
		padding: 15px;
		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;
		margin-top: 10px;
		padding: 0 15px;
		h3 {
			margin-bottom: 10px;
			font-size: 1.5em;
			text-align: center;
		}
		img {
			margin-bottom: 15px;
			max-width: @SidebarWidth;
		}
	}
}