body { margin: 0; padding: 0; background: #8b826c; font-family: arial, sans-serif; font-size: 62.5%; } #headerBar {height: 60px; width: 100%; background: transparent url(/images/interface/top-bar-background.gif) repeat-x top left; margin: 0; padding: 0;} #logo {position: absolute; top: 0px; left: 0px; z-index: 100; display: block; margin: 0; padding: 0; border: 0;} #largeLogo {position: absolute; top: 0px; left: 0px; z-index: 100; display: block; margin: 0; padding: 0; border: 0;} #characters {position: absolute; top: 0px; left: 170px; margin: 0; padding: 0; height: 80px; list-style-type: none; z-index: 100;} #characters li {margin: 0; padding: 0; float: left;} #characters li a {display: block; margin: 0; padding: 0; width: 40px; height: 80px;} #characters li a img {border: 0;} #textToolbar {position: absolute; top: 0px; right: 200px; margin: 0; padding: 0; width: 180px;} #fontSelector {position: absolute; top: 0px; right: 300px; height: 50px; width: 65px; background: transparent url(/images/interface/top-bar-links.gif) no-repeat 0px 0px;} #fontSelector select {font-size: 12px; margin: 10px 0px 0px 0px; width: 65px;} #sizeSelector {position: absolute; top: 0px; right: 250px; margin: 0px 0px 0px 80px; padding: 0; list-style-type: none; z-index: 400;} #sizeSelector li {margin: 0; padding: 0; float: left;} #sizeSelector li a {display: block; margin: 0; padding: 0; height: 50px; text-decoration: none; background-image: url(/images/interface/top-bar-links.gif); background-repeat: no-repeat;} #sizeSelector li a span {display: none;} #normal {width: 15px; height: 50px; background-position: -65px 0px;} #normal:hover {background-position: -65px -50px;} #larger {width: 15px; height: 50px; background-position: -80px 0px;} #larger:hover {background-position: -80px -50px;} #largest {width: 15px; height: 50px; background-position: -95px 0px;} #largest:hover {background-position: -95px -50px;} #topLinks {position: absolute; top: 0px; right: 10px; margin: 0; padding: 0; list-style-type: none;} #topLinks li {margin: 0; padding: 0; float: right;} #topLinks li a {display: block; margin: 0; padding: 0; height: 50px; text-decoration: none; background-image: url(/images/interface/top-bar-links.gif); background-repeat: no-repeat;} #topLinks li a span {display: none;} #contact {width: 50px; height: 50px; background-position: -260px 0px;} #contact:hover {background-position: -260px -50px;} #links {width: 50px; height: 50px; background-position: -210px 0px;} #links:hover {background-position: -210px -50px;} #team {width: 50px; height: 50px; background-position: -160px 0px;} #team:hover {background-position: -160px -50px;} #home {width: 50px; height: 50px; background-position: -110px 0px;} #home:hover {background-position: -110px -50px;} #pageContainer { position: relative; margin: 20px auto; width: 990px; padding: 0; } #homeContentWindow { margin: 0px auto; padding: 0; width: 680px; height: 480px; background: url(/images/interface/infoBox.gif) no-repeat top left; z-index: 10; position: relative; } #homeContentWindow h1 {margin: 0; padding: 25px 0px 0px 25px; font-weight: bold; font-size: 2em; text-align: center; font-family: Comic Sans MS, Comic Sans, fantasy;} span.green {color: #3db449;} #homeContentContainer {position: absolute; top: 70px; left: 25px; width: 630px; height: 385px; margin: 0; padding: 0; overflow: hidden; border: 0px;} #homeContentContainer h2 {margin: 0; padding: 10px 0px 5px 25px; font-weight: bold; font-size: 1.4em;} #homeContentContainer p {margin: 0; padding: 5px 25px 5px 25px; font-size: 1.2em;} #homeContentContainer a {float: right; margin: 0; padding: 0; display: block; background-image: url(/images/interface/homepage-characters.jpg); background-repeat: no-repeat;} #homeContentContainer a span {display: none;} #underThree {width: 103px; height: 135px; background-position: 0px -70px;} #underThree:hover {background-position: -0px -275px;} #underFive {width: 103px; height: 135px; background-position: -103px -70px;} #underFive:hover {background-position: -103px -275px;} #sixSeven {width: 103px; height: 135px; background-position: -206px -70px;} #sixSeven:hover {background-position: -206px -275px;} #eightNine {width: 103px; height: 205px; background-position: -309px 0px;} #eightNine:hover {background-position: -309px -205px;} #tenEleven {width: 103px; height: 205px; background-position: -412px 0px;} #tenEleven:hover {background-position: -412px -205px;} #twelveThirteen {width: 103px; height: 205px; background-position: -515px 0px; margin: 0px 10px 0px 0px;} #twelveThirteen:hover {background-position: -515px -205px;} #contentWindow { position: absolute; top: 0px; right: 0px; width: 680px; height: 480px; background: url(/images/interface/infoBox.gif) no-repeat top left; z-index: 10; } #contentContainer {position: absolute; top: 70px; left: 25px; margin: 0; padding: 0; overflow: hidden; border: 0px;} #slider {position: absolute; top: 465px; left: 0px; margin: 0px; padding: 0px; width: 680px; height: 20px; background: transparent url(/images/interface/bottom-slider.gif) no-repeat bottom;} #menuBar {position: absolute; top: 20px; left: 20px; background: transparent url(/images/interface/icons.gif) no-repeat top left; width: 640px; height: 40px; overflow: hidden;} #title {position: absolute; top: -7px; right: 15px; font-family: Comic Sans MS, Comic Sans, fantasy;} #menuIcons {margin: 0; padding: 0; list-style-type: none; display: none;} #menuIcons li {margin: 0; padding: 0;} #menuIcons li a {display: block; margin: 0; padding: 0; text-decoration: none; background-image: url(/images/interface/icons.gif); background-repeat: no-repeat;} #menuIcons span {display: none;} #manual {position: absolute; top: 0px; left: 0px; width: 64px; height: 40px; background-position: 0px -40px;} #manual.highlight {background-position: 0px -120px;} #manual:hover {background-position: 0px -80px;} #lookInside {position: absolute; top: 0px; left: 64px; width: 64px; height: 40px; background-position: -64px -40px;} #lookInside.highlight {background-position: -64px -120px;} #lookInside:hover {background-position: -64px -80px;} #samples {position: absolute; top: 0px; left: 128px; width: 64px; height: 40px; background-position: -128px -40px;} #samples.highlight {background-position: -128px -120px;} #samples:hover {background-position: -128px -80px;} #video {position: absolute; top: 0px; left: 192px; width: 64px; height: 40px; background-position: -192px -40px;} #video.highlight {background-position: -192px -120px;} #video:hover {background-position: -192px -80px;} #music {position: absolute; top: 0px; left: 256px; width: 64px; height: 40px; background-position: -256px -40px;} #music.highlight {background-position: -256px -120px;} #music:hover {background-position: -256px -80px;} #gallery {position: absolute; top: 0px; left: 320px; width: 64px; height: 40px; background-position: -320px -40px;} #gallery.highlight {background-position: -320px -120px;} #gallery:hover {background-position: -320px -80px;} #comments {position: absolute; top: 0px; left: 384px; width: 64px; height: 40px; background-position: -384px -40px;} #comments.highlight {background-position: -384px -120px;} #comments:hover {background-position: -384px -80px;} #training {position: absolute; top: 0px; left: 448px; width: 64px; height: 40px; background-position: -448px -40px;} #training.highlight {background-position: -448px -120px;} #training:hover {background-position: -448px -80px;} #ordering {position: absolute; top: 0px; left: 512px; width: 64px; height: 40px; background-position: -512px -40px;} #ordering.highlight {background-position: -512px -120px;} #ordering:hover {background-position: -512px -80px;} #downloads {position: absolute; top: 0px; left: 576px; width: 64px; height: 40px; background-position: -576px -40px;} #downloads.highlight {background-position: -576px -120px;} #downloads:hover {background-position: -576px -80px;} #textbox {margin: 20px; padding: 0px; height: 380px; width: 2320px; float: left;} .textboxColumn {margin: 0; padding: 0px; height: 380px; width: 580px; float: left;} #introWindow h1 {font-size: 2em; font-weight: bold; margin: 0px; padding: 5px 10px 5px 10px;} #introWindow h2 {font-size: 1.4em; font-weight: bold; margin: 0px; padding: 5px 10px 5px 10px;} #introWindow p {font-size: 1.2em; margin: 0; padding: 5px 20px 5px 20px;} #nextPage { display: block; position: absolute; top: 50%; right: 0px; margin: 0; padding: 0; width: 40px; height: 40px; background: transparent url(/images/interface/next-page.png) no-repeat top right; text-decoration: none; z-index: 22; } #previousPage { display: block; position: absolute; top: 50%; left: 0px; margin: 0; padding: 0; width: 40px; height: 40px; background: transparent url(/images/interface/previous-page.png) no-repeat top right; text-decoration: none; z-index: 22; } #moveLeft { display: none; position: absolute; top: 20px; left: 25px; margin: 0; padding: 0; width: 40px; height: 40px; background: transparent url(/images/interface/previous-page.png) no-repeat top right; text-decoration: none; z-index: 22; } #sliderContent { position: absolute; top: 10px; left: 53px; width: 574px; height: 59px; display: none; overflow: hidden; } #sliderContent a {float: left; display: block; margin: 0; padding: 0;} #sliderContent a img {border: 0;} #indicator { z-index: 100; display: none; position: absolute; top: -1px; left: 299px; margin: 0; padding: 0; width: 82px; height: 82px; background: transparent url(/images/interface/indicator.png) no-repeat top left; } #moveRight { display: none; position: absolute; top: 20px; right: 25px; margin: 0; padding: 0; width: 40px; height: 40px; background: transparent url(/images/interface/next-page.png) no-repeat top right; text-decoration: none; z-index: 22; } /* Set positions of hotspots on the screen */ #startSpot {position: absolute; top: 40px; left: 0px; margin: 0; padding: 0;} #questionSpot {position: absolute; top: 40px; left: 105px; margin: 0; padding: 0;} /* Remove bnorder from spot images */ .spot img {border: 0;} /* Under 3's age group products */ #birthToThreeSpot {position: absolute; top: 150px; left: 0px; margin: 0; padding: 0;} #ak121Spot {position: absolute; top: 150px; left: 105px; margin: 0; padding: 0;} #ak88Spot {position: absolute; top: 150px; left: 210px; margin: 0; padding: 0;} #akSandRSpot {position: absolute; top: 260px; left: 0px; margin: 0; padding: 0;} /* Under 5's age group products */ #ak121Spot2 {position: absolute; top: 150px; left: 0px; margin: 0; padding: 0;} #ak88Spot2 {position: absolute; top: 150px; left: 105px; margin: 0; padding: 0;} #akSandRSpot2 {position: absolute; top: 150px; left: 210px; margin: 0; padding: 0;} #ak162Spot {position: absolute; top: 260px; left: 0px; margin: 0; padding: 0;} #ak500Spot {position: absolute; top: 260px; left: 105px; margin: 0; padding: 0;} #ak600Spot {position: absolute; top: 260px; left: 210px; margin: 0; padding: 0;} #akClubsSpot {position: absolute; top: 370px; left: 00px; margin: 0; padding: 0;} #activate5Spot {position: absolute; top: 370px; left: 105px; margin: 0; padding: 0;} #acteiLevel1Spot {position: absolute; top: 370px; left: 210px; margin: 0; padding: 0;} /* 6-7 year olds products */ #akSandRSpot3 {position: absolute; top: 150px; left: 0px; margin: 0; padding: 0;} #akClubsSpot2 {position: absolute; top: 150px; left: 105px; margin: 0; padding: 0;} #activate7Spot {position: absolute; top: 150px; left: 210px; margin: 0; padding: 0;} #acteiLevel2Spot {position: absolute; top: 260px; left: 0px; margin: 0; padding: 0;} /* 8-9 year olds products */ #activate9Spot {position: absolute; top: 150px; left: 0px; margin: 0; padding: 0;} #acteiLevel3Spot {position: absolute; top: 150px; left: 105px; margin: 0; padding: 0;} /* 10-11 year olds products */ #activate11Spot {position: absolute; top: 150px; left: 0px; margin: 0; padding: 0;} #acteiLevel4Spot {position: absolute; top: 150px; left: 105px; margin: 0; padding: 0;} /* 12-13 year olds products */ #activate13Spot {position: absolute; top: 150px; left: 0px; margin: 0; padding: 0;} /* POSSIBLE SCREEN POSITIONS FOR PRODUCT HOTSPOTS!!!!! FOR REFERENCE ONLY #topleft {position: absolute; top: 150px; left: 20px; margin: 0; padding: 0;} #topmiddle {position: absolute; top: 150px; left: 125px; margin: 0; padding: 0;} #topright {position: absolute; top: 150px; left: 230px; margin: 0; padding: 0;} #middleleft {position: absolute; top: 260px; left: 20px; margin: 0; padding: 0;} #middlemiddle {position: absolute; top: 260px; left: 125px; margin: 0; padding: 0;} #middleright {position: absolute; top: 260px; left: 230px; margin: 0; padding: 0;} #bottomleft {position: absolute; top: 370px; left: 20px; margin: 0; padding: 0;} #bottommiddle {position: absolute; top: 370px; left: 125px; margin: 0; padding: 0;} #bottomright {position: absolute; top: 370px; left: 230px; margin: 0; padding: 0;} */ #character {position: absolute; top: 15px; left: 15px; z-index: 200;} #tipWindow {display: none; position: absolute; top: 90px; right: 113px; z-index: 900; width: 454px; height: 321px; background: transparent url(/images/interface/toolTipWindow.png) no-repeat top left;} #tipContainer {display: none; position: absolute; top: 90px; right: 113px; z-index: 901; width: 454px; height: 321px;} #tipTitle {position: absolute; top: 18px; left: 15px; font-size: 15px; font-weight: bold;} #closeTip {position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; background: transparent url(/images/interface/toolTipCloseButton.gif) no-repeat 0px 0px; color: #fff;} #closeTip span {display: none;} #closeTip:hover {background-position: 0px -20px;} #tipContent {position: absolute; top: 45px; left: 15px; border: 0;} #dragDropBubble {position: absolute; top: 5px; left: 80px; z-index: 600;} #terms {position: absolute; bottom: 10px; right: 10px; z-index: 800; color: #fff; font-weight: bold; text-decoration: none; font-size: 10pt;} #terms:hover {color: #f00; text-decoration: underline;}