/*----- reset from YUI ----- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse;border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* ----- general ----- */ html, body { height: 100%; } body { font-size:60%; font-family:Verdana, Arial, Helvetica, sans-serif; background: #fff; color:#424242; margin:0 !important; padding: 0 !important; } h1 { margin:35px 0 15px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em;} h2 { font-size:2em; font-family:Verdana, Arial, Helvetica, sans-serif; } h3 { font-size:1.2em; } h4 { font-size:1.1em; } h5 { font-size:1em; } a { color:red; text-decoration:none; } a:visited { color:red; text-decoration:none; } a:hover, a:focus { color:#000; text-decoration:underline; } .hr { height:5px; margin-top:25px; margin-bottom:20px; background:#fff url(../../images/layout/hr_grey.gif) no-repeat center; } strong,b { font-weight:bold; } em,i { font-style:italic; } u { text-decoration:underline; } .row { width:100%;} .clear { clear:both;line-height:0px;font-size:0px;height:0px;padding:0px;margin:0px;border:none;} .clear-left { clear:left; } .clear-right { clear:right; } .float-left { float:left; } .float-right { float:right; } .float-left { float:left; } .text-left { text-align:left } .text-center { text-align:center } .text-right { text-align:right } .mrgT8 {margin-top:8px;} .mrgT10 {margin-top:10px;} .mrgT20 {margin-top:20px;} .mrgL10 {margin-left:10px;} .mrgL30 {margin-left:30px;} .mrgL35 {margin-left:35px;} .mrgR10 {margin-right:10px;} .mrgR20 {margin-right:20px;} .hidden, .hide, legend { width:1px; height:1px; position:absolute; top:auto; left:-9999em; margin-bottom:0; overflow:hidden; } caption { width:1px; height:1px; margin-bottom:0; overflow:hidden; text-indent:-9999em; } .visuallyHidden { display: none; } .debug { border:1px solid #f0f; } .mb0 { margin-bottom:0; } ul.standard, ul.standard_num { margin:1em 0; } .standard li { margin-left:1.2em; list-style:square; line-height:1.8em; } .standardnav li { margin-left:2.0em; list-style:none; line-height:1.8em; } /* ----- text/cms content styles ----- */ .cms { color:#424242; font-family:Verdana, Arial, Helvetica, sans-serif; } .cms h2 { color:#474e57; font-size:1.5em; margin-bottom:0.2em; } .cms h3 { color:#474e57; font-size:1.4em; margin-bottom:0.2em; } .cms h4 { color:#474e57; font-size:1.4em; margin-bottom:0.2em; } .cms h5 { color:#474e57; font-size:1.2em; margin-bottom:0.2em; } .cms p { font-size:1.3em; line-height:1.3em; margin-bottom:0.8em; display:block; } .cms p.mb0 { margin-bottom:0; } .cms ol { font-size:1.4em; list-style-type:decimal; margin-left:24px; padding-bottom:0.4em; } .cms ol p { font-size:1.0em; } .cms ol ol { font-size:1.0em; } .cms ol li { line-height:1.4em; } .cms ul { font-size:1.3em; list-style-type:disc; margin-left:18px; padding-bottom:0.4em; } .cms ul p { font-size:1.0em; } .cms ul ul { font-size:1.0em; } .cms ul li { line-height:1.4em; } .cms td, .cms dt, .cms dd { font-size:1.2em; } /* ----- site layout ----- */ #everything { width:100%; } .wrapper { width:960px; margin:0 auto; position:relative; } #transplant-week-logo { width:223px; height:265px; position:absolute; left:0; top:48px; z-index:120; } #logo { width:194px; height:46px; position:relative; float:right; margin: 46px 20px 46px 0; } #content { width:960px; min-height:300px; margin:0 auto 33px auto; overflow:hidden; } #homepage #top-content { width:100%; min-width: 960px; height:300px; position:relative; margin-top:1px; background: url(../../campaign/images/campaign-header.png) center top no-repeat #f7f4ea; height: 380px;border-bottom: 17px;border-top: 0;border-right: 0;border-left: 0;-webkit-border-image: url('/images/layout/header-border-shadow.png') 30 30 round; /* Safari */-o-border-image: url('/images/layout/header-border-shadow.png') 30 30 round; /* Opera */border-image: url('/images/layout/header-border-shadow.png') 30 30 round; } #top-content { width:100%; height:300px; position:relative; margin-top:1px; background: url(../../campaign/images/campaign-header.png) center top no-repeat #f7f4ea; height: 380px;border-bottom: 17px;border-top: 0;border-right: 0;border-left: 0;-webkit-border-image: url('/images/layout/header-border-shadow.png') 30 30 round; /* Safari */-o-border-image: url('/images/layout/header-border-shadow.png') 30 30 round; /* Opera */border-image: url('/images/layout/header-border-shadow.png') 30 30 round; } #top-bread { width:100%; height:50px; position:relative; margin-top:1px; } #left-nav { width:204px; float:left; margin:32px 25px 0 0; } #wide-content-col { width:730px; float:left; margin:32px 0 0 0; } #footer { width:100%; background-color:#e6e6e6; position:relative; text-align:center; padding-bottom:40px; } /* ----- google search -----*/ #search-wrapper { width:100%; height: 49px; background:#fff; } #search-container { width:950px; background:#fff; } #search-options { width:950px; background:#fff; padding-top:10px; padding-bottom:10px; vertical-align:text-top;} .search { padding:2px 2px; font-size: 1.3em; margin-right:10px; color:#424242; } #globalnav label { margin-right:15px; } .globalnav_searchtext { width:190px;} input.globalnav_gobutton { border:#999 1px solid; padding:0 3px; margin:0 0 0 5px; background:url(../../images/layout/globalnav_gobutton.gif) #fff repeat-x left bottom;cursor:pointer;font-size:1.2em;} #cse-search-results iframe { width:680px; min-height:700px;} /* ----- social-media -----*/ #social-media { position:relative; width:190px; background:#fff; float:right; margin-top:-30px; margin-right: 15px; text-align:right; } #social-media h2 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.0em; float:left; text-transform: uppercase; } #social-media ul { float:right; margin:0px 0 0 0px; padding-left: 10px; } #social-media ul li { float:right; margin-left:6px; } /* ----- header -----*/ #header-wrapper { width:100%; height:208px; background:url(../../images/layout/header-background.png); } #header-container { width:960px; height:206px; margin:0 auto; overflow:visible; position:relative; background:palegoldenrod url(../../images/layout/bg.png) repeat-x 0 0; } #nav { font-family: 'Open Sans', Verdana; line-height: 65px; height:65px; margin-top: 0; position:absolute; right:10px; top:139px; overflow:hidden; } /* ----- main navigation -----*/ #nav ul { height:67px; float:left; margin-top: 0; padding-left: 0; } #nav li { float:left; list-style:none; position:relative; } #nav li a { height:67px; line-height:67px; display:block; text-align:center; color:#fff; font-weight:600; padding:0 12px; font-size:1.6em; text-decoration:none; background:url(../../images/layout/bg-nav.gif) no-repeat 0 0; } #nav li:first-child a { background-image:none; } #nav li.last a { padding-right:0; } #nav li.selected a span, #nav li a:hover span, #nav li a:focus span { text-decoration:none; border-bottom:2px solid #ed3223; padding-bottom: 3px} /* ----- left navigation -----*/ #left-nav ul { font-family:Verdana, Arial, Helvetica, sans-serif; } #left-nav li { color:#bd2418; font-size:1.2em; list-style:none; margin:0 0 8px 0; line-height:1.2em; background:transparent url(../../images/layout/red-bullet.gif) no-repeat 22px 4px; } #left-nav li a { display:block; color:#bd2418; text-decoration:underline; padding-left:38px; } #left-nav li.selected { width:196px; margin-left:10px; box-shadow:-2px 2px 2px rgba(50, 50, 50, 0.3); border:1px solid #cacaca; background: #d7d7d7 url(../../images/layout/bg-nav-default.gif) repeat-x 0 0; /* Old browsers */ background: -moz-linear-gradient(top, #eaeaea 0%, #ffffff 10%, #ffffff 25%, #d7d7d7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(10%,#ffffff), color-stop(25%,#ffffff), color-stop(100%,#d7d7d7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eaeaea 0%, #ffffff 10%, ffffff 25%, #d7d7d7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eaeaea 0%, #ffffff 10%, #ffffff 25%, #d7d7d7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eaeaea 0%, #ffffff 10%, #ffffff 25%, #d7d7d7 100%); /* IE10+ */ background: linear-gradient(#eaeaea 0%, #ffffff 10%, #ffffff 25% ,#d7d7d7 100%); /* W3C */ } #left-nav li.selected a { width:167px; padding:10px 4px 10px 26px; color:#313131; border-radius:2px; line-height:44px; text-decoration:none; line-height:1.3em; background:transparent url(../../images/layout/black-bullet.gif) no-repeat 12px 14px; } /* ----- top content -----*/ #homepage #top-content { height: 363px;} #top-content { height: 310px;} #top-content .hero-header { font-size: 7.9em; color: #333; position: absolute; top: 15px; font-family: 'Patua One', Verdana, Arial; font-weight: normal; } #top-content .hero-desc { max-width: 460px; position: absolute; top: 145px; font-weight: 600; font-family: 'open Sans', Verdana, Arial; font-size: 1.8em; } #top-content .take-part { width: 189px; height: 51px; background: url(../../images/layout/take-part-btn.png); position: absolute; top: 304px; left: -10px; z-index: 2;} #top-content .take-part a { padding: 17px 40px 17px 16px; position: relative; top: 16px; font-family: 'Open Sans', Verdana, Arial; text-shadow: 1px 1px #000; font-weight: bold; font-size: 1.6em; color: white; } #top-content .join-register { width: 330px; height: 107px; background: url(../../images/layout/join-register.png) no-repeat #E41E0A; position: absolute; top: 255px; right: 0; z-index: 2;} #top-content .join-register a { padding: 37px 83px 35px 30px; line-height: 2.9em; position: relative; top: 16px; font-family: 'Open Sans', Verdana, Arial; text-shadow: 1px 1px #000; font-weight: bold; font-size: 2.8em; color: white; } #top-content .content { width:450px; height:240px; position:absolute; left:230px; top:30px; overflow:hidden; } #top-content .expanded { width:450px; height:240px; position:absolute; left:230px; top:20px; overflow:hidden; } #top-content .expanded h2 { float:left; font-family:Verdana, Arial, Helvetica, sans-serif; color:#c3152c; font-size:3em; } #top-content .content h2 { float:left; font-family:Verdana, Arial, Helvetica, sans-serif; color:#c3152c; font-size:3em; margin-bottom:5px; } #top-content .content h3 { float:left; font-family:Verdana, Arial, Helvetica, sans-serif; color:#c3152c; font-size:5.1em; margin-top:-25px; } #top-content .banner { color:#df2820; text-decoration:none; cursor:hand; } #top-content .banner a:hover { color:#df2820; text-decoration:underline; cursor:hand; } #top-content .banner a:focus { color:#df2820; text-decoration:underline; cursor:hand; } #top-content .links { width:960px; height:74px; position:absolute; left:0; top:370px; } #top-content .links ul { padding: 0; height: auto; } #top-content .take-part a:hover, #top-content .join-register a:hover { text-decoration: none; border-bottom: 0; } #top-content .take-part:hover { background: url('/images/layout/take-part-btn-hover.png') 0 0 no-repeat; border-bottom: 0; height: 107px; } #top-content .join-register:hover { background: url('/images/layout/join-register-hover.png') 0 0 no-repeat; border-bottom: 0; height: 107px; } #top-content .links ul li { float:left; display:inline; list-style:none; } /* ----- top breadcrumbs -----*/ #top-bread .content { width:740px; background:#fff; float:right; margin-top:20px; font-size:.9em;} .breadlink { color:red; text-decoration:none; } .breadlink:hover { color:#424242; text-decoration:underline; cursor:hand; } .breadlink:focus { color:#424242; text-decoration:underline; cursor:hand; } .breadlink:visited { color:red; text-decoration:none; } /* ----- homepage content -----*/ #homepage { background: #fbfbfb;} #homepage #content { position: relative; } #homepage .two-column-feature { width:630px; float:left; overflow:hidden; padding: 0 10px 20px 0; } #homepage .two-column-feature h2 { margin:25px 0 15px 0; color:#474e57; font-weight: bold; font-family: 'Patua One', Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:2.3em; } #homepage .two-column-feature img { width: 276px; height: 157px; float: left;} #homepage .two-column-feature p { width: 300px; float: right; padding-right: 20px; font-family: 'Open Sans', Verdana, Arial; font-size: 1.2em; line-height: 1.8em;} #homepage .two-column-feature .btn { float: left; height: auto; margin-left: 30px; margin-top: 10px; font-size:1.2em; font-weight:bold; color:#fff; display:block; background:url(../../images/layout/btn-read.png) repeat-x 0 0; border:0; cursor:pointer; text-decoration:none; text-align:center; padding:9px; } #homepage .two-column-feature .btn:hover { background:url(../../images/layout/btn-read-hover.png); } #homepage .two-column-feature .btn a {color: white;} #homepage .two-column-feature .btn a {text-decoration: none;} #homepage .two-column-feature .border { width: 90%; height: 2px; clear: both; margin: 0 auto; position: relative; top: 20px; background:transparent url(../../images/layout/hr-line.png) repeat-x 0 100%; } #homepage .action-pack { width:280px; height: 60px; float:right; margin: 30px 25px 0 0; overflow:hidden; padding-bottom:40px; background:url(../../images/layout/action-pack.png) } #homepage .action-pack p { width: 180px; margin-top: 0; padding: 15px 0 0 20px; font-size: 1.9em; color: #fff; font-family: 'Patua One', Verdana, Arial; } #homepage .action-pack a { width: 280px; height: 100px; position: absolute; top: 30px;} #homepage .facebook-col { width:290px; float:right; overflow:hidden; padding-bottom:40px; padding: 0 15px; } #homepage .facebook-txt { width:250px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#474e57; font-size:1.2em; } #homepage .facebook-col h1 { margin:25px 0 25px 0; color:#474e57; font-family:'Patua One',Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:2.3em; } #homepage .news-col { width:285px; overflow:hidden; background: #fff; padding: 0 20px; } #homepage .news-col-txt { width:280px; float:right; margin-right:30px; margin-left:30px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#474e57; font-size:1.2em; } #homepage .news-col h1 { margin:25px 0 25px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em; } #homepage .news-col h2 { margin:25px 0 25px 0; color:#474e57; font-family:'Patua One',Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:2.3em; } #homepage .news-col dl { width:260px; } #homepage .news-col dt { width:280px; font-size:1.4em; color:#bd2418; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; margin-bottom:5px; } #homepage .news-col dt a { color:#bd2418; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration:underline; } #homepage .news-col dd { width:280px; font-size:1.3em; color:#424242; font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; padding-bottom:25px; background:url(../../images/layout/bg-dl.gif) repeat-x 0 100%; margin-bottom:25px; -webkit-margin-start: 0px; margin-left: 0; } #homepage .news-col dd a { width:280px; font-size:1.1em; color:#424242; font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; color: #f14234; } #homepage .news-col dd a.read-more { width:100px; padding-top: 15px; font-weight: bold; font-size:1.1em; color:#424242; font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; color: #f14234; display: block; } .read-more-news { width: 80px;float:right;margin:0 20px 25px 0;display: inline-block;font-weight: bold;} .read-more-news a {width: 80px;float:right;font-size: 1em;display: inline-block;font-weight: bold;} .read-more-news a:after {width: 5px;height: 8px;content:'';float: right;margin-top: 3px;margin-right: -10px;display: inline-block;background: url(../../images/layout/view-all-arrow.png) no-repeat;} #homepage .stories-col { width:315px; float:left; overflow:hidden; } #homepage .stories-col h1 { text-indent:25px; margin:25px 0 25px 0; color:#474e57; font-family: 'Patua One', Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em; } #homepage .stories-col h2 { margin:25px 0 25px 0; color:#474e57; font-weight: bold; font-family: 'Patua One', Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:2.3em; } #homepage .stories-col .bg { width:315px; min-height:340px; float:right; overflow:hidden; /*background:transparent url(../../images/layout/bg-stories.gif) no-repeat 0 0;*/ } #homepage .stories-col ul { width:315px; display:block; overflow:hidden; padding-left: 0; margin-top: 0; } #homepage .stories-col ul li { width:290px; clear:both; overflow:hidden; background:transparent url(../../images/layout/hr-line.png) no-repeat 0 100%; padding-bottom:30px; margin-bottom:30px; } #homepage .stories-col ul li:last-child { margin-bottom: 0; } #homepage .stories-col ul li:nth-child(4) { margin-bottom: 0; padding-bottom: 10px; } #homepage .stories-col ul li .story-item { width:280px; margin-right:25px; } #homepage .action-pack-box { width: 270px; height: 200px; background: url(../../images/layout/action-pack-box.png); float:left; width: 280px; margin-left: 5px; border: 1px solid white; } #homepage .action-pack-box p { width: 180px; padding: 10px 0; margin: 0 auto; font-family: 'Patua One', Verdana, Arial; font-size: 1.9em; color: white; text-align: center; } #homepage .action-pack-box .btn { width: 159px; height: 31px; position: relative; top: 90px; z-index: 2; background: url(../../images/layout/action-pack-box-btn.png); margin: 0 auto; } #homepage .action-pack-box .btntext { width: 159px; line-height: 30px; text-align: center; color: #007ac2; text-align: center; font-weight: bold; font-family: 'Open Sans', Verdana, Arial; } #homepage .action-pack-box .btntext a { width: 100%; line-height: 30px; padding: 4% 14%; text-align: center; font-size: 1.5em; color: #007ac2; text-align: center; font-weight: bold; font-family: 'Open Sans', Verdana, Arial; } #homepage .stories-col h3 { font-size:1.7em; font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; color:#30353a; font-weight:bold; margin: 0 0 0 5px; padding: 0; } #homepage .stories-col h3 a { color:#30353a; text-decoration:none; } #homepage .stories-col h3 a:hover, #homepage .stories-col h3 a:focus { text-decoration:none; } #homepage .stories-col .story-summary { width:160px; float:left; margin-left:9px; } #homepage .stories-col .cms { color:#6a6a6a; margin: 10px 0 10px 5px; } #homepage .stories-col .bg-photo { width:97px; height:119px; background:transparent url(../../images/layout/bg-photo.gif) no-repeat 0 0; float:left; } #homepage .stories-col .bg-photo img { width:77px; height:98px; margin:10px; } #homepage .stories-col .btn-story span, #homepage .stories-col .btn-story:visited span { width:159px; height:31px; font-size:1.2em; font-weight:bold; color:#fff; display:block; background:url(../../images/layout/btn-read.png) no-repeat 0 0; border:0; cursor:pointer; text-decoration:none; text-align:center; padding-top:9px; } #homepage .stories-col .btn-story:hover span, #homepage .stories-col .btn-story:focus span { background:url(../../images/layout/btn-read-hover.png) no-repeat 0 0; color:#fff; text-decoration:none; } /* ----- film-competition content -----*/ #campaign-gallery #top-content { background:url(../../images/layout/bg-film-competition.jpg) no-repeat 50% 0; } #campaign-gallery #top-content .content { width:450px; height:240px; position:absolute; left:230px; top:-20px; overflow:hidden; } #campaign-gallery #top-content .content h2 { text-indent:20px; margin-top:55px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em;} #campaign-gallery #top-content .content h1, #campaign-gallery #top-content .content .cms { color:#fff; } #campaign-gallery #top-content .links { width:999px; height:74px; position:absolute; left:-20px; top:223px; margin: 0 !important; padding: 0;} #campaign-gallery #top-content .links ul li { float:left; display:inline; list-style:none; margin: 0 !important; padding: 0; } #campaign-gallery .btn-like { margin-top:18px; } #campaign-gallery .btn-join { margin-top:18px; } #campaign-gallery #video { width:650px; height:500px; margin-bottom:15px; } #campaign-gallery #content { background:#fff; } #campaign-gallery .content h2 { margin:25px 0 25px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em; } #campaign-gallery .main-col { width:650px; float:left; margin-right:58px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #campaign-gallery .left-nav-col { background:url(../../images/layout/bg-left-nav.gif) no-repeat; width:215px; min-height:500px; float:left; margin-right:20px; margin-top:40px; padding-top:40px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #campaign-gallery .left-nav-col2 { background:url(../../images/layout/bg-left-nav.gif) no-repeat; width:215px; min-height:50px; float:left; margin-right:20px; margin-top:20px; padding-top:20px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #campaign-gallery .left-nav-main { width:650px; float:left; margin-right:8px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #campaign-gallery .left-nav-main h2 { margin:35px 0 25px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em; } /* ----- Celebrity Films content -----*/ #celebrity-films #top-content { background:url(../../images/layout/bg-celebrity-films.jpg) no-repeat 50% 0; } #celebrity-films #top-content .content { width:410px; height:240px; position:absolute; left:230px; top:-20px; overflow:hidden; } #celebrity-films #top-content .content h2 { text-indent:20px; margin-top:55px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em;} #celebrity-films #top-content .content h1, #celebrity-films #top-content .content .cms { color:#fff; } #celebrity-films #top-content .links { width:960px; height:74px; position:absolute; left:0; top:234px; margin: 0; padding: 0 } #celebrity-films #top-content .links ul li { float:left; display:inline; list-style:none; margin: 0; padding: 0; } #celebrity-films .btn-like { margin-top:18px; } #celebrity-films .btn-join { margin-top:18px; } #celebrity-films #video { width:650px; height:500px; margin-bottom:15px; } #celebrity-films #content { background:#fff; } #celebrity-films .content h2 { margin:25px 0 25px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em; } #celebrity-films .main-col { width:650px; float:left; margin-right:58px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #celebrity-films .left-nav-col { background:url(../../images/layout/bg-left-nav.gif) no-repeat; width:215px; min-height:500px; float:left; margin-right:20px; margin-top:40px; padding-top:40px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #celebrity-films .left-nav-col2 { background:url(../../images/layout/bg-left-nav.gif) no-repeat; width:215px; min-height:50px; float:left; margin-right:20px; margin-top:20px; padding-top:20px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #celebrity-films .left-nav-main { width:650px; float:left; margin-right:8px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #celebrity-films .left-nav-main h2 { margin:35px 0 25px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em; } /* ----- body content -----*/ #body #content { background:#fff; } #body #content h1 { margin:35px 0 15px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em;} #body #content h2 { margin:35px 0 15px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.8em;} #body #content h3 { margin:35px 0 15px 0; color:#474e57; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.4em;} #body .left-nav-col { background:url(../../images/layout/bg-left-nav.gif) no-repeat; width:215px; min-height:650px; float:left; margin-right:20px; margin-top:40px; padding-top:40px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #body .left-nav-main { width:385px; float:left; margin-right:38px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #body .main-col { width:600px; float:left; margin-right:58px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #body .main-col .story-summary { width:160px; float:left; margin-left:9px; } #body .register-col { width:700px; float:left; margin-right:8px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #body .film-col { width:650px; float:left; margin-right:8px; overflow:hidden; padding-bottom:20px; font-size:1.3em; } #body .pass-col { background:url(../../images/layout/pass_bg.jpg) no-repeat; width:250px; min-height:700px; float:left; overflow:hidden; margin-top:0px;} #body .pass-col dl { width:260px; } #body .pass-col dt { width:260px; font-size:1.6em; color:#bd2418; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; margin-bottom:5px; } #body .pass-col dt a { color:#bd2418; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:underline; } #body .pass-col dd { width:260px; font-size:1.4em; color:#424242; font-family:Verdana, Arial, Helvetica, sans-serif; padding-bottom:25px; background:url(../../images/layout/bg-dl.gif) no-repeat 0 100%; margin-bottom:25px; } #body .bg-photo { width:97px; height:119px; background:transparent url(../../images/layout/bg-photo.gif) no-repeat 0 0; float:left; margin-right:10px; } #body .bg-photo img { width:77px; height:98px; margin:10px; } #body .btn-stories { margin-left:25px; color:#d82228; font-size:1.3em; font-family:Verdana, Arial, Helvetica, sans-serif; clear:both; text-decoration:none; border-bottom:1px solid #696969; } .supporters { float:left; width:100px; height:96px; margin-right:15px; margin-bottom:10px; } .faqs { float:left; width:100px; height:96px; margin-right:15px; margin-bottom:10px; } /* ----- footer -----*/ #footer p.copyright { font-size:1.3em; color:#959595; display:block; padding:30px 0; text-shadow: 0 1px #fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; } #footer ul { width:auto; margin:0 auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; } #footer ul li { display:inline; padding:0 5px; } #footer ul li.divider { background:url(../../images/layout/bg-footer-nav.gif) no-repeat 100% 2px; padding-right:9px; } #footer ul li.block { display:block; } #footer ul li a { font-size:1.3em; color:#6a6a6a; text-decoration:underline; display:inline-block; margin-bottom:4px; } #footer ul li a:hover, #footer ul li a:focus { text-decoration:underline; } /* ----- buttons -----*/ .btn-like, .btn-like:visited { width:319px; height:50px; font-size:1.2em; font-weight:bold; color:#fff; display:block; background:url(../../images/layout/btn-like.png) no-repeat 0 0; border:0; cursor:pointer; text-decoration:none; text-align:left; text-indent:47px; line-height:42px; margin-top:18px; } .btn-like:hover, .btn-like:focus { background-position:0 -50px; color:#fff; text-decoration:none; } .btn-download, .btn-download:visited { width:325px; height:68px; font-size:1.2em; font-weight:bold; color:#fff; display:block; background:url(../../images/layout/btn-download.png) no-repeat 0 0; border:0; cursor:pointer; text-decoration:none; text-align:left; text-indent:22px; line-height:77px; margin-top:0; } .btn-download:hover, .btn-download:focus { background-position:0 -68px; color:#fff; text-decoration:none; } .btn-join, .btn-join:visited { width:312px; height:50px; font-size:1.2em; font-weight:bold; color:#fff; display:block; background:url(../../images/layout/btn-register.png) no-repeat 0 0; border:0; cursor:pointer; text-decoration:none; text-align:center; line-height:42px; margin-top:18px; } .btn-join:hover, .btn-join:focus { background-position:0 -50px; color:#fff; text-decoration:none; } .btn-read span, .btn-read:visited span { width:154px; height:30px; font-size:1.2em; font-weight:bold; color:#fff; display:block; text-decoration: none; background:url(../../images/layout/btn-read.png) no-repeat 0 0; border:0; cursor:pointer; text-decoration:none; text-align:center; padding-top:9px; } .btn-read span:hover, .btn-read:focus span { background:url(../../images/layout/btn-read-hover.png) no-repeat 0 0; color:#fff; text-decoration:none !important; } .btn-answer span, .btn-answer:visited span { float:right; width:160px; height:30px; font-size:1em; font-weight:bold; color:#fff; display:block; background:url(../../images/layout/btn-read.png) no-repeat 0 0; border:0; cursor:pointer; text-decoration:none; text-align:center; padding-top:9px; } .btn-answer:hover span, .btn-answer:focus span { float:right; background-position:0 -40px; color:#fff; text-decoration:none; background:url(../../images/layout/btn-read-hover.png) no-repeat 0 0; } .story-summary a:hover { text-decoration: none; } /** table **/ .table_fullwidth_holder th{color:#fff;} .table_fullwidth_holder th{text-align:center;padding:10px 0 10px 0;width:659px;height:auto} .table_fullwidth_holder th.leftcorner{background:url(../../images/layout/table_dan.gif) top left no-repeat #5b73a8;} .table_fullwidth_holder th.rightcorner{background:url(../../images/layout/table_top_rightcorner.gif) top right no-repeat #5b73a8;} .table_fullwidth_holder th.centrecolumns{background:#5b73a8;} .table_fullwidth {border-right:1px solid #5b73a8;background-color:#fff;} .table_fullwidth td {border:solid #5b73a8;border-width:0 0 1px 1px;text-align:center;padding:10px 15px 15px 15px;vertical-align:top;} .table_fullwidth td ul{text-align:left;padding-right:20px;} /********************************************************************** * Newly added ***********************************************************************/ .mobile { display: none;} .header-img { position:absolute; width:223px; height:252px; margin-top:39px; margin-left:-10px; z-index:1 } .header-img img { width:223px; height:225px; } .read-more-news { width: 80px; float:right; margin:0 20px 25px 0; display: inline-block; font-weight: bold; } .read-more-news a { width: 80px; float:right; font-size: 1em; display: inline-block; font-weight: bold; } .read-more-news a:after { width: 5px; height: 8px; content:''; float: right; margin-top: 3px; margin-right: -10px; display: inline-block; background: url(../../images/layout/view-all-arrow.png) no-repeat; } .read-more-stories { width: 130px; float:right; margin: -20px 20px 40px 0; padding-right: 15px; font-weight: bold; } .read-more-stories a { width: 130px; float:right; font-size: 1.2em; display: inline-block; font-weight: bold; } .read-more-stories a:after { width: 5px; height: 8px; content:''; float: right; margin-top: 4px; margin-right: -10px; display: inline-block; background: url(../../images/layout/view-all-arrow.png) no-repeat; } .home-carousel {background-color: #f5f5f5;border-top: 1px solid #c7c7c7; font-family: Arial; min-width: 960px;border-bottom: 1px solid #c7c7c7; margin-bottom: 30px;} .home-carousel .container { position: relative; width: 960px; margin: 0 auto; } .home-carousel .cycle { margin: 0 15px; } .home-carousel-item {float: left;width: 210px;min-height: 200px;padding: 35px 40px 0 60px;} .pod-did-you-know .stat-block {display: none;} .pod-did-you-know .stat-block:first-child {display: block;} .no-js .pod-did-you-know .btn {display: none;} .stat-block .icon {display: block;} .stat-block .standout{display: block; clear: both;} .stat-block p {white-space: normal;font-size: 1.6em;line-height: 1.4em;font-weight: bold;} .stat-block em {font-style: normal; font-weight: bold; color:#0072c6;} .stat-block strong {font-size: 2.25em;line-height: 1.2em;} .stat-block strong.xl {font-size: 4.125em;line-height: 1em;} .no-js .home-carousel-item {display: none;} .no-js .home-carousel .slide-1, .no-js .home-carousel .slide-2, .no-js .home-carousel .slide-3 { display: block; } .home-carousel .slide-1, .home-carousel .slide-4, .home-carousel .slide-7, .home-carousel .slide-10 { background-color:#fafafa;} .home-carousel .slide-3, .home-carousel .slide-6, .home-carousel .slide-9, .home-carousel .slide-12 { background-color:#f0f0f0;} .home-carousel .slide-3 .icon {margin-top: -9px;} .home-carousel .slide-4 .icon {margin-top: -9px;} .home-carousel .slide-5 .icon {margin: -15px auto -15px auto;} .home-carousel .slide-6 p {margin-top: 60px;} .home-carousel .slide-8 .icon {margin: -15px auto -29px auto;} .home-carousel .slide-9 .icon {margin: -15px auto -15px auto;} .home-carousel .slide-10 p {margin-top: 34px;} .home-carousel .slide-11 p {margin-top: 25px;} .home-carousel .slide-12 p {margin-top: 25px;} .home-carousel .slide-12 .standout {margin-bottom: 10px;} .home-carousel-nav {display: none;} .home-carousel-nav div {position: absolute; top: 50%;width: 40px;} .home-carousel-nav .prev {left: 0;} .home-carousel-nav .next {right: 0;} .home-carousel-nav a {position: absolute;display: block;width: 40px;height: 40px; text-indent: -9999px;background: url(../../images/layout/icon-sprite.png) #0072c6; margin-top: 0;} .home-carousel-nav a.disabled {background-color: #cfcfcf; cursor: default;} .home-carousel-nav .prev a {background-position: -168px -220px;} .home-carousel-nav .next a {background-position: -166px -256px;} /* ----- error page -----*/ #top-content.error { background: none;height: auto;padding-bottom: 100px;border: none; } #top-content.error .hero-header { font-size: 7.9em; color: #333; position: static; padding-top: 50px; font-family: 'Patua One', Verdana, Arial; font-weight: normal; } #top-content.error h2.error-message { max-width: 460px; font-weight: 600; margin-top: 35px; font-family: 'open Sans', Verdana, Arial; font-size: 2.0em; } #top-content.error p.error-message { max-width: 460px; font-weight: 400; margin-top: 25px; font-family: 'open Sans', Verdana, Arial; font-size: 1.6em; } #search-wrapper.error { width:100%; height: 0px; background:#fff; } .footer-buffer { height: 35px;background-color: #fff; } .icon { display:inline-block; width: 24px; height: 24px; text-indent: -9999px; background: url(../../images/layout/icon-sprite.png); margin: 0 20px 0 0; } .icon-people { width: 68px; height: 66px; background: url(../../images/layout/carousel-people.png); } .icon-heart { width: 76px; height: 62px; font-size: 2.8em; font-style: normal; font-weight: bold; text-align: center; text-indent: 0; color: #fff; background: url(../../images/layout/carousel-heart.png); } .icon-exclamation { width: 67px; height: 67px; background: url(../../images/layout/carousel-exclamation.png); } .icon-explanation-big { width: 53px; height: 53px; background: url(../../images/layout/icon-sprite.png); background-position: -207px -426px; } .icon-iv-feed-big { width: 75px; height: 62px; background: url(../../images/layout/icon-sprite.png); background-position: -207px -499px; } .icon-golf-big { width: 46px; height: 74px; background: url(../../images/layout/icon-sprite.png); background-position: -207px -581px; } .icon-london-big { width: 111px; height: 88px; background: url(../../images/layout/icon-sprite.png); background-position: -207px -675px; } .icon-mumbai-big { width: 59px; height: 71px; background: url(../../images/layout/icon-sprite.png); background-position: -207px -783px; margin-bottom: 15px !important; } /* GLobal Footer */ .footer_holder { clear: both; background: url(../../images/layout/footer-shadow-top.png) repeat-x top #f5f5f5; padding: 20px 0 95px; min-width: 960px; } .footer_holder .container { width: 960px; margin: 0 auto;} .footer_holder.persistent-off {padding-bottom: 40px;} .footer_holder h2 {font-size: 1.4em;font-weight: bold;color: #707070;margin-top: 0; } .footer_holder ul {list-style:none; padding: 0;margin: 0;} .footer_holder .footer-links {text-align: center;border-bottom: 1px solid #e3e3e3;padding:0 0 20px 0;margin:0 0 20px 0;} .footer-links li {display: inline-block;} .lt-ie8 .footer-links li {display: inline;} .footer-links li + li{border-left: 1px solid #e3e3e3;padding-left: 10px;margin-left: 10px;} .footer-links a {text-decoration: underline;font-size: 1.1em;color: #3d3d3d;} .footer-links a:hover {text-decoration: none;font-size: 1.1em;color: #d81e05;} .footer-parter-links { clear: left; width: 805px; } .footer-parter-links li, .footer-social-links li { float: left; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .footer-parter-links a, .footer-social-links a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; overflow: hidden; } .footer-parter-links li+li{margin-left: 30px;} .footer-parter-links a {display: block;height: 39px; text-indent: -9999px;background: url(../../images/layout/main-sprite.png) -9px -126px;} .footer-parter-links li:hover {padding-bottom: 5px;} .footer-parter-links li:hover a {margin-top: -5px;} .footer-parter-links h2, .footer-social-links h2 { margin-bottom: 20px;} .footer-parter-links .organ-donation {width: 142px; background-position: -9px -126px;} .footer-parter-links .platelets {width: 136px; background-position: -182px -126px;} .footer-parter-links .bone-marrow {width: 114px; background-position: -347px -126px;} .footer-parter-links .tissue-donation {width: 63px; background-position: -15px -199px;} .footer-parter-links .cord-blood {width: 81px; background-position: -106px -199px;} .footer-parter-links .transfusion {width: 86px; background-position: -216px -199px;} .footer-social-links { border-left: 1px solid #e2e2e2; padding: 0 25px 25px 25px; float: right; } .footer-social-links li {float: left;} .footer-social-links li:hover {padding-bottom: 5px;} .footer-social-links li:hover a {margin-top: -5px;} .footer-social-links li + li {margin-left: 7px;} .footer-social-links a {display:block;width: 32px;height: 32px;text-indent: -9999px; background: url(../../images/layout/icon-sprite.png) -353px 0;} .footer-social-links .facebook {background-position: -353px 0;} .footer-social-links .twitter {background-position: -353px -53px;} .footer-social-links .youtube {background-position: -353px -106px;} .footer-close { position: absolute; top: -35px; left: 3px; width: 23px; height: 23px; cursor: pointer; text-indent: -9999px; background: url(../../images/layout/icon-sprite.png) #d0d0d0 -298px -65px; box-shadow: inset 0px -6px 9px rgba(0, 0, 0, 0.2); border-radius: 5px 5px 0 0; padding: 6px 13px; } .footer-close:hover { background-color: #c4c3c3;} .footer-close span { content: ''; pointer-events: none; z-index: 1; position: absolute; height: 7px; width: 9px; overflow: hidden; right: -8px; bottom: 0; } .footer-close span:after { content: ''; z-index: 1; position: absolute; height: 11px; width: 10px; background: rgba(0, 0, 0, 0); border: solid 10px #a9a9a9; border-bottom-left-radius: 31px; margin-left: -11px; margin-top: -10px; } .footer-close:hover span:after { border-color: #a2a1a1; } .footer-open.grad-bar-blue { position: absolute; top: -35px; left: 3px; display: none; cursor: pointer; font-size: 1.4em; font-weight: bold; line-height: 2.3em; border-radius: 5px 5px 0 0; box-shadow: inset -1px 1px 2px rgba(255, 255, 255, 0.25); padding: 0 70px 0 17px; } .lt-ie9 .footer-open.grad-bar-blue { line-height: 2.6em; } .footer-open i { position: absolute; top: 5px; right: 10px; width: 23px; height: 23px; background: url(../../images/layout/icon-sprite.png) -310px -104px; } .footer-persistent-border {position: fixed; z-index: 999;bottom: 0; width: 100%; height: 3px; background-color: #0072C6;} .footer-persistent{ position: fixed; z-index: 999;bottom: 3px; width: 100%;background-color: #e7e7e7;padding: 13px 0 5px 0;} .footer-persistent h3 { font-size: 1.5em;margin: 0 20px 0 0;} .footer-persistent .list-icons {float: left;width: 420px;} .footer-persistent .list-icons li {float: left;width: 50%;} .lt-ie8 .footer-persistent .list-icons li {float: left;width: 49%;} .footer-persistent .list-icons p {font-size: 1.2em;font-weight: bold; margin-bottom: 0;} .footer-persistent .list-icons .media-ob .media.icon {margin: 0 10px 3px 0;} .footer-persistent .more {font-size: 1.2em;font-weight: bold;margin-top: 1.5em;} .footer-persistent .more a {color:#026bb9;margin-right: 5px;} .footer-persistent .container .grad-bar-blue {min-width: 225px;padding-top: 20px;padding-bottom: 20px;margin: -13px 0 -10px 0;} .search label { font-family: 'Open Sans', Verdana, Arial; font-size: 10px; } .search input[type="radio"] { /* hide the inputs */ display: none; } .search input[type="radio"] + label { margin-right: 10px; text-transform: uppercase; color: #6f6f6f; } /* style your lables/button */ .search input[type="radio"] + label:before { /* keep pointer so that you get the little hand showing when you are on a button */ cursor: pointer; /* the following are the styles */ padding: 4px 11px; color: #aaa; margin-right: 5px; content: ''; background: url(../../images/layout/radio.png) no-repeat; } .search input[type="radio"]:checked + label:before { /* style for the checked/selected state */ color: white; content:''; background: url(../../images/layout/radio-active.png) no-repeat; } .search input[type="submit"] { width: 40px; height: 28px; color: white; background: url(../../images/layout/search-btn.png) no-repeat #fff ; border: none; font-size: 1.1em; font-family: Arial; text-transform: uppercase; } .twitter-container { width: 249px; border: 3px solid #0072c6; padding: 0 10px; margin-top: 20px; } .twitter-icon { background: url(../../images/layout/twitter-icon.png) no-repeat; padding: 11px 11px; float: right; position: relative; top: -7px; right: 10px; } .twitter-header { font-family: 'Patua One', Verdana, Arial; font-size: 2.3em; border-bottom: 2px solid #b2d4ee; padding: 10px 0; margin-bottom: -25px; } .twitter-footer { border-top: 2px solid #b2d4ee; padding: 10px 0; } .twitter-view-all { text-align: right; font-family: 'Open Sans', Verdana, Arial; color: #0072c6; font-size: 1.5em; position: relative; right: 10px; font-weight: bold; } .twitter-view-all a { color: #0072c6;width: 100px; } .twitter-view-all:after { background: url(../../images/layout/blue-arrow.png) no-repeat ; content: ''; padding: 3px 4px; position: relative; margin-left: 10px; top: 7px; color: #0072c6; vertical-align: middle; } #campaign-gallery { background: #efefef } #campaign-header, #campaign-header .wrapper { background: url(../../campaign/images/campaign-header-bg.png) repeat !important; height: 379px; } #campaign-gallery .content, #campaign-gallery .wrapper { background: none !important; } #campaign-header #top-content { background: url(../../campaign/images/campaign-header.png) right no-repeat; height: 380px; border-bottom: 0; } #campaign-header #top-content .join-register { top: 255px; right: 0 } #top-content .join-register a { padding: 0 0 2px 0; line-height: 2.7em; margin: 0 30px; text-decoration: none; } #top-content .join-register:hover, #top-content .join-register:hover { text-decoration:none; background: url('/images/layout/join-register-hover.png'); cursor: pointer; height: 107px; } #campaign-header .hero-header { font-size: 7.9em; font-weight: normal; color: #333 } .heart { background: url(../../campaign/images/heart-icon.png) no-repeat; height: 72px; width: 80px; display: inline-block; } #social-sign-in-bar { height: 80px; width: 100%; background: url(../../campaign/images/social-bar-bg.png) repeat; margin-top: -80px; position: relative; z-index: 1; border-bottom: 1px solid #c4c3be; margin-top: -80px; } #social-sign-in-bar .wrapper, #control-bar .wrapper { height: auto !important; } #social-sign-in-bar .sign-in-wrapper { margin-left: 130px; } #social-sign-in-bar .sign-in { font-size:1.9em; letter-spacing: -0.5px; font-weight: 600; font-family: 'Open Sans', Verdana, Arial; float: left; padding: 28px 16px 10px 0; display: inline-block; position: absolute; top: 0; } #social-sign-in-bar .sign-in-popup { float: left; margin-right: 10px; margin-top: 22px; } #social-sign-in-bar .btn, .sort-wrap .btn, .gallery-item-wrap .btn, .modal-popup .btn, #load-more .btn { display: inline-block; padding: 10px 19px; font-family: 'Open Sans', Verdana, Arial; font-size: 1.5em; font-weight: 700; color: #fff; cursor:pointer; margin: 22px 6px; border-radius: 5px; -moz-border-radius: 5px; border: none; letter-spacing: 0; width: 65px; outline: none; } #social-sign-in-bar a[data-provider=Facebook] { background: #3b5997 url(../../campaign/images/facebook.png) no-repeat 10px center; padding-left: 35px; margin: 0; } #social-sign-in-bar a[data-provider=Facebook]:hover { background: #344e85 url(../../campaign/images/facebook.png) no-repeat 10px center; } #social-sign-in-bar a[data-provider=Twitter] { background: #55acee url(../../campaign/images/twitter.png) no-repeat 10px center; padding-left: 35px; margin: 0; } #social-sign-in-bar a[data-provider=Twitter]:hover { background: #4ea2d7 url(../../campaign/images/twitter.png) no-repeat 10px center; } .gallery-sort { height: 80px; width: 100%; background: #fff; margin: 0 0 20px 0 } .gallery-sort h2 { font-size: 2.3em; font-weight: bold; font-family: 'Patua One', Verdana, Arial, Helvetica, sans-serif; padding: 24px 0 0 0; float: left } .sort-wrap { float: right; } .sort-wrap .btn { width: 160px; margin-right: 0; display: inline-block; text-align: center; box-sizing: border-box; } .sort-wrap a.btn:hover { text-decoration: none; } .btn.white { background: #fff; border: 1px solid #ccc; color: #333 } .btn.white:hover { background: #fafafa } .btn.black { background: #333; border: 1px solid #333; color: #fff } .btn.black:hover { background: #111 } #campaign-header.frame-header, #campaign-header .wrapper.frame-header { height: 380px; } #control-bar { height: 80px; z-index: 1; margin-top: -108px; } #control-bar .btn.backtogallery { display: inline-block; padding: 16px 20px 16px 66px; font-family: 'Open Sans', Verdana, Arial; font-size: 2.5em; font-weight: 700; color: #fff; cursor:pointer; margin: 26px 6px; border: none; letter-spacing: 0; text-transform: uppercase; background: #333333 url(../../campaign/images/chevron-left.png) no-repeat 22px; outline: none; } #control-bar .btn.backtogallery:hover { text-decoration: none; } #campaign-page, #campaign-page .wrapper { background: url(../../campaign/images/campaign-header-bg.png) repeat !important; height: 379px; } #campaign-gallery .content, #campaign-gallery .wrapper { background: none !important; } #campaign-page { border-bottom: 17px; border-top: 0; border-right: 0; border-left: 0; -webkit-border-image: url('/images/layout/header-border-shadow.png') 30 30 round; /* Safari */ -o-border-image: url('/images/layout/header-border-shadow.png') 30 30 round; /* Opera */ border-image: url('/images/layout/header-border-shadow.png') 30 30 round; } #campaign-page #top-content { background: url('/images/layout/spellitout-header1.png') no-repeat; height: 380px; } #campaign-page #top-content .hero-header { font-size: 9.8em; line-height: 0.7em; } #campaign-page #top-content .hero-header span { font-size: 0.6em; } #campaign-header #top-content .join-register { top: 255px; right: 0 } #top-content .join-register a { padding: 0 0 2px 0; line-height: 2.7em; margin: 0 30px; text-decoration: none; } #top-content .join-register:hover, #top-content .join-register:hover { text-decoration:none; background: url('/images/layout/join-register-hover.png'); cursor: pointer; height: 107px; } #campaign-header .hero-header { font-size: 7.9em; font-weight: normal; color: #333 } #campaign-gallery div#main { text-align: center; } .fb-frame { width: 768px; height: 1045px; border: none; margin: 0 auto; } .btn.red { background: #e31e09; color: #fff !important; border: none; border-bottom: 1px solid #333; margin-top: 10px !important; } .btn.red:hover { background: #ec3d2b; } #tiles { list-style-type: none; position: relative; /** Needed to ensure items are laid out relative to this container **/ margin: 0 0 0 -5px; padding: 0; } /** * Grid items */ #tiles li { width: 300px; display: none; /** Hide items initially to avoid a flicker effect **/ cursor: pointer; margin: 6px; background: #fff; -webkit-box-shadow: 0px 3px 4px 0px #ddd; -moz-box-shadow: 0px 3px 4px 0px #ddd; box-shadow: 0px 3px 4px 0px #ddd; } #tiles li.inactive { visibility: hidden; opacity: 0; } #tiles li img { display: block; overflow: hidden; } #tiles li { -moz-box-sizing: border-box; box-sizing: border-box; } #tiles li img { width: 100%; height: auto; } /** * Grid item text */ .user-social { padding: 15px } span.username { font-size: 1.9em; font-weight: 700; font-family: 'Open Sans', Verdana, Arial; display:block; padding: 0 0 10px 0; margin-bottom: 10px; border-bottom: 2px solid #f9f9f9 } .btn.vote { width: 88px !important; float: left; margin: 10px 0 0 0; } p.votes { font-weight: 700; font-family: 'Open Sans', Verdana, Arial; font-size: 1.5em; color: #a1a3a7; margin: 25px 0 15px; text-align: right; } #modalVoteStats { margin: 30px 0 15px 0; text-align: left; } .socialLoginList a.btn:hover { text-decoration: none; } .user-social .btn { margin: 0; width: 123px; display: inline-block; color: #333; text-align: left } .user-social a[data-provider=Facebook] { border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-bottom: 1px solid #ccc; padding: 11px 0 11px 32px; background: url(../../campaign/images/blue-facebook.png) no-repeat 12px; } .user-social a[data-provider=Facebook]:hover { background: #3b5997 url(../../campaign/images/white-facebook-small.png) no-repeat 12px; color: #fff } .user-social a[data-provider=Twitter] { border-radius: 0; -moz-border-radius: 0; background: url(../../campaign/images/blue-twitter.png) no-repeat 12px; padding: 11px 0 11px 32px; } .user-social a[data-provider=Twitter]:hover { background: #53aee8 url(../../campaign/images/white-twitter-small.png)no-repeat 12px; color: #fff } .user-social .sign-in { background: #333 url(../../campaign/images/chevron.png) no-repeat 128px; padding: 10px 0 10px 15px; font-family: 'Open Sans', Verdana, Arial; font-size: 1.5em; font-weight: 700; color: #fff; cursor:pointer; border: none; letter-spacing: 0; outline: none; -moz-border-radius: 5px; border-radius: 5px; position: absolute; width: 140px; bottom: 20px; left: 20px; text-indent: -30px; } .user-social .sign-in:hover { background: #111 url(../../campaign/images/chevron.png) no-repeat 128px; } .no-top-border-radius { -moz-border-radius: 0 0 6px 6px !important; border-radius: 0 0 6px 6px !important; } .user-social .sign-in-wrapper { background: #efefef; width: 155px; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; position: absolute; bottom: 59px; left: 20px; z-index: 11; } .user-social .sign-in-popup { display: none; } .image-wrap { height: auto; width: auto; overflow: hidden; position: relative; } .zoom-overlay { background:url(../../campaign/images/zoom.png) center center no-repeat #333; height: 100%; position: absolute; width: 100%; z-index: 10; -webkit-box-shadow: 0px 0px 4px #000; -moz-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; } .modal-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 600px; margin: 20px auto; } .modal-popup img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; padding: 40px 0 40px; margin: 0 auto; } .wrapper.loadmore { padding: 40px 0; text-align: center; height: 40px } #load-more { display: none; } #load-more .btn { width: 160px; margin-right: 0; display: inline-block; text-align: center; box-sizing: border-box; color: #333; } .loading { background: url(../../campaign/images/loader.gif) center no-repeat #333; } .loading-message { font-size: 16px; font-weight: bold; margin: 0 0 30px 0; display: none; } .no-bg { background: #fff !important; } .voteSuccessMessage, .alreadyVoted { float: left; width: 160px; font-weight: 700; font-family: 'Open Sans', Verdana, Arial; font-size: 1.5em; color: #299C2F; margin-top: 5px; } .btn.vote.disabled { text-decoration: line-through; } .share-container { position:absolute; display:block; width: 137px; height: 32px; top: 0; left: -1000px; background-color:#fff; background-color:rgba(255,255,255,0.5); border-radius: 3px; z-index: 10; } .share-list li { float: left; margin-right: 5px } .fb-share-button, .twitter-share-button { position:relative; width: 60px; display: inline } .fb-share-button { left:6px; top: 6px; } .twitter-share-button { left:6px; top: 6px; } #voteControls { position: relative; } .modal-popup .socialLoginList { float: left; margin-right: 10px; margin-top: 10px; position: relative; } .modal-popup .share-container { width: 130px; height: 36px; float: right; margin-top: -10px; margin-right: -10px; } .modal-popup a.btn.vote { margin-right: 10px; } .modal-popup .user-social .sign-in { bottom: auto; display: inline-block; left: 0; margin: 0; padding: 10px 0 10px 15px; position: relative; text-indent: 0; top: 0; width: 138px; } .modal-popup .user-social .sign-in-wrapper { bottom: 41px; left: 0; } #top-content .join-register a:hover, .join-register a:hover { text-decoration: none !important; border-bottom: 0; background: url('/images/layout/join-register-hover.png') 0 0 no-repeat; height: 107px; } .mobile { display: none !important;} /* Cookie Warning */ #cookie-warning { display: none; background-color: #353940; } #cookie-warning div { border-collapse: separate !important; } #cookie-warning .container { min-height: auto; padding: 10px 0; display: table; margin: 0 auto; } #cookie-warning p { font-size: 11px; color: #fff; background: url(/../images/layout/cookie-warning-icon.gif) no-repeat left center; padding: 5px 0 6px 60px; margin: 0; float:left; width:650px; } #cookie-warning p a { color: #fff; text-decoration: underline; } #cookie-warning p a:hover { color: #D81E05; } #hide-cookie-warning { width: 240px; height: 41px; text-indent: -9999px; background: url(/../images/layout/cookie-warning-btn.gif); /*margin-left: 130px;*/ float:right; } @media screen and (max-width: 767px) { #cookie-warning { padding:10px; position: relative; z-index: 100; } #cookie-warning .container { width: 100%; } #cookie-warning p { font-size:12px; background:none; padding:0; float:none; width:100%; } #hide-cookie-warning { margin:0; clear:both; margin:15px auto 0 auto; float:none; display:block; } } @media only screen and (max-width : 767px) { .fb-frame { width: 100%; } } .ie8 #nav li a:first-child, .lt-ie9 #nav li a:first-child { border-left: 0; } .ie8 #nav li a, .lt-ie9 #nav li a { font-size: 1.4em; }