@charset "utf-8";
/* CSS Document */

body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}

/* Masthead */
#masthead #logo {display:block; width:300px; height:130px; background:url(../images/mast_logo.gif) top left no-repeat; float:left;}
#masthead a {display:block;}
#masthead a span {display:none;}
#masthead #selectCountry {float:right;}
#masthead #selectCountry select {float:left; margin-top:5px;}
#masthead #selectCountry #btnGo {float:left; margin:0 20px 0 5px;}
#masthead #franchise {background:url(../images/franchise.jpg) top left no-repeat; width:205px; height:100px; float:right;}
#mastheadBanner {padding-top:28px;}

/* Navigation */
#nav {float:right; margin:10px 0;}
#nav li {display:block; margin-left:20px; float:left;}
#nav li a {height:20px;}
#nav #navHome {background:url(../images/navHome.jpg) top left no-repeat; width:38px;}
#nav #navResidential {background:url(../images/navResidential.jpg) top left no-repeat; width:65px;}
#nav #navCommercial {background:url(../images/navCommercial.jpg) top left no-repeat; width:70px;}
#nav #navAboutUs {background:url(../images/navAboutus.jpg) top left no-repeat; width:55px;}
#nav #navEmployment {background:url(../images/navEmployment.jpg) top left no-repeat; width:75px}
#nav #navContact {background:url(../images/navContactus.jpg) top left no-repeat; width:60px}
#nav #navShop {background:url(../images/navShop.jpg) top left no-repeat; width:30px}
#nav #navMedia {background:url(../images/navMedia.gif) top left no-repeat; width:101px}

/* Sub Navigation */
#subNav {background-color:#efefef; height:35px;}
#subNav .contentArea {background:url(../images/col3Bg.gif) top right repeat-y;}
#subNav li {float:left; margin-right:10px; display:block;}

#flashArea {background:url(../images/flashAreaBg.jpg) repeat-x;}
#flashBanner {width:982px; margin:0 auto;}

/* Choose Option */
/*#chooseOption {margin:-20px -10px 0; width:995px; position:relative; z-index:0;}*/
#chooseOption {margin:-14px -10px 0; width:995px; position:relative;}
#chooseOption a {display:block; float:left;}

/* Welcome */
#welcome {background:url(../images/welcomeBg.jpg) bottom left repeat-x;}
#welcome h3 {width:290px; height:30px; background:url(../images/homeWelcome.jpg) top left no-repeat; text-indent:-2000em;}
#welcome #welcomeArea {background:url(../images/welcomePic.png) right 10px no-repeat; padding-top:20px;}
#welcome #welcomeMsg {background:url(../images/welcomeMsg.gif) top left no-repeat; width:593px; height:120px; padding-bottom:20px;}
#welcome #welcomeMsg p {text-indent:-2000em;}

/* Content */
.contentArea {width:980px; margin:0 auto;}
#content {padding:20px 0; background:url(../images/col3Bg.gif) top right repeat-y;}
.module {color:#474747; font-size:1.2em; margin-bottom:30px;}
.white{color:#FFFFFF; font-size:1.2em; margin-bottom:30px;}
.price{color:#6a6969; font-size:1.5em; margin-bottom:30px; font-weight:bold}
.smallerRed {color:#c00000; font-size:0.9em;}
.smallerGrey {color:#848484; font-size:0.9em;}
.moduleFooter {border-top:1px solid #CCC; padding-top:5px;}
.moduleFooterHome {width:360px; border-top:1px solid #CCC; padding-top:5px; float:right;}
.subSeperator {border-top:1px solid #DFDFDF; padding-top:10px;}
.clearFloat {clear:both;}

/* Structure */
#contentWrapper {width:730px; float:left;}
#paneLeft {width:352px; float:left; margin-right:12px; padding-right:12px;}
#paneMiddle {width:352px; float:left;}
#paneBanner {float:right;}
#pane2Col {width:730px; float:left; background:url(../images/moduleSeperator.gif) top left repeat-y;}
#paneImgWithText .module {float:left; width:330px; padding-left:10px; margin-left:10px; border-left:1px dashed #CCC; padding-bottom:40px; margin-bottom:0;}

/* Text & Link */
/*h3, h4 {text-indent:-2000em;}*/
h5 {padding-bottom:10px;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a span {display:none;}
h3 {padding-bottom:20px;}
.module p {padding-bottom:20px;}
.clientName {color:#17ac4d; text-align:right;}
.linkMore {color:#ef8220; font-style:italic; font-size:1em; float:right;}
.linkMoreGreen {color:#0f7f03; font-size:1em; text-decoration:underline;}
.linkMoreSmall {color:#0f7f03; text-decoration:underline;}
.linkMoreSmaller { font-size:9px; color:#000000;}
.linkMoreSmallerLink { font-size:9px; color:#0f7f03; text-decoration:underline;}

/* Button */
#btnGo, #btnFacebook, #btnTwitter, #btnYouTube {display:block;}
#btnGo {background:url(../images/btnGo.gif) top left no-repeat; width:31px; height:25px;}
#btnFacebook {background:url(../images/btnFacebook.jpg) top left no-repeat; width:87px; height:47px;}
#btnTwitter {background:url(../images/btnBlog.jpg) top left no-repeat; width:64px; height:47px;}
#btnYouTube {background:url(../images/btnYoutube.jpg) top left no-repeat; width:85px; height:47px;}

/* Picture */
.picRight {float:right; margin:0 0 10px 10px;}
.picLeft {float:left; margin:0 10px 10px 0;}

/* Module Details */
#socialBookMark li {float:left; display:block; margin-right:10px;}
#mediaVideo {margin:0 0 20px 0;}
#bannerList {margin-top:-50px; position:relative; z-index:10;}
#bannerList li {margin-bottom:10px;}

/* Contact Area */
#contactArea {background-color:#efefef;}
#contactArea address {background:url(../images/address.gif) 0 30px no-repeat; width:170px; height:90px; display:block; float:left}
#contactArea #contactSeperator {background:url(../images/contactSeperator.jpg) top left no-repeat; padding-left:20px; float:left; margin-left:20px;}
#contactArea #contactDetails {background:url(../images/contactDetails.gif) top left no-repeat; width:290px; height:90px;}
#contactArea address, #contactSeperator {padding:30px 0;}
#contactArea address p, #contactDetails p {display:none;}

/* Footer */
#logoFooter {background:url(../images/logoFooter.gif) top left no-repeat; width:230px; height:100px; display:block; float:right; margin-top:30px;}
#footer {background:url(../images/footerBg.jpg) top left repeat-x;}
#footer .contentArea {color:#e5e5e5; padding:20px 0 10px;}


/* Inside Page */
#intro {background:url(../images/introBg.jpg) top left repeat-x; height:270px;}
#intro2 {background:url(../images/introBg2.jpg) top left repeat-x; height:138px;}
#introFranchBg {background:url(../images/franchise_bg.gif) top left repeat-x; height:302px;}
#introComm {background:url(../images/comm_introBg.jpg) top left repeat-x; height:352px;}
#introComm #introPic {float:right;}
#introComm #introMsg {background:url(../images/comm_introMsg.jpg) top left no-repeat; width:651px; height:314px; float:left; }
#intro #introPic {float:right;}
#intro #introMsg {background:url(../images/residentialIntro.jpg) top left no-repeat; width:610px; height:180px; float:left; margin-top:20px;}
#intro2 #introMsg {background:url(../images/residentialTitle.jpg) 0 40px no-repeat; width:250px; height:250px;}
#intro2 #introComm {background:url(../images/commercialTitle.jpg) 0 40px no-repeat; width:250px; height:250px;}
#intro2 #introMsgAboutus {background:url(../images/aboutusTitle.jpg) 0 40px no-repeat; width:250px; height:250px;}
#intro2 #introEmploy {background:url(../images/employmentTitle.jpg) 0 40px no-repeat; width:250px; height:250px;}
#intro2 #introContactus {background:url(../images/contactusTitle.jpg) 0 40px no-repeat; width:250px; height:250px;}
#intro2 #introShop {background:url(../images/shopTitle.jpg) 0 40px no-repeat; width:250px; height:250px;}
#intro2 #introMedia {background:url(../images/mediaTitle2.jpg) 0 40px no-repeat; width:250px; height:250px;}
#introMsg p {display:none;}
#introFranchBg #introPic {float:bottom; margin-top:27px;}


/* Slider */
#jFlowSlide{ background:#FFF; font-family: Arial; font-size:1em;}
#myController { font-family: Verdana, Arial, Helvetica, sans-serif; color:#47474; font-size:0.8em; padding:2px 0;  width:350px;}
#myController span.jFlowSelected { color:#000;  font-weight:bold; background:#FFF; margin-right:0px; }

.slide-wrapper { padding: 0px; }
.slide-details { width:315px; float:left; margin-left:0px;}
.slide-details h2 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em; margin-top:0px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#0f7f03; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { color:#000;  font-weight:bold;}