/* Basic style setup =================================================================================================*/ /* Reset all elements */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,pre,form,fieldset,input,select,p,blockquote,th,td { margin: 0 ; padding: 0 ; } table { border-collapse: collapse ; border-spacing: 0 ; } fieldset,img { border: 0 ; } caption,th { text-align: left ; } q:before,q:after {content:'';} /* Set 1em to equal 10px */ html { font-size: 1.25em ; } /* Set base font size to 20px (= 1.25 x 16px) */ body { font: normal normal 50%/100% Verdana, Arial, Helvetica, sans-serif ; } /* 50% of 20px = 10px */ html>body { font-size: 10px ; } /* Overrides the above in all browsers except IE */ /* Turn off horizontal rules */ hr { display: none; } /* Basic typography (assuming 18px line height) */ a { font-weight: bold ; text-decoration: none ; color: #e58b23 ; outline: 0 ; } a:hover { text-decoration: underline ; } dl,ol,p,ul { font-size: 1.2em ; line-height: 1.5em ; margin: 0 0 1.5em 0 ; } blockquote { margin-left: 1.5em ; } ul ul, ol ol, ul ol, ol ul { font-size: 100% ; } li { margin: 0 0 9px 2em ; } h1,h2,h3,h4,h5 { font-weight: normal ; } h1 { font-size: 2.5em ; line-height: 1.44em ; margin: 0 0 0.72em 0 ; } h2 { font-size: 1.6em ; line-height: 18px ; margin: 0 0 18px 0 ; } h3 { font-size: 1.6em ; line-height: 1em ; margin: 0 0 18px 0 ; } h4 { font-size: 1.2em ; line-height: 1.5em ; margin: 0 0 1.5em 0 ; } /* Positioning and styling of structural blocks ======================================================================*/ body { background: #e1e2e3 url(../images/site/bg-body.png) repeat-y center top; color: #000 ; } #container { position: relative ; background: #fff; width: 959px ; margin: 0 auto; } #branding { position: relative ; height: 154px ; background: transparent url(../images/site/bg-branding.png) no-repeat left top ; } #branding a { position: absolute ; left: 19px ; top: 23px ; width: 210px ; height: 94px ; display: block ; text-indent: -9999px ; } /* Footer Stick Alt */ html, body { height: 100%; } #container { min-height: 100%; } #content { padding-bottom: 76px !important; } #siteinfo-credits { position: relative; margin: -76px auto 0 !important; width: 919px; } /* Positioning and styling of navigational blocks ====================================================================*/ /* Nearest class locator */ #nav-classlocator { position: absolute ; right: 0 ; top: -16px ; width: 468px ; height: 54px ; } #nav-classlocator legend { position: absolute ; left: 0 ; top: 0 ; text-indent: -9999px ; } #nav-classlocator label { position: absolute ; left: 0 ; top: 34px ; width: auto ; color: #2c2362; font: normal normal 1.3em/1.0 Tahoma, Arial, Helvetica, sans-serif ; } #nav-classlocator input.txt { position: absolute ; left: 340px ; top: 32px ; width: 78px ; margin: 0 ; color: #999; border: 1px solid #388fce ; padding: 1px 3px ; font-size: 1.4em ; font-weight: bold ; line-height: 19px ; } #nav-classlocator input.btn { position: absolute ; right: 13px ; top: 32px ; width: 30px ; height: 20px ; color: #fff ; background: #388fce ; text-transform: uppercase; border: none; padding:0; font: normal bold 1.4em/12px Tahoma, Arial, Helvetica, sans-serif ; cursor: pointer ; } /* Main navigation */ #nav-main { position: absolute ; left: 0 ; top: 120px ; width: 959px ; height: 34px ; background: transparent url(../images/site/bg-navmain.png) repeat-x left top ; } #nav-main ul { list-style: none ; margin-left: 7px ; } #nav-main li { float: left ; height: 34px ; margin: 0 ; } #nav-main li.active { background: #3f74b3; } #nav-main a { display: block ; padding: 0 12px ; color: #fff ; font: normal bold 100%/34px Tahoma, Arial, Helvetica, sans-serif ; } #nav-main a:hover { text-decoration: none ; color: #e58b23; } #nav-main li.active a { color: #fff ; cursor: default ; font-weight: bold ; } /* Supplemental navigation */ #nav-supp { position: absolute ; left: 10px ; top: 182px ; width: 200px ; } #nav-supp #sections ul { font-family: Tahoma, Verdana, Helvetica, sans-serif ; list-style: none ; } #nav-supp #sections li { border-top: 1px solid #6aa1c8 ; padding-left: 4px ; margin: 0 ; } #nav-supp #sections a { display: block ; height: 33px ; line-height: 32px ; color: #192867 ; } #nav-supp #sections a:hover { text-decoration: none ; color: #e58b23 ; } #nav-supp #sections li.active a { color: #e58b23 ; cursor: default ; } #nav-supp #sections ul ul li { margin-left: 17px ; border-top: none ; padding-left: 2px ; color: #192867 ; list-style: disc ; line-height: 18px ; } #nav-supp #sections li.active ul a { color: #3F74B3 ; cursor: pointer ; } #nav-supp #sections ul ul a { height: 18px ; line-height: 18px ; font-weight: normal ; font-size: 0.916em ; color: #1873ae ; } #nav-supp #sections li.active ul li.active a { color: #e58b23 ; cursor: default ; } /* Positioning and styling of content blocks =========================================================================*/ #content { position: relative ; min-height: 549px ; margin: 27px 0 0 230px ; padding: 0 ; } #content-main { margin: 0 222px 0 0 ; padding: 54px 0 0 0 ; } #content-supp { position: absolute ; right: 10px ; top: 54px ; width: 200px ; } /* Positioning and styling of other sitewide elements ==================================================================*/ /* Copyright notices etc. */ #siteinfo-credits { clear: left ; margin: 36px 0 0 ; height: 57px; padding: 19px 20px 0; color: #192867; font-size: 1.1em; background: transparent url(../images/site/bg-footer.jpg) no-repeat left top;} #siteinfo-credits a { color: #fff ; } #siteinfo-credits p { font: normal normal 1em/18px Verdana, Helvetica, sans-serif ; } #siteinfo-credits a#cbjlink { font-weight: normal ; color: #192867 ; text-decoration: none ; } #siteinfo-credits a#cbjlink:hover { text-decoration: none ; } #siteinfo-credits a#cbjlink strong { color: #fff ; } #siteinfo-credits a#cbjlink:hover strong { text-decoration: underline ; } /* Link and announce boxes */ .announcebox, .linkbox { position: absolute ; left: -739px ; top: -54px ; width: 190px ; height: 126px ; padding: 5px ; background: transparent url(../images/site/box-info.png) no-repeat left top ; } .announcebox { min-height: 116px ; height: auto ; background: transparent url(../images/site/box-warning.png) no-repeat left top ; } .linkbox#b2 { top: 90px ; } .linkbox#b3 { top: 234px ; } .linkbox#b4 { top: 378px ; } .announcebox h2, .linkbox h2 a { color: #fff ; font: normal normal 1.6em/26px "Arial Rounded MT Bold", Tahoma, Arial, Helvetica, sans-serif ; } .announcebox h2 { text-shadow: 2px 2px 1px #333 ; color: #fff ; font: normal normal 1.6em/26px "Arial Rounded MT Bold", Tahoma, Arial, Helvetica, sans-serif ; } .linkbox h2 a { font-size: 100% ; } .announcebox p, .linkbox p { font: normal normal 1.1em/18px Tahoma, Arial, Helvetica, sans-serif ; width: 185px ; } /* Sitewide typography ===============================================================================================*/ h1, h2 { font: normal normal 24px/36px "Arial Rounded MT Bold", Tahoma, Arial, Helvetica, sans-serif; } h1 { position: absolute ; left: 0 ; top: 0 ; width: 709px ; height: 36px ; padding: 0 0 0 10px ; background: #5499C4 url(../images/site/bg-h1.gif) no-repeat left top ; color: #fff ; } h2 { color: #5499C4 ; font-size: 16px ; line-height: 27px ; margin-bottom: 9px ; } img#supp-pic2 { position: relative ; top: -163px ; } p#supp-p2 { position: relative ; top: -326px ; } p.caption { position: relative ; top: -163px ; width: 200px ; padding-top: 162px ; font: normal normal 1.1em/18px Tahoma, Verdana, Helvetica, sans-serif ; background: transparent url(../images/site/bg-img-supp.png) no-repeat left top ; text-align: center ; } sup { margin-right: 0.3em ; font-size: 70% ; vertical-align: text-top ; } /* Section specific: home ============================================================================================*/ body#home #content { margin: 0 ; } body#home #content-main { padding-top: 200px ; margin-left: 142px ; width: 400px ; min-height: 500px ; } body#home #content-sitelinks { position: absolute ; left: -611px ; top: 500px ; height: 126px ; width: 805px ; background: transparent url(../images/site/bg-linkboxes.png) no-repeat left top ; } body#home #byline { margin-bottom: 20px; } body#home h1 { position: absolute ; left: 0 ; top: 0 ; visibility: hidden ; } body#home #content-supp img { z-index: 1 ; position: absolute ; left: 0 ; top: 0 ; } body#home .linkbox { background: transparent ; width: 177px; } body#home #nav-supp { margin-left: 22px; margin-top: 168px; } body#home #extratext { visibility: hidden; } body#home #puddletube a { position: absolute; top: 430px; right: 22px; width: 337px; height: 55px; text-indent: -9999px; background: transparent url(/images/site/puddleducks-youtube2.png) no-repeat left top; } /* Link box */ body#home #b1 { left: 4px ; top: 0 ; } body#home #b1 h2 a { font-family: "Arial Rounded MT Bold", "Arial", sans-serif; color: #fff; font-weight: bold;} body#home #b2 { left: 207px ; top: 0 ; } body#home #b2 h2 a { font-family: "Arial Rounded MT Bold", "Arial", sans-serif; color: #214191; font-weight: bold;} body#home #b3 { left: 411px ; top: 0 ; } body#home #b3 h2 a { font-family: "Arial Rounded MT Bold", "Arial", sans-serif; color: #214191; font-weight: bold;} body#home #b4 { left: 615px ; top: 0 ; } body#home #b4 h2 a { font-family: "Arial Rounded MT Bold", "Arial", sans-serif; color: #fff; font-weight: bold;} body#home #content-sitelinks h2 { margin-bottom: 9px ; } /* Puddle's page link box */ body#home #content-puddlelink { position: absolute ; left: -140px ; top: -280px ; width: 140px ; height: 190px ; text-indent: -9999px ; } body#home #content-puddlelink a { position: absolute ; left: 0 ; top: 0 ; width: 140px ; height: 190px ; } /* Section specific: class locations =================================================================================*/ body#class_locations #content-main { margin-right: 10px ; } body#class_locations #content-supp { top: 0 ; right: 749px ; } table#classlist { width: 720px ; margin-bottom: 20px ; } table#classlist tr.head { position: absolute ; left: 0 ; top: 0 ; text-indent: -9999px ; } table#classlist td { vertical-align: top ; padding-top: 18px; background: transparent url(../images/site/bg-classlist.gif) no-repeat left bottom ; } table#classlist td.address { width: 440px ; padding-left: 11px ; height: 108px ; } table#classlist td.levels { background-position: -10px bottom ; height: 72px ; } table#classlist td.distance { padding-right: 18px ; text-align: right ; font-size: 1.6em ; line-height: 18px ; } table#classlist td.distance { height: 18px ; background: none ; } table#classlist td.distance p { text-align: right ; font-size: 1.6em ; line-height: 18px ; } table#classlist ul.classlevels { position: relative ; width: 131px ; margin-bottom: 0 ; list-style: none ; } table#classlist ul.classlevels li { position: absolute ; left: 0 ; top: 0 ; margin: 0 ; line-height: 18px ; height: 18px ; width: 63px ; text-indent: -9999px ; background: transparent url(../images/site/class-blank.gif) no-repeat left top ; } table#classlist ul.classlevels li.floaties { top: 0 ; background-image: url(../images/site/class-floaties.gif) ; } table#classlist ul.classlevels li.splashers { top: 18px ; background-image: url(../images/site/class-splashers.gif) ; } table#classlist ul.classlevels li.kickers { top: 36px ; background-image: url(../images/site/class-kickers.gif) ; } table#classlist ul.classlevels li.littledippers { top: 54px ; background-image: url(../images/site/class-littledippers.gif) ; } table#classlist ul.classlevels li.dippers { left: 69px ; top: 0 ; background-image: url(../images/site/class-dippers.gif) ; } table#classlist ul.classlevels li.dabblers { left: 69px ; top: 18px ; background-image: url(../images/site/class-dabblers.gif) ; } table#classlist ul.classlevels li.advanceddabblers { left: 69px ; top: 36px ; background-image: url(../images/site/class-advanceddabblers.gif) ; } table#classlist ul.classlevels li.rookieswimmers { left: 69px ; top: 36px ; background-image: url(../images/site/class-rookieswimmers.gif) ; } table#classlist ul.classlevels li.octopus1, table#classlist ul.classlevels li.octopus2, table#classlist ul.classlevels li.octopus3, table#classlist ul.classlevels li.goldfish1, table#classlist ul.classlevels li.goldfish2, table#classlist ul.classlevels li.goldfish3, table#classlist ul.classlevels li.beginners, table#classlist ul.classlevels li.intermediate, table#classlist ul.classlevels li.advanced, table#classlist ul.classlevels li.developmentgroup { left: 69px ; top: 54px ; background-image: url(../images/site/class-swimacademy.gif) ; } table#classlist td.infolink, table#classlist td.franchiselink { padding: 15px 0 0px 0px ; text-align: right ; vertical-align: bottom ; background-position: right bottom ; } table#classlist td.infolink { padding: 3px 0 10px ; } table#classlist td.franchiselink { background-position: left -30px ; } table#classlist td.infolink a, table#classlist td.franchiselink a { display: block ; width: 124px ; height: 0 ; padding-top: 22px ; overflow: hidden ; background: transparent url(../images/site/btn-info.gif) no-repeat left top ; text-indent: -9999px ; cursor: pointer ; } table#classlist td.infolink a { background-position: left -26px ;} body#class_locations #content-main p#note { width: 700px ; padding: 0 11px ; font: italic 1.2em/18px Tahoma,Arial,Helvetica,sans-serif ; } /* Link box positions */ body#class_locations #b1 { left: 0 ; top: 0 ; } body#class_locations #b2 { left: 0 ; top: 144px ; min-height: 116px ; height: auto ; background: transparent url(../images/site/bg-pricebox-body.png) no-repeat left bottom ; } body#class_locations #b2 h2 { margin: -5px -5px 11px -5px ; height: 36px ; line-height: 36px ; padding-left: 5px ; background-image: url(../images/site/bg-pricebox-h2.png) ; } body#class_locations #b2.linkbox h2 a { line-height: 36px ; } body#class_locations #b3 { left: 0 ; top: 288px ; } body#class_locations #b4 { left: 0 ; top: 432px ; } /* Section specific: class information and about my class ============================================================*/ body#about_my_class #content-main, body#class_information #content-main { margin-right: 10px ; } body#about_my_class #content-supp, body#class_information #content-supp { top: 0 ; right: 749px ; } body#about_my_class #contactinfo, body#class_information #contactinfo { width: 432px ; min-height: 178px ; margin-bottom: 18px ; padding: 0 11px ; background: transparent url(../images/site/bg-contactinfo.gif) no-repeat left bottom ; } body#about_my_class #locationinfo, body#class_information #locationinfo { position: absolute ; right: 10px ; top: 53px ; width: 237px ; min-height: 178px ; padding: 10px 11px 0 ; background: transparent url(../images/site/bg-locationinfo.gif) no-repeat left bottom ; } body#class_information #locationinfo { top: 45px ; } body#about_my_class #locationinfo ul, body#class_information #locationinfo ul { margin-bottom: 4px ; } body#about_my_class #locationinfo { top: 96px ; } body#about_my_class #contactinfo span.lbl, body#class_information #contactinfo span.lbl { display: block ; width: 100px ; float: left ; margin-left: -105px ; text-align: right ; font-weight: bold ; } body#about_my_class #contactinfo p, body#class_information #contactinfo p { margin-left: 105px ; } body#about_my_class p#infolink, body#class_information p#infolink { position: absolute ; right: 290px ; top: 53px ; } body#about_my_class p#infolink { top: 108px ; } body#about_my_class p#infolink a, body#class_information p#infolink a { display: block ; width: 124px ; height: 22px ; background: transparent url(../images/site/btn-minisite.gif) no-repeat left top ; text-indent: -9999px ; } body#about_my_class #teachers, body#class_information #teachers, body#about_my_class #pool, body#class_information #pool, body#class_information .timetable { width: 697px ; margin-bottom: 18px ; padding: 0 11px 1px 11px ; min-height: 216px ; background: transparent url(../images/site/bg-timetable.gif) no-repeat left bottom ; } body#about_my_class #teachers, body#class_information #teachers, body#about_my_class #pool, body#class_information #pool { clear: left ; margin-bottom: 18px ; min-height: 198px ; } body#class_information #teachers, body#about_my_class #teachers { float: left ; } body#about_my_class #termdates, body#about_my_class #nextclass { padding: 0 11px 0 11px ; margin-bottom: 18px ; min-height: 36px ; background: transparent url(../images/site/bg-classlist.gif) no-repeat left bottom ; } body#about_my_class #nextclass { min-height: 54px ; padding-bottom: 18px ; } body#class_information #timetables h2 { width: 719px ; height: 27px ; margin-bottom: 9px ; padding-left: 11px ; } body#class_information ul#navtimetable { position: relative ; width: 736px ; height: 45px ; margin-top: 9px ; list-style: none ; } body#class_information ul#navtimetable li { float: left ; margin: 0 ; } body#class_information ul#navtimetable a { float: left ; display: block ; width: 130px ; height: 45px ; padding-left: 13px ; background: transparent url(../images/site/nav-franchisee.png) no-repeat left top ; color: #FCCF2F ; font: normal normal 1em/23px Tahoma, Arial, Helvetica, sans-serif ; text-align: left ; } body#class_information ul#navtimetable a:hover { color: #e58b23 ; text-decoration: none ; } body#class_information ul#navtimetable a.active { color: #e58b23 ; font-weight: bold ; width: 137px ; padding-left: 6px ; background: #fff url(../images/site/nav-franchisee-active.png) no-repeat left top ; } body#class_information .timetable { padding-bottom: 18px ; } body#class_information .timetable h3 { margin-bottom: 0 ; font-size: 1.3em ; font-weight: bold ; line-height: 18px ; color: #192867 ; } body#class_information .timetable h4 { font-size: 1.166em ; line-height: 18px ; font-weight: bold ; margin: 9px 0 9px ; } body#class_information .timetable ul { min-height: 72px ; } body#class_information .timetable ul li { display: block ; float: left ; width: 138px ; margin: 0 ; } body#class_information .timetable p#waitinglist { clear: left ; width: 640px ; padding-top: 18px ; margin: 0 ; } body#class_information .timetable span.sessiontime { float: left ; } body#class_information .timetable span.sessionavailability { float: left ; margin-left: 4px ; font: normal bold 0.833em/18px Tahoma, Verdana, Helvetica, sans-serif ; } body#class_information .timetable span.ok { color: #00AA00 ; } body#class_information .timetable span.few { color: #AA7700 ; } body#class_information .timetable span.full { color: #880000 ; } body#class_information .timetable a.sessiontype { display: block ; float: left ; width: 63px ; height: 18px ; margin-left: 4px ; text-indent: -9999px ; background: transparent url(../images/site/class-blank.gif) no-repeat left top ; } body#class_information .timetable a.floaties { background-image: url(../images/site/class-floaties.gif) ; } body#class_information .timetable a.splashers { background-image: url(../images/site/class-splashers.gif) ; } body#class_information .timetable a.kickers { background-image: url(../images/site/class-kickers.gif) ; } body#class_information .timetable a.littledippers { background-image: url(../images/site/class-littledippers.gif) ; } body#class_information .timetable a.dippers { background-image: url(../images/site/class-dippers.gif) ; } body#class_information .timetable a.dabblers { background-image: url(../images/site/class-dabblers.gif) ; } body#class_information .timetable a.advanceddabblers { background-image: url(../images/site/class-advanceddabblers.gif) ; } body#class_information .timetable a.rookieswimmers { background-image: url(../images/site/class-rookieswimmers.gif) ; } body#class_information .timetable a.octopus1 { background-image: url(../images/site/class-octopus1.gif) ; } body#class_information .timetable a.octopus2 { background-image: url(../images/site/class-octopus2.gif) ; } body#class_information .timetable a.octopus3 { background-image: url(../images/site/class-octopus3.gif) ; } body#class_information .timetable a.goldfish1 { background-image: url(../images/site/class-goldfish1.gif) ; } body#class_information .timetable a.goldfish2 { background-image: url(../images/site/class-goldfish2.gif) ; } body#class_information .timetable a.goldfish3 { background-image: url(../images/site/class-goldfish3.gif) ; } body#class_information .timetable a.beginners { background-image: url(../images/site/class-beginners.gif) ; } body#class_information .timetable a.intermediate { background-image: url(../images/site/class-intermediate.gif) ; } body#class_information .timetable a.advanced { background-image: url(../images/site/class-advanced.gif) ; } body#class_information .timetable a.developmentgroup { background-image: url(../images/site/class-developmentgroup.gif) ; } body#about_my_class h1.withinfo { margin-bottom: 0 ; } body#about_my_class p#findanotherclass { padding: 9px 0 9px 11px ; margin-bottom: 18px ; font-size: 1.2em ; line-height: 18px ; } body#about_my_class #termdates p { margin-bottom: 0 ; padding-bottom: 18px ; } body#about_my_class #teachers h3, body#class_information #teachers h3 { clear: left ; padding-left: 110px ; font-size: 1.4em ; line-height: 18px ; font-weight: bold ; } body#about_my_class #teachers img, body#class_information #teachers img { float: left ; width: 100px ; height: 126px ; margin: -36px 10px 18px 0 ; border: 1px solid #000 ; } body#about_my_class #pool img, body#class_information #pool img { float: right ; width: 200px ; height: 150px ; margin: 0 0 0 10px ; border: 1px solid #000 ; } body#about_my_class #nextclass form { height: 18px ; margin: 0 0 0 11px ; } body#about_my_class #nextclass form div { float: left ; } body#about_my_class #nextclass label { float: left ; width: auto ; font-size: 1.2em ; line-height: 18px ; } body#about_my_class #nextclass select { width: 15.5em ; margin: 2px 10px 0 ; } body#about_my_class #nextclass select#classlevel { width: 12em ; } body#about_my_class #nextclass select#classterm { width: 8em ; } body#about_my_class #nextclass input#findNextClass { margin: -1px 0 0 ; padding: 1px ; border-color: #e58b23 ; background-color: #e58b23 ; color: #fff ; font-weight: bold ; font-size: 12px ; } body#about_my_class #nextclass p#nonextclass { margin: 18px 0 0 11px ; } body#about_my_class #nextclass a { color: #000 ; font-weight: normal ; } body#about_my_class #nextclass a:hover { color: #e58b23 ; } body#about_my_class #nextclass table { clear: left ; margin: 18px 0 0 11px ; padding: 0 ; } body#about_my_class #nextclass td { width: 220px ; vertical-align: top ; } body#about_my_class #nextclass td h3 { margin: 9px 0 ; font-size: 1.2em ; font-weight: bold ; color: #192867 ; } body#about_my_class #nextclass ul { list-style: none ; } body#about_my_class #nextclass ul li { margin: 0 ; font-weight: normal ; color: #000 ; font-size: 0.9em ; line-height: 18px ; } body#about_my_class #nextclass p { clear: left ; } /* Link box positions */ body#class_information #b1 { left: 0 ; top: 0 ; } body#class_information #b2 { left: 0 ; top: 144px ; min-height: 116px ; height: auto ; background: transparent url(../images/site/box-general.png) no-repeat left top ; } body#class_information #b2 h2 { margin: -5px -5px 11px -5px ; height: 36px ; line-height: 36px ; padding-left: 5px ; background: none ; } body#class_information #b2.linkbox h2 a { line-height: 36px ; } body#class_information #b3 { left: 0 ; top: 288px ; } body#about_my_class #b1 { left: 0 ; top: 0 ; } body#about_my_class #b2 { left: 0 ; top: 144px ; } body#about_my_class #b3 { left: 0 ; top: 288px ; } /* Section specific: flowchart container =============================================================================*/ #flowchartcontainer h1 { width: auto ; position: relative ; } #flowchartcontainer ol#classflowchart { width: 515px ; } #flowchartcontainer ol#classflowchart li { padding-left: 15px ; margin: 0 ; } #flowchartcontainer ol#classflowchart ul { font-size: 1.2em ; margin-left: 30px ; list-style: disc ; } #flowchartcontainer div.answer { padding-left: 15px ; } #flowchartcontainer a#startagain { color: #3F74B3 ; padding-left: 15px ; } #flowchartcontainer a.answeryes {color: #339933 ; } #flowchartcontainer a.answerno {color: #880000 ; } #flowchartcontainer strong.yes {color: #339933 ; } #flowchartcontainer strong.no {color: #880000 ; } /* Section specific: shop ============================================================================================*/ body#shop .product { width: 501px ; min-height: 108px ; margin: 0 0 36px -11px ; padding: 0 11px 1px ; background: transparent url(../images/site/bg-merchandiselist.gif) no-repeat left bottom ; } body#shop .product img { float: left ; margin: 4px 11px 0 0 ; border: 1px solid #000 ; } body#shop .product p.options { clear: left ; margin-top: -18px ; padding-top: 18px ; }#192867 body#shop .product p.options label { width: 12.5em ; margin-left: 15px ; font-weight: bold ;} body#shop .product p.options select { width: 10em ; } body#shop .product p.price { clear: left ; margin-top: -18px ; padding-top: 18px ; } body#shop .product input.buybtn { clear: left ; float: right ; margin-top: -45px ; } body#shop span.availability { font-weight: bold ; font-style: italic ; color: #e58b23 ; } body#shop #basket { position: absolute ; left: -219px ; top: 0 ; min-height: 126px ; width: 196px ; height: auto ; padding-bottom: 18px ; background: transparent url(../images/site/box-general.png) no-repeat left top ; } body#shop #basket h3 { margin: 5px 5px 9px ; text-shadow: 2px 2px 1px #333 ; color: #fff ; font: normal normal 16px/27px "Arial Rounded MT Bold", Tahoma, Arial, Helvetica, sans-serif ; } body#shop #basket .basketitem { clear: left ; border-bottom: 1px solid #cae2c3 ; padding: 9px 0 8px ; } body#shop #basket input.removebtn { position: relative ; top: 4px ; width: 12px ; height: 12px ; margin: 0 ; border: 0 ; background: transparent url(../images/site/btn-removeitem.png) no-repeat center center ; text-indent: -9999px ; cursor: pointer ; } body#shop #basket p { padding: 0 5px ; font-size: 1.1em ; } body#shop #basket p.options { margin: 4px 0 5px 14px ; font-size: 1em ; font-style: italic ; } body#shop #basket p.qty { margin: 9px 0 ; padding: 1px 5px 0 0 ; text-align: right ; line-height: 17px ; font-size: 1.1em ; font-weight: bold ; } body#shop #basket p.qty span { float: left ; margin-top: -1px ; font-weight: normal ; } body#shop #basket p.qty select { width: 2.7em ; margin: 0 0 0 5px ; font-size: 1.1em ; border: 1px solid #008300 ; } body#shop #basket p#totals { clear: left ; padding-top: 9px ; text-align: right ; } body#shop #basket p.itemname { margin-bottom: 0 ; font-weight: bold ; line-height: 18px ; } body#shop #basket input.updatebtn, body#shop #basket a#proceed { float: left ; width: 84px ; height: 24px ; margin: 0 ; padding: 1px 2px 5px ; border: 2px solid #ecafaa ; border-bottom-color: #882a22 ; border-right-color: #882a22 ; background-color: #e58b23 ; color: #fff ; font: normal bold 0.915em/20px Lucida Grande, Verdana, Arial, sans-serif ; cursor: pointer ; text-align: center ; } body#shop #basket a#proceed { padding: 1px 4px 3px ; margin-left: 2px ; line-height: 16px ; height: 16px ; } body#shop #basket a#proceed:hover { text-decoration: none ; } body#checkout #content-main { margin-right: 12px; } body#checkout #orderbreakdown { width: 507px; } body#checkout table#order_breakdown { width: 100% ; margin-bottom: 18px ; } body#checkout table#order_breakdown td { padding: 4px 5px 5px ; vertical-align: top ; } body#checkout table#order_breakdown td.subtotal, body#checkout table#order_breakdown td.total { padding: 4px 5px 5px ; text-align: right ; } body#checkout table#order_breakdown td.total { padding: 0 ; } body#checkout table#order_breakdown td.total p { padding: 8px 5px 10px ; border-top: 3px solid #fff ; font-weight: bold ; background-color: #a3bddc ; } body#checkout table#order_breakdown tr.odd td { background-color: #d5e1ef ; } body#checkout table#order_breakdown p { margin-bottom: 0 ; } body#checkout table#order_breakdown p.options { margin-left: 11px ; font-size: 1em ; font-style: italic ; } /* Section specific: programmes modules page =========================================================================*/ body#programme #siteinfo-credits { margin-top: 72px ; } body#programme #testimonials { position: relative; height: 20px; } body#programme p.testimonial { position: absolute ; left: 0 ; top: 0 ; z-index: 10 ; font: normal normal 1.2em/18px Verdana, Helvetica, sans-serif ; } /* Section specific: puddle's page ===================================================================================*/ body#puddles_page #introduction { font-size: 1.4em ; line-height: 36px ; margin: 0 11px ; } body#puddles_page #downloadbox { min-height: 220px ; } body#puddles_page #furtherinfo { margin: 18px 11px ; } body#puddles_page .item { float: left ; margin: 0 14px 18px 11px ; width: 200px ; } /* Section specific: franchisee pages ================================================================================*/ body#franchisees #content-main { margin-right: 10px ; } body#franchisees #content-supp { right: 749px ; top: -25px ; } body#franchisees h1 { margin-bottom: 9px ; } body#franchisees ul#navfranchisee { position: relative ; width: 720px ; height: 45px ; margin-top: 9px ; background: transparent url(../images/site/nav-franchisee.png) no-repeat 2px top ; list-style: none ; } body#franchisees ul#navfranchisee li { float: left ; margin: 0 11px 0 1px ; } body#franchisees ul#navfranchisee a { float: left ; display: block ; width: 132px ; height: 40px ; color: #FCCF2F ; font: normal normal 1em/23px Tahoma, Arial, Helvetica, sans-serif ; text-align: center ; } body#franchisees ul#navfranchisee a:hover { color: #e58b23 ; text-decoration: none ; } body#franchisees ul#navfranchisee a.active { color: #e58b23 ; font-weight: bold ; background: #fff url(../images/site/nav-franchisee-active.png) no-repeat left top ; } body#franchisees #content-main h2 { width: 719px ; height: 27px ; margin-left: -11px ; padding-left: 11px ; background: transparent url(../images/site/bg-h2-franchisee.png) no-repeat left bottom ; } body#franchisees h3 { color:#192867; font: normal bold 1.6em/18px Tahoma,Verdana,Helvetica,sans-serif ; } body#franchisees #welcome { position: relative ; width: 492px ; padding-right: 227px ; min-height: 198px ; } body#franchisees #welcome .picbox { top: 3px ; } body#franchisees #photo_gallery { width: 730px ; padding: 9px 11px 1px ; margin: 0 0 18px -11px ; background: transparent url(../images/site/bg-classlist.gif) no-repeat left bottom ; overflow: hidden ; } body#franchisees #photo_gallery .item { float: left ; width: 200px ; height: 180px ; margin: 0 0 18px 10px ; background: none ; } body#franchisees #b1 { position: absolute ; left: -220px ; top: 0 ; min-height: 126px ; width: 192px ; height: auto ; background: transparent url(../images/site/box-info.png) no-repeat left top ; } body#franchisees #b1 h2 { color: #fff ; background: none ; font: normal normal 1.6em/26px "Arial Rounded MT Bold", Tahoma, Arial, Helvetica, sans-serif ; width: 192px ; } body#franchisees #b1 p { width: 192px ; margin-bottom: 0 ; } body#franchisees #b2 { left: 0 ; top: 172px ; } body#franchisees #b3 { left: 0 ; top: 316px ; } /* Section specific: news and links pages ============================================================================*/ body#news #content-main, body#links #content-main { margin-right: 10px ; } body#franchisees .item, body#links .item, body#news .item { position: relative ; width: 708px ; padding: 0 11px 1px ; margin: 0 0 18px -11px ; background: transparent url(../images/site/bg-classlist.gif) no-repeat left bottom ; } body#franchisees .item h2, body#links .item h2, body#news .item h2 { clear: left ; } body#franchisees .picbox, body#news .picbox { position: absolute ; right: 11px ; top: 8px ; } body#franchisees .withpic, body#news .withpic { width: 492px ; padding-right: 227px ; min-height: 198px ; } body#franchisees p.postedby, body#news p.postedby { font-size: 1.1em ; } /* Section specific: videos ============================================================================================*/ body#videos #content-main p { margin-top: 1em; } /* Form elements =====================================================================================================*/ label { width: 18.5em ; float: left ; position: relative ; top: 0.1em ; } label.after { width: auto ; float: none ; position: relative ; top: -0.1em ; } input,select,textarea { font: normal normal 1.1em/18px Arial, sans-serif ; } .text input, input.txt { width: 17.4em ; margin: 0 0 1em 1em ; border: 1px solid #192867 ; padding: 2px 3px ; } input.small { width: 3em ; } .checkbox input, input.chk { margin: 0 0.5em 0 0 ; } input.rad { margin: 0.3em 0 0 1em ; } .button input, input.btn { margin: 0 ; padding: 0 3px ; border-color: #e58b23 ; background-color: #e58b23 ; color: #fff ; font: normal bold 19px/1.0 Verdana, Arial, Helvetica, sans-serif ; } input.smallbtn { margin: 0 ; padding: 1px 2px ; border-width: 1px ; border-color: #e58b23 ; background-color: #e58b23 ; color: #fff ; font: normal normal 1em/1.0 Verdana, Arial, Helvetica, sans-serif ; } select { width: 18em ; margin: 0 0 1em 1em ; border: 1px solid #192867 ; } select.medium { width: 11em ; } select.small { width: 6em ; } textarea { width: 18em ; height: 10em ; margin: 0 0 1em 1em ; border: 1px solid #192867 ; padding: 0 0 0 3px ; font: normal normal 1.2em/1.4 Verdana, Arial, sans-serif ; } span.note { display: block ; clear: left ; font-style: italic ; font-size: 0.9em ; margin: 0 0 0.5em 0 ; } label#childdoblbl { top: 1.1em ; } input#swimnappycheck { position: relative ; top: -0.2em ; } input#howheardother { margin-left: 235px; } .error { margin-bottom: 18px ; border: 2px solid #c00 ; padding: 11px ; color: #900 ; background-color: #fee ; font-weight: bold ; } p.waitinglistlocs { margin-left: 3em ; } p.waitinglistlocs input.chk { margin-left: -2.5em ; } span.summarylabel { float: left ; width: 12em ; margin-left: 1.5em ; font-weight: bold ; } span.small { width: 3em ; clear: left ; } span.tooltiphint { margin: 0 ; padding: 0 3px 1px; border: 1px solid #eaaba7 ; border-bottom-color: #8a261f ; border-right-color: #8a261f ; background-color: #e58b23 ; color: #fff ; font: normal bold 14px/14px Verdana, Arial, Helvetica, sans-serif ; cursor: help ; } form#paymentBox label { margin-left: 1.5em ; width: 16em ;} form#paymentBox input#useasbilling, form#paymentBox input#discount { margin-left: 1em ; } form#paymentBox select.classtype { width: 36em ; margin: 5px 0 10px 30px ; } form#paymentBox textarea { width: 40em ; height: 8em ; } body#checkout label { margin-left: 1.5em ; width: 16em ; top: 4px; font-weight: bold; font-size: 1.2em; } body#checkout .text input, body#checkout .select select, body#checkout .datetime select { font-size: 1.2em; } body#checkout .checkbox label { width: auto; } body#checkout .checkbox input { margin-bottom: 1em; margin-left: 1em; } body#checkout .button input { margin-bottom: 1em; } body#checkout #expmonth, body#checkout #expyear, body#checkout #startmonth, body#checkout #startyear { width: 6em; } body#checkout #noissueflag, body#checkout #agreetc { float: left; } body#checkout #howheardother { margin-left: 1em; } /* MP3 Player ========================================================================================================*/ #nav-themeplayer { position: absolute ; right: 12px ; top: 120px ; width: 170px ; height: 35px ; color: #fff ; font: normal bold 1.2em/34px Tahoma, Arial, Helvetica, sans-serif ; } #nav-themeplayer #playhead { position: absolute ; right: 0 ; top: 10px ; width: 40px ; height: 35px ; } #nav-themeplayer #playhead .screen { display: none ; } #nav-themeplayer #playhead .controls a { position: absolute ; left: 5px ; top: 0 ; width: 15px ; height: 15px ; background: transparent url(../images/site/bg-btn-play.png) no-repeat left top ; text-indent: -9999px ; } #nav-themeplayer #playhead .controls a#pauseplayer { background-image: url(../images/site/bg-btn-pause.png) ; } #cbjMP3.playing .controls a#playplayer { display: none; } #cbjMP3.stopped .controls a#pauseplayer { display: none; } #nav-themeplayer #playhead .controls a#stopplayer { left: 26px ; background-image: url(../images/site/bg-btn-stop.png) ; }