/* CSS for www.worldpeacefestival.org Colors #de0269 magenta text */ /* =============== SCREEN styles */ @media screen, projection { /* RESET AND GLOBAL TAGS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea { margin: 0; padding: 0; border: 0; outline: none; font-size: 100%; vertical-align: baseline; background: transparent; font-weight: normal; } ul { list-style: none; } a, a:hover, a:link, a:visited, a:active, input, input:focus, a:focus, button:focus { outline:none;} /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } html {height: 100%;} body { text-align: center; font-size: 76%; color: #575656; line-height: 1; font-family:Georgia, "Times New Roman", Times, serif; height: 100%; } a:link { text-decoration: underline;} a:hover { text-decoration:underline;} strong { font-weight: bold; } em {font-style: italic;} .hide {display: none;} .show {display: block;} .nobr {white-space:nowrap;} .text-only {display: none; text-indent: -9999px;} .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; background: none; font-size: 0; margin: 0; padding: 0;} /* layout */ #container { width: 960px; margin: 0 auto; text-align: left; font-size: 1em; padding: 25px 10px 40px 15px; overflow: hidden; } #header, #content, #footer, #sub-footer, #banner-main, #banner-sub, .testimonials, #advisors-video, #contribute, #event, #tools-cells {width: 960px; overflow: hidden; margin-bottom: 20px;} /* header */ #header {margin-bottom: 0;} #header #logo a {width: 254px; height: 106px;} #banner-sub {margin-bottom: 8px;} #banner-sub a#logo {display:block; width: 254px; height: 106px; float: left;} #donate-follow {width:640px; float: right; overflow: hidden;} #donate-follow h1 {padding: 14px 20px 12px 35px; min-height: 31px; display: block; overflow: hidden; background:#fc9300 url(../images/bg/bg-banner-yellow.png) left top repeat-y; color: #fff; font-size: 1.65em; text-align: right; line-height: 1.2em; margin-bottom: 10px; } #donate-follow h1 span { display: none;} #donate-follow h2 {margin: 0px 0 3px 0; display: block; overflow: hidden;} #donate-follow h2 a {color: #de0269; text-align: right; line-height: 1em; font-size: 1.8em; font-style: italic; padding: 10px 20px 0px 15px; height: 36px; text-decoration: none; display: block; overflow: hidden; background:#fff url(../images/bg/bg-banner-magenta46.png) -28px top no-repeat;} #donate-follow h2 a:hover {color: #fff;text-decoration: none; background-position: left top; background-color:#de0269;} #donate-follow ul {display: block; float: right; overflow: hidden; padding-right: 9px;} #donate-follow li {display: block; float: right; list-style-type: none; margin-left: 5px;} #donate-follow li a {display: block; width: 24px; height: 24px; text-decoration: none; text-indent: -9999px;} #donate-follow li a#twitter {background:#fff url(../images/icons/twitter.png) left top no-repeat;} #donate-follow li a#facebook {background:#fff url(../images/icons/facebook.png) left top no-repeat;} #donate-follow li a:hover {text-decoration: none;} #donate-follow h3 {margin: 0px 0 0px 0; display: block; float: right; overflow: hidden; font-size: 1.2em; line-height: 22px; color:#464646; text-align: right; font-style: italic; padding-right: 15px;} #donate-follow h3 a {color: #de0269;text-decoration: none;} #donate-follow h3 a:hover {background: #de0269; color:#fff; text-decoration: none;} /* header - banner-main */ #banner-main {background: #000 url(../images/photos/bbtor.jpg) 20px 20px no-repeat; min-height: 172px;} #banner-main div {margin:0 0 0 253px; width: 459px; background: #000 url(../images/photos/podium.jpg) 469px 20px no-repeat; overflow: hidden; padding:0 248px 0px 0;} #banner-main h2 {color:#1488F8; font-size: 2.8em; line-height: 1.2em; margin: 8px 0 6px 0; } #banner-main h3 {color:#fff; font-size: 1.9em; line-height: 1.2em; margin: 0px 0 8px 0; } #banner-main h4 {color:#858585; font-size: 1.1em; line-height: 1.3em; margin: 0px 0 7px 0; } #banner-main p {color:#fca300; font-size: 1.28em; line-height: 1.4em; padding-bottom:12px; margin-right: 20px;} /* blocks, testimonials, tools and circles */ .testimonials {} .block {width: 470px; float: left; overflow: hidden; min-height: 92px; padding-bottom: 8px; background-position: left top; background-repeat: no-repeat;} #tools-cells .block {padding-bottom: 12px;} .left {margin-right: 20px;} #testimonial-one {background-image: url(../images/photos/dalailama2.jpg);} #testimonial-two {background-image: url(../images/photos/richardbranson.jpg); } #testimonial-three {background-image: url(../images/photos/tomoliver.jpg); } #testimonial-four {background-image: url(../images/photos/migueldescotobrockmann.jpg);} #tools-cells .block h2 {width: 100px; height: 100px; float: left; text-indent: -9999px; margin: 7px 0 0 0;} #tools h2 {background-image: url(../images/logos/tools.png);} #circles h2 {background-image: url(../images/logos/circles.png);} .yellow {background: transparent url(../images/bg/bg-testimonials-yellow.gif) left top repeat-y;} .grey {background: transparent url(../images/bg/bg-testimonials-grey.gif) left top repeat-y;} #tools-cells {background: transparent url(../images/bg/bg-toolscells.gif) left top repeat-y;} .yellow h2 {color: #fff;} .grey h2 {color: #000;} .yellow h3, .yellow span {color: #94094a; } .grey h3, .grey span {color: #94094a;} .block h2 {font-size: 1.15em; margin: 11px 30px 0px 118px; line-height: 1.3em; font-style: italic; text-indent: -0.5em;} .block h3 {font-size: 1.1em; margin: 0px 15px 0 118px; line-height: 1.2em; } .block h2 span {font-size: 1em; margin: 0px 0px 0 10px; line-height: 1.3em; font-style: normal; } .block p {font-size: 1.1em; margin: 12px 20px 0px 118px; line-height: 1.5em; font-style: normal; color:#fff;} /* advisors and video */ #advisors-video {background: #fff url(../images/bg/bg-column-advisors-video.png) left bottom no-repeat; position: relative; overflow: hidden;} #advisors {width: 300px; float: left; min-height:300px; } #advisors a.more {position: absolute; left: 240px; bottom: 0; display: block; width: 60px; height: 19px; text-indent: -9999px; background: transparent url(../images/buttons/more.png) left top no-repeat;} #advisors a.more:hover {background-position: left -38px;} #advisors h2 a {background: #0f67b2; color:#fff; text-transform: uppercase; font-size: 1.1em; line-height: 1.3em; width: 276px; padding: 5px 12px 5px 12px; text-decoration: none; display: block;} #advisors h2 a:hover {background: #de0269;text-decoration: none;} #advisors ul {display: block; overflow: hidden; margin-top: 0.92em; padding-bottom: 20px;} #advisors ul li {line-height: 1.3em; color: #464646; margin: 0 12px 6px 12px; font-size: 1.06em;} #advisors ul li strong {font-weight: bold; color: #0f67b2;} #video {width: 630px; margin-left: 30px; float: left; background:#e7f0f7; } #video-embed {width: 400px; height:300px; float: left; background:#000; overflow: hidden;} #video-tutu, #video-embed object {width: 400px; height:300px; background:#000; } #video-embed h2 {color: #fff; font-size: 1.4em; margin: 20px 20px 0.6em 30px; line-height: 1.4em; } #video-embed p {color: #fff; font-size: 1.1em; margin: 20px 20px 0.9em 30px; line-height: 1.4em; } #video-embed a {color: #148BFF; text-decoration: none; } #video-embed a:hover {color: #de0269; text-decoration: none; } #video-quote {width: 230px; overflow: hidden; background:#e7f0f7; padding: 10px 0 15px 0; float: left;} #video-quote h2 {color: #0f67b2; font-size: 1.4em; margin: 0px 20px 0.6em 25px; line-height: 1.4em; font-style: italic; text-indent: -12px;} #video-quote span {font-size: 1.2em; line-height: 1.1em } #video-quote h3 {color: #de0269; font-size: 1.1em; font-style: italic; margin: 0px 20px 0.2em 25px; line-height: 1.4em; font-weight: bold; } #video-quote h4 {color: #de0269; font-size: 1em; font-style: italic; margin: 0px 20px 0 25px; line-height: 1.3em; } /* contentpage */ #content {margin-bottom: 0;} body.detail #content {margin-bottom: 20px; background: #fff url(../images/bg/verticalline.gif) 645px top repeat-y;} #columnleft {width: 625px; overflow: hidden; float: left; padding-left:20px;} #speakers #columnleft {width: 645px; overflow: hidden; float: left; padding-left: 0;} #columnleft h2 { color: #000; line-height: 1.2em; font-size: 2.2em; margin-bottom: 18px;} #speakers #columnleft h2 {text-indent: 140px; } #columnleft ul {margin-bottom: 0.9em; margin-left: 15px; } #columnleft ol {margin-bottom: 0.9em; margin-left: 33px; } #speakers #columnleft ul {margin-left: 0px;} #columnleft ul li {line-height: 1.5em; color: #464646; margin: 0 20px 0.4em 0px; font-size: 1.18em; background: #fff url(../images/icons/bullet.gif) 0 0.6em no-repeat; padding-left: 12px; } #columnleft ol li {line-height: 1.5em; color: #464646; margin: 0 20px 0.4em 0px; font-size: 1.18em; } #speakers #columnleft ul li {line-height: 1.5em; color: #464646; margin: 0 20px 1.3em 0px; font-size: 1.18em; list-style-type:none; background: none; padding: 0; display: block; position: relative; overflow: hidden; padding-left: 140px;} #speakers #columnleft ul li strong {font-weight: bold; color: #0f67b2; font-size: 1.18em; padding-right: 0.1em;} #speakers #columnleft ul li span {color: #0f67b2; display: block; width: 430px; margin:1em 0 0 0; position: relative; padding: 5px 30px 5px 30px;} #speakers #columnleft ul li span span {color: #fc9300; display: block; width: auto; margin:0 0 0 0; font-size:3em; padding: 0 0 0 0; line-height: 1em; } #speakers #columnleft ul li span.leftquote {position:absolute; left: 0; top: 0;} #speakers #columnleft ul li span.rightquote {position:relative; float:right; margin-right: -25px; display: inline; top:4px; margin-bottom: -18px;} #speakers #columnleft ul img {width: 120px; height: 120px; display: block; margin: 4px 0 0 -140px; float: left;} #columnleft p {line-height: 1.5em; color: #464646; margin: 0 20px 0.9em 0px; font-size: 1.18em;} #columnleft h3 {font-weight: bold; color: #0f67b2; font-size: 1.2em; margin-bottom: 0.5em; line-height: 1.3em;} #columnleft p a, #columnleft ul a, #columnleft ol a {text-decoration: none; color:#0f67b2;} #columnleft p a:hover, #columnleft ul a:hover, #columnleft ol a:hover {text-decoration: underline; color:#de0269;} #columnright {width: 275px; overflow: hidden; float: left; padding: 0 20px 0 20px;} #columnright h2 {color: #000; line-height: 1.2em; font-size: 1.6em; margin: 7px 0 20px 0;} #columnright ul {display: block; overflow: hidden; } #columnright ul li { line-height: 1.4em; color: #464646; margin: 0 0px 0.8em 0px; font-size: 1.1em;} #columnright ul li strong {font-weight: bold; color: #0f67b2;} #columnright ul li a {font-weight: bold; color: #0f67b2; text-decoration: none;} #columnright ul li a:hover {font-weight: bold; color: #de0269; text-decoration: none;} /* contribute banner */ #contribute {width: 100%; background: #fc9300 url(../images/bg/bg-donate.png) left top repeat-y; padding:4px 0 0px 0; min-height: 22px;} #contribute h2 {margin: 0px 20px 0px 20px; display: block; overflow: hidden; font-size: 1.18em; line-height: 1.2em; color:#fff; text-align: left; font-style: italic; padding-right: 15px;} #contribute h2 a {color: #94094A;text-decoration: none;} #contribute h2 a:hover {background: #94094A; color:#fff; text-decoration: none;} /* event info */ #event {background: #fff url(../images/bg/bg-column-fullwidth.png) left bottom no-repeat; position: relative;} #event div#event-mission, #event div#event-info, #event div#event-partners {width: 300px; float: left; display: inline; padding-bottom: 15px;} #event-mission { } #event-info {margin-left: 30px; } #event-partners {margin-left: 30px; } #event div a.more {position: absolute; right: 0; bottom: 0; display: block; width: 60px; height: 19px; text-indent: -9999px; background: transparent url(../images/buttons/more.png) left -19px no-repeat;} #event div a.more:hover {background-position: left -38px;} #event div h2 {color:#fff; text-transform: uppercase; font-size: 1.1em; line-height: 1.3em; width: 276px; padding: 5px 12px 5px 12px; margin-bottom: 0.76em;} #event-mission h2 {background: #DE0269; } #event-info h2 {background: #0f67b2;} #event-info h3, #event-info p {text-indent: -9999px; } /*make h2 a link*/ #event div#event-partners h2 {padding: 0 0 0 0; } #event div#event-partners h2 a {background: #535353; color:#fff; text-transform: uppercase; font-size: 1em; line-height: 1.3em; width: 276px; padding: 5px 12px 5px 12px; text-decoration: none; display: block;} #event div#event-partners h2 a:hover {background: #de0269;text-decoration: none;} #event div p {line-height: 1.4em; color: #464646; margin: 0 12px 0.9em 12px; font-size: 1.06em;} #event-info div {width: 300px; height: 252px; background: transparent url(../images/logos/thefestival.png) left top no-repeat; position: absolute; left: 330px; bottom:30px;} /* footer */ #footer {padding-bottom:40px; margin-bottom: 10px; background:#000;} #footer h2 {color:#fff; font-size: 3.6em; line-height: 1.2em; margin: 23px 0px 0px 33px; width: 390px; float: left; display: inline; background: #000 url(../images/logos/bird.png) 0px bottom no-repeat; padding-bottom: 95px;} #footer h2 em {font-style: italic; color:#de0269;} #footer #form-container, #footer h3#donate {width: 470px; display: block; overflow: hidden; float: right; } #form-container #mce-responses { } #form-container #mce-responses p.response {float: left; clear: left; width:405px; display: block; overflow: hidden; background:#669900; display: none; margin: 20px 0 20px 0; color: #fff; font-size: 1.2em; line-height: 1.4em; padding: 12px 20px 12px 20px;} #form-container fieldset {width:445px; display: block; overflow: hidden; background:#de0269; margin: 25px 0 30px 0; padding-bottom: 20px;} #form-container fieldset h3 {color:#fff; font-size: 2em; line-height: 1.1em; margin: 15px 0px 16px 20px;} #form-container input.text {height: 36px; line-height:1.2em; font-size: 18px; padding:0px 12px 2px 12px; width: 381px; color:#333; background: #fff; margin: 0 0 15px 20px; font-family:Arial, Helvetica, sans-serif;} #form-container button { line-height: 18px; font-family: Georgia, "Times New Roman", Times, serif; font-size:1.5em; background:#ED75AD; color: #fff; border: none; margin: 0 20px 0 20px; padding: 7px 12px 11px 12px; height: 38px; float: right; display: block;} #form-container button:hover { background: #fff; color:#de0269; border: none; cursor: pointer;} #footer h3#donate {clear: right;} #footer h3#donate {margin: 0px 25px 0px 0; display: block; float: right; overflow: hidden; font-size: 1.24em; line-height: 1.33em; color:#fff; text-align: right; font-style: italic; background:#fc9300; padding:5px 20px 0px 20px; min-height: 27px; background: #fc9300 url(../images/bg/bg-banner-yellow-footer.png) left top repeat-y; width: 325px;} #footer h3#donate a {color: #94094a;text-decoration: none;} #footer h3#donate a:hover {background: #94094a; color:#fff; text-decoration: none;} /* sub-footer */ #sub-footer ul {display: block; margin: 0 0 0 12px;} #sub-footer ul li {list-style-type: none; float: left; margin: 0 0px 0 0; color:#575656; font-size: 1em;line-height: 1.5em;} #sub-footer ul li span {padding: 0 6px 0 6px; color:#575656;} #sub-footer ul li a {color:#0f67b2; font-size: 1em; text-decoration: none; padding: 4px 0 4px 0; } #sub-footer ul li a:hover {text-decoration: none; color:#de0269;} #sub-footer ul#colofon {float: right; margin: 0 15px 0 12px; text-align: right;} #sub-footer ul#colofon li {list-style-type: none; float: left; margin: 0 0 0 0px; color:#575656;} #sub-footer ul#colofon a#hetissimpel {list-style-type: none; background: transparent url(../images/icons/hetissimpel.png) 2px center no-repeat; padding-left: 22px; } } /* =============== PRINT styles */ @media print { }