/****
Author: Saimer Moo, Cici Loh
Email: enquiry@lively.com.my
Portfolio: http://www.lively.com.my
*****/
body {
    font-family: "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif;font-size: 14px;
    /*background: #4a7993 url('../img/bg.jpg') 0 0 repeat; */
    background: #75b1c4 url('../img/bg_grad.jpg') 0 0 repeat-x;
}

footer, footer a, footer a:hover { color: #EAEDF1; font-size: 12px; }

section#header { margin-top: 10px; margin-bottom: 20px; }
section#header a.menu {
    float: left; width: 78px; height: 94px; margin: 12px 10px 0 10px;
}
section#header a.about {
    float: right; background: transparent url('../img/about.png') 0 0 no-repeat;
}
section#header a.about:hover, section#header a.about.active {
    background: transparent url('../img/about_hover.png') 0 0 no-repeat;
}
section#header a.product {
    float: right; background: transparent url('../img/product.png') 0 0 no-repeat;
}
section#header a.product:hover, section#header a.product.active {
    background: transparent url('../img/product_hover.png') 0 0 no-repeat;
}
section#header a.career {
    background: transparent url('../img/career.png') 0 0 no-repeat;
}
section#header a.career:hover, section#header a.career.active {
    background: transparent url('../img/career_hover.png') 0 0 no-repeat;
}
section#header a.contact {
    background: transparent url('../img/contact.png') 0 0 no-repeat;
}
section#header a.contact:hover, section#header a.contact.active {
    background: transparent url('../img/contact_hover.png') 0 0 no-repeat;
}
section#header .initial-hide,
section#home .top .banner-hide { display:none; }

section#home { margin-bottom: 10px; }
section#home .top div { float:left; }
section#home .top .w620 { width: 620px; margin-right: 10px; }
section#home .top .w540 { width: 540px; }
section#home .top .w1170 { width: 1170px; }
section#home .top .banner { border: 8px solid #FFF; }
section#home .top .banner img { width: 100%; }
section#home .top .slogan { 
    width: 100%;  background: transparent url('../img/content_bg.png') 0 0 repeat;  font-size: 24px; color: #6C6C6C; line-height: 30px;
    height: 140px; overflow: hidden;
}
section#home .top .slogan .highlight { color: #D24C3F; font-size: 30px; }
section#home .top .slogan div { padding: 25px 40px; }
section#home .top .social div { width: 305px; height: 60px; }
section#home .top .social .twitter { margin-right: 10px; background-color: #84cedb; }
section#home .top .social .twitter a { 
    display: block; width: 100%; height: 100%; line-height: 60px;
    background: transparent url('../img/twitter.jpg') left top no-repeat;
}
section#home .top .social .facebook { background-color: #5495b6; }
section#home .top .social .facebook a { 
    display: block; width: 100%; height: 100%; line-height: 60px; 
    background: transparent url('../img/facebook.jpg') left top no-repeat;
}
section#home .top .social a span { 
    margin-left: 68px; font-size: 22px; color: #FFF; text-shadow: 0 0 1px #333;
}
section#home .top .social .twitter a:hover, section#home .top .social .facebook a:hover {
    text-decoration: none;
}
section#home .top .social a:hover span { text-shadow: 0 0 3px #000; }
section#home .top .special {
    background: transparent url('../img/content_bg.png') 0 0 repeat; width: 100%;
}
section#home .top .special .txt { 
    color: #994545; font-size: 18px; line-height: 24px; padding: 25px !important; text-align: center;
}
section#home .top .special .txt span { color: #313737; font-size: 20px; }
section#home .top .special .link { width: 100%; text-align: center; padding-bottom: 29px; }
section#home .top .special .link a { 
    width: 112px; height: 112px; background: transparent url('../img/circle.png') 0 0 no-repeat; 
    display: inline-block; color: #FFF; margin: 0 15px; font-size: 18px; line-height: 24px;
}
section#home .top .special .link a:hover {
    background: transparent url('../img/circle_selected.png') 0 0 no-repeat; text-decoration: none;
}
section#home .top .special .link a span { padding-top: 33px; display: block; }

/* Contact */
section#contact { margin-bottom: 10px; }
section#contact .content { background-color: #c8c8ae; height: 460px; }
section#contact .content .map .shadow {
    width:98%; padding: 1%; height:425px; float:left; margin: 10px; background-color: #EFEFEF;
    -moz-box-shadow:    inset 0 0 10px #333;
    -webkit-box-shadow: inset 0 0 10px #333;
    box-shadow:         inset 0 0 10px #333;
}
section#contact .content .map #map_canvas { 
    width:100%; height:420px; 
}
section#contact .content .info div.address {
    padding: 30px 20px;
}
section#contact .content .info div.address div.add { margin-bottom: 20px; }
section#contact .content .info div.address h2 { line-height: 20px; margin-bottom: 15px; }
/* End Contact */

/* Career */
section#career { margin-bottom: 10px; }
section#career .intro { background-color: #38383F; color: #FFF; height: 200px; }
section#career .job { background-color: #c8c8ae; height: 260px; }
section#career .job .scope { float: left; width: 70%; background-color: #FFF; height: 260px; overflow-y: scroll; }
section#career .job ul.sub-menu { list-style: none; margin: 0; padding: 0; margin: 20px 0 20px 20px; }
section#career .job ul.sub-menu li { line-height: 26px; }
section#career .job ul.sub-menu li a.active { color: #333; }
section#career .job ul.sub-menu li a { width: 100%; height: 100%; float: left; }
section#career .job ul.sub-menu li a:hover, 
section#career .job ul.sub-menu li a.active { 
    background: transparent url('../img/career/point.png') right center no-repeat; 
}
section#career .job ul.sub-menu li a { text-decoration: none; }
/* End Career */

/* Product */
section#product { margin-bottom: 10px; }
section#product .span12 { height: 460px; background-color: #333; }
section#product .info { float:left; background-color: #222; width: 98%; margin: 1%; height: 96%; }
section#product .info .sub-menu { float:left; margin: 0.5%; width: 23.5% }
section#product .info .sub-menu ul { list-style: none; margin: 0; padding: 0; }
section#product .info .sub-menu ul li { 
    margin-bottom: 5px; float: left; width: 100%;
}
section#product .info .sub-menu ul li a { 
    float: left; width: 100%; background-color: #333; color: #FFF;
    -moz-box-shadow:    inset 1px 1px 0px #666;
    -webkit-box-shadow: inset 1px 1px 0px #666;
    box-shadow:         inset 1px 1px 0px #666;
    line-height:40px;
}
section#product .info .sub-menu ul li a img { margin: 5px; }
section#product .info .sub-menu ul li a:hover,
section#product .info .sub-menu ul li a.active {
    background-color: #666; text-decoration: none;
} 
section#product .info .content { 
    float:left; background-color: #EFEFEF; width: 74.5%; margin: 0.5% 0.5% 0 0;
    -moz-box-shadow:    inset 0 0 10px #333;
    -webkit-box-shadow: inset 0 0 10px #333;
    box-shadow:         inset 0 0 10px #333;
}
section#product .info .content .details { height: 428px; overflow-y: hidden; display: none; }
section#product .info .content .details .left { float:left; width: 40%; height: 100%; }
section#product .info .content .details .left .divider { 
    padding: 10px; border-right: 1px solid #CCC; height: 95%; 
}
section#product .info .content .details .left .divider img.logo { 
    border: 3px solid #CCC; margin-bottom: 10px; 
}
section#product .info .content .details .right { float:left; width: 50%; }
section#product .info .content .details .right .guide { padding: 10px; }
section#product .info .content .details h3 { margin: 10px 0; }
section#product .info .content .details span.highlight { color: #C33; }

.popover { 
	width:200px;
}
/* End Product */

/* About */
section#about { margin-bottom: 10px; }
section#about .content { height: 450px; background-color: #becdd6; border:5px solid white;}
section#about .content .web .accordion { width:90%; }
section#about .content .web { 
    float:left; margin:30px 2%; width: 96%; height: 420px; overflow: hidden; 
}
section#about .content .web #overview {
    float:left; width:50%; height:100%;
}
section#about .content .web #milestone {
	    float:left; width:50%; 
}
section#about .content .web a.menu-overview { 
 width: 0%; height: 0%; float:left; 
   /* background: transparent url('../img/about/overview_hover.jpg') left bottom no-repeat; */
    cursor:default;
}
section#about .content .web a.menu-overview.active,
section#about .content .web a.menu-overview:hover { 
    /*background: transparent url('../img/about/overview_hover.jpg') left no-repeat;*/
}
section#about .content .web a.menu-milestone { 
    width: 0%; height: 0%; float:left;
    /*background: transparent url('../img/about/milestone.jpg') left no-repeat;*/
}
section#about .content .web a.menu-milestone.active,
section#about .content .web a.menu-milestone:hover { 
    /*background: transparent url('../img/about/milestone_hover.jpg') left no-repeat; */
}
section#about .content .web a:hover { text-decoration:none; }
section#about .content .web dt { margin-top: 20px; }
section#about .content .web #milestone .half { float:left; width: 50%; }
section#about .content .web #milestone .half img { margin: 5px; }
/* End About */

.pull-right { float: right !important; }
.small { font-size: 60%; }
.txt { padding: 20px !important; }

/* Start slider */
div#slide-holder { z-index:10; width:524px; height:194px; float:left; overflow:hidden; background-color:#333; }
div#slide-holder div#slide-runner { width:524px; height:194px; position:absolute; overflow:hidden; }
div#slide-holder img { margin:0; display:none; position:absolute; z-index:10; }
div#slide-holder div#slide-controls { left:0; bottom:20px; width:524px; height:20px; display:none; position:absolute; z-index:20; }
div#slide-holder div#slide-controls p.text { 
	float:left; color:#fff; display:inline; font-size:14px; line-height:16px; margin:12px 0 0 20px !important;
    text-transform:uppercase;
}
div#slide-holder div#slide-controls p#slide-nav { float:right; height:24px; display:inline; margin:8px 15px 0 0 !important; text-indent:0; }
div#slide-holder div#slide-controls p#slide-nav a {
    float:left; width:24px; height:24px; display:inline; font-size:11px; margin:0 5px 0 0; line-height:24px;
    font-weight:bold; text-align:center; text-decoration:none; color:#fff;
    background:transparent url("../img/icons.png") 0 0 no-repeat;
}
div#slide-holder div#slide-controls p#slide-nav a.on { background-position : 0 -24px; }
div#slide-holder div#slide-controls p#slide-desc { font-size:12px; }
/* End slider */


/* Large desktop */
@media (min-width: 1200px) {
    
}

@media (max-width: 1199px) {
    section#home .top .w620 { width: 390px; }
    section#home .top .w1170 { width: 940px; }
    section#home .top .social div { width: 190px; }
    section#home .top .social a span { padding-right: 10px; }
    
    section#career .intro img { display:none; }
}

@media (min-width: 980px) and (max-width: 1199px) {
    
}

@media (max-width: 979px) {
    section#home .top .w620 { width: 174px; }
    section#home .top .w1170 { width: 724px; }
    section#home .top .slogan { font-size: 16px; line-height: 22px; }
    section#home .top .slogan .highlight { font-size: 20px; }
    section#home .top .slogan div { padding: 10px 20px; }
    section#home .top .social div { width: 82px; }
    section#home .top .social a span { display: none; }
    section#home .top .special .txt { padding: 10px 20px 15px 20px; font-size: 16px; }
    section#home .top .special .link { padding-bottom: 29px; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    section#header { margin-bottom: 10px; }
    section#header .initial-hide { display: block; text-align: center; margin-bottom: -76px; }
    section#header .initial-hide img { width: 30%; }
    section#header .left-menu { float: left; width: 30%; }
    section#header .right-menu { float: right; width: 30%; }
    section#header .pagination-centered { display: none; }
    section#header a.menu { margin: 12px 2% 0 2%; }
    
    section#home .top .w620 { width: 100%; }
    section#home .top .w1170 { width: 100%; }
    section#home .top .w540 { width: 100%; }
    section#home .top .slogan { height: auto; }
    section#home .top .social { width: 100%; margin-bottom: 10px;}
    section#home .top .social div { width: 49%; }
    section#home .top .social div + div { margin-left: 2%; }
    section#home .top .social .twitter { margin-right: 0; }
    section#home .top .social a span { display: block; }
    section#home .top .banner { display: none; }
    section#home .top .banner-hide { width: 100%; display: block; }
    section#home .top .banner-hide .carousel-control { top: 45%; }
    section#home .top .banner-hide .carousel { margin-bottom: 0; }
    section#home .top .banner-hide .carousel .carousel-inner { padding: 1%; width: 98%; background-color: #FFF; }
    section#home .top .banner-hide .carousel,
    section#home .top .banner-hide .carousel .item,
    section#home .top .banner-hide .carousel .item img { width: 100%; }
    
    footer .span6 { text-align: center; }
    
    section#contact .content { height: auto; }
    section#contact .content .info div { float:left; }
    section#contact .content .info div.address div.add { margin-right: 20px; }
    section#contact .content .map .shadow { margin: 2%; width: 94%; }
    
    section#career .intro { height: auto; }
    section#career .job, section#career .job .scope { float:left; height: auto; }
    
    section#product .span12 { float:left; height: auto; }
    section#product .info .sub-menu { width: 99%; }
    section#product .info .content { width: 100%; }
    section#product .info .content .details { height: auto; }
    section#product .info .content .details .left .divider { border-right: none; }
    section#product .info .content .details .left,
    section#product .info .content .details .right { width: 100%; }
    
    section#about .content { float:left; width: 100%; height: auto; }
    section#about .content .web { height: auto; }
    section#about .content .web a.main, section#about .content .web a.main:hover { 
        width: 100% !important; height: 31px !important; margin: 0 !important; 
        background-position: left bottom !important;
    }
    section#about .content .web #overview,
    section#about .content .web #milestone { 
        width: 100% !important; height: 100% !important; display:block !important; 
        padding: 20px 0 !important;
    }
    section#about .content .web #milestone .half { float:left; width: 100%; }
    
    section#about .content .web a.menu-overview { 
        background: transparent url('../img/about/overview_hover.jpg') left bottom no-repeat !important;
    }
    section#about .content .web a.menu-milestone { 
        background: transparent url('../img/about/milestone_hover.jpg') left bottom no-repeat !important;
    }
}

@media (max-width: 640px) {
    section#header .initial-hide { margin-bottom: 10px; }
    section#header .initial-hide img { width: 160px; }
    section#header .left-menu { width: 50%; }
    section#header .right-menu { width: 50%; }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    section#header a.menu { margin: 12px 5px 0 5px; }
}