@charset "UTF-8";
@import "css/reset.css"; /* Eric Meyer's Reset */
@import "css/fonts.css"; /* Web Fonts */


/* !MAIN -------------------------------------------------------------------- */
	
	@img: "../img/";
	
	@width: 978px;
	
	@pushdown: #2b2c30;
	@pushdown-border: #1e1f22;
	@highlight: #fff;
	@offwhite: #e4e4e4;
	@grey: #787878;
	@light-grey: #949494;
	@faint-grey: #dedede;
	@dark-grey: #333333;
	@dark-grey2: #212121;
	@very-dark: #4a4c4f;
	@yellow: #fce167;
	@blue: #007ad0;
	@light-blue: #43aee8;
	@faint-blue: #a1d7f4;
	@sep: #a4a4a4;
	@sep-shadow: #d2d2d2;
	
	@font-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
	
	@font-reg: "AllerRegular", @font-base;
	@font-italic: "AllerItalic", @font-base;
	@font-bold: "AllerBold", @font-base;
	@font-bold-italic: "AllerBoldItalic", @font-base;
	@font-light: "AllerLightRegular", @font-base;
	@font-light-italic: "AllerLightItalic", @font-base;
	@font-display: "AllerDisplayRegular", @font-base;
	
	html {
		height:100%;
		margin: 0; padding: 0;
		background: #fff;
		/* font: normal 100%/1.3 @font-base; */
		font-family: @font-base; font-size: 100%;
	}
	
	body {
		height:100%;
		min-height: 100%;
		margin: 0; padding: 0;
		font-family: @font-base;
		font-size: 1em; /* 16x.875=14 */
		font-weight: normal;
		line-height: 18px;
		
		overflow: auto;
	}
	
	/* !ALIGNMENT OVERLAY -------------------------------------------------------------------- */
	
	#layout {
		display: none;
		z-index: 10000;
		filter:  ~"alpha(opacity=50)"; /*older IE*/
		filter:  ~"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";  /* IE */
		-moz-opacity: .50; /*older Mozilla*/
		-khtml-opacity: 0.5;   /*older Safari*/
		opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
		background: url("@{img}overlay2.png") top center no-repeat;
		position: absolute; top: 0px; left: 50%;
		width: 997px; min-width: 997px; min-height: 1887px;
		margin-left: -498px;
		color: #FFF;
		text-align: center;
		vertical-align: middle;
		font-weight: bold;
	}

	
	/* End ALIGNMENT OVERLAY -------------------------------------------------------------------- */
	
	
	@col-width: 310px;
	@col-margin: 24px;
	
	.wrapper {
		width: @width;
		margin: 0 auto; padding: 0;
		
		clear: both;
		overflow: visible;
		/*border-left: 1px solid fuchsia; border-right: 1px solid fuchsia;*/ /* remove before plublishing */
		
		&.bg { 
			width: 906px; min-height: 625px;
			padding: 36px;
			background: url("@{img}white-bg.png") top no-repeat;
		}
	}
	
	.col {
		width: @col-width; /* sets all columns to 3 column setup by default */
		float: left;
		margin: 0; margin-right: @col-margin;
		
		font-size: 1em;
		text-shadow: none;
		
		h3 { margin: 15px 0; }
		
		h2 {
			margin-bottom: 20px;
		}

		&.last { margin-right: 0; }
	}
	
	.clear { clear: both; }
		
	hr {
		display: block;
		width: @width; height: 14px;
		margin: 0 auto;
		background: url("@{img}seperator.png");
		border: 0;
	}
	
	.hide {
		display: none;
	}


/* !TYPE -------------------------------------------------------------------- */

	/* General ---------------------------------- */
	
	strong { font-weight: bold; }
	em { font-style: italic; }

	/* Headings ---------------------------------- */
	
	h1, h2, h3, h4, h5 {
		font-family: @font-bold;
		color: @light-grey;
	}
	h1 {
		width: @width;
		margin: 0 auto 15px;
		text-shadow: 2px 1px 2px rgba(0,0,0,0.5);
		line-height: 1;
		font-family: @font-bold-italic;
		font-size: 2.5em;
		color: #fff;
	}
	
	h2 {
		margin-bottom: 1em;		/* 24px */
		font-size: 1.5em;		/* 24px */
		color: @blue;
		line-height: 1;			/* 24px */
	}
	h3 {
		margin-bottom: 1.2em;	/* 24px */
		font-family: @font-reg;
		font-size: 1.25em;		/* 20px */
		color: @blue;
		line-height: 1.2;		/* 24px */
	}
	h4 {
		margin-bottom: 1.333em;	/* 24px */
		font-size: 1.125em;		/* 18px */
		line-height: 1.333;		/* 24px */
	}
	h5 {
		font-weight: bold;
	}
	h5,
	h6 {
		margin-bottom: 1.5em;	/* 24px */
		font-size: 1em;			/* 16px */
		line-height: 1.5;		/* 24px */
	}
	
	/* !Paragraphs ---------------------------------- */
	p {
		margin-bottom: 1.5em;
	}
	/* robust paragraph indenting: http://csswizardry.com/2010/12/mo-robust-paragraph-indenting  */
/*
	p+p{
		text-indent:2em;
		margin-top:-1.5em;
	}
*/
	
	/* !Links ---------------------------------- */
	/* Say no to negative hovers: http://csswizardry.com/2011/05/on-negative-hovers/
	A negative hover is one whose appearance is subtracted from on hover rather than added to. */
	a {
		text-decoration: none;
		color: @light-blue;
		
		&:visited { opacity: 0.8; /* A bit basic, but itÕs a bare minumum... */ }
		&:hover { text-decoration: underline; }
		&:active, &:focus {
			/* Give clicked links a depressed effect. */
			position: relative;
			top: 1px;
		}
	}
	
/* !CONTAINER -------------------------------------------------------------------- */
	
	#container {
		min-height: 100%;
		margin: 0;
		padding: 0;
		position:relative;
	}
	
/* !OVERLAY -------------------------------------------------------------------- */


	#signup {
		display: none;	
		padding: 35px;
	}
	
	/* default close button positioned on upper right corner */
	#signup .close {
		background-image: url("@{img}close.png");
		position: absolute; top: 35px; right: 25px;
		cursor: pointer;
		height: 35px;
		width: 35px;
	}
	
	
/* !PUSHDOWN -------------------------------------------------------------------- */


	#pushdown {
		/*display: none;*/
		min-width: @width;
		position: relative; z-index: 12;
		
		background: url("@{img}pushdown-bg.png") bottom repeat-x;
		//background: @pushdown;
		padding: 10px 0 15px;
		/* border-bottom: 6px solid @pushdown-border; */
		text-align: right;
		font-family: @font-light; font-size: 0.9em;
		color: @highlight;
		line-height: 1.5em;
		
		.wrapper {
			overflow: hidden;
			.widgets li {
				display: inline;

				&.googleplusone * {
					width: 80px;
				}
			}
		}
	}


/* !HEADER -------------------------------------------------------------------- */


	@header-height: 132px;

	#header {
		min-width: @width; height: @header-height;
		margin-top: -5px;
		position: relative; z-index: 10;
		background: url("@{img}header-bg.png") repeat-x;
	}
		
		/* !Logo ---------------------------------- */
		#logo,
		#logo img {
			display: block;
			width: 405px; height: 72px;
		}
		
		#logo {
			margin-top: 38px;
			float: left;
			background: url("@{img}logo.png") no-repeat;
			&:hover {
				background-position: 0 -00px;
			}
			
	
			/* Based on the fact that we need to use an <img /> in our markup, let's hide the actual image and use a background on the <a>--this gives us semantically sound markup and the ability to use sprites for hover effects! */
			img{
				visibility: hidden;
			}
		}
		
		/* !Contact Info ---------------------------------- */
		#contact-info {
			display: block;
			width: 190px; height: 103px;
			margin-top: -11px;
			padding: 15px 15px 10px;
			float: right;
			background: url("@{img}contact-bg.png") bottom no-repeat;
			font-family: @font-light;
			font-size: 0.8em; font-weight: normal;
			color: @blue;
			
			list-style: none;
			
			li {
				height: 32px; width: 190px;
				float: left;
				border-bottom: 1px solid #fff;
				line-height: 32px;
				color: @highlight;
				
				a {
					color: @faint-blue;
					font: @font-bold;
				}
				
				.social {
					display: block;
					margin-top: 10px;
			
					li {
						display: block;
						width: auto;
						border-bottom: 0;
						
						a {
							display: block;
							float: left;
							width: 16px; height: 16px;
							margin-top: -2px; margin-right: 5px;
							text-indent: -9999px;
						}
						
						a.twitter {
							width: 16px; height: 16px;
							background: url("@{img}social-twitter.png") no-repeat;
						}
						a.fb {
							width: 16px; height: 16px;
							background: url("@{img}social-fb.png") no-repeat;
						}
						a.yt {
							width: 16px; height: 16px;
							background: url("@{img}social-yt.png") no-repeat;
						}
						a.rss {
							width: 16px; height: 16px;
							background: url("@{img}social-rss.png") no-repeat;
						}
						
						a:hover { background-position: bottom; }					
					}
				}
			
			}
			
			span {
				display: block;
				float: left;
				width: 90px;
				padding-right: 2px;
				
				&:before { content: ' \00BB \0020'; }
				&:after { content: ':'; }
			}

			li.last { border-bottom: 0; }
		}
		
		
/* !NAVIGATION -------------------------------------------------------------------- */


	@nav-height: 88px;
	@nav-border: 1px;

	#nav {
	
		clear: both;
	
		min-width: @width; height: @nav-height;
		margin-top: -3px; padding: 0;
		position: relative; z-index: 10;
		background: url("@{img}nav-bg.png") repeat-x;
		text-align: center;
		list-style: none;
		font-family: @font-reg;
		
		overflow: visible;
		
		.wrapper { overflow: visible; }
		
		ul { overflow: visible; }
		 
		li {
			display: inline;
			float: left;
			font-size: 0.9em;
			color: #787878;
			
			a {
				display: block;
				position: relative; z-index: 10;
				width: 163px; height: 44px;
				margin-top: 4px; padding: 20px 0;
				line-height: 1.5;
				font-family: @font-light; color: @light-blue;
				text-decoration: none;
	
				strong {
					display: block;
					font-family: @font-light;
					font-weight: normal;
					text-transform: uppercase;
					color: #fff;
				}
				

				/*&:hover {
									background: url("@{img}nav-bg-over.png") repeat top left;
								}*/

				
				&:active, &:focus { position: relative; top: 0; } /* Fix weird nav issue. */
			}
		}
		
		.backLava {
			position: absolute;
			display: block;
			height: 80px;
			width: 163px;
            background: url("@{img}nav-bg-over.png") no-repeat;
        }
        
        li a:hover, li a:active, li a:visited {
            border: none;
        }
		
	}
	
	
/* !BREADCRUMBS -------------------------------------------------------------------- */

	/*
@breadcrumb-height: 43px;
	@breadcrumb-border: 5px;
*/
	@breadcrumb-height: 0;
	@breadcrumb-border: 0;

	#breadcrumbs {
		min-width: @width;
		margin-top: -10px 0 10px; padding-top: 5px;
		position: relative; z-index: 5;
		border-bottom: @breadcrumb-border solid @faint-grey;
		background-color: @highlight;
		color: @light-grey;
		font-family: @font-reg; font-size: 0.75em; 
		text-align: left;
		list-style: none;
		
		dl {
			display: block;
			height: @breadcrumb-height;
			line-height: @breadcrumb-height;
		}
		
		dt, dd {
			display: inline;
		}
		dt:after {
			content: ':';
			padding-right: 15px;
		}
		dd:after {
			content: '\2039';
			font-size: 1em;  font-weight: normal;
			padding: 0 5px;
		}
		dd.last {
			margin-top: -2px;
			color: @dark-grey;
			font-family: @font-bold;
			
			&:after {
				content: '';
			}
		}
	}
	
	
/* !CONTENT -------------------------------------------------------------------- */

	#content {
		min-width: @width;
		margin-top: -6px;
		/* margin-top: 0 - (@nav-height + @nav-border + @header-height - 4px ); */ /* 84px - 132px *(/
		/* margin-top: 0 - @header-height - 1px - @nav-height - @breadcrumb-height - @breadcrumb-border - 24px; */
		
		padding-bottom: 350px;
		position: relative; z-index: 0;
		background: url("@{img}content-bg.png") top center repeat-x;
		color: @grey;
		
		.overlay {
			padding-top: 40px;
			/* padding-top: 73px; */  /*  + @breadcrumb-height - @breadcrumb-border; */
			
				.wrapper {
					/* margin-top: -170px; */
				}
		}

	}
	
	#content.product {
		/* margin-top:-236px; */
		 
		.overlay {
			/* padding-top: 253px; */
			background: url("@{img}content-overlay.png") top no-repeat;
		}
	}	
	
/* !FOOTER -------------------------------------------------------------------- */
	
	#footer {
		position: absolute;
   		bottom: 0;
   		
   		overflow: visible;
   		
		width: 100%;
		min-width: @width;
		height: 240px;
		
		padding: 30px 0;
		border-top: 1px dotted #fff;
		background: url("@{img}footer-bg.png") top center;
		clear: both;
		line-height: 1.5;
		color: @grey;
		
		.wrapper {
			padding-bottom: 20px;
			border-bottom: 1px dotted #4a4c4f;
			overflow: hidden;
		}
		.wrapper.last {
			padding: 0; padding-top: 20px;
			border: 0;
		}
		
		.col {
			width: 490px;
			margin-right: 24px;
			font-size: 0.8em; font-weight: normal;
			
			h4 {
				font-size: 1.4em;
				color: #fff;
				text-transform: uppercase;
			}
			
			&.links {
				width: 98px;
				
				 ul {
					list-style: disc;
					color: @blue;
					padding-left: 15px;
					
					a {
					 	display: block;
						color: #fff;
						line-height: 1.5;
					}
				}
			}
			&.tweets { 
				margin-right: 24px; }
			&.logo-small {
				width: 342px;
				margin-right: 0;
			}
			
			&.legal {
				/* float: left; */
				width: 220px;
			}
			
			&.disclaimer { text-align: center; }
			
			&.copyright {
				float: right;
				width: auto;
				margin-right: 0;
				color: #fff;
				
				a { margin-right: 10px; }
			}
			
		}
		
		p, dl  {
			font-family: @font-italic;
		}
		
		span {
			color: #fff;
			
			span {
				display: block;
				margin-bottom: 15px;
				font-style: italic;
				color: @grey;
				
				&:before { content: ''; }
			}
		}
		
		ul.legal.col { width: auto; }
		
		ul.legal li {
			display: inline;
			margin-right: 5px; padding-right: 10px;
			border-right: 1px solid #787878;
			
			&.last { margin: 0; padding: 0; border: 0; }
		}
		
		.contact li {
			margin-bottom: 10px; padding: 10px;
			background: @dark-grey;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
		}
	}
	
	
/* !INDEX -------------------------------------------------------------------- */
	
	/* Product */
	
	#product {
		background: url("@{img}burst.png") #fff top no-repeat;
		
		img {
			float: left;
		}
		
		.wrapper .desc {
			position: relative; z-index: 10;
			width: 470px;
			margin-top: 70px;
			text-shadow: 2px 1px 2px rgba(0,0,0,0.5);
			float: right;
			color: #fff;
			
			h1, h2 {
				color: #fff;
				text-align: left; font: @font-bold;
			}
			
			h1 {
				width: auto;
				margin-bottom: 8px;
				font-size: 5em;
				line-height: 0.9; /* letter-spacing: 2; */
			}
			
			h2 {
				margin-bottom: 2px;
				font-size: 1.5em;
				line-height: 0.8;
			}
			
			p { 
				min-height: 75px;
				margin-top: 10px;
				font-size: 1.15em;
				line-height: 1.15;
			}
		}
		
		#download {
			display: block;
			width: 374px; height: 143px;
			margin: 0 auto;
			/* padding-left: 100px; padding-top: 12px; */
			background: url("@{img}download.png") center top no-repeat;
			font-family: @font-bold;
			font-size: 3.2em; font-weight: bold;
			color: #fff;
			text-indent: -9999px;
			
			&:hover {
				background-position: bottom;
				text-decoration: none;
			}
			
			span {
				display: block;
				margin-top: -8px;
				font-size: 1em; font-weight: bold;
			}
			
			&:visited { opacity: 1; /* A bit basic, but itÕs a bare minumum... */ }
		}
		
		.wrapper.desc {
			overflow: auto;
			margin-bottom: 30px;
		}
		
		.details {
			margin-bottom: 60px; padding-bottom: 56px;
			background: url("@{img}seperator.png") bottom repeat-x;
			
			overflow: auto;
			
			.col {
				/* width: 477px; */
			}
			
			h3 { padding-top: 20px; padding-left: 75px; }
			.what {
				width: 310px;
				margin-right: 24px;
				/* clear: both; */
				/* overflow: auto; */
				
				/* width: 978px; */
				
				background: url("@{img}icon_what.png") no-repeat top left;
				
				/* .col {
				 	width: 226px;
				} */
				
				/* p { margin-top: 10px; } */
				
				p.last {
				 	margin-bottom: 0;
				 }
			}
			
			.features {
				width: 620px;
				margin-bottom: 24px;
				background: url("@{img}icon_features.png") no-repeat top left;
				
				ul {
					list-style: disc;
					margin: 0 30px;
					
					li {
						margin-bottom: 10px;
						
						span {
							display: block;
							font-weight: bold;
							color: @blue;
						}
					}
				}
			}
			.macros {
				/* margin-right: 0; */
				/*background: url("@{img}macros.png") no-repeat top left;*/
				
				.macros { background: url("@{img}icon_macros.png") no-repeat top left; }
				.rss { background: url("@{img}icon_rss.png") no-repeat top left; }
				.followback { background: url("@{img}icon_followback.png") no-repeat top left; }
				
				dl {
					padding: 0 20px;
					
					dt
					{
						position: relative;
						left: 0;
						top: 1.1em;
						color: @blue;
						font-weight: bold;
					}
					dd
					{
						margin: 0 0 0 9em;
						padding: 0 0 .5em .5em;

						&.seperator { 
							background: url("@{img}seperator.png") bottom repeat-x;

							padding-bottom: 24px;

							&.last { background: none; }
						}
						&.complex { margin: 0 0 0 13em; }
					}
					strong {
						display: block;
						float: left;
						width: 80px;
					}
					span {
						color: @blue;
						font-weight: bold;
					}
				}
				
				
				table {
					padding: 0 24px;
					
					td {
						padding-right: 5px;
						padding-bottom: 3px;
						font-family: @font-bold;
					}
					td + td {
						padding-right: 0;
						width: 100%;
						font-family: @font-italic;	
					}
				}
			}
		}
		
	}
	
	.wrapper { overflow: hidden; }	
	
	/* !News ---------------------------------- */
	
	#news {
		margin-left: 0; margin-right: 24px;
		
		h3 {
			margin-bottom: 1.2em;	/* 24px */
			font-family: @font-reg;
			font-size: 1.25em;		/* 20px */
			color: @blue;
			line-height: 1.2;		/* 24px */
		}
		h4 {
			margin-bottom: 1.333em;	/* 24px */
			font-size: 1.125em;		/* 18px */
			line-height: 1.333;		/* 24px */
		}
		
		.title {
			margin-bottom: 5px;
			font-family: @font-reg; /* font-size: 1.25em; */		/* 20px */
			color: @blue;
		}
		
		.date {
			margin-bottom: 15px;
			font-size: 0.9em;
			font-family: @font-italic;
			color: @grey;
		}
		
		.news {
			margin-bottom: 15px;
			font-size: 1em;
		}
		
		.more {
			margin-bottom: 25px; padding-bottom: 25px;
			background: url("@{img}seperator.png") bottom repeat-x;
		}
		
		.more.last {
			background: none;
		}
		
	}
	
	
	/* !Testimonials ---------------------------------- */
	
	#testimonials {
		width: 620px; margin-right: 0;
		
		p {
			clear: both;
		}
		p.last { margin-bottom: 0; }
		
		q {
			display: block;
			margin-top: 40px;
			clear: both;
			line-height: 1.25;
			font-style: italic;
			font-size: 1.2em;
			/* text-align: justify; */
		
			.first, .last { overflow: visible;
				font-size: 6.5em;
				font-family: "Georgia", "Times New Roman", Times, serif;
			  	color: @faint-grey;
			}
			
			.first {
				float: left;
				height: 25px;
				margin: -45px 20px -50px -10px;
				padding-right: 7px; padding-bottom: 75px;
			}
			.last {
			    float: right;
			    height: 25px;
			    margin-top: -25px; margin-left: 20px;
			    padding-right: 6px;
			}

		}
		
		cite {
			margin: 0 55px 25px 0;
			float: right;
			font-size: 1em; font-style: italic;
			color: @light-grey;
			a {
				&:before { content: '\00A0 \2015 \00A0'; }
				&:before:hover { text-decoration: none; }
			}
			
		}
		
	}
	
	
/* !PURCHASE -------------------------------------------------------------------- */
	
	#purchase {
		
		.col {
			width: 286px;
			font-family: @font-light;
		}
			
		/* !Price ---------------------------------- */
		dl {
			margin-bottom: 10px; padding: 0px 15px;
			text-shadow: 2px 1px 2px rgba(0,0,0,0.5);
			
			border: 1px solid @light-grey;
			
		  	background: url("@{img}price-bg.png") @dark-grey top repeat-x;
		  	
			.plan {
				padding: 0 15px;
				height: 45px; line-height: 50px;
				border-bottom: 1px solid @very-dark;
				font-family: @font-light; font-size: 1.25em; font-weight: normal;
				color: @highlight;
			}
			
			.price { 
				border-top: 1px solid @dark-grey;
				
				a {
					display: block;
					position: relative; z-index: 10;
					width: 284px; height: 260px;
					margin: -47px 0 -121px -15px;
					line-height: 185px;
					color: @highlight;
					font-family: @font-reg; font-size: 6em;
					text-align: center;
				
					&:hover {
						text-decoration: none;
						color: @yellow;
					}
					
					strong { display: block; text-align: center; font-weight: normal; }
					
					span {  position: relative; top: -35px; font-family: @font-light; font-size: .25em;  }
				}
			}
			
			.desc {
				display: block;
				margin-top: 10px; padding-top: 10px; padding-bottom: 10px;
				border-top: 1px solid @very-dark;
				color: @light-grey;
				font-size: 0.8em;
				font-weight: normal;
				text-align: left;
				
				strong {
					display: block;
					font-size: 1em;
				}
			}
		}
		
		/* !Core Features and Extras ---------------------------------- */
		
		@feature-height: 3em;
		
		ul {
			
			li {
				padding: 0 10px;
				height: @feature-height;
				font-family: @font-reg;
				line-height: @feature-height;
			}
		}
			
		
		/* !Core Features ---------------------------------- */			
		ul.core {
			padding: 0 10px;
		  	background: @faint-grey;
		  	background: url("@{img}core-bg.png") top;

			li {
				border-top: 1px solid @faint-grey;
				border-bottom: 1px solid @light-grey;
				text-transform: uppercase;
				color: @dark-grey;
			}
			
			li.first { border-top: 0; }
			li.last { border-bottom: 0; }
		}
			
		/* !Extras ---------------------------------- */
		ul.extras {
			padding: 10px 0;

			li {
				border-top: 1px solid @sep-shadow;
				color: @grey;
			}
			li.first { border-top: 0; }
		}
	}
	
	
/* !PURCHASE -------------------------------------------------------------------- */

	#followers {

		.col {
			width: 208px;
			font-family: @font-light;
		}

		/* !Price ---------------------------------- */
		dl {
			margin-bottom: 10px; padding: 0px 15px;
			text-shadow: 2px 1px 2px rgba(0,0,0,0.5);

			border: 1px solid @light-grey;
			
		  	background: url("@{img}price-bg.png") @dark-grey top repeat-x;

			.plan {
				padding: 0 10px;
				height: 45px; line-height: 50px;
				border-bottom: 1px solid @very-dark;
				font-family: @font-light; font-size: 1.25em; font-weight: normal;
				color: @highlight;
			}

			.price {
				border-top: 1px solid @dark-grey;

				a {
					display: block;
					position: relative; z-index: 10;
					width: 208px; height: 160px;
					margin: -47px 0 -20px -15px;
					line-height: 185px;
					color: @highlight;
					font-family: @font-reg; font-size: 6em;
					text-align: center;

					&:hover {
						text-decoration: none;
						color: @yellow;
					}

					strong { display: block; text-align: center; font-weight: normal; }

					span {  position: relative; top: -35px; font-family: @font-light; font-size: .25em;  }
				}
			}

			.desc {
				display: block;
				margin-top: 10px; padding-top: 10px; padding-bottom: 10px;
				border-top: 1px solid @very-dark;
				color: @light-grey;
				font-size: 0.8em;
				font-weight: normal;
				text-align: left;

				strong {
					display: block;
					font-size: 1em;
				}
			}
		}
		
		.desc .col {
			width: 286px;
		}

/*		.desc + .desc .col {
			width: 441px;
		} */
	}


/* !SHOWCASE -------------------------------------------------------------------- */
	
	
	#showcase {
		ul {
			width: 441px;
			
			.screenshot {
				width: 130px;
				margin-right: 24px; margin-bottom: 24px;
				float: left;
			}
			.desc {
				width: 287px;
				float: right;
			}
			
			li {
				clear: both;
			}
		}
		#videos {
			float: left;
			
		}
		#screenshots {
			float: right;
		}
	}
	
/* !F.A.Q. -------------------------------------------------------------------- */

	
	#faq, #about {
		
		#sidebar {
			width: 270px;
			margin-right: 24px;
			text-transform: uppercase;
			font-family: @font-reg; font-size: 0.9em; color: @dark-grey;
			float: left;
			
			ul {
				margin-bottom: 24px;
			
				li {
					height: 37px;
					padding-left: 10px;
					border-bottom: 1px solid @faint-grey;
					background: url("@{img}sidebar-bg.png") top repeat-y;
					line-height: 37px;
				
					a {
						color: @blue;
						font-size: 0.85em;
					
					
						&:hover {
							text-decoration: none;
							color: @yellow;
						}
						&:after {
							content: '\203A';
							margin-right: 10px;
							float: right;
							font-size: 1.5em;
						}
					}
					&.first {
						height: 53px;
						background: url("@{img}sidebar-top.png") top no-repeat;
						line-height: 53px;
						font-size: 1.15em;
					}
					&.grad {
						background: url("@{img}sidebar-grad.png") top repeat-y;
					}
					&.last {
						height: 42px;
						border-bottom: 0;
						background: url("@{img}sidebar-bottom.png") bottom no-repeat;
						line-height: 42px;
					}
				
				}
			}
		}
		
		a.button{
			float: right;
			position: relative;
			z-index: 100;
/*
			display: block;
			background: url("@{img}faq_expand.png") no-repeat;
			width: 113px;
			height: 41px;
			text-indent: -9999px;
			overflow: hidden;
			border: none !important;
*/
		}
		
		dl {
			float: left;
			width: 600px;
			margin-top: -24px;
			padding-bottom: 20px;
			
			/* Definition Lists */
			
			dt {
				margin-top: 5px;
				position: relative;
				cursor: pointer;
				border: 1px solid transparent;
				/* text-transform: uppercase; */
				font-family: @font-reg; color: @dark-grey;
				
				&:before { content: "\00BB \0020"; }
				&:hover { color: #5f6a73; }
			}
			
			dt .icon {
				background: url('img/bullets.png') no-repeat;
				height: 12px;
				left: 0;
			}
			
			dt.opened .icon { background-position: left bottom;}
			
			dd { 
				display: none;
				padding: 10px 0;
				width: 600px; /* query jump fix */
			
				font-size: 1.1em;
				color: #717f89;
				line-height :1.5;
				padding: 10px 0;
			}
			
		}
		
		p { 
			clear: right;
			margin-left: 294px;
		}


		/*dl {
			width: 635px;
			float: right;
			font-family: @font-light;
		}*/

	}
	
/* !ACCOUNT CLEANER -------------------------------------------------------------------- */
	
	#cleaner {
	
		h2 { 
			padding: 20px 0; padding-left: 75px;
			background: url("@{img}account-cleaner.png") no-repeat top left;	
		}
		
		.steps {
			overflow: auto;
			
			.col
			{
				width: 262px;
				list-style: decimal outside;
				margin-left: 24px;
				
				span {
					display: block;
					margin: 0 auto 24px;
					min-height: 55px;
				}
				a {
					display: block;
					text-align: center;
				}
				
				img {
					margin-left: -24px;
				}
			}
		}
		em {
			clear: both;
			display: block;
			margin: 24px 0;
		}
	}

	/* !Macros -------------------------------------------------------------------- */
	
	#macros {
		
		h2 { 
			background: url("@{img}icon_macros.png") no-repeat top left;
			margin: 0; padding: 20px 75px;
		}
		
		.macros
		{
			padding: 0;
			
			dt
			{
				position: relative;
				left: 0;
				top: 1.1em;
				color: @blue;
				font-weight: bold;
			}
			dd
			{
				margin: 0 0 0 9em;
				padding: 0 0 .5em .5em;
				
				&.seperator { 
					background: url("@{img}seperator.png") bottom repeat-x;
					
					padding-bottom: 24px;
					
					&.last { background: none; }
				}
			}
			strong {
				display: block;
				float: left;
				width: 80px;
			}
			span {
				color: @blue;
				font-weight: bold;
			}
		}
	}
	

/* !HELP -------------------------------------------------------------------- */
	
	#help {
		img {
			display: block;
			margin: 12px 0;
		}
		h3 {
			font-size: 1.1em;
			font-family: @font-bold;
			margin: 24px 0 6px 0;
		}
		
		ul { list-style: disc; }
		ol { 
			list-style: decimal;
			ol { list-style: lower-alpha; }
		}
		ul, ol {
			margin: 0 30px;
			
			&.features {
				margin-top: 12px;
			}
			
			li {
				margin-bottom: 10px;
				
				span {
					display: block;
					font-weight: bold;
					color: @blue;
				}
			}
		}
	}