/*
Theme Name: Touchfolio
Theme URI: http://dimsemenov.com/themes/touchfolio/
Description: Free responsive portfolio WordPress theme with touch-optimized gallery plugin.
Author: Dmitry Semenov
Author URI: http://dimsemenov.com
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: portfolio, responsive, touch, gallery
*/

/* --- Reset & Base Styles --- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { height: 100%; }
body {
  height: 100%;
  line-height: 1.6;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #3b3a37;
  background: #F8F8F6;
  -webkit-text-size-adjust: 100%;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: #000; text-decoration: none; }
a:hover { color: #C00; }
img { max-width: 100%; height: auto; }
::selection { background: #C00; color: #FFF; }
::-moz-selection { background: #C00; color: #FFF; }

/* --- Touchfolio Main Layout --- */
#page { position: relative; min-height: 100%; }
#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 16em;
  height: 100%;
  background: #FFF;
  z-index: 100;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-y: auto;
  border-right: 1px solid #EAEAEA;
}
#content {
  margin-left: 16em;
  padding: 20px;
  background: #F8F8F6;
  min-height: 100vh;
  box-sizing: border-box;
}

/* --- Header & Navigation --- */
.site-title {
  margin: 2.9em 0 9px 0;
  font-size: 1.5em;
  font-weight: bold;
}
.site-title a { color: #333; }
.site-description {
  font-size: 12px;
  color: #929699;
  margin-bottom: 20px;
}
#main-nav { margin-bottom: 20px; }
#main-nav ul li a {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: #333;
  padding: 4px 0;
}
#main-nav ul li a:hover { color: #888; }
#main-nav ul li.current-menu-item > a,
#main-nav ul li.current_page_item > a {
  font-weight: bold;
  color: #333;
}

/* --- Gallery & Content Containers --- */
.ds-gallery-page #content { padding: 0; margin-left: 16em; overflow: hidden; }
.gallery-container { position: relative; width: 100%; height: 100%; }
.entry-title { font-size: 1.5em; font-weight: bold; margin-bottom: 15px; color: #333; }
.entry-content { font-size: 0.875em; line-height: 1.6em; }

/* --- Widgets & Footer --- */
.widget-title { font-size: 13px; line-height: 20px; font-weight: bold; margin-bottom: 8px; }
.widget { font-size: 13px; line-height: 20px; margin-bottom: 20px; }
#site-footer { font-size: 0.875em; color: #929699; margin-top: 40px; }

/* --- Responsive Layout --- */
@media screen and (max-width: 960px) {
  #sidebar { position: relative; width: 100%; height: auto; border-right: none; border-bottom: 1px solid #EAEAEA; }
  #content { margin-left: 0; }
  .ds-gallery-page #content { margin-left: 0; }
}


////////////////////////////////////////////////////////////////////
//
// Touchfolio General Css file
//
// 	1. Layout: Main wrappers and containers
// 	2. Menu (normal and collapsed on mobile)
// 	3. Logo, site description
// 	4. Widgets
// 	5. Footer
//  6. Masonry portfolio styling
//  7. Search results page
//  8. Media queries < 1150px
//  9. Regular page collapsed layout
//  10. Gallery page collapsed layout
//  11. Media queries < 620px
//  12. Media queries < 420px
//  
////////////////////////////////////////////////////////////////////

@import "css-less/mixins.less"; // less stuff
@import "css-less/reset.less"; // reset
@import "css-less/typography.less"; // headings, links, lists, blockquote's , form, inputs ...
@import "css-less/two-dim-slider.less"; // everything related to home page slider, except resizing
@import "css-less/page-and-blog.less";


////////////////////////////////////////////
//
// 1. Layout: Main wrappers and containers
//
////////////////////////////////////////////

body {
	background: @content-background;
}
html, body {
	-webkit-font-smoothing: subpixel-antialiased;
    height: 100%;
    width: 100%;
}
#main-wrap {
	height: 100%;
	.box-sizing();
}
#page {
    min-height: 100%;
    border-left: @sidebar-width-full solid @sidebar-background;
	zoom: 1;
	margin: 0 0 -@footer-max-height 0; // the bottom margin is the negative value of the footer's height
}
.main-header {
	margin-left: -@sidebar-width-full;
	position: relative;
	width: @sidebar-width-full - 4;
	padding: 0 2em;
	float: left;
	z-index: 10;
}
// semantics is boring
.push {
	height: @footer-max-height;
	clear: both;
}
#primary {
	padding: 1.5em 2em;
}
#secondary {
	color: @sidebar-text-color;
	float: left;
}








////////////////////////////////////////////
//
// 2. Mobile (select control) menu
//
////////////////////////////////////////////
.menu {
	margin: @menus-margin / 2 0 @menus-margin / 2 - 3 0;

	font-weight: @menu-font-weight;
	font-size: @menu-font-size;
	line-height: @menu-line-height;

	ul {
		margin: 0;
		list-style: none;
	}
	li {
		margin: 0 0 4px;
		list-style: none;
	}
	a {
		text-decoration: none;
		border-bottom-color: @sidebar-background;
		
		color: @menu-item-color;
		.transition(none, 0);
	}
	a:hover {
		background: none;
		color: @menu-item-hover-color;
		border-bottom-color: @menu-item-hover-color;
	}
	li.important-item a {
		background: #afeef5;
	}
	
	li.current-menu-item > a {
		color: @selected-menu-item-color;
		font-weight: bold;
	}
}
.menu-sep {
	color: #DDD;
	font-size: @menu-font-size;
}
.project-menu-sep {
	margin-bottom: @menus-margin / 2;
}

#gallery-menu {
	margin: .5em 0 0 0;
	font-size: @projects-menu-font-size; 
	line-height: @projects-menu-line-height;

	a {
		color: @projects-menu-font-color;
		
	}
	
	li {
		&.current-album-menu-item {
			a {
				cursor: default;
				color: @selected-menu-item-color;
				&:hover {
					border-color: transparent;
				}
			}
		}
	}
}
// collapsed menu
a.menu-button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	padding: 6px 9px 8px;
	font-size: 13px;
	line-height: 18px;
	font-weight: bold;
	float: right;
	color: @text-color;
	&:hover {
		background: none;
		border: 0;
	}
}
.menu-close-button {
	.menu-button-icon {
		background-position: -170px -31px;
	}
}
.menu-button-icon {
	display: inline-block;
	margin-top: 2px;
	width: 14px;
	height: 12px;
	line-height: 12px;
	vertical-align: text-top;
	background: @sprite-url no-repeat;
	background-position:   -170px -9px;
	.transition(background-position, .3s);
}

.mobile-menu {
	position: relative;
	font-weight: bold;
	width: 4em;
	overflow: hidden;
	margin: 0;
	font-size: 16px;
	line-height: 32px;
	padding-left: .5em;

	select {
		max-width: 70px;
		top: 0;
		right: 0;
		border: 0;
		padding: 0;
		font-size: 16px;
		line-height: 32px;
		margin: 0;
		height: 32px !important;
	}
	.menu-icon {
		display: block;
		width: 16px;
		height: 17px;
		float: right;
		margin-top: 6px;
		background: @sprite-url no-repeat -170px -10px;
	}
	.customStyleSelectBox {
		display: block;
		cursor: pointer;
	}
	.customStyleSelectBoxInner {
		display: block;
		float: right;
	}
	.select-menu {
		float: right;
		cursor: pointer;
	}
	.customStyleSelectBox {
		display: block !important;
		float: none;
	}
}




////////////////////////////////////////////
//
// 3. Logo, site description
//
////////////////////////////////////////////
.logo {
	margin: @default-logo-margin;
	width: @default-logo-width;
	letter-spacing: 0;
	font-size: 1em;
	a {
		color: @selected-menu-item-color;
		border: 0;
		background: none;
		display: block;
		.transition(opacity, .3s);
	}
	a:hover {
		opacity: 0.6;
		background: none;
	}
	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
}
.site-description {
	color: @sidebar-text-color;
	font-size: @site-description-font-size;
	margin-bottom: @menus-margin / 2 - 2;
}




////////////////////////////////////////////
//
// 4. Widget
//
////////////////////////////////////////////
.widget {
	font-size: @widget-body-font-size;
	line-height: @widget-body-line-height;

	margin: @menus-margin / 2 0 @menus-margin / 2 0;
	
	.widget-title {
		font-weight: bold;
		color: @sidebar-text-color;
		margin: 0 0 .5em;

		font-size: @widget-title-font-size;
		line-height: @widget-title-line-height;
	}
	
	li, ul {

		margin-left: 0;
		list-style: none;
	}

	a {

		//border: 0;
	}
	input {
		padding: 0;
	}
}




////////////////////////////////////////////
//
// 5. Footer
//
////////////////////////////////////////////
.footer-copy {
	height: @footer-max-height;
	overflow: hidden;
	width: 100%;
	background: @sidebar-background;
	p {
		padding: 1.5 * @font-small-em-size 2 * @font-small-em-size;
		max-width: 40 * @font-small-em-size;
		margin: 0;
		font-size: @font-small;
		line-height: @font-small-line-height;
		margin-left:  @sidebar-width-full * @font-small-em-size;
		color: @footer-copy-text-color;
	}
	a {
		color: @footer-copy-text-color;
	}
}




////////////////////////////////////////////
//
// 6. Masonry portfolio styling
//
////////////////////////////////////////////
.page-template-ds-gallery-masonry-template-php {
	.hentry {
		max-width: none ;
	}
	.albums-thumbnails {
		width: auto;
	}
	.slider-data {
		display: none;
	}
	
	.two-dim-slider {
		display: none;
		left: 0;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		padding: @gallery-padding;
		width: auto;
		height: auto;
		overflow: hidden;
		background: @sidebar-background;
		z-index: 45;
	}
}
.page-template-full-width-page-template-php {
	.hentry {
		max-width: none ;
	}
}
.albums-thumbnails {
	width: @content-large-image-max-width;

	img {
		.transition(all, .2s, ease-in-out);
		display: block;
		width: 304px;
	}
	.image-background {
		background: #222;
		overflow: hidden;
		width: 100%;
		height: auto;
		position: relative;
	}
	.project-title {
		font-weight: bold;
		width: 100%;
		display: block;
		text-align: left;
		margin: .8em 0 .5em;
	}
	a.project-thumb {
		display: block;
		position: relative;
		float: left;
		width: 320px;
	    border: 0;
	    margin-bottom: 8px;
		.transition(none, 0);
		&:hover {
			background: none;
			border: 0;
		}
	}
	.project-thumb-inside {
		padding: 7px;
	    border: 1px solid transparent;
	    .transition(border, .3s);
	    &:hover {
			border-color: #DDD;
			img {
				opacity: .7;
			}
			.project-title {
				color: @link-hover-color;
			}
		}
	}
	.project-description {
		font-size: @font-small;
	}
}





////////////////////////////////////////////
//
// 7. Search results page
//
////////////////////////////////////////////

.search-results {
	h1.entry-title {
		font-size: 1.25em;
		margin: 1.1em 0 0.5em;
	}
	.hentry {
		margin-bottom: 3em;
	}
	.page-header {
		margin-bottom: 3em;
	}
	.page-title {
		font-size: 2em;
	}
}





////////////////////////////////////////////
//
// 8. Media queries < 1150px
//
////////////////////////////////////////////

@media only screen and (max-width: 1150px) {
	.main-header {
		width: @sidebar-width-full - 6;
		padding: 0 1.5em;
		margin-left: -@sidebar-width-full + 3;
	}
	.footer-copy p {
		margin-left: (@sidebar-width-full - 3) * @font-small-em-size;
		padding-left: 1.5 * @font-small-em-size;
		padding-right: 1.5 * @font-small-em-size;
	}
	#primary {
		padding: 1.5em 1.5em;
	}
	#page {
	  	border-left: @sidebar-width-full - 3 solid @sidebar-background;
	}
	.ds-gallery-page .two-dim-slider {
		left: @sidebar-width-full - 3;
		top: 0;
		right: 0;
		bottom: 0;
	}
	p {
		img {
			max-width: 100%;
		}
	}
}



////////////////////////////////////////////
//
// 9. Regular page collapsed layout
//
////////////////////////////////////////////
.page-template-ds-gallery-masonry-template-php.collapsed-layout  {
	#primary {
		padding: 1em 1em 1.5em;
	}
	.albums-thumbnails {
		margin: 0 auto;
	}
}
.collapsed-layout {
	#main-wrap {
		background: @sidebar-background;
		padding: 0;
		width: auto !important;
	}
	p {
		img {
			max-width: 100%;
		}
	}
	.logo {
		margin: 0;
		width: @collapsed-layout-logo-width;
		padding: 0;
		a {
			font-size: 19px;
			padding: @collapsed-layout-logo-padding;
		}
	}
	
	.main-header {
		width: 100%;
		position: relative;
		padding: 0;
		margin: 0;
		
		background: @sidebar-background;

		.menus-container {
			clear: both;
			float: right;
			margin-right: 0;
			position: absolute;
			right: 0;
			top: 0;
			background: #FFF;
			padding: 8px 0;
			overflow: hidden;
		}
		.menu {
			margin: 0 0 8px;
			li {
				width: auto;
				margin: 0;
				//float: left;
				//margin-right: 8px;
			}
			a {
				width: 100%;
				display: block;
				padding: 4px 16px 2px;
				&:hover {
					border-color: transparent;
					background-color: rgba(0,0,0,.1);
				}
			}
		}
		.menu-sep {
			display: none;
		}

		.top-logo-group {
			float: left;
			display: block;
			overflow: hidden;
		}
		
		.site-description {
			display: none;
			
		}
		.menu-button {
			margin: @collapsed-layout-menu-button-margin;
			float: right;
		}
	}
	.menu-sep {
		display: none;
	}
	
	#main {
		width: 100%;
		clear: both;
	}
	#primary {
		padding: 1em 10% 1.5em;
		background: @content-background;
	}
	#page {
		min-height: 0;
		height: auto;
		margin: 0;
		border: 0;
	}
	.footer-copy {
		height: auto;
		overflow: visible;
	}
	.push {
		display: none;
	}
	.footer-copy {
		background: none;
		p {
			width: 80%;
			padding-left: 10%;
			padding-right: 10%;
			max-width: none;
			margin: 0;
		}
	}
	#secondary {
		float: none;
		width: 100%;
		padding: 1.5em 0;
		background: @sidebar-background;
		.widget {
			padding: 0 10%;
			margin: 0 0 1.5em 0;
		}
	}
	#main {
	  	border-left: none;
	}
	.hentry, #comments, #nav-below {
		max-width: none;		
	}
	
	.site-content {
		margin: 0;
	}
	#content {
		margin: 0;
	}
	.video-overlay {
		.video-container {
			margin: .5em;
		}
	}
}



////////////////////////////////////////////
//
// 10. Gallery page collapsed layout
//
////////////////////////////////////////////
//
.collapsed-gallery-page {
	#main-wrap {
		border-top: 0;
	}
	#page {
		border: 0;
		margin: 0;
	}
	#main {
		border: 0;
	}
	.logo {
		margin: 0;
		width: @collapsed-gallery-logo-width;
		a {
			margin: @collapsed-gallery-logo-padding;
			font-size: 19px;
		}
	}
	#gallery-menu {
		display: none;
	}
	.two-dim-slider {
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		.image-nav {
			bottom: .5em;
			left: .5em;
		}
		.slider-album-indicator {
			bottom: 8px + @gallery-padding;
		}
	}
	.album-info-block {
		right: 0;
		bottom: 0;
		top: auto;
		left: 0;

		height: auto;
		max-height: 100%;
		overflow-y: auto;

		.info-container {
			width: auto;
			height: auto;
			padding: 1em 1em 2em;
		}
		&::-webkit-scrollbar {
			background:fadeout(@menu-item-color, 90%);
			width:8px;
			height:8px;
			//border-right: 2px solid transparent;
		}
		&::-webkit-scrollbar-thumb {
			background-color:fadeout(@menu-item-color, 80%);
		}
		&::-webkit-scrollbar-thumb:hover {
			background-color:fadeout(@menu-item-color, 70%);
		}
		
		width: auto;
		max-width: none;
	} 
	.main-header {
		width: auto;
		height: auto;
		overflow: hidden;
		position: relative;


		padding: @collapsed-gallery-menu-area-padding;
		margin: 0;
		left: @gallery-padding;
		top: @gallery-padding * 2;

		.menus-container {
			margin: 0;
			overflow: hidden;
			clear: both;
		}
		.menu {
			margin: 0 0 16px;
			li {
				width: auto;
				margin: 0;
				//float: left;
				//margin-right: 8px;
			}
			a {
				width: 100%;
				display: block;
				padding: 4px 16px 2px 0;
				&:hover {
					border-color: transparent;
					background-color: rgba(0,0,0,.1);
				}
			}
		}
		.menu-sep {
			display: none;
		}


		#main-menu {
			margin-top: @menus-margin - 8;
		}

		.menu-button {
			margin: @collapsed-gallery-menu-button-margin;
		}
		.primary-menu {
			//display: none;
		}
		.social-menu {
			//display: none;
		}
		.top-logo-group {
			float: left;
		}
		.site-description {
			display: none;
		}
	}
}





////////////////////////////////////////////
//
// 11. MQ < 620px
//
////////////////////////////////////////////

@media only screen and (max-width: 620px) {
	// .albums-thumbnails {
	// 	a.project-thumb {
	// 		width: 100%;
	// 		margin-right: 0;
	// 		margin-left: 0;
	// 	}
	// }
	.album-info-block {
		font-size: 90%;
	}
}





////////////////////////////////////////////
//
// 12. MQ < 500px
//
////////////////////////////////////////////

@media only screen and (max-width: 500px) {
	
	.album-info-block {
		font-size: 85%;
	}
	.collapsed-layout { 
		#primary,
		#secondary .widget,
		.footer-copy p {
			padding-left: 1em !important;
			padding-right: 1em !important;
		}
		.footer-copy {
			background: none;
		}
		.video-overlay {
			.video-container {
				margin: 0;
			}
		}
		.slider-album-indicator {
			max-width: 80%;
		}
	}


	.ds-gallery-page {
		.main-header {
			top: @gallery-padding;
			left: 0;
		}
		.arrow-nav {
			bottom: 48px;
		}
		.slider-album-indicator {
			bottom: 8px;
		}
		.two-dim-slider {
			padding: 0;
			.arrow-right {
				right: 0px;
			}
			.arrow-left {
				left: 0px;
			}
			.slider-album-indicator {
				bottom: 8px;
				right: 0;
			}
		}
		.album-info-block .info-container {
			padding-bottom: 1em;
		}
	}
	



}



/* LESS mixins 
--------------------------------------------- */
.font-small() {
	font-size: @font-small;
	line-height: @font-small-line-height;
}
.rounded (@radius: 6px) {
	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	        border-radius: @radius;
}
.box-shadow (@x: 0, @y: 0, @blur: 2px, @color: #000) {
	-webkit-box-shadow: @arguments;
	   -moz-box-shadow: @arguments;
	        box-shadow: @arguments;
}
.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	   -moz-box-sizing: @type;
	     -o-box-sizing: @type;
	        box-sizing: @type;
}
.transition (@property, @duration: .2s, @timing: ease-in-out) {
	-webkit-transition: @arguments;
	   -moz-transition: @arguments;
	     -o-transition: @arguments;
	        transition: @arguments;
}
.tab-size (@spaces: 2) {
	-webkit-tab-size: @spaces;
	   -moz-tab-size: @spaces;
	     -o-tab-size: @spaces;
	        tab-size: @spaces;
}
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
	transform: 		 @string;
}
.scale (@factor) {
	-webkit-transform: scale(@factor);
	-moz-transform: 	 scale(@factor);
	-ms-transform: 		 scale(@factor);
	-o-transform: 		 scale(@factor);
	transform: 		 scale(@factor);
}
.rotate (@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: 	 rotate(@deg);
	-ms-transform: 		 rotate(@deg);
	-o-transform: 		 rotate(@deg);
}
.animation (@name, @duration: .3s, @delay: 0, @ease: ease) {
	-webkit-animation: @name @duration @delay @ease;
	-moz-animation:    @name @duration @delay @ease;
	-ms-animation:     @name @duration @delay @ease;
	-o-animation:     @name @duration @delay @ease;
}
.opacity-transition() {
	.transition(opacity, 0.3s, ease-out);
}


// helpers
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

.fade-out {
	opacity: 0 !important;
}



////////////////////////////////////////////////////////////////////
//
// Touchfolio Page Content Styling
//
// 	1. Preloader
// 	2. Video-related things
// 	3. Wrappers, image containers e.t.c
// 	4. Album name + count (1 of n)
// 	5. Collapsed slider styles 
//  6. Album info block (share, close project button)
//  
////////////////////////////////////////////////////////////////////

.entry-title {
	margin: 0;
	a {
		color: @title-color;
		&:hover {
			
			background: none;
			color: @link-hover-color;

		}
	}
}
.entry-header {
	margin: 0 0 1em;
}
.entry-meta {
	margin-top: 0.25em;
	font-size: @font-small;
	font-weight: normal;
	color: @secondary-text-color;
	.comments-link,
	.entry-date,
	.byline {
		white-space: nowrap;
	}
}

.more-link {
	margin-top: 1em;
	display: inline-block;
	font-weight: normal;
	color: @text-color;
	overflow: hidden;
	line-height: 1.3em;
}



.logged-in-as {
	font-size: @font-small;
	margin-bottom: @font-small-em-size;
}

.entry-content,
.entry-summary {
	margin: 0;
}
.page-links {
	margin: 0 0 1em;
}

.hentry {
	max-width: @content-max-width;
	margin: 0 0 3em;
}
#nav-below {
	max-width: @content-max-width;
	margin: 0 0 2em;
}
#comments {
	max-width: @content-max-width;
	margin: 0;
}

#commentform {
	#author,
	#email,
	#url {
		width: 100%;
		max-width: @content-max-width / 1.6;
		.box-sizing();
	}
	#comment {
		min-height: 10em;
		max-width: 100%;
		width: 100%;
	    .box-sizing();
	}
}
.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;

	.comment-content {
		padding-left: 2em;
	}
	.children {
		list-style: none;
		margin: 0 0 0.5em 2em;
	}
	.comment {
		margin: 0 0 1em;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		padding: 1em 0;
		//background: lighten(#deded5, 5%);
		.avatar {
			float: left;
			width: 1.5em;
			height: auto;
			margin: 0 0.5em 0 0;
		}
		time {
			margin: 0 0.3em;
		}
		cite {
			font-style: normal;
			font-weight: bold;
			
		}
		footer {
			margin-bottom: 1em;
		}
		.commentmetadata {
			display: inline;
			a {
				color: @secondary-text-color;
			}
		}
		.commentmetadata,
		.reply {
			font-size: @font-small;
			color: @secondary-text-color;
		}
		.reply  {
			padding-left: @font-small-em-size * 2;
		}
		&.author-comment {
			cite {
				background: #FFF9b3;
				padding: 0 2px;
			}
			//background: #EEE;
		}
		&:hover {
			.reply {
				
			}
		}
	}

}
#respond {
	padding: .5em 2em;
	background: darken(@content-background, 2%);
	.box-sizing();
	form {
		margin-top: 1.5em;
	}
}

// Alignment
.alignleft {
	display: inline;
	float: left;
	margin-right: .5em;
	margin-top: .1em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: .5em;
	margin-top: .1em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.aligncenter .wp-caption-text {
	text-align: center;
}

// Navigation
#nav-below {
	padding-bottom: 1em;
	display: block;
}
.nav-previous {
	float: left;
}
.nav-next {
	float: right;
}
// reset styles 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
  
// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
////////////////////////////////////////////////////////////////////
//
// Touchfolio Two Dimensional Slider Styles
//
// 	1. Preloader
// 	2. Video-related things
// 	3. Wrappers, image containers e.t.c
// 	4. Album name + count (1 of n)
// 	5. Collapsed slider styles 
//  6. Album info block (share, close project button)
//  7. Specific gallery page styles
//  
////////////////////////////////////////////////////////////////////









.two-dim-slider {
	position: relative;
	width: 600px;
	height: 600px;
	z-index: 1;



	////////////////////////////////////////////
	//
	//  1 Preloader
	//
	////////////////////////////////////////////
	.preloader-container {
		position: absolute;
		left: 50%;
		top: 50%;
		.preloader-spinner {
			width: 20px;
			height: 20px;
			margin-left: -10px;
			margin-top: -10px;
			background: @preloader-url;
		}
	}


	////////////////////////////////////////////
	//
	// 2 Video-related things
	//
	////////////////////////////////////////////
	a.play-button-container {
		position: absolute;
		left: 50%;
		top: 50%;
		display: block;
		border: 0;
		&:hover {
			opacity: .8;
			background: none;
			border: 0;
		}
	}
	.play-button {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		width: 64px;
		height: 64px;
		margin-left: -32px;
		margin-top: -32px;
		display: block;

		cursor: pointer !important;
		background: @sidebar-background;
		.rounded(32px);
		overflow: hidden;
		.transition(opacity, .3s);

		
		.play-button-icon {
			width: 64px;
			height: 64px;
			background: @sprite-url no-repeat -96px 0 transparent;
			display: block;
			float: left;
		}
		&.play-button-loading {
			.play-video-loading-icon {
				width: 64px;
				display: block;
				float: left;
				height: 64px;
				background: @preloader-url no-repeat center center transparent;
			}
			.play-icons-wrap {
				margin-left: -64px;
			}
		}

		.play-icons-wrap {
			width: 128px;
			margin: 0;
			display: block;
			margin-left: 0;
			.transition(all, 0.3s, cubic-bezier(0.235, 0.640, 0.565, 1.000));
		}
	}
	.back-to-list-button {
		position: absolute;
		z-index: 30;
		left: @gallery-padding;
		top: @gallery-padding + 8px;
		padding: 4px 8px 3px;
		background: @sidebar-background;
		display: block;
	}
	
	.video-overlay {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 26;
		bottom: 0;
		right: 0;
		display: none;

		.video-container {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: 3em; // border
			overflow: hidden;
		}

		.video-close-button {
			position: absolute;
			z-index: 30;
			right:  @gallery-padding;
			top:  @gallery-padding + 8px;
			padding: 4px 8px 3px;
			background: @sidebar-background;
			display: block;
			font-size: @font-small;
			
			
		}
	}
	.close-button {
		cursor: pointer;
		display: block;

		width: 32px;
		height: 32px;
		position: relative;
		.transition(all, .3s);

		.close-icon {
			margin: 0;
			width: 32px;
			height: 32px;
			background: @sprite-url no-repeat -64px -32px;
			background-color: @sidebar-background;
			display: block;
		}
	}




	////////////////////////////////////////////
	//
	// 3 Wrappers, images containers e.t.c
	//
	////////////////////////////////////////////
	.slider-wrapper {
		//position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
		zoom: 1;
		z-index: 20;
		padding: 0;

		// cursor: move; 
		// cursor: -webkit-grab;
		// cursor: -moz-grab;
		// cursor: -o-grab;
		// cursor: grab;
	}
	.drag-container {
		position: relative;
		width: 100%;
		height: 100%;

	}
	.album-meta,
	.item-meta {
		display: none;
	}
	.block {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		-o-transform-origin: 0;
		
		img.blocked-by-loop {
			visibility: hidden !important;
		}
	}
	.block-inside {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: 0; 
		overflow: hidden;
	}

	.top {
		top: -100%;
	}
	.bottom {
		top: 100%;
	}
	.left {
		left: -100%;
	}
	.right {
		left: 100%;
	}
	.last-block {
		background: none !important;
		img {
			visibility: hidden !important;
		}
	}




	////////////////////////////////////////////
	//
	// 4 Arrows navigation 
	//
	////////////////////////////////////////////

	.arrow-left a,
	.arrow-right a {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		.transition(none, 0s);
		&:hover {
			background: none;
			border: 0;
			color: @sidebar-text-color;
			//opacity: .8;
			.info-text.info-text-visible {
				visibility: visible;
				opacity: 1;
				color: @sidebar-text-color;
			}
		}
		&:active {

			.icon {
				//margin-top: 17px;
			}
		}
		.info-text {
			display: block;
			visibility: hidden;
			background: @sidebar-background;
			white-space: nowrap;
			float: left;
			position: absolute;
			left: 32px;
			top: 8px;
			padding: 7px 8px 6px;
			font-size: 12px;
			line-height: 18px;
			opacity: 0;
			.transition(all, .3s);
		}
	}
	.arrow-right a {
	
		.info-text {

			left: auto;
			right: 32px;
			&.info-text-visible  {
				visibility: visible;
				opacity: 1;
			}
		}
	}


	.arrow-left, 
	.arrow-right {
		position: absolute;
		top: 50%;
		
		z-index: 25;
		display: block;
		width: 48px;
		height: 48px;
		
		margin: 0;
		.icon-bg {
		//	margin: 16px;
			width: 48px;
			height: 48px;
			display: block;
			position: relative;
			margin-top: -24px;
			cursor: pointer;
			
			

			.icon {

				float: left;
				display: block;
				margin: 8px 0 0 8px;
				width: 32px;
				height: 31px;
				background: @sprite-url;
				background-color: @sidebar-background;
				.transition(all, .3s);
			}
		}

		&.disabled-arrow {
			.icon {
				opacity: 0.2;
			}
		}
	}
	.arrow-left {
		left: @gallery-padding;
		.icon-bg {
			.icon {
				margin-left: 0;
				background-position: -32px -32px;
			}
		}
		&.prev-album-arrow .icon-bg .icon {
			
			background-position: -32px 0;
		}
		
	}
	.arrow-right {
		right: @gallery-padding;
		
		.icon-bg {
			.icon {
				margin-left: 16px;
				background-position: 0 -32px;
			}

		}
		&.next-album-arrow .icon-bg .icon {
			background-position: 0 0;
		}
	}
	
	
	
	////////////////////////////////////////////
	//
	// Album name + count (1 of n)
	//
	////////////////////////////////////////////		
	.slider-album-indicator {
		position: absolute;
		z-index: 23;
		color: @sidebar-text-color;
		width: auto;
		//padding: 0 0 1em 0;
		bottom: 24px + @gallery-padding;
		right: @gallery-padding;
		font-weight: bold;

		.album-info-text {
			padding: 5px 16px;
			font-size: 14px;
			background:@sidebar-background;
			height: 22px;
			float: right;
			padding: 5px 8px 5px 12px;
			.transition(opacity, .25s);
			&.album-text-hidden {
				opacity: 0;
			}
		}
		a.album-name-indicator {
			margin-right: .5em;
		}
		.item-count-indicator {
			font-size: @font-smallest;
			text-shadow: 0 1px 1px rgba(0,0,0,.1);
		}
	}
		
		
		
	
	////////////////////////////////////////////
	//
	// Collapsed slider styles
	//
	////////////////////////////////////////////
	&.smaller-collapsed-slider {
		.slider-album-indicator {
			bottom: 8px + @gallery-padding;
			.album-info-text {
				display: block !important;
				width: 32px;
				height: 32px;
				float: right;
				text-indent: -9999px;
				background: @sprite-url no-repeat -64px 0 transparent;
				background-color: @sidebar-background;
				//margin: 28% auto;
				text-decoration: none;
				border: 0;
				padding: 0;

			}
			.item-count-indicator {
				display: none;
			}
			.album-info-block { 
				display: block;

			}
		}

		.video-overlay .video-container {
			margin: 0;
		}
	}
	.grab-cursor {
		cursor:url(img/grab.png) 8 8, move; 
	}
	.grabbing-cursor{ 
		cursor:url(img/grabbing.png) 8 8, move;
	}

	.auto-cursor{ cursor:auto; }
	.slider-album-indicator {
		padding-bottom: 0 !important;
	}

}




////////////////////////////////////////////
//
// Album info block (share, close project button)
//
////////////////////////////////////////////
.album-info-block {
	-webkit-text-size-adjust:none;
	position: absolute;
	display: none;
	overflow: auto;
	z-index: 50;

	width: 65%;
	padding: 0;

	background: @sidebar-background;
	
	right: 0;
	bottom: 24px + @gallery-padding;
	max-width: 40em;
	
	color: @sidebar-text-color;

	.bottom-bar {
		width: 100%;
	}
	.info-container {
		width: auto;
		height: auto;
		padding: 1.5em;
	}
	h3.album-title {
		margin-top: 0;
	}
	.album-content {
		font-size: @font-small;
		line-height: @font-small-line-height;
		margin: 0;
		max-height: 280px;
		overflow: auto;
	}
}

.img-desc-block {
	-webkit-text-size-adjust:none;
	position: absolute;
	overflow: auto;
	z-index: 50;

	padding: 0;

	background: @sidebar-background;
	
	left: 0;
	top: 0px + @gallery-padding;
	max-width: 65%;
	
	color: @sidebar-text-color;

	.info-container {
		width: auto;
		height: auto;
		padding: 1.0em;
	}
	h3.album-title {
		margin-top: 0;
	}
	.img-content {
		font-size: @font-small;
		line-height: @font-small-line-height;
		margin: 0;
		max-height: 300px;
		overflow: auto;
	}
}



.close-project {
	position: relative;
	float: right;
	font-size: @font-small;
	line-height: 1.2em;
}
.share-project {
	margin-top: 1em;
}
a.pin-it-btn,
a.facebook-share-btn {
	width: 43px;
	height: 21px;
	background: @sprite-url no-repeat -192px 0 transparent;
	display: block;
	border: 0;
	cursor: pointer;
	float: left;
	opacity: .75;
	&:hover {
		opacity: 1;
		background-color: transparent;
	}
}
a.facebook-share-btn {
	margin-left: 8px;
	width: 53px;
	height: 20px;
	background-position: -192px -32px;
	display: block;
	border: 0;
}


.slider-data  {
	display: block;
	color: @sidebar-background;
	z-index: -1;
	overflow: hidden;
	a {
		color: @sidebar-background;
		border: 0;
		background: none;
	}
	.album-meta {
		display: block;
	}
	.two-dim-albums-list ul {
		//display: none;
	}
}
.action-notifier {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	background: @sidebar-background;
	z-index: 9999;
	white-space: nowrap;
	padding: 0 8px;
	font-size: 12px;
	-moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
	&.action-notifier-visible {
		opacity: 1;
	}
}


////////////////////////////////////////////
//
// Specific gallery page styles
//
////////////////////////////////////////////
body.ds-gallery-page {
	background: @sidebar-background;
}
.ds-gallery-page {
	height: 100%;
	overflow: hidden;
	#main-wrap {
		border-color: transparent;
	}
	#page, #main {
		height: 100%;
		float: none;
		margin: 0;
	}
	.main-header {
		position: relative;
		background: @sidebar-background;
		overflow-y: auto;
		height: 100%;
		float: left;
		&::-webkit-scrollbar {
			background:fadeout(@menu-item-color, 90%);
			width:8px;
			height:8px;
		}
		&::-webkit-scrollbar-thumb {
			background-color:fadeout(@menu-item-color, 80%);
 		}
		&::-webkit-scrollbar-thumb:hover {
			background-color:fadeout(@menu-item-color, 70%);
		}
	}
	#primary {
		height: 100%;
		//overflow: hidden;
		padding: 0;
	}
	#content {
		height: 100%;
	}
	.push {
		display: none;
	}
	.two-dim-slider {
		left: @sidebar-width-full;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		padding: @gallery-padding;
		width: auto;
		height: auto;

		overflow: hidden;
	}
	.mouse-follow-cursor {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999;
		background: @sidebar-background;
		color: @menu-font-color;
		font-size: 13px;
		padding: 2px 4px;
		white-space: nowrap;
	}
	// todo
	// .instructions-container {
	// 	display: block;
	// 	position: absolute;
	// 	left: 50%;
	// 	top: 50%;
	// 	z-index: 150;
	// 	.transition(all, .5s, ease-out);
	// 	opacity: 0;
	// 	.scale(1.1);
	// 	&.instructions-visible {
	// 		opacity: 1;
	// 		.scale(1);
	// 	}
	// }
	// .instructions {
	// 	padding: .5em;
	// 	width: 15em;
	// 	height: auto;
	// 	margin-left: -8em;
	// 	margin-top: -1em;
	// 	background: @sidebar-background;
	// 	text-align: center;
	// }
}



body {
	font-family: @body-font;
	color: @text-color;
	font-size: 100%;
	line-height: @body-font-line-height;
}


// links 
a, 
a:link, 
a:visited,
a:active,
a:focus {
	color: @link-color;
	text-decoration: none;
	outline: none;
	//.transition(all, .2s);
	-webkit-tap-highlight-color: rgba(0,0,0,0.1);
}
a:hover {
	color: @link-hover-color;
	background: fadeout(@link-hover-color, 95%);
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}
a:hover,
a:active {  
	outline: 0;
}

// text selection
::-moz-selection, ::selection{
	background: @selection-bg-color;
	color: @selection-text-color;
	text-shadow:none;
}


p, 
li, 
blockquote,
.text-block {
	a {
		border-bottom: 1px solid @link-color;
		border-bottom-color: fadeout(@link-color, 70%);
	}
	a:hover {
		border-bottom-color: @link-hover-color;
	}
}

.underlined {
	border-bottom: 1px solid @link-color;
	border-bottom-color: fadeout(@link-color, 70%);
}
.underlined:hover {
	border-bottom-color: @link-hover-color;
}

small {
	font-size: 0.75em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: @title-weight;
	font-family: @title-font;
}

h1 {
	font-size: 2.5em; 
	line-height: 1.1em;
}
h2 {
	font-size: 1.8em;
	margin: 1.05em 0 .55em;
	line-height: 1.2em;
}
h3 {
	font-size: 1.25em;
	margin: 1.1em 0 0.5em;
	line-height: 1.2em;
}
h4,h5,h6 {
	font-size: 1em;
	margin: 1.5em 0 0.5em;
}
p {
	margin-bottom: 1em;
	//width: auto;
	img {
		display: block;
		height: auto;
		width: auto;
		max-width: @content-large-image-max-width;
	}
}
ul, ol {
	margin: 0 0 1em 2em;
}
li {
	margin: 0 0 0.5em 0;
}
blockquote {
	margin: 1em 0 1em 2em;
}
pre {
	font-family: Courier, monospace;
	font-size: 0.75em;
	line-height: 1.2em;
}



// Form styling
input[type="submit"],
button,
.button {
	.rounded(4px);
	color: @content-background;
	font-family: @body-font;
	background:  @text-color;
	font-weight: bold;

	cursor: pointer;
	display: block;
	outline: none;
	padding: 0.75em 1.5em;
	position: relative;
	text-decoration: none;
	
	border: 0;
	.transition(background-color, 0.3s);
	&:hover {
		background: lighten(@text-color, 10%);
	}
	&:active {
		background: darken(@text-color, 10%);
	}
}
form {
	label {
		display: block;
		font-weight: bold;
		padding-bottom: 0.25em;
		margin: 0;
		font-size: @font-small;
		line-height: @font-small-line-height;
		cursor: pointer;
	}
	input, textarea {
		padding: @font-small-em-size / 2;
		font-size: @font-small;
		line-height: @font-small-line-height;
		border: 1px solid #999;
		margin: 0;
	}
}