/* 
    Document   : styles
    Created on : Jan 20, 2014, 10:42:24 PM
    Author     : anhnguyenmanh
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: Arial,sans-serif;
}
body.home {
    background:#80c837 url("images/bg-home.jpg") no-repeat;
    background-size: cover;
}
body.subpage {
    background:#fff url("images/bg-subpage.jpg") top right no-repeat;
    /*background-size: cover;*/
}
p {
    line-height: 18px;
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    color: #024f02;
    outline:none;
}
a:hover {
    text-decoration: none;
    color: #0c750c;
}
a img {
    border: none;
}
.clr {
    clear: both;
}
#main {

}
.wrapper {
    width: 960px;
    margin: 0 auto;
}
#header {
    height: 109px;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
    z-index: 10;
}
#header a.logo {
    background: url("images/logo.png") no-repeat;
    width: 254px;
    height: 73px;
    text-indent: -9999px;
    display: inline-block;
    float: left;
}
#header a.login
{
    color:white; 
    background: url('images/nav-account-icon.png') no-repeat scroll 0 1px rgba(0, 0, 0, 0);
    padding-left:15px;
}
.box-shadow {
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.75);
}
#slideshow{
    border-top: 4px #7bc034 solid;
    width: 960px;
    height: 330px;
    margin-bottom: 3px;
}
.slide-control {
    position: relative;
}
.slide-control #next, .slide-control #prev{

    width: 32px;
    height: 50px;
    position: absolute;
    top:-200px;
    text-indent: -9999px;
    z-index: 4;
    outline: medium none;
}
#next {
    background: url("images/next.png") no-repeat;
    right: 10px;
}
#prev {
    background: url("images/prev.png") no-repeat;
    left: 10px;
}

.line {
    height: 5px;
    background: #ebf4e3;
}

#content {
    padding-top: 20px;
}
#content .wrapper {
    padding: 0 10px;
    width: 940px;
}
.col-300 {
    width: 300px;
    float: left;
    margin-bottom: 20px;
}
.col-620 {
    width: 620px;
    float: left;
    margin-bottom: 20px;
}
.col-220 {
    width: 220px;
    float: left;
    margin-bottom: 20px;
}
.col-700 {
    width: 700px;
    float: left;
}
.m-right{
    margin-right: 20px;
}

.social {
    background: url("images/bg-social.png") no-repeat;
    height: 135px;
}
.social .tw, .social .fb, .social .vm {
    width: 75px;
    display: block;
    float: left;
    height: 20px;
    color: #7c8389;
    text-decoration: none;
    padding-top: 70px;
    text-align: center;
    background-position: 11px 0px;
    margin: 19px 14px 0 11px;
    font-size: 12px;
}
.social .tw:hover, .social .fb:hover, .social .vm:hover {

    color: #024f02;

}
.tw {
    background: url("images/tw.png") no-repeat;
}

.fb {
    background: url("images/fb.png") no-repeat;
}

.vm {
    background: url("images/vm.png") no-repeat;
}

.btn-detail-red, .btn-detail-green {
    width: 170px;
    height: 27px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    padding: 13px 0 0 30px;
    margin: 15px 0 0 0;
}
.left-product a:hover .btn-detail-red, .left-product a:hover .btn-detail-green {
    text-decoration: none;
    color: #dadada;
}
.btn-detail-red {
    background: url("images/btn-detail-red.png") no-repeat;

}
.btn-detail-green {
    background: url("images/btn-detail-green.png") no-repeat;
}

.border-w {
    border: 5px #fff solid;
}
.line-sm {
    border-bottom: 1px #ccc solid;
    height: 15px;
    margin-bottom: 15px;
}
ul.contact {
    margin: 0;
    padding: 0;
}
ul.contact li {
    list-style: none;
    padding: 3px 0;
}

.products-list {
    margin: 30px 0 150px 50px;
}
.about-title {
    margin: 20px 0;
    color: #82b43e;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

ul.about-nav {
    margin: 0;
    padding: 0 15px;
    border-top:9px #379f0b solid;
    background: #fff;
}
ul.about-nav li{
    list-style: none;
    padding: 15px 0;
    border-bottom: 1px #bfbfbf solid;
    font-size: 15px;
    
    
}
ul.about-nav li a {
    background: url("images/dot.jpg") 0px 0px no-repeat;
    padding: 0 0 0 20px;
}
ul.about-nav li a.selected,
ul.about-nav li a:hover {
    background: url("images/dot-selected.jpg") 0px 0px no-repeat;
    padding: 0 0 0 20px;
    font-weight: bold;
    color: #379f0b;
}
#footer {
    background: #047216;
    color: #fff;
    overflow: hidden;
    padding: 15px 0;
}
#footer a {
    color: #fff;
}

.f-nav {
    margin: 5px 0 0 0;
    padding: 0;
}
.f-nav li {
    list-style: none;
    float: left;
}
.f-nav li span {
    width: 20px;
    text-align: center;
    display: inline-block;
}
.f-social {
    float: right;
}
.f-social a.ftw, .f-social a.ffb, .f-social a.fvm {
    width: 44px;
    height: 44px;
    display: inline-block;
    margin-left: 10px;
}
.f-social a.ftw {
    background: url("images/ftw.png") no-repeat;
}
.f-social a.ffb {
    background: url("images/ffb.png") no-repeat;
}
.f-social a.fvm {
    background: url("images/fvm.png") no-repeat;
}

#contact-form {
    display: block;
    width: 100%;
}
#contact-form label {
    display: block;
    height: 35px;
    overflow: hidden;
}
#contact-form input {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #024F02;
    color: #000000;
    float: left;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 13px;
    line-height: 1.23em;
    margin: 0;
    outline: medium none;
    padding: 4px 10px;
    width: 280px;
}
#contact-form textarea {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #024F02;
    color: #000000;
    float: left;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 13px;
    height: 363px;
    line-height: 1.23em;
    margin: 0;
    max-height: 363px;
    max-width: 520px;
    min-height: 363px;
    min-width: 520px;
    outline: medium none;
    overflow: auto;
    padding: 5px 10px;
    width: 520px;
}
.text-form {
    color: #000000;
    display: block;
    float: left;
    font-size: 14px;
    line-height: 28px;
    width: 79px;
}
.buttons {
    padding: 13px 40px 10px;
    text-align: right;
}
.buttons a {
    margin-left: 27px;
    cursor: pointer;
}
.clear, #clear {
    clear: both;
    overflow: hidden;
}

.img-indent {
    float: left;
    margin: 0 20px 0 0;
}
.extra-wrap {
    overflow: hidden;
}

/* ---- padding all ---- */
.padding0,#padding0{padding:0}
.padding2,#padding2{padding:2px}
.padding5,#padding5{padding:5px}
.padding8,#padding8{padding:8px}
.padding10,#padding10{padding:10px}
.padding15,#padding15{padding:15px}
.padding20,#padding20{padding:20px}
.padding25,#padding25{padding:25px}

/* ---- padding top ---- */
.paddingTop0,#paddingTop0{padding-top:0px}
.paddingTop5,#paddingTop5{padding-top:5px}
.paddingTop10,#paddingTop10{padding-top:10px}
.paddingTop15,#paddingTop15{padding-top:15px}
.paddingTop20,#paddingTop20{padding-top:20px}
.paddingTop25,#paddingTop25{padding-top:25px}
.paddingTop30,#paddingTop30{padding-top:30px}

/* ---- padding bottom ---- */
.paddingBottom0,#paddingBottom0{padding-bottom:0px}
.paddingBottom5,#paddingBottom5{padding-bottom:5px}
.paddingBottom10,#paddingBottom10{padding-bottom:10px}
.paddingBottom15,#paddingBottom15{padding-bottom:15px}
.paddingBottom20,#paddingBottom20{padding-bottom:20px}

/* ---- padding left ---- */
.paddingLeft0,#paddingLeft0{padding-left:0px}
.paddingLeft5,#paddingLeft5{padding-left:5px}
.paddingLeft10,#paddingLeft10{padding-left:10px}
.paddingLeft15,#paddingLeft15{padding-left:15px}
.paddingLeft20,#paddingLeft20{padding-left:20px}

/* ---- padding right ---- */
.paddingRight0,#paddingRight0{padding-right:0px}
.paddingRight5,#paddingRight5{padding-right:5px}
.paddingRight10,#paddingRight10{padding-right:10px}
.paddingRight15,#paddingRight15{padding-right:15px}
.paddingRight20,#paddingRight20{padding-right:20px}

/* ---- margin all ---- */
.margin0,#margin0{margin:0}
.margin5,#margin5{margin:5px}
.margin8,#margin8{margin:8px}
.margin10,#margin10{margin:10px}
.margin15,#margin15{margin:15px}
.margin20,#margin20{margin:20px}

/* ---- margin top ---- */
.marginTop0,#marginTop0{margin-top:0px}
.marginTop5,#marginTop5{margin-top:5px}
.marginTop10,#marginTop10{margin-top:10px}
.marginTop15,#marginTop15{margin-top:15px}
.marginTop20,#marginTop20{margin-top:20px}

/* ---- margin bottom ---- */
.marginBottom0,#marginBottom0{margin-bottom:0px}
.marginBottom5,#marginBottom5{margin-bottom:5px}
.marginBottom10,#marginBottom10{margin-bottom:10px}
.marginBottom15,#marginBottom15{margin-bottom:15px}
.marginBottom20,#marginBottom20{margin-bottom:20px}

/* ---- margin left ---- */
.marginLeft0,#marginLeft0{margin-left:0px}
.marginLeft5,#marginLeft5{margin-left:5px}
.marginLeft10,#marginLeft10{margin-left:10px}
.marginLeft15,#marginLeft15{margin-left:15px}
.marginLeft20,#marginLeft20{margin-left:20px}

/* ---- margin right ---- */
.marginRight0,#marginRight0{margin-right:0px}
.marginRight5,#marginRight5{margin-right:5px}
.marginRight10,#marginRight10{margin-right:10px}
.marginRight15,#marginRight15{margin-right:15px}
.marginRight20,#marginRight20{margin-right:20px}