MediaWiki:SXSW-2015-poll-style

/* The whole poll */

ol.ss-question-list { margin-left:0!important }

/* Alternating backgrounds */

.even { background-color:#ffffff; border:none; width:90%; /* width is attempt to match .pollintro gutter with right rail */ padding:20px; margin-top:20px; /*let's initially try top margins only on evens */ } .odd { background-color:#eeeeee; border:none;

padding:20px; }

/* This defines the text of the orange header for each voting category, like "Most Valuable  Online Channel" and the like */

.ss-q-title { color:#fe5a35; margin-bottom:5px; font-size:24px; font-weight:bold; letter-spacing:.5px; /* Hard to tell without the .psd file, but the question titles on the mock appear to have slight letter-spacing */ }

/* This isn't actually used, but would be what we'd use if we wanted to style the subhead for each voting category, as given on the DES mock */

.ss-q-title-subhead { color:#787878; margin-bottom:20px; font-weight:bold; font-size:18px; }

/* Question options */

ul.ss-choices { list-style:none; margin-left:0 }

.ss-choice-label { color:#666; line-height:200%; font-size:1em; letter-spacing:.5px; }

.ss-q-radio { margin-right:10px /* mock calls for 10px between radio and first letter in                              option */ }

/* Button at the bottom */

input#ss-submit.jfk-button.jfk-button-action { background-image:none; height:30px; font-weight:900; font-size:.9em; text-transform:uppercase; letter-spacing:.5px; width:695px; background-color:#006faf; color:#ffffff; margin:0 auto; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -border-radius:0; -webkit-appearance:none; /*suppress iOS button styling*/ -moz-appearance:none; -ms-appearance:none; }
 * 1) ss-submit,

/* ==================   MOBILE SHENANIGANS ================== */

@media only screen and (max-width:769px) {

input#ss-submit.jfk-button.jfk-button-action { -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; width:100%!important; /*background:none!important;*/ background-color:#006faf; padding:5px; height:36px; }       #front-page-right-column { margin:2%!important; }
 * 1) ss-submit,

} @media only screen and (max-width:750px) and (orientation:portrait) {

/* This needs to be slightly less than our actual break point of 786px in order to work on iPhone but not iPad (mini) */

.odd, .even { padding:10px!important; width:inherit; margin-left:0; font-size:80%; }        .maincolumn, ol.ss-question-list { margin-left:0!important }

.pollintro { width:80%!important; } } /* This is probably no longer necessary, after finding iOS button workaround Original purpose was to change button styling on  larger devices in landscape

@media only screen and (min-width:769px) and (max-width:1050px) and (orientation:landscape) {

#ss-submit { -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius:0; border-radius:0; width:200%!important; background:none!important; background-color:#006faf; color:black!important; }

}



/* Mock calls for styling of the article comments section, which doesn't currently exist. These are "dummy" CSS selectors — but the real color value — just in case we want to add the styling on the live page.

.blog-comment-horizontal lines, .blog-comment-header { color:#666 }