/* @override http://www.trustforlondon.org.uk/css/screen.css */ /* * Trust for London new site 2010 * http://www.trustforlondon.org.uk * screen.css */ /* @group Base ------------------------------------------------------------ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline} :focus {outline:0} html {background:#fff; color:#000} body {line-height:1; font-family:"HelveticaNeue", "Helvetica 55", Helvetica, Arial; font-size: 100%; margin:0 auto; width:944px; position:relative} a#skip {position: absolute; left: -1000em; width: 20em;} /* @group Headings ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 {font-weight:regular; line-height:1.4em; color:rgb(0,120,174); clear:left} /* @end */ /* @group Text Formatting ------------------------------------------------------------ */ p {font-size:0.8em; line-height:1.4em;margin-bottom:10px} strong {font-weight:bold} em {font-style:italic} ul {margin-left:15px;} li {font-size:0.8em; line-height:1.4em;margin-bottom:10px} /* @end */ /* @group Quotes ------------------------------------------------------------ */ blockquote:before, blockquote:after, q:before, q:after {content:""} blockquote, q {quotes:"" ""} /* @end */ /* @group Links ------------------------------------------------------------ */ a {color:rgb(0,120,174); text-decoration:none;} a:visited {color:rgb(0,120,174)} a:hover {color:#000;-webkit-transition:color 0.3s ease-in-out} a:active {} /* @end */ /* @group Lists ------------------------------------------------------------ */ ol {list-style:decimal} ul {list-style:disc} ol, ul {} /* @end */ /* @group Tables ------------------------------------------------------------ */ /* Tables need 'cellspacing="0"' on markup */ table {border-collapse:collapse; border-spacing:0; margin:0} caption, th, td {text-align:left; font-weight:normal; padding:7px 3px; font-size:0.8em; line-height:1.2em} th {border-bottom:solid 2px #ccc; font-weight:bold;font-size:0.8em;} td {font-size:0.8em;} /* @end */ /* @group Forms ------------------------------------------------------------ */ form {border-collapse:separate; border-spacing:0} legend {text-align:left; font-weight:normal} /* @end */ /* @end */ /* @group Helper ------------------------------------------------------------ */ .clearfix:after {content:"."; display:block; clear:both; height:0; visibility:hidden} .rss {padding-left:30px; background:transparent url(../img/ui/rss.png) no-repeat 5px 5px} /* @group Image Replacement ------------------------------------------------------------ */ .img-replace {position:relative; display:block} .img-replace span {position:absolute; left:0; top:0; width:100%; height:100%; z-index:100; display:block; background-repeat:no-repeat; backgound-position:0 0} a.img-replace span, .img-replace a span {cursor:pointer} /* @end */ /* @end */ /* @group Forms ------------------------------------------------------------ */ /* @end */ /* @group Structure ------------------------------------------------------------ */ /* @group Header ------------------------------------------------------------ */ #header {position:relative; height:175px; border-left:1px solid rgb(180,180,180); border-right:1px solid rgb(180,180,180); background:url(../img/header-background.png) 0 0 no-repeat} /* @group Branding ------------------------------------------------------------ */ #header h1 {position:absolute; left:700px; top:10px} #header h1 a {width:220px; height:100px;display: block; text-indent:-9999px} #header h1 a span {} /* @end */ /* @group Search ------------------------------------------------------------ */ #header form {margin-left:20px; padding-top:25px;} #header form label {display:none;} #search-btn {background-color: rgb(0,120,174); cursor: pointer; border: none; color: #ffffff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;} #search-btn:Hover {background-color: #ffffff; cursor: pointer; border: none; color: #000000; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px; -webkit-transition-property:color, background; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: ease-in, ease-in;} /* @end */ /* @group Breadcrumb ------------------------------------------------------------ */ ul#breadcrumb {list-style-type:none; font-size:0.9em; line-height:1.2em; margin-left:20px; color:#fff;margin-top:80px} ul#breadcrumb li, ul#breadcrumb a {float:left; display:inline; margin:0} ul#breadcrumb li {} ul#breadcrumb li a {color:#fff; text-decoration:none} ul#breadcrumb li a:hover {} /* @end */ /* @end */ /* @group Content ------------------------------------------------------------ */ #content {border-left:1px solid rgb(180,180,180); border-right:1px solid rgb(180,180,180);clear:both;} /* @group Nav ------------------------------------------------------------ */ #nav {width:211px; float:left; margin-left:20px;padding-bottom:20px;} #nav ul {list-style:none;} #nav li {list-style:none;font-weight:normal;font-size:0.8em;line-height:1.2em;margin:0;display:block;} #nav li a {background: transparent;display:block;padding:7px;padding-left:10px;text-decoration:none;color:#000;} #nav li a:hover {background: rgb(0,120,174); color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px; -webkit-transition-property:color, background; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: ease-in, ease-in;} #nav li li {font-size:1em;line-height:1.2em;} #nav li li li {font-size:1em;line-height:1.2em; margin-bottom:0px;} #nav li.active, #nav li.subactive, #nav li.subsubactive {font-weight:bold;color:rgb(229,241,247);} #nav li.active {background: rgb(0,120,174); color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;} #nav li.active a {color:#fff;background: transparent;padding-bottom:5px;} #nav li.active ul {margin-left:0;margin-top:0;padding-bottom:5px;padding-top:10px;background:rgb(229,241,247); margin-bottom: 15px;} #nav li.active ul li a {color:#000;padding:0;display:block;padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:3px;margin-bottom:5px;} /* not sure if I needboth versions here #nav li.active ul li a::before {content: "\2013\0020";display:inline;} */ #nav li.active ul li a:before {content: "\2013\0020";display:inline;} #nav li.active ul li.subactive a {color:rgb(0,120,174);} #nav li.active ul li.subactive a:hover {color:#fff;} #nav li.active ul li a:hover {background: rgb(0,120,174); color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;} #nav li.active ul li.subactive ul {margin-left:0;margin-top:0;margin-bottom:0; padding-top:0;background:rgb(229,241,247);} #nav li.active ul li ul li a {color:#000;padding-left:30px;margin-bottom:0;} #nav li.active ul li ul li a:before {content:"";} #nav li.active ul li.subactive ul li a {color:#000;} #nav li.active ul li.subactive ul li.subsubactive a {color:rgb(0,120,174);} #nav li.active ul li.subactive ul li.subsubactive a:hover {color:#fff} /* @end */ /* @group Primary ------------------------------------------------------------ */ #primary {width:519px; float:left; margin-left:20px; padding-bottom:20px} #primary h1 {font-size:1.6em; margin-bottom:20px;} #primary h2 {font-size:1.1em; margin-top:25px; margin-bottom:3px;} #primary h3 {font-size:0.9em; margin-top:15px;} #primary h4 {font-size:0.9em; margin-top:15px;color:#000;} #primary table.logo {margin-top:20px;} #primary table.logo th {display:none;} #primary table.logo td {border-top:1px solid rgb(180,180,180);border-bottom:1px solid rgb(180,180,180);padding-left:5px;padding-right:10px;} #primary table.logo td a {display:block;margin-bottom:0px;padding-bottom:0;} #primary table.logo td img {margin-bottom:10px;} #primary p.backtotop {font-size:0.7em;margin-bottom:20px;;} /* @end */ /* @group Secondary ------------------------------------------------------------ */ #secondary {width:134px; float:left; margin-left: 20px; padding-top:50px} /* @end */ /* @end */ /* @group Footer ------------------------------------------------------------ */ #footer {padding-top:15px; padding-bottom:10px; background-color: rgb(76,160,198); -moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px; clear:both;} #footer p {font-size:0.7em; line-height:1.2em; margin-left:20px; color:#fff;} #footer a {color:#fff} #footer a:hover {color: #000000;} p#credit {margin-top:10px; margin-left:20px; font-size:0.7em;line-height:1.2em;color:rgb(200,200,200);} p#credit a {color:rgb(200,200,200);} p#credit a:hover {} /* @end */ /* @end */ /* @group Specifics ------------------------------------------------------------ */ /* @group Home ------------------------------------------------------------ */ body.home #primary {width:442px;} body.home #primary h1 {display:block; background:rgb(0,120,174); color:#fff; padding-left:10px;padding-top:5px;margin-bottom:0;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;} body.home #primary img {margin-bottom:10px;} body.home #primary #primary1st {width:211px; float:left; background:rgb(0,120,174);-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;} body.home #primary #primary1st p {color:#fff;padding:10px;padding-bottom:5px;} body.home #primary #primary2nd {width:211px; float:right;} body.home #primary #primary2nd h2 {margin-top:0;margin-bottom:10px;} body.home #primary #primary2nd h3 {color: #000; font-size:0.8em;font-weight:normal;margin-top:0;margin-bottom:10px;} body.home #primary #primary2nd h3 a {text-decoration:none;} body.home #primary #primary2nd p a {color:#000;} body.home #primary #primary2nd p a:hover {color:rgb(0,120,174);} body.home #secondary {width:211px;padding-top:0;} body.home #secondary .homehighlight {background:rgb(229,241,247);-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;padding:10px;margin-bottom:10px;} body.home #secondary .homehighlight h3 {margin-bottom:10px;} body.home #secondary .homehighlight h3 a {text-decoration:none;} body.home #secondary .homehighlight p {margin-bottom:0;} body.home #secondary .green {background:rgb(85,118,48); color:#fff;} body.home #secondary .purple {background:rgb(110,38,123); color:#fff;} body.home #secondary .red {background:rgb(205,32,44); color:#fff;} body.home #secondary .red a, body.home #secondary .red h3 a, body.home #secondary .green a, body.home #secondary .green h3 a, body.home #secondary .purple a, body.home #secondary .purple h3 a {color:#fff;} body.home #secondary .red h3 a:hover, body.home #secondary .purple h3 a:hover, body.home #secondary .green h3 a:hover {color:#000;-webkit-transition:color 0.3s ease-in-out} /* Home Image Scrollable */ #home_image_scrollable { position: relative; overflow: hidden; width: 442px; height: 245px; margin: 0 0 10px 0; } #home_image_scrollable #item_wrap { position: absolute; width: 2000em; } #home_image_scrollable .panel { float: left; } /* @end */ /* @group Entry Listing ------------------------------------------------------------ */ /* box for stying around scrollable */ #highlighted_outer { width: 100%; border-top: 1px solid rgb(180,180,180); border-bottom: 1px solid rgb(180,180,180); position: relative; } /* Highlighted Scrollable Mandatory Divs */ #highlighted_scrollable { position: relative; overflow: hidden; width: 462px; height: 330px; padding-top:15px; margin: 0 0 0 30px; } #highlighted_item_wrap { position: absolute; width: 2000em; } .highlighted_panel { float: left; } /* Highlighted entry styling */ .highlighted_entry { float: left; width: 134px; margin: 0 10px; } .highlighted_entry h2 { font-size: 0.8em!important; margin-top: 5px!important; color: #000; font-weight: bold; } .highlighted_entry h2 a {color:#000;text-decoration:none;} .highlighted_thumb { width: 134px; height: 200px} .highlighted_thumb img {width: 134px} .highlighted_body { display: none; } /* scrollable arrows */ .arrows { background: url(../img/arrows.png) no-repeat; position: absolute; width: 18px; height: 18px; cursor: pointer; display: block; } #scroll_left_arrow { top: 15px; left: 0; } #scroll_left_arrow:hover { background-position: 0 -18px; } #scroll_right_arrow { top: 15px; right: 0; background-position: -18px 0; } #scroll_right_arrow:hover { background-position: -18px -18px; } /* @end */ /* @group People grid layout ------------------------------------------------------------ */ #primary .people {width:134px; height:260px; float:left; border-top: 1px solid rgb(180,180,180); margin-bottom:20px;margin-right:20px;} #primary .people h2, #primary .people p {margin-right:20px;} #primary .people h2 {margin: 0;font-size:0.9em;} #primary .people p {display:none;} #primary .people .people-image {width:134px; height:150px; display:block; overflow:hidden; background: rgb(230,230,230); margin-bottom:10px;} #primary .people .people-image img {width:134px;} /* @end */ /* @group Entry ------------------------------------------------------------ */ #primary img.entryimage {width:150px; float:left; margin-right:15px; margin-bottom:5px;} /* @end */ /* @group Landing Page ------------------------------------------------------------ */ body.landing {width:440px;} body.landing #content {border:none; margin-top:50px;} body.landing #content h1 {color:#000; margin-bottom:50px; text-align:center;} body.landing #content h1 strong {font-size: 1.4em;} body.landing #content h1 span {display:none;} body.landing #content img {margin-bottom:90px;} body.landing #content p.intro {float:left; width:210px; font-size:1em;} body.landing #content ul {float:left; width:210px; margin-bottom:30px;} body.landing #content ul li {list-style:none; font-size:1em;} body.landing #content p.copyright {clear:both; font-size:0.7em; color:rgb(150,150,150);} /* @end */ /* @group Misc ------------------------------------------------------------ */ #secondary p {} body.category #secondary p a, body.entry #secondary p a {padding:7px;background: rgb(229,241,247); color: rgb(0,120,174); -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px; -webkit-transition-property:color, background; -webkit-transition-duration: 0.2s, 0.2s; -webkit-tr