/*CONSTANTs*/
@cyan: #009ee0;
@magenta: #ec008c;
@dark-magenta: #913944;
@yellow: #ffed00;
@light-light-light-grey: #f8f8f8;
@light-light-grey: #e0e0e0;
@light-grey: #cccccc;
@grey: #999999;
@dark-grey: #454545;

/**MIXINs***/
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);

  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}
.text-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(255, 255, 255, @alpha);

  text-shadow:        @val;
}
/***********/



body{
	margin: 0;
	background-color: #FFF;
	text-align: center;
	
	
	/*text*/
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	color: @grey;
	text-decoration: none;

	a, a:visited{
		color: @magenta;
		text-decoration: none;
	}
	a:hover{
		color: #ec008c;
		text-decoration: underline;
	}
}

::selection	{ background-color: #ffed00;	}
/* text colors */
.cyan		{ color: @cyan !important;		}
.magenta	{ color: @magenta !important;	}
.yellow		{ color: @yellow !important;	}
.dark-grey	{ color: @dark-grey !important; }

/* text aligns */
.left		{ text-align: left !important;		}
.center		{ text-align: center !important;	}
.right		{ text-align: right !important;		}
.justify	{ text-align: justify !important;	}

/* block aligns */
.float-left	{ float: left;					}
.float-right{ float: right;					}
.clear-left	{ clear: left;					}
.clear-right{ clear: right;					}
.clear-both	{ clear: both;					}
/* displays */
.display-block 			{	display: block !important; overflow: auto;	}
.display-inline-block	{	display: inline-block !important;			}

/* margin */
.margin-top-30		{	margin-top: 	30px 	!important;		}
.margin-bottom-20	{	margin-bottom: 	30px 	!important;		}
.margin-bottom-30	{	margin-bottom: 	30px 	!important;		}
.margin-top-23		{	margin-top: 	23px 	!important;		}
.margin-top-10		{	margin-top: 	10px 	!important;		}
.margin-left-10		{	margin-left: 	10px 	!important;		}
.margin-right-10	{	margin-right: 	10px 	!important;		}
.margin-bottom-10	{	margin-bottom: 	10px 	!important;		}
.margin-top-8		{	margin-top: 	8px 	!important;		}
.margin-bottom-5	{	margin-bottom: 	5px 	!important;		}

/* icons */
.icon {
	background: url(img/icons/icons.png) no-repeat left;
	padding-left: 16px;
	display: inline-block;
	
	&.author		{	background-position: 0 0;		}
	&.date			{	background-position: 0 -16px;	}
	&.categories	{	background-position: 0 -32px;	}
	&.comments		{	background-position: 0 -48px;	}
	&.tags			{	background-position: 0 -64px;	}
	&.time			{	background-position: 0 -112px;	}
	&.music			{	background-position: 0 -128px;	}
	&.links			{	background-position: 0 -144px;	}
	&.contributors	{	background-position: 0 -160px;	}
	&.continue		{	background-position: 0 -176px;	}
	&.settings		{	background-position: 0 -192px;	}
}
.more-link{
	float: right;
	background: url(img/icons/icons.png) no-repeat left;
	background-position: 0 -176px;
	padding-left: 16px;
	display: inline-block;
}
.coffee{
	background: url(img/coffee.png) no-repeat left;
	margin: 20px 0 0;
	height: 105px;
	padding: 55px 10px 10px 74px;
	border: none;
	cursor: pointer;
	.center;
	display: inline-block;

	color: @grey !important;
	&:hover{ color: @magenta !important; }
}

p.error, span.error		{ color: #C00 !important;	}
p.success, span.success		{ color: green !important;	}
.msg-box{	height: 12px;	}

p{
	text-align: justify;
	margin-top: 0px;
	margin-bottom: 5px;
	line-height:18px;
}
hr + p{		margin-top: 5px;	}
pre {
	background-color: @light-light-light-grey;
	border: 1px solid @light-light-grey;
	padding: 10px;
	margin-bottom: 5px;
	text-align:left;
}
code {
	color: @cyan;
}
ul{	margin-bottom: 5px;	}
blockquote{	padding: 5px 50px;	font-style: italic; color: #BBB; }

hr{
	border-top: 1px dashed #e0e0e0;
	margin: 0 0 5px;
	clear: both;
}
hr.to-cut{
	background: url(img/cut-here.png) no-repeat;
	background-position-x: 900px;
	background-position-y: -1px;
	height: 22px;
	margin-bottom: 0;
}

.first-content	{	margin-top:30px;	}
.last-content	{	margin-bottom:30px;	}
.center-block	{	display:inline-block; margin:0 auto;	}
.group			{	overflow: auto;	float: left;	}
/*inputs*/
.req{
	padding-left: 3px;
	color: @magenta !important;
	font-weight: bold;
	font-size: 18px !important;
}

form table tr td{
	padding: 10px;
}

div.input-wrapper {
	margin: 5px 0;
	padding: 3px; 
	display: inline-block;
	background: #EBEBEB;
	.rounded-corners(3px);

	/*	Hilighter	*/
	.miss-field	{
		border-color: @magenta !important;
		.box-shadow (0, 1px, 1px, 0.1);
	}

	input[type='text'], input[type='password'], input[type='file'], 
	input.type-text, input.type-password, select, input.type-file {
		height: 32px;
		margin: 0;
		padding: 0 5px;
		background: white;
		border: 1px solid #DADADA;
		outline: none;
		color: @grey;
	}
	select{	padding: 0;	}

	input[type='text']:focus, input[type='password']:focus,
	input[type='text']:hover, input[type='password']:hover, 
	input.type-text:focus, input.type-password:focus, select:focus, textarea:focus,
	input.type-text:hover, input.type-password:hover, select:hover, textarea:hover {
		border-color:@light-grey;
		.box-shadow (0, 1px, 1px, 0.1);
	}

	input[type='submit'], input[type='button'],
	input.type-submit, input.type-button {
		background: url(img/input-button-bg.png) repeat-x top;
		border: 1px solid #c36079;
		
		padding: 8px 15px;	color: @dark-magenta;
		margin: 0;			font-weight: bold;

		.text-shadow(0, 1px, 1px, 0.3);
		.box-shadow (0, 1px, 1px, 0.3);
								
		cursor: pointer;
	}
	input[type='submit']:active, input[type='button']:active,
	input.type-submit:active, input.type-button:active {
		background-position: bottom;
		.box-shadow (0, 0, 1px, 0.2);
	}

	input[type='submit'].green, input[type='button'].green {
		background-image: url(img/input-button-bg-green.png);
		background-repeat: repeat-x;
		border: 1px solid #8eb03e;
		.text-shadow(0, 1px, 1px, 0.0);
		color: #FFF;
	}

	textarea{
		padding: 5px;							margin-top: 0;		margin-bottom: 0;
		background: white;
		border: 1px solid #DADADA;				outline: none;
		font-family: Helvetica, sans-serif;		font-size: 12px;	color: @grey;
		resize: none;
	}
	textarea.resizeable-vertical	{	resize: vertical;	}
	textarea.resizeable-horizontal	{	resize: horizontal;	}
	textarea.resizeable				{	resize: both;		}

	span {
		padding: 10px 0 9px;
		display: inline-block;
	}
}

#wrapper{
	overflow: auto;
	background: url(img/bg.png) repeat;
}
#wrapper-inner{
	overflow: auto;
	background: url(img/light.png) no-repeat top center;
	margin-bottom: 30px;
}

.clear{
	.fat{
		height:10px;
	}
}
/* HEADER START */
#header{
	height: 60px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#logo{
	height: 60px;
	background: url(img/logo.png) no-repeat center center;
	a{
		height: 60px;
	}
}
#nav{
	height: 60px;
	.page_item{	width: 112px; }
	.current_page_item a{ color: @magenta; }
	li{
		display:inline-block;
		text-align: center;
		a{
			line-height: 60px;
			
			font-family:Verdana, Geneva, sans-serif;
			font-size:12px;
			color: #404041;
			text-decoration:none;
			text-transform: uppercase;
			text-shadow: 1px 1px 1px #FFF;
		}
	}
}

/* SOCIAL LINKs start */
#social-title{
	height: 20px;
	line-height: 20px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #666;
}
#social{
	ul{
		display: inline-block;
		margin: 0 46px;
	}
	li{
		margin: 23px 9px 3px;
		padding: 0;
		height: 12px !important;
		width: 12px !important;
		height: 14px;
		width: 14px;
		
		display: inline-block;
		float: left;
		
		line-height: 12px !important;
		line-height:14px;
		font-size:8px;
		
		border: 1px solid white;
		box-shadow: #d7d8d9 0 0 1px 1px;
		-webkit-box-shadow: #d7d8d9 0 0 1px 1px;
		-moz-box-shadow: #d7d8d9 0 0 1px 1px;
		cursor: pointer;
		
		a{
			display: inline-block;
			line-height: 14px;
			height: 14px;
			width: 14px;
		}
	}
	li.cyan   {	background-color: @cyan;	}
	li.magenta{	background-color: @magenta;	}
	li.yellow {	background-color: @yellow;	}
	li.black  {	background-color: #000;		}
}
/* SOCIAL LINKs END */
/* HEADER END */

/* CONTENT START */
.block-shadow-left{
	height: 13px;
	background: url(img/block-shadows.png) no-repeat left bottom;
	float: left;
	width: 100%;
}
.block-shadow-right{
	height: 13px;
	background: url(img/block-shadows.png) no-repeat right top;
	float: left;
	width: 100%;
}
.block{
	background: #fff;
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}
.content.main{
	min-height: 370px;
}
.content{
	padding: 20px 0;
	/*childs*/
	.ash{			margin: 3px auto;			}
	
	h1,h2,h3,h4{
		text-align: left;
	}

	h1, h1 a{
		margin-top: 10px;
		margin-bottom: 2px;
		font-weight: normal;
		font-size: 28px;
		color: @dark-grey;
		text-decoration: none;
	}
	h2, h2 a{
		margin-top: 0;
		margin-bottom: 2px;
		font-weight: normal;
		font-size: 20px;
		color: @dark-grey;
		text-decoration: none;
	}
	hr.to-stand{
		background: url(img/comment-chain-sep.png) no-repeat;
		background-position: 79px -6px;
		height: 22px;
		margin-bottom: 0;
	}
	h1 a.hover, h2 a.hover {
		text-decoration: none;
	}
	.cover{
		position: absolute;
		z-index: 89;
		width: 100%;
		height: 100%;
		background: url(img/85white.png) repeat;
	}
	.little-post{	margin-bottom: 10px;	}
	.big-line	{	line-height: 100px;	color: #CFCFCF;		}
	/*post*/
	.post .meta, .comment .meta{
		color: @light-grey;
		line-height: 16px;
		.title{
			font-size: 20px;
			font-variant: small-caps;
			color: @cyan;
		}
	}
	.post{
		overflow: auto;
		b, strong{	color: @grey;	}
		.meta{
			.status-bar{
				position: absolute;
				height: 10px;
				.begin{
					height: 10px;
					width: 4px;
					float: left;
					background: url(img/status-bar.png) 0 0 no-repeat;
				}
				.body{
					height: 10px;
					float: left;
					background: url(img/status-bar.png) 0 -10px repeat-x;
				}
				.end{
					height: 10px;
					width: 4px;
					float: left;
					background: url(img/status-bar.png) 0 -20px no-repeat;
				}
			}
			.status-bar-rail{
				height: 10px;
				.begin{
					height: 10px;
					width: 4px;
					float: left;
					background: url(img/status-bar.png) 0 -50px no-repeat;
				}
				.body{
					height: 10px;
					float: left;
					background: url(img/status-bar.png) 0 -30px repeat-x;
				}
				.end{
					height: 10px;
					width: 4px;
					float: left;
					background: url(img/status-bar.png) 0 -40px no-repeat;
				}
			}
		}
		.post-thumb{
			margin-bottom: 5px;
			a:hover {	text-decoration: none !important;	}
		}
		.work-aggregate{
			margin-top:30px;
			margin-bottom:30px;
		}
		.work-thumb{
			margin-bottom: 40px;
			a:hover {	text-decoration: none !important;	}
			span.work-cat{
				position: absolute;
				right: 0;
				color: #999;
				text-align: right;
				line-height: 18px;
				padding: 0 5px;
				float: right;
				top: -18px;
			}
		}
		.cover{
			.comments{
				position: absolute;
				top: 74px;
				width: 100%;
				.center;
				color: @magenta;
				font-size: 32px;
				font-weight: bold;
			}
			.categories{
				position: absolute;
				right: 5px;
				bottom: 5px;
			}
		}

		ul{
			margin: 10px 0;
			padding-left: 32px;
			li{
				line-height: 18px;
			}
		}
		.entry{
			margin: 10px 0;
			.gallery-item{
				overflow: auto;
				.gallery-icon{
					margin: 0 auto;
					img{ border: none !important; }
				}
			}
			.wp-caption{
				margin-bottom: 5px;
				.wp-caption-text{
					color: @grey;
					text-align: center;
					width: 100%;
				}
				.wp-caption-cover{
					position: absolute;
					z-index: 89;
					background: url(img/85white.png) repeat;
				}
				&.alignnone		{					}
				&.alignleft		{	float: left;		margin-right: 10px;		}
				&.aligncenter	{	margin-left: auto; 	margin-right: auto;	}
				&.alignright	{	float: right;		margin-left: 10px;		}
			}
			.media-content{	margin: 5px auto 15px;	}
		}
		&.first-post{
			.cover{
				.comments{
					top: 84px;
				}
			}
		}
	}
	
	.page-navigation{
		line-height: 22px;
		a, a:visited	{	color: @magenta; text-decoration: none;	}
		a:hover 		{	text-decoration: underline;				}
		div{
			height: 22px;
		}
		.next, .previous{
			background-image: url(img/arrow.png);
			background-repeat: no-repeat;
			display: inline-block;
			color: @grey;
			text-decoration: none;
		}
		.next		{	background-position: top left;		padding-left: 20px;		}
		.previous	{	background-position: bottom right;	padding-right: 20px;	}
		&.top		{	margin-bottom: 16px;	}
		&.bottom	{	margin-top: 16px;		}
	}
	hr + .page-navigation.bottom	{	margin-top: 6px !important;		}
	
	.sidebar{
		li{
			list-style: none;
			overflow: auto;
			margin: 2px 0;
		}
		.spt_widget{
			padding-bottom: 5px;
		}
		hr + .spt_widget{	padding-top: 5px;	}
		.little-post, .comment{
			a:hover {	text-decoration: none !important;	}
		}
		.comment{
			margin-bottom: 10px;
			.avatar{ float:left; }
			.text{
				width:155px;
				margin-left:5px;
				float: left;
				.justify;
			}
		}
	}
	
	.commentlist{
		list-style: none;
		
		li{
			overflow-y: auto;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url(img/comment-chain.png);
			.comment{
				background-color: white;
				border: 1px solid #DADADA;
				
				p{
					margin: 20px 30px 20px 0;
				}
				.text{
					width: 420px;
					float: right;
				}
				.author{
					text-align: center;
					margin-top: 20px;
					margin-bottom: 20px;
					width: 160px;
					float: right;
					.avatar{
						margin-bottom: 10px;
					}
					span{
						display: block;
					}
				}
				.delete{
					padding-left: 9px;
					padding-top: 9px;
					background: url(img/icons/close.png) no-repeat top;
					position: absolute;
					z-index: 88;
					top: 7px;
					right: 7px;
				}
				.delete:hover{
					background-position: bottom;
				}
				.time{
					position: absolute;
					z-index: 98;
					bottom: 7px;
					right: 0;
					font-size: 8px;
					color: @light-grey;
					text-align: center;
					letter-spacing: 2px;
					width: 450px;
				}
			}
		}
		div.sep{
			background-image: url(img/comment-chain-sep.png);
			background-position: 19px;
			background-repeat: no-repeat;
			height: 28px;
		}
		div.sep.odd{
			background-position: 800px;
		}
		li.odd{
			background-image: url(img/comment-chain-odd.png);
			.comment{
				p{
					margin: 20px 0 20px 30px;
				}
				.text{
					float: left;
				}
				.author{
					float: left;
				}
				.time{
					right: auto;
					left: 0;
				}
			}
		}
		li.not-yet-approved{
			background-image: url(img/comment-chain-sep.png) !important;
			background-repeat: repeat-y;
			background-position-x: 800px;
			.cover{	color: @magenta;	}
		}
		li.not-yet-approved.odd{
			background-position-x: 19px;
		}
	}
}

#plusone{
	margin-top: 11px;
	margin-bottom: 10px;
}

#twitter{
	float: left;
	.twitter-bird{
		background: url(img/twitter-bird.png) center no-repeat;
		height: 36px;
		margin-bottom: 5px;
	}
	#twitter_update_list{
		padding: 0 !important;
		margin: 0 !important;
		li{
			width: 220px;
			list-style: none;
			margin: 0 0 10px;
			overflow: auto;
			.body{
				overflow: auto;
				padding: 0;
				img		{	margin-top: 10px;	}
				.status	{	text-align: justify;	color: #BBB;	text-shadow: 1px 1px 0px #FFF;	}
				.time	{
					width: 110px;
					text-align: left;
					float: left;
					font-size: 10px;
				}
				.source	{	
					width: 110px;
					float:left;
					text-align: right;
					text-transform: uppercase;
				}
				.source {	font-size: 9px; margin: 0;	}
			}
		}
	}
}
/* CONTENT END */

/* PICS START */
/* PICS END */

/* FOOTER START */
#footer-wrapper{
	margin: 0;
	padding: 20px 0;
	background-color: #FFF;

	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);

	#footer{
		overflow: auto;
	}
}
/* FOOTER END */

/* FIXES */
.he{
	height: 10px;
}
#cf-message	{	width: 633px;	}
#cf-email	{	width: 435px;	}
#comment-form-url, #comment-form-comment {	width: 598px;	}