/* Dogs Trust Global Stylesheet */ /* #################################### THEMED COLOR SCHEME: REHOMING PURPLE: #862455; SPONSORING RED: #A11514; ################################### */ * { margin: 0; padding: 0; } body { background:#f6ce31; font: 62.5% "Verdana", sans-serif; color:#000; text-align:center; } a {text-decoration:underline; color:#333;} a:hover {text-decoration:underline;} a.purpleBold {font-weight:bold; color:#862455; font-size:1.1em;} p.purpleBold a {font-weight:bold; color:#862455; font-size:1.1em;} .color-rehoming {color:#862455; } /* purple */ /* #### used by .net ##### */ .hidden { display:none; } .show { display:block; } /* ###################### */ #skipNav {position: absolute;left: -9999px;} fieldset {border-width:0; padding:0; margin:0;} h1, h2, h3, h4, h5, h6, p, blockquote, legend, input, select, textarea, label, dl, ul, ol, address {color:#333; font-weight:normal; padding:0; margin:0; font-family:"Verdana", sans-serif; } p {font-size:1.2em; line-height:1.3; padding:0; margin:0 0 .7em 0;} p.extraLineHeight {font-size:1.2em; line-height:1.5; padding:0; margin:0 0 .7em 0;} p.welcomeMessage{float:left; margin:.4em 1em 0 .5em;font-size:1.1em; color:#333; font-weight:bold; } p.welcomeMessage.normal{ font-weight:normal;} p.imgLeft {float:left; margin-right:1em; margin-top:1em;} p strong.rehoming {font-size:1.4em; color:#862455; margin: 0 .2em;} p strong.sponsoring {font-size:1.4em; color:#A11514; margin: 0 .2em;} p.date{color:#333333; margin-top:-5px; font-style:italic;} p.spotlightListingDate{color:#333333; margin-top:-5px; font-style:italic;} .sponsoring {color:#A11514; margin:1em 0 .2em 0; padding:0; } .imgFloatLeft {float:left; margin-right:1em;} .hr {border-bottom:#958543 1px solid; margin-bottom:1em;width:99%;} div.hr {border-bottom:1px solid #999; height:10px; width:98%; clear:both;} div.hr hr {display:none;} .toTop {background:transparent url(../imgs/arrowUp.gif) 0 6px no-repeat;border-bottom:1px solid #666;display:block;font-size:1em;margin-bottom:1.5em;padding:0 0 1.5em 1em;} /*headings*/ h1 {font-size:2.2em; margin:0 0 .3em 0;} h2 {font-size:1.5em; margin:0 0 1em 0; padding:0; font-weight:bold; color:#666;} h2.sponsorship { background:#CC0000; color:#fff; padding:1px 3px; font-weight:normal;} h2.giving { background:#2d92c8; color:#fff;padding:1px 3px; font-weight:normal;} h2.rehoming2 { background:#802150; color:#fff;padding:1px 3px; font-weight:normal;} h2.general { background:#FAE690; color:#000;padding:1px 3px; font-weight:normal;} /*h2.accounts.general {background: #EABD0B;}*/ h2.hr {border-bottom:#958543 1px solid; margin-bottom:1em; } h2.rehoming {color:#862455; margin:1em 0 .2em 0; padding:0; } h2 span.viewAll {font-size:.8em; color:#333; margin-left:.5em; font-weight:normal;} h2.step1{color:#000; font-size:2.5em;} /*h2.accounts {font-weight: bold; padding: 3px 5px; margin-bottom: 0;}*/ h3 {font-size:1.3em; margin:0 0 1em 0; font-weight:bold;} h3.inline{display:inline;} h3.inline.marginLeft{ display:inline;margin-left:3em;} h4,h5,h6 {font-size:1.2em;margin:1em 0;font-weight:bold;} h2.accounts {position:relative; width:99%; background:#DBC153 url(/imgs/tabSets/tabRepeatGeneric.jpg) repeat-x top; font-family: "Arial"; margin: 0; padding: 0; font-weight:bold; text-transform:uppercase; color:#fff;} h2.accounts .a {display: block; background: url(/imgs/tabSets/tabRightGeneric.jpg) no-repeat top right;} h2.accounts .a .b {display: block; padding:.5em .5em .3em; background: url(/imgs/tabSets/tabLeftGeneric.jpg) no-repeat top left;} h2.accounts.sponsorship {background-image: url(/imgs/tabSets/tabRepeatSponsor.jpg);} h2.accounts.sponsorship .a {background-image: url(/imgs/tabSets/tabRightSponsor.jpg);} h2.accounts.sponsorship .a .b {background-image: url(/imgs/tabSets/tabLEftSponsor.jpg);} h2.accounts.giving {background-image: url(/imgs/tabSets/tabRepeatGiving.jpg);} h2.accounts.giving .a {background-image: url(/imgs/tabSets/tabRightGiving.jpg);} h2.accounts.giving .a .b {background-image: url(/imgs/tabSets/tabLeftGiving.jpg);} h2.accounts.rehoming2 {background-image: url(/imgs/tabSets/tabRepeatRehome.jpg);} h2.accounts.rehoming2 .a {background-image: url(/imgs/tabSets/tabRightRehome.jpg);} h2.accounts.rehoming2 .a .b {background-image: url(/imgs/tabSets/tabLeftRehome.jpg);} h2.accounts.general {color: #000;} /*general*/ img{border:none;} .red {color:red;} .fullwidth {width:100%;} .floatRight {float:right !important;} .floatRight.marginRight { margin-right:5px;} .floatLeft {float:left !important;} .alignRight {text-align:right;} .bold {font-weight:bold;} .grey {color:#666;} .smallerFont {font-size:0.9em;} .alignCenter {text-align:center;} .clearBoth {clear: both;} .clearLeft {clear: left;} .clearRight {clear: right;} .noMargin {margin:0;} .marginBottom{margin-bottom:1em;} .marginTop{margin-top:1em;} .marginTopMore{margin-top:2em;} .paddingTop {padding-top:1em;} .paddingBottom {padding-bottom:1em;} .exrtaPadding{padding:5px 0;} .borderBottom {border-bottom:#958543 1px solid; margin-bottom:1em;width:99%;} .smallPrint {font-size:1.1em; padding:.4em;} .half {width:62%; margin-bottom:1em; } .twoThirds {width:75%; margin-bottom:1em; } legend.hidden {position:absolute; top:-9999px; left:0;} .hidden {position:absolute; top:-9999px; left:0;} .error {font-weight:bold; color:#f00;} img.required {margin-left: .3em;} /* List Styles */ ul {list-style: none;} ul.horizontal {list-style: none;} ul.horizontal li { display:inline;} ul.bulletList {font-size:1.1em; padding:1em;} ul.bulletList li {background: url(/imgs/bulletPoint.gif) no-repeat 0 .4em; padding:.2em 0 1em 2em;} #pageBody #content ul,#pageBody #content ol{float:none;font-size:1.1em;line-height:1.3em;margin:.5em 1em 1.5em 2em;} #pageBody #content ul li{background:url(/imgs/ArrowGreyRight.gif) no-repeat 0 3px;list-style:none;margin:.75em 0;padding-left:1.2em;position:relative;} #pageBody #content ol li{background:none;margin-bottom:.3em;padding-left:.9em;} /*PIXEL GAP FIX*/ .clearfix:after {content: "."; display: block; height:0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ #wrapper {position:relative; width:99.7em; margin:0 auto; padding-bottom:1em; text-align:left;} /* ################################################################################# ############## WRAPPER CLASSES ###################################################### ################################################################################### notes browsers: WIN/IE6 : does NOT like the #wrapper.class format and does not render any of the below, unless we remove the ID ref and use the standalong class eg ".default" WIN/OPERA 8, 8.5 : dont like fractions for background positioning eg 18.5em... they read it as 5em.... /* #wrapper.home {background:url(/imgs/home_bkg3.jpg) no-repeat 58em 1em; } #wrapper.default {background:url(/imgs/wrapperBkg2.jpg) no-repeat 42em 12em; } #wrapper.search-centres {background:url(/imgs/wrapperBkg_ukMap.jpg) no-repeat 48em 14em; } #wrapper.search-centres-results {background:url(/imgs/wrapperBkg_ukMapSmall.jpg) no-repeat 55em 16em; } #wrapper.search-centres-detail {background:url(/imgs/wrapperBkg_ukMapSmallest.jpg) no-repeat 60em 17.5em; } #wrapper.rehoming {background:url(/imgs/wrapperBkg_rehoming.jpg) no-repeat 49.5em 16em; } #wrapper.rehoming2 {background:url(/imgs/wrapperBkg_rehoming4b.jpg) no-repeat 54em 16em; } #wrapper.rehoming3 {background:url(/imgs/wrapperBkg_rehoming5.jpg) no-repeat 52em 15em; } #wrapper.kennel {background:url(/imgs/wrapperBkg_rehoming3.jpg) no-repeat 45em 17em; } #wrapper.rehomingSmall {background:url(/imgs/wrapperBkg_rehoming_small.jpg) no-repeat 54em 17.5em; } #wrapper.sponsor-a-dog {background:url(/imgs/wrapperBkg_sponsor-a-dog.jpg) no-repeat 51em 12em; } #wrapper.sponsor-a-dog_small {background:url(/imgs/wrapperBkg_sponsor-a-dog_small.jpg) no-repeat 55em 14em; } #wrapper.sponsor-a-dog_xtrasmall {background:url(/imgs/wrapperBkg_sponsor-a-dog_xtrasmall.jpg) no-repeat 60em 16em; } #wrapper.sponsor-a-dog2 {background:url(/imgs/wrapperBkg_sponsor-a-dog2.jpg) no-repeat 53em 16em; } #wrapper.AtoZ {background:url(/imgs/wrapperBkg_aToz.jpg) no-repeat 55em 18em; } #wrapper.AtoZ_B {background:url(/imgs/wrapperBkg_aToz_B.jpg) no-repeat 55em 18em; } #wrapper.AtoZ_B_small {background:url(/imgs/wrapperBkg_aToz_B_small.jpg) no-repeat 59em 18em;} #wrapper.AtoZ_B_small2 {background:url(/imgs/wrapperBkg_aToz_B_small2.jpg) no-repeat 60em 19em;} #wrapper.getInvolved {background:url(/imgs/wrapperBkg_getInvolved.jpg) no-repeat 49em 15em; } */ /* currently used in dropdown */ .wrapperBkg_home {background:url(../imgs/home_bkg7.jpg) no-repeat 58em 2em; } .wrapperBkg_default {background:url(../imgs/wrapperBkg_rehoming.jpg) no-repeat 50em 17.5em; } .wrapperBkg_rehoming {background:url(../imgs/wrapperBkg_rehoming.jpg) no-repeat 50em 17.5em; } .wrapperBkg_rehoming2 {background:url(../imgs/wrapperBkg_rehoming4b.jpg) no-repeat 55em 17em; } .wrapperBkg_rehoming3 {background:url(../imgs/wrapperBkg_rehoming5.jpg) no-repeat 54em 16em; } .wrapperBkg_rehomingSmall {background:url(../imgs/wrapperBkg_rehoming_small.jpg) no-repeat 57em 18em; } .wrapperBkg_search-centres {background:url(../imgs/wrapperBkg_ukMap.jpg) no-repeat 48em 14em; } .wrapperBkg_search-centres-results {background:url(../imgs/wrapperBkg_ukMapSmall.jpg) no-repeat 57em 16em; } .wrapperBkg_kennel {background:url(../imgs/wrapperBkg_rehoming3.jpg) no-repeat 46em 16.5em; } .wrapperBkg_sponsor-a-dog {background:url(../imgs/wrapperBkg_sponsor-a-dog.jpg) no-repeat 54em 12.5em; } .wrapperBkg_sponsor-a-dog_small {background:url(../imgs/wrapperBkg_sponsor-a-dog_small.jpg) no-repeat 54em 12.5em; } .wrapperBkg_sponsor-a-dog_xtrasmall {background:url(../imgs/wrapperBkg_sponsor-a-dog_xtrasmall.jpg) no-repeat 60em 16em; } .wrapperBkg_sponsor-a-dog2 {background:url(../imgs/wrapperBkg_sponsor-a-dog2.jpg) no-repeat 53em 13.5em; } .wrapperBkg_getInvolved {background:url(../imgs/wrapperBkg_getInvolved.jpg) no-repeat 49em 15.5em; } .wrapperBkg_AtoZ {background:url(../imgs/wrapperBkg_aToz.jpg) no-repeat 56em 18em; } .wrapperBkg_AtoZ_A_small {background:url(../imgs/wrapperBkg_aToz_A_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_B_small {background:url(../imgs/wrapperBkg_aToz_B_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_C_small {background:url(../imgs/wrapperBkg_aToz_C_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_D_small {background:url(../imgs/wrapperBkg_aToz_D_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_E_small {background:url(../imgs/wrapperBkg_aToz_E_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_F_small {background:url(../imgs/wrapperBkg_aToz_F_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_G_small {background:url(../imgs/wrapperBkg_aToz_G_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_H_small {background:url(../imgs/wrapperBkg_aToz_H_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_I_small {background:url(../imgs/wrapperBkg_aToz_I_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_J_small {background:url(../imgs/wrapperBkg_aToz_J_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_K_small {background:url(../imgs/wrapperBkg_aToz_K_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_L_small {background:url(../imgs/wrapperBkg_aToz_L_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_M_small {background:url(../imgs/wrapperBkg_aToz_M_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_N_small {background:url(../imgs/wrapperBkg_aToz_N_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_O_small {background:url(../imgs/wrapperBkg_aToz_O_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_P_small {background:url(../imgs/wrapperBkg_aToz_P_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_Q_small {background:url(../imgs/wrapperBkg_aToz_Q_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_R_small {background:url(../imgs/wrapperBkg_aToz_R_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_S_small {background:url(../imgs/wrapperBkg_aToz_S_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_T_small {background:url(../imgs/wrapperBkg_aToz_T_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_U_small {background:url(../imgs/wrapperBkg_aToz_U_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_V_small {background:url(../imgs/wrapperBkg_aToz_V_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_W_small {background:url(../imgs/wrapperBkg_aToz_W_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_X_small {background:url(../imgs/wrapperBkg_aToz_X_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_Y_small {background:url(../imgs/wrapperBkg_aToz_Y_small.jpg) no-repeat 59em 18em;} .wrapperBkg_AtoZ_Z_small {background:url(../imgs/wrapperBkg_aToz_Z_small.jpg) no-repeat 59em 18em;} /* not currently used in dropdown */ .wrapperBkg_registration {background:url(../imgs/wrapperBkg_registration.jpg) no-repeat 55em 20em; } .wrapperBkg_ecard {background:url(../imgs/dogs/sampleDog21_small.jpg) no-repeat 50em 20em;} .wrapperBkg_contact {background:url(../imgs/dogs/sampleDog16.jpg) no-repeat 50em 15em;} .wrapperBkg_contact_thankyou {background:url(../imgs/dogs/sampleDog17.jpg) no-repeat 40em 15em;} .wrapperBkg_AtoZ_A {background:url(../imgs/wrapperBkg_aToz_A.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_A_small2 {background:url(../imgs/wrapperBkg_aToz_A_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_B {background:url(../imgs/wrapperBkg_aToz_B.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_B_small2 {background:url(../imgs/wrapperBkg_aToz_B_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_C {background:url(../imgs/wrapperBkg_aToz_C.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_C_small2 {background:url(../imgs/wrapperBkg_aToz_C_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_D {background:url(../imgs/wrapperBkg_aToz_D.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_D_small2 {background:url(../imgs/wrapperBkg_aToz_D_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_E {background:url(../imgs/wrapperBkg_aToz_E.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_E_small2 {background:url(../imgs/wrapperBkg_aToz_E_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_F {background:url(../imgs/wrapperBkg_aToz_F.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_F_small2 {background:url(../imgs/wrapperBkg_aToz_F_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_G {background:url(../imgs/wrapperBkg_aToz_G.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_G_small2 {background:url(../imgs/wrapperBkg_aToz_G_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_H {background:url(../imgs/wrapperBkg_aToz_H.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_H_small2 {background:url(../imgs/wrapperBkg_aToz_H_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_I {background:url(../imgs/wrapperBkg_aToz_I.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_I_small2 {background:url(../imgs/wrapperBkg_aToz_I_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_J {background:url(../imgs/wrapperBkg_aToz_J.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_J_small2 {background:url(../imgs/wrapperBkg_aToz_J_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_K {background:url(../imgs/wrapperBkg_aToz_K.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_K_small2 {background:url(../imgs/wrapperBkg_aToz_K_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_L {background:url(../imgs/wrapperBkg_aToz_L.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_L_small2 {background:url(../imgs/wrapperBkg_aToz_L_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_M {background:url(../imgs/wrapperBkg_aToz_M.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_M_small2 {background:url(../imgs/wrapperBkg_aToz_M_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_N {background:url(../imgs/wrapperBkg_aToz_N.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_N_small2 {background:url(../imgs/wrapperBkg_aToz_N_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_O {background:url(../imgs/wrapperBkg_aToz_O.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_O_small2 {background:url(../imgs/wrapperBkg_aToz_O_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_P {background:url(../imgs/wrapperBkg_aToz_P.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_P_small2 {background:url(../imgs/wrapperBkg_aToz_P_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_Q {background:url(../imgs/wrapperBkg_aToz_Q.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_Q_small2 {background:url(../imgs/wrapperBkg_aToz_Q_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_R {background:url(../imgs/wrapperBkg_aToz_R.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_R_small2 {background:url(../imgs/wrapperBkg_aToz_R_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_S {background:url(../imgs/wrapperBkg_aToz_S.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_S_small2 {background:url(../imgs/wrapperBkg_aToz_S_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_T {background:url(../imgs/wrapperBkg_aToz_T.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_T_small2 {background:url(../imgs/wrapperBkg_aToz_T_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_U {background:url(../imgs/wrapperBkg_aToz_U.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_U_small2 {background:url(../imgs/wrapperBkg_aToz_U_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_V {background:url(../imgs/wrapperBkg_aToz_V.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_V_small2 {background:url(../imgs/wrapperBkg_aToz_V_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_W {background:url(../imgs/wrapperBkg_aToz_W.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_W_small2 {background:url(../imgs/wrapperBkg_aToz_W_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_X {background:url(../imgs/wrapperBkg_aToz_X.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_X_small2 {background:url(../imgs/wrapperBkg_aToz_X_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_Y {background:url(../imgs/wrapperBkg_aToz_Y.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_Y_small2 {background:url(../imgs/wrapperBkg_aToz_Y_small2.jpg) no-repeat 60em 19em;} .wrapperBkg_AtoZ_Z {background:url(../imgs/wrapperBkg_aToz_Z.jpg) no-repeat 55em 18em; } .wrapperBkg_AtoZ_Z_small2 {background:url(../imgs/wrapperBkg_aToz_Z_small2.jpg) no-repeat 60em 19em;} /* ######################################################################################### ################### HEADER ######################################################## ######################################################################################### */ #header{padding:0; margin-top:1em;} #header img#logo{margin:0 2em 0 1.5em; float:left; border:0; } #header fieldset .buttonYellow {margin: 0 .5em 0 0;} /* HEADER MESSAGE */ #header #headerMessage {float: left; width: auto; margin: 1.5em 0 0 4.5em;} #header #headerMessage p#strapline_one {margin:0 0 .1em 0; padding:0; text-transform:uppercase; color:#333; font-size:1.8em; font-weight:normal;} #header #headerMessage p#strapline_two {margin:0; padding:0; color:#666; font-size:1.6em; font-weight:bold;} /* TOP NAVIGATION */ #topNav {/*width:80.7em;*/ width: auto; border:1px solid #eec523; float:right; padding:8px 0; margin:0; background:#fae283; margin-right:.7em;} #topNav fieldset {float:right;} #topNav fieldset input.searchString {float:left; border:#222 1px solid; background:#fff; color:#666; font-size:1.1em; width:10em; padding:.2em .5em .2em .5em; margin:.2em .5em 0 0;} /* trying to get the span to wrap instead of absolute positioning... */ .greyNav {float:left; background:#333 url(/imgs/nav2GreyBottom.gif) repeat-x bottom; padding:0 0 0 0; margin:0 1em;} .greyNav div.a {float:left; position:relative; background: url(/imgs/nav2GreyTop.gif) repeat-x top;padding:0 0 0 0; margin:0 0 0 0;} .greyNav div.a div.b {float:left; background: url(/imgs/nav2GreyCornerBottomLeft.gif) no-repeat bottom left;padding:0 0 0 0; margin:0 0 0 0;} .greyNav div.a div.b div.c {float:left; background: url(/imgs/nav2GreyCornerBottomRight.gif) no-repeat bottom right;padding:0 0 0 0; margin:0 0 0 0;} .greyNav div.a div.b div.c div.d {float:left; background: url(/imgs/nav2GreyCornerTopRight.gif) no-repeat top right;padding:0 0 0 0; margin:0 0 0 0;} .greyNav div.a div.b div.c div.d ul {float:left; background: url(/imgs/nav2GreyCornerTopLeft.gif) no-repeat top left; padding:.2em 0; margin:0 0 0 0;} .greyNav div.a div.b div.c div.d ul li {float:left; background: url(/imgs/navGreyLinkBorderRight.gif) repeat-y right;padding: 0; margin:0; } .greyNav div.a div.b div.c div.d ul li.last {background: none; border:none; } .greyNav div.a div.b div.c div.d ul li.shopping {background: url(/imgs/navGreyCart.gif) no-repeat right; margin-right:1.5em; padding-right:.5em;} .greyNav div.a div.b div.c div.d ul li a {color:#fff; display:block; font-size:1.1em; float:left; padding:.3em 1.3em .3em 1em; text-decoration:none; } .greyNav div.a div.b div.c div.d ul li a:hover, .greyNav div.a div.b div.c div.d ul li a:focus {text-decoration:underline; } .greyNav div.a div.b div.c div.d ul li.on a {text-decoration:underline; } /* ##################################################################################################### ################### PRIMARY NAVIGATION ######################################################## ##################################################################################################### */ #mainNav {position:relative; float:none; margin:.6em 0 0 1em; padding:0 0 0 0; width:98em; background:#333 url(/imgs/navGreyTop.gif) repeat-x top; border-right:1px solid #222; border-left:1px solid #222;} #mainNav ul {position:relative;float:left; width:98em; margin-top:.5em; background:#333 url(/imgs/navGreyBottom.gif) repeat-x bottom; padding:0 0 .3em 0;} #mainNav ul li {position:relative;float:left; padding:0; margin: 0 1.2em 0 .5em; } #mainNav span.tl {position:absolute; top:0px; left:-1px; width:7px; height:7px; background: url(/imgs/navGreyCornerTopLeft.gif) no-repeat top left;} #mainNav span.tr {position:absolute; top:0px; right:-1px; width:7px; height:7px; background: url(/imgs/navGreyCornerTopRight.gif) no-repeat top right;} #mainNav span.bl {position:absolute; bottom:-1px; left:-1px; width:5px; height:7px; background: url(/imgs/navGreyCornerBottomLeft.gif) no-repeat bottom left;} #mainNav span.br {position:absolute; bottom:0px; right:-1px; width:4px; height:7px; background: url(/imgs/navGreyCornerBottomRight.gif) no-repeat bottom right;} /* advanced roll over effect - needs for a whole set of extra span tags */ #mainNav ul li a { position:relative; text-decoration:none; float:left; color:#fff; font-size:1.25em; margin:0; padding:0; background:url(/imgs/linkArrowGreyBkg.gif) 92% center no-repeat; } #mainNav ul li a:hover, #mainNav ul li a:focus {float:left; cursor:pointer; font-size:1.25em; text-decoration:none; color:#333; padding:0; background: #fddd5f url(/imgs/navLinkHoverArrow2.gif) 92% center no-repeat; } /* mouse over link */ /*set color-specific details */ #mainNav ul li a span.linkWrapper {position:relative; float:left; padding:.4em 0 0 0; background:none; margin:0; border:none; border-right:#333 1px solid; border-left:#333 1px solid;} #mainNav ul li a span.linkWrapper span.linkWrapper2 {position:relative; float:left;padding:0 3.5em .5em .5em; margin-top:.1em; background:none; } /*set hover effects specific */ #mainNav ul li a:hover span.linkWrapper, #mainNav ul li a:focus span.linkWrapper {position:relative; float:left; padding:.4em 0 0 0; margin:0; background: url(/imgs/navLinkHoverTop.gif) repeat-x top; border-right:#222 1px solid; border-left:#222 1px solid; } #mainNav ul li a:hover span.linkWrapper span.linkWrapper2, #mainNav ul li a:focus span.linkWrapper span.linkWrapper2 {position:relative; float:left; padding:0 3.5em .5em .5em; margin-top:.1em; background: url(/imgs/navLinkHoverBottom.gif) repeat-x bottom; } /* set images for corners */ #mainNav ul li a:hover span.linkWrapper span.a, #mainNav ul li a:focus span.linkWrapper span.a {position:absolute; margin:0; padding:0; border:none; top:0px; left:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerTopLeft.gif) no-repeat top left;} #mainNav ul li a:hover span.linkWrapper span.b, #mainNav ul li a:focus span.linkWrapper span.b {position:absolute; margin:0; padding:0; border:none; top:0px; right:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerTopRight.gif) no-repeat top right;} #mainNav ul li a:hover span.linkWrapper span.linkWrapper2 span.c, #mainNav ul li a:focus span.linkWrapper span.linkWrapper2 span.c {position:absolute; margin:0; padding:0; border:none; bottom:0px; left:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerBottomLeft.gif) no-repeat bottom left;} #mainNav ul li a:hover span.linkWrapper span.linkWrapper2 span.d, #mainNav ul li a:focus span.linkWrapper span.linkWrapper2 span.d {position:absolute; margin:0; padding:0; border:none; bottom:0px; right:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerBottomRight.gif) no-repeat bottom right;} /* CUURRENT LINK - slected - */ #mainNav ul li.on a {float:left; font-size:1.25em; text-decoration:none; color:#333; padding:0; background: #fddd5f url(/imgs/navLinkHoverArrow2.gif) 92% center no-repeat; } /* mouse over link */ #mainNav ul li.on a span.linkWrapper {position:relative; float:left; padding:.4em 0 0 0; margin:0; background: url(/imgs/navLinkHoverTop.gif) repeat-x top; border-right:#222 1px solid; border-left:#222 1px solid; } #mainNav ul li.on a span.linkWrapper span.linkWrapper2 {position:relative; float:left; padding:0 3.5em .5em .5em; margin-top:.1em; background: url(/imgs/navLinkHoverBottom.gif) repeat-x bottom; } #mainNav ul li.on a span.linkWrapper span.a {position:absolute; margin:0; padding:0; border:none; top:0px; left:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerTopLeft.gif) no-repeat top left;} #mainNav ul li.on a span.linkWrapper span.b {position:absolute; margin:0; padding:0; border:none; top:0px; right:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerTopRight.gif) no-repeat top right;} #mainNav ul li.on a span.linkWrapper span.linkWrapper2 span.c {position:absolute; margin:0; padding:0; border:none; bottom:0px; left:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerBottomLeft.gif) no-repeat bottom left;} #mainNav ul li.on a span.linkWrapper span.linkWrapper2 span.d {position:absolute; margin:0; padding:0; border:none; bottom:0px; right:-1px; width:7px; height:7px; background: url(/imgs/navLinkHoverCornerBottomRight.gif) no-repeat bottom right;} /* this one is to fix poor IE6 rendering */ #mainNav ul li a:hover span.linkWrapper span.linkWrapper2.rehoming, #mainNav ul li a:focus span.linkWrapper span.linkWrapper2.rehoming { padding:0 3.1em .5em .5em; } #mainNav ul li a span.linkWrapper span.linkWrapper2.rehoming {padding:0 3.1em .5em .5em; } #mainNav ul li.on a span.linkWrapper span.linkWrapper2.rehoming {padding:0 3.1em .5em .5em; } /* ##################################################################################################### ############################## LEFT NAVIGATION ################################################# ######################################################################################################## */ /* -- LEVEL 1 --- */ #leftNav {float:left; width:17em; margin-left:1em; margin-right:3em;} #leftNav ul {float:left; /*width:19em;*/ margin:0; padding:0;} #leftNav ul li {float:left; /*width:17em;*/ padding:0 0 0 3px; background: url(/imgs/leftNavLeftBorder.gif) no-repeat top left;} #leftNav ul li.first { background:#fddd5f url(/imgs/leftNavLeftBorderTop.gif) no-repeat top left;} /* default link */ #leftNav ul li a, #leftNav ul li strong {float:left; width:11.5em; padding:.6em 2.5em .6em 1em; margin:0; background:#fddd5f url(/imgs/leftNavLinkArrow2a.gif) no-repeat top right;text-decoration:none; font-size:1.15em; color:#333;} /* FIRST menu element */ #leftNav ul li.first a {background:url(/imgs/leftNavLinkArrowTop2.gif) no-repeat top right;} #leftNav ul li.first a:hover {background: url(/imgs/leftNavLinkArrowTop_on.gif) no-repeat top right;} /* LAST menu element */ #leftNav ul li.last { padding:0 0 0 2px; background:#fddd5f url(/imgs/leftNavLeftBorder.gif) no-repeat top left;} #leftNav ul li.last a {width:11.5em; padding:.6em 2.5em .6em 1em; background:#fddd5f url(/imgs/leftNavLinkArrow6.gif) no-repeat top right; border-right:#c3a327 1px solid; border-bottom:#222 1px solid;} #leftNav ul li.last a:hover, #leftNav ul li.last a:focus {width:11.5em; background:#fddd5f url(/imgs/leftNavLinkArrow5_on.gif) no-repeat top right; border-right:#c3a327 1px solid;} #leftNav ul li.last strong {width:11.5em; padding:.6em 2.5em .6em 1em; background:#f6ce31 url(/imgs/leftNavLinkArrow5_on.gif) no-repeat top right; border-right:#c3a327 1px solid; border-bottom:#222 1px solid;} /* hover */ #leftNav ul li a:hover, #leftNav ul li a:focus {background:#f6ce31 url(/imgs/leftNavLinkArrow2_on.gif) no-repeat top right; text-decoration:underline; } /* current status */ #leftNav ul li.on a {float:left; width:11.5em; padding:.6em 2.5em .6em 1em; margin:0; font-size:1.15em; color:#333; background:none; background: url(/imgs/leftNavLinkArrow_open.gif) no-repeat top right; font-weight: normal;} #leftNav ul li.on strong {float:left; width:11.5em; padding:.6em 2.5em .6em 1em; margin:0; text-decoration:none; font-size:1.15em; color:#333; background:#f6ce31 url(/imgs/leftNavLinkArrow2_on.gif) no-repeat top right; font-weight: normal;} /* -- LEVEL 2 --- */ #leftNav ul li.on ul {float:left; margin:0; padding:0; background:none; width:17em;} #leftNav ul li.on ul li {float:left; padding:0 0 0 0; margin:0; display:block; } #leftNav ul li.on ul li a {float:left; width:11em;padding:.4em 2em; margin:0; background:none; background: #FAE184 url(/imgs/leftNavRightBorder2.gif) no-repeat top right;} #leftNav ul li.on ul li a:hover, #leftNav ul li.on ul li a:focus {text-decoration:underline; background: #FAE184 url(/imgs/leftNavRightBorder2_on.gif) no-repeat top right;} #leftNav ul li.on ul li.on strong {float:left; width:11em; padding:.4em 2em; margin:0; text-decoration:underline; background:#FAE184 url(/imgs/leftNavRightBorder2_on.gif) no-repeat top right;} #leftNav ul li.on ul li.last strong {border-bottom:1px solid #333;} #leftNav ul li.on ul li.last a {width:11em;padding:.4em 2em; border:none; border-bottom:1px solid #333;} #pageToolsContainer {border-bottom:#958543 1px solid; margin-bottom:1em;width:99%;} #pageBody .noLeftNav .pageToolsContainer {width:70em;} /* ################################################################################################### ################### BREADCRUMBS TRAIL ######################################################## ################################################################################################### */ #breadcrumbs {padding:.3em 0; float:left; font-weight:bold; /* width:42.8em; */ width:80%; } #pageBody #content #breadcrumbs p {display:inline; line-height:1.5; padding:0; margin:0; float:left;font-size:1.1em; font-weight:bold;} #pageBody #content #breadcrumbs ol {display:inline; color:#333; margin:0 0 0 .1em; float:left;} #pageBody #content #breadcrumbs ol li {display:inline; padding: 0 .4em; margin: 0 ; border-right:1px #333 solid; line-height:1.6;} #pageBody #content #breadcrumbs ol li.last {color:#333; display:inline; padding: 0 0 .5em .4em; border:none; font-weight:normal;} #breadcrumbs ol li a {color:#333; text-decoration:underline;} /* ############################################################################################# ################### PAGE TOOLS ######################################################## ############################################################################################# */ #pageBody #content #pageTools {padding:.3em 0; float:right;} #pageBody #content #pageTools ul {margin:0;} #pageBody #content #pageTools ul li {background: none ; margin: 0; padding: 0 .5em; border-right:1px #958543 dotted; float: left;} #pageBody #content #pageTools ul li span{position:absolute; left:-9999px; top:0;} #pageBody #content #pageTools ul li.last {padding: 0 .5em; border:none;} #pageBody #content #pageTools ul li a img {vertical-align:middle; border:none; float:none; margin-right:0;} /* ################################################################################################ ################### PAGE BODY style ################################################################# ################################################################################################ */ /* Page Body - Main Content */ #pageBody {margin:2em 0 1em 0;} #pageBody #content {position:relative; margin:0; width:53.5em; float:left;} #pageBody #content.fullWidth {width:78.5em;} /* assuming right col is not loaded */ #pageBody #content.noLeftNav {margin-left:2em; width:70em;} /* assuming left Nav is not loaded; #pageBody .noLeftNavlisted in ie6 as ie doesn't respect #id.class */ /* right column */ #pageBody #rightCol {width:23em; float:right; margin:0 0 0 1em;} #pageBody #content ul.formList {font-size: 1em; margin:0;} #pageBody #content .formRow li {margin:0;padding:0;background:none;} #pageBody #content #abstract {width: 40em;} /* ###################################################################################### ######### PAGE BODY CMS GENERATED TEXT styles ################################################# ###################################################################################### */ /* Page Body - CMS STYLES */ #pageBody {margin:2em 0 1em 0;} #pageBody #content div.cms_wrapper {position:relative; margin:0; width:51em; float:left;} #pageBody #content div.cms_wrapper p {font-size:1.2em; line-height:1.3; padding:0; margin:0 0 .7em 0;} #pageBody #content div.cms_wrapper p.short {width:30em;} #pageBody #content div.cms_wrapper a {text-decoration:underline;} #pageBody #content div.cms_wrapper img {background:#fff; padding:4px; border-right:1px #ccab29 solid; border-bottom:1px solid #ccab29; /*float:none;*/ margin-right:1em;} #pageBody #content div.cms_wrapper img.imgCMS_floatLeft {float:left; margin: .8em 1em .8em 0em;} #pageBody #content div.cms_wrapper img.imgCMS_floatRight {float:right; margin: .8em 0 .8em 1em;} #pageBody #content div.cms_wrapper h1 {font-size:2.2em; font-weight:normal; padding:0; margin:0 0 .5em 0; color:#333;} #pageBody #content div.cms_wrapper h2 {font-size:1.6em; font-weight:bold; padding:0; margin:0 0 .7em 0; color:#333;} #pageBody #content div.cms_wrapper h3 {font-size:1.5em; font-weight:bold; padding:0; margin:0 0 .7em 0; color:#333;} #pageBody #content div.cms_wrapper h4 {font-size:1.4em; font-weight:bold; padding:0; margin:0 0 .5em 0;color:#333;} #pageBody #content div.cms_wrapper h5 {font-size:1.3em; font-weight:bold; padding:0; margin:0 0 .5em 0; color:#333;} #pageBody #content div.cms_wrapper h6 {font-size:1.2em; font-weight:bold; padding:0; margin:0 0 .5em 0; color:#333;} /* fix img for white background */ #pageBody #content .tabContainer .shadowContainer .shadow div.cms_wrapper img {background:#fff; padding:3px; border:#ccc 1px solid; border-right:1px #999 solid; border-bottom:1px solid #999; margin-right:.4em;} /* LOGGED IN user - sponsor a dog FIX */ #loggedInNews {width:99.9%; float:left; } #loggedInNews span.spacer{width:110px; height:52px; float:right;} #pageBody #content #loggedInNews .CMS_ImgGallerySlot ul li a img{ margin-right:.4em;} #pageBody #content div#loggedInNews.cms_wrapper {min-height:6em;width:52.3em;} /* IMAGE SLOT GALLERY */ #pageBody #content .CMS_ImgGallerySlot {background:url(/imgs/yellowBox_HR.jpg) repeat-x top; clear:left; margin:.8em 0; padding:.4em 0; width:auto;} #pageBody #content .CMS_ImgGallerySlot ul {display:inline; list-style: none;} #pageBody #content .CMS_ImgGallerySlot ul li{float:left; list-style: none; background:none; padding:0; margin:.2em; } #pageBody #content .cms_wrapper .CMS_ImgGallerySlot ul li{float:left; list-style: none; background:none; padding:0; margin:.2em; } #pageBody #content .CMS_ImgGallerySlot ul li a{} #pageBody #content .CMS_ImgGallerySlot ul li a img{border:1px solid #fff;} #pageBody #content .CMS_ImgGallerySlot ul li a img{border:1px solid #fff; padding:3px; background:#fff; border-right:#ccab29 1px solid;border-bottom:#ccab29 1px solid;} /* ################################################################################## #################### FOOTER ################################################### ################################################################################### */ #footer {float:left; margin:0 0 1em 1em; padding:.5em 0 0 0; position:relative; width:98em;} #footer p {margin:.2em 1.2em .4em .5em; padding:0; color:#333; line-height:1.2;} #footerNav {margin:.4em 1em; padding:0;} /* ############################################################################################### ################### HOME PAGE ############################################################# ################################################################################################ */ /* index.php */ #pageBody #content.homePage #homeContent {width:66em; float:left; height:230px; margin:.8em 0 0 1.5em; } #pageBody #content.homePage #homeContent #homeMessage {width:30em; float:left; margin-bottom:2.5em; } #pageBody #content.homePage #homeContent #homeMessage h2{color:#333; padding-bottom:.2em; margin:0 0 0 0; font-size:1.8em; font-weight:normal; } #pageBody #content.homePage .buttonBigYellow.homePage {float:right; margin:1em 0 2.5em 0;} /* home spotlights */ #pageBody #content.homePage #homeSpotlights { float:left; clear:both; margin:3em 0 2.5em 1em; width:98em;} #pageBody #content.homePage #homeSpotlights a:hover { text-decoration:underline; } /* ################################################################################################## ################### BUTTONS STYLES ######################################################## ################################################################################################## */ /* Yellow box container with image-based round corners */ .yellowBox {position:relative; /* width:45em; */ border:1px solid #eec523; background:#fae283; padding:.5em;} #maincontentform .yellowBox {float:left; width:100%; padding:0;} /* .yellowBox.fullWidth {width:99.9%; } .yellowBox.yellowBoxInner {padding: 1em;} */ .yellowBox .yellowBoxInner {margin:1em;} .yellowBox span.a {position:absolute; top:-1px; left:-1px; width:7px; height:7px; background: url(/imgs/YellowBoxCornerTopLeft.gif) no-repeat top left;} .yellowBox span.b {position:absolute; top:-1px; right:-1px; width:7px; height:7px; background: url(/imgs/YellowBoxCornerTopRight.gif) no-repeat top right;} .yellowBox span.c {position:absolute; bottom:-1px; left:-1px; width:7px; height:7px; background: url(/imgs/YellowBoxCornerBottomLeft.gif) no-repeat bottom left;} .yellowBox span.d {position:absolute; bottom:-1px; right:-1px; width:7px; height:7px; background: url(/imgs/YellowBoxCornerBottomRight.gif) no-repeat bottom right;} .yellowBox span.heartLeft {position:absolute; top:-11px; left:-11px; width:34px; height:34px; background: url(/imgs/btnYellowCornerBottomLeftHeart.gif) no-repeat top left;} .yellowBox span.heartRight {position:absolute; top:-6px; right:-4px; width:28px; height:25px; background: url(/imgs/btnYellowCornerBottomRightHeart.gif) no-repeat top right;} .yellowBox span.heartLeftRehoming {position:absolute; top:-7px; left:-6px; width:34px; height:34px; background: url(/imgs/btnPurpleCornerTopLeftHeart.gif) no-repeat top left;} .yellowBox span.heartRightRehoming {position:absolute; top:-6px; right:-6px; width:28px; height:25px; background: url(/imgs/btnPurpleCornerTopRightHeart.gif) no-repeat top right;} .yellowBox span.BowlRight {position:absolute; top:-29px; right:-4px; width:100px; height:85px; background: url(/imgs/btnYellowCornerBottomRightBowl.gif) no-repeat top right;} .yellowBox span.loggedInNews {position:relative; float: right; display: block; top:-18px; right:-10px; width:132px; height:85px; background: url(/imgs/btnYellowCornerBottomRightNews.jpg) no-repeat top right;} /* Yellow Buttons */ .buttonYellow {float:left; margin: 0 1em 0 1em; position:relative; width:auto; background: #fddd5f url(/imgs/btnYellowTop.gif) repeat-x top; padding:0; display:block; } .buttonYellow.marginLeft {margin-left:1em;} .buttonYellow.noMarginLeft {margin-left:0;} .buttonYellow div.bottom {float:left; background: url(/imgs/btnYellowBottom.gif) repeat-x bottom; padding:0;} .buttonYellow div.bottom div.tl {float:left; background: url(/imgs/btnYellowCornerTopLeft2.gif) no-repeat top left;padding:0;} .buttonYellow div.bottom div.tl div.tr {float:left; background: url(/imgs/btnYellowCornerTopRight2.gif) no-repeat top right;padding:0;} .buttonYellow div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/btnYellowCornerBottomLeft2.gif) no-repeat bottom left; margin:0; padding:0;} .buttonYellow div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/btnYellowCornerBottomRight2.gif) no-repeat bottom right; margin:0; padding:0;} .buttonYellow div.bottom div.tl div.tr div.bl div.br a {float:none; text-decoration:none; border-right:1px solid #333; border-left:1px solid #333; padding:0 2.5em 0 .7em; margin:0; font-size:1.2em; line-height:2; color:#333; background: transparent url(/imgs/linkArrowYellowBkg2.png) right center no-repeat; } .buttonYellow div.bottom div.tl div.tr div.bl div.br a.big {color:#333; font-size:2em; padding:0 2em 0 .5em; background:url(/imgs/linkArrowYellowBkgBig.png) right center no-repeat; margin-right:.2em;} .buttonYellow div.bottom div.tl div.tr div.bl div.br input {float:none; text-decoration:none; border:none; border-right:1px solid #333; border-left:1px solid #333; padding:0 2.2em 0 .5em; margin:.3em 0; font-size:1.2em; color:#333; background:url(/imgs/linkArrowYellowBkg2.png) right center no-repeat; } .buttonYellow div.bottom div.tl div.tr div.bl div.br input.big {float:none; text-decoration:none; border:none; border-right:1px solid #333; border-left:1px solid #333; padding:0 2.2em 0 .5em; margin:.3em 0; font-size:1.9em; color:#333; background:url(/imgs/linkArrowYellowBkgBig.png) right center no-repeat; } /* fix corners for yellow box bkg */ .yellowBox .buttonYellow div.bottom div.tl {background: url(/imgs/btnYellowCornerTopLeft.gif) no-repeat top left;} .yellowBox .buttonYellow div.bottom div.tl div.tr {background: url(/imgs/btnYellowCornerTopRight.gif) no-repeat top right;} .yellowBox .buttonYellow div.bottom div.tl div.tr div.bl {background:url(/imgs/btnYellowCornerBottomLeft.gif) no-repeat bottom left;} .yellowBox .buttonYellow div.bottom div.tl div.tr div.bl div.br {background: url(/imgs/btnYellowCornerBottomRight.gif) no-repeat bottom right;} /* Yellow Buttons with ligher border */ .buttonBigYellow {float:left; margin:0em; position:relative; width:auto; background:#fddd5f url(/imgs/btnYellBorderTopLeft.gif) no-repeat top left;} .buttonBigYellow.marginBottom {display:block; margin-bottom:1.5em; margin-right:.2em;} .buttonBigYellow div.tr {padding:8px 0 0 0 ; margin:0 0 0 0; float:left;background: url(/imgs/btnYellBorderTopRight.gif) no-repeat top right;} .buttonBigYellow div.tr div.bl{float:left;background:url(/imgs/btnYellBorderBottomLeft.gif) no-repeat bottom left; padding:0;} .buttonBigYellow div.tr div.bl div.br {padding:0 0 8px 0px; margin:0 0 0 5px; float:left;background: url(/imgs/btnYellBorderBottomRight.gif) no-repeat bottom right; } .buttonBigYellow div.tr div.bl div.br a {display: inline-block; color:#333; font-size:2.2em; padding:0 2.3em 0 .4em; background:url(/imgs/linkArrowYellowBkgBig.gif) right center no-repeat; margin-right:.2em;} /* .buttonBigYellow2 span.tl {position:absolute; top:0px; left:-2px; width:8px; height:8px; background: url(/imgs/btnBigYellowCornerTopLeft.gif) no-repeat top left;} .buttonBigYellow2 span.tr {position:absolute; top:0px; right:-2px; width:8px; height:8px; background: url(/imgs/btnBigYellowCornerTopRight.gif) no-repeat top right;} .buttonBigYellow2 span.bl {position:absolute; bottom:0px; left:-2px; width:8px; height:8px; background: url(/imgs/btnBigYellowCornerBottomLeft.gif) no-repeat bottom left;} .buttonBigYellow2 span.br {position:absolute; bottom:0px; right:-2px; width:8px; height:8px; background: url(/imgs/btnBigYellowCornerBottomRight.gif) no-repeat bottom right;} */ /* RED BUTTON on yell Bkg */ .buttonRed {float:left; margin: 0 1em 0 1em; padding:0; background: #c83030 url(/imgs/buttonRedTopBorder.gif) repeat-x top; } .buttonRed.noMargin {margin: 0;} .buttonRed.marginLeft {margin: 0 0 0 3em;} .buttonRed div.bottom {float:left; background: url(/imgs/buttonRedBottomBorder.gif) repeat-x bottom; padding:0;margin:0;} .buttonRed div.bottom div.tl {float:left; background: url(/imgs/buttonRedTopCornerLeft.gif) no-repeat top left;padding:0;margin:0;} .buttonRed div.bottom div.tl div.tr {float:left; background: url(/imgs/buttonRedTopCornerRight.gif) no-repeat top right;padding:0;margin:0;} .buttonRed div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/buttonRedBottomCornerLeft.gif) no-repeat bottom left; margin:0; padding:0;} .buttonRed div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/buttonRedBottomCornerRight.gif) no-repeat bottom right; margin:0; padding:0;} .buttonRed div.bottom div.tl div.tr div.bl div.br a {float:none; color:#fff; text-decoration:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 2.5em 0 .7em; margin:0; font-size:1.2em; line-height:2; background: transparent url(/imgs/buttonRedLinkArrow2.png) right center no-repeat; } .buttonRed div.bottom div.tl div.tr div.bl div.br a.backArrow {float:none; color:#fff; text-decoration:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 .7em 0 2.5em; margin:0; font-size:1.2em; line-height:2; background: transparent url(/imgs/buttonRedLinkArrowBack.png) left center no-repeat; } .buttonRed div.bottom div.tl div.tr div.bl div.br input {float:none; width:auto;text-decoration:none; border:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 2.2em 0 .5em; margin:.5em 0; font-size:1.2em; color:#fff; background:url(/imgs/buttonRedLinkArrow2.png) right center no-repeat; } .buttonRed div.bottom div.tl div.tr div.bl div.br input.backArrow {float:none; text-decoration:none; border:none; border-right:1px solid #801919; border-left:1px solid #801919; padding: 0 .5em 0 2.2em; margin:.5em 0; font-size:1.2em; color:#fff; background:url(/imgs/buttonRedLinkArrow2_back.png) left center no-repeat; } /* RED BUTTON on white Bkg */ /* .tabContainer .shadowContainer div.shadow div.container .buttonRed {background: #c83030 url(/imgs/buttonRedTopWhtBkg.gif) repeat-x top; } .tabContainer .shadowContainer div.shadow div.container .buttonRed div.bottom { background: url(/imgs/buttonRedBottomWhtBkg.gif) repeat-x bottom; } .tabContainer .shadowContainer div.shadow div.container .buttonRed div.bottom div.tl {background: url(/imgs/buttonRedTopWhtCornerLeft.gif) no-repeat top left;} .tabContainer .shadowContainer div.shadow div.container .buttonRed div.bottom div.tl div.tr {float:left; background: url(/imgs/buttonRedTopWhtCornerRight.gif) no-repeat top right;} .tabContainer .shadowContainer div.shadow div.container .buttonRed div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/buttonRedBottomWhtCornerLeft.gif) no-repeat bottom left;} .tabContainer .shadowContainer div.shadow div.container .buttonRed div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/buttonRedBottomWhtCornerRight.gif) no-repeat bottom right; } */ /* PURPLE BUTTON */ .buttonPurple {float:left; margin: 0 1em 0 1em; position:relative; width:auto; background: #7c1e4d url(/imgs/buttonPurpleTopGradBkg.jpg) repeat-x top; padding:.3em 0 0 0; border-right:1px solid #68143e; border-left:1px solid #68143e;} .buttonPurple div {float:left; background: url(/imgs/buttonPurpleBottomWhtBorder.jpg) repeat-x bottom; padding:0 0 .5em 0;} .buttonPurple div.inputContainer {float:left; background: url(/imgs/buttonPurpleBottomGradBkg.jpg) repeat-x bottom; padding:0 0 .3em 0;} .buttonPurple div.inputContainer input {float:left; color:#333; color:#fff; font-size:1.1em; border:none; padding:.2em 2em .3em .5em; background:url(/imgs/buttonPurpleWhiteHart.gif) right center no-repeat; margin: 0 0.5em 0 0;} .buttonPurple div a {color:#fff;font-size:1.1em; float:left; padding:.2em 1.3em .3em 1em; text-decoration:none; } .buttonPurple div a:hover {text-decoration:none; } .buttonPurple div a.arrow { font-size:1.2em; background:url(/imgs/buttonRedLinkArrow.gif) right center no-repeat; padding:0em 2em 0em 1em; margin-right:.5em; line-height:1.4; } .buttonPurple span.tl {position:absolute; top:0px; left:-1px; width:8px; height:7px; background: url(/imgs/buttonPurpleTopCornerLeft.jpg) no-repeat top left;} .buttonPurple span.tr {position:absolute; top:0px; right:-1px; width:8px; height:7px; background: url(/imgs/buttonPurpleTopCornerRight.jpg) no-repeat top right;} .buttonPurple span.bl {position:absolute; bottom:0px; left:-1px; width:8px; height:7px; background:url(/imgs/buttonPurpleBottomCornerLeft.gif) no-repeat bottom left;} .buttonPurple span.br {position:absolute; bottom:0px; right:-1px; width:8px; height:7px; background: url(/imgs/buttonPurpleBottomCornerRight.jpg) no-repeat bottom right;} /* HUG ME FEATURE - RED BUTTON */ .s .button {float:left; margin: 0 1em 0 1em; padding:0; background: #c83030 url(/imgs/buttonRedTopBorder.gif) repeat-x top; } .s .button.noMargin {margin: 0;} .s .button.marginLeft {margin: 0 0 0 3em;} .s .button div.bottom {float:left; background: url(/imgs/buttonRedBottomBorder.gif) repeat-x bottom; padding:0;margin:0;} .s .button div.bottom div.tl {float:left; background: url(/imgs/buttonRedTopCornerLeft.gif) no-repeat top left;padding:0;margin:0;} .s .button div.bottom div.tl div.tr {float:left; background: url(/imgs/buttonRedTopCornerRight.gif) no-repeat top right;padding:0;margin:0;} .s .button div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/buttonRedBottomCornerLeft.gif) no-repeat bottom left; margin:0; padding:0;} .s .button div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/buttonRedBottomCornerRight.gif) no-repeat bottom right; margin:0; padding:0;} .s .button div.bottom div.tl div.tr div.bl div.br a {float:none; color:#fff; text-decoration:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 2.5em 0 .7em; margin:0; font-size:1.2em; line-height:2; background: transparent url(/imgs/buttonRedLinkArrow2.png) right center no-repeat; } .s .button div.bottom div.tl div.tr div.bl div.br a.backArrow {float:none; color:#fff; text-decoration:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 .7em 0 2.5em; margin:0; font-size:1.2em; line-height:2; background: transparent url(/imgs/buttonRedLinkArrowBack.png) left center no-repeat; } .s .button div.bottom div.tl div.tr div.bl div.br input {float:none; width:auto;text-decoration:none; border:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 2.2em 0 .5em; margin:.5em 0; font-size:1.2em; color:#fff; background:url(/imgs/buttonRedLinkArrow2.png) right center no-repeat; } .s .button div.bottom div.tl div.tr div.bl div.br input.backArrow {float:none; text-decoration:none; border:none; border-right:1px solid #801919; border-left:1px solid #801919; padding: 0 .5em 0 2.2em; margin:.5em 0; font-size:1.2em; color:#fff; background:url(/imgs/buttonRedLinkArrow2_back.png) left center no-repeat; } /* HUG ME FEATURE - purple BUTTON */ /* Rehome (Purple) Buttons */ .r .button {float:left; margin: 0 1em 0 1em; padding:0; background: #892859 url(/imgs/tabSets/bttnTopRehome.jpg) repeat-x top; } .r .button.noMargin {margin: 0;} .r .button.marginLeft {margin: 0 0 0 3em;} .r .button div.bottom {float:left; background: url(/imgs/tabSets/bttnBottomRehome.jpg) repeat-x bottom; padding:0;margin:0;} .r .button div.bottom div.tl {float:left; background: url(/imgs/tabSets/bttnTLRehome.jpg) no-repeat top left; padding:0;margin:0;} .r .button div.bottom div.tl div.tr {float:left; background: url(/imgs/tabSets/bttnTRRehome.jpg) no-repeat top right;padding:0;margin:0;} .r .button div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/tabSets/bttnBLRehome.jpg) no-repeat bottom left; margin:0; padding:0;} .r .button div.bottom div.tl div.tr div.bl div.br {float:left;background: url(/imgs/tabSets/bttnBRRehome.jpg) no-repeat bottom right;margin:0; padding:0;} .r .button div.bottom div.tl div.tr div.bl div.br a {float:none; color:#fff; text-decoration:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 2.5em 0 .7em; margin:0; font-size:1.2em; line-height:2; background: transparent url(/imgs/tabSets/bttnArrowRehome.jpg) right center no-repeat; } .r .button div.bottom div.tl div.tr div.bl div.br a.backArrow {float:none; color:#fff; text-decoration:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 .7em 0 2.5em; margin:0; font-size:1.2em; line-height:2; background: transparent url(/imgs/tabSets/bttnArrowBackRehome.jpg) left center no-repeat; } .r .button div.bottom div.tl div.tr div.bl div.br input {float:none; width:auto;text-decoration:none; border:none; border-right:1px solid #801919; border-left:1px solid #801919; padding:0 2.2em 0 .5em; margin:.5em 0; font-size:1.2em; color:#fff; background:url(/imgs/tabSets/bttnArrowRehome.jpg) right center no-repeat; } .r .button div.bottom div.tl div.tr div.bl div.br input.backArrow {float:none; text-decoration:none; border:none; border-right:1px solid #801919; border-left:1px solid #801919; padding: 0 .5em 0 2.2em; margin:.5em 0; font-size:1.2em; color:#fff; background:url(/imgs/tabSets/bttnArrowBackRehome.jpg) left center no-repeat; } #pageBody #content #hugThisDog .r p strong.counter {color: #892859;} /* .buttonPurple span.tl {position:absolute; top:0px; left:-1px; width:8px; height:7px; background: url(/imgs/buttonPurpleTopCornerLeft.jpg) no-repeat top left;} .buttonPurple span.tr {position:absolute; top:0px; right:-1px; width:8px; height:7px; background: url(/imgs/buttonPurpleTopCornerRight.jpg) no-repeat top right;} .buttonPurple span.bl {position:absolute; bottom:0px; left:-1px; width:8px; height:7px; background:url(/imgs/buttonPurpleBottomCornerLeft.gif) no-repeat bottom left;} .buttonPurple span.br {position:absolute; bottom:0px; right:-1px; width:8px; height:7px; background: url(/imgs/buttonPurpleBottomCornerRight.jpg) no-repeat bottom right;} .tabRehome .tabButton {background: #892859 url(/imgs/tabSets/bttnTopRehome.jpg) repeat-x top;} .tabRehome .tabButton div.bottom { background: url(/imgs/tabSets/bttnBottomRehome.jpg) repeat-x bottom;} .tabRehome .tabButton div.bottom div.tl {background: url(/imgs/tabSets/bttnTLRehome.jpg) no-repeat top left;} .tabRehome .tabButton div.bottom div.tl div.tr {float:left; background: url(/imgs/tabSets/bttnTRRehome.jpg) no-repeat top right;} .tabRehome .tabButton div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/tabSets/bttnBLRehome.jpg) no-repeat bottom left;} .tabRehome .tabButton div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/tabSets/bttnBRRehome.jpg) no-repeat bottom right;} */ /* PURPLE BUTTON on white Bkg */ .buttonPurpleWht {float:left; margin: 0 1em 0 1em; position:relative; width:auto; background: #7c1e4d url(/imgs/buttonPurpleTopWhtBorder.jpg) repeat-x top; padding:0; } .marginTop {margin:1em 0 0 0;} .buttonPurpleWht.noMargin {margin:0;} .buttonPurpleWht div.bottom {float:left; background: url(/imgs/buttonPurpleBottomWhtBorder.jpg) repeat-x bottom; padding:0;} .buttonPurpleWht div.bottom div.tl {float:left; background: url(/imgs/buttonPurpleTopWhtCornerLeft.jpg) no-repeat top left;padding:0;} .buttonPurpleWht div.bottom div.tl div.tr {float:left; background: url(/imgs/buttonPurpleTopWhtCornerRight.jpg) no-repeat top right;padding:0;} .buttonPurpleWht div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/buttonPurpleBottomWhtCornerLeft.jpg) no-repeat bottom left;padding:0;} .buttonPurpleWht div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/buttonPurpleBottomWhtCornerRight.gif) no-repeat bottom right; margin:.4em 0 0 0; padding:0 0 .5em 0;} .buttonPurpleWht div.bottom div.tl div.tr div.bl div.br a.arrow {float:left; text-decoration:none; font-size:1.1em; line-height:1.5; color:#fff; background:url(/imgs/buttonPurpleTopWhtArrow.jpg) right .1em no-repeat; padding:0 2em 0 1em; margin-right:.5em; } .buttonPurpleWht div.bottom div.tl div.tr div.bl div.br input {float:left; color:#333; color:#fff; font-size:1.1em; border:none; padding:0 2em 0em .5em; background:url(/imgs/buttonPurpleTopWhtArrow.jpg) right center no-repeat; margin: 0 0.5em 0 0;} /* ################################################################################################ ########## DOGS GALLERY WITH PHOTO FRAMES & SHADOWS ######################################### ################################################################################################ */ .dogsGallery {float:left; width:99%;} .dogsGallery .shadowContainer {display:inline; position: relative; left:3px; top:3px; margin:.3em .5em .3em 0; float:left; width:98px; } .dogsGallery .shadowContainer div.shadow {background: #c9ba82; float:left; width: 93px;} .dogsGallery .shadowContainer div.shadow div.container {background:#FFFFFF none repeat scroll 0 0;float:left;left:-2px;min-height:180px;padding:0;position:relative;top:-2px;} .dogsGallery.sponsor-a-dog .shadowContainer div.shadow div.container {min-height:150px;} .dogsGallery.rehome-a-dog .shadowContainer div.shadow div.container {position: relative; left:-2px; top:-2px; background:#fff; padding:0; float:left; min-height: 175px; width: 93px;} .dogsGallery .shadowContainer div.shadow div.container img {display:block; vertical-align:bottom; border:#fff 4px solid; border-bottom:2px #fff solid; margin:0; } .dogsGallery .shadowContainer div.shadow div.container p {margin:0; padding:0;} .dogsGallery .shadowContainer div.shadow div.container p a{font-size:.9em; float:left; text-decoration:none; margin:0; padding:0;} .dogsGallery .shadowContainer div.shadow div.container p.name a{display:inline; margin:0 0 0 4px; padding:0 0 0 5px; font-weight:bold; clear:left;} .dogsGallery .shadowContainer div.shadow div.container p.location a{display:inline; color:#666; width:7.2em; margin:0 0 0 4px; padding:0 0 2px 5px; clear:left;} .dogsGallery .shadowContainer div.shadow div.container div.icons{border-top:1px dashed #CCCCCC;bottom:0;float:left;height:21px;left:0;margin:0.2em 0 0 0.2em;padding:0.3em 0 0.2em;position:absolute;width:92px;} .dogsGallery .shadowContainer div.shadow div.container div.icons img{margin:.2em .1em; padding:0; border:none; display:inline; float: left;} .dogsGallery.rehome-a-dog { margin-top:.6em;} .dogsGallery.sponsor-a-dog .shadowContainer div.shadow div.container p.name a{ color:#A11514; } .dogsGallery.rehome-a-dog .shadowContainer div.shadow div.container p.name a{ color:#862455; } .dogsGallery.rehome-a-dog h2{margin-bottom:.4em; } /* for DOG GALLERY PAGE (search results + sponsor & rehoming landing pages */ .dogsGallery.rehome-a-dog span.SpecialDogSmall {position:absolute; top:3px; left:4px; width:85px; height:15px; background: url(/imgs/specialDogRehome_small.png) no-repeat top left;} .dogsGallery.sponsor-a-dog span.SpecialDogSmall {position:absolute; top:3px; left:4px; width:85px; height:15px; background: url(/imgs/specialDogSponsor_small.png) no-repeat top left;} span.rehomedDogSmall, span.bookedDogSmall {position:absolute; top:81px; left:4px; width:90px; height:20px;} span.rehomedDogSmall {background: url(/imgs/rehomedDogHorizSm.gif) no-repeat top left;} span.bookedDogSmall {background: url(/imgs/bookedDogHorizSm.gif) no-repeat top left;} span.newDogSmall {position:absolute; top:2px; right:1px; width:38px; height:32px; background: url(/imgs/newDog_small2.png) no-repeat bottom left;} .dogsGallery.rehome-a-dog a {text-decoration:none;} .dogsGallery.rehome-a-dog a:hover {text-decoration:none;} .dogsGallery.rehome-a-dog .viewAll a {text-decoration:underline;} .dogsGallery.sponsor-a-dog a {text-decoration:none;} .dogsGallery.sponsor-a-dog a:hover {text-decoration:none;} /* ############################################################################################### ########## SPONSOR A DOG DETAIL PAGE ######################################################## ################################################################################################ */ #flashContainer { margin:0; padding:0; position:relative; width:53.5em; height:5em; clear:left; } #flashContainer .flash { position:relative; left:0; top:-30px; z-index:1001; margin:0; padding:0; width:53.5em; height:8.9em; } /* DOG big PHOTO CARD */ .dogPhotoCard {float:left; width:53em;} .dogPhotoCard .redTab {position:relative; left:-2px; top:-2px; width:auto; border:1px solid #a71919; background:#a11515 url(/imgs/TabRedGrad.jpg) repeat-x top; padding:.7em 0 .4em 0; } .dogPhotoCard .redTab h1 {color:#fff; font-family: "Arial"; font-size:1.7em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } .dogPhotoCard .redTab h2 {color:#fff; font-family: "Arial"; font-size:1.5em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } .dogPhotoCard .redTab span.a {position:absolute; top:-1px; left:-1px; width:9px; height:8px; background: url(/imgs/TabRedTopLeftCorner.gif) no-repeat top left;} .dogPhotoCard .redTab span.b {position:absolute; top:-1px; right:-3px; width:12px; height:8px; background: url(/imgs/TabRedTopRightCorner2.gif) no-repeat top right;} .dogPhotoCard .shadowContainer {display:inline; position: relative; left:2px; top:6px; margin:0; float:left; width:52em; } .dogPhotoCard .shadowContainer div.shadow {background: #c5a527; float:left;} .dogPhotoCard .shadowContainer div.shadow div.photoContainer {position: relative; left:-2px; top:-2px;background: #fff; padding:0; float:left;width:53em; } .dogPhotoCard .shadowContainer div.shadow div.photoContainer img{border:#fff 5px solid; display:block; vertical-align:bottom; float:left;} .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.icons{width:4em; float:right;} .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.icons img{float:left; margin-top:1.5em;} .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.info{width:24em; margin-left:.5em; margin-bottom: 1.5em; float:left;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.info a {text-decoration:none; } .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.info h2 {color:#000; font-size:1.8em; margin:.3em 0 0 0; padding:0 0 .8em 0;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.info p {color:#000; font-size:1.1em; padding:0; margin:0 0 .5em 0;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.info p.label {color:#000; font-weight:bold; padding:0; margin:0 0 .1em 0;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.info p span.label {color:#000; font-weight:bold; padding:0; margin:0 0 .1em 0;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.info p span.data {color:#666; padding:0; margin:0 0 .8em 0;} /* DOG big PHOTO CARD SMALL */ .dogPhotoCardSmall {float:left; width:10em; padding:3px;} .dogPhotoCardSmall .shadowContainer {display:inline; position: relative; left:2px; top:6px; margin:0 5px 0 0; float:left; width:10.7em; } .dogPhotoCardSmall .shadowContainer div.shadow {background: #c5a527; float:left;} .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer {position: relative; left:-2px; top:-2px;background: #fff; padding:0; float:left;width:10.7em; } .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer img{border:#fff 5px solid; display:block; vertical-align:bottom; float:left;} .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.icons{} .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.icons img{float:left; margin-top:1.5em;} .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.info{width:24em; margin-left:.5em; margin-bottom: 1.5em; float:left;} #pageBody #content .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.info a {text-decoration:none; } .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.info h2 {color:#000; font-size:1.8em; margin:.3em 0 0 0; padding:0 0 .8em 0;} #pageBody #content .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.info p {color:#000; font-size:1.1em; padding:0; margin:0 0 .5em 0;} #pageBody #content .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.info p.label {color:#000; font-weight:bold; padding:0; margin:0 0 .1em 0;} #pageBody #content .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.info p span.label {color:#000; font-weight:bold; padding:0; margin:0 0 .1em 0;} #pageBody #content .dogPhotoCardSmall .shadowContainer div.shadow div.photoContainer div.info p span.data {color:#666; padding:0; margin:0 0 .8em 0;} /* sponsor-a-dog, sponsored dogs summary */ #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.form { width:40em; margin:.5em .2em .8em 1em; float:left;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.form p.label {color:#000; width:23em; float:left; font-weight:bold; font-size:1.1em; padding:.2em 0 .7em 0; margin:0;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.form input { width:5em;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.form div.options {float:right; margin-right:1em; width:12em;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.form div.options input.radio {width:auto; padding:.4em 0 0 0; margin:.4em 0 0 0;} #pageBody #content .dogPhotoCard .shadowContainer div.shadow div.photoContainer div.form div.options label {color:#000; width:auto; margin:0 0 0 .2em; padding: 0 0 .2em 0; font-size:1.2em; } /* ################################################################################################ ########## REHOMING A DOG DETAIL PAGE ######################################################## ################################################################################################ */ /* HUG THE DOG - FEATURE */ #pageBody #content #hugThisDog {margin:.5em 0 1em 0; width:99.9%; padding:.5em 0; float:left;} #pageBody #content #hugThisDog h2 {margin:0 0 .1em 2em; padding:0;} #pageBody #content #hugThisDog p {padding: .2em 1em 0 0; margin:0; float:right;} #pageBody #content #hugThisDog p.notLogged {padding: .2em 0 0 0; margin:0 1em 0 2.7em; font-size:1.1em; float:none; } #pageBody #content #hugThisDog p strong.counter {color:#c83030; margin:0 .1em; font-size:1.2em; font-weight:bold;} /* related info - ONLY FOR SUBSCRIBERS */ #pageBody #content #sponsorDogRelatedInfo {margin:3em 0 1.5em 0; width:99.9%; padding:.5em 0; float:left; min-height: 6em;} #pageBody #content #sponsorDogRelatedInfo h2 {margin:0 0 .1em 1em; padding:0;} #pageBody #content #sponsorDogRelatedInfo p {padding: .2em 1em 0 0; margin:0; } #pageBody #content #sponsorDogRelatedInfo ul.bulletList {font-size:1.1em; margin: 0; padding:1em .5em 1em 1.5em;} #pageBody #content #sponsorDogRelatedInfo ul.bulletList li {background: url(/imgs/ArrowGreyRight.gif) no-repeat 0 .4em; padding:.2em 0 .2em .8em;} /* ################################################################################################################ #################### GENREAL TAB CONTAINER ############################################################# ################################################################################################################ */ /* .tabContainer { float:left; width:53em; margin-bottom:2em;} .tabContainer.marginTop {margin-top:1em;} */ /* default list style in tabs */ .tabContainer ul.bulletList {font-size:1.1em; padding:1em .5em 1em 1.5em;} .tabContainer ul.bulletList li {background: url(/imgs/ArrowGreyRight.gif) no-repeat 0 .4em; padding:.2em 0 .2em .8em;} /* purple tab REHOMING .tabContainer .purpleTab { position:relative; left:-2px; top:-2px; width:auto; background:#7c1e4d url(/imgs/TabPurpleGrad2.gif) repeat-x top; } .tabContainer .purpleTab div.a {background: url(/imgs/TabPurpleTopRightCorner2.gif) no-repeat top right;} .tabContainer .purpleTab div.a div.b { background: url(/imgs/TabPurpleTopLeftCorner.gif) no-repeat top left; ;padding:.9em 0 .5em 0;} .tabContainer .purpleTab div.a div.b h1 {color:#fff; font-family: "Arial"; font-size:1.7em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } .tabContainer .purpleTab div.a div.b h2 {color:#fff; font-family: "Arial"; font-size:1.5em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } /*aqua tab A to Z */ .tabContainer .aquaTab {position:relative; left:-2px; top:-2px; width:auto; background:#319897 url(/imgs/TabAquaGrad.jpg) repeat-x top; } .tabContainer .aquaTab div.a {background: url(/imgs/TabAquaTopRightCorner.jpg) no-repeat top right;} .tabContainer .aquaTab div.a div.b {background: url(/imgs/TabAquaTopLeftCorner.jpg) no-repeat top left; ;padding:.9em 0 .5em 0;} .tabContainer .aquaTab div.a div.b h1, .tabContainer .aquaTab div.a div.b h2 {color:#fff; font-family: "Arial"; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } .tabContainer .aquaTab div.a div.b h1 {font-size:1.7em;} .tabContainer .aquaTab div.a div.b h2 {font-size:1.5em;} /* red tab Sponsoring .tabContainer .redTab { position:relative; left:-2px; top:-2px; width:auto; background:#a11515 url(/imgs/TabRedGrad2.jpg) repeat-x top; } .tabContainer .redTab div.a {background: url(/imgs/TabRedTopRightCorner.jpg) no-repeat top right;} .tabContainer .redTab div.a div.b { background: url(/imgs/TabRedTopLeftCorner.gif) no-repeat top left; ;padding:.9em 0 .5em 0;} .tabContainer .redTab div.a div.b h1 {color:#fff; font-family: "Arial"; font-size:1.7em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } .tabContainer .redTab div.a div.b h2 {color:#fff; font-family: "Arial"; font-size:1.5em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } */ /* blue tab Get Involved .tabContainer .blueTab { position:relative; left:-2px; top:-2px; width:auto; background:#1974a1 url(/imgs/TabBlueGrad.jpg) repeat-x top; } .tabContainer .blueTab div.a {background: url(/imgs/TabBlueTopRightCorner3.gif) no-repeat top right;} .tabContainer .blueTab div.a div.b { background: url(/imgs/TabBlueTopLeftCorner.gif) no-repeat top left; ;padding:.9em 0 .5em 0;} .tabContainer .blueTab div.a div.b h1 {color:#fff; font-family: "Arial"; font-size:1.7em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } .tabContainer .blueTab div.a div.b h2 {color:#fff; font-family: "Arial"; font-size:1.5em; margin:0 0 0 .8em; font-weight:bold; text-transform:uppercase; } */ .tabContainer .shadowContainer {display:inline; position: relative; left:2px; top:6px; margin:0; float:left; width:53em; } .tabContainer .shadowContainer div.shadow {background: #c5a527 url(/imgs/TabShadowTopRightCorner.gif) no-repeat top right; float:left;} .tabContainer .shadowContainer div.shadow div.container {position: relative; left:-2px; top:-2px; background: #fff; padding:1em; float:left; width:51em; } .tabContainer .shadowContainer div.shadow div.container.noPadding {padding:0; } .tabContainer .shadowContainer div.shadow div.container h2 {font-size:1.4em; color: #333; padding:0; margin:0 0 .5em 0;} .tabContainer .shadowContainer div.shadow div.container h3 {padding:0; margin:0 0 .5em 0;} .tabContainer .shadowContainer div.shadow div.container h3.legend {width:98%; float:none; background:#eee; padding:.3em 0 .3em .5em; margin:.5em 0; font-size: 1.2em; } .tabContainer .shadowContainer div.shadow div.container div.location { width:15em; float:left; margin-top:.5em; margin-left:1em; } .tabContainer .shadowContainer div.shadow div.container div.hours {width:17em; float:left; margin:.5em 0 0 0 ; } .tabContainer .shadowContainer div.shadow div.container div.location p{font-size:1.1em; } .tabContainer .shadowContainer div.shadow div.container div.hours p{font-size:1.1em;} /* ##################### SPEACIAL DOG FEATURES ############################################################ -- this has ie6 specif css to address png transparency and absolute positioning */ /* for DOG DETAIL PAGE */ #photoCard_rehome-a-dog span#specialDog {position:absolute; top:0; left:0; width:208px; height:25px; background: url(/imgs/specialDogRehome_04.png) no-repeat top left;} #photoCard_sponsor-a-dog span#specialDog {position:absolute; top:0; left:0; width:208px; height:25px; background: url(/imgs/specialDogSponsor_04.png) no-repeat top left;} span#rehomedDog, span#bookedDog {position:absolute; top:199px; left:0; width:205px; height:38px;} span#rehomedDog {background: url(/imgs/rehomed.png) no-repeat top left;} span#bookedDog {background: url(/imgs/booked.png) no-repeat top left;} span#reservedDog {position:absolute; top:60px; left:0; width:205px; height:80px; background: url(/imgs/reserved.png) no-repeat top left;} span#newDog {position:absolute; top:-23px; left:158px; width:65px; height:65px; background: url(/imgs/newDog2.png) no-repeat top left;} /* sponsor-a-dog detail page */ #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container .dogImgWrapper {position:relative;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container .dogImgWrapper img {border:#333 1px solid; display:block; vertical-align:bottom; float:left;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container div.info{ padding:0; width:23em; margin-left:.8em; margin-bottom: 1em; float:left;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container div.info h2 {color:#000; font-size:1.8em; margin:.3em 0 0 0; padding:0 0 .8em 0;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p {color:#000; font-size:1.1em; padding:0; margin:0 0 .5em 0;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p.dogMessage {font-weight:bold; color:#A11514; font-size:1.1em; padding:.4em; } #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p span.label {color:#000; font-weight:bold; padding:0; margin:0 0 .1em 0;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p span.data {color:#666; padding:0; margin:0 0 .8em 0;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container #photo-frame {position:relative; float:left; width:210px; background: url(/imgs/preloader.gif) no-repeat 45% 45%; } #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail {width:52px; /*height:19.6em; */background:#333; float:left; margin: 0 .4em 0 0; padding:.1em 0;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail li {float: left;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail a img{display:block;float: left; width: 46px; height: 45px; margin:0 .1em; border-left:#999 1px solid; border-bottom:1px solid #222; border-right:1px solid #444;border-top:1px solid #ccc;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail a:hover img{border:#A11514 1px solid;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail a:active img{border:#A11514 1px solid;} #photoCard_sponsor-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail li a img.on{border:#A11514 1px solid;} /* DOG big PHOTO CARD with Jquery Gallery */ #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container .dogImgWrapper {position:relative;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container .dogImgWrapper img {border:#333 1px solid; display:block; vertical-align:bottom; float:left;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.icons{width:3em; float:right; } #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.icons img{float:left; margin-top:1em; } #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.info{ padding:0; width:18em; margin-left:.8em; margin-bottom: .2em; float:left;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.info h2 {color:#000; font-size:1.8em; margin:.3em 0 0 0; padding:0 0 .8em 0;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p {color:#000; font-size:1.1em; padding:0; margin:0 0 .5em 0;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p.marginTop {margin-top:2em;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p span.label {color:#000; font-weight:bold; padding:0; margin:0 0 .1em 0;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container div.info p span.data {color:#666; padding:0; margin:0 0 .8em 0;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container #photo-frame {position:relative; float:left; width:210px; height:24em; background: url(/imgs/preloader.gif) no-repeat 45% 45%; } #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail {width:49px; /*height:19.6em;*/ background:#333; float:left; margin: 0 .4em 0 0; padding:.1em 0 0 0;} /* need width for opera */ #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail li {float: left; clear: both;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail a img{ display:block; width: 46px; height: 45px; margin:0 .1em; border-left:#999 1px solid; border-bottom:1px solid #222; border-right:1px solid #444;border-top:1px solid #ccc;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail a:hover img{border:#862455 1px solid;} #photoCard_rehome-a-dog.tabContainer .shadowContainer div.shadow div.container ul#thumbnail a:active img{border:#862455 1px solid;} #pageBody #content ul#thumbnail li {background:none;padding:0;margin:0;float: left;} #pageBody #content #formSteps ol {margin:0 0 10px 0;} /* dealing with specif images */ /* .tabContainer .shadowContainer div.shadow div.container img.rehomingCentre {border:1px solid #ccc; padding: 2px; float:left; margin:0 1em .2em 0;} */ .tabContainer .shadowContainer div.shadow div.container div.imgContainer img {border-left:1px solid #ccc; border-top:1px solid #ccc; border-bottom:1px solid #999;border-right:1px solid #999;padding: 2px; float:left; margin:0 1em .2em 0;} div.dogImgWrapper {position:relative; float:left; margin:0 1em .2em 0;} .tabContainer .shadowContainer div.shadow div.container div.dogImgWrapper img {border:1px solid #333; vertical-align:bottom; margin:0; } div.dogImgWrapper span.specialDog {position:absolute; top:0; right:0; width:75px; height:75px; background: url(/imgs/specialDog.png) no-repeat top right;} /* google Map */ .tabContainer .shadowContainer div.shadow div.container div#map {width: 51em; height: 38em; background:#fff ; /* url(/imgs/preloader.gif) center 42% no-repeat;*/ } /* styling the non-js google map view */ .tabContainer .shadowContainer div.shadow div.container div#map noscript {float:left; padding:1em;} .tabContainer .shadowContainer div.shadow div.container div#map noscript.loading { background:#fff url(/imgs/preloader.gif) center 55% no-repeat; height:31em;} .tabContainer .shadowContainer div.shadow div.container div#map noscript img.snapshot {float:left; margin-right:1em; } .tabContainer .shadowContainer div.shadow div.container div.info {float:left; padding:1em; } .tabContainer .shadowContainer div.shadow div.container div.info h3 {margin:0; padding:0; } /* fixes width for rightCol */ #pageBody #rightCol .tabContainer {width:22em;} #pageBody #rightCol .tabContainer .shadowContainer {width:22em; } #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container {width:20em; } #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container p {font-size:1.1em; margin-bottom:.8em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container p.date {font-size:1em; color: #666666; margin: 0 0 1.5em; font-style: normal; font-weight: bold;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container h3 {background:#fff; color:#fff; width:auto; font-size:1.1em; padding:0; margin:0 0 .2em 0;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList h3 {color: #999; margin-bottom: .8em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList h3.dashed { border-top:1px dashed #ccc; padding-top:.5em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul {float: left; margin-bottom: 1em; padding-bottom: .5em; width: 100%;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul.bottom {border: none; margin-bottom: .5em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList li {float: left; width: 100%; margin-bottom: .3em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList li span.updated {} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a {float: left;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a.dogName {font-size: 1.1em; font-weight: bold; margin-top: .5em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a.dogName.updated { background:url(../imgs/updated.gif) 60px center no-repeat; width:150px; height:14px;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a img {text-decoration: none; border: 1px solid #ddd; padding: 1px; margin-right: .8em; display: block;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a.delete img {text-decoration:none; border:none; margin:0; padding:0;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a.delete {float: right; margin-top: .8em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a.profile img {text-decoration:none; border:none; margin:0; padding:0;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList ul li a.profile {float: right; margin-top: .8em;} #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container div.dogList #creditCards {clear:both;float:left;margin-top:.5em;width:100%;} /* pagination */ .NPpagination {clear:both; float:left; margin-bottom:3em; width:100%;} .NPpagination .previous {background:url(/imgs/previousBtn.jpg) no-repeat left top; float:left; height:24px; width:106px;} .NPpagination .next {background:url(/imgs/nextBtn.jpg) no-repeat left top; float:right; height:24px; width:106px;} /* purple */ .NPpagination.purple .previous {background-image:url(/imgs/previousBtn-purple.jpg);} .NPpagination.purple .next {background-image:url(/imgs/nextBtn-purple.jpg);} /* red */ .NPpagination.red .previous {background-image:url(/imgs/previousBtn-red.jpg);} .NPpagination.red .next {background-image:url(/imgs/nextBtn-red.jpg);} /* ############################################################################################### ################### FORM STYLEs ############################################################# ################################################################################################ */ div.plainForm {margin:/*1em;*/0; } div.plainForm.narrow{width:75%;} div.plainForm h3 {color:#333; padding:0; margin:.7em 0 0 0;} div.plainForm h3 {color:#333; padding:0; margin:.7em 0 .2em 0;} div.plainForm h3.noMargin{margin:.2em 0 .2em 0;} div.plainForm h3.legend {width:98%; float:none; background:#fae690; padding:.3em 0 .3em .5em; margin:.5em 0; font-size: 1.2em; } div.plainForm h3.legend.marginTop {margin:1.5em 0 .5em 0 ; font-size: 1.2em; } div.plainForm.left { width:49%; float:left; margin:0 0 0 .5em; padding-bottom:1em; } div.plainForm.right {width:45%; float:left; margin:0 0 0 .5em; padding-bottom:1em;} div.plainForm fieldset {} div.plainForm fieldset div.formRow {width:95%; float:left; padding:.2em;} div.plainForm fieldset div.formRow.narrow {width:70%;} div.plainForm fieldset.marginTop {margin-top:1.5em;} div.plainForm fieldset legend {color:#333; padding:0; margin:.3em 0 0 0; font-size: 1.15em; color:#333; font-weight:bold;} div.plainForm fieldset label {float:left; width:20em; margin: .2em 0 .2em 0; font-size: 1.15em; color:#333; font-weight:bold;} div.plainForm fieldset label.narrow { width:15em;} div.plainForm fieldset label.fullWidth { width:99%; } div.plainForm fieldset label.autoWidth { width:auto; padding-right:10px;} div.plainForm fieldset label.checkbox {float:left; width:38em; font-weight:normal; margin-right: .5em;} div.plainForm fieldset label.checkbox.wider { width:95%;} div.plainForm fieldset label.radio {float: left; width:20em; padding:0; margin: .3em 0 0 0; font-weight: normal;} div.plainForm fieldset label.noMargin {margin:0;} div.plainForm fieldset label.checkbox_dogFeatures {width:auto; margin:0 0 0 .5em; padding:0; font-size:1.1em; font-weight:normal;} div.plainForm fieldset input {float:left; font-size:1.1em; width: 19em; padding:.1em .2em .1em .2em; margin:.1em 0 .2em 0;} div.plainForm fieldset input.autoWidth {width:auto;} div.plainForm fieldset input.checkbox {float:left; border: none; padding:0; width: 13px; height: 13px; margin: .7em .7em 0 0;} div.plainForm fieldset input.submit {float:left; width:auto; color:#333; color:#333; font-size:1.1em; border:none; padding:0 2em 0 .5em; background:url(/imgs/linkArrowYellowBkg.gif) right center no-repeat; margin: 0 0.5em 0 0;} div.plainForm fieldset textarea {float:left; font-size:1.1em; width: 18.4em; padding:.1em .5em .1em .5em; margin:.1em 0 .2em 0;} div.plainForm fieldset select {float:left; font-size:1.1em; width:19.7em; height:auto; vertical-align:middle; padding:0 0 0 0; margin:.2em 1em 0 0;} div.plainForm fieldset select.dob{font-size:1.1em; width:6.3em; height:1.6em; vertical-align:middle; margin:.2em .3em 0 0;} div.plainForm fieldset select.autoWidth{width:auto; min-width: 8em;} div.plainForm fieldset input.checkbox_dogFeatures {float:left; width:17px; margin:0; border: none; padding:0; width: 13px; height: 13px;} div.plainForm fieldset p.labelInfo{float:left; margin:0 0 0 .2em; font-size:1em; font-weight:bold; } div.plainForm fieldset p.URN{float:left; margin:0 0 0 .2em; font-size:1.2em; font-weight:bold; } div.plainForm p.smallPrint {font-size:1.1em; line-height:1.2; margin:.5em 0 0 0; clear:both; border-top:#333 1px solid;} /* error handling */ div.plainForm fieldset span.error {clear:left; float:left; color:#f00; display:inline; font-weight:bold; font-size:1.1em; width:60%; margin:.2em 0 .7em 21em;} div.plainForm fieldset#ContactUsControl_fieldsContactUs span.error {margin-left:16em;} div.plainForm fieldset span.error.black {color:#000;} /*for reg form*/ .plainForm .buttonYellow {float:right; margin: 0; position:relative; width:auto; background: #fddd5f url(/imgs/btnYellowTop.gif) repeat-x top; padding:0; } .plainForm .buttonYellow.shorter {float:left; margin: 0; position:relative; width:auto; background: #fddd5f url(/imgs/btnYellowTop.gif) repeat-x top; padding:0; margin-left:10px; } .plainForm .buttonYellow.floatLeft { float:left; margin-left:10px;} .plainForm .buttonYellow.alignRight {margin-right:60px;} .plainForm .buttonYellow.alignRightMore {margin-right:120px; margin-top:.3em;} .plainForm .buttonYellow.alignRight.marginTop{margin-top:.5em} .plainForm fieldset input.postcode {width:8em; } .plainForm div.bottom {float:left; background: url(/imgs/btnYellowBottom.gif) repeat-x bottom; padding:0;} .plainForm div.bottom div.tl {float:left; background: url(/imgs/btnYellowCornerTopLeft2.gif) no-repeat top left;padding:0;} .plainForm div.bottom div.tl div.tr {float:left; background: url(/imgs/btnYellowCornerTopRight2.gif) no-repeat top right;padding:0;} .plainForm div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/btnYellowCornerBottomLeft2.gif) no-repeat bottom left; margin:0; padding:0;} .plainForm div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/btnYellowCornerBottomRight2.gif) no-repeat bottom right; margin:0; padding:0;} .plainForm div.bottom div.tl div.tr div.bl div.br a {float:left; text-decoration:none; border-right:1px solid #333; border-left:1px solid #333; padding:0 2.5em 0 .7em; margin:0; font-size:1.2em; line-height:2; color:#333; background: transparent url(/imgs/linkArrowYellowBkg2x.png) right center no-repeat;} div.tabForm fieldset div.formRow span.error.fullwidth { margin:0 0 .7em 1em; width:90%; } /* used anywhere? */ div.tabForm fieldset div.formRow span.error.fullWidthError { margin:0 0 .7em 1.7em; width:90%; padding:5px 0 3px 10px; } div.tabForm fieldset div.formRow.half span.error {margin:.2em .2em .2em 0; width:20em; border:red 1px dashed;} #pageBody #content div.tabForm fieldset div.formRow .logos { display: inline; float: left; margin-left: 21em;} #pageBody #content div.tabForm fieldset div.formRow .logos li {float: left; margin-right: 1em;} /* for error in SAD step 2 adulth path */ .sponsorRow span.error {font-size:1.1em; float:left; font-weight:bold; color:#f00; width:25em; padding:0 10px; } div.saveRecipientButton span.error {font-size:1.1em; float:left; font-weight:bold; color:#f00; width:auto; padding:10px; } div.saveRecipientButton .buttonYellow div.bottom {background-image: url(/imgs/tabSets/bttnBottomGeneric.jpg);} div.saveRecipientButton .buttonYellow div.tl {background-image: url(/imgs/tabSets/bttnTLGeneric.jpg);} div.saveRecipientButton .buttonYellow div.tl div.tr {background-image: url(/imgs/tabSets/bttnTRGeneric.jpg);} div.saveRecipientButton .buttonYellow div.tl div.tr div.bl {background-image: url(/imgs/tabSets/bttnBLGeneric.jpg);} div.saveRecipientButton .buttonYellow div.tl div.tr div.bl div.br {background-image: url(/imgs/tabSets/bttnBRGeneric.jpg);} div.tabForm div.formRow span.error, div.tabForm li span.error {margin:.2em 0 .7em 21em; clear:left;float:left; color:#f00; font-weight:bold; font-size:1.1em; width:23em;} div.tabForm div.formRow span.error.black {color:#000; font-weight:normal;} div.dogsForm {padding:10px;} div.dogsForm.noPadding {padding:5px 0;} div.dogsForm h3 {color:#666;} div.dogsForm h3.noMargin {padding:0; margin:0;} div.dogsForm fieldset div.formRow {width:99%; float:left; margin:.2em 0;} div.dogsForm fieldset div.formRow.col33 {width:30%;} div.dogsForm fieldset div.formRow.col33 label {width:9em;} div.dogsForm fieldset div.marginTop {margin:.8em 0;} div.dogsForm fieldset div.formRow.submit {margin:1em 0 .3em 0;} div.dogsForm fieldset {} div.dogsForm fieldset label{font-size:1.2em; float:left; color:#333; font-weight:bold; width:18.5em;} div.dogsForm fieldset label img.required {vertical-align:top;} div.dogsForm fieldset label.required span {position:absolute; top:0; left:9999px;} div.dogsForm fieldset label.checkbox {font-weight:normal; font-size:1.2em; width:39em;} div.dogsForm fieldset label.block {float:none; display:block;} div.dogsForm fieldset label.hidden {position:absolute; top:0; left:9999px;} div.dogsForm fieldset input,div.dogsForm fieldset select {float:left; border:#6699cc 1px solid; background:#fff; font-size:1.1em; width:20em; padding:.2em .5em .2em .5em; margin:.2em 1em 0 0;} div.dogsForm fieldset input.small {width:15em;} div.dogsForm fieldset input.postCode {width:7em;} div.dogsForm fieldset input.boxNoLabel {margin-left:20em;} div.dogsForm fieldset input.marginBttm {margin-bottom: .3em;} div.dogsForm fieldset input.checkbox {width:17px; border: none; padding:0; width: 13px; height: 13px;} div.dogsForm fieldset input.submit {float:left; width:auto; color:#333; color:#333; font-size:1.1em; border:none; padding:0 2em 0 .5em; background:url(/imgs/linkArrowYellowBkg.gif) right center no-repeat; margin: 0 0.5em 0 0;} div.dogsForm fieldset input.submitPurple {float:left; width:auto; color:#fff; font-size:1.1em; border:none; padding:.1em 2em .1em .5em; background:url(/imgs/buttonPurpleTopWhtArrow.jpg) right center no-repeat; margin: 0 0.5em 0 0;} div.dogsForm fieldset select{float:left; background:#fff; font-size:1.1em; width:21em; height:1.6em; vertical-align:middle; padding:0 0 0 0; margin:.2em 1em 0 0;} div.dogsForm fieldset select.autoWidth{width:auto; min-width:20em;} div.dogsForm fieldset select.block{float:none; display:block;} div.dogsForm .multipleBox {float: right; margin: 0 1.5em 1em 0; width: 50%;} div.dogsForm .column33 {width: 32.5%; position: relative; float: left;} div.dogsForm .multipleBox input {margin-right: .3em;} div.tabForm .sponsorRow label.radio {width:auto;position:relative;clear:both;} div.tabForm .sponsorRow {float:left;width:40em} div.tabForm .sponsorRow a {font-weight:bold; color:#333; text-decoration:none; float:left;} div.tabForm .sponsorRow a.editDetails{text-decoration:underline; margin-left:.5em; font-weight:normal; color:#666;} #pageBody #content div.tabForm fieldset div.sponsorRow ul {float:left; margin: 0; width: 77%; font-size:1em;} #pageBody #content div.tabForm fieldset div.sponsorRow li {background:none; float:left; width: 99%; margin:0 0 0.5em; clear:both; font-size:1.1em; padding:0 0 0 0.75em;} li img {float:left;} /* ############################################################################################### ########## SPONSOR A DOG DETAIL PAGE ######################################################## ################################################################################################ */ /* sponsor-a-dog, sponsored dogs summary */ .ruleDashed {border-bottom: 1px dashed #ccc;} .ruleDashed.red {border-bottom: 1px dashed #efb0b0;} .formBackground {background: #fff;} div.tabForm {margin:/*1em;*/0; } .tabContainer .shadowContainer div.shadow div.container div.tabForm h4 {padding:.5em 0 .7em .5em; font-size: 1.2em; clear:both; font-weight:bold; } .tabContainer .shadowContainer div.shadow div.container div.tabForm h3 {color:#333; padding:0; margin:.7em 0 .2em .5em; font-size:1.2em;} .tabContainer .shadowContainer div.shadow div.container div.tabForm h3.noMargin{margin:.2em 0 .2em 0;} .tabContainer .shadowContainer div.shadow div.container div.tabForm h3.legend {width:98%; float:left; background:#eee; padding:.3em 0 .3em .5em; margin:1em 0 1em 0; font-size: 1.2em; clear:both; } .tabContainer .shadowContainer div.shadow div.container div.tabForm h3.legend.marginTop {margin:1em 0 1em 0 ; font-size: 1.2em; } .tabContainer .shadowContainer div.shadow div.container div.tabForm h3.legend.marginBottom {margin:0 0 2em 0 ; font-size: 1.2em; } .tabContainer .shadowContainer div.shadow div.container div.tabForm h3.legend { float:none; background:#eee; padding:.3em 0 .3em .5em; margin:1em 0 1em 0; font-size: 1.2em;} .tabContainer .shadowContainer div.shadow div.container div.tabForm h3.legend.noLeftPad { padding:.3em 0 .3em .5em; margin:1em 0 1em 0; font-size: 1.2em; } div.tabForm p{ margin-left:.5em; font-size: 1.1em;} div.tabForm p.smallPrint {background: #eee; font-size:1.1em; line-height:1.2; margin:.5em 0 0 0; clear:both;} div.tabForm p.required {font-size: 1em; padding: 0; margin: .5em 0 .7em .5em; } div.tabForm p.declarationDate {margin:1em 0 1em 0; text-align:right; } .tabForm blockquote{ font-size:1.2em;} /* left / right columns */ div.tabForm.left { width:49%; float:left; margin:0 0 0 .5em; padding-bottom:0;} div.tabForm.right {width:45%; float:right; margin:0 .5em 0 0em; padding-bottom:0; } div.tabForm .left { width:190px; float:left; margin:0 0 0 .5em; padding-bottom:0;} div.tabForm .right {width:280px; float:left; margin:0 .5em 0 0em; padding-bottom:0;} div.tabForm.left label.checkbox {width:20em;} div.tabForm.left fieldset legend{} div.tabForm.right .formRow label.checkbox {width:18em; } div.tabForm.left label.checkbox {width:20em;} .formRow .tabButton.separate {margin-left:24.2em;} /* div.tabForm.right label.checkbox {width:18em;} */ div.tabForm fieldset div.formRow {width:100%; float:left; margin-bottom:.8em; clear: both;} div.tabForm fieldset div.formRow.marginLeft { margin-left:.5em; } div.tabForm fieldset div.formRow span.explenation {margin:.2em 1em; color:#666; line-height:1.6;} div.tabForm fieldset div.formRow span.explenation a {color:#666; line-height:1.6;} div.tabForm fieldset div.formRow.paddingBottom { padding-bottom:5em;} div.tabForm.left div.formRow, div.tabForm.right div.formRow {width:99%; float:left; margin-bottom:.5em;} div.tabForm fieldset div.formRow.tall {width:99%; float:left; margin-bottom:.8em;} div.tabForm fieldset div.formRow.half {width:47%; margin:0 .5em 1.4em 0; border:1px green dashed; } div.tabForm fieldset div.formRow.marginBottom {margin-bottom:.5em; } .formRow.marginBottom.inlineLabel {margin-left: 24.2em;} div.tabForm fieldset div.formRow.extraPadding {padding:2em 0;} div.tabForm fieldset {} div.tabForm fieldset.marginTop {margin-top:1.5em;} div.tabForm fieldset legend {color:#333; padding:0; margin:.3em 0 0 0; font-size: 1.15em; color:#333; font-weight:bold;} /* generic fields styles */ div.tabForm fieldset label {float:left; width:21em; margin: .2em .5em .1em .5em; font-size: 1.1em; color:#333; font-weight:bold;} div.tabForm fieldset label .labelPlain {font-weight: normal;} div.tabForm fieldset label.width21em { width:21em;} div.tabForm fieldset label.longer { width:30em;} div.tabForm fieldset label.noFloat {float:none;} div.tabForm fieldset label.short { width:8em;} div.tabForm fieldset label.autoWidth {width:auto; padding-top:4px;} div.tabForm fieldset label.fullWidth { width:99%; } div.tabForm fieldset label.noMargin {margin:0;} div.tabForm fieldset label.checkbox {float:left; width:38em; font-weight:normal; margin-right: .5em;} div.tabForm fieldset label.giftAidCheckbox {float:left; width:38em; font-weight:bold; margin-right: .5em;} div.tabForm fieldset span.label {float:left; width:20em; margin: .2em .5em .1em .5em; font-size: 1.1em; color:#333; font-weight:bold;} div.tabForm fieldset span.fieldInfo {color:#333;font-size:1.1em; font-style:italic; float:left; margin:4px 0 0 3px;} div.tabForm fieldset div.choiceArea {float:left;margin-bottom:8px;width:238px;} div.tabForm fieldset label.radio {float: left; width:20em; padding:0; margin: .3em 0 0 0; font-weight: normal;} div.tabForm fieldset label.radioSmall {float: left; width:auto; padding:0; margin: .3em 1em 0 0; font-weight: normal; } div.tabForm fieldset label span.hint { font-size:.8em; font-weight:normal;} div.tabForm fieldset input {float:left; font-size:1.1em; width: 19em; padding:.1em .2em; margin:.1em 0 .2em 0;} div.tabForm fieldset input.cardNumber {width: 17em;} div.tabForm fieldset input.wide {float:left; font-size:1.1em; width: 23em; padding:.1em .2em .1em .2em; margin:.1em 0 .2em 0;} div.tabForm .sponsorRow input.radio {width:20px; margin:0 0 0 0; padding:0; } div.tabForm fieldset input.radio {float:left; border: none; padding:0; width: 13px; height: 13px; margin: .4em .5em 0 0; } div.tabForm fieldset input.autoWidth {width:auto;} div.tabForm fieldset input.postcode {width:8em;} div.tabForm fieldset input.cash {width:8em;} div.tabForm fieldset input.userName, div.tabForm fieldset input.password {width:16em;} div.tabForm fieldset input.csc {width:4em;} div.tabForm fieldset input.csc.disabled { border:1px solid #ccc; background:#fff;width:4em;} div.tabForm fieldset input.currencyTotal {width:6em;} div.tabForm fieldset input.sortCode {width: 2em; margin-right: .3em;} div.tabForm fieldset input.checkbox {float:left; border: none; padding:0; width: 13px; height: 13px; margin: .4em .5em 0 .5em;} div.tabForm fieldset input.submit {float:left; width:auto; color:#333; color:#333; font-size:1.1em; border:none; padding:0 2em 0 .5em; background:url(/imgs/linkArrowYellowBkg.gif) right center no-repeat; margin: 0 0.5em 0 0;} div.tabForm fieldset textarea {font-family: verdana, arial, sans-serif; float:left; font-size:1.1em; width: 23em; padding:.1em .5em .1em .5em; margin:.1em 0 .2em 0;} div.tabForm fieldset textarea.medium {height: 10em;} div.tabForm.right .formRow textarea {float:left; font-size:1.1em; font-family:"verdana"; width: 20em; height:10em; padding:.1em 0 .1em .5em; margin:.1em 0 .2em 0;} div.tabForm fieldset select {float:left; font-size:1.1em; width:19.7em; height:auto; vertical-align:middle; padding:0 0 0 0;margin:.2em 1em .2em 0;} div.tabForm fieldset select.dob{font-size:1.1em; width:6.3em; height:1.6em; vertical-align:middle; margin:.2em .3em .2em 0;} div.tabForm fieldset select.autoWidth{width:auto; min-width: 9em;} div.tabForm fieldset select.dayOfMonth{width: 4em; margin-left:1em;} div.tabForm fieldset select.dayOfMonth.noMargin{width: 8.7em; margin-left:0;} div.tabForm fieldset ul#addressSelector{margin:1em 2em 1em 1em;} div.tabForm fieldset ul#addressSelector li a:link, div.tabForm fieldset ul#addressSelector li a:visited{ text-decoration:underline;} div.tabForm fieldset ul#addressSelector li a:hover{color:#CC0000;} /* search dogs */ div.tabForm fieldset p.labelInfo{float:left; margin:0 0 0 .2em; font-size:1em; font-weight:bold; } div.tabForm fieldset label.noMargin {margin:0;} div.tabForm fieldset label.checkbox_dogFeatures {width:auto; margin:0 0 0 .5em; padding:0; font-size:1.1em; font-weight:normal;} /* div.tabForm.right fieldset input.checkbox {float:left; width:17px; margin:0; border: none; padding:0; width: 13px; height: 13px;}*/ div.tabForm fieldset input.checkbox_dogFeatures {float:left; width:17px; margin:0; border: none; padding:0; width: 13px; height: 13px;} div.tabForm.right fieldset input.submit {float:left; width:auto; color:#333; color:#333; font-size:1.1em; border:none; padding:0 2em 0 .5em; background:url(/imgs/linkArrowYellowBkg.gif) right center no-repeat; margin: 0 0.5em 0 0;} /* rehoming questionaire */ div.checkboxList {width:26em; float:left;} div.tabForm fieldset label.checkboxList {width:99%; margin:0 0 .4em .5em; padding:0; font-size:1.1em; font-weight:normal;} div.tabForm fieldset input.checkboxList {float:left; width:17px; margin:0 3px 0 0; border: none; padding:0; width: 13px; height: 13px;} div.tabForm fieldset .formList label.checkboxList {float: left; clear: right; width: 90%;} div.tabForm fieldset .formList input.checkboxList {clear: left;} div.tabForm fieldset .horiz li {float: left;} /* sponsor a dog STEP 2 specif */ div.UpdateSponsorshipAmount {float:none;} div.UpdateSponsorshipAmount span.error {clear:left; float:left; color:#f00; font-weight:bold; font-size:1.1em; width:30em; margin:0 0 .7em 1em;} div.giftRecipientOptions span.error {clear:left; float:left; color:#f00; font-weight:bold; font-size:1.1em; width:30em; margin:.2em 0 .7em 1em;} p.CurrentSponsorshipAmount {} div.tabForm fieldset div.sponsorRow p.CurrentSponsorshipAmount span{color:#333;} div.tabForm fieldset div.sponsorRow {float: left; width: 100%; margin: 0 0 .4em 0; padding-bottom: .5em;} div.tabForm fieldset div.sponsorRow label{font-weight:bold;} div.tabForm fieldset div.sponsorRow label.myself{width:auto; float:left; } div.tabForm fieldset div.sponsorRow label.myself a{text-decoration:none; } div.tabForm fieldset div.sponsorRow label.giftRecipientsLabel{width:auto; float:left;} div.tabForm fieldset div.sponsorRow div.giftRecipients{margin-top:2px; width:auto; float:left;} div.tabForm fieldset div.sponsorRow div.giftRecipients a{text-decoration:none;} div.tabForm fieldset div.sponsorRow div.giftRecipients .recipientName {font-weight:bold;font-size:1em;} div.tabForm fieldset div.sponsorRow div.giftRecipientOptions {float:left; width:75%;} div.tabForm fieldset div.sponsorRow label span{font-weight:normal; font-size:.9em;} div.tabForm fieldset div.sponsorRow label.radio {width:35em;} div.tabForm fieldset div.sponsorRow label.radio.short {width:8em;} div.tabForm fieldset div.sponsorRow.short {width: 20em; border:1px solid red; } div.tabForm fieldset div.sponsorRow img.photoCard {display: block; margin-right: 1em; float:left;} div.tabForm fieldset div.sponsorRow p {margin-bottom: .5em; margin-left:.5em;} div.tabForm fieldset div.sponsorRow p span {color: #A11514; font-weight: bold; text-transform: uppercase;} div.tabForm fieldset div.sponsorRow div.details {float: left;} div.tabForm fieldset div.sponsorRow div.amount {float: left; width:98%; background: #eee; padding: .5em; margin: 0;} div.tabForm fieldset div.sponsorRow div.amount label{width:2em; } div.tabForm fieldset div.sponsorRow div.amount p {float: left; margin: 0; font-weight: bold; padding: 0;} div.tabForm fieldset div.sponsorRow div.amount input {margin-left:0; } div.tabForm fieldset div.sponsorRow div.options {position: absolute; right: 10px; width: 12em; text-align: right; margin-bottom:.4em;} div.tabForm fieldset div.sponsorRow div.options.narrow {width: 8em;} div.tabForm fieldset div.sponsorRow div.options .buttonRed {clear: both; float: right;} div.tabForm fieldset div.sponsorRow div.options input {float: none; width: 5em; text-align: right; margin: 0;} /* div.tabForm fieldset div.sponsorRow div.options label {float: none; font-weight: normal;} */ div.tabForm fieldset div.sponsorRow a.delete, div.tabForm fieldset div.sponsorRow a.profile {float: right; clear: both; display: block; line-height: 1.8em; padding-right: 2em;} div.tabForm fieldset div.sponsorRow a.delete {background: url(/imgs/delete_icon.gif) right center no-repeat;} div.tabForm fieldset div.sponsorRow a.profile {background: url(/imgs/profile_icon.gif) right center no-repeat;} /* .NET wraps this input into a span with class=checkbox, instead of applying the class to the input itself. the css line below is to deal with that */ div.tabForm fieldset span.checkbox input{width:auto; border:none} div.tabForm fieldset span.checkbox label{width:auto; font-weight:normal; margin-left:.3em;} div.sponsorRow .SAD_RecipientDetails {float:left; width:75%} .tabContainer .shadowContainer div.shadow div.container div.tabForm .confirmation h4 {font-size: 1.1em;} .confirmation .details p {clear:both; border-top: 1px solid #eee; padding: .5em 0; margin-bottom: 0;} .confirmation .details p span {font-weight:bold; display: block; float: left; width:20em; padding-right: 2em;} .confirmation p span.plain {font-weight:normal;} .confirmation a, .confirmation a:visited, div.tabForm fieldset .confirmation div.sponsorRow a, div.tabForm fieldset .confirmation div.sponsorRow a:visited {color:#A11514} .confirmation .halfDetails {width:49%; float:left; border:0;} .confirmation dl {font-size:1.1em; margin-left: .5em;} .confirmation dt, .confirmation dd {float:left; padding: .5em 2em .5em 0; border-top: 1px solid #eee; position:relative; } .confirmation dt {font-weight:bold; clear:both; width:20em;} .confirmation dd {width:20em;} .confirmation dl, .confirmation .details p.first {border-top: none; padding-top: 0;} /* ################################################################################### ################### FORM step - by step ####################################### ################################################################################# */ /*generic 2 steps*/ #formSteps ol#steps2-1 {background:url(/imgs/steps2-1.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps2-2 {background:url(/imgs/steps2-2.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} /*generic 3 steps*/ #formSteps ol#steps {background:url(/imgs/steps.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps2 {background:url(/imgs/steps2.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps3 {background:url(/imgs/steps3.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps4 {background:url(/imgs/steps4.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} /*generic 4 steps*/ #formSteps ol#steps4-1 {background:url(/imgs/steps4-1.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps4-2 {background:url(/imgs/steps4-2.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps4-3 {background:url(/imgs/steps4-3.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps4-4 {background:url(/imgs/steps4-4.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} /*generic 5 steps*/ #formSteps ol#steps5-1 {background:url(/imgs/steps5-1.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps5-2 {background:url(/imgs/steps5-2.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps5-3 {background:url(/imgs/steps5-3.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps5-4 {background:url(/imgs/steps5-4.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps5-5 {background:url(/imgs/steps5-5.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} /*rehoming form steps*/ #formSteps ol#steps2_1 {background:url(/imgs/steps2_1.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps2_2 {background:url(/imgs/steps2_2.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps2_3 {background:url(/imgs/steps2_3.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps2_4 {background:url(/imgs/steps2_4.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps2_5 {background:url(/imgs/steps2_5.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} /*membership form steps*/ #formSteps ol#steps3_1 {background:url(/imgs/steps3_1.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps3_2 {background:url(/imgs/steps3_2.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps3_3 {background:url(/imgs/steps3_3.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps3_4 {background:url(/imgs/steps3_4.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} /*centre form steps*/ #formSteps ol#steps4_1 {background:url(/imgs/steps4_1.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps4_2 {background:url(/imgs/steps4_2.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} #formSteps ol#steps4_3 {background:url(/imgs/steps4_3.gif) 0 0 no-repeat; width:520px; height:72px; margin-bottom:10px;} /* Form Steps Bg */ .formStepsBg {float:left; margin: 0 1em 0 1em; position:relative; width:auto; background: #fddd5f url(/imgs/btnYellowTop.gif) repeat-x top; padding:0; } .formStepsBg.marginLeft {margin-left:1em;} .formStepsBg.noMarginLeft {margin-left:0;} .formStepsBg div.bottom {float:left; background: url(/imgs/btnYellowBottom.gif) repeat-x bottom; padding:0;} .formStepsBg div.bottom div.tl {float:left; background: url(/imgs/btnYellowCornerTopLeft2.gif) no-repeat top left;padding:0;} .formStepsBg div.bottom div.tl div.tr {float:left; background: url(/imgs/btnYellowCornerTopRight2.gif) no-repeat top right;padding:0;} .formStepsBg div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/btnYellowCornerBottomLeft2.gif) no-repeat bottom left; margin:0; padding:0;} .formStepsBg div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/btnYellowCornerBottomRight2.gif) no-repeat bottom right; margin:0; padding:0; /* border:1px solid #68143e;*/} .formStepsBg div.bottom div.tl div.tr div.bl div.br a {float:left; text-decoration:none; border-right:1px solid #333; border-left:1px solid #333; padding:0 2.5em 0 .7em; margin:0; font-size:1.2em; line-height:2; color:#333; background: transparent url(/imgs/linkArrowYellowBkg2x.png) right center no-repeat;} /* ################################################################################################## ################### A - Z ####################################### ################################################################################################## */ #quote {background: #E9BC0A; padding:1.2em; position: relative; font-size: 1.3em; font-weight: bold;} #quote span.a {position:absolute; top:0px; left:0px; width:7px; height:7px; background: url(/imgs/quotes/quote_topLeft.gif) no-repeat top left;} #quote span.b {position:absolute; top:0px; right:0px; width:7px; height:7px; background: url(/imgs/quotes/quote_topRight.gif) no-repeat top right;} #quote span.c {position:absolute; bottom:0px; left:0px; width:7px; height:7px; background: url(/imgs/quotes/quote_bttmLeft.gif) no-repeat bottom left;} #quote span.d {position:absolute; bottom:0px; right:0px; width:7px; height:7px; background: url(/imgs/quotes/quote_bttmRight.gif) no-repeat bottom right;} #navRelated {} #navRelated ul {margin: 0; padding: 0;} #navRelated ul li {display: inline; margin: 0; padding: 0;} .pagination{clear:both;display:block;font-size:1.2em;padding:1.5em 0;} .pagination span{font-weight:normal;padding-right:0.75em;} .pagination a{padding-right:0.75em;} .pagination a.on {font-weight:bold;} .pagination a.viewAll {float:right; } /* ############################################################################################################################################# ################ added by Vanessa ########################################################################################################### ################################################################################################################################################ */ /* ############################################################################################### ################### FORM STYLEs ############################################################# ################################################################################################ */ div.dogsForm fieldset input.atoz {width: 10em;} #requestDocumentForm {} #requestDocumentForm .formRow {border-bottom: 1px dashed #ccc; padding: 1em 0;} #requestDocumentForm input.checkBox{float: left; margin-right: .5em;padding: 0; width: 1.5em; border: none;} #requestDocumentForm img {float: left; margin-right: .5em;} #requestDocumentForm .description {float: left; margin-right: 1.5em; width: 29em;} #requestDocumentForm .description.long {width: 39em;} #requestDocumentForm .description p {margin: 0;} #requestDocumentForm .quantity {float: left;} #requestDocumentForm .quantity select {width: 4em;} #requestDocumentForm .submit {float: right; margin-top: .8em;} div.dogsForm fieldset label.ownershipMaterials {font-weight:normal; font-size:1.2em; margin-right: 1.5em; color:#666; width:31em;} div.dogsForm fieldset label.image {width:9em;} div.dogsForm fieldset label.image span.hidden{position:absolute; top:-9999px; left:0;} /* ################################################################################################################ #################### GENREAL TAB CONTAINER ############################################################# ################################################################################################################ */ /* fixes width for rightCol */ #pageBody #rightCol .tabContainer .shadowContainer div.shadow div.container .buttonAquaWht {margin: 0;} #pageBody #rightCol form fieldset label.hidden {position:absolute; top:-9999px; left:0;} /* Doesn't like common .hidden class?? */ /* ################################################################################################## ################### BUTTONS STYLES ######################################################## ################################################################################################## */ /* AQUA BUTTON on white Bkg */ .buttonAquaWht {float:left; margin: 0 1em 0 1em; position:relative; width:auto; background: #1C6D6E url(/imgs/buttonAquaTopWhtBorder.jpg) repeat-x top; padding:0; } .buttonAquaWht.noMargin {margin:0;} .buttonAquaWht div.bottom {float:left; background: url(/imgs/buttonAquaBottomWhtBorder.jpg) repeat-x bottom; padding:0;} .buttonAquaWht div.bottom div.tl {float:left; background: url(/imgs/buttonAquaTopWhtCornerLeft.jpg) no-repeat top left;padding:0;} .buttonAquaWht div.bottom div.tl div.tr {float:left; background: url(/imgs/buttonAquaTopWhtCornerRight.jpg) no-repeat top right;padding:0;} .buttonAquaWht div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/buttonAquaBottomWhtCornerLeft.jpg) no-repeat bottom left;padding:0;} .buttonAquaWht div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/buttonAquaBottomWhtCornerRight.jpg) no-repeat bottom right; margin:.4em 0 0 0; padding:0 0 .5em 0;} .buttonAquaWht div.bottom div.tl div.tr div.bl div.br a.arrow {float:left; text-decoration:none; font-size:1.1em; line-height:1.5; color:#fff; background:url(/imgs/buttonAquaTopWhtArrow.jpg) right .1em no-repeat; padding:0 2em 0 1em; margin-right:.5em; } .buttonAquaWht div.bottom div.tl div.tr div.bl div.br input {float:left; color:#333; color:#fff; font-size:1.1em; border:none; padding:0 2em 0em .5em; background:url(/imgs/buttonAquaTopWhtArrow.jpg) right center no-repeat; margin: 0 0.5em 0 0;} /* ################################################################################################## ################### A - Z ####################################### ################################################################################################## */ /* #quoteBox {background: url(/imgs/quotes/quote_box_topLeft.gif) top left no-repeat; margin-bottom: 1em; float: left;} #quoteBox p {width: 72%;} #quoteBox .topRight {background: url(/imgs/quotes/quote_box_topRight.jpg) top right no-repeat;} #quoteBox .bottomLeft {background: url(/imgs/quotes/quote_box_bottomLeft.gif) bottom left no-repeat;} #quoteBox .bottomRight {background: url(/imgs/quotes/quote_box_bottomRight.gif) bottom Right no-repeat; padding: 4em 2em 2em; min-height: 100px;} */ #searchAtoZ {} #searchAtoZ .resultRow {margin-bottom: 2.5em;} /* ############################################################################### ######################## A to Z ################################################# ################################################################################ /* A to Z - letters list */ #AtoZLetters {float: left; width: 100%; margin: 1em 0 1.5em 0;} #AtoZLetters.small {width: 85%;} #pageBody #content #AtoZLetters ul {margin: 0 ; width: 68%;} #pageBody #content #AtoZLetters li {background: #c9ba82; float:left; padding: 0 ; margin: 0 .43em .5em 0;} #AtoZLetters ul li h3 {text-transform: uppercase; margin:0; font-size: 1.9em; text-align: center; line-height: 1.5em; width:1.5em; position: relative; left:-2px; top:-2px; background: #fff; padding:0px; float:left; color: #ccc; text-decoration:none;} #AtoZLetters ul li h3 a {text-align: center; line-height: 1.5em; width:1.5em; background: #fff; padding:0px; float:left; color: #333; text-decoration:none;} #AtoZLetters ul li h3 a:hover {color: #fff; background:#319897 url(/imgs/TabAquaGrad.jpg) repeat-x top;} #AtoZLetters ul li h3 a.on {color: #fff; background:#319897 url(/imgs/TabAquaGrad.jpg) repeat-x top;} /* smaller version for subsections */ #pageBody #content #AtoZLetters.small ul {margin: 0 ; width: 80%;} #AtoZLetters.small ul li h3 {font-size: 1.6em; line-height: 1.4em; width:1.3em;} #AtoZLetters.small ul li h3 a {width:1.3em; line-height: 1.4em;} #askQuestion {float: right; width: 45%;} #askQuestion .buttonYellow {margin: 0;} .letterResults {} .letterResults h3 {font-size: 1.1em;} .letterResults p {font-size: 1em;} #pageBody #content .letterResults ul {margin:0;padding:0;} #pageBody #content .letterResults ul li {background:none; border-bottom: 1px dashed #ccc; padding: .8em 0;} .letterResults ul li a:hover {color: #1C6D6E;} #pageBody #content .letterResults ul li ul {margin: .5em 1.5em;} #pageBody #content .letterResults ul li ul li {font-size: .9em; color: #ccc; border: none; list-style: disc; padding: 0; margin: .1em 0 0 0;} .letterResults ul li ul li a {color: #333; text-decoration: none;} .letterResults ul li ul li a:hover {text-decoration: underline;} .donate {float: left; width: 70%;} /* ########################################################################################## #################### dogs Trust SPOTLIGHTS ###################################################### ########################################################################################### */ a.addMore {color:#C83030;display:block;float:left;padding-bottom:1em;text-decoration:none;} a.addMore:hover{text-decoration:underline;} /* general setting */ .spotlight {position:relative; width:22.8em; /* height:14.1em;*/ height:12.8em; float:left; margin-right:2em; color:#fff} .spotlight.noMargin {margin:0;} .spotlight.vertical {clear:left; margin:0 0 3em 0; color:#fff; height:12.5em;} .spotlight h2 {color:#fff; margin:0; padding:0;font-size:1.4em; font-weight:bold; width:78%; padding-bottom:0.3em;} .spotlight.vertical h2 {color:#fff; margin:0; padding:0;font-size:1.4em; font-weight:bold; width:78%; padding-bottom:0.2em;} #pageBody #content .spotlight p {margin:0; padding:0; color:#fff; font-size:1.1em; width:70%; line-height:1.4;} .spotlight p {color:#fff} .spotlight.close {height:8em;} .spotlight.close h2 {color:#fff; margin:0; padding:0;font-size:1.4em; width:78%; padding-bottom:0.2em;} /* BLUE SPOTLIGHT */ /*set color-specific details */ .spotlight .blue {background: #17729f url(/imgs/spotlights/spotlightBlueGradBkg.jpg) repeat-x top; padding:.9em 10px 3.5em 10px;} .spotlight.close .blue { background: #17729f url(/imgs/spotlights/spotlightBlueGradBkg.jpg) repeat-x top; padding:.9em 10px 4em 10px;} .spotlight .blue span.a {position:absolute; top:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightBlueCornerTopLeft.gif) no-repeat top left;} .spotlight .blue span.b {position:absolute; top:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightBlueCornerTopRight.gif) no-repeat top right;} .spotlight .blue span.c {position:absolute; bottom:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightBlueCornerBottomLeft.gif) no-repeat bottom left;} .spotlight .blue span.d {position:absolute; bottom:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightBlueCornerBottomRight.gif) no-repeat bottom right;} .spotlight .blue div.link {position:absolute; z-index:101; bottom:0px; left:0; width:21em; background:#2586b7 url(/imgs/spotlights/spotlightBlueLinkBkg.jpg) repeat-y right; padding:7px .8em 7px 1em; text-align:right; } #pageBody #content .spotlight .blue div.link a {color:#fff; text-decoration:none; font-size:1.1em; background:url(/imgs/spotlights/spotlightBlueLinkArrows.gif) no-repeat right; padding-right:3em;} .spotlight .blue div.dog {position:absolute; z-index:10; background: url(/imgs/dogs/blueBox_dog2.gif) no-repeat top center; width:9em; height:14em; top:-28px; right:0px; } .spotlight.close .blue div.dog {position:absolute; z-index:10; background: url(/imgs/dogs/blueBox_dog1.gif) no-repeat top center; width:9em; height:8em; top:-28px; right:0px; } #pageBody #content .spotlight .blue p {width:67%;} /* RED SPOTLIGHT */ /*set color-specific details */ .spotlight .red {background: #a11514 url(/imgs/spotlights/spotlightRedGradBkg.jpg) repeat-x top; padding:.9em 10px 3.5em 10px;} #pageBody #rightCol .spotlight.vertical .red p {margin:0; padding:0; color:#fff; font-size:1.1em; width:12.3em; line-height:1.4;} .spotlight .red span.a {position:absolute; top:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightRedCornerTopLeft.gif) no-repeat top left;} .spotlight .red span.b {position:absolute; top:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightRedCornerTopRight.gif) no-repeat top right;} .spotlight .red span.c {position:absolute; bottom:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightRedCornerBottomLeft.gif) no-repeat bottom left;} .spotlight .red span.d {position:absolute; bottom:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightRedCornerBottomRight.gif) no-repeat bottom right;} .spotlight .red div.link {position:absolute; z-index:101; bottom:0px; left:0; width:21em; background:#ba2424 url(/imgs/spotlights/spotlightRedLinkBkg.jpg) repeat-y right; padding:7px .8em 7px 1em; text-align:right; } #pageBody #content .spotlight .red div.link a {color:#fff; text-decoration:none; font-size:1.1em; background:url(/imgs/spotlights/spotlightRedLinkArrows.gif) no-repeat right; padding-right:3em;} .spotlight .red div.dog {position:absolute; z-index:10; background: url(/imgs/dogs/darkGreenBox_dog.gif) no-repeat top left; width:8.8em; height:14em; top:-28px; right:2px; } .spotlight .red div.ukMap {position:absolute; z-index:10; background: url(/imgs/spotlights/spotlightRed_ukMap.gif) no-repeat top left; width:9.2em; height:10.9em; top:-23px; right:0; } .spotlight .red div.link fieldset select {margin:0 .7em 0 0; padding:0; border:1px solid #222; width:12.5em; } /* PURPLE SPOTLIGHT */ /*set color-specific details */ .spotlight .purple {background: #6a153f url(/imgs/spotlights/spotlightPurpleGradBkg.jpg) repeat-x top; padding:.9em 10px 3.5em 10px;} #pageBody #rightCol .spotlight.vertical .purple p {margin:0; padding:0; color:#fff; font-size:1.1em; width:12.3em; line-height:1.4;} .spotlight .purple span.a {position:absolute; top:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightPurpleCornerTopLeft.gif) no-repeat top left;} .spotlight .purple span.b {position:absolute; top:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightPurpleCornerTopRight.gif) no-repeat top right;} .spotlight .purple span.c {position:absolute; bottom:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightPurpleCornerBottomLeft.gif) no-repeat bottom left;} .spotlight .purple span.d {position:absolute; bottom:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightPurpleCornerBottomRight.gif) no-repeat bottom right;} .spotlight .purple div.link {position:absolute; z-index:101; bottom:0px; left:0; width:21em; background:#862455 url(/imgs/spotlights/spotlightPurpleLinkBkg.gif) repeat-y right; padding:7px .8em 7px 1em; text-align:right; } #pageBody #content .spotlight .purple div.link a {color:#fff; text-decoration:none; font-size:1.1em; background:url(/imgs/spotlights/spotlightPurpleLinkArrows.gif) no-repeat right; padding-right:3em;} .spotlight .purple div.dog {position:absolute; z-index:10; background: url(/imgs/dogs/purpleBox_dog2.gif) no-repeat top left; width:8em; height:14em; top:-27px; right:0; } .spotlight .purple div.ukMap {position:absolute; z-index:10; background: url(/imgs/spotlights/spotlightPurple_ukMap.gif) no-repeat top left; width:9.2em; height:10.9em; top:-23px; right:0; } .spotlight .purple div.link fieldset select {margin:0 .7em 0 0; padding:0; border:1px solid #222; width:12.5em; } /* GREEN SPOTLIGHT */ /*set color-specific details */ .spotlight .green {background: #186666 url(/imgs/spotlights/spotlightGreenGradBkg.jpg) repeat-x top; padding:.9em 10px 3em 10px;} #pageBody #rightCol .spotlight.vertical .green p {margin:0; padding:0; color:#fff; font-size:1.1em; width:12.3em; line-height:1.4;} /* set images for corners */ .spotlight .green span.a {position:absolute; top:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightGreenCornerTopLeft.gif) no-repeat top left;} .spotlight .green span.b {position:absolute; top:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightGreenCornerTopRight.gif) no-repeat top right;} .spotlight .green span.c {position:absolute; bottom:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightGreenCornerBottomLeft.gif) no-repeat bottom left;} .spotlight .green span.d {position:absolute; bottom:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightGreenCornerBottomRight.gif) no-repeat bottom right;} .spotlight .green div.link {position:absolute; z-index:101; bottom:0px; left:0; width:21em; background:#2b8b8b url(/imgs/spotlights/spotlightGreenLinkBkg.gif) repeat-y right; padding:7px .8em 7px 1em; text-align:right; } #pageBody #content .spotlight .green div.link a {color:#fff; text-decoration:none; font-size:1.1em; background:url(/imgs/spotlights/spotlightGreenLinkArrows.gif) no-repeat right; padding-right:3em;} .spotlight .green div.dog {position:absolute; z-index:10; background: url(/imgs/dogs/greenBox_dog2.gif) no-repeat top left; width:8em; height:14em; top:-28px; right:0; } .spotlight .green div.cartridges {position:absolute; z-index:10; background: url(/imgs/spotlights/spotlightGreen_cartridges.gif) no-repeat top left; width:7em; height:8em; top:10px; right:0; } /* DARK GREEN SPOTLIGHT */ /*set color-specific details */ .spotlight .darkGreen {background: #0c4930 url(/imgs/spotlights/spotlightDGreenGradBkg.gif) repeat-x top; padding:.9em 10px 3em 10px;} #pageBody #rightCol .spotlight.vertical .darkGreen p {margin:0; padding:0; color:#fff; font-size:1.1em; width:12.3em; line-height:1.4;} /* set images for corners */ .spotlight .darkGreen span.a {position:absolute; top:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightDGreenCornerTopL.gif) no-repeat top left;} .spotlight .darkGreen span.b {position:absolute; top:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightDGreenCornerTopR.gif) no-repeat top right;} .spotlight .darkGreen span.c {position:absolute; bottom:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightDGreenCornerBL.gif) no-repeat bottom left;} .spotlight .darkGreen span.d {position:absolute; bottom:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightDGreenCornerBR.gif) no-repeat bottom right;} .spotlight .darkGreen div.link {position:absolute; z-index:101; bottom:0px; left:0; width:21em; background:#217451 url(/imgs/spotlights/spotlightDGreenLinkBkg.gif) repeat-y right; padding:7px .8em 7px 1em; text-align:right; } #pageBody #content .spotlight .darkGreen div.link a {color:#fff; text-decoration:none; font-size:1.1em; background:url(/imgs/spotlights/spotlightDGreenLinkArrows.gif) no-repeat right; padding-right:3em;} .spotlight .darkGreen div.dog {position:absolute; z-index:10; background: url(/imgs/dogs/greenBox_dog1.gif) no-repeat top left; width:8em; height:14em; top:-28px; right:0; } /* ORANGE SPOTLIGHT */ /*set color-specific details */ .spotlight .orange {background: #b7520e url(/imgs/spotlights/spotlightOrangeGradBkg.jpg) repeat-x top; padding:.9em 10px 3.5em 10px;} .spotlight.vertical .orange {padding:1.2em 10px 1em 13px;} .spotlight .orange h2 {color:#fff; font-size:1.5em; width:85%; padding-bottom:0.4em; } #pageBody #rightCol .spotlight.vertical .orange h2 {padding-bottom:0.2em; } #pageBody #rightCol .spotlight.vertical .orange p {margin:0; padding:0; color:#fff; font-size:1.1em; width:13em; line-height:1.4; } /* set images for corners */ .spotlight .orange span.a {position:absolute; top:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightOrangeCornerTopLeft.gif) no-repeat top left;} .spotlight .orange span.b {position:absolute; top:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightOrangeCornerTopRight.gif) no-repeat top right;} .spotlight .orange span.c {position:absolute; bottom:0px; left:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightOrangeCornerBottomLeft.gif) no-repeat bottom left;} .spotlight .orange span.d {position:absolute; bottom:0px; right:0px; width:7px; height:7px; background: url(/imgs/spotlights/spotlightOrangeCornerBottomRight.gif) no-repeat bottom right;} .spotlight .orange div.link {position:absolute; z-index:101; bottom:0px; left:0; width:21em; background:#dc6b1a url(/imgs/spotlights/spotlightOrangeLinkBkg.gif) repeat-y right; padding:7px .8em 7px 1em; text-align:right; } .spotlight .orange div.link a {color:#fff; text-decoration:none; font-size:1.1em; background:url(/imgs/spotlights/spotlightOrangeLinkArrows.gif) no-repeat right; padding-right:3em;} .spotlight .orange div.dog {position:absolute; z-index:10; background: url(/imgs/dogs/orangeBox_dog1.gif) no-repeat top right; width:9.5em; height:13em; top:-21px; right:-12px; } /*################################################################################################ ################### RIGHT COL SPOTLIGHTS ############################################################ ##################################################################################################*/ .spotlightBox {position:relative; width:22.8em; float:left; margin: 0 0em 1.5em 0; color:#fff} .spotlightBox .bl {float: left; width: 100%; background: url(/imgs/spotlights/spotlights_cornerBottomLeft.gif) bottom left no-repeat;} .spotlightBox .br {float: left; width: 100%; background: url(/imgs/spotlights/spotlights_cornerBottomRight.jpg) bottom right no-repeat;} .spotlightBox h1 {background: url(/imgs/spotlights/spotlights_cornerTopLeft.jpg) top left no-repeat; padding: .7em 0 0 .7em; font-size: 1.4em; font-weight: bold; text-transform: uppercase; margin-bottom: .1em;} .spotlightBox h2 {width: 55%; background: url(/imgs/spotlights/spotlights_cornerTopLeft.jpg) top left no-repeat; padding: .7em 0 0 .7em; font-size: 1.4em; font-weight: bold; text-transform: uppercase; margin-bottom: .1em;} .spotlightBox p {padding-left: 1em; margin-bottom: .5em; font-size: 1.1em; width: 55%; min-height: 6.5em;} /* GREEN BOXES */ .spotlightBox.genericgreen {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopChristmas2011.jpg) top right no-repeat;} /* spotlights_cornerTopGeneric */ .spotlightBox.shop {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopShop.jpg) top right no-repeat;} .spotlightBox.reclaim {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopReclaim.jpg) top right no-repeat;} .spotlightBox.cartridge {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopInk.jpg) top right no-repeat;} .spotlightBox.genericgreen h2, .spotlightBox.shop h2, .spotlightBox.reclaim h2, .spotlightBox.cartridge h2 {color: #60801d;} /* BLUE BOXES */ .spotlightBox.genericblue {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopChristmas2011.jpg) top right no-repeat;} .spotlightBox.friendly {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopFriendly.jpg) top right no-repeat;} .spotlightBox.icawc {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopICAWC.jpg) top right no-repeat;} .spotlightBox.click {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopClick.jpg) top right no-repeat;} .spotlightBox.facebook {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopFB.jpg) top right no-repeat;} .spotlightBox.genericblue h2, .spotlightBox.friendly h2, .spotlightBox.icawc h2, .spotlightBox.click h2, .spotlightBox.facebook h2 {color: #004791;} /* ORANGE BOXES */ .spotlightBox.genericorange {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopChristmas2011.jpg) top right no-repeat;} .spotlightBox.husky {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopHusky.jpg) top right no-repeat;} .spotlightBox.mbna {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopMBNA.jpg) top right no-repeat;} .spotlightBox.raffle {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopRaffle.jpg) top right no-repeat;} .spotlightBox.catalogue {background: #FAE184 url(/imgs/spotlights/spotlights_cornerTopCatalog.jpg) top right no-repeat;} .spotlightBox.genericorange h2, .spotlightBox.husky h2, .spotlightBox.mbna h2, .spotlightBox.raffle h2, .spotlightBox.catalogue h2 {color: #DC6B1A;} /* Buttons */ .spotlightButton {float: left; width: 92%; margin: 1em; display: inline;} .spotlightButton .tr, .spotlightButton .bl, .spotlightButton .br, .spotlightButton a {float: left; width: 100%} .spotlightButton a {color: #fff; float: left; padding: .6em 1em .6em; text-decoration: none; text-transform: uppercase;} .spotlightBox.genericgreen .spotlightButton, .spotlightBox.shop .spotlightButton, .spotlightBox.reclaim .spotlightButton, .spotlightBox.cartridge .spotlightButton {background: #7CAF0F url(/imgs/spotlights/spotlightButton_Shop_TL.jpg) top left no-repeat;} .spotlightBox.genericgreen .spotlightButton .tr, .spotlightBox.shop .spotlightButton .tr, .spotlightBox.reclaim .spotlightButton .tr, .spotlightBox.cartridge .spotlightButton .tr {background: url(/imgs/spotlights/spotlightButton_Shop_TR.gif) top right no-repeat;} .spotlightBox.genericgreen .spotlightButton .bl, .spotlightBox.shop .spotlightButton .bl, .spotlightBox.reclaim .spotlightButton .bl, .spotlightBox.cartridge .spotlightButton .bl {background: url(/imgs/spotlights/spotlightButton_Shop_BL.jpg) bottom left no-repeat;} .spotlightBox.genericgreen .spotlightButton .br, .spotlightBox.shop .spotlightButton .br, .spotlightBox.reclaim .spotlightButton .br, .spotlightBox.cartridge .spotlightButton .br {background: url(/imgs/spotlights/spotlightButton_Shop_BR.jpg) bottom right no-repeat;} .spotlightBox.genericgreen .spotlightButton a, .spotlightBox.shop .spotlightButton a, .spotlightBox.reclaim .spotlightButton a, .spotlightBox.cartridge .spotlightButton a {background: url(/imgs/spotlights/spotlightButton_Shop_Arrow.jpg) 85% 50% no-repeat;} .spotlightBox.genericblue .spotlightButton, .spotlightBox.friendly .spotlightButton, .spotlightBox.icawc .spotlightButton, .spotlightBox.click .spotlightButton, .spotlightBox.facebook .spotlightButton {background: #004892 url(/imgs/spotlights/spotlightButton_Friendly_TL.jpg) top left no-repeat;} .spotlightBox.genericblue .spotlightButton .tr, .spotlightBox.friendly .spotlightButton .tr, .spotlightBox.icawc .spotlightButton .tr, .spotlightBox.click .spotlightButton .tr, .spotlightBox.facebook .spotlightButton .tr {background: url(/imgs/spotlights/spotlightButton_Friendly_TR.gif) top right no-repeat;} .spotlightBox.genericblue .spotlightButton .bl, .spotlightBox.friendly .spotlightButton .bl, .spotlightBox.icawc .spotlightButton .bl, .spotlightBox.click .spotlightButton .bl, .spotlightBox.facebook .spotlightButton .bl {background: url(/imgs/spotlights/spotlightButton_Friendly_BL.jpg) bottom left no-repeat;} .spotlightBox.genericblue .spotlightButton .br, .spotlightBox.friendly .spotlightButton .br, .spotlightBox.icawc .spotlightButton .br, .spotlightBox.click .spotlightButton .br, .spotlightBox.facebook .spotlightButton .br {background: url(/imgs/spotlights/spotlightButton_Friendly_BR.jpg) bottom right no-repeat;} .spotlightBox.genericblue .spotlightButton a, .spotlightBox.friendly .spotlightButton a, .spotlightBox.icawc .spotlightButton a, .spotlightBox.click .spotlightButton a, .spotlightBox.facebook .spotlightButton a {background: url(/imgs/spotlights/spotlightButton_Friendly_Arrow.jpg) 85% 50% no-repeat;} .spotlightBox.genericorange .spotlightButton, .spotlightBox.husky .spotlightButton, .spotlightBox.mbna .spotlightButton, .spotlightBox.raffle .spotlightButton, .spotlightBox.catalogue .spotlightButton {background: #DC6B1A url(/imgs/spotlights/spotlightButton_Husky_TL.jpg) top left no-repeat;} .spotlightBox.genericorange .spotlightButton .tr, .spotlightBox.husky .spotlightButton .tr, .spotlightBox.mbna .spotlightButton .tr, .spotlightBox.raffle .spotlightButton .tr, .spotlightBox.catalogue .spotlightButton .tr {background: url(/imgs/spotlights/spotlightButton_Husky_TR.gif) top right no-repeat;} .spotlightBox.genericorange .spotlightButton .bl, .spotlightBox.husky .spotlightButton .bl, .spotlightBox.mbna .spotlightButton .bl, .spotlightBox.raffle .spotlightButton .bl, .spotlightBox.catalogue .spotlightButton .bl {background: url(/imgs/spotlights/spotlightButton_Husky_BL.jpg) bottom left no-repeat;} .spotlightBox.genericorange .spotlightButton .br, .spotlightBox.husky .spotlightButton .br, .spotlightBox.mbna .spotlightButton .br, .spotlightBox.raffle .spotlightButton .br, .spotlightBox.catalogue .spotlightButton .br {background: url(/imgs/spotlights/spotlightButton_Husky_BR.jpg) bottom right no-repeat;} .spotlightBox.genericorange .spotlightButton a, .spotlightBox.husky .spotlightButton a, .spotlightBox.mbna .spotlightButton a, .spotlightBox.raffle .spotlightButton a, .spotlightBox.catalogue .spotlightButton a {background: url(/imgs/spotlights/spotlightButton_Husky_Arrow.jpg) 85% 50% no-repeat;} /*################################################################################### ################### DOG ICONS #################################################### ####################################################################################*/ .icons img { border: none; } .icons a { text-decoration: none; } .icons a span.outer { position: absolute; left: auto; font-size: 1.1em; color: #333; width: 23em; display: inline; } .icons a.toolTip span.outer { margin-left: -24.5em; background: url(/imgs/tooltips/toolTip_cornerBL.png) bottom left no-repeat; padding-left: 8px; } .icons a span.outer b { display: block; font-size: 1.2em; margin-bottom: .3em; } .icons a.toolTip span.outer { margin-top: -2em; } .icons a:hover, .icons a:visited:hover {cursor: help;} .icons a:focus span.outer {display: inline !important;left: auto !important;} .icons a span.outer, .icons a:link span.outer, .icons a:visited span.outer {display: none;} .icons a:hover span.outer, .icons a:visited:hover span.outer {display: block;left: auto;} .icons a span.outer span.tl { display: block; background: url(/imgs/tooltips/toolTip_cornerTL.png) top left no-repeat; margin-left: -8px; } .icons a span.outer span.tl span.br { display: block; background: url(/imgs/tooltips/toolTip_cornerBR.png) bottom right no-repeat; } .icons a span.outer span.tl span.br span.tr { display: block; padding: 1em 1em 1em 2.5em; background: url(/imgs/tooltips/toolTip_cornerTR.png) top right no-repeat; } /* ################################################################################################################ #################### GENREAL TAB CONTAINER ############################################################# ################################################################################################################ */ .tabContainer {float:left; width:53em; margin-bottom:2em; } .tabContainer.marginTop {margin-top:1em;} .tabContainer .shadowContainer {display:inline; position: relative; left:2px; top:6px; margin:0; float:left; width:53em; } .tabContainer .shadowContainer div.shadow {background: #c5a527 url(/imgs/tabSets/tabRightShadow.jpg) no-repeat top right; float:left;} .tabContainer .shadowContainer div.shadow div.container {position: relative; left:-2px; top:-2px; background: #fff; padding:1em; float:left; width:51em; } /*membership table*/ .tabContainer .shadowContainer div.shadow div.container table{ margin-bottom:.5em; font-size:1.1em; width:505px;} .tabContainer .shadowContainer div.shadow div.container table th{width:20%; padding:3px 0; background:#eee; font-size:1.1em;} .tabContainer .shadowContainer div.shadow div.container table th.wider{width:30%; padding-left: 5px;} .tabContainer .shadowContainer div.shadow div.container table td {padding:5px; border-bottom: 1px solid #eee;} .tabContainer .shadowContainer div.shadow div.container table .centre{text-align: center;} .tabContainer .shadowContainer div.shadow div.container table input.radio{float: none; width: auto;} /* Generic Tabs */ .tabTop {position:relative; left:-2px; top:-2px; width:auto; background:#DBC153 url(/imgs/tabSets/tabRepeatGeneric.jpg) repeat-x top;} .tabTop div.a {background: url(/imgs/tabSets/tabRightGeneric.jpg) no-repeat top right;} .tabTop div.a div.b {padding:.9em 0 .5em 0; background: url(/imgs/tabSets/tabLeftGeneric.jpg) no-repeat top left;} .tabTop div.a div.b h1, .tabTop div.a div.b h2 {font-family: "Arial"; margin: 0 0 0 .8em; font-weight:bold; text-transform:uppercase; color:#fff; } .tabTop div.a div.b h1 {font-size:1.7em;} .tabTop div.a div.b h2 {font-size:1.5em; color:#000;} /* Sponsor (Red) */ .tabSponsor .tabTop {background:#861C28 url(/imgs/tabSets/tabRepeatSponsor.jpg) repeat-x top;} .tabSponsor .tabTop div.a {background: url(/imgs/tabSets/tabRightSponsor.jpg) no-repeat top right;} .tabSponsor .tabTop div.a div.b {background: url(/imgs/tabSets/tabLeftSponsor.jpg) no-repeat top left;} .tabSponsor div.a div.b h2 {color:#fff;} .tabSponsor a.tooltip {color: #C63032;} /* Rehome (Purple) */ .tabRehome .tabTop {background:#68183B url(/imgs/tabSets/tabRepeatRehome.jpg) repeat-x top;} .tabRehome .tabTop div.a {background: url(/imgs/tabSets/tabRightRehome.jpg) no-repeat top right;} .tabRehome .tabTop div.a div.b {background: url(/imgs/tabSets/tabLeftRehome.jpg) no-repeat top left;} .tabRehome div.a div.b h2 {color:#fff;} .tabRehome a.tooltip {color: #7c1e4d;} /* Giving (Blue) */ .tabGiving .tabTop {background:#1974a1 url(/imgs/tabSets/tabRepeatGiving.jpg) repeat-x top;} .tabGiving .tabTop div.a {background: url(/imgs/tabSets/tabRightGiving.jpg) no-repeat top right;} .tabGiving .tabTop div.a div.b {background: url(/imgs/tabSets/tabLeftGiving.jpg) no-repeat top left;} .tabGiving div.a div.b h2 {color:#fff;} .tabGiving a.tooltip {color: #2A8ABC;} /* A to Z (Aqua) */ .tabAtoZ .tabTop {background:#1B615F url(/imgs/tabSets/tabRepeatAtoZ.jpg) repeat-x top;} .tabAtoZ .tabTop div.a {background: url(/imgs/tabSets/tabRightAtoZ.jpg) no-repeat top right;} .tabAtoZ .tabTop div.a div.b {background: url(/imgs/tabSets/tabLeftAtoZ.jpg) no-repeat top left;} .tabAtoZ div.a div.b h2 {color:#fff;} .tabAtoZ a.tooltip {color: #1F7375;} /* Popup .tabContainer.popUp {width: 200px; text-align: left; margin-left: 1em; position: relative;} .tabContainer.popUp .shadowContainer {width: 200px; position: absolute;} .tabContainer.popUp .shadowContainer div.shadow div.container {width: auto; border-left: 1px solid #ccc;} .tabContainer.popUp .shadowContainer div.shadow h3 {color: #fff; font-size: 1.2em; margin: 0 0 0 1em;} .tabContainer.popUp .shadowContainer div.shadow p {font-size: 1.1em; margin-bottom: 2.5em;} .tabContainer.popUp .tabTop div.a div.b {padding: .4em 0;} .tabContainer.popUp img {margin-bottom: 1em;} a.jt {cursor: help; margin-left: .8em;} #cluetip-title {} #cluetip-close {position: absolute; z-index: 120; top: 240px; left: 22px; font-size: .8em;}*/ /* Generic buttons */ .tabButton {float:left; margin: 0 1em 0 1em; padding:0; background: #fddd5f url(/imgs/tabSets/bttnTopGeneric.jpg) repeat-x top;} .tabButton.floatRight {float:right; display: inline;} .tabButton.noMargin {margin: 0 0 .5em 0;} .tabButton.leftMargin {margin: -.2em 0 0 .2em;} .tabButton.marginTop {margin-top: .5em;} .tabButton div.bottom {float:left; padding:0; margin:0; background: url(/imgs/tabSets/bttnBottomGeneric.jpg) repeat-x bottom;} .tabButton div.bottom div.tl, .tabButton div.bottom div.tl div.tr, .tabButton div.bottom div.tl div.tr div.bl, .tabButton div.bottom div.tl div.tr div.bl div.br {float:left; padding:0; margin:0;} .tabButton div.bottom div.tl {background: url(/imgs/tabSets/bttnTLGeneric.jpg) no-repeat top left;} .tabButton div.bottom div.tl div.tr {float:left; background: url(/imgs/tabSets/bttnTRGeneric.jpg) no-repeat top right;} .tabButton div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/tabSets/bttnBLGeneric.jpg) no-repeat bottom left;} .tabButton div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/tabSets/bttnBRGeneric.jpg) no-repeat bottom right;} /* Generic link */ .tabButton div.bottom div.tl div.tr div.bl div.br a, .tabButton div.bottom div.tl div.tr div.bl div.br input {float:none; color: #000; text-decoration:none; background: transparent url(/imgs/tabSets/bttnArrowGeneric.jpg) right center no-repeat; border: none; border-style: solid; border-width: 0 1px; border-color: #333; font-size:1.2em;} .tabBack div.bottom div.tl div.tr div.bl div.br a, .tabBack div.bottom div.tl div.tr div.bl div.br input {background:url(/imgs/tabSets/bttnArrowBackGeneric.jpg) left center no-repeat;} .tabButton div.bottom div.tl div.tr div.bl div.br a {padding:0 2.5em 0 .7em; margin:0; line-height:2;} .tabBack div.bottom div.tl div.tr div.bl div.br a {padding: 0 .7em 0 2.5em;} /* Generic submit */ .tabButton div.bottom div.tl div.tr div.bl div.br input {width:auto; padding:0 2.2em 0 .5em; margin:.3em 0 0.4em 0; font-family: verdana, arial, sans-serif;} .tabBack div.bottom div.tl div.tr div.bl div.br input {padding: 0 .5em 0 2.2em;} /* Sponsor (Red) Buttons */ .tabSponsor .tabButton {background: #c83030 url(/imgs/tabSets/bttnTopSponsor.jpg) repeat-x top;} .tabSponsor .tabButton div.bottom { background: url(/imgs/tabSets/bttnBottomSponsor.jpg) repeat-x bottom;} .tabSponsor .tabButton div.bottom div.tl {background: url(/imgs/tabSets/bttnTLSponsor.jpg) no-repeat top left;} .tabSponsor .tabButton div.bottom div.tl div.tr {float:left; background: url(/imgs/tabSets/bttnTRSponsor.jpg) no-repeat top right;} .tabSponsor .tabButton div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/tabSets/bttnBLSponsor.jpg) no-repeat bottom left;} .tabSponsor .tabButton div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/tabSets/bttnBRSponsor.jpg) no-repeat bottom right;} .tabSponsor .tabButton div.bottom div.tl div.tr div.bl div.br a, .tabSponsor .tabButton div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowSponsor.jpg) right center no-repeat; color: #fff; border-style: solid; border-width: 0 1px; border-color: #801919;} .tabSponsor .tabBack div.bottom div.tl div.tr div.bl div.br a, .tabSponsor .tabBack div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowBackSponsor.jpg) left center no-repeat;} /* Rehome (Purple) Buttons */ .tabRehome .tabButton {background: #892859 url(/imgs/tabSets/bttnTopRehome.jpg) repeat-x top;} .tabRehome .tabButton div.bottom { background: url(/imgs/tabSets/bttnBottomRehome.jpg) repeat-x bottom;} .tabRehome .tabButton div.bottom div.tl {background: url(/imgs/tabSets/bttnTLRehome.jpg) no-repeat top left;} .tabRehome .tabButton div.bottom div.tl div.tr {float:left; background: url(/imgs/tabSets/bttnTRRehome.jpg) no-repeat top right;} .tabRehome .tabButton div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/tabSets/bttnBLRehome.jpg) no-repeat bottom left;} .tabRehome .tabButton div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/tabSets/bttnBRRehome.jpg) no-repeat bottom right;} .tabRehome .tabButton div.bottom div.tl div.tr div.bl div.br a, .tabRehome .tabButton div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowRehome.jpg) right center no-repeat; color: #fff; border-style: solid; border-width: 0 1px; border-color: #68143E;} .tabRehome .tabBack div.bottom div.tl div.tr div.bl div.br a, .tabRehome .tabBack div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowBackRehome.jpg) left center no-repeat;} /* Giving (Blue) Buttons */ .tabGiving .tabButton {background: #2585B5 url(/imgs/tabSets/bttnTopGiving.jpg) repeat-x top;} .tabGiving .tabButton div.bottom { background: url(/imgs/tabSets/bttnBottomGiving.jpg) repeat-x bottom;} .tabGiving .tabButton div.bottom div.tl {background: url(/imgs/tabSets/bttnTLGiving.jpg) no-repeat top left;} .tabGiving .tabButton div.bottom div.tl div.tr {float:left; background: url(/imgs/tabSets/bttnTRGiving.jpg) no-repeat top right;} .tabGiving .tabButton div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/tabSets/bttnBLGiving.jpg) no-repeat bottom left;} .tabGiving .tabButton div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/tabSets/bttnBRGiving.jpg) no-repeat bottom right;} .tabGiving .tabButton div.bottom div.tl div.tr div.bl div.br a, .tabGiving .tabButton div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowGiving.jpg) right center no-repeat; color: #fff; border-style: solid; border-width: 0 1px; border-color: #1B73A1;} .tabGiving .tabBack div.bottom div.tl div.tr div.bl div.br a, .tabGiving .tabBack div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowBackGiving.jpg) left center no-repeat;} /* A to Z (Aqua) Buttons */ .tabAtoZ .tabButton {background: #339A99 url(/imgs/tabSets/bttnTopAtoZ.jpg) repeat-x top;} .tabAtoZ .tabButton div.bottom { background: url(/imgs/tabSets/bttnBottomAtoZ.jpg) repeat-x bottom;} .tabAtoZ .tabButton div.bottom div.tl {background: url(/imgs/tabSets/bttnTLAtoZ.jpg) no-repeat top left;} .tabAtoZ .tabButton div.bottom div.tl div.tr {float:left; background: url(/imgs/tabSets/bttnTRAtoZ.jpg) no-repeat top right;} .tabAtoZ .tabButton div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/tabSets/bttnBLAtoZ.jpg) no-repeat bottom left;} .tabAtoZ .tabButton div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/tabSets/bttnBRAtoZ.jpg) no-repeat bottom right;} .tabAtoZ .tabButton div.bottom div.tl div.tr div.bl div.br a, .tabAtoZ .tabButton div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowAtoZ.jpg) right center no-repeat; color: #fff; border-style: solid; border-width: 0 1px; border-color: #1B73A1;} .tabAtoZ .tabBack div.bottom div.tl div.tr div.bl div.br a, .tabAtoZ .tabBack div.bottom div.tl div.tr div.bl div.br input {background: transparent url(/imgs/tabSets/bttnArrowBackAtoZ.jpg) left center no-repeat;} /* BLUE BUTTON on yellow Bkg */ .buttonBlueYellow {float:left; margin: 0 1em 0 1em; position:relative; width:auto; background: #2e5375 url(/imgs/buttonBlueTopYellowBorder.jpg) repeat-x top; padding:0; color:#fff; } .marginTop {margin:1em 0 0 0;} .buttonBlueYellow.marginRight{margin:0 16em 0 0;} .buttonBlueYellow.noMargin {margin:0;} .buttonBlueYellow div.bottom {float:left; background: url(/imgs/buttonBlueBottomYellowBorder.jpg) repeat-x bottom; padding:0;} .buttonBlueYellow div.bottom div.tl {float:left; background: url(/imgs/buttonBlueTopYellowCornerLeft.jpg) no-repeat top left;padding:0;} .buttonBlueYellow div.bottom div.tl div.tr {float:left; background: url(/imgs/buttonBlueTopYellowCornerRight.jpg) no-repeat top right;padding:0;} .buttonBlueYellow div.bottom div.tl div.tr div.bl {float:left; background:url(/imgs/buttonBlueBottomYellowCornerLeft.jpg) no-repeat bottom left;padding:0;} .buttonBlueYellow div.bottom div.tl div.tr div.bl div.br {float:left; background: url(/imgs/buttonBlueBottomYellowCornerRight.jpg) no-repeat bottom right; margin:.4em 0 0 0; padding:0 0 .5em 0; /* border-right:1px solid #68143e; border-left:1px solid #68143e;*/} .buttonBlueYellow div.bottom div.tl div.tr div.bl div.br a.arrow {float:left; text-decoration:none; font-size:1em; line-height:1.5; color:#fff; background:url(/imgs/buttonBlueTopYellowArrow.jpg) right .1em no-repeat; padding:0 2em 0 1em; margin-right:.5em; } .buttonBlueYellow div.bottom div.tl div.tr div.bl div.br input {float:left; color:#333; color:#fff; font-size:1em; border:none; padding:0 2em 0em .5em; background:url(/imgs/buttonBlueTopWhtArrow.jpg) right 70% no-repeat; margin: 0 0.5em 0 0;}/*ie7.css has double padding-right*/ .buttonBlueYellow div.bottom div.tl div.tr div.bl div.br a {float:left; color:#333; color:#fff; font-size:1.1em; border:none; padding:1px 0 1px 2.5em; background:url(/imgs/buttonBlueTopWhtArrowBack.jpg) 5px 70% no-repeat; margin: 0 0.5em 0 0; text-decoration:none;} /* ############################################################################## ###################### TABLES ################################################## ############################################################################### */ table.accounts {width:99%; margin-bottom:2em; font-size:1.1em; border-width: 0 1px 1px 1px; border-style: solid; border-color: #999; background: #fff;} table.accounts tr, table.accounts td{border:none;} table.accounts tr th, table.accounts tr td{padding: 5px 3px; vertical-align: top;} table.accounts tr th{background: #fff; font-weight: bold; text-align: left;} table.accounts tr td{background: #fff; border-top: dashed #999 1px;} table.accounts .first {padding-left: 5px;} table.accounts td.description {width: 250px;} table.accounts td.renew {width: 95px;} table.accounts td.renew .buttonYellow {float: right; margin: 0 0 0 .5em;} table.accounts .buttonYellow div.bottom {background-image: url(/imgs/tabSets/bttnBottomGeneric.jpg);} table.accounts .buttonYellow div.tl {background-image: url(/imgs/tabSets/bttnTLGeneric.jpg);} table.accounts .buttonYellow div.tl div.tr {background-image: url(/imgs/tabSets/bttnTRGeneric.jpg);} table.accounts .buttonYellow div.tl div.tr div.bl {background-image: url(/imgs/tabSets/bttnBLGeneric.jpg);} table.accounts .buttonYellow div.tl div.tr div.bl div.br {background-image: url(/imgs/tabSets/bttnBRGeneric.jpg);} /* td widths */ /* table.accounts tr td{width:15%;}*/ table.accounts tr td.width_10pc{width:10%;} table.accounts tr td.width_15pc{width:15%;} table.accounts tr td.width_20pc{width:20%;} table.accounts tr td.width_25pc{width:25%;} table.accounts tr td.width_30pc{width:30%;} table.accounts tr td.width_35pc{width:35%;} table.accounts tr td.width_40pc{width:40%;} table.accounts tr td.width_45pc{width:45%;} table.accounts tr td.width_50pc{width:50%;} table.accounts tr td.width_55pc{width:55%;} table.accounts tr td.width_60pc{width:60%;} table.accounts tr td.width_65pc{width:65%;} table.accounts tr td.centre{width:55%;} /* table.accounts tr.inactive td {color:#555; } */ /*TOOLTIP*/ #cluetip-title {overflow: hidden;} #cluetip-title #cluetip-close {float: right; position: relative; left: 0;} #cluetip-title #cluetip-close a {background: url(/imgs/icon-close.gif) 100% 50% no-repeat; padding: 1px 20px 0 0; text-decoration: none;} .cluetip-default {padding-top: 5px;} .cluetip-default #cluetip-outer {position: relative; margin: 0; background: url(/imgs/tabSets/tab-popup-header.gif) left top no-repeat; text-align: left;} .cluetip-default h3#cluetip-title {margin: 0; padding: 10px 10px 5px; font-size: 1.1em; font-weight: bold;} .cluetip-default #cluetip-title a {font-size: 0.95em;} .cluetip-default #cluetip-inner {padding: 10px; border: 1px solid #ccc; border-top: none; background: #fff; text-align: center;} .cluetip-default #cluetip-inner p {text-align: left;} .cluetip-default div#cluetip-close {text-align: right; margin: 0 5px 5px;} a.tooltip {float: left; margin: 0.1em 0 0 0.5em; display: inline;} #dd{margin-top:3em;} form #originators {float:right; text-align:right; padding:7px 0 0 0;} form #originators span.originatorsId {font-size:120%; border:1px solid #ccc; border-right:none; background:#eee;} form #originators span.originatorsId span {font-size:100%; font-weight:bold; border-right:1px solid #ccc; padding:1px 3px;} /* ############################################################################################### ################### SITE MAP ############################################################# ################################################################################################ */ #siteMap {font-size: 1em;} #pageBody #content #siteMap ul {margin:0;} #pageBody #content #siteMap ul li {background:none;padding:0;margin:0 0 .3em;} #siteMap ul li a {display: block; width: 98%; padding: .5em 0 .5em 2em; background: #FAE690 url(/imgs/arrow-siteMap.gif) 1% 50% no-repeat; margin-bottom: .1em; text-decoration: none; text-transform: uppercase; font-weight: bold;} #siteMap ul li a:hover {text-decoration: underline;} #pageBody #content #siteMap ul li ul {margin: .5em 0 0;} #pageBody #content #siteMap ul li ul li {background: none; font-size: .9em; list-style-image: url(/imgs/bullet-level1.gif); color: #333; border-bottom: 1px dashed #FAE690; list-style-position: inside; padding: 0 0 .2em .5em;} #siteMap ul li ul li a {display: inline; background: none; padding: 0; margin: 0 0 0 -.3em; width: auto; font-weight: normal; text-transform: none;} #pageBody #content #siteMap ul li ul li ul {margin-left: 1em;} #pageBody #content #siteMap ul li ul li ul li {font-size: .9em; border-bottom: none; list-style-image: url(/imgs/bullet-level2.gif);} #pageBody #content #siteMap ul li ul li ul li ul li {font-size: .8em; list-style-image: url(/imgs/bullet-level3.gif);} /*################################################################################################## ################### ECARDS ################################################################ ##################################################################################################*/ #ecard form{ margin-bottom:2em;} #pageBody #content #ecard fieldset ul {float: left; padding-bottom: 1em; margin: 0;} #pageBody #content #ecard fieldset ul li{width: 7.7em; display:inline; float:left; margin:1em 1em 0 0; padding:5px;background:#fff; color:red; border-right:2px solid #d4b22b;border-bottom:2px solid #d4b22b;}/*see ie6.css; had to set width for opera */ #pageBody #content #ecard fieldset ul li.noRightMargin{ margin-right:0;} #ecard fieldset ul li img{ margin:0 0 .5em 0; padding:0;display:block;} #ecard fieldset ul li label{float:left; font-weight:bold; color:#000; padding:0 0 .2em .3em; width: 5.85em; } #ecard fieldset ul li input{float:left; clear: both;} #ecard fieldset ul li span{float:left; clear: both; min-height: 3em; width: 100%;} #ecard h5{ padding-top:1em; font-weight:bold; margin:0 0 2em 1em; font-size:1em;} #ecard .yellowBox3{background:#fae283;} #pageBody #content #ecard ol{margin:1em 0 0 0;} #pageBody #content #ecard ol img.required {float: none;} #pageBody #content #ecard ol li{list-style-type:none; float:left; margin-bottom:1em; /*font-size:1.2em;*/} #pageBody #content #ecard ol li label{float:left; width:11em; padding-right:1em; margin: 0;} #pageBody #content #ecard ol li input.text {width:15em;} #ecard .cardShadow, #ecard .content{position: relative;bottom: 4px;right: 4px;} #ecard .cardShadow {background-color:#d4b22b;} #ecard .content{background-color: #ffffff;padding:1em 1em 0 1em; background:#fff url(../imgs/logo_ecard.gif) 39em top no-repeat; border:1px solid #e3e1e1; min-height:250px; position:relative; margin-bottom:1em;} #ecard .content #text{margin-top:1em;} #ecard #previewCard{width:97%; margin:2em 0 0 1em;} #ecard #previewCard img{float:left; padding-right:1em;} #ecard span{font-weight:bold;} #ecard #previewCard p.last{position:absolute; bottom:0; left:5px;font-size:.9em;} #ecard span.error {float: left; clear: both; width: 90%; padding-bottom: 2em; color: #f00; font-size: 1.2em;} #ecard .tabForm span.error {margin: 0 0 0 12em; float: none; font-size: 1.1em;} /*################################################################################################## ################### PR RESULTS ################################################################ ##################################################################################################*/ .pr{ padding:7px 5px 3px 5px; } #pageBody #content .cms_wrapper .pr p{margin:.5em 0;} .pr.alternate{ } .pr a:link,.pr a:visited{ color:#000; font-size:1.2em;} /*################################################################################################## ################### COVEO RESULTS ################################################################ ##################################################################################################*/ #pageBody #content .coveoResults {margin:0;} #pageBody #content .coveoResults li {margin:0;padding:0;} #pageBody #content .coveoResults li.title{background: #DBC153 url(/imgs/tabSets/tabRepeatGeneric.jpg) left top repeat-x; margin-bottom: .8em;} .coveoResults li.title a {display: block; padding: .5em; font-size:1.2em; font-weight: bold;} .coveoResults li.title p {margin: 0; background: #fff; padding: .5em;} .coveoResults li.title p.summary {} .coveoResults li.title p.url {font-weight:normal; color:#666666; font-size:1.1em;} .coveoResults li.title div.buttonYellow{float:right;} #ucRehomingCentreSearchForm_panelForm .error {clear:both;}