/*
#	MEGO Inc | http://www.mego.com.vn
#	Author Duong Hoai Duc, Hoai Thanh.
#	LESS file
	------------------	*/
@base-url: "http://www.damvinhhung.ws/alphacms/themes/dvh_html5";
//@import '../css/reset.less';
//@import '../css/demo.less';
@import '../css/styles.less';
@import '../css/alphacms.less';
@import '../css/grid.less';

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

// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60;
@gutter-width: 40;
// Remove the definition below for a pixel-based layout
@total-width: 100%;

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

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/

/*	Typography presets
	------------------	*/
.gigantic {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -1px;
}
h1, h2, h3, h4, h5, h6 {
	color: @hTagColor;
	font-family: @fontFamily;
	font-weight:lighter;
	line-height: 1.2;
}
.huge, h1 {  font-size:2.25em;  /* 16x2.25=36 */ letter-spacing: -1px; }
.large, h2 { font-size:1.5em;   /* 16x1.5=24 */ }
.bigger, h3 { font-size:1.125em; /* 16x1.125=18 */ }
.big, h4 { font-size:0.875em; /* 16x0.875=14 */ }
h5 { font-size: .83em; font-weight: bolder;}
h6 { font-size: .75em; font-weight: bolder;}

/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */
/* base-url
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
*/
body {
	/*width: 896px;
	padding: 72px 48px 84px;
	background: rgb(232,232,232);
	color: rgb(60,60,60);*/
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	background: url('../images/bgheader.jpg') center top no-repeat, url('../images/bg_footer.jpg') center bottom no-repeat, url('../images/noise_pattern_with_crosslines.png'), #FFF;	
}
div.row {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
div.center {
	width: 960px;
	margin: 0 auto;	
}
#navtop {
	background: @subgradient;
	font-size: smaller;
	height: 20px;
		#nav {width: 960px; margin: 0 auto;  overflow: hidden;}
}
header#top {
	/*margin-bottom: 1em;*/
	margin: 0;
	background: none ;/*#CC0000*/
	overflow: hidden;
		#logo {.column(12);
		background:url('../images/logo.png') no-repeat 30% 0;}
		#hotline {.column(8); font-size: 185%;
padding: 40px 0;
color: #F00;
line-height: 1em;
.text-shadow;}
}
#midle {
	background: @bgmidle; overflow: hidden;
		#bannertop {
			width: 960px;}
}
/* main column & sidebar*/
#maincontent {background: #FFF; overflow: hidden; padding-bottom: 30px; .shadow (0.5px 2px 4px); .border-radius (0 0 10px 10px);}
#main {
	.column(9);
	#custom {-webkit-column-count: 2;-webkit-column-count: 2;}
}
#main1 {
	.column(12);
	#custom {-webkit-column-count: 2;}
}
#sidebar {
	.column(3);
}
#subsidebar {
	.column(3);
}
footer {
	background: @subgradient;
	overflow: hidden;
	margin-top: 30px;
	padding: 30px 0px;
	text-align: center;
	font-size: smaller;
		#copyright { 
			 border-top: 1px solid @borderColor; padding-top: 40px;
				span{
					position:relative;
					/*top:-20px;*/
				}
		}
}


/*##################################
	eCommerce Module
##################################*/
.catalogList {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(4); margin-bottom: 10px;}
		li#subcatalog {.column(3); margin-bottom: 10px; font-size: @smallFontSize;}
	}
}
.productList {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(3); min-height: 255px;
			.itemlist {min-width: 160px; height: 185px; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 2px);}
			.info {font-size:@smallFontSize;
				.itemTitle {color: @mainColor;}
			}			
		}
	}
}
#productdetail {
	.avatar {.column(7); padding: 10px 0; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 1px);}
	.info {.column(5);}
	.itemlist {min-width: 95px; height: 90px; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 2px);}
	#tabs {
		ul > li {font-size: @smallFontSize;}
	}
	.line_dot_bottom {
	border-bottom: 1px dotted #C8C8C8;
	height: 1px;
	clear: both;
	margin: 5px 0;}
}
#more_item {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(2);}
	}
} 

/* --- Define layout --*/
/*		Default Layout: 1440px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1440px: 32px. (1423) or (1328)
-------------------------------------------------------------------------------*/
@media only screen and (min-width: 1240px){
	body {
		width: 100%;
	}
div.row {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
div.center {
	width: 1200px;
	margin: 0 auto;
	
}
#navtop {
	background: @subgradient;
	font-size: smaller;
	height: 20px;
		#nav {width: 1200px; margin: 0 auto; /*background: @subgradient;*/ overflow: hidden;}
}
header#top {
	/*margin-bottom: 1em;*/
	margin: 0;
	background: none;
	overflow: hidden;
		#logo {.column(12);}
		#hotline {.column(8); font-size: 185%;
padding: 40px 0;
color: #F00;
line-height: 1em;
.text-shadow;}
}
#menu {background: none; /*@bgmidle*/}
#midle {
	background: @bgmidle; overflow: hidden;
		#bannertop {
			width: 1200px; clear: both;}
}
/* main column & sidebar*/
#maincontent {background: #FFF; overflow: hidden; padding-bottom: 30px; .shadow (0.5px 2px 4px); .border-radius (0 0 10px 10px);}
#main {
	.column(9);
}
#main1 {
	.column(12);
}
#sidebar {
	.column(3);
}
#subsidebar {
	.column(3);
}

footer {
	background: @subgradient;
	overflow: hidden;
	margin-top: 30px;
	padding: 30px 0px;
	text-align: center;
	font-size: smaller;
		#copyright { 
			 border-top: 1px solid @borderColor; padding-top: 40px;
				span{
					position:relative;
					/*top:-20px;*/
				}
		}
}

/*##################################
	eCommerce Module
##################################*/
.catalogList {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(3); margin-bottom: 10px;}
		li#subcatalog {.column(2); margin-bottom: 10px; font-size: @smallFontSize;}
	}
}
.productList {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(2.4); min-height: 255px;
			.itemlist {min-width: 160px; height: 185px; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 2px);}
			.info {font-size:@smallFontSize;
				.itemTitle {color: @mainColor;}
			}			
		}
	}
}
}

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 769px) and (max-width: 991px) {
	body {
		width: 100%;
		/*padding: 48px 28px 60px;*/
	}
	div.center {
		width: 100%;
		margin: 0 auto;
	}
	#navtop {
	background: @subgradient;
	font-size: smaller;
	height: 20px;
		#nav {width: 100%; margin: 0 auto; /*background: rgba(204,0,0,0.9);*/ overflow: hidden;}
}
	header#top {
		/*margin-bottom: 1em;*/
		background: none;
		overflow: hidden;
			#logo {.column(12);}
			#hotline {.column(0);}
	}
	#midle {
	background: @bgmidle; overflow: hidden;
		#bannertop {
			width: 100%; clear: both;}
}
	#main {
		.column(9);
	}
	#sidebar,#subsidebar {
		.column(3);
	}
	.productList {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(4); min-height: 255px;
			.itemlist {min-width: 160px; height: 185px; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 2px);}
			.info {font-size:@smallFontSize;
				.itemTitle {color: @mainColor;}
			}			
		}
	}
}
	#productdetail {
	.avatar {.column(7); padding: 10px 0; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 1px);}
	.info {.column(5);}
	.itemlist {min-width: 95px; height: 90px; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 2px);}
	#tabs {
		ul > li {font-size: @smallFontSize;}
	}
	.line_dot_bottom {
	border-bottom: 1px dotted #C8C8C8;
	height: 1px;
	clear: both;
	margin: 5px 0;}
}
}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 768px) {

body {
	width: 100%;
	padding: 0px;
}
div.row {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
div.center {
	width: 100%;
	margin: 0 auto;
}
#navtop {
	background: @subgradient;
	font-size: smaller;
	height: 20px;
		#nav {width: 100%; margin: 0 auto; /*background: rgba(204,0,0,0.9);*/ overflow: hidden;}
}
header#top {
	/*margin-bottom: 1em;*/
	background: none;
	overflow: hidden;
		#logo {.column(12);}
		#hotline {.column(0);}
}
#midle {
	background: @bgmidle; overflow: hidden;
		#bannertop {
			width: 100%; clear:both;}
}
#main {
.column(8);
}
#sidebar,#subsidebar {
.column(4);
}
/*##################################
	eCommerce Module
##################################*/
.catalogList {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(6); margin-bottom: 10px;}
	}
}
.productList {
	ul {list-style:none; padding:0;
		li{list-style: none; float:left; .column(4); min-height: 255px;
			.itemlist {min-width: 160px; height: 185px; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 2px);}
			.info {font-size:@smallFontSize;
				.itemTitle {color: @mainColor;}
				}			
		}
	}
}

}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 734px) {
	
body {
	width: 100%;
	padding: 0px 10px 0px;
}
div.center {
width: 100%;
margin: 0 auto;
}
#navtop {
background: @subgradient;
font-size: smaller;
height: 20px;
	#nav {width: 100%; margin: 0 auto; /*background: rgba(204,0,0,0.8);*/ overflow: hidden;}
}
header#top {
	/*margin-bottom: 1em;*/
	background: none;
	overflow: hidden;
		#logo {.column(12);}
		#hotline {.column(0);}
}
#midle {
	background: @bgmidle; overflow: hidden;
		#bannertop {
			width: 100%; display: inline-block; clear:both;}
}
#main {
	.column(12);
	#custom {-webkit-column-count: 1;-webkit-column-count: 1;}
}
#sidebar,#subsidebar {
	.column(12);
}

.productList {
ul {list-style:none; padding:0;
	li{list-style: none; float:left; .column(6); min-height: 255px;
		.itemlist {min-width: 160px; height: 185px; display:table-cell; vertical-align:middle; text-align: center; .border-radius(5px); .shadow (0 0 2px);}
		.info {font-size:@smallFontSize;
			.itemTitle {color: @mainColor;}
			}			
		}
	}
}

}

/*	< 480px
-----------------------------------------------    */
@media only screen and (max-width: 480px) {

#midle { display: none;}	
#main {
	.column(12);
	#custom {-webkit-column-count: 1;-webkit-column-count: 1;}
	}
#sidebar,#subsidebar {
	.column(12);
}
}

/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
}