@import 'reset.less';
@import 'grid.less';




//////////
// VARIABLES //
//////////

/*	Colors	*/
@backgroundColor: #4D4844;
@backgroundColorHome: #252525;
@backgroundColorAside: #D7DFC7;
@textCategoryColor: #372824;
@textAsideColor: #282424;
@textStandardColor: #E3DFC9;
@textLinkColor: #DBCFBD;
@textLinkHoverColor: darken(@textLinkColor, 10%);
@textFooterColor: #F0FCB4;
@navColor: #E3DFC9;
@navHoverColor: darken(@navColor, 10%);


/*	Sizes	*/
@body_font_size:14;
@body_line_height:14;

@factor_h1:10;
@factor_h2:6;
@factor_h3:4;
@factor_h4:1;
@factor_p:0;
@factor_small:-2;


@nav_font_size: 0px + @body_font_size;

@adjustFooterText: 15px;

@hrWidth: 750px;





//////////
// MIXINS //
//////////

.padding(@size: 10px) {
	padding: @size;
}

.align(@alignment: justify) {
	text-align: @alignment;
}

.rotate {
	-webkit-transform: rotate(90deg);	
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.hr {
	clear:both;
	width: @hrWidth;
	margin: 0 auto;
	overflow: hidden;
	
	&:before {
		content:url('../images/hr.png');
	}
}

.box-shadow {
	-moz-box-shadow: 0 0 5px #FFF;
	-webkit-box-shadow: 0 0 5px #FFF;
	box-shadow: 0 0 5px #FFF;
}




//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 52;
@gutter-width: 8;

// Remove the definition below for a pixel-based layout





////////////
// LAYOUT //
////////////

/*	Center main contents	*/
.centerContent {
	width: @_gridsystem-width;
	margin: 0 auto;
	overflow: hidden;
}


/*	Header	*/
header#top {
	.row(12);
	
		span {
			.column(9,12);
			#logo {
				margin: 80px 0 60px 0;
			}
		}
		
		aside {
			.column(3,12);
			background-color: @backgroundColorAside;
			color: @textAsideColor;
			min-height: 58px + 80px + 40px;
			padding: 25px 0 0 0;
			
			text-align: right;
			
			h1 {
				font-size: 23px;
				text-transform: lowercase;
				line-height: 1;
				padding: 0 20px;
			}
			
			h2 {
				padding: 0 20px;
				
				a {
					font-size: 12px;
					line-height: 1;
					color: @textAsideColor;
				}
			}
			
			p {
				padding: 0 20px;
				margin-top: 4px;
				margin-bottom: 4px;
				font-size: 11px;
				line-height: 1;
				color: @textAsideColor;
			}
		}
}


/*	Main Navigation	*/

nav {
	
	.row(12);
	
	section {
		.column(3,12);
		
		h4 {
			color: @textCategoryColor;
			font-size: 12px;
			padding: 2px 4px;
			margin-top: 8px;
			margin-bottom: 8px;
			text-transform: uppercase;
		}
		
		#art { background-color: @backgroundColorAside; }
		#objects { background-color: #F8DAB5; }
		#jewelry { background-color: #F7BE9F; }
		#under50 { 
			background-color: @backgroundColorAside;
			margin-bottom: 30px;
		}
		#archive {
			background-color: #BCAB93;
			span { text-transform: none; }
		}
		
		div { padding: 0; }
		
	}
	
	.item-list ul {
		margin: 0;
		
		li {
			padding-left: 8px;
			padding-bottom: 8px;
			margin: 0;
		}
		
		a.active {
			color: #F4FCCA;
			font-weight: bold;
			
			&:hover, &:visited { font-weight: bold; }
			&:hover { color: darken(#F4FCCA, 10%); }
			&:before {
				content: url(../images/arrow.png);
				margin-right: 4px;
			}
		}
	}
	
	a {
		text-decoration: none;
		color: @navColor;
		margin: 0;
		
		font-size: @nav_font_size;
		
		&:visited { color: @navColor; }
		&:hover { color: @navHoverColor; }
		
	}
	margin-bottom: 40px;
}

.view-gallery-for-homepage .item-list ul li {
	padding: 0;
	margin: 0;
	display: inline;
	list-style-type: none;
}

section.gallery {
	.row(12);
	
	img {
		.column(2,12);
		margin-bottom: 8px;
	}
}

section#intro {
	.column(12);
	
	p {
		font-size: 15px;
		margin: 18px 0 90px 0;
		
	}
}

section#content {
	.column(12);
	
	margin-top: 20px;
	margin-bottom: 90px;
	padding-top: 5px;
	
	p {
		font-size: 15px;
		margin: 18px 0 0 0;
		
	}
}

footer {
	.hr;
	
	.centerContent {
		.row(12);
		margin-left: ((@hrWidth - @total-width)/2) * 1px;
		
		small,
		p,
		div.search {
			.column(4,12);
			margin-top: 8px;
		}
		small {
			text-transform: lowercase;
			margin-top: @adjustFooterText;
			
			strong {
				color: @textFooterColor;
			}
		}
		p {
			text-transform: uppercase;
			.align(center);
			margin-top: @adjustFooterText;
			font-weight: bold;
			font-size: 13px;
			color: @textFooterColor;
		}
		div.search {
			.align(right);
			
			input[type=text] {
				width: 120px;
				padding: 2px;
			}
			
			input[type=submit] {
				text-transform: uppercase;
				background: none;
				border: 0;
				color: @textFooterColor;
				font-weight: bold;
				font-size: 12px;
				
				&:hover {
					color: lighten(@textFooterColor, 20%);
					cursor: pointer;
				}
			}
		}
	}
	margin-bottom: 70px;
}




/*	Body	*/

h1,
h2,
h3,
h4 {
	font-weight: bold;
}

ul.tabs.primary li a {
	color: @textCategoryColor;
	
	&:hover { color: darken(@textCategoryColor, 10%); }
}

input {
	padding: 3px 6px;
	background: #8c7a62;
	color: #2d2d2d;
	font-weight: bold;
	font-size: 9px;
	
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	border: 0;
	
	&:hover {
		background: #bcab93;
		color: #4d4d4d;
	}
	
	&:active {
		background: #8c7a62;
	}
}

#cart-form-products tr {
	background-color: inherit;
}

.cart-review {
	table, td, tr {
		background-color: inherit;
	}
}

table,
td,
tr,
tr.even,
tr.odd {
	background-color: inherit;
	
	tr,
	tr.even,
	tr.odd,
	td {
		padding: 8px;
	}
}

.front {
	.region-content {
		.field-name-body p {
			.column(12);
		}
	}
}

input#edit-preview.form-submit {
	display: none;
}




/*	PRODUCT CATEGORY PAGE	*/

.view-catalog-category-pages {
	> .view-content {
		> .views-row {
			.views-field-buyitnowbutton {
				line-height: 3;
				margin-left: 10px;
				margin-bottom: 40px;
			}
		}
	}
	
	
	.views-row {
		clear: both;
	}
	
	.views-field {
		display: inline;
		
		div, ul, li, p {
			display: inline;
			clear: none;
			margin: 0;
			padding: 0;
		}
		
		img {
			.column(3);
			padding: 2px;
			margin-bottom: 8px;
			margin-right: @gutter-width * 2px;
			.box-shadow;
		}
		
		a {
			font-weight: bold;
			font-size: 16px;
			text-decoration: underline;
			
			&:hover, &:active {
				text-decoration: none;
			}
		}
		
		p {
			.column(8);
			margin: 0;
			padding: 0;
			color: #fcf8f2;
		}
		
		span.productpage {
			font-weight: bold;
			font-size: 16px;
			line-height: 3;
			float: left;
		}
	}
	.views-field-sell-price {
		span.productpage {
			clear: both;
		}
	}
		
	div.views-field-buyitnowbutton {
		.column(8);
		margin: 0;
	}
}

.views-table {
	tr.odd,
	tr.even {
		border: none;
		padding-bottom: 40px;
	}
}


/*	PRODUCT PAGE	*/

.region-content {
	.product-info,
	.add-to-cart{
		width: @column-width * 3px;
		float: left;
		margin-top: 8px;
	}
	.product-info,
	.add-to-cart {
		text-align: right;
	}
}

.galleryformatter-blackbird {
	.column(9);
	float: left;
}

.galleryformatter-blackbird .gallery-thumbs {
	padding: 0;
	width: auto;
}


/*	CART PAGE	*/

div.messages.status {
	background-color: lighten(@backgroundColor, 5%);
}



/*	ADMIN PAGES	*/

div#block-system-user-menu {
	
	ul {
		text-align: center;
	}
	li.leaf {
		display: inline;
		margin: 16px 8px;
		font-size: 16px;
		font-weight: bold;
		
		a:hover { color: #FFFFFF; }
		a:active,
		a.active { color: #F7B49F; }
	}
}

.uc-order-history,
.sticky-table {
	thead {
		
		a,
		a:visited {
			margin: 16px 8px;
		}
	}
	
	td.active {
		background-color: inherit;
	}
}

.admin-list {
	font-size: 14px;
	color: #FFFFFF;
	
	a {
		font-size: 16px;
		font-weight: bold;
	}
}

.vertical-tabs-list {
	background-color: inherit;
	
	.vertical-tab-button {
		padding: 4px;
	}
	
	strong,
	.summary {
		color: #000000;
		line-height: 2;
	}
}

.node-product-form div#edit-actions {
	text-align: center;
	
	input {
		font-size: 16px;
		margin: 16px 8px;
		color: #FFFFFF;
	}
}

.field-edit-link,
.filter-help {
	display: none;
	
	#edit-field-top-level-category {
		display: block;
	}
}




//////////
// STYLES //
//////////

/*	Basic	*/
body { 
	background-color: @backgroundColorHome;
	font-family: Arial, "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif;
	color: @textStandardColor; 
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

body.html.not-front {
	background-color: @backgroundColor;
}


/*	Typographic Baseline Grid	*/

.font_size (@size) {
	font-size: 0em + (@body_font_size + @size) / @body_font_size;
}
.line_height (@size) {
	line-height: 0em + @body_line_height / (@body_font_size + @size);
}
.margin_top () {
	margin-top: 0;	
}
.margin_bottom (@size: 0) {
	margin-bottom: 0em + @body_line_height / (@body_font_size + @size);
}

body {
	font-size: 0px + @body_font_size;
	.line_height (@factor_p);
}
h1 {
	.font_size(@factor_h1);
	.line_height(@factor_h1);
	.margin_top;
	.margin_bottom(@factor_h1);
}
h2 {
	.font_size(@factor_h2);
	.line_height(@factor_h2);
	.margin_top;
	.margin_bottom(@factor_h2);
}
h3 {
	.font_size(@factor_h3);
	.line_height(@factor_h3);
	.margin_top;
	.margin_bottom(@factor_h3);
}
h4 {
	.font_size(@factor_h4);
	.line_height(@factor_h4);
	.margin_top;
	.margin_bottom(@factor_h4);
}
blockquote, h5, h6, iframe, label, p, pre, address, td, th, ul, ol, dl, dd, hr,
table {
	.font_size(@factor_p);
	.line_height(@factor_p);
	.margin_top;
	.margin_bottom(@factor_p);
}
small {
	.font_size(@factor_small);
	.line_height(@factor_small);
	.margin_top;
	.margin_bottom(@factor_small);
}


/*	Typography Standard Styles	*/

em {
	font-style: italic;
}

strong {
	font-weight: bold;
	color: @textStandardColor + #111;
}


/*	Blockquotes  */
blockquote {
	background-color: @backgroundColor - #111;
	margin: 0 0 20px;
	padding: 9px 20px 0 19px;
	border-left: 1px solid #ddd;

	cite {
		&:before {
			display: block;
			font-size: 700%;
			width: 75px;
			content: '\201C';
			float: left;
			height: 45px;
			margin-top: -10px;
			padding-top: 45px;
			margin-bottom: -50px;
		}
	}
}


/*	Links	*/
a,
a:visited {
	text-decoration: none;
	color: @textLinkColor;
	outline: 0;
}

a:hover,
a:focus {
	color: @textLinkHoverColor;
}


/*	Lists	*/
ul,ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 5px; }
li { line-height: @body_line_height - 5px; margin-bottom: 10px; }


/*	Images	*/

img.scale-with-grid { 
	max-width: 100%;
	height: auto;
}


/*	Site-wide Styles	*/

.transparent {
	background-color: rgba(255,255,255,0.85); /* white background, 85% opacity, children do not inherit */
}

// Selection

::-moz-selection {
	background: darken(@backgroundColor, 10%);
	color: #fff;
	text-shadow: none;
}
::selection {
	background: darken(@backgroundColor, 10%);
	color: #fff;
	text-shadow: none;
}

// Horizontal Rule
hr {
	border: solid #ddd;
	border-width: 1px 0 0;
	clear: both;
	margin: 0px + @body_line_height;
	height: 0;
}

// Alignment
.left { float: left; }

.right { float:right; }

.full { width: 100%; }

.justify {
	.align(justify);
}
.center {
	.align(center);
}