/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 12, 2015, 5:10:56 PM
    Author     : thanhlc
*/

.menu-left {}
.menu-left .title {padding-left: 8px; border-bottom: 1px solid #cccccc; font-weight: bold;}
.menu-left ul > li > ul {padding: 0 0 0 25px;}
.menu-left ul li {line-height: 26px;}
.menu-left > ul > li > a {background-color: #3399cc; display: block; color: white; padding-left: 8px;}
.menu-left > ul > li > ul > li > a:before {content: '\2022'; margin-right: 5px; color: #f6591e;}
@media only screen and (max-width: 770px){
    .menu-left {display: none;} 
}

.info {position: absolute; right: 416px; padding-top: 11px; text-align: right;} 

@media only screen and (max-width: 770px)
{
    .info {right: 0; margin-left: 100px;}
}
.info .email {background: url(../images/i-email.png) no-repeat; background-size: 25px 20px; display: inline-block; padding-left: 30px; vertical-align: top;}
.info .phone {background: url(../images/i-phone.png) no-repeat; background-size: 25px 25px; display: inline-block; width: 137px; 
       padding-left: 30px; margin-left: 15px; vertical-align: top;}
.info .txt {font-weight: bold; color: #3399cc;}

.products-grid li {}
.products-grid li .product-name {}
.cms-index-index .products-grid .product-info .actions {display: block;}

.home-category ul li {width: 30%; display: inline-block; vertical-align: middle;}
.home-category ul li a {text-align: center;}
.home-category ul li a img {width: 100%;}
.home-category h2 {font-size: 16px;}
.category2 div p {border-bottom: 2px solid #3399cc; margin-bottom: 5px; padding: 0; line-height: 27px;}
.category2 div p span {background-color: #3399cc; color: white; font-size: 20px; padding: 5px;}
.category-name {margin: 0px 0 10px 0; color: white; text-transform: uppercase; font-size: 18px; padding: 1px 5px;
letter-spacing: 1px; color: #f6591e; border-bottom: 4px solid #3399cc; font-weight: bold;}

.layout-templates {}
.layout-templates ul {border: 1px solid #cccccc; position: relative; display: block; box-sizing: border-box; list-style: none;
background-color: #f4f4f4;}
.layout-templates ul:after {content: ''; clear: both; display: table;}
.layout-templates ul li {float: left; box-sizing: border-box; cursor: pointer;}
.layout-templates ul li:nth-child(1) {}
.layout-templates ul li span {height: 40px; position: relative; padding: 0px 20px; bottom: -1px; box-sizing: border-box;
line-height: 40px; display: inline-block;}
.layout-templates ul li.current span {background-color: white;}
.layout-templates ul li.current {border-right: 1px solid #cccccc; border-left: 1px solid #cccccc;}
.layout-templates .cell {border: 1px solid #cccccc; border-top: 0; display: none;}
.layout-templates .a1 {display: block;}
.layout-templates table {width: 100%; border-collapse: collapse;}
.layout-templates table tr {border-collapse: collapse;}
.layout-templates table th {color: white; font-size: 13px; text-align: center; border-collapse: collapse; padding: 5px;}
.layout-templates table tr > th:nth-child(1), .layout-templates table tr > th:nth-child(2) 
{background-color: #3399CC; text-align: left;}
.layout-templates table tr > th:nth-child(3){background-color: #33c640;}
.layout-templates table tr > th:nth-child(4){background-color: #8dc63f; display: none;}
.layout-templates table tr > th:nth-child(5){background-color: #39b449;}
.layout-templates table tr > th:nth-child(6){background-color: #009544;}

.layout-templates table td {text-align: center; font-size: 12px; color: black; border-collapse: collapse;}
.layout-templates table tr > td:nth-child(1), .layout-templates table tr > td:nth-child(2) 
{text-align: left; background-color: #E8F0F7; border-bottom: 1px solid #cedbe7; border-collapse: collapse; padding: 5px;}
.layout-templates table tr > td:nth-child(3) {background-color: #d7f0db; border-bottom: 1px solid #b8e4bf;}
.layout-templates table tr > td:nth-child(4) {background-color: #e8f4da; border-bottom: 1px solid #d6ebbc; display: none;}
.layout-templates table tr > td:nth-child(5) {background-color: #d7f0db;}
.layout-templates table tr > td:last-child {background-color: #cfeadb; border-bottom: 1px solid #a9dabc; border-left: 1px solid #a9dabc;}


.layout-templates table tr td img {margin: auto;}



.downloader a {background-color: #3399cc; padding: 5px; color: white; width: 160px; display: block; text-align: center; float: right; text-transform: uppercase;
margin-left: 5px;}
.downloader a:hover {color: black;}
.downloader {clear: both;} 

/* Upload file */

.cms-upload .form-info {display: inline-block;}
.cms-upload .form-info form {text-align: right;}
.cms-upload .form-info input {margin-bottom: 10px;}
.cms-upload .form-info label {width: 101px; text-align: right;}

.btn-add-files {position: relative; overflow: hidden; display: inline-block; padding: 7px;}
.btn-add-files span {background-color: #3399cc; border-radius: 5px; padding: 5px; color: white; cursor: pointer;}
.btn-add-files input {opacity: 0; display: block; position: absolute; top: 0; left: 0; margin: 0; direction: ltr; cursor: pointer;}

.cms-upload .files {margin-top: 15px;}
.cms-upload table {width: 500px; border-collapse: collapse;}
.cms-upload table tr {border-top: 1px solid #ddd;}
.cms-upload table tr:nth-child(odd) {background-color: #f9f9f9;}
.cms-upload table tr:nth-child(even) {background-color: white;}
.cms-upload table tr td:first-child {width: 300px;}
.cms-upload table tr td:last-child {text-align: center;}
.cms-upload table tr td > p {font-size: 12px;}
.cms-upload table tr td div {position: relative; display: block; height: 15px;}
.cms-upload table tr td div p {display: block; height: 15px; border-radius: 5px; position: absolute;}
.cms-upload table tr td div p:first-child {background-color: #3399cc; z-index: 1000;}
.cms-upload table tr td div p:last-child {background-color: #dbdbdb; width: 100%;}

.upload-files {text-align: center; display: block; margin-top: 15px;}
.upload-files a {background: url('../images/i_upload.png') no-repeat; background-size: 24px; font-size: 18px; padding-left: 25px;
	color: #d24304;}
.upload-file-up {color: #d24304;}


.links.contact-info {width: 30% !important; text-transform: initial;}
.links.contact-info a {color: #3399cc !important; text-decoration: underline;}
.links.contact-info li {text-transform: initial;}

@media screen and (max-width: 500px){
	.links.contact-info {width: 100% !important;}
}