/* ----------------------------------------------------------------------------- IMPORTS */

@import 'grid.less';
@import 'helpless.less';

/* ----------------------------------------------------------------------------- VARIABLES */

@default-font: 				"Ubuntu Condensed", "Ubuntu","Lucida Grande",Helvetica,Arial,sans-serif;
@sidebar-font: 				"Ubuntu Condensed", "Ubuntu","Lucida Grande",Helvetica,Arial,sans-serif;
@mono-font:                 "Ubuntu Mono", "Sans Mono", Monaco, Courier, Monospace;

@body-background-color: 	#0F0F0F;
@body-font-color: 			#494949;

@link-color: 				#333333;
@link-hover-color:			#e0e0e0;

@link-back-color: 			#f60;
@link-back-hover-color: 	#3A525C;

@sidebar-font-color: 		#828282;
@sidebar-header-color: 		#212121;
@sidebar-link-color: 		#333333;
@sidebar-link-hover-color: 	#e0e0e0;

@post-border-color: 		#191919;
@comment-link-color: 		#CCC;
@comment-link-hover-color: 	#EAEAEA;
@date-font-color: 			#CCC;
@post-header-color: 		#5B5B5B;
@post-header-hover-color: 	#e0e0e0;
@post-blockquote-color: 	#FFF;
@post-blockquote-bg-color:	#878787;
@post-link-color: 			#333333;
@post-link-hover-color: 	#e0e0e0;

@form-input-color: 			#AAAAAA;
@form-input-bg-color: 		#232323;
@form-input-border: 		1px solid #2D2D2D;
@form-input-hover-color: 	#F9F9F9;
@form-input-hover-bg-color: #333333;
@form-input-hover-border: 	1px solid #3F3F3F;

@form-button-color: 		#494949;
@form-button-bg-color: 		#0F0F0F;
@form-button-hover-color: 	#BCBCBC;
@form-button-hover-bg-color:#0F0F0F;
@form-button-border: 		1px solid #212121;
@form-button-hover-border: 	1px solid #424242;

@comment-font-color: 		#3D3D3D;
@comment-background-color: 	#191919;
@comment-bg-hover-color: 	#1C1C1C;

@scrollbar-arrow-color:     #2D2D2D;
@scrollbar-trace-color:     #141414;
@scrollbar-color:           #1E1E1E;

@loader-normal-bullet:      #A5A5A5;
@loader-bright-bullet:      #EDEDED;

/* ----------------------------------------------------------------------------- NORMALIZE */

#hl.normalize();

/* ----------------------------------------------------------------------------- HELPERS */

.visuallyhidden {
    border: 0 none;
    clip: rect(0pt, 0pt, 0pt, 0pt);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
	
	.focusable:active, .focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
	
}

/* ----------------------------------------------------------------------------- TYPOGRAPHY */

@font-face {
  font-family: 			'Droid Sans';
  font-style: 			normal;
  font-weight: 			normal;
  src: 					local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciL3hpw3pgy2gAi-Ip7WPMi0') format('woff');
}

body {
	font-family: 		@default-font;
	background-color: 	@body-background-color;
	color: 				@body-font-color;
	font-size: 			15px;
    line-height: 		145%;
}

* {
	outline: 			0 !important;
}

p {
	margin: 			1em 0;
}

h1 {
	font-size: 			25px;
	font-weight: 		normal;
}

#search h2,
#comments h3,
#commentform h3,
.emptysearch,
.error {
	font-family: 		@default-font;
	font-size: 			18px;
	font-weight: 		normal;
}

/* ----------------------------------------------------------------------------- LINKS */

a {
	text-decoration: 	none;
	
	&:link, &:visited {
		color: 				@link-color; 
	}
	
	&:hover, &:active, &:focus {
		color: 				@link-hover-color;
	}
	
	.back {
		text-decoration: 	underline;
		
		&:link, &:visited {
			color: 				@link-back-color;
		}
		
		&:hover, &:active, &:focus {
			color: 				@link-back-hover-color;
		}
		
	}
}

/* ----------------------------------------------------------------------------- MAIN CONTAINER */

#wrap {
	margin-top: 	50px;
	margin-bottom: 	50px;
}

/* ----------------------------------------------------------------------------- CONTENT */

#content {
	.span(18);
	.last;
	
	overflow:       auto;
	height:         500px;
}

/* ----------------------------------------------------------------------------- SIDEBAR */

#sidebar {
	
	font-family:    @sidebar-font;
	font-weight:    bold;  
	
	.span(5);
	
	font-size: 		13px;
	color: 			@sidebar-font-color;
	padding: 		0;
	margin: 		0;
	min-height:     500px;
	
	.wrapper {
		text-align: 	right;
		margin-right: 	10px;
	}
	
	a {
		text-decoration:none;
		
		&:link, &:visited {
			color: 			@sidebar-link-color;
		}
		
		&:hover {
			color: 			@sidebar-link-hover-color;
		}
	}
	
	h3 {
		color: 				@sidebar-header-color;
		text-transform: 	uppercase;
		margin: 			20px 0 0;
	}
	
	ul {
		margin: 			0;
		padding: 			0;
		list-style: 		none;
	}
	
}

/* ----------------------------------------------------------------------------- POSTS */
.post {
	
	margin: 			0 0 20px;
	padding: 			0;
	position: 			relative;
	border-bottom: 		1px solid @post-border-color;
	
	a {
		
		&:link, &:visited {
			color: 			@post-link-color;
		}
		
		&:hover, &:active, &:focus {
			color: 			@post-link-hover-color;
		}
		
	}
	
	img {
		
		display: 			block;
		margin: 			0 auto 0.8em auto;
		
		.attachment-post-thumbnail {
			float: 				left;
			margin: 			0 2em 2em 0;
			padding: 			0;
		}
		
		.wp-smiley {
			display: 			inline;
			margin: 			0;
		}
		
	}
	
	.number-of-comments {
		
		text-decoration: 		underline;
		font-size: 				13px;
		position: 				absolute;
		right: 					1em;
		
		a {
			
			&:visited, &:link {
				color: 				@comment-link-color;
			}
			
			&:hover, &:active, &:focus {
				color: 				@comment-link-hover-color;
			}
			
		}
		
	}
	
	.date {
		color: 				@date-font-color;
		font-size: 			12px;
		position: 			absolute;
		top: 				0;
		right: 				0;
	}
	
	h1, h2, h3, h4, h5 {
		
		margin: 			0 0 16px 0;
		font-weight: 		normal;
		line-height: 		120%;
		
		a {
			
			&:link, &:visited {
				text-decoration: 	none;
				color:				@post-header-color;
			}
			
			&:hover, &:active &:focus {
				color:				@post-header-hover-color;
			}
			
		}
		
	}
	
	h1 {
		font-size: 			24px;
	}
	
	h2 {
		font-size: 			22px;
	}
	
	h3 {
		font-size: 			18px;
	}
	
	h4 {
		font-size: 			14px;
	}
	
	h5 {
		font-size: 			13px;
	}
	
	blockquote {
		
		color: 				@post-blockquote-color;
		background: 		@post-blockquote-bg-color;
		margin: 			2em;
		padding: 			.1em 1.5em;
		position: 			relative;
		
		cite {
			font-style: 		normal;
			display: 			block;
			text-align: 		right; 
		}
		
	}
	
}

/* ----------------------------------------------------------------------------- COMMENT LIST */

ol.commentlist {
	
	list-style: 		none;
	margin: 			0;
	padding:			0;
	
	li {
		position: 			relative;
		
		.comment {
			display: 			block;
			color: 				@comment-font-color;
			background-color: 	@comment-background-color;
			margin: 			0 0 40px;
			padding: 			4px;
			
			p {
				margin: 			0;
			}
		}
		
		.comment-author {
			position: 			absolute;
			color: 				@comment-background-color;
			right: 				5px;
			top: 				-18px;
			font-size: 			24px;
			text-transform: 	uppercase;
			
			cite {
				font-style: 		normal;
			}
		}
		
		&:hover {
			
			.comment {
				background-color: 	@comment-bg-hover-color;
			}
			
			.comment-author {
				color: 				@comment-bg-hover-color;
			}
			
		}
	}
	
}
	
/* ----------------------------------------------------------------------------- FORMS */


input[type=text], input.text, textarea {
	color: 				@form-input-color;
	background: 		@form-input-bg-color;
	border: 			@form-input-border;
	font-size: 			13px;
	padding: 			.3em !important;
	
	&:hover {
		background-color: 	@form-input-hover-bg-color;
		color:              @form-input-hover-color;
		border: 			@form-input-hover-border;
	}
}

input[type=button], input[type=submit] {
	width: 				auto;
	font-size: 			14px;
	border: 			0;
	padding: 			5px;
	background-color: 	@form-button-bg-color;
	color: 				@form-button-color;
	cursor: 			pointer;
	border-bottom:      @form-button-border;
	
	//#hl.transition(background-color,0.15s,ease-in);
	
	&:hover {
		background-color: 	@form-button-hover-bg-color;
		color:              @form-button-hover-color;
		border-bottom:      @form-button-hover-border;
	}
}

label {
	font-size: 			1em;
	margin: 			0 .5em;
}

/* ----------------------------------------------------------------------------- COMMET FORM */

#commentform {
	
	input.text {
		width: 				200px
	}
	
	.float-right {
		width: 				260px;
		float: 				right;
		
		p {
			margin: 			0 0 15px 0;
		}
	}
	
	textarea {
		font-size: 			1em;
		font-family: 		@default-font;
		width: 				250px;
		height: 			100px;
	}
	
}


/* ----------------------------------------------------------------------------- GALLERY */

figure.gallery-item {
	float: 			left;
	margin: 		0 1em 1em 0;
	position: 		relative;
	
	figcaption {
		display: 		none;
	}
}

/* ----------------------------------------------------------------------------- SEARCH FORM */

#searchform #s {
	padding: 5px;
}

/* ----------------------------------------------------------------------------- LOADER */

#loader {
	background-color: @body-background-color;
	
	> span {
		font-size: 48px;
		display: block;
		width: 100%;
		text-align: center;
		
		.normal {
			color: @loader-normal-bullet;
		}
		
		.bright {
			color: @loader-bright-bullet;
		}
	}
}

/* ----------------------------------------------------------------------------- GFORM STYLING */

.gform_wrapper {
	
	ul.gform_fields {
		margin: 0;
		padding: 0;
	}
	
}

/* ----------------------------------------------------------------------------- SCROLLBAR */

.customScrollerContainer {

}
.customScrollerContent {
	width: 100%;
}

/* SCROLLER STYLE */
/* VERTICAL */
.divVScrollerBar {
	width: 6px;
	margin-right: 10px;
}

.customScroller.position-right .divVScrollerBar {
	margin-right: 0;
}

/* ORIZONTAL */
.divOScrollerBar {
	height: 6px;
	margin-top: 1px;
}

/* AREA UP */
.divVScrollerBarUp {
	cursor: pointer;
	height: 5px;
}
/* AREA LEFT */
.divOScrollerBarLeft {
	cursor: pointer;
	width: 5px;
}
/* AREA DOWN */
.divVScrollerBarDown {
	cursor: pointer;
	height: 5px;
}
/* AREA RIGHT */
.divOScrollerBarRight {
	cursor: pointer;
	width: 5px;
}
/* ARROW UP AND DOWN */
.divVScrollerBarUp span,
.divVScrollerBarDown span {
	display: none;
}

/* ARROW LEFT AND RIGHT */
.divOScrollerBarLeft span,
.divOScrollerBarRight span {
	display: none;
}

/* ARROWS HOVER */
.divVScrollerBarUp span.hover,
.divOScrollerBarLeft span.hover,
.divVScrollerBarDown span.hover,
.divOScrollerBarRight span.hover {
	background-color: @scrollbar-arrow-color;
}

/* TRACE */
.divVScrollerBarTrace, .divOScrollerBarTrace {
	background-color: @scrollbar-trace-color;
	line-height: 0;
	font-size: 0;
}

/* CURSORS */
.divVScrollerBarCursor {
	cursor: pointer;
}
.divOScrollerBarCursor {
	cursor: pointer;
}
.divVScrollerBarCursor span {
	background-color: @scrollbar-color;
	display: block;
	height: 100%;
	width: 4px;
	line-height: 0;
	font-size: 0;
}
.divOScrollerBarCursor span {
	background-color: @scrollbar-color;
	display: block;
	height: 4px;
	width: 100%;
	line-height: 0;
	font-size: 0;
}
/* CURSORS HOVER */
.divVScrollerBarCursor span.hover {
	background-color: @scrollbar-arrow-color;
}
.divOScrollerBarCursor span.hover {
	background-color: @scrollbar-arrow-color;
}

/* ----------------------------------------------------------------------------- PROJECTS LIST */

.projects-list {
	
	ul {
		margin:             0;
		padding:            0;
		list-style:         none;
	}
	
	h4 {
		margin-bottom:      0;
	}
	
	p {
		margin-top:         5px;         
	}
	
}

/* ----------------------------------------------------------------------------- WP Syntax */

.wp_syntax pre {
	font-family: @mono-font !important;
}