/* ---------------------------------------------------------------------------------

   Master Stylesheet
   Author: Pixel House
   Website: www.pixel-house.com.au

--------------------------------------------------------------------------------- */

body { background: #000; margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; }
p, ul { margin: 0 0 1.4em 0; }
p, ul li, ol li, table td, table th { line-height: 1.4em; color: #666; font-size: 0.8em; }
p a { color: #666; }
p a:hover { color: #000; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em 0; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000; }
h1 { color: #666; font-weight: normal; font-size: 1.05em; line-height: 1.35em; margin: 0 0 1.6em 0; }
h2, h3 { color: #000; font-size: 0.8em; margin: 0 0 0.2em 0; }
h2 a { text-decoration: none; }
h2 a:hover { text-decoration: underline; }
ul li p, ul li h2 { font-size: 1.0em; }
ul li a { color: #666; }
a img { border: none; }
hr { display: none; }

#wrap-outer { width: 100%; float: left; background: url(../images/wrap-outer-bg.png) repeat-y center 0 #dee0c8; }
#wrap { width: 100%; float: left; background: url(../images/wrap-bg.png) repeat-x 0 bottom; }
#main-outer { width: 100%; float: left; background: url(../images/main-outer-bg.jpg) no-repeat center 0; }
#main, #subfooter, #footer { width: 960px; margin: 0 auto; padding: 0 15px; }
#header { width: 100%; float: left; height: 101px; background: url(../images/header-div.jpg) no-repeat 0 bottom; }
#content { width: 100%; float: left; padding: 30px 0; }
#plane-path { width: 100%; background: url(../images/path.gif) no-repeat center 0; float: left; }

#header #logo { float: left; background: url(../images/logo.gif) no-repeat 0 0; margin: 40px 0 0 0; }
#header #logo a { width: 160px; height: 41px; float: left; }
#header #logo a span { display: none; }
#printlogo { display: none; }
#nav { margin: 57px 0 0 0; padding: 0; float: right; }
#nav li { float: left; list-style-type: none; padding: 0 0 0 15px; font-size: 0.7em; line-height: 1.0em; text-align: center; }
#nav li a { color: #9e9f98; text-decoration: none; padding: 2px 0; float: left; }
#nav li a:hover { border-bottom: solid 1px #bdbfb5; color: #666; }

#pHome #nav #n01 a,
#pAbout #nav #n02 a,
#pServices #nav #n03 a,
#pWork #nav #n04 a,
#pContact #nav #n05 a
{ font-weight: bold; color: #666; }

#home { width: 290px; float: left; background: url(../images/h1-hi.gif) no-repeat 1px 24px; padding: 123px 0 15px 0; }
#home h1 { margin: 0; }
#home p { color: #666; font-weight: normal; font-size: 1.0em; }
#home h1, #pStandards h1 {  }
#home h1 a, #home p a { color: #a8a9a1; }
#home h1 a:hover, #home p a:hover { color: #000; }


/* ---------------------------------------------------------------------------------
   FOLIO
--------------------------------------------------------------------------------- */

#intro { float: right; width: 660px; padding: 34px 0 59px 0; margin: 0; }
#content .imgReplace { float: left; height: 54px; }
#content .imgReplace span { display: none; }

#h1-work { width: 300px; background: url(../images/h1-work.gif) no-repeat 0 0; margin: 22px 0 0 0; }
#h1-services { width: 100%; background: url(../images/h1-services.gif) no-repeat 0 0; margin: 24px 0 23px 0; }
#h3-more { width: 200px; background: url(../images/h3-more.gif) no-repeat 0 0; margin: 24px 0 0 0; }

#featured { float: left; width: 960px; background: url(../images/header-div.jpg) no-repeat 0 0; padding: 30px 0; margin: 0; }
#featured h2 a { color: #000; }
#featured li { list-style-type: none; float: left; width: 300px; padding: 0 30px 0 0; }
#featured li img { margin: 0 0 20px 0; }
#featured .noPadd { padding: 0; }

#more { float: left; width: 960px; background: url(../images/header-div.jpg) no-repeat 0 0; padding: 0; }
#more ul { float: right; width: 645px; padding: 20px 0 0 0; margin: 0 0 16px 0; }
#more ul li { float: left; width: 210px; list-style-type: none; padding: 0; }
#more ul li a { text-decoration: none; float: left; width: 180px; padding: 10px 15px; }
#more ul li a span { color: #000; width: 180px; float: left; }
#more ul li a:hover { background: #fff; }
#more ul li a:hover, #more ul li a:hover span { background: #fff; }

#details { width: 330px; float: left; background: url(../images/h1-work.gif) no-repeat 0 22px; padding: 96px 0 15px 0; }
#details h1 { margin: 0 0 0.3em 0; }
#details p { width: 290px; margin: 0 0 1.0em 0; }
#details p a { text-decoration: none; }
#details ul { padding: 0; margin: 0 0 30px 0; }
#details ul li, #details .sm { list-style-type: none; font-size: 0.7em; }
#details h2 { padding-top: 10px; }
#details .view { background: url(../images/details-view-bg.gif) repeat-y 0 0 #dadbcf; width: 290px; float: left; border-top: solid 1px #c7c9b9; border-bottom: solid 1px #c7c9b9; padding: 17px 20px 8px 20px; }
#details .view h3 { margin: 0; }
#details .view p a, #details .back a { text-decoration: underline; }
#gallery { width: 630px; float: right; margin: 0 0 30px 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; }


/* ---------------------------------------------------------------------------------
   CODA STYLES
--------------------------------------------------------------------------------- */

#screens, #screens2 { width: 630px; height: 542px; overflow: hidden; float: left; }
#screens2 { height: 460px; }
.panel { float: left; width: 630px; height: 542px; }

.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; }

#pHome #screens { height: 318px; }
#pHome #screens .panel img { border-bottom: solid 5px #000; float: left; }
#pHome #screens .panel p { width: 630px; margin: 0; border-bottom: solid 5px #000; margin-top: 278px; font-size: 0.7em; float: left; }
#pHome #screens .panel p a { color: #545252; width: 300px; float: left; padding: 12px 15px 7px 15px; float: left; text-decoration: none; background: #000; }
#pHome #screens .panel p a span { font-weight: bold; color: #868686; }
#pHome #screens .panel p a:hover { background: url(../images/featured-arrow.gif) no-repeat 306px 15px #000; color: #ccc; }
#pHome #screens .panel p a:hover span { color: #fff; }
#pHome #gallery { margin: 0; }

#img1 { background: url(../home/ttm-group.jpg) no-repeat 0 0; }
#img2 { background: url(../home/health-products.jpg) no-repeat 0 0; }
#img3 { background: url(../home/computer-score.jpg) no-repeat 0 0; }

#gallery blockquote { margin: 0; float: left; width: 510px; padding: 20px 60px 0 60px; font-size: 0.7em; text-align: center; color: #848484; line-height: 1.4em; background: url(../images/blockquote.gif) no-repeat 0 25px; }
#gallery blockquote span { color: #666; font-weight: bold; }


/* ---------------------------------------------------------------------------------
   SERVICES
--------------------------------------------------------------------------------- */

.sbox, .accounting { width: 300px; padding: 0 30px 15px 0; float: left; }
.nopadd { padding-right: 0; }
.accounting { width: 580px; background: url(../images/accounting-bg.gif) repeat-y 0 0; padding: 20px 25px 10px 25px; margin: 3px 30px 0 0; border-top: solid 1px #cdcec2; border-bottom: solid 1px #cdcec2; }
.accounting h2 { padding-top: 3px; }
.accounting img { float: right; margin: -2px 0 0 40px; }

/* ---------------------------------------------------------------------------------
   STANDARDS
--------------------------------------------------------------------------------- */

#pStandards #content { background: url(../images/h1-standards.gif) no-repeat 0 52px; padding-top: 126px; }
#pAbout #content { background: url(../images/h1-about.gif) no-repeat 0 52px; padding-top: 126px; padding-bottom: 20px; }
#pContact #content { background: url(../images/h1-getintouch.gif) no-repeat 0 53px; padding: 126px 0 0 0; height: 350px; }
#pContact.questionaire #content { height: auto; }
#pHosting #content { background: url(../images/h1-hosting.gif) no-repeat 0 53px; padding-top: 126px; }
#pAbout .logos { padding-top: 6px; }
#pAbout h1 { float: left; width: 100%; }
.wide { width: 600px; padding-right: 0; }

/* ---------------------------------------------------------------------------------
   HOSTING
--------------------------------------------------------------------------------- */

#hosting { width: 100%; margin: -20px 0 30px 0; border-collapse: collapse; }
#hosting th { background: url(../images/hosting-th.gif) repeat-x 0 0 #8bc401; padding: 12px 0; color: #fff; }
#hosting td { text-align: center; padding: 12px 0; border-bottom: solid 1px #c1c2b9; border-right: solid 1px #c1c2b9; background: #dee0c8; }
#hosting .noBG { background: none; }
#hosting .left { width: 285px; text-align: left; background: #fff; padding-left: 15px; border: solid 1px #c1c2b9; }
#hosting td.h2 { background: #c9cbb1; border-bottom: solid 1px #b0b298; }
#hosting th.h2 { background: url(../images/hosting-th-2.gif) repeat-x 0 0 #6fb100; }

/* ---------------------------------------------------------------------------------
   SUBFOOTER
--------------------------------------------------------------------------------- */

#subfooter-wrap { float: left; width: 100%; background: url(../images/subfooter-wrap-bg.jpg) repeat-y center 0 #82ba00; height: 15px; }
#subfooter { height: 15px; }

/* -- SubFooter - homepage styles -- */

#pHome #content { padding-bottom: 0px; }
.homebox { float: left; padding: 41px 30px 20px 0; width: 300px; }
.homebox h2 { width: 100%; height: 29px; text-indent: -5000px; }

#homebox1 h2 { background: url(../images/h2-meet.gif) no-repeat 0 0; }
#homebox2 h2 { background: url(../images/h2-create.gif) no-repeat 0 0; }
#homebox3 h2 { background: url(../images/h2-work.gif) no-repeat 0 0; }
#homebox1 { background: url(../images/header-div.jpg) no-repeat 0 0; }
#homebox3 { width: 240px; padding: 41px 30px 37px 30px; background: url(../images/homebox3-bg.jpg) no-repeat 0 0; }

#project { padding: 2px 0 15px 0; margin: 0; }
#project a { width: 240px; height: 18px; background: url(../images/project-q.gif) no-repeat 0 1px; display: block; }
#project a:hover { background-position: 0 bottom; }
#project a span { display: none; }

#subHome { float: left; width: 100%; margin-top: -1px; }

/* ---------------------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------------------- */

#footer-wrap { float: left; width: 100%; }
#ftop { float: left; width: 100%; border-bottom: solid 1px #121212; padding: 20px 0 22px 0; }
#fbot { float: left; width: 100%; padding: 21px 0 60px 0; }
#footer p { color: #333333; margin: 0; }
#footer p a { color: #333333; text-decoration: none; }
#footer p a:hover { color: #dee0c8; text-decoration: underline; }

#footer #twitter { float: right; margin: 17px 0 0 0; }
#twitter a { width: 77px; height: 15px; background: url(../images/twitter.gif) no-repeat 0 0; float: left; }
#twitter a span { display: none; }
#twitter a:hover { background-position: 0 bottom; }

#footer #phone, #footer #email { width: 150px; float: left; }
#footer #copyright { width: 300px; float: left; padding-left: 30px; }
#footer #phone span, #footer #email span, #footer #copyright span { font-weight: bold; color: #4c4c4c; width: 100%; float: left; }
#footer #copyright span { width: 300px; }

#fbot ul { margin: 0; padding: 0; }
#fbot ul li { list-style-type: none; float: left; font-size: 0.7em; padding: 0 7px; border-left: solid 1px #121212; line-height: 1.0em; }
#fbot ul li a { color: #333333; text-decoration: none; }
#fbot #noDiv { padding-left: 0; border: none; }
#fbot ul li a:hover { text-decoration: underline; color: #dee0c8; }

#fbot #fNav { float: left; }
#fbot #valid { float: right; }
#fbot #valid li { border: none; padding-right: 0; }
#fbot #valid li a { padding-left: 16px; background: url(../images/tick.gif) no-repeat 0 2px; }
#fbot #valid li a:hover { background: url(../images/tick.gif) no-repeat 0 -13px; }