/*
# MEGO Inc | http://www.mego.com.vn
# Author Duong Hoai Duc, Hoai Thanh.
# LESS file
# ------------------ */
@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: @fontFace1;line-height: 1.2; text-transform:uppercase;}
.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;}
/* jqueryslidemenu
-------------------*/
.jqueryslidemenu{/*background-color:#C00;*/text-decoration:none;position:relative;z-index:999; padding: 5px 0; font-family: @fontFace1; text-transform:uppercase; font-size: @mFontSize;
ul{padding:0;margin:0px 3px; list-style:none;
li{position:relative;display:inline;float:left; margin-right: 1px;
a{display:block;padding:6px 10px 7px 10px;color:@mLink;text-decoration:none;text-transform:uppercase;letter-spacing:1px;background:@bgmenu;.border-radius(5px);}
a:link, a:visited {color: @mLink;}
a:hover{color:@mHover;background:@bgmenuHover;.border-radius(5px);}
a.active{color:@mLink;}
ul{position:absolute;left:0;display:block;visibility:hidden;margin:0; width:auto;
li{display:list-item;float:none;margin:0;background:@bgmenu;
a{min-width:160px; border-bottom:1px dotted @mLink;border-top:0;padding:6px 5px 7px 12px;margin:0;background:@bgmenu;.border-radius(0);}
a:link, a:visited{color:@mLink;}
a:hover, a.active{color:@mHover;border-bottom:1px dotted @mHover;.border-radius(5px);}
ul{top:0;left:156px !important;}
}
li.active a{ background: @bgmenuActive; .border-radius(5px);}
}
}
li.active a{ background: @bgmenuActive; .border-radius(5px); /*.border-radius(5px 5px 0 0)*/
span{color:@mLink; width:auto;}
}
}
}
* html .jqueryslidemenu ul li a{display:inline-block;}
.downarrowclass{position:absolute;top:10px;right:7px;}
.rightarrowclass{position:absolute;top:10px;right:7px;}
/* 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 {-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
background: url('../images/bgfooter_220313.jpg') center bottom no-repeat,
/*url('../images/bg_hoacuc.png'),*/
url('../images/bgheader_220313.png') center top no-repeat,
#501448;
}
div.row {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
div.center {
width: 960px;
margin: 0 auto;
}
#navtop {
background: @navtop;
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;}*/
#logo {width: 126px; position: fixed; right: 0; top: 0 !important; background:url('../images/logo_03.png') no-repeat; z-index: 151;}
#hotline {.column(8); font-size: 185%;
padding: 40px 0;
color: #F00;
line-height: 1em;
.text-shadow;}
}
#midle {
background: @bgmidle; overflow: hidden;
.banner_1 {width:940px; padding: 10px; .shadow (0.5px 2px 4px); background: #FFF;}
}
#menu {background: @bgmenu; .shadow (0.5px 2px 4px);}
/* main column & sidebar*/
#maincontent {background: #FFF; overflow: hidden; padding-bottom: 30px; .shadow (0.5px 2px 4px); .border-radius (0 0 10px 10px);}
#main {
.column(8);
#custom {-webkit-column-count: 2;-webkit-column-count: 2;}
}
#main1 {
.column(12);
#custom {-webkit-column-count: 2;}
}
#sidebar {
.column(4);
}
#subsidebar {
.column(4);
}
footer {
background: @bgfooter;
border-top: 10px solid #FFF /*@borderColor*/;
overflow: hidden;
margin-top: 616px;
padding: 0px 0px 0px 0px;
text-align: center;
font-size: 100% !important; font-family: @fontFace1; text-transform:uppercase;
#copyright { padding-top: 10px;
span{
position:relative;
/*top:-20px;*/
}
}
}
/*##################################
News Module
##################################*/
#news {
h1.catalogTitle{margin: 2px 0;}
h2 { font-size: 180%; margin: 0 0 10px 0;}
#intro{ margin-top: 20px;
h3 {margin: 0 0 10px 0; font-size: 125%;}
.avatar {.column(4); margin-left: 0; margin-right: 30px;margin-bottom: 10px;
img {width: 100%; height: auto;}
}
#hotnews{.column(8);}
.otherNews{.column(4);
ul{list-style: none;
li { list-style:circle; margin:0px 0px 5px 20px; padding: 0; font-weight: normal;
a{padding: 0;}
a:link, a:visited{color:@linkColor;}
a:hover{color: @hoverColor;}
}
}
}
}
}
/*##################################
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);}
}
}
/*##################################
Gallery Module
##################################*/
#gallerycataloglist #gaCatalog ul { list-style: none; margin: 0 auto; padding:0;
li {.column(4); margin-bottom: 10px; background: @bggradient2;.border-radius(5px);
a {display:block;color: @linkColor;.border-radius(5px);}
a:link,a:visited { color: @linkColor; }
a:hover {/*border: 1px solid @hoverBorderColor;*/}
img {width:100%;}
.title, .CatalogTitle{padding: 10px 5px; text-align:center;}
}
li:hover {background: @bggradient;}
}
#gaItem{ margin: 20px;
ul{ margin: 0; padding: 0;
li{ .column(3); margin: 5px; float:left; background: @subgradient1; padding: 5px; .border-radius(5px); border: 3px dotted #F1F1F1;
h2{margin: 0 0 10px 0; padding: 0; color: #333; font-size: 120%;}
img{width: auto !important; .border-radius(5px); .shadow (0.5px 2px 4px); margin-left: auto; margin-right: auto; }
.avatar{ width: 197px; height: 180px; display: table-cell; text-align: center; vertical-align: middle;}
}
li:hover{background: @bgmidle; border: 3px dotted #FFF;}
}
}
#gaCatalog {
ul{
li{ .column(4); margin-bottom: 20px;}
}
}
#gaList ul{list-style: none; margin: 0; padding: 0;
li {.column(3); height: 220px; margin: 14px; padding: 0; .border-radius(5px); border: 1px solid @borderColor; display: table;
div{display: table-cell;vertical-align: middle !important; text-align: center; padding: 5px;}
img {width:75%;margin: 0 auto; vertical-align:middle; .border-radius(3px);}
}
}
#maincontent #mCatalog ul { padding: 0; margin: 0; list-style: none;
li {.column(4);margin-bottom: 20px;background: @bgmidle; .border-radius(5px); min-height: 280px;
a { display: block; padding: 10px;
img { width: 100%; height: auto; .border-radius(5px); margin: 0px; padding: 0px;}
}
a span.title { padding: 5px 10px 11px 10px; text-transform:uppercase; min-height: 60px;}
}
li:hover {background: @subgradient1;}
}
.widgetPhoto ul{margin: 0px; padding: 0; margin-top: 10px; margin-bottom: 10px;
li{width: 128px; margin: 10px 10px; min-height: 130px; margin-bottom: 5px; .border-radius(5px); border: 1px solid @borderColor; background: #FFF; display: table; float:left;
div{width: 100%; display: table-cell;vertical-align: middle !important; text-align: center; padding: 0px; margin: 0 auto;
a{display: block; padding: 0px;
img {width: auto; margin: 0 auto; vertical-align:middle; .border-radius(3px);}
}
}
}
}
.widgets {
article.content, .info{padding: 0 10px; color: #CCC;
a{color: #CCC;}
}
} /*end gallery*/
#banner.banner_15{
ul{
li{.column(12); margin-bottom: 10px;}
li#ads_68{.column(9); margin-bottom: 10px;}
li#ads_69{.column(9); margin-bottom: 10px;}
li#ads_70{.column(12); margin-bottom: 10px;}
li#ads_71{.column(12); margin-bottom: 10px;}
}
}
/* --- 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);}*/
#logo {width: 126px; position: fixed; right: 0; top: 0 !important; background:url('../images/logo_03.png') no-repeat; z-index: 151;}
#hotline {.column(8); font-size: 185%;
padding: 40px 0;
color: #F00;
line-height: 1em;
.text-shadow;}
}
#midle {
background: @bgmidle; overflow: hidden;
.banner_1 {width:1180px; padding: 10px; 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(8);
}
#main1 {
.column(12);
}
#sidebar {
.column(4);
}
#subsidebar {
.column(4);
}
footer {
background: @bgfooter;
overflow: hidden;
margin-top: 616px;
padding: 0px;
text-align: center;
font-size: smaller;
#copyright {
padding-top: 10px;
color: @txtfooter;
span{
position:relative;
/*top:-20px;*/
a:link, a:active {
color: @txtfooter;
}
}
}
}
/*##################################
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: 600px) and (max-width: 949px) {
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;}
}
}
/* 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 (max-width: 599px) {
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;}
}
}
}
}
}
/* 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 {
}
}
/*custom style*/
@font-face {font-family:'HelveticaiDesignVn-BdCn';
src:url('../fonts/helvetica/HelveticaiDesignVn-BdCn.eot'); src:local('../fonts/helvetica/HelveticaiDesignVn-BdCn'),local('../fonts/helvetica/HelveticaiDesignVn-BdCn'),url('../fonts/helvetica/HelveticaiDesignVn-BdCn.ttf') format('truetype');}
@font-face {font-family:'HelveticaiDesignVn-UltLt';
src:url('../fonts/helvetica/HelveticaiDesignVn-UltLt.eot'); src:local('../fonts/helvetica/HelveticaiDesignVn-UltLt'),local('../fonts/helvetica/HelveticaiDesignVn-UltLt'),url('../fonts/helvetica/HelveticaiDesignVn-UltLt.ttf') format('truetype');}
@font-face {font-family:'HelveticaiDesignVn-Cn';
src:url('../fonts/helvetica/HelveticaiDesignVn-Cn.eot'); src:local('../fonts/helvetica/HelveticaiDesignVn-Cn'),local('../fonts/helvetica/HelveticaiDesignVn-Cn'),url('../fonts/helvetica/HelveticaiDesignVn-Cn.ttf') format('truetype');}
@font-face {font-family:'HelveticaiDesignVn-Lt';
src:url('../fonts/helvetica/HelveticaiDesignVn-Lt.eot'); src:local('../fonts/helvetica/HelveticaiDesignVn-Lt'),local('../fonts/helvetica/HelveticaiDesignVn-Lt'),url('../fonts/helvetica/HelveticaiDesignVn-Lt.ttf') format('truetype');}
@font-face { font-family: 'UTMCafetaRegular';
src: url('../fonts/utm_cafeta/utm_cafeta-webfont.eot');
src: url('../fonts/utm_cafeta/utm_cafeta-webfont.eot?#iefix') format('eot'),
url('../fonts/utm_cafeta/utm_cafeta-webfont.svg') format('svg'),
url('../fonts/utm_cafeta/utm_cafeta-webfont.woff') format('woff'),
url('../fonts/utm_cafeta/utm_cafeta-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'UTMCafetaRegular'; src: url('../fonts/utm_cafeta/utm_cafeta-webfont.svg') format('svg');} }