body,h1,h2,h3,h4,h5,h6,p,div,ol,ul,li,img { margin:0px; padding:0px; font-family: Arial, Helvetica, sans-serif; list-style:none; border:none}

body { background:url(../images/bg.gif) top left repeat-x #8da2bd;}
#pageHolder { width:100%; float:left; background:url(../images/mainbg.jpg) top center no-repeat}

.marginHolder { width:1000px; margin:0px auto}

#navHolder { width:1000px; height:70px; float:left;}
ul.navi { width:660px; height:50px; padding-top:20px; padding-left:20px; float:left}
ul.navi li { float:left; margin:0px 10px; font-size:16px; color:#fff;}
ul.navi li a { color:#fff; text-decoration:none}
ul.navi li a:hover { color:#fff; text-decoration:underline}
#contactbox {float:right; margin-right:60px; margin-top:15px; width:253px;}
#contactbox p {color:#fff; font-size:24px; font-weight:bold; width:263px; float:left; text-align:right}

#banner { width:1000px; height:398px; float:left; background:url(../images/banner-bg.gif) top left no-repeat; }
#bannerText { width:416px; float:left; margin-top:260px; text-align:right}
#bannerText p { font-size:18px; font-weight:bold; color:#fff; line-height:24px; margin-right:5px}
#bannerButton { width:202px; height:50px; float:right; background:url(../images/banner-button.gif) top left no-repeat; margin-top:20px;}
#bannerButton p { font-size:12px; font-weight:bold; color:#fff; line-height:24px; text-align:center;margin-top:10px}
#bannerButton p a { color:#fff; text-decoration:none}
#bannerButton p a:hover { color:#fff; text-decoration:underline}

#contentHolder { width:1000px; float:left; padding:40px 0px;}
#left { padding-left:30px; width:600px; float:left}
#left h1 { font-size:24px; color:#2e2e2e; padding-bottom:10px;}
#left h2 { font-size:18px; color:#2e2e2e; padding-bottom:10px;}
#left p { font-size:12px; color:#2e2e2e; padding-bottom:10px; list-style:18px; text-align:justify}
#left p a {color:#2e2e2e; text-decoration:none;}

#right { padding-right:30px; width:320px; float:right; padding-left:20px;}

#boxHolder { width:1000px; float:left; margin-bottom:30px}
.box { width:201px; background:url(../images/box-bg.gif) top left no-repeat; float:left; margin-left:35px;; padding-bottom:30px;}
.box h2 { font-size:16px; width:191px; float:left; padding-left:10px; padding-top:10px; padding-bottom:10px}
.box img {float:right; margin-top:5px; margin-right:10px; margin-left:10px;}
.box p { font-size:12px; font-style:inherit; padding-left:10px; padding-top:10px; padding-right:10px;}
.box p a { background: url(../images/box-button.gif) top left no-repeat; width:81px; height:22px; float:left; padding-top:8px; padding-left:20px; color:#fff; text-decoration:none}
.box p a:hover { text-decoration:underline}

#textHolder { width:940px; float:left; padding:0px 30px;}
#textHolder h2 { font-size:16px; padding-bottom:15px;color:#2e2e2e;}
#textHolder p { font-size:12px; padding-bottom:15px;color:#2e2e2e;list-style:18px; text-align:justify}

.designBox { float:left; width:300px; margin-right:20px;}
.designBox h3 { font-size:14px; padding-bottom:15px;color:#2e2e2e;}
.designBox p { font-size:12px; padding-bottom:15px;color:#2e2e2e;}
.designBox img { float:left; margin-right:20px;}
.logoHolder {float:left; width:600px;}
.logoHolder img { float:left; border:none}

#footerHolder { width:100%; float:left; background:url(../images/footer-bg.gif) top left repeat-x #383838; padding:20px 0px;}
#footerLeft { width:600px; padding-left:30px; float:left}
#footerLeft h2 { font-size:18px; color:#fff; text-align:center;}
#footerLeft p { font-size:12px; color:#fff;}
#footerRight { width:300px; float:right}
#footerRight p {font-size:12px; color:#fff; padding-top:20px}
#footerRight p a {color:#fff; text-decoration:none}
#footerRight p a:hover {text-decoration:underline}

.workBox {width:304px; height:auto; border: 1px solid #2e2e2e; margin-top:10px; padding:7px;}
.workBox h2 {font-size:16px;color:#2e2e2e; padding-bottom:10px;}
.workBox p {font-size:12px;color:#2e2e2e; padding-bottom:10px; text-align:justify}
.workText {margin-top:5px; margin-bottom:5px; line-height:16px; font-weight:normal;}
.workText a { color:#194e14; text-decoration:none; font-weight:bold;}
.workText a:visited { color:#194e14;}
.workText a:hover { color:#194e14; text-decoration:underline;}

.formWidth { width:200px;}
.orangeText { color:#a31111;}
#contactHolder {width:auto; height:auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#a4a4a4;}

.formWidth2 { width:350px;}
ul.featureList {width:450px;}
ul.featureList li {font-size:14px; color:#2e2e2e; padding-left:15px; padding-right:30px; padding-bottom:5px; background:url(../images/tick.png) top right no-repeat}
.clientHolder {float:left; width:940px; padding-bottom:10px;}
.clientText {float:left; padding-left:20px; width:620px;}
.clientText h3 { font-size:16px; color:#2e2e2e; margin-bottom:10px;}
.clientText p {text-align:justify;}
.clientText p a { font-weight:bold; text-decoration:none; color:#2e2e2e}
.clientImg {float:left; width:300px; padding-bottom:10px;}
.clientImg img { border:none}
.clientImg p a { font-weight:bold; text-decoration:none; color:#2e2e2e}
.stripViewer { /* This is the viewing window */
    position: relative;
    overflow: hidden;
    margin: auto;
    width: 630px; /* Also specified in  .stripViewer .panelContainer .panel  below */
    height: 542px;
    clear: both;
    z-index: 100;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
    position: relative;
    left: 0; top: 0;
    width: 100%;
    list-style-type: none;
    z-index: 100;
    /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
.stripNav { display: none; }

.stripNavL a, .stripNavR a { width: 41px; height: 47px; text-indent: -5000px; display: block; position: absolute; top: 135px; z-index: 600; outline: none; }
.stripNavL a { background: url(../images/gallery-arrow-left.png) no-repeat 0 0; float: left; left: -19px; }
.stripNavR a { background: url(../images/gallery-arrow-right.png) no-repeat 0 0; float: right; left: 608px; }
.stripNavL a:hover, .stripNavR a:hover { background-position: 0 -47px; cursor: pointer; outline: none; }
#gallery { width: 630px; float: right; margin: 0 0 70px 0; position: relative; background: url(../images/loading.gif) no-repeat center 133px; }
#gshadow { width: 630px; height: 271px; background: url(../images/gallery-shadow.png) no-repeat 0 -12px; position: absolute; top: 0; left: 0; z-index: 500; }
#screens, #screens2 { width: 630px; height: 542px; overflow: hidden; float: left; }
#screens2 { height: 460px; }
.panel { float: left; width: 630px; height: 542px; }
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
    position: relative;
    left: 0; top: 0;
    width: 100%;
    list-style-type: none;
    z-index: 100;}
#screens { height: 318px; }
.panel { float: left; width: 630px; height: 542px; }
#screens .panel img { border-bottom: solid 5px #000; float: left; }
#screens .panel p { width: 630px; margin: 0; border-bottom: solid 5px #000; margin-top: 278px; font-size: 0.7em; float: left; }
#screens .panel p a { color: #545252; width: 300px; float: left; padding: 12px 15px 7px 15px; float: left; text-decoration: none; background: #000; }
#screens .panel p a span { font-weight: bold; color: #868686; }
#screens .panel p a:hover { background: url(../images/featured-arrow.gif) no-repeat 306px 15px #000; color: #ccc; }
#screens .panel p a:hover span { color: #fff; }
#gallery { margin: 0; }

#img1 { background: url(../images/gallery/master-painters-sa.jpg) no-repeat 0 0; }
#img2 { background: url(../images/gallery/oasis-carwash.jpg) no-repeat 0 0; }
#img3 { background: url(../images/gallery/signsation.jpg) no-repeat 0 0; }
#img4 { background: url(../images/gallery/parklane-relocation.jpg) no-repeat 0 0; }