<style>
/* The whole poll */
ol.ss-question-list {
margin-left:0!important;
padding-left:0
}
/* 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 */
- ss-submit,
input#ss-submit.jfk-button.jfk-button-action {
background-image:none;
height:30px;
border:none;
font-weight:900;
font-size:.9em;
text-transform:uppercase;
letter-spacing:.5px;
width:670px;
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;
} input[type="submit"] {
-webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; border-radius:0; width:196px; height:32px; background: #006faf; color:#fff; font-family:Helvetica,Arial,sans-serif; text-transform:uppercase; font-weight:900; font-size:14px; border:none;
}
- ss-submit:hover,
input#ss-submit.jfk-button.jfk-button-action:hover, input[type="submit"]:hover {
background:#0a5fa3;
}
/* ==================
MOBILE SHENANIGANS ================== */
@media only screen and (max-width:769px) {
- ss-submit,
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;
}
}
@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;
}
.desktop { display: none!important }
.mobile {
display:block!important;
margin:0 auto;
}
}
/* 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 }
- /
</style>