/*---:[ copyright notice ]:-----------------------------------------------------

The CSS, JavaScript, and images contained in Thesis are all released under the
Thesis Proprietary Use License and cannot be redistributed. Doing so will
result in termination of membership with DIYthemes.

The custom.css file and any images in the custom images folder do NOT fall
under the Thesis Proprietary Use License. The end user determines the license
that should be applied here (if applicable).

The jscolor color picker script and associated images do NOT fall under the
Thesis Proprietary Use License and are free for use as determined by the GNU
Lesser GPL.

For more information on Thesis licensing and the Terms of Service, please see
the terms_of_service.txt file included in this package.

------------------------------------------------------------------------------*/


@gutter: 10px;
@grid: 24;
@columns: 1;
@totalWidth: 960px;
@fullWidth: 970px;
@columnWidth: (@totalWidth - (@gutter * @grid)) / @grid;
 


@headerWidth: 18;
@headerPrepend: 0;
@headerAppend: 0;

@heroWidth: 18;
@heroPrepend: 0;
@heroAppend: 0;
@heroOverlayWidth: 8;

@vertNavWidth: 6;
@vertNavPrepend: 0;
@vertNavAppend: 0;

@featurePrepend: 0;
@featureWidth: 4;
@featureAppend: 0;

@teaserTopPrepend: 0;
@teaserTopColumns: 4;
@teaserTopAppend: 0;

@leftRightContentWidth: 20;

@contentWidth: 20;
@sidebarWidth: 12;
@sidebarColumnsWidth: 6;

@oneSidebarContentWidth: 18;
@oneSidebarWidth: 12;

@sidebarAppend: 0;
@sidebarPrepend: 0;
			
@oneSidebarAppend: 4;
@oneSidebarPrepend: 4;

@contentOnlyWidth: 24;

@productCatBlock: 8;
@productCatBlockPrepend: 0;
@productCatBlockAppend:	0;

@productCatHorizontal: 12;
@productCatHorizontalPrepend: 0;
@productCatHorizontalAppend: 0;

@blockquote: 1 ;

@teaserBottomPrepend: 0;
@teaserBottomColumns: 18;
@teaserBottomAppend: 0;

@footerTopPrepend:  0;
@footerTopColumns: 4;
@footerTopAppend:  0;

@footerBottomPrepend: 0;
@footerBottomColumns: 6;
@footerBottomAppend: 0;


@bFontSize: 12px;
@bLineHeight: 1.3em;
@vRhythm: @bFontSize * @bLineHeight;
 


@headingOne: 1.75em;
@headingTwo: 1.75em;
@headingThree: 1.75em;
@heroHeading: 1.75em;
@heroBody: 1em;
@intro: 1em;
@body: 1em;
@featureHeading: 1.75em;
@featureText: 1em;
@teaserHeading: 1.75em;
@teaserText: 1em;
@footerHeading: 1.75em;
@footerText: 1em;
@navigation: 10px;
@footerNavigation: 0.75em;
@callToAction: 1em;

/*---:[ Less functions ]:---*/	
.gridFunction( @numColumns: @columns ) { width: (@columnWidth * @numColumns) + (@gutter * (@numColumns - 1)); }
.gridFunctionNoMargin( @numColumns: @columns ) { width: (@columnWidth * @numColumns) + (@gutter * (@numColumns - 1) + 20); }
.prependFunction( @numColumns: @columns ) { @thisWidth: @columnWidth + @gutter; margin-left: (@thisWidth * @numColumns) ;}
.appendFunction( @numColumns: @columns ) { @thisWidth: @columnWidth + @gutter; margin-right: (@thisWidth * @numColumns) ;}
.rhythmFunction ( @fontSize: 1em ) {@thisRhythm: @bLineHeight / @fontSize; font-size: @fontSize; line-height: @bLineHeight; margin: 0 0 (@thisRhythm / 2) 0; padding: (@thisRhythm / 4) 6px;}

/*-- reset --*/
body {font-size: 75%;}
html>body {font-size: @bFontSize;}

#container, .fullWidth {width: (@fullWidth); margin: auto;}
.fullWidth {clear: both;}
#page {/*overflow: hidden;*/}
.column { margin-left: @gutter; margin-bottom: @bLineHeight; float: left; display: inline; }
#content, .sidebar .column {float: left; display: inline;}

/* Widget areas */
#header { .gridFunctionNoMargin( @headerWidth ); .prependFunction ( @headerPrepend ); .appendFunction ( @headerAppend ); /*overflow: hidden;*/}

#hero { .gridFunctionNoMargin( @heroWidth ); .prependFunction ( @heroPrepend ); position: relative; color: #f5f5f5; /* height: 200px */ }
#hero .column{margin: 0;}
#hero .widget_text,
#hero .textoverlay { .gridFunction( @heroOverlayWidth ); position: absolute; top: 0; left: 0; margin-left: 0; margin-bottom: 0; /* background: rgba(0, 0, 0, 0.5); */ height: 100%; z-index: 2; overflow: hidden;}

#verticalNav ul.menu li a { .gridFunction( @vertNavWidth ); }
#verticalNav { .prependFunction ( @vertNavPrepend ); .appendFunction ( @vertNavAppend ) }

#feature .column { .gridFunction( @featureWidth ) }
#feature .column.firstChild { .prependFunction ( @featurePrepend ) }
#feature .column.lastChild { .appendFunction ( @featureAppend ) }

#teaserTop .column { .gridFunction( @teaserTopColumns ) }
#teaserTop .column.firstChild { .prependFunction ( @teaserTopPrepend ) }
#teaserTop .column.lastChild { .appendFunction ( @teaserTopAppend ) }

#content { .gridFunction( @contentWidth ); margin-left: @gutter; margin-bottom: @bLineHeight; }
#sidebars { .gridFunction( @sidebarWidth ); margin-bottom: @bLineHeight; .appendFunction (@sidebarAppend);  .prependFunction ( @sidebarPrepend ); }
#sidebars .sidebar,
.sidebarLeftRight .right .sidebar,
.sidebarLeftRight .left .sidebar { .gridFunction( @sidebarColumnsWidth ); float: left;}

#pCatalogue {clear: both;}
// #pCatalogue a.callToAction {text-align: center; display: block; float: right; padding: 3px 6px;}
#pCatalogue .productBlock  { .gridFunction( @productCatBlock )  }
#pCatalogue .productBlock.firstChild { .prependFunction ( @productCatBlockPrepend ) }
#pCatalogue .productBlock.lastChild { .appendFunction ( @productCatBlockAppend ) }

#pCatalogue .productBlock h3 {/* display: block; padding: 3px 0 3px 2px; width: @productCatBlock; */}

#pCatalogue .entry {overflow:hidden;}

#pCatalogue .productHorizontal { .gridFunction( @productCatHorizontal ); position: relative; .prependFunction ( @productCatHorizontalPrepend ); .appendFunction ( @productCatHorizontalAppend ); }
#pCatalogue .productHorizontal .entry {/* position: absolute; top: 15px; left: 15px; width: 150px; height: 130px; overflow: hidden;  */ }
#pCatalogue .productHorizontal .entry img {display: block;}
#pCatalogue .productHorizontal h3, #pCatalogue .productHorizontal p {/* float: left; margin-left: 190px; */}
#pCatalogue .productHorizontal h3 { /* width: @productCatHorizontal - 190px; */}

.left {float: left;}
.right {float: right;}
.left .sidebar {.gridFunction( @oneSidebarWidth ); .appendFunction (@oneSidebarAppend); .prependFunction ( @oneSidebarPrepend );  }
.right .sidebar {.gridFunction( @oneSidebarWidth); .appendFunction (@oneSidebarAppend);  .prependFunction ( @oneSidebarPrepend ); }

blockquote { .prependFunction ( @blockquote ) }

.sidebarLeftRight #content { .gridFunction( @leftRightContentWidth ); margin-left: @gutter; margin-bottom: @bLineHeight; }

.sidebarLeft #content { .gridFunction( @oneSidebarContentWidth ); margin-left: @gutter; margin-bottom: @bLineHeight; }
.sidebarRight #content { .gridFunction( @oneSidebarContentWidth ); margin-left: @gutter; margin-bottom: @bLineHeight; }

.noSidebars #content { .gridFunction( @contentOnlyWidth ); clear: left; margin-left: @gutter; margin-bottom: @bLineHeight; }

#teaserBottom {clear: both;}
#teaserBottom .column { .gridFunction( @teaserBottomColumns ) }
#teaserBottom .column.firstChild { .prependFunction ( @teaserBottomPrepend ) }
#teaserBottom .column.lastChild { .appendFunction ( @teaserBottomAppend ) }

#footerTop .column { .gridFunction( @footerTopColumns ) }
#footerTop .column.firstChild { .prependFunction ( @footerTopPrepend ) }
#footerTop .column.lastChild { .appendFunction ( @footerTopAppend ) }

#footerBottom .column { .gridFunction( @footerBottomColumns ) }
#footerBottom .column.firstChild { .prependFunction ( @footerBottomPrepend ) }
#footerBottom .column.lastChild { .appendFunction ( @footerBottomAppend ) }

img {margin-bottom: 7px;}
img.alignleft, img.left {margin: 7px 6px;}

div > img { margin: 0 } /* remove margin for images like hero */

/* Selfclear */


/* Typography */
h4, h5, h6, p, 
#content li,
#teaserTop li,
#teaserBottom li,
#feature li,
#hero li,
.sidebar ul li ul li,
.sidebar ul li ol li,
#teaserBottom ul li,
#teaserBottom ol li,
address {.rhythmFunction( @body );}
#content p:first-child {.rhythmFunction( @intro );}
#pCatalogue a.callToAction { /* .rhythmFunction( @callToAction ); */ display: block; }
h1 {.rhythmFunction( @headingOne );}
h2 {.rhythmFunction( @headingTwo );}
h3 {.rhythmFunction( @headingThree );}
a.callToAction { .rhythmFunction(@callToAction) }

.column #content {margin-bottom: @vRhythm;}

/* Hero typography */
#hero h1,
#hero h2,
#hero h3 {.rhythmFunction( @heroHeading ) }
#hero .textwidget,
#herp p,
#hero li {.rhythmFunction( @heroBody ) }

#feature h1,
#feature h2,
#feature h3 { .rhythmFunction( @featureHeading ); }
#feature .textwidget,
#feature p
#feature li {.rhythmFunction( @featureText ); }
#teaserTop h1,
#teaserTop h2,
#teaserTop h3 { .rhythmFunction( @teaserHeading ); }
#teaserTop .textwidget,
#teaserTop p,
#teaserTop li { .rhythmFunction( @teaserText );}
#teaserBottom h1,
#teaserBottom h2,
#teaserBottom h3 { .rhythmFunction( @teaserHeading ); }
#teaserBottom .textwidget,
#teaserBottom p,
#teaserBottom li { .rhythmFunction( @teaserText ); }
#footerTop h1,
#footerTop h2,
#footerTop h3 { .rhythmFunction( @footerHeading ); }
#footerTop .textwidget,
#footerTop p,
#footerTop li { .rhythmFunction( @footerText ); }
#footerBottom h1,
#footerBottom h2,
#footerBottom h3 { .rhythmFunction( @footerHeading ); }
#footerBottom .textwidget,
#footerBottom p,
#footerBottom li { .rhythmFunction( @footerText ); }

/* Navigation typography */
ul.menu li a, .widget_pages ul a { font-size: @navigation; }
#footer ul.menu li a { font-size: @footerNavigation; }

/* Contact forms */
form p {}
input, textarea {}
input.wpcf7-submit {}

/* Product Catalogue */
#pCatalogue h3 {font-size: @headingThree; line-height: 1.3em; /* margin: 0 0 15px 0; */}