/************************************* ______ _ ______ _ _ (_____ \ _ _ (_) (_____ (_) | | _____) )___ ____| |_| |_ _ ____ ____ _____) ) _ _ ____| | ___ | ____/ ___) _ ) _) _)| |/ _ )/ ___) | ____/ ( \ / ) _ ) |/___) | | | | ( (/ /| |_| |__| ( (/ /| | | | | |) X ( (/ /| |___ | |_| |_| \____)\___)___)_|\____)_| |_| |_(_/ \_)____)_(___/ Copyright: Prettier Pixels Author: Alex McGibbon, alex@prettierpixels.com **************************************/ /**RESET**/ /************************************* Copyright: Prettier Pixels Author: Alex McGibbon, alex@prettierpixels.com Created: Feb 09, 2010 Latest Version: Feb 09, 2010 **************************************/ /**RESET**/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } abbr { border-bottom: none!important; } strong { font-weight: bold; } /* /**HEADINGS**/ h1,h2,h3,h4,h5,h6 { line-height: 1; margin-bottom: 10px; } h1 { font-size: 30px; margin-bottom: 15px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4, h5, h6 { font-size: 14px; } /**LINKS**/ a { color: #000; text-decoration: underline; font-weight: bold; } a:visited { color: #000; } a:active { color: #000; } a:hover { color: #555; } /**SPACING**/ ol { list-style: decimal; } ul { list-style: none; } p, dl, hr, ol, ul, pre, table, address, fieldset { margin-bottom: 10px; } li ul, li ol, li p { margin-bottom: 0; } abbr, accronym { border-bottom: 1px dotted; padding-bottom: 1px; } /**GLOBAL**/ html { background: #000; } body, .textfield, .cf-ol input, textarea { color: #000; font-size: 13px; line-height: 1.4; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body { background: url(../images/GradientBG.png) repeat-x #fff;} #container { background: url(../images/CloudsBG.gif) repeat-x; background-position: center bottom; } .wrapper { width: 940px; margin: 0 auto; overflow: hidden; } strong.block { display: block; } /**FORMS**/ legend { background: #fff; font-size: 16px; font-weight: bold; padding: 0 5px; } /**HEADER**/ #header { background: #000; height: 99px; border-bottom: 5px solid #fff; overflow: visible; } #header img { float: left; margin: 10px 0 0 20px; } #header ul#mainNavigation { float: left; margin: 10px 0 0 40px; } #header ul#mainNavigation li { border-left: 1px solid #fff; float: left; height: 79px; width: 159px; } #header ul#mainNavigation li a { color: #ffd200; display: block; font-weight: bold; padding: 10px 15px; text-decoration: none; } #header ul#mainNavigation li a:hover { color: #fff; } #header ul#mainNavigation li a strong { color: #fff; display: block; font-size: 18px; line-height: 1; margin-bottom: 10px; } #header ul#mainNavigation li a:hover strong { color: #ffd200; } #header ul#mainNavigation li.home { border-left: none; width: 160px; } .walk #header ul#mainNavigation li.walk, #index #header ul#mainNavigation li.home, #walks #header ul#mainNavigation li.walks, #register #header ul#mainNavigation li.register, #sponsor #header ul#mainNavigation li.sponsor, #contact #header ul#mainNavigation li.contact { border-right: 5px solid #fff; border-left: 5px solid #fff!important; border-top: 5px solid #fff; float: left; height: 89px; width: 150px!important; background: #ffd200; } .walk #header ul#mainNavigation li.walk a, #index #header ul#mainNavigation li.home a, #walks #header ul#mainNavigation li.walks a, #register #header ul#mainNavigation li.register a, #sponsor #header ul#mainNavigation li.sponsor a, #contact #header ul#mainNavigation li.contact a { color: #000; /* padding: 5px 20px 10px 20px; */ } .walk #header ul#mainNavigation li.walk a:hover strong, #index #header ul#mainNavigation li.home a:hover strong, #walks #header ul#mainNavigation li.walks a:hover strong, #register #header ul#mainNavigation li.register a:hover strong, #sponsor #header ul#mainNavigation li.sponsor a:hover strong, #contact #header ul#mainNavigation li.contact a:hover strong { color: #fff; } .walk #header ul#mainNavigation li.walk + li, #index #header ul#mainNavigation li.home + li, #walks #header ul#mainNavigation li.walks + li, #register #header ul#mainNavigation li.register + li, #sponsor #header ul#mainNavigation li.sponsor + li, #contact #header ul#mainNavigation li.contact + li { border-left: none; } /**CALLSTOACTION**/ .cta { background: #000; color: #fff; font-size: 16px; padding: 6px 20px 6px 40px; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /**FOOTER**/ #footer { clear: both; background: url(../images/Silhouette.gif) repeat-x; background-position: top center; padding-top: 220px; width: 100%; } #footer p { margin: 10px 0; } .linkLove { background: #000; font-size: 10px!important; color: #fff; text-align: center; margin: 0px!important; padding: 10px 0; } .linkLove a { color: #ffd200; } #linkList { overflow: auto; } #linkList li { float: left; width: 300px; margin-right: 20px; } #linkList li#JustGivingLink { margin-top: 40px; } #linkList li#DogsTrustLink { margin-top: 20px; text-align: center; } #linkList li#FRSBLink { margin: 40px 0 0 0; text-align: right; } /**HOME**/ #heroContainer { border: 5px solid #fff; height: 297px; margin-top: 20px; position: relative; overflow: hidden; } #hero { background-color: rgb(0,0,0); background-color: rgba(0, 0, 0, 0.7); height: 297px; left: 0; position: absolute; top: 0; width: 455px; z-index: 1; } #hero a { padding: 20px; color: #fff; text-decoration: none; display: block; } #hero h1 { font-size: 40px; line-height: 1.2; text-align: center; /* text-transform: uppercase; */} #hero p { font-size: 16px; font-weight: normal; text-align: center; margin-bottom: 10px; } #hero p strong { color: #ffd200; } #hero span { display: inline-block; color: #fff; } #hero span.cta { background: #000 url(../images/BulletPawWhite.png) no-repeat 10px 7px; border: 3px solid #fff; color: #fff; margin: 20px 0 0 60px; } #hero span.cta:hover { background: #555 url(../images/BulletPawWhite.png) no-repeat 10px 7px; color: #fff; } #heroGallery { z-index: 0; } #waggyWalksWherabouts, #lastYearsWalks { margin-top: 40px; width: 460px; } #waggyWalksWherabouts { float: left; } #lastYearsWalks { float: right; } #waggyWalksWherabouts img { float: left; margin-right: 20px; } #waggyWalksWherabouts ul li { float: left; width: 160px; } #waggyWalksWherabouts ul li.alt { width: 119px; } #waggyWalksWherabouts ul li a { background: url(../images/BulletPawSmall.png) no-repeat 0 1px; padding: 0 0 0 24px; } #lastYearsWalks ul { float: right; margin-left: 10px; width: 210px; } #lastYearsWalks ul li { float: left; width: 60px; margin: 0 0 10px 10px; } #lastYearsWalks ul li img { border: 3px solid #ffd200; margin-bottom: 0!important; } #lastYearsWalks ul li img:hover { border: 3px solid #000; cursor: pointer; } #promotionBoxes { clear:both; overflow: hidden; } #promotionBoxes li { background: #fff; border: 5px solid #000; float: left; height: 171px; margin: 20px 20px 20px 0; padding: 10px; position: relative; width: 190px; } #promotionBoxes li#noWalkNearby { margin-right: 0; } #promotionBoxes li h2 { font-size: 16px; margin-bottom: 10px; } #promotionBoxes li span.linkholder { position: absolute; bottom: 10px; left: 10px; } #promotionBoxes li img.promotionImg { float: right; margin-left: 10px; border: 1px solid #000; } /**OVERLAY**/ .overlay { background-color:#fff; border:10px solid #fff; border-bottom: 7px solid #fff; display:none; width:600px; z-index:10000; -moz-box-shadow:0 0 30px 5px #000; -webkit-box-shadow: 0 0 30px #000; } .overlay .close { background-image:url(../images/close.png); cursor:pointer; height:35px; position:absolute; right:-24px; top:-24px; width:35px; } .overlay p.caption { margin-bottom: 0; text-align: center; } .overlay p.caption span.captionDescription { float: left; } .overlay p.caption span.captionCite { float: right; } /**WALKS**/ #mapCanvas { border: 5px solid #fff; margin-top: 20px; } #walks #mapCanvas { float: right; } #walks #main h1, #walks #main p, #walks #main ul { clear: left; float: left; width: 460px; } #walks #main h1 { font-size: 30px; margin-top: 20px; } #walks #main ul li { float: left; width: 230px; margin-bottom: 25px; } #walks #main ul li a { background: url(../images/BulletPawWhite.png) no-repeat #000 10px 7px; border: 3px solid #fff; color: #fff; display: block; width: 140px; } #walks #main ul li a:hover { background: url(../images/BulletPawWhite.png) no-repeat #555 10px 7px; border: 3px solid #fff; } /**WALK**/ #walkDetails, #walkDescription { margin-top: 20px; margin-bottom: 40px; overflow: hidden; width: 460px; } #walkDetails { float: right; } #walkDescription { float: left; } #walkDetails p { line-height: 40px; } #walkDetails .cta { background: url(../images/BulletPawWhite.png) no-repeat #000 10px 7px; border: 3px solid#fff; color: #fff; display: block; float: left; line-height: 1.4; margin-right: 5px; } #walkDetails .cta:hover { background: url(../images/BulletPawWhite.png) no-repeat #555 10px 7px; } #walkDetails #mapCanvas { height: 280px!important; margin-bottom: 20px; } #walkDescription blockquote { margin: 20px 0 10px 0; } #walkDescription cite { display: block; font-weight: bold; margin-bottom: 30px; } #walkDescription h2 { margin-top: 20px; } .openQuote { color: #fff; float: left; font-size: 64px; height: 45px; line-height: 1px; margin-top: -24px; margin-left: 0px; padding-right: 2px; padding-top: 45px; margin-bottom: -50px; } .closeQuote { float: right; height: 25px; line-height: 80px; margin-top: -12px; margin-right: -5px; font-size: 64px; color: #fff; } div#theLowdown { background: #fff; overflow: hidden; padding: 15px; border: 1px solid #eee; } div#theLowdown h3 { clear: left; font-size: 13px; font-weight: bold; float: left; width: 210px; margin-bottom: 10px; line-height: 26px; } div#theLowdown p { float: left; width: 210px; line-height: 26px; margin-bottom: 10px; } div#YouTubeOverlay { width: 480px; } /**SPONSOR**/ #sponsor .main, #sponsor .sub { margin-top: 20px; margin-bottom: 40px; overflow: hidden; width: 460px; } #sponsor .main { float: left; } #sponsor .sub { float: right; } #sponsor .main strong { font-size: 14px; } #sponsor .sub { line-height: 40px; } #sponsor .sub .cta { background: url(../images/BulletPawWhite.png) no-repeat #000 10px 7px; border: 3px solid#fff; color: #fff; display: block; float: left; line-height: 1.4; margin-right: 5px; } #sponsor .sub .cta:hover { background: url(../images/BulletPawWhite.png) no-repeat #555 10px 7px; } #sponsor .sub img { border: 5px solid #fff; margin-top: 10px; } a.movieLink { padding-left: 20px; background: url(../images/movieLinkIcon.jpg) no-repeat; } p.movieLinkHolder { text-align: center; } /**CONTACT**/ #contact h1 { margin-top: 20px; } #contact .main, #contact .sub { margin-bottom: 40px; overflow: hidden; width: 460px; } #contact .main { float: left; padding-right: 40px; width: 420px; } #contact .sub { float: right; } #contact .main h2 { clear: left; float: left; font-size: 13px; width: 200px; } #contact .main h2.address { margin-bottom: 100px; } #contact .sub ul li { margin-bottom: 15px; } #contact p input { background: #000 url(../images/BulletPawWhiteSmall.png) no-repeat 10px 5px; border: none; color: #fff; font-size: 14px; padding: 2px 10px 3px 30px; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; float: right; } #contact p input:hover { background: url(../images/BulletPawWhiteSmall.png) no-repeat #555 10px 5px; cursor: pointer; } #contact form { background: #fff; border: 5px solid #000; overflow: hidden; padding: 20px; /* -moz-border-radius: 10px; -webkit-border-radius: 10px; */ margin-bottom: 40px; } #contact form label { display: block; float: left; text-align: right; margin-right: 10px; width: 150px; } #contact form textarea { height: 150px; } /**REGISTER**/ #register_h1 { margin: 20px 0; } #formHolder { background: #fff; border: 5px solid #000; overflow: hidden; padding: 20px; /* -moz-border-radius: 10px; -webkit-border-radius: 10px; */ margin-bottom: 40px; } #formHolder form fieldset { /* border-top: 3px solid #000; */ border-bottom: 3px solid #000; padding: 20px 0; } #formHolder ol { list-style: none; overflow: hidden; font-size: 14px; border-bottom: 3px solid #000; width: 100%; padding-bottom: 10px; } #formHolder ol li { padding: 0 24px 0 34px; float: left; overflow: hidden; height: 24px; line-height: 24px; color: #ddd; } #formHolder ol li.stepOne { background: url(../images/formStepperSprite.png) no-repeat; } #formHolder ol li.stepTwo { background: url(../images/formStepperSprite.png) no-repeat 0 -24px; } #formHolder ol li.stepThree { background: url(../images/formStepperSprite.png) no-repeat 0 -48px; } #formHolder ol li.stepFour { background: url(../images/formStepperSprite.png) no-repeat 0 -72px; } #formHolder ol li.stepFive { background: url(../images/formStepperSprite.png) no-repeat 0 -96px; } #formHolder ol li.stepSix { background: url(../images/formStepperSprite.png) no-repeat 0 -120px; } div.step2 ol#formStepper li.stepOne, div.step3 ol#formStepper li.stepOne, div.step4 ol#formStepper li.stepOne, div.step5 ol#formStepper li.stepOne, div.step6 ol#formStepper li.stepOne, div.step3 ol#formStepper li.stepTwo, div.step4 ol#formStepper li.stepTwo, div.step5 ol#formStepper li.stepTwo, div.step6 ol#formStepper li.stepTwo, div.step4 ol#formStepper li.stepThree, div.step5 ol#formStepper li.stepThree, div.step6 ol#formStepper li.stepThree, div.step5 ol#formStepper li.stepFour, div.step6 ol#formStepper li.stepFour, div.step6 ol#formStepper li.stepFive, div.thanks ol#formStepper li { background: url(../images/formStepperSprite.png) no-repeat 0 -168px; color: #ffd200; font-weight: bold; } div.step2 ol#formStepper li.stepOne a, div.step3 ol#formStepper li.stepOne a, div.step4 ol#formStepper li.stepOne a, div.step5 ol#formStepper li.stepOne a, div.step6 ol#formStepper li.stepOne a, div.step3 ol#formStepper li.stepTwo a, div.step4 ol#formStepper li.stepTwo a, div.step5 ol#formStepper li.stepTwo a, div.step6 ol#formStepper li.stepTwo a, div.step4 ol#formStepper li.stepThree a, div.step5 ol#formStepper li.stepThree a, div.step6 ol#formStepper li.stepThree a, div.step5 ol#formStepper li.stepFour a, div.step6 ol#formStepper li.stepFour a, div.step6 ol#formStepper li.stepFive a { color: #ffd200; } div.step1 ol#formStepper li.stepOne, div.step2 ol#formStepper li.stepTwo, div.step3 ol#formStepper li.stepThree, div.step4 ol#formStepper li.stepFour, div.step5 ol#formStepper li.stepFive, div.step6 ol#formStepper li.stepSix { background: url(../images/formStepperSprite.png) no-repeat 0 -144px; } div.step1 ol#formStepper li.stepOne a, div.step2 ol#formStepper li.stepTwo a, div.step3 ol#formStepper li.stepThree a, div.step4 ol#formStepper li.stepFour a, div.step5 ol#formStepper li.stepFive a, div.step6 ol#formStepper li.stepSix { color: #000; font-weight: bold; } div.thanks div.holder { border-bottom: 3px solid #000; padding: 20px 200px 20px 0; } div.thanks div.holder a.justGiving { background: url(../images/JGLogoBlue.png); width: 303px; height: 63px; display: block; text-indent: -99999px; } div.thanks div.holder a.cta { display: inline-block; background: #000 url(../images/BulletPawWhite.png) no-repeat 10px 7px; border: 3px solid #fff; color: #fff; margin: 10px 0; } div.thanks div.holder a.cta:hover { background: #555 url(../images/BulletPawWhite.png) no-repeat 10px 7px; color: #fff; } #formHolder ol li a { color: #ddd; text-decoration: none; } #formHolder ul { margin: 40px 0; clear: both; } #formHolder ul li { margin-bottom: 15px; } #formHolder ul li.textInputContainer label, #formHolder ul li.selectContainer label, #parentsPermissionHolder label, #formHolder ul li#DOBHolder p { display: block; float: left; font-weight: bold; margin-right: 20px; text-align: right; width: 360px; } #formHolder ul li.checkboxHolder { overflow: hidden; margin: 0 80px 20px 80px; } #formHolder ul li.checkboxHolder input { display: block; float: left; margin: 10px 20px 20px 0; } #formHolder ul li#DOBHolder label { display: inline; float: none; width: auto; margin-right: 0; } #formHolder ul li#DOBHolder select { margin-right: 10px; } .textInputContainer label, .selectContainer label, { clear: left; display: block; float: left; font-weight: bold; margin-right: 20px; text-align: right; width: 140px; } .cardDateContainer p { float: left; margin: 0 20px 0 0; text-align: right; width: 360px; font-weight: bold; } .cardDateContainer select { margin-right: 10px; } .textInputContainer input, .textInputContainer textarea { background: #fffac2; border: 2px solid #ffd200; width: 236px; padding: 4px 5px; font-weight: bold; } .textInputContainer input:focus, .textInputContainer textarea:focus { background: #ffd200; border: 2px solid #000; } #postCodeContainer input { width: 75px; } p.submitHolder { float: right; margin-bottom: 0; } p.backHolder { float: left; margin-bottom: 0; } p.submitHolder input, p.backHolder a.cta { background: #000 url(../images/BulletPawWhiteSmall.png) no-repeat 10px 5px; border: none; color: #fff; font-size: 14px; padding: 2px 10px 3px 30px; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; } p.submitHolder input:hover, p.backHolder a.cta:hover { background: url(../images/BulletPawWhiteSmall.png) no-repeat #555 10px 5px; cursor: pointer; } div#donationInfo { border: 1px solid #000; background: #fffac2; margin: 0 80px 15px 80px; padding: 10px; } div#donationInfo ul { margin: 0; } div#donationInfo ul li { margin-bottom: 15px; } div#donationInfo ul li.total { margin-bottom: 0; } div#donationInfo ul li input { background: #fff; border: 2px solid #ffd200; width: 15px; padding: 4px 5px; font-weight: bold; } div#donationInfo ul li input#donationPounds { width: 50px; } div#donationInfo ul li input:focus { background: #ffd200; border: 2px solid #000; } p.instruction { color: #777; font-size: 11px; margin:0 0 15px 0; } #CreditCardInfo p.instruction { line-height: 24px; display: inline; } .securityCodeContainer input { float: left; width: 25px; margin-right: 10px; } #termstitle { margin: 0 80px 15px 80px; } #terms { margin: 0 80px 20px 80px; } div#formHolder div.form_error { background: #ffa0a3; color: #4a2a28; border: 1px solid; padding: 10px; margin-top: 5px; } div#formHolder div.form_error ul { margin: 0!important; } div#formHolder div.form_error ul li { margin: 5px 0 0 0!important; list-style: disc inside; } #formHolder #summery ul { width: 22%; float: left; clear: none; padding: 0 10px; border-left: 4px solid #CCCCCC; height: 20em; } #formHolder #summery ul.details { border-left: none; } #formHolder #summery li { line-height: 1.6em; } #formHolder #summery li.editLink { text-align: right; margin-top: -30px; } #formHolder #summery .addr { display: block; } #teamSizeContainer p.instruction { display: inline; margin-left: 5px; } p.left{ float: left; }