@bodyColor: #555;
@linkColor: #0082ad;
@linkHover: #006282;
@linkInactive: #5dcef4;
@borderColor: #d4d4d4;
@borderLight: #ddd;
@lightGray: #eee;
@darkGray: #777;

body { font-family: 'Dosis', sans-serif; font-size: 14px; font-weight:400; margin: 0; color: @bodyColor;}
a { text-decoration: none; color: @linkColor; cursor: pointer; }
a:hover { color: @linkHover; }
img { border: 0; }
ul { list-style: none; padding: 0; }
h1,h2,h3 { margin: 0; font-weight: 600; }
p.first-child { margin-top: 0; }

.bold { font-weight:600; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.left { float:left; width: 390px; }
.right { float: right; width: 390px; }
.frame { border: 1px solid @borderColor; padding: 5px; }
.frame img { vertical-align: top; }
.dosis { font-family: 'Dosis', sans-serif; }

.blueGradient {
	background: #0082ad; /* Old browsers */
	background: -moz-linear-gradient(top, #0082ad 0%, #7db9e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0082ad), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0082ad 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0082ad 0%,#7db9e8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0082ad 0%,#7db9e8 100%); /* IE10+ */
	background: linear-gradient(to bottom, #0082ad 0%,#7db9e8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0082ad', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

.greyGradient {
	background: #fbfbfb; /* Old browsers */
	background: -moz-linear-gradient(top, #fbfbfb 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fbfbfb 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fbfbfb 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fbfbfb 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom, #fbfbfb 0%,#eeeeee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

.heading_arrow { text-transform: uppercase; margin-top: 10px; padding-left: 45px; background: url('../images/arrow.png') no-repeat 0 3px; height: 35px; font-size:29px; }

.content { border:1px solid @borderColor; padding: 0 20px 10px 20px; margin-top: 20px; }
.two_col { margin-top: 10px; column-count: 2;  column-gap: 20px; -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; }
.two_col p:first-child { margin-top: 0px; }
#container {
	width: 800px; margin: 0 auto;
	#nav_and_logo {
		margin-top: 10px; height: 53px;
		#logo {
			float: left;
			h1 { font-size: 33px; }
			h2 { font-weight: 400; font-size: 14px; letter-spacing: 1px; margin-top: -6px; text-transform: uppercase; }
		}
		#nav {
			font-size: 0; border-radius: 10px; height: 48px; border: 1px solid @borderColor; margin-left: 20px; .greyGradient; float:right; font-weight: 600; -webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.1); -moz-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.1); box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.1);
			a { color: @bodyColor; font-size: 15px; line-height: 48px; height:48px; display:inline-block; padding: 0 20px; border-right: 1px solid @borderColor; border-left: 1px solid #fff; }
			a:first-child { border-left: 0px; }
			a:last-child { border-right: 0px; }
			a:hover { color: @linkColor; }
		}
	}
	#product_shot { margin-top: 30px; }
	#description_and_download { 
		margin-top: 30px;
		#download_button { 
			text-align: center;
			a { padding: 10px 30px; color: @bodyColor; display: inline-block; border-radius: 10px; .greyGradient; border: 1px solid @borderColor; margin-bottom: 20px }
			a:hover { .blueGradient; color: #fff;   }
			h3,p { margin: 0; }
			h3 { font-weight: 600; }
		}  
	}
	#subsections {
		margin-top: 30px;
		.frame { 
			 box-shadow: inset 0 0 5px @borderColor; width: 390px; float: right; border:0; padding: 0;
			.frame_content { 
				padding: 10px; 
				.frame_text {
					h3 { .heading_arrow; }
					p.frame_indent { margin-left: 45px; }
				}
			}
		}
		.frame:first-child { float:left; }
	}

	#video_container {
		h3.loading { width:768px; height:432px; line-height:432px; font-size:50px; position: absolute; }
		height: 432px; text-align: center; padding: 15px; border: 1px solid @borderColor; margin-top: 30px;
		#youtube_container { display: none; }
	}

	#thumb_container {
		margin-top: 20px; padding: 0 45px 20px 45px; border: 1px solid @borderColor;
		h3 { .heading_arrow; margin-top: 20px; }
		ul { margin-top: 0; text-align: center; }
		li { 
			.greyGradient; border-radius: 10px; width: 200px; height:198px; overflow:hidden; float:left; padding: 10px; border: 1px solid @borderColor; margin-left: 20px; margin-top: 20px;
			p { white-space: nowrap; overflow: hidden; }
		}
		li:nth-child(3n+1) { margin-left:0; }
	}

	#tutorial_intro { 
		.two_col { 
			margin-top: 20px;
			p:first-child { margin-top: 0px; }
		}
	}

	#nav_tuts {
		padding: 10px 20px; height: 32px; border: 1px solid @borderColor; margin-top: 20px; 
		h3 { font-size: 22px; float:left; }
		.step {
			display:inline-block; margin-left: 20px; font-weight: 600; cursor: pointer;
			.circle {
				display:inline-block; height:28px; width: 28px; border-radius: 50%; border: 2px solid @borderLight; background: #fff;
				.circle_inner { background: #eee; line-height: 22px; color: @bodyColor; text-align:center; height: 22px; width: 22px; border-radius: 50%; margin: 3px 0 0 3px; display:block; }
			}
			.step_text { color: @bodyColor; display:inline-block; margin-left: 5px; text-transform: uppercase;  }
		}
		.step:first-child { margin-left: 0; }
		.step:hover .step_text { color: @linkColor; }
		.step:hover .circle_inner { background: @linkColor; color: #fff; }
		.step.active .circle { border: 2px solid @bodyColor; }
		.step.active .circle_inner { background: @linkColor; color: #fff; }
	}

	#nav_tuts.fixed { position: fixed; top:0; width: 760px; background: #fff; margin-top:0; }

	.tut_step {
		.tut_content { display: none; }
		li { margin-top: 5px; padding-left: 15px; background: url('../images/bullet.gif') no-repeat 0 4px; }
		h3 { margin-top: 10px; }
		table { 
			margin-top: 10px; border: 1px solid @borderColor;
			td, th { padding: 10px; }
			tr:nth-child(even) { background: @lightGray; }
			th { background: @bodyColor; color: #fff; }
		}
		.left, .right { width: 369px; }
		/* pre { max-width: 758px; overflow: scroll; } */
		.float_right { float:right; margin: 0 0 20px 20px; }
		.heading_arrow { cursor: pointer; }
	}

	#footer { 
			font-size: 11px; border-top: 1px solid @borderColor; margin: 30px 0; padding-top: 20px;
			.footer_icon { vertical-align: top; display:inline-block; background: url('../images/sprite_networks.gif') no-repeat 0 0; width: 29px; height: 30px; overflow: hidden; text-indent: -10000px; }
			#f_github { background-position: 0px 0px; }
			#f_mac { background-position: -36px 0px; }
			#f_vimeo { background-position: -70px 0px; }
			#f_flickr { background-position: -105px 0px; }
			#f_tumblr { background-position: -140px 0px; }
			#f_github:hover { background-position: -175px 0px; }
			#f_mac:hover { background-position: -211px 0px; }
			#f_vimeo:hover { background-position: -245px 0px; }
			#f_flickr:hover { background-position: -280px 0px; }
			#f_tumblr:hover { background-position: -315px 0px; }
			#f_icon_text { display: inline-block; font-size: 13px; line-height: 28px; margin: 0 0 0 10px; }
		}
}

.centered-title {
	text-align: center;padding: 15px 0;
}

.download_button { 
	text-align: center;
	a { padding: 10px 30px; color: @bodyColor; display: inline-block; border-radius: 10px; .greyGradient; border: 1px solid @borderColor; margin-bottom: 20px }
	a:hover { .blueGradient; color: #fff;   }
	h3,p { margin: 0; }
	h3 { font-weight: 600; }
	display: inline-block;
	padding-right:20px;
} 

#downloads-container {
	margin-top: 20px;
}

#legacy-downloads.active .tut_step .tut_content {
	display: block;
}

#slider-range-min {
	float:left;
	width:400px;
	height: 20px;
	.ui-slider-handle {
		height:30px;
		top: -6px;
	}

	.ui-widget-header {
		background: #0082ad;
	}
}

.amt-container {
	float:left;
}

#form-amount {
	height:19px;
	width:33px;
	border-radius: 3px;
	font-size: 15px;
	.dosis;
	text-align: center;
}

.donate-form {

	h2 {
		margin-bottom: 15px;
		margin-top:15px;
	}

	margin-top:30px;

	.form-area {
		width:450px;
		height:100px;
		border:1px solid #ddd;
		.dosis;
		padding:5px; font-size: 15px;
	}

	.form-input { width:450px; border: 1px solid #ddd; height: 25px; .dosis; font-size: 15px; }

	#form-submit {
		display: block; width: 150px; margin-top: 20px; text-align: left;
	}

	.dollar { margin-left:30px; margin-right:5px; }

}

#readme-content {
	img {
		max-width: 760px;
	}
}