/////////////////
// Semantic.gs // for LESS: http://lesscss.org/
/////////////////

// Defaults which you can freely override
@gutter-width: 20;
@columns: 12;
@column-width: 60;

// Utility variable — you should never need to modify this
@_gridsystem-width: @main-width * 1px;

@main-width: 960;

// Set @total-width to 100% for a fluid layout
@total-width: 960;

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// @min-width: 960;
// @correction: 0.5 / @min-width * 100 * 1%;

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

body {
	.clearfix;
}

.row(@columns:@columns) {
	display: inline-block;
	width: @_gridsystem-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width); /* 960*((20+960)/960)=980 */
	margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1); 			/* 960*(((20*0.5)/960)*-1)=-10 */
	.clearfix;
}

// [bb] is @columns here even used?
.column(@x) {
	display: inline;  /* [bb] not sure why this is better than block, seems to work both ways */
	float: left;
	width: @_gridsystem-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width); /* 960*((((20+60)*X)-20)/960)=940 */
	margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);									/* 960*((20*.05)/960)=10 */
}

// [bb] alternative to .row() - changing margin
.nested-column(@x) {
  /*display: inline;
	float: left;*/
	width: @total-width*(((@gutter-width+@column-width)*@x) / @_gridsystem-width);  /* 960*(((20+60)*X)/960)=960 */
	margin: 0 auto;
}

#content {
	.column(12);
	margin:0;
	}
.one-sidebar.sidebar-first #content, .one-sidebar.sidebar-second #content {
	.column(8);
	}
.one-sidebar.sidebar-first #content .section, .one-sidebar.sidebar-second #content .section {padding-right:30px;}
.two-sidebars #content {
	.column(6);
	}	
aside#sidebar-first {
	.column(3);
	}
aside#sidebar-second {
	.column(4);
	}
.no-sidebars #content > .section {padding-right:0;}

#block-views-welcome-block {.column(4);}
#block-views-our-view-block {.column(4);}
.block-newsletter-signup {.column(4);}
#block-views-latest-news-block {.column(4);}
#block-views-categories-block {.column(3); margin-left:0;}
#block-views-articles-block {.column(3);}
#block-views-archive-block {.column(3);}

.view-services .view-content .views-row {.column(4);}

.view-fashion .views-row {.column(3);}

.view-collections .view-content .views-row {.column(4)}

.alpha { margin-left: 0;}
.omega { margin-right: 0;}
.page-portfolio .view-portfolio .views-row {.column(3);}
.page-portfolio-3-cols .view-portfolio .views-row {.column(4);}
.portfolio-3-cols .views-row {.column(4);}
.page-portfolio-2-cols .view-portfolio .views-row {.column(6);}
.portfolio-2-cols .views-row {.column(6);}

.page-portfolio-1-col .view-portfolio .views-row {.column(12);}
.page-portfolio-1-col .view-portfolio .views-row .views-field-field-portfolio-image {width:600px;}

.page-contacts .pane-contact {.column(8);}
.page-contacts .pane-block-1 {.column(4);}

////////////////////////////////////////////////////////////////////////////////////////////////////





/* IPad in portrait (width:768px) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#page {width:767px;}
	.page {width:747px;}
	#superfish-1 > li {margin-right:20px;}
	#block-block-6 .content .title {font-size:20px;line-height:24px;}
	.view-services .view-content .views-row {.column(3);}
	.view-services .view-content {padding-left:25px;}
	#block-views-welcome-block {.column(4);}
	#block-views-our-view-block {.column(5);}
	#block-views-latest-news-block {clear:both; .column(8); margin-right:0;}
	.view-latest-news .views-row .views-field-field-blog-image {width:120px;}
	#block-views-categories-block {.column(3); margin-left:0;}
	#block-views-articles-block {.column(3);}
	#block-follow-site {clear:both; float:left;}
	#block-block-5 {clear:both; float:left;}
	.view-fashion .views-row {.column(8); margin-bottom:25px; overflow:hidden;}
	.view-fashion .views-row .views-field-field-blog-image {width:150px; float:left; margin:0 20px 5px 0;} 
	.view-collections .view-content .views-row {.column(4);}
	.view-collections .views-row .views-field-field-portfolio-image {width:120px;}
	.page-portfolio .view-portfolio .views-row {.column(3);}
	#content {.column(9)}
	.page-portfolio-3-cols .view-portfolio .views-row {.column(3);}
	.page-portfolio-2-cols .view-portfolio .views-row {.column(4);}
	.page-portfolio-1-col .view-portfolio .views-row {.column(9);}
	.page-portfolio-1-col .view-portfolio .views-row .views-field-field-portfolio-image {width:400px;}
	.one-sidebar.sidebar-first #content, .one-sidebar.sidebar-second #content {
	.column(6);
	}
	aside#sidebar-second {
		.column(3);
		}
	.view-recent-posts .views-row .views-field-field-blog-image {
		width:160px;
		float:none;
		margin-bottom: 36px;
		margin-bottom:12px;
		}	
	.page-contacts .pane-contact {.column(6);}
	.page-contacts .pane-block-1 {.column(3);}
	.region-content-bottom {margin:0;}
	.indented {margin:0 !important;}
}



/* IPhone portrait/Android phones (width:320px) */
@media only screen and (max-width: 767px) {	
	.view-services .view-content .views-row {.column(4); margin-bottom:20px;}
	#page {width:320px;}
	.page {width:300px;}	
	#block-block-6 .content p {margin:0;}
	#block-block-6 .content .title {font-size:15px;line-height:18px;}
	#block-block-6 .content .join-us {padding: 15px 20px 18px; margin-left:15px;}
	#block-block-6 .content .extra {overflow:visible;}

	#superfish-1,#block-superfish-1 {float:none;}
	#superfish-1 > li {text-align:center; float:none; margin:0 0 10px 0;}
	#superfish-1 > li ul {
		position:relative !important;
		top:0 !important;
		left:0 !important;
		width:100% !important;
		padding:15px 0;
		}
	#superfish-1 li ul li {float:none !important; text-align:center;}	
	#superfish-1 > li ul li a {text-align:center; padding-bottom:5px;}	
	#superfish-1 > li ul li a:hover {background:url(../images/menu-hover.gif) 0 bottom repeat-x;}	
	.section-1 .col1,.section-1 .col2 {float:none;}
	#block-views-welcome-block .content {padding-right:0;}
	#block-views-welcome-block {margin-bottom:20px;}
	#block-views-our-view-block {margin-bottom:20px;}
	.view-slider .views-field-body-1 {display:none !important;}
	.view-slider .flex-nav-container .flex-control-nav li a {width:20px;}
	#block-follow-site {float: none;
margin: 0 auto;
width: 37px;}
	#block-block-5 {float:left;}
	#block-views-categories-block {.column(3);}
	.section-1 .col1 {margin-bottom:15px;}
	.view-fashion .views-row {.column(4); margin-bottom:25px;}
	.view-collections .views-row .views-field-field-portfolio-image {width:120px;}
	#content {.column(4)}
	.page-portfolio .view-portfolio .views-row {.column(4);}
	.page-portfolio-2-cols .view-portfolio .views-row {.column(4);}
	.page-portfolio-1-col .view-portfolio .views-row {.column(4);}
	.page-portfolio-1-col .view-portfolio .views-row .views-field-field-portfolio-image {width:290px; float:none; margin-bottom:15px;}
	.page-contacts .pane-contact {margin-bottom:30px;}
	.page-contacts .pane-contact {.column(4);}
	.page-contacts .pane-block-1 {.column(4);}
	#contact-site-form {padding-right:0;}
	#contact-site-form input.form-text {width:85%;}
	.one-sidebar.sidebar-first #content, .one-sidebar.sidebar-second #content {.column(4);}
	article.comment .user-picture {display:none;}
	.region-content-bottom {margin:0;}
	.indented {margin:0 !important;}
.view-recent-posts .views-row .views-field { overflow: visible; }
}



/* IPhone landscape/Galaxy Tab(width:480px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#superfish-1,#block-superfish-1 {float:none; overflow:hidden;}
	#superfish-1 > li {text-align:center; float:none; margin:0 0 10px 0;}
	#superfish-1 > li ul {
		position:relative !important;
		top:0 !important;
		left:0 !important;
		width:100% !important;
		padding:15px 0;
		}
	#superfish-1 > li ul li {float:none; text-align:center;}	
	#superfish-1 > li ul li a {text-align:center; padding-bottom:5px;}	
	#superfish-1 > li ul li a:hover {background:url(../images/menu-hover.gif) 0 bottom repeat-x;}	
	#page {width:480px;}
	.page {width:460px;}	
	.section-1 .col1,.section-1 .col2 {float:none;}
	#block-block-6 .content p {margin:0;}
	#block-block-6 .content .title {font-size:20px;line-height:24px;}
	.view-services .view-content .views-row {.column(2);}
	.view-services .views-row .views-field-body {font-size:15px; line-height:18px;} 
	.view-services .views-row .views-field-body .desc {font-size:12px; line-height:15px;} 
	#block-views-welcome-block {.column(6); margin-bottom:25px;}
	#block-views-welcome-block .content {padding-right:0;}
	#block-views-our-view-block {.column(6); margin-bottom:25px;}	
	.view-latest-news .views-row .views-field-field-blog-image {width:120px;}
	#block-views-latest-news-block {.column(6)}
	.view-slider .flex-nav-container .flex-control-nav li a {width:30px;}
	#block-views-categories-block {.column(3); margin-left:0;}
	#block-views-articles-block {.column(3); margin-right:0;}
	#block-follow-site {float:left; margin-left:20px;}
	#block-block-5 {float:left; margin-left:20px;}
	.section-1 .col1 {margin-bottom:15px;}
	.view-fashion .views-row {.column(3); margin-bottom:25px;}
	.view-collections .view-content .views-row {.column(6);}
	.page-portfolio .view-portfolio .views-row {.column(3);}
	div#content {.column(6)}
	.page-portfolio-3-cols .view-portfolio .views-row {.column(3);}
	.page-portfolio-2-cols .view-portfolio .views-row {.column(3);}
	.page-portfolio-1-col .view-portfolio .views-row {.column(6);}
	.page-portfolio-1-col .view-portfolio .views-row .views-field-field-portfolio-image {width:250px; margin-bottom:5px; float:left;}
	aside#sidebar-second {.column(6);}
	
	.page-contacts .pane-contact {.column(6);}
	.page-contacts .pane-block-1 {.column(5);}
	.page-contacts .pane-contact {margin-bottom:30px;}
	.one-sidebar.sidebar-first #content, .one-sidebar.sidebar-second #content {.column(6);}
	article.comment .user-picture {display:block;}
	#block-views-archive-block {margin-left:0;}
	.indented {margin:0 !important;}
.view-recent-posts .views-row .views-field { overflow: visible; }
}