/*@group Grid */ /*grid*/ .g {width: 950px;} .g-1 {width: 70px;} .g-2 {width: 150px;} .g-3 {width: 230px;} .g-4 {width: 310px;} .g-5 {width: 390px;} .g-6 {width: 470px;} .g-7 {width: 550px;} .g-8 {width: 630px;} .g-9 {width: 710px;} .g-10 {width: 790px;} .g-11 {width: 870px;} .g-12 {width: 950px;} /*padding*/ .p {padding: 10px;} .p-t {padding-top: 10px;} .p-r {padding-right: 10px;} .p-b {padding-bottom: 10px;} .p-l {padding-left: 10px;} .no-p{padding:0;} /*margin*/ .m {margin: 10px;} .m-t {margin-top: 10px;} .m-r {margin-right: 10px;} .m-b {margin-bottom: 10px;} .m-l {margin-left: 10px;} /*float*/ .f-l {float: left;} .f-r {float: right;} .c-l {clear: left;} .c-r {clear: right;} /*@end*/ /*@group Layout */ html {background: #7694a2 url(../images/bg_html.png) 0 0 repeat-x;color: #666;} body {color: #666;background: #7694a2 url(../images/bg_html.png) 0 0 repeat-x;font-family:verdana,arial,helvetica,clean,sans-serif;} #container {margin: 0 auto 50px;width: 970px;} #page-sign-up #container {background:#fff;} #top {padding: 0 10px;} #branding {background-repeat: no-repeat;background-color: #fff;background-position: 0 0;height: 182px;overflow: hidden;position: relative;} #shortcut-links{position:absolute;top:0;} #shortcut-links ul{margin:0;padding:0;position:absolute;top:0;} #shortcut-links ul li{display:inline;} #shortcut-links li a{overflow:hidden;top:-555em;width:100%;display:block;left:0;position:absolute;} /*html 5 setup*/ #logo a {position: absolute;top: 10px;left: 15px;} #strap {position: absolute;left: 280px;top: 55px;} .nav {position: absolute;top: 0;right: 10px;} .nav ul {position: absolute;top: 0;right: 10px;width: 402px;} .nav ul li {background: transparent url(../images/bg_nav.png) 0 0 no-repeat;float: left;display: inline;height: 31px;padding: 5px 0;width: 133px;margin-left: 1px;text-align: center;} .nav ul li a {display: block;font-size: 93%;font-weight: 700;color: #7d9baa;line-height: 1.5em;} .nav ul li a:hover {color: #d52b1e;} .section{background: #fff;width: 950px;padding: 10px;} .section.wide{width:790px;padding:10px 90px;} /*@end*/ /*@group Typography */ h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {color: #7d9baa;font-weight: 400;margin: 0 0 5px} h1.normal,.h1.normal,h2.normal,.h2.normal,h3.normal,.h3.normal,h4.normal,.h4.normal,h5.normal,.h5.normal {text-transform: none} h1,.h1 {font-size: 175%;font-weight: 700;} h2,.h2 {font-size: 174%;font-weight: 700;} h3,.h3 {font-size: 116%} h4,.h4 {font-size: 100%} h5,.h5 {font-size: 77%} .h1 span {line-height: 1.4em;padding: 4px;} a,a:link, a:active, a:visited {color: #999;outline: none;position: relative} a:hover {color: #F6550E;} p {color: #666;font-size: 93%;margin-bottom: 1em} strong,.strong {font-weight: 700} em {font-style: italic} hr {background: #b2b2b2;border:none;outline:none;color: #b2b2b2;height: 1px;margin: 6px 0;padding: 0} img {display: block;padding: 0} blockquote {font-size: 123.1%;margin: 0} ul {list-style: none;margin: 0} ul li {list-style: none} ul li a {color: #666;text-decoration: none} caption, legend {display: none} .red {color: #d52b1e} .blue {color: #7d9baa} .green {color: #8a2} .link-block {width:100px} .ltr .link-block{text-align: left;padding: 10px 20px 2px 5px;} .rtl .link-block{text-align: right;padding: 10px 5px 2px 20px;} a.link-block {text-decoration: none;} .block-red, a.block-red, a.block-red:link, a.block-red:focus, a.block-red:visited {background: #d52b1e;color: #fff;} .block-blue {background: #7d9baa;color: #fff;padding: 2px;} .block-green {background: #8a2;color: #fff;} .accessibility, legend{display:none;} .strong{font-weight:bold;} button{cursor:pointer;} /*@end*/ /**/ #footer {background: #666;color: #fff;position: relative;} #footer img{display:inline;float:left;} #footer-content span{font-size:85%;margin:12px 0 0 10px;float:left;} #footer p {color: #fff;padding: 10px 0 5px;margin:0;line-height:1.6em;font-size:73%;} #footer p a {color: #fff;text-decoration: none;} #footer ul {margin: 1px 0;} #footer ul li {float: left;display: inline;} #footer li a {color: #fff;text-decoration: none;border-left: 1px solid #fff;padding: 0 5px;display: block;font-size: 73%;font-weight: 400;} #footer ul li.first a {border: none;padding-left: 0;} #footer ul li a.last{padding-right:0;} #footer #lang-select-box {margin-top:41px;text-align:right;} #footer #lang-select-box span a{font-size:77%;color:#fff;text-decoration:none;padding-right:4px;margin-right:4px;border-right:1px solid #fff;} #footer #lang-select-box label, #footer #lang-select-box select {font-size: 77%;} /**/ /* @group Homepage */ #home-intro {min-height:266px;} #home-intro strong{color:#7d9baa;font-size:100%;} #home-intro a.block-red{color:#fff} #home-intro .step{border-top:1px dotted #8ba6b3;padding:8px 25px 8px 45px;background-position: 0 8px; background-repeat:no-repeat;background-color:#fff;min-height:34px;} .rtl #home-intro .step{background-position: 100% 8px;padding:8px 45px 8px 20px;} #home-intro .step.one{background-image:url(../images/home_step_1.png);} #home-intro .step.two{background-image:url(../images/home_step_2.png);} #home-intro .step.three{background-image:url(../images/home_step_3.png);} #home-intro .step p{margin:0;} #home-intro a{text-decoration:underline;color:#333;font-size:100%;} #donate-callout {min-height: 75px;border-top:1px solid #666;padding-top:10px;} #donate-callout .h3 {font-size: 116%;margin: 0;font-weight: 700;} #donate-callout p {font-size: 93%;} #donate-callout form {width: 130px;text-align: right;float: right;} #donate-callout form select {font-size: 77%;width: 130px;} #donate-callout form button {border: none;outline: none;margin-top: 1em;font-weight:400;} #featured-question h2, #featured-question h3 {margin-bottom: 5px;} #featured-question #main-question {margin-bottom: 5px;} #featured-options{padding-left:0;} #featured-options li {background: #fff;float: left;display: inline;margin: 5px 10px 5px 0;} #featured-options li.last {margin-right: 0;} #featured-options li button {background: #fff;outline: none;border: none;padding: 0;margin: 0;height: 40px;width: 230px;cursor: pointer;} #featured-options li img {display: block;background-repeat: no-repeat;background-color: #fff;} #map-holder {height: 393px;border: 1px solid #6f8090; overflow: auto;margin-bottom:5px;} #map-holder blockquote { margin: 10px; font-size: 100%; } #map-holder blockquote p { margin-bottom: 0; } #map-holder blockquote cite { font-weight: bold; display: block; font-size: 85%; } #map {position: relative;padding-top:6px;} #map label.answers-own-language { display: none; position: absolute; top: 10px; right: 10px; font-size: 77%; color: #fff; background: url(../images/bg_home_textarea.png) no-repeat scroll 0 0; padding: 9px 10px 7px 10px; z-index: 0;} .rtl #map label.answers-own-language{left:10px;right:auto;} #post-submit{min-height:162px;position:relative;} .rtl #post-submit{padding-right:10px;} #ajax-spin{background:transparent url(../images/ajax-loader.gif) 50% 50% no-repeat;width:370px;height:162px;position:absolute;top:0;left:0;} #home-answer-form{background:#6E95A5 url(../images/bg_white_strip.gif) 0 100% repeat-x;min-height:229px;} #share-opinion {margin:5px 0 0 5px;} #share-opinion label{color:#fff;font-weight:700;display:block;margin-bottom:3px;font-size:93%;} #share-opinion fieldset textarea {width: 360px;padding: 5px;font-size: 93%;height: 60px;margin:3px 0 5px;} #share-opinion fieldset button {border: none;outline: none;margin-top:1.5em;} #opinion-textarea label{padding-left:5px;} #opinion-name{float:left;width:250px;} #opinion-name input{width:240px;font-size: 93%;} #opinion-age{float:left;width:120px;padding-left:8px;} #opinion-age select{width:110px;font-size:85%;margin-top:3px;} .rtl #opinion-age select{text-align:left;} #answer-prompt p{color:#fff;border-bottom:1px dotted #fff;margin:0;padding:10px 0;font-size:135%;font-weight:700;margin:0 8px;} #opinion-textarea #fields-response-label{background:transparent url(../images/bg_fields_response_label.png) 0 0 no-repeat;min-height:24px;padding:10px 0 0 5px;width:367px;} #opinion-textarea #fields-response-label small{font-size:77%;} #freeform-success{padding: 10px;height:162px;} #opinion-details{margin-bottom:1em;} #json-response h3, #post-submit h3{color:#fff;margin-top:5px;} #json-response p{color:#fff;font-size:85%;} /* @end */ .thankyou-section p { color: #000000; } .thankyou-section .content { width: 460px; float: left; } .question-section {padding-top: 0px;} .options li {background-color:#fff;background-image:url(../images/bg_q_buttons.png); background-repeat:no-repeat;float: left;display: inline;margin: 5px 10px 5px 0;padding:0;} .options li button {outline: none;border: none;padding: 0;background:transparent url(../images/bg_q_structured.png) -10px 0 no-repeat;margin: 0;height: 40px;width: 217px;cursor: pointer;color:#fff;font-weight:700;padding:0 0 0 13px;font-size:1.2em;} .options li.last { margin-right: 0; } .option-1 {background-position: 5px 0;} .option-2 {background-position: 5px -35px;} .option-3 {background-position: 5px -70px;} .option-4 {background-position: 5px -105px;} .option-5 {background-position: 5px -140px;} .option-6 {background-position: 5px -175px;} .option-7 {background-position: 5px -210px;} .option-8 {background-position: 5px -245px;} .option-1-over {background-position: -220px 0;} .option-2-over {background-position: -220px -35px;} .option-3-over {background-position: -220px -70px;} .option-4-over {background-position: -220px -105px;} .option-5-over {background-position: -220px -140px;} .option-6-over {background-position: -220px -175px;} .option-7-over {background-position: -220px -210px;} .option-8-over {background-position: -220px -245px;} .q-option-1 {background-position: 5px 0;} .q-option-2 {background-position: 5px -45px;} .q-option-3 {background-position: 5px -90px;} .q-option-4 {background-position: 5px -135px;} .q-option-5 {background-position: 5px -180px;} .q-option-6 {background-position: 5px -225px;} .q-option-7 {background-position: 5px -270px;} .q-option-8 {background-position: 5px -315px;} .q-option-1-over {background-position: -220px 0;} .q-option-2-over {background-position: -220px -45px;} .q-option-3-over {background-position: -220px -90px;} .q-option-4-over {background-position: -220px -135px;} .q-option-5-over {background-position: -220px -180px;} .q-option-6-over {background-position: -220px -225px;} .q-option-7-over {background-position: -220px -270px;} .q-option-8-over {background-position: -220px -315px;} #question-options.options li button{outline: none;border: none;padding: 0;background:transparent url(../images/bg_q_structured.png) 0 0 no-repeat;margin: 0;height: 50px;width: 217px;cursor: pointer;color:#fff;font-weight:700;padding:0 0 8px 10px;font-size:1.1em;} /* @group signsup section */ .signup-section {padding-top: 0;height: 350px;position: relative;overflow: hidden;width:950px;margin:0 10px;} .blue-panel {height: 310px;} .blue-panel .break, .blue-panel .big-break {color: #ccd8de;background-color: #ccd8de;height: 1px;border: none;} .blue-panel label {display: block;} .blue-panel .smallprint label {display: inline;} .blue-panel .big-break {margin: 10px 0px 10px 0px;} button {border: none;margin-top:5px;} input.text {width: 210px;} label.male, label.female {width: 50px;height: 57px;background: transparent url(../images/icon_people.png) 0 0 no-repeat;position: relative;text-indent: -999px;overflow: hidden;float: left;} label.female {background-position: 0px -60px;} input.male, input.female {position: absolute;left: 25px;top: 45px;} form#signup {width: 1600px;position: relative;} #email-button {margin-bottom:10px;} .ajax-spinner {float:right;} /* @end */ /* @group slider */ #age-slider.ui-slider-horizontal .ui-state-default {width: 32px;height: 24px;margin-left: -16px;margin-top: -2px;border: none;background: transparent url(../images/icon_slider_handle.png) no-repeat scroll 50% 50%;} #age-slider.ui-slider-horizontal, #age-slider {border: none;width: 270px;height: 47px;} #age-slider.ui-slider-horizontal {margin-left:20px;} #age-wrapper { background: transparent url(../images/icon_slider_bg.png) no-repeat scroll 0px 0px; } /* @group ui slider */ .ui-slider {position: relative;text-align: left;} .ui-slider .ui-slider-handle {position: absolute;z-index: 2;width: 1.2em;height: 1.2em;cursor: default;} .ui-slider .ui-slider-range {position: absolute;z-index: 1;font-size: .7em;display: block;border: 0;} .ui-slider-horizontal {height: .8em;} .ui-slider-horizontal .ui-slider-handle {top: -.3em;margin-left: -.6em;} .ui-slider-horizontal .ui-slider-range {top: 0;height: 93%;} .ui-slider-horizontal .ui-slider-range-min {left: 0;} .ui-slider-horizontal .ui-slider-range-max {right: 0;} .ui-slider-vertical {width: .8em;height: 100px;} .ui-slider-vertical .ui-slider-handle {left: -.3em;margin-left: 0;margin-bottom: -.6em;} .ui-slider-vertical .ui-slider-range {left: 0;width: 93%;} .ui-slider-vertical .ui-slider-range-min {bottom: 0;} .ui-slider-vertical .ui-slider-range-max {top: 0;} /* @end */ /* @end */ /* @group answers page */ #map-results{position:relative;margin-top:20px;} #map-results h2{display:inline;} #map-results p{float:left;} #map-results select{float:right;margin:8px 0;} #map-results div.resultmap{border-top:1px dotted #7d9baa;border-bottom:1px dotted #7d9baa;padding:13px 0;} #map-select{font-size:77%;} #page-answers #results-sexes .g-6{position:relative;height:265px;border-top:1px dotted #7d9baa;border-bottom:1px dotted #7d9baa;padding:10px 0;} #page-answers #female{background-position:100% 10px;background-repeat:no-repeat;background-color:#fff;} #page-answers #female img{margin-left:0;} #page-answers #male{background-position:0 10px;background-repeat:no-repeat;background-color:#fff;} #page-answers #male li{text-align:right;} #page-answers #male img{margin-right:0;} #page-answers #results-sexes ul li{line-height:2.3em;color:#809ead;} #page-answers #results-sexes ul span{font-size:108%;font-weight:700;} #page-answers hr {height:2px;background:#7d9baa;color:#7d9baa;margin:10px 0;} #page-donate hr, #page-about hr, #page-share hr {height:1px;background:#E5EBEE;color:#E5EBEE;margin:6px 0 10px;} #page-about .f-l.managed-content h2{margin-top:1em;} .answer-footer{padding-bottom:30px;} .steps {float:left;margin:0px;font-size: 123.1%;color:#ffffff;font-weight:bold; width:825px;} .rtl .steps {float:right;} .answer-footer .steps { margin-top: 5px;} .steps .label {height:29px;line-height: 28px;background: #d52b1e;padding: 0px 20px 0px 10px;float:left;margin: 0px 2px 0px 0px;} .rtl .label{float:right;} .steps ol{background:#fff;height:18px;float:left;} .rtl .steps ol{float:right;} .steps li{float:left;display:inline;width:25px;height:29px;margin-right:3px;background: url(../images/bg_step_arrows.png);text-align:center;padding-right:10px;line-height:28px;} .rtl .steps li{background-image: url(../images/bg_step_arrows_rtl.png);background-position:0 0;padding: 0 0 0 10px;float:right;} .steps li.complete {background-position: 35px 0px;} .answer-1 { color: #5e7641; } .answer-2 { color: #93af2a; } .answer-3 { color: #674268; } .answer-4 { color: #a583bc; } .answer-5 { color: #62351c; } .answer-6 { color: #fdb414; } .answer-7 { color: #891b57; } .answer-8 { color: #f284ad; } .bg-chart-1 { background: #5e7641; } .bg-chart-2 { background: #93af2a; } .bg-chart-3 { background: #674268; } .bg-chart-4 { background: #a583bc; } .bg-chart-5 { background: #62351c; } .bg-chart-6 { background: #fdb414; } .bg-chart-7 { background: #891b57; } .bg-chart-8 { background: #f284ad; } #chart-graph{width:630px;height:30px;background:#e4e9ed;margin-bottom:1em;width:100%;} #chart-inner{height:30px;color:#fff;font-weight:700;font-size:108%;text-align:center;line-height:2em;} .under-18-warning{font-size:77%;} .button-question{float:right;background:#d52b1e url(../images/bg_step_next.png) 100% 0 no-repeat;padding:0 15px 0 8px;height:29px;width:100px;} .rtl .button-question{float:left;background-image:url(../images/bg_step_next_rtl.png);background-position:0 0;padding:0 8px 0 15px;} .es .button-question, .fr .button-question, .ar .button-question{font-size:85%;} .answer-footer .button-question { margin-top: 5px;} .button-question .button{color:#fff;padding-top:8px;display:block;font-size:77%;font-weight:700;text-decoration:none;} .button-question .button a{color:#fff;} .pie-result .header h3{float:left;font-weight:700;} .pie-result .header select{float:left;font-size:77%;margin:2px 15px;} .pie{border-top:1px dotted #b2b2b2;padding-top:10px;margin-top:5px;} .pie h3{font-size:108%;font-weight:700;color:#000;} #chart-splash h2{font-size:100%;font-weight:700;} #chart-splash .top{border-bottom:1px solid #b3c5ce;padding-bottom:3px;margin-bottom:5px;} .ltr #sign-up-panels{float:left;} .rtl #sign-up-panels{float:right;} #signup h3.top{font-size:108%;font-weight:700;padding-bottom:7px;border-bottom:1px solid #b3c5ce;margin-bottom:5px;padding-left:14px;} #page-sign-up hr{height:1px;} #fields-name{width:282px;margin-bottom:6px;} #fields-email{width:252px;margin-bottom:14px;} #panel-1{padding-left:4px;width:306px;} #panel-1 .form-row{margin:0 0 8px;background:transparent url(../images/bg_email_signup_field.png) 0 0 no-repeat;padding:7px 0 10px 10px;} .rtl #panel-1 .form-row{padding:7px 25px 10px 0;} #panel-1 label, #panel-2 label{font-weight:700;font-size:100%;padding-bottom:10px;color:#7D9BAA;} #panel-1 label{color:#fff;padding-bottom:5px;} #panel-2 #gender-picker label{padding-bottom:3px;} .rtl #panel-2 #gender-picker label{float:right;} #panel-2 .p, #panel-3 .p{padding-top:0;font-size:85%;} #panel-3 input{font-size:85%;} #panel-3 label{font-size:77%;} .arrow-button{background:#d52b1e url(../images/bg_step_next.png) 100% 0 no-repeat;padding:0 15px 0 8px;height:29px;width:100px;color:#fff;text-align:left;font-weight:700;} .rtl .arrow-button{background-image:url(../images/bg_step_next_rtl.png);background-position:0 0 ;padding:0 8px 0 15px;} #gender-picker{min-height:85px;} #page-sign-up h1.h1{margin:20px 0;} #chart-splash h4{font-size:108%;font-weight:700;} #fields-first-name, #fields-last-name{float:left;width:110px;margin-right:10px;color:#666;} .rtl #fields-first-name, .rtl #fields-last-name{float:right;margin:0 0 0 10px;} /* @end */ #page-privacy-policy h3, #page-terms-and-conditions h3{font-weight:700;color:#666;} .g-6 ul li a:link, .g-6 ul li a:focus, .g-6 ul li a:active{font-size:93%;color:#666;} .g-6 ul li a:hover{color:#D52A1D;} .helper-text{color:#7D9BAA;font-weight:700;font-size:100%;} .managed-content ul{margin:.5em 0;} .managed-content ul li{list-style:disc;margin-left:1em;} /*js*/ .js #map-holder{overflow:hidden;} .js #map label.answers-own-language {display:block;width:300px;} .js .pie{display:none} .js .ajax-spinner{display:none;} .js #signup h3.top{color:#fff;} .js #post-submit h2{color:#fff;margin:.3em 0;} .js #post-submit p{color:#fff} .js #json-response h2, .js #json-response p{color:#fff;} .navigation p { margin: 15px 0px 0px 0px; } .managed-content h2 { font-size: 123.1%; } .section-about .managed-content h2 {font-size: 174%;} .managed-content p { line-height: 1.2em;} .managed-content ul { margin: 7px; padding: 0px;} .managed-content li { font-size: 93%; line-height: 1.4em;} ul.donate { list-style: none; margin: 0px 0px 15px 0px; padding: 0; float: left;} ul.donate li { list-style: none; padding: 2px 5px 2px 10px; margin: 0; border-bottom: 1px dotted #7f9dac; width:219px; font-size: 100%;} #page-about ul.donate li{width:295px;} .managed-content ul.donate li a { color: #7f9dac; font-weight: bold; } .managed-content ul.donate li a:hover { color: #D52A1D; } #page-questions .block-blue, #page-answers .block-blue{padding:8px;} #question-copy {background: #529daa url(../images/bg_question_copy.png) -1px 100% no-repeat;margin-top:38px;min-height:590px;margin-bottom:15px;width:375px;} #question-copy .wrapper { background: transparent url(../images/bg_quote_right.png) bottom right no-repeat;} #question-copy blockquote { display: block; padding: 40px 45px; background: url(../images/bg_quote_left.png) top left no-repeat; } #question-copy blockquote, #question-copy blockquote p { font-size: 116%; color: #fff; font-weight: 400; line-height: 1.2em; } #question-copy blockquote a{color:#fff;} #question-copy h3, #question-copy .strong{color:#fff;font-weight:700;} .disclaimer{text-align:right;font-size:85%;margin-bottom:5px;} .warning { color: #ff0000;font-size:77%;margin:.5em 0;} /* @end */ /* @group share page */ form#send-email fieldset { float:left; width:225px; background:#7694a2; color:#fff; padding:5px 0; } #send-email .top {padding-top:10px;border-bottom:1px dotted #fff;} #send-email .bottom {padding-bottom:10px;} #send-email label {font-weight:bold;margin:10px 10px 5px;} #send-email input {width:205px;margin:5px 10px;} #send-email p {clear:both;padding-top:1em;} /* @end */ .rtl #page-home #main-content .article-entry{margin-left:10px;} .rtl #standard-question.f-l{float:right;} /**/ /*@group Notes */ /* - Text Colours - red: #d52b1e blue: #7d9baa green: #8a2 - Font sizes - px % 10 77 11 85 12 93 13 100 14 108 15 116 16 123.1 17 131 18 138.5 19 146.5 20 153.9 21 161.6 22 167 23 174 24 182 25 189 26 197 30 230 */ /*@end*/ /*@group Fixes*/ .c:after {clear: both;content: ".";display: block;height: 0;visibility: hidden} .c {display: inline-table} /* FILTERS hide from IE-mac \ */ .c {display: block} /* end hide from IE-mac */ /*@end*/