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

   Computer Score - Home Stylesheet
   Author: Pixel House
   Website: www.pixel-house.com.au

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

#greybar-wrap { background: #e5e5e5; padding: 0; height: 324px; }
#greybar { background: url(../home/astro.jpg) no-repeat 345px 0; height: 324px; position: relative; }

.rAbout { width: 260px; padding: 0 0 0 30px; }
.rAbout span { font-weight: bold; }

#australia { background: url(../images/australia.gif) no-repeat 30px 1px; height: 97px; }

#get-in-touch { float: left; width: 260px; background: url(../images/get-in-touch-bg.jpg) no-repeat 0 0; padding: 31px 0 0 30px; height: 150px; }
#get-in-touch h3 { background: url(../images/get-in-touch.gif) no-repeat 0 0; text-indent: -5000px; height: 17px; }
#get-in-touch p a { color: #4c4c4c; }

#new-centre { width: 259px; float: right; border-top: solid 1px #ccc; padding: 30px 0 10px 0; }
#new-centre h3 { background: url(../images/new-centre.gif) no-repeat 0 0; text-indent: -5000px; height: 22px; margin: 0; }
#new-centre p a { color: #4c4c4c; }

#right p a:hover { color: #000; }

#left { width: 640px; padding-top: 55px; background: url(../home/astro-feet.jpg) no-repeat 340px 0; }

.homeBox { float: left; width: 290px; padding-bottom: 36px; }
.homeBox img { margin: 0; }
.homeBox a img { float: left; border: solid 1px #ccc; padding: 5px; }
.homeBox a img:hover { border: solid 5px #25216b; padding: 1px; }
.homeBox h2 { height: 21px; overflow: hidden; }
.homeBox h2 a { height: 21px; float: left; width: 100%; }
.homeBox h2 a span { display: none; }
.homeBox p, .homeBox h2 { float: right; width: 180px; margin: 0; }
#h-interface, #h-pointofsale { padding-right: 30px; }

#h-interface h2 { background: url(../home/bowlers.gif) no-repeat 0 0; }
#h-hardware h2 { background: url(../home/technicians.gif) no-repeat 0 0; }
#h-pointofsale h2 { background: url(../home/front-desk.gif) no-repeat 0 0; }
#h-finance h2 { background: url(../home/management.gif) no-repeat 0 0; }
#h-animation h2 { background: url(../home/animation.gif) no-repeat 0 0; height: 22px; }

#h-finance { width: 295px; }
#h-finance h2, #h-finance p { width: 185px; }
#h-animation { float: left; width: 625px; padding: 0 15px 200px 0; background: url(../home/characters.jpg) no-repeat 0 bottom; margin-left: -15px; }
#h-animation p, #h-animation h2 { width: 500px; }

#intro { width: 368px; float: left; padding: 44px 0 0 0; }
#intro h1 { font-size: 1.05em; color: #4b4b4b; line-height: 1.35em; border-top: solid 1px #b7b7b7; padding: 20px 10px 0 0; font-weight: normal; margin: 0 0 1.0em 0; width: 358px; }
#intro #presents { font-size: 1.05em; color: #272472; margin: 0 0 28px 0; background: url(../home/duo.gif) no-repeat 0 bottom; padding: 0 0 33px 0; }
#intro #presents span { display: none; }

#astro-png { background: url(../home/astro.png) no-repeat 0 0; width: 75px; height: 278px; position: absolute; top: 46px; left: 490px; z-index: 1000; }


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

#everyone { text-indent: -5000px; position: absolute; left: 488px; top: 65px; width: 445px; background: url(../home/slogan.gif) no-repeat right 0; }

#screens { width: 465px; height: 257px; overflow: hidden; float: left; position: absolute; left: 490px; top: 67px; }
.panel { float: left; width: 465px; height: 257px; }

.stripViewer { /* This is the viewing window */
    position: absolute;
    overflow: hidden;
    margin: auto;
    width: 465px; /* Also specified in  .stripViewer .panelContainer .panel  below */
    height: 257px;
    clear: both;
    z-index: 100;
    left: 490px; top: 67px;
}

.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: 37px; height: 42px; text-indent: -5000px; display: block; position: absolute; top: 307px; z-index: 600; outline: none; }
.stripNavL a { background: url(../home/arrow-left.gif) no-repeat 0 0; float: left; left: 870px; }
.stripNavR a { background: url(../home/arrow-right.gif) no-repeat 0 0; float: right; left: 907px; }
.stripNavL a:hover, .stripNavR a:hover { background-position: 0 -42px; cursor: hand; cursor: pointer; outline: none; }

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

.panelText { width: 151px; padding: 63px 20px 0 0; float: right; }
#screens .border { background: url(../home/photo-bg.png) no-repeat 0 0; padding: 9px 5px 0 9px; float: left; margin: 55px 0 0 21px; }
#screens .panel p { color: #adadbe; }
#screens h3 { color: #fff;  font-size: 0.8em; height: 20px; width: 100%; text-indent: -5000px; }

#f-bowlers { background: url(../home/f-bowlers.gif) no-repeat 0 0; }
#f-technicians { background: url(../home/f-technicians.gif) no-repeat 0 0; }
#f-frontdesk { background: url(../home/f-frontdesk.gif) no-repeat 0 0; }
#f-management { background: url(../home/f-management.gif) no-repeat 0 0; }
#f-animation { background: url(../home/f-animation.gif) no-repeat 0 0; }