/* NSPCC Zebra * global.css * Main site structure, used by all templates * Author: Stuart Barker * Date: 04-02-2008 * v.1.0*/ @import "fonts.css"; @import "reset.css"; @import "leftnav.css"; /* begin: sitewide components -----------------------------------------------------------------------------------------*/ a { color:#006adb; text-decoration:underline;} a.marker-1 { background:url(../img/bg_marker2.gif) top right no-repeat; color:#000; width: auto; text-decoration:none; margin: 0px; padding: 0px 10px 5px 1px;} a.marker-2 {} a.marker-3 {} a.marker-4 {} .hr {border:none; height:1px; border-top:1px solid #ccc; margin-top:16px; margin-bottom:6px ;overflow:hidden} .hr-big {height:4px; border:none; border-top:1px solid #ccc; background:#e2f4e8; margin-top:6px; margin-bottom:6px; overflow:hidden} .hr-big-events {height:4px; border:none; border-top:1px solid #ccc; background:#e2f4e8; margin-top:14px; margin-bottom:14px; overflow:hidden} img.left {float: left; margin: 0 10px 10px 0} input.text {border:1px solid #7f9db9; padding:2px} .content h2 {font-size: 2.4em; margin-bottom: 5px; } .content .col2 .col1 h3 {font-size:126%; padding:10px 0 7px 0; font-weight:bolder} /* H3 in the Center column - 14px */ .content .col2 .col2 h3 {font-size:120%; padding: 10px 0 5px 0; font-weight:bolder} /* H3 in the Right column - 16px */ .content h3 a {font-size: 110%; text-decoration:none} /* H3 Link in the Center column - 18px */ .content h3 a:hover {text-decoration:underline} .content h4 {font-size: 110%; font-weight:bolder; padding:5px 0 5px 0;} .content h4 a {font-size:130%; color:#006adb; text-decoration:none;} .content h4 a:hover{text-decoration:underline} .content .footlink {margin: 0px 0 17px 0; display:block; } .eventsRHS p, .vacanciesRHS p, .newsRHS h4 {padding-bottom:7px} .newsRHS h4 {margin-bottom:8px;} .content .col2 .col1 h3.ms-standardheader { font-size:1em;padding:0px;} /* end: sitewide components -----------------------------------------------------------------------------------------*/ /* begin: master layout -----------------------------------------------------------------------------------------*/ body {font-family:Arial, Helvetica, sans-serif; background-color:#fff} .container {width:735px;margin:0 auto; position:static; overflow:visible } /* Modified for IE6 in IE6.css */ .container .header-print {display:none;} .container .header{} .container .header .links{padding-top:13px; } .container .header .links a{ text-decoration:underline} .container .header .links li {float:left; padding:0 6px 0 6px;} .container .header .links .nspcc-links{float:left; overflow:hidden; margin-left:-6px } .container .header .links .nspcc-links li{ margin-left:-1px; border-left:1px solid #ccc;} .container .header .links .nspcc-links li a{} .container .header .links .account-links{float:right; overflow:hidden; margin-right:-8px } .container .header .links .account-links li{ margin-right:-1px; border-right:1px solid #ccc;} .container .header .links .account-links li a{} .container .header .promos{ padding-left:9px} .container .header .promos h3 a {color:#00ab39; font-size:104%; padding-bottom:5px; font-weight:bolder; text-decoration:none; } .container .header .promos p{ line-height:1.1em} .container .header .promos img {} .container .header .promos img.childline { float:left;margin-top:32px} .container .header .promos img.helpline {float:left;margin-top:23px} .container .header .promos div.childline{float:left; width:210px; padding:30px 20px 0pt 14px} .container .header .promos div.helpline{float:left; width:175px;; padding:30px 0 0 23px} .container .header .logo { margin-left:-59px; margin-top:-16px; position:relative; } /* Modified for IE7 in ie.css */ .container .header .nav1 {margin:-15px 0pt 0pt 7px; position:relative;} /* Modified for IE7 in ie.css */ .container .header .nav1 dt {display:none} .container .header .nav1 a { line-height:2.3em; display:block; color:#333; font-weight:bolder; border-top:solid 5px transparent; margin-right:20px; font-size:136%; text-decoration:none; } .container .header .nav1 dd {background:url(../img/bg_dd.gif) right center no-repeat;float:left;} .container .header .nav1 dd.last {background:none} .container .header .nav1 dd a:hover, .container .header .nav1 dd a:active, .container .header .nav1 dd a.on {color:#00AB39; border-top:solid 5px #00AB39;text-decoration:none;} .container .header .nav1 dd.blue a:hover, .container .header .nav1 dd.blue a:active, .container .header .nav1 dd.blue a.on {color:#006ADB; border-top:solid 5px #006ADB; text-decoration:none;} .container .header .nav1 dd.orange a:hover, .container .header .nav1 dd.orange a:active, .container .header .nav1 dd.orange a.on {color:#f67618; border-top:solid 5px #f67618; text-decoration:none;} .container .header .search { margin-left:-24px; font-size:110%; width:781px; position:relative} .container .header .search .left{float:left; background:url(../img/bg_search_left.gif) no-repeat; width:22px;height:40px; } .container .header .search-inner{float:left; background:#e3f7e8; width:737px ; min-height:35px; height:auto !important; height:35px; margin-top:4px } .container .header .search .right{float:left; background:url(../img/bg_search_right.gif) no-repeat; width:22px ; height:37px; margin-top:2px} .container .header .search label{ padding:8px 27px 0px 5px; margin-top:2px; float:left} .container .header .search input{ margin-top:7px; width:179px; float:left} .container .header .search a.go{margin:9px 0 0 9px; float:left; text-decoration:none} .container .header .search a.advanced{ float:right; text-decoration:underline; font-size:94%; margin-top:8px} .content .col2 .search-compact { padding-bottom: 10px; } .content .col2 .search-compact label{ padding:8px 27px 0px 5px; margin-top:2px; float:left} .content .col2 .search-compact input{ margin-top:7px; width:179px; float:left} .content .col2 .search-compact a.go{margin:9px 0 0 9px; float:left; text-decoration:none} .content .col2 .search-compact a.advanced{ float:right; text-decoration:underline; font-size:94%; margin-top:8px} .container .content { padding:22px 0 39px 0}/* <--sub templates in here */ .footer { background:#e2f4e8;} .footer-inner { width:735px; margin:0 auto; padding-bottom:35px;} /* Modified for IE6 in IE6.css */ .footer .lines{ float:left; width:204px; padding-top:3px; font-size:90%} .footer .lines h3{ color:#00ab39; font-weight:bolder; padding-top:15px } .footer .lines strong{ font-weight:bolder; font-size:136%; display:block; letter-spacing:0.07em} .footer .footnote { float:left; padding-top:16px; margin:0px; } .footer .footnote ul.links { overflow:hidden; margin-left:-6px; padding-bottom:20px; } .footer .footnote ul.links li { float:left; margin-left:-1px; border-left:1px solid #545454; padding:0 5px 0 5px; } .footer .footnote ul.links li a { color:#006adb; } .footer .footnote p { padding-top:20px; display:block; width:510px; font-size:85%; color:#545454} /* end: master template layout -----------------------------------------------------------------------------------------*/ /* Page Layout Options */ .noutility .header .links {display:none;} .notopnav .header .nav1 {display:none;} .nobreadcrumb .col2 .breadcrumb {display:none;} .nosearchbar .search {display:none;} /* End Page Layout Options */ /* begin: sub template layout -----------------------------------------------------------------------------------------*/ .col1 {float:left; width:168px; overflow:hidden;margin-right:35px; } .col2 {float:left; width:532px; overflow:hidden; } .col2 .col1 {float:left;width:348px;overflow:hidden; margin-right:20px; } .col2 .col2 {float:left;width:164px;padding-top:8px; overflow:hidden; } /* .home .col1 { display: none; } .home .col2 { width: 735px; } .home .col2 .col1 { display: block; width:367px; margin-right:20px; float:left; } .home .col2 .col2 { display: block; width:348px; float:left; } .colab .col1 { float:left; width:auto; overflow:hidden;margin-right:35px; } .colab .col2 { float:left; width:auto; overflow:hidden; } .colab .left-nav { width:168px; } .widepage .col1 { display: none; } .widepage .col2 { width: 735px; } .widepage .col2 .col1 { display: block; width:735px; margin-right:0px; overflow:visible; } .widepage .col2 .col2 { display: none; } .norighthand .col1 { float:left; width:auto; overflow:hidden;margin-right:35px; } .norighthand .col2 { width:532px; } .norighthand .col2 .col1 { display: block; width:532px; margin-right:0px; overflow:hidden; } .norighthand .col2 .col2 { display: none; } */ .s5050 .col1 { display: none; } .s5050 .col2 { width: 735px; } .s5050 .col2 .col1 { display: block; width:367px; margin-right:20px; float:left; } .s5050 .col2 .col2 { display: block; width:348px; float:left; } .mid .col1 { display: none; } .mid .col2 { width: 735px; } .mid .col2 .col1 { display: block; width:735px; margin-right:0px; overflow:visible; } .mid .col2 .col2 { display: none; } .lhnmid .col1 { float:left; width:auto; overflow:hidden;margin-right:35px; } .lhnmid .col2 { width:532px; } .lhnmid .col2 .col1 { display: block; width:532px; margin-right:0px; overflow:hidden; } .lhnmid .col2 .col2 { display: none; } /* end: sub template layout -----------------------------------------------------------------------------------------*/ /* begin: breadcrumbs -----------------------------------------------------------------------------------------*/ .breadcrumb {padding:0px 0 9px 6px; margin-bottom:3px; border-bottom: solid 1px #acafa7; font-size: 0.9em; } .breadcrumb li {float: left; padding-right: 5px;} .breadcrumb li.thispage {font-weight: bold;} /* end: breadcrumbs -----------------------------------------------------------------------------------------*/ /* begin: panels -----------------------------------------------------------------------------------------*/ /* begin: outline */ .p-outline {padding-bottom: 12px;} .p-outline .tl { float:left; width:10px; height:10px; background:url(../img/panels/outline_tl.gif) no-repeat; overflow:hidden} .p-outline .tm { float:left; border-top:5px solid #e2f4e8; height:5px; overflow:hidden;} .p-outline .tr { float:right; width:10px; height:10px; background:url(../img/panels/outline_tr.gif) no-repeat; overflow:hidden} .p-outline .mid { border-left:5px solid #e2f4e8; border-right:5px solid #e2f4e8; padding:0 10px 10px 10px; overflow:hidden; } .p-outline .bl { float:left; width:10px; height:10px; background:url(../img/panels/outline_bl.gif) no-repeat; overflow:hidden} .p-outline .bm { float:left; border-bottom:5px solid #e2f4e8; height:5px; overflow:hidden;} .p-outline .br { float:right; width:10px; height:10px; background:url(../img/panels/outline_br.gif) no-repeat; overflow:hidden} /*set up widths based on placement */ .content .col2 .col2 .p-outline .tm, .content .col2 .col2 .p-outline .bm {width:144px} .s5050 .content .col2 .col2 .p-outline .tm, .s5050 .content .col2 .col2 .p-outline .bm, .content .col2 .col1 .p-outline .tm, .content .col2 .col1 .p-outline .bm {width:328px} /* end: outline */ /* begin: solid */ .p-solid {margin-bottom:19px} .s5050 .col2 .co11 .p-solid {} .s5050 .col2 .col2 .p-solid-top {background:url(../img/panels/solid_beige_1_top.gif) no-repeat; height:25px} .s5050 .col2 .col2 .p-solid-mid {background:#ffebdc; width:342px; margin:-15px 0 0px 3px; position:relative} .s5050 .col2 .col2 .p-solid-bot { background:url(../img/panels/solid_beige_1_bot.gif) no-repeat bottom; height:20px; margin-top:-14px} /* end: solid */ /* end: panels -----------------------------------------------------------------------------------------*/ /* begin: form -----------------------------------------------------------------------------------------*/ .p-form .p-form-top { background:url(../img/panels/form_1_top.gif) top left no-repeat; height:22px;} .p-form .p-form-mid { background:url(../img/panels/form_1_mid.gif) repeat-y; padding:6px 25px 0pt 25px;} .p-form .p-form-bot { background:url(../img/panels/form_1_bot.gif) top left no-repeat; height:22px;} .p-form-vol .p-form-top { background:url(../img/panels/form_home_top.gif) top left no-repeat; height:22px;} .p-form-vol .p-form-mid { background:url(../img/panels/form_home_mid.gif) repeat-y; padding:6px 25px 0pt 25px;} .p-form-vol .p-form-bot { background:url(../img/panels/form_home_bot.gif) top left no-repeat; height:22px;margin-top:-10px;} .content .col1 .p-form {margin-top:0px;} .content .col1 .p-form p {padding:3px 0 11px 0; margin: 0px;} .content .col1 .p-form .go {float:left; width:20px; font-size:136%; text-decoration:none} .content .col1 .p-form label {font-weight:bolder; font-size: 110%; } .content .col1 .p-form .postcode {padding-bottom:8px} .content .col1 .p-form .postcode label { float:left; margin-top:5px} .content .col1 .p-form .postcode input { width:54px; margin-left:15px; float:left} .content .col1 .p-form .postcode select { float:left; margin:0px 8px 0pt 8px; width:100px} .content .col1 .p-form .area label {float:left; margin:9px 28px 0px 0px} .content .col1 .p-form .area select {float:left; width:185px; margin-top:4px} .content .col1 .p-form .branch {padding-bottom:10px} .content .col1 .p-form .branch label {float:left;margin:16px 10px 10px 0px} .content .col1 .p-form .branch select {float:left; width:185px; margin-top:11px} .content .col1 .p-form .branch .go { margin:11px 0 0 8px} .content .col1 .p-form { margin-bottom: 10px; } .content .col1 .p-form ol { width: 100%; padding: 0px; margin: 0px; } .content .col1 .p-form ol li { float: none; margin: 0px 0 12px 0; } .content .col1 .p-form ol li.left { float: left; } .content .col1 .p-form ol li label { display:block; padding-bottom: 5px; margin: 0px 5px 0px 0; } .content .col1 .p-form ol li input { } .content .col1 .p-form ol li input.text { width: 100px;} .content .col1 .p-form ol li input.submit { font-size:136%; text-decoration:none; border: 0px; background: none; cursor: pointer; color:#006adb; font-weight: bold; margin: 20px 0 0 8px; display:block; position:relative;} .content .col1 .p-form ol.postcode { padding-bottom: 0px; margin-bottom: 0px;} .content .col1 .p-form ol.postcode li label { float:left; margin-top: 2px;} .content .col1 .p-form ol.postcode li input.submit { margin: 0 0 0 3px; } .content .col1 .p-form .findevent { margin-bottom: 10px; } .content .col1 .p-form .findevent ol li { float: left; margin: 5px 40px 5px 0; } .content .col1 .p-form .findevent ol li label {display:block; padding-bottom: 5px;} .content .col1 .p-form .findevent ol li .go { margin: 22px 0 0 -22px; display:block; position:relative; font-weight: bold; } .content .col1 .p-form .searchdiscussion p { margin-bottom:0px; padding-bottom:0px; } .content .col1 .p-form .searchdiscussion ol li input.submit { margin: 0 0 0 3px; } /* end: form -----------------------------------------------------------------------------------------*/ /* Begin pages ----------------------------------------------------------------------------------------- */ /* Begin: Specific content based styles */ .container p { margin-bottom: 10px; } .container div.pullquote { margin: 5px 5px 5px 0; font-size: 110%;} .container ul.documents { margin: 10px 0 15px 0px; padding:0px;} .container ul.documents li { margin: 10px 0 4px 0px; padding: 2px 0 7px 33px; background: top left no-repeat; background-image:url(../img/li-documenticon.gif); } .container ul.documents li.pdf { background-image:url(/_layouts/images/icpdf.gif); } .container ul.documents li.doc { background-image:url(/_layouts/images/icdoc.gif); } .container ul.documents li.xls { background-image:url(/_layouts/images/icxls.gif); } .container .content .col2 .eventinfo { float:right; margin:0 0 15px 15px; } .container .content .col2 .eventinfo .img { margin:0 0 15px 15px; } .pageselector { margin: 8px 0 0 0; } .pageselector .pagenumbers { float: left; } .pageselector .pageselect { float: right; } /* Begin: End specific content based styles */ /* Begin: Home page */ .s5050 .content h3 {font-size: 112%; font-weight:bolder; padding-top:10px;} .s5050 .content h4 a { padding-top:10px;} .s5050 .content .col2 .col1 .hero h3 { font-size: 2.4em; font-weight:normal; padding:5px 31px 6px 0;} .s5050 .content .col2 .col1 .hero h4 { padding:10px 0 10px 0; } .s5050 .content .col2 .col1 .hero p { font-size:135%; padding:0 31px 0 0; } .s5050 .content .col2 .col1 .hero .view-all{ font-size:151%; line-height:1.4em; text-decoration:none} .s5050 .content .col2 .col1 .hero .view-all:hover {text-decoration:underline} .s5050 .content .col2 .col1 .successfulEvents { padding:0px 0 2px 0; width:338px; } .s5050 .content .col2 .col1 .successfulEvents h4 { padding-top: 0px; padding-bottom: 7px; } .s5050 .content .col2 .col1 .successfulEvents p { display: block; line-height:1.1em; } .s5050 .content .col2 .col1 .successfulEvents p a { margin:0 0 15px 0; padding: 0px 10px 5px 1px; background:url(../img/bg_marker2.gif) top right no-repeat; color:#000; font-size:135%; text-decoration:none; } .s5050 .content .col2 .col1 .successfulEvents a img {float:left; margin:0 18px 15px 0; padding: 0px; width: 123px; height: 124px;} .s5050 .content .col2 .col1 .successfulEvents hr { clear:both; display: block; position:relative; width: 367px; height: 1px; border:0px; background-color: #CCCCCC; margin: 20px 0 10px 0; color: #808080; } /* Modified for IE in IE.css */ .s5050 .content .col2 .col1 .previous {display:block; clear:left; margin-bottom:17px; } .s5050 .content .col2 .col1 .discussions { margin:11px 0pt 6px 2px } .s5050 .content .col2 .col1 .discussions a.larger { color:#006adb;font-size:130%; font-weight: bolder; display:inline; text-decoration:none} .s5050 .content .col2 .col1 .discussions a.larger:hover { text-decoration:underline} .s5050 .content .col2 .col1 .discussions .tm, .s5050 .content .col2 .col1 .discussions .bm {width:345px;} .s5050 .content .col2 .col1 .p-form {margin-top: 20px;} .s5050 .content .col2 .col1 .p-form .p-form-top { background:url(../img/panels/form_home_top.gif) top left no-repeat; height:22px;} .s5050 .content .col2 .col1 .p-form .p-form-mid { background:url(../img/panels/form_home_mid.gif) repeat-y; padding:8px 30px 0pt 32px;} .s5050 .content .col2 .col1 .p-form .p-form-bot { background:url(../img/panels/form_home_bot.gif) top left no-repeat; height:22px;} .s5050 .content .col2 .col2 .p-solid img { float:left; margin:2px 4px 0 12px} .s5050 .content .col2 .col2 .p-solid .txt {float:left; width:210px; padding:4px 0 10px} .s5050 .content .col2 .col2 .p-solid .txt p {margin-bottom:4px; padding-top:4px} .s5050 .content .col2 .col2 .p-outline { margin-bottom:0px } .s5050 .content .col2 .col2 .p-outline .mid { padding-bottom:0px } .s5050 .content .col2 .col2 .p-outline .pullquotehome { margin-top:0px } .s5050 .content .col2 .col2 .p-outline .pullquotehome div { float:left; display: block; margin-left: 3px;} .s5050 .content .col2 .col2 .p-outline .pullquotehome div img { display: block; margin:5px 32px 0pt 0px; } .s5050 .content .col2 .col2 .p-outline .pullquotehome div span { display: block; width: 150px; font-size:85%; padding:9px 0 5px 0 } .s5050 .content .col2 .col2 .p-outline .pullquotehome p { display: block; font-size: 110%; padding: 5px 0 5px 0; } .s5050 .content .col2 .col2 .p-outline .pullquotehome p img { padding:9px 3px 3px 0; } .s5050 .content .col2 .col2 .item {padding-bottom:10px} .s5050 .content .footlink { padding-top: 8px; } /* End: Home page */ /* General table */ .content .col2 .col1 table.prettytable {margin:10px 0 7px;} .content .col2 .col1 table.prettytable th, .content .col2 .col1 table.prettytable td{} .content .col2 .col1 table.prettytable th .box { position:relative; background:#f0f9f3; border:1px solid #e2f4e8; margin-right:4px; padding:4px 4px 4px 13px; } .content .col2 .col1 table.prettytable th .tl { position:absolute; background: url(../img/bg_th_tl.gif) no-repeat; ;top:-1px;left:-1px; width:20px; height:20px;} .content .col2 .col1 table.prettytable th .tr { position:absolute; background: url(../img/bg_th_tr.gif) no-repeat;top:-1px;right:-1px; width:2px; height:2px} .content .col2 .col1 table.prettytable th .bl { position:absolute; background: url(../img/bg_th_bl.gif) no-repeat;bottom:-1px; left:-1px; width:2px; height:2px} .content .col2 .col1 table.prettytable th .br { position:absolute; background: url(../img/bg_th_br.gif) no-repeat; bottom:-1px; right:-1px; width:2px; height:2px} .content .col2 .col1 table.prettytable td a { font-weight: bolder; text-decoration:none} .content .col2 .col1 table.prettytable td a:hover {text-decoration:underline} .content .col2 .col1 table.prettytable td {border-bottom:1px solid #ccc; padding:8px 5px 12px 15px} /* End: General table */ /* 1.0 begin News */ .newscol { padding-top:0px; overflow:hidden; } .newscol .item {float:left; width:166px;} .newscol .left {margin-right: 15px;} .newscol p { margin-top: 10px; } /* End: 1.0 begin News */ /* 2.0 Volunteer Network */ .menuitem img { float: left; margin: 12px 18px 10px 0; } .menuitem img { } /* 2.0 End of Volunteer Network */ /* 2.3 Branches */ .branches { padding: 15px 0 10px 0; } .branches img { float:left; padding: 0 20px 15px 0; } /* End: 2.3.1 Branch page */ /* 2.3.1 Branch page */ .branchinfo img { float:left; margin:0 18px 10px 0; } table.members { margin:0px 0 7px; width: 100%;} table.members th {padding:5px 5px 5px 0px; font-weight: bold; font-size: 1.1em; } table.members td {border-top:1px solid #ccc; padding:5px 5px 5px 0px; } ul.districtinfo { margin-top: 6px; } ul.districtinfo li { margin-bottom: 20px;} ul.districtinfo li h4 { margin:0 0 2px 0; padding:0px;} ul.districtinfo li h4 a { font-size: 100%; color: #000000; } ul.districtinfo li p { margin:0 0 2px 0; padding:0px;} ul.districtinfo li p span { margin:0 10px 0 0; padding:0px;} .noticeboard ol { margin: 10px 0 15px 0px; padding:0px; } .noticeboard ol li { margin: 10px 0 4px 0px; padding: 2px 0 7px 33px; background: top left no-repeat; background-image:url(../img/li-documenticon.gif); background-position: 2px 10px; } /* End: 2.3.1 Branch page */ /* 4.1 Upcoming Events */ .event { } .event img { float:left; margin: 4px 10px 10px 0; width: 165px; height: 165px;} .event ul { border-top: 1px #E2F4E8 solid; background-color: #F0F9F3; margin-top: 15px; clear:both; } .event ul li { float:left; padding: 6px 10px 7px 10px; } /* End: 4.1 Upcoming Events */ /* 5.0 begin discussions */ .discussions {margin-right:-16px; padding-top:0px; overflow:hidden} .discussions h3 {padding-top:13px; padding-bottom:8px; } .discussions .item {float:left; width:165px; margin-right:16px; padding-bottom:20px;} .discussions .item p{padding:10px 0 0px 0} /* End: 5.0 begin discussions */ /* 5.1 Discussion topics */ .discussTopicHdr { display: block; } .discussTopicHdr p { float: right; padding-right: 30px; } .discussTopicHdr p.pageselect { padding-right: 0px; } table.topics {margin:10px 0 0px 0; border-bottom: 2px solid #FFFFFF; } table.topics col.column1 { width: 150px; } table.topics col.column2 { width: 197px; } /* Amended for IE in ie.css */ table.topics col.column3 { width: 110px; } table.topics col.column4 { width: 75px; } /* Amended for IE in ie.css */ table.topics th { } table.topics th .box { position:relative; background:#f0f9f3; border:1px solid #e2f4e8; margin-right:4px; padding:4px 4px 4px 13px; } table.topics th .tl { position:absolute; background: url(../img/bg_th_tl.gif) no-repeat; ;top:-1px;left:-1px; width:20px; height:20px;} table.topics th .tr { position:absolute; background: url(../img/bg_th_tr.gif) no-repeat;top:-1px;right:-1px; width:2px; height:2px} table.topics th .bl { position:absolute; background: url(../img/bg_th_bl.gif) no-repeat;bottom:-1px; left:-1px; width:2px; height:2px} table.topics th .br { position:absolute; background: url(../img/bg_th_br.gif) no-repeat; bottom:-1px; right:-1px; width:2px; height:2px} table.topics td a { font-size:126%; font-weight: bolder; text-decoration:none} table.topics td a:hover {text-decoration:underline} table.topics td {border-bottom:1px solid #ccc; padding:8px 5px 8px 14px; vertical-align:top; } table.topics td.column4 { font-size:126%; vertical-align: middle; font-weight: bold; } /* End: 5.1 Discussion topics */ /* 5.1.1 Discussion thread */ /* Note that in this section in order to make the background on each list element in the discussion thread fill the width of the containing UL, each UL is moved a large degree to the left, and then the LI's are pushed using padding back to the right + 20px. The large displacement is to account for deep recursion within the list, i.e. for a discussion comments 1st reply you would only need to shift the LI's by 20px, 2nd reply by 40px, 3rd reply 60px, etc. 210 would account for the recursion to go 10 levels deep ( minus 10px for an initial margin ). Any number smaller than this in the 10th iteration would display that UL's background to the left of the LI's within it. */ .discussThreadHdr { background-color: #F2FBF4; padding: 5px 10px 5px 10px; margin-top: -3px;} .discussThreadHdr p { float: left; } .discussThreadHdr p.alert { float: right; display: block; } .discussThreadHdr p.alert input { margin-bottom: 2px; } /* Modified for IE in IE.css */ .discussThreadHdr p.alert label { padding-left: 5px; } .discussThreadBody { border-top: 1px solid #CCCCCC; } .discussThreadBody ul.start { margin-left: 0px; padding-left: 0px; border-top: 4px solid #E2F4E8; } .discussThreadBody ul { margin-left: -210px; padding-left: 0px; } .discussThreadBody ul li { padding: 15px 0px 8px 230px; } .discussThreadBody ul li.start { padding-left: 10px; margin-left: 0px;} .discussThreadBody ul li.odd { background-color: #F2FBF4; } .discussThreadBody ul li.even { background-color: #FFFFFF; } .discussThreadBody ul li p { } .discussThreadBody ul li p.commentInfo { float: left; color: #6B6B6B; } .discussThreadBody ul li p.reply { float: right; padding-right: 10px;} .discussThreadBody ul li div.comment { width: 68%; padding-top: 10px;} .discussThreadBody ul li p.report { float: right; margin-top: -28px; padding-right: 10px;} .discussThreadBody ul li p.quoted { font-style:italic; } .discussThreadBody ul li p.quoted span { color: #6B6B6B;} /* End: 5.1.1 Discussion thread */ /*End: pages ----------------------------------------------------------------------------------------- */ /* Edit mode hidden fields panel */ .editHiddenFields { background:#e2f4e8; } /* End Edit mode hidden fields panel */ /* generic content */ .generic { padding: 15px 0 10px 0; } .generic img { float:left; padding: 0 20px 15px 0; } /* End: generic content */ /*** GENERIC CLASSES & MISCELLANY ***/ /*clear fix taken and adapted from http://www.positioniseverything.net/easyclearing.html */ /* alternative version - try it out, if it doesn't work, revert back to the previous version */ .cf:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} .cf {height:1%;display:block;} .lbl-hidden { position:absolute;top:-1000px; left:-1000px; z-index:-1}/* takes it out of flow */ .lbl-invisible { visibility:hidden;} /*leaves in flow for spacing */ .content .col2 .col1 .pageContent ul, .content .col2 .col1 .pageContent ol{margin:20px; padding:0px; background-image:none;} .content .col2 .col1 .pageContent ul li{list-style:disc; margin:5px; padding:0px;} .content .col2 .col1 .pageContent ol li{ list-style:decimal; margin:10px; padding:0px;} /* Registration and Profile forms */ .form-container .coloured-background {padding:17px;background-color:#E2F4E8;} .form-container table {width:100%;} .form-container th {width:150px;font-weight:normal;padding-bottom:10px;vertical-align:top;} .form-container td {padding-bottom:10px;vertical-align:top;} .form-container td.error {padding-bottom:10px;font-weight:bold;} .form-container .textboxwide {width:260px;} .form-container .button-container {padding:20px;text-align:center;} .form-container .message {color: #007f00;} .form-container .error {color: #ff0000;} .form-container .message ul {margin: 5px 0px 15px 20px;} .form-container .message ul li {list-style-type:disc;} .form-container div.message {padding: 10px 0px;} .form-container .formseparator {font-size:5px;} /* End Registration and Profile forms */ /* MY NSPCC begin: panels -----------------------------------------------------------------------------------------*/ /* begin: outline */ /*Initialise panel outlines to fix in IE6 */ .p-for-volunteers-top, .p-for-donors-top, .p-thinking-top { font-size: 1px; line-height: 0em; } /* The Volunteers and Donors colour boxes in the Left Hand Column */ .p-colourbox { width: 367px; } .p-colourbox-top { width: 367px; height: 10px; display: block; font-size: 1px; line-height: 0.1em;} .p-colourbox-body { width: 337px; min-height:185px; height:auto !important; height:185px; padding: 5px 10px 1px 20px; } .p-colourbox-body h3 { font-weight: bolder; padding-bottom: 10px; font-size: 1.7em;} .p-colourbox-body img { float:left; padding-right: 18px; margin: 0px; width: 124px; height:123px; } .p-colourbox-body div img { float:inherit; padding:inherit; margin:inherit; width:auto; height:auto; } .p-colourbox-body p { margin-bottom: 0px; padding-bottom: 10px; } .p-colourbox-body p.p-signin { clear:both; display: block; padding-top: 15px; padding-bottom: 20px; } /* Amended for IE in explorer.css */ .volunteers .p-colourbox-top { background:url(../img/panels/p-for-volunteers-top.gif) top left no-repeat; } .volunteers .p-colourbox-body { background:url(../img/panels/p-for-volunteers-bottom.gif) bottom left no-repeat; } .content .col2 .col1 .volunteers .p-colourbox-body h3 { font-size:160%; color: #F67618; } .donors { margin-top: 20px; } .donors .p-colourbox-top { background:url(../img/panels/p-for-donors-top.gif) top left no-repeat; } .donors .p-colourbox-body { background:url(../img/panels/p-for-donors-bottom.gif) bottom left no-repeat; } .content .col2 .col1 .donors .p-colourbox-body h3 {font-size:160%; color: #006ADB; } /* The girl-with-the-hand box in the Right Hand Column */ .p-thinking { width: 348px; } /* Amended for IE6 in ie6.css */ .p-thinking-top { background:url(../img/panels/p-thinking-top.gif) top left no-repeat; width: 362px; height: 14px; } .p-thinking-body { background:url(../img/panels/p-thinking-bottom.jpg) bottom left no-repeat; width: 292px; min-height:372px; height:auto !important; height:372px; padding: 15px 40px 30px 30px; } .content .col2 .col2 .p-thinking .p-thinking-body h3 { color: #000000; font-weight:bolder; padding-bottom: 13px; font-size: 140%; } .p-thinking img { float:left; padding-right: 18px; padding-bottom: 18px;} .p-thinking p { } .p-thinking p.squashed { width: 160px; } .p-thinking ul { list-style-position: inside; padding-bottom: 10px; } .p-thinking ul li {list-style-position: inside; padding-bottom: 10px; list-style-image: url(../img/li-greenswirl.gif); display: list-item; } /* begin: form -----------------------------------------------------------------------------------------*/ fieldset.signin { padding:0;margin:0px; border: 0px;} fieldset.signin legend { display:none; } fieldset.signin ol li{ list-style-type:none; padding:10px 0 0 0;} fieldset.signin ol li label { display: block; padding-bottom: 3px;} fieldset.signin ol li input { display: block; } /* end: form -----------------------------------------------------------------------------------------*/ hr.green-3px { margin: 20px 0 20px 0; border: 0px; color: #D9EEE0; height: 3px; width: 100%; background-color: #D9EEE0;} fieldset { padding:0;margin:0px; border: 0px;} fieldset legend { display:none; } fieldset ol li{ list-style-type:none; padding:3px 0;} .intro-text { display: block; width: 735px; font-size: 140%; padding: 0px 40px 10px 0px; margin-bottom: 0px; } .intro-text p { padding: 20px 40px 20px 0px; margin-bottom: 0px; } .content .col2 .col1 .latest-initiatives { padding-left: 20px; } .content .col2 .col1 .latest-initiatives .item { clear:both; padding-bottom: 5px; } .content .col2 .col1 .latest-initiatives h3 { font-size: 170%; font-weight: bold; color: #000000; padding-bottom: 10px; } .content .col2 .col1 .latest-initiatives .item h4 {font-size: 180%; font-weight: normal; padding-bottom: 15px; } .content .col2 .col1 .latest-initiatives .item h4 a {font-size: 100%; color: #000000; text-decoration:none; } .content .col2 .col1 .latest-initiatives .item h4 a:hover { text-decoration: underline; } .content .col2 .col1 .latest-initiatives .item img { clear: left; float:left; padding-right: 0px; width: 124px; height:123px;} .content .col2 .col1 .latest-initiatives .item p { float: right; margin-bottom: 15px; width: 200px;} /* HIGHLIGHTER-PEN LINKS */ .content .col2 .col1 .latest-initiatives ul { position:relative; float: right; display:block; left:-18px; list-style-type:none; padding: 0px; margin:0 0 21px 0px; width: 200px; } .content .col2 .col1 .latest-initiatives ul li, .latest-initiatives ul li a { display:inline; } .content .col2 .col1 .latest-initiatives ul li {background:url(../img/bg_hl_left_green.gif) no-repeat left; list-style-type:none; margin: 0px 0px 3px 0px; padding: 0px;} .content .col2 .col1 .latest-initiatives ul li a {background:url(../img/bg_hl_right_green.gif) no-repeat right; font-size:1.4em; text-decoration:none; font-weight: bold; color:#000; padding: 3px 15px 8px 0px; margin:0px 0px 0px 6px;} /* MY NSPCC end: panels -----------------------------------------------------------------------------------------*/