/* 
	LESS SETTINGS 
	========================================
*/

@blue_light:		#7ef1ff;
@blue_dark:			#1ebacc;
@font_color:		#4c5254;
@background_color:	#2d2f30;

.rounded(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
.shadowed(@color, @left: 1px, @right: 1px, @trans: 3px) {
	-moz-box-shadow: 	@left @right @trans @color;
	-webkit-box-shadow: @left @right @trans @color;
	box-shadow: 		@left @right @trans @color;
}
.gradiented(@top, @down) {
	background-color: @down;
	background-image: -moz-linear-gradient(top, @top, @down);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, @top),color-stop(1, @down));
	background-image: linear-gradient(top, @top, @down);
}

/* 
	BODY & CO
	========================================
*/

body {
	font: 0.8em/1.5em lucida, helvetica,arial,sans-serif;
	color: @font_color;
	background: @background_color;
	text-shadow: 1px 1px 0 @background_color - 5;
	margin: 0;
}

img {
	border: 0;
	vertical-align: middle;
}

p {
	display:block;
	line-height: 2em;
}

hr {
	hegith: 0;
	display: block;
	border-top: 1px solid #0c0c0d;
	border-bottom: 1px solid #3b3e40;
	border-left: 0;
	border-right: 0;
}

.pointer 		{ cursor: pointer; }
.left			{ float:left; }
.right			{ float:right; }
.clear 			{ clear:both; }
.inlineblock 	{ display: inline-block; }
.blue 			{ color: @blue_light; }
.bold			{ font-weight: bold; }

.button {
	.gradiented(@blue_light, @blue_dark);
	
	-moz-box-shadow:inset 0 1px 0 @blue_light + 10;
	-webkit-box-shadow:inset 0 1px 0 @blue_light + 10;
	box-shadow:inset 0 1px 0 @blue_light + 10;
	
	cursor: pointer;
	
	color: #FFF;
	font-size: 13px;
	text-shadow: 1px 1px 0px @blue_dark;
	
	border: 1px solid @blue_dark;
	padding: 5px;
	height: 37px;
}

input[type="text"] { color: #FFF; }

.box {
	.rounded(4px);
	border-left: 1px solid #181c1d;
	border-right: 1px solid #181c1d;
	border-top: 1px solid #121617;
	border-bottom: 1px solid #414546;
	background: #1c2021;

	.box {
		.rounded(4px);
		border-bottom: 1px solid #1c2021;
		border-left: 1px solid #212224;
		border-right: 1px solid #212224;
		border-top: 1px solid #0c0d11;
	}
}

a {
	color: @font_color;
	text-decoration: none;
	:hover {}
}

h1,h2,h3,h4,h5,.headline {
	text-shadow: 0 -1px 0 #414546;
	color: #191B1C;
	margin: 5px 0;
	padding: 0 0 3px 0;
}

#error_wrapper,
#customize_wrapper {
	display:none;
	margin: 10px 0 0 0;
}

#success_wrapper {
}

#submit_wrapper,
#error_wrapper {
    margin: 10px auto;
}

#url_submit {
	-moz-border-radius: 0 3px 3px 0;
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}
#url {
	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
	padding: 10px; 
	width: 88%;
}

/* 
	CONTENT
	========================================
*/

#content_wrapper {
	width: 800px;
	margin: 0 auto;
}
#content {
	padding: 5px 0;
	margin:0;
	.preloader {
		display:none; 
	    padding: 5px;
	    position: relative;
	    right: 30px;
	    top: -30px;
	}
}

/* 
	FOOTER
	========================================
*/

#footer_wrapper {
	width: 800px;
	margin: 0 auto;
}
#footer {
    font-size: 11px;
    color:#414546;
}

/* 
	NAVIGATION
	========================================
*/

#navigation_wrapper {
	width: 800px;
	margin: 25px auto;
	
	#navigation {
		list-style:none;
		float:left;
	    margin: 0 0 0 20px;
	    padding: 0;
		li {
			display: inline-block;
			float: left;
			a {
				margin: 0 20px 0 0;
				padding: 0 0 3px;
			}
			a:hover {
				color: #FFF;
				border-bottom: 3px solid @blue_light;
			}
		}
	}
	#header {
		text-transform: uppercase;
		float:left;
		font-size: 25px;
		text-shadow: 1px 1px 0 #000;
		a {
			float:left;
			color: #FFF;
			text-decoration: none;
		}
		a.blue { color: @blue_light; }
	}
}

/* 
	404
	========================================
*/

#_404 {
	text-align:center;
	width: 450px;
	display:block; 
	margin: 0 auto 10px;
}

/* 
	FAQ
	========================================
*/

#faq {
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0;
		color: #FFF;
		text-shadow: 1px 1px 0 #222;
		.pointer();
	}
	.entry {
		display:none;
		.box();    
		padding: 10px;
    	text-shadow: 1px 1px 0 #000000;
	}
}

/* 
	API DOCUMENTATION
	========================================
*/

#api-documentation {
	ul.params {
		list-style:none;
	    height: 30px;
	    margin: 10px 0;
	    padding: 0;
		li {
		    display: block;
		    float: left;
		    margin: 0 5px 0 0;
		    padding: 5px 10px;
		    width: 70px;
		}
		li.name { color: #FFF; }
		li.type { color: #CCC; }
		li.default {  }
		li.required {  }
		li.options { width: 170px }
	}
	ul.params,
	.example,
	.return,
	.url {
	    background: none repeat scroll 0 0 #191B1C;
	    font-family: verdana;
	    font-size: 11px;
	    letter-spacing: 0.5px;
	    overflow: visible;
	    padding: 0;
	    text-shadow: 0 0 0;
	}
}