canvas {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

[hidden] {
    display: none;
}

html {
    font-size: 100%; /* 1 */
    overflow-y: scroll; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    -ms-text-size-adjust: 100%; /* 3 */
}

body,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, 
strong { 
    font-weight: bold; 
}

blockquote {
    margin: 1em 40px;
}

pre {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

small {
    font-size: 75%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ul,
ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

form {
    margin: 0;
}

/*
  ******* MDN approved hack ********
  
  fieldsets are not responsive in gecko based broswers and allow content to push
  past it's borders. This allows us to target only the gecko browser to change the display type.
  This breaks in IE without the -moz-document target.
*/
@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
    min-width: 0;
}

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
    max-width: 95%;
}

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

button,
input {
    line-height: normal; /* 1 */
}

button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/****** begin survey css *****************/
body {
margin: 0;
text-align: center;
background-color: #252626;
font-size: 15px;
}

#surveyContent {
width: auto;
max-width: 650px;
font-family:Georgia;
color: #424545;
font-size: 100.01%;
margin-right: auto;
margin-left: auto;
margin-top: 1.5em;
text-align: left;
background-color: #FFFFFF;
line-height: 1.4em;
}

#surveyLogo {
background-image:  url("header_gallup.gif");
background-repeat: no-repeat;
background-position: 1.5em 1em;
background-color: #595b5c;
height: 65px;
}

#surveyBanner {
padding-top: 0em;
}

.surveyTitle {
font-size: 1.4em;
text-align:center;
display: block;
color: #007934;
width: 100%;
margin: 0.2em auto 0.5em auto;
line-height: 1.6em;
}

#surveyBody {
padding-left: 1.5em;
padding-right: 1.5em;
padding-top: 1.5em;
}

.plainText {
font-size: .95em;
}

.subLinks {
color: #424545;
font-size: 0.8em;
text-decoration: underline;
display:block;
padding-top:2em;
text-align:center;
}

.subLinks a {
color: #424545;
text-decoration: underline;
}

.subLinks a:active {
color: #595b5c;
}

.subLinks a:visited {
color: #595b5c;
}

.subLinks a:hover, .subLinks a:focus {
color: #8e908f;
}

.submitSurvey {
font-style: italic;
}

.submitButton { 
padding: 7px; 
cursor: pointer; 
font-family: Arial, Verdana, sans-serif; 
font-size: 0.7em;
margin : 25px 0 0 0; 
background-color: #424545; 
border: none; 
color: #ffffff; 
text-transform : uppercase;
}

.submitButton:hover, .submitButton:focus {
background-color: #252626;
}

#surveyFooter {
background-color: #252626;
font-family: Arial, Helvetica, sans-serif;
color: #e0e0e0;
text-align: left;
line-height: normal;
}

#surveyFooter span {
margin-right: 0;
text-align: left;
}

#surveyFooter A {
color: #999999;
}

#surveyFooter A:active {
color: #999999;
}

#surveyFooter A:visited {
color: #999999;
}

#surveyFooter A:hover, #surveyFooter A:focus {
color: #b5b6b3;
}

hr {
margin: 1em 0 1em 0;	
}

.heading {
font-size: 1em;
font-weight: bold;
margin: .6em 0 .4em 0;
display: block;
}

.large {
font-size: .95em;
font-weight: bold;
margin: .6em 0 .4em 0;
}

.progressContainer{
border:none;
margin-left:1.3em;
}

html>body #progressContainer  {
border:none;
margin-left:10px;
}

html>/**/body .progressContainer  {
border:none;
margin-left:10px;
}

.progressHousing {
width: 205px; 
height: 12px; 
padding: 0; 
border: none;
background-color: #EAEAEA;
overflow:hidden;
}

.progressBar {
width: 66%; 
height: 12px; 
background-color: #007934; 
color: inherit;
border: none;
overflow:hidden;
}

.progressTextLeft {
font-size: 0.8em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:right;
float:left;
width: 177px;
margin: 0 auto;
display: block;
}

.progressTextRight {
font-size: 0.8em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:left;
float:left;
width: 177px;
margin: 0 auto;
display: block;
padding-left: 4px;
}

.progress {
float:left;
width: 205px;
margin: 0 auto;
padding: 5px;
display: block;
}

select {
font-size: .8em;	
}

p {
line-height: 1.4;
margin: .5em 0 0 0;
}

label {
margin: 0 0 0 0;
line-height: 1.2;
}

form {
margin: 0;	
}

textarea {
display: block;	
}

.paragraph {
clear: both;
display: block;
margin: 1em 0 1em 0;
}

.inline {
display: inline;	
}

.nowrap {
white-space: nowrap;
}

.verticalSpacing {
clear: both;
margin: 1em 0 1em 0;
}

.topMargin {
clear: both;
margin-top: 1em;
display: block;
}

.topMargin2 {
clear: both;
margin-top: 2em;
display: block;
}

.topMargin3 {
clear: both;
margin-top: 3em;
display: block;
}

.topMargin4 {
clear: both;
margin-top: 4em;
display: block;
}

.bottomMargin {
margin-bottom: 1em;
display: block;
}

.leftMargin {
margin-left: 1em;
display: block;
}

.leftMarginSmall {
margin-left: .3em;
display: block;
}

.rightMargin {
margin-right: 1em;
display: block;
}

.noTopMargin {
margin-top: 0;	
}

.bold {
font-weight: bold;
}

.italic {
font-style: italic;
}

.center {
text-align: center;
}

.error {
color: #cc0000;
}

.success {
color: #0000cc;	
}

.small {
font-size: .7em;
}

.normal {
font-size: .8em;	
}

.footer {
font-size: .7em;
}

.copyright {
font-size: .6em;
}

#surveyFooter .whiteBackground {
background-color: #FFFFFF;
    color:#000000;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0;
padding-top:3em;
padding-bottom: 1em;
font-size: .6em;
}

.underline {
text-decoration: underline;	
}

.wholeLine {
display: block;	
}

.clearer {
clear: both;
}

.fieldsetClear {
clear: both;
height: 0;
line-height: 0;
}

.verticalDivider {
border-left: 1px solid #b5b6b3;
margin-left: 0.8em;
padding-right: 0.8em;
margin-top: 0.6em;
height: 5.4em;
float:left;
}

.verticalDivider2 {
border-left: 1px solid #b5b6b3;
margin-left: 0.8em;
padding-right: 0.8em;
margin-top: 0.6em;
height: 7em;
float:left;
}

.verticalDivider3 {
border-left: 1px solid #b5b6b3;
margin-left: 0.8em;
padding-right: 0.8em;
margin-top: 0.6em;
height: 9em;
float:left;
}

.horizontalDivider {
border: none;
border-top: 1px solid #b5b6b3;
}

.survey_box {
background-color: #eaeaea;
margin: 1em auto -0.5em;
display: block;
border: none;
padding: 1.2em 1.0em 1.2em 1.2em;
font-size: 0.95em;
}

.survey_box fieldset {
	border: medium none;
}

.survey_box .paragraph {
    margin: 0.5em 0 0;
}
.survey_box .ladder {
float: left;
}

.survey_box .ladderComponents {
float: right;
width: 33em;
}

.survey_box .ladderComponents .radioDiv {
padding-top: .75em;
padding-bottom: 2.34em;
}

.multibox_container {
margin: 1em auto;
}

.survey_box_alt1 {
background-color: #eaeaea;
margin: auto;
display: block;
border: none;
padding: 0.8em 1.0em 0.5em 1.2em;
font-size: 0.95em;
}

.survey_box_alt2 {
background-color: #f5f5f5;
margin: auto;
display: block;
border: none;
padding: 0.8em 1.0em 0.5em 1.2em;
font-size: 0.95em;
}

#login {
width: 25em;
text-align: center;
}

.languageSelectBox select {
display: block;
margin: 1em 0 1em 0;
}

.radioButton {
clear: both;
float: left;
margin-top: 3px;
}

.radioLabel {
display: block;
margin-left: .5em;
float: left;
width: 90%;
}

.radioDiv {
clear: both;
padding-top: .2em;
}

.radioButton:focus{
outline: thin dotted;
}

.hidden {
visibility: hidden;
height: 0;
}

.breakLabel input {
display: block;
}

.xptxScale {
color: #595b5c;
font-size: .8em;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
line-height: normal;
}

.scaleValueGrid {
padding-top: 1em;
}

.scaleValue, .likert, .yesNo, .multipleChoice, .xptx, .xptx ul {
list-style: none;
padding: 0;
margin-left: 0;
margin-right: 0;

}


.xptx li.xptxLi {
clear: both;
border-bottom: 1px solid #d5d6d2;
}

.scaleValue li, .likert li, .yesNo li, .xptx ul li {
float: left;
text-align: center;
}

.multipleChoice li {
clear: both;	
}

.scaleValue li label, .likert li label, .yesNo li label, .xptx ul li label {
display: block;
margin: .5em 0 .5em 0;
color: #595b5c;
font-size: .8em;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
vertical-align: bottom;

}


.likert5pt li label, .likert li label {
width: 9.6em;
margin: 0.3em 0 0.5em 0;

}

.likert5pt1 li label {
width: 7.9em;
margin: 0.3em 0 0.5em 0;
}

.likert5pt2 li label {
width: 6.7em;
margin: 0.3em 0 0.5em 0;
}

.likert5pt3 li label {
width: 5.9em;
margin: 0.3em 0 0.5em 0;
}

.yesNo li label {
width: 10em;	
}

table.yesNo {
width: 100%;
}

.xptx2 ul li label {
width: 15em;	
}

.xptx3 ul li label {
width: 12.5em;	
}

.xptx4 ul li label {
width: 9.5em;
}

.xptx5 ul li label {
width: 7.6em;
}
	
.scaleValue li label.scaleText span, .likert li label.scaleText span, .yesNo li label.scaleText span, .xptx 

ul li label.scaleText span {
height: 4em;
width: 100%;
display: block;
}

ul li label.scaleText2 span, .scaleValue li label.scaleText2 span, .likert li label.scaleText2 span, .yesNo li label.scaleText2 span, .xptx ul li label.scaleText2 span {
height: 6em;
width: 100%;
display: block;
}

ul li label.scaleText3 span, .scaleValue li label.scaleText3 span, .likert li label.scaleText3 span, .yesNo li label.scaleText3 span, .xptx ul li label.scaleText3 span {
height: 8.5em;
width: 100%;
display: block;
}

.shortLabels .xptx ul li label.scaleText span, .shortLabels li label.scaleText span {
height: 1.5em;

}

.scaleValue li .radioButton, .likert li .radioButton, .yesNo li .radioButton, .xptx ul li .radioButton {
float: none;

}

.xptx li.hideLabels ul li label span, .shortLabels .xptx li.hideLabels ul li label span {
visibility: hidden;
height: 0;
line-height: 0;

}

/*** all this for non-wrapping scale text **/

.multiColumnSpanning .scaleText {
margin-bottom: 3.5em;
padding-top: 1em;
}

/** For IE 7 ***/
*:first-child+html .multiColumnSpanning .scaleText, * html .multiColumnSpanning .scaleText {
margin-bottom: 3em;
}

li.hideLabels .multiColumnSpanning .scaleText {
margin-bottom: 0em;
}

.multiColumnSpanning .scaleText span {
white-space: nowrap;

}

/** For IE 7 ***/
*:first-child+html .multiColumnSpanning .scaleText span, * html .multiColumnSpanning .scaleText span {
margin-left: -2em;

}

li.hideLabels .multiColumnSpanning .scaleText span {
position:static;
white-space: normal;
}

/*** END all this for non-wrapping scale text **/

.questionTextLeft {
float: left;
width: 12.0em;
margin: 0;
padding-left: 0em;
font-family: Arial, Helvetica, sans-serif;
color: #595b5c;
font-size: 0.8em;
line-height: 1.5em;
}

/** For IE 7
*:first-child+html .questionTextLeft, * html .questionTextLeft {
margin-top: 0;	
} ***/

.shortLabels .questionTextLeft {
margin: 3.3em 0 0 0;
}

/** For IE 7 
*:first-child+html .shortLabels .questionTextLeft, * html .shortLabels .questionTextLeft {
margin-top: 2.3em;	
}***/

.xptx li .questionTextLeft {
margin: 5.2em 0 1.5em 0;
}

/**
*:first-child+html .xptx li .questionTextLeft, * html .xptx li .questionTextLeft {
margin: 5.8em 0 .5em 0;	
}

.xptx li.hideLabels .questionTextLeft {
margin: 1.5em 0 1.5em 0;
}


*:first-child+html .xptx li.hideLabels .questionTextLeft, * html .xptx li.hideLabels .questionTextLeft {
margin: 3.1em 0 .5em 0;	
}

.shortLabels .xptx li .questionTextLeft {
margin: 2.5em 0 1.5em 0;
}


*:first-child+html .shortLabels .xptx li .questionTextLeft, * html .shortLabels .xptx li .questionTextLeft {
margin: 3.5em 0 .5em 0;	
}

.shortLabels .xptx li.hideLabels .questionTextLeft {
margin: 1.1em 0 1.1em 0;
}


*:first-child+html .shortLabels .xptx li.hideLabels .questionTextLeft, * html .shortLabels .xptx li.hideLabels .questionTextLeft {
margin: 2.5em 0 .5em 0;	
}
For IE 7 ***/

*:first-child+html .scaleValue li, 
*:first-child+html .likert li, 
*:first-child+html .yesNo li, 
*:first-child+html .xptx ul li {
margin-bottom: -1.5em;
padding-bottom: 0;
}

*:first-child+html .horizontalDivider {
height:1px;
color:#b5b6b3;

}

.timeProgressHousing {
width: 205px; 
height: 10px; 
padding: 0; 
border: none;
background-color: #eaeaea;
display: block;
}

.timeProgressBar {
width: 66%; 
height: 10px; 
background-color: #007934; 
color: inherit;
border: none;
}

.timeProgress {
width: 205px;
margin: 0 auto;
padding: 5px;
display: block;
}

/* Smartphones (portrait and landscape) ----------- */
@media screen
and (min-width : 0px)
and (max-width : 675px) {
#login {
width: 90%;	
}
body {
padding: 5px;
}
#surveyBody {
padding-left: .5em;
padding-right: .5em;
padding-top: .5em;
}
#surveyContent {
margin-top: 0;
}
.survey_box {
padding: .5em 1.0em .5em 1.0em;
}
.submitButton {
font-size: 1em;
padding: 16px;
margin-top: 40px;
}
textarea, input, select {
min-width: 20px;
font-size: 16px;
}
    textarea, input {
        max-width: 95%;
    }
    select {
        width: 215px;
    }
textarea {
margin-bottom: 5px;
}
.radioDiv {
height:1.2em;
margin-bottom: .5em;
}
.ladderComponents .radioDiv {
height: auto;
margin-bottom:.1em;
}
.verticalDividerWrapper {
clear:both;
width: 100%;
}
.verticalDivider, .verticalDivider2, .verticalDivider3 {
height:1px;
border-top: 1px solid #B5B6B3;
border-left: none;
padding:0;
width:100%;
margin-left:0;
}
.extraScale {
clear:both;
margin:1em 0 .5em 0;
width: 100%;
text-align:left;
}
.yesNoTable {
width: 100%;
}
.likert5pt1 li, .likert5pt li, .likert li, .likert5pt2 li, .likert5pt3 li {
width: 20%;
}
.scaleValue li.extraScale, .scaleValue li.verticalDividerWrapper {
width:100%;
}
.scaleValue li.extraScale label.scaleText, .likert li.extraScale label.scaleText, .yesNo li.extraScale label.scaleText, .xptx ul li.extraScale label.scaleText {
float:right;
width:93%;
text-align:left;
white-space:nowrap;
}
.scaleValue li.extraScale label.scaleText span, .likert li.extraScale label.scaleText span, .yesNo li.extraScale label.scaleText span, .xptx ul li.extraScale label.scaleText span {
height: auto;
}
.likert li .scaleText {
height: 40px;
        font-size: 0.55em;
}
.likert5pt li label, .likert li label, .likert5pt1 li label, .likert5pt2 li label, .likert5pt3 li label {
width: 100%;
}
.survey_box .questionTextLeft {
float: none;
}
.xptx2 ul li {
width: 50%;
}
.xptx3 ul li {
width: 33.3333%;
}
.xptx4 ul li {
width: 25%;
}
.xptx5 ul li {
width: 20%;
}
.xptx2 ul li label, .xptx3 ul li label, .xptx4 ul li label, .xptx5 ul li label {
width: 100%;
}
.survey_box .ladderComponents {
width: 60%;
float: left;
margin-left: 1em;
}
.survey_box .ladderComponents .radioLabel {
width: 75%;
}
}

/* Smartphones (landscape) ----------- */
@media screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media screen
and (max-width : 479px) {
/* Styles */
.radioLabel {
width: 85%;
}
.scaleValue li.extraScale label.scaleText, .likert li.extraScale label.scaleText, .yesNo li.extraScale label.scaleText, .xptx ul li.extraScale label.scaleText {
width:90%;
}
}

/* Smartphones (portrait) ----------- */
@media screen
and (max-width : 319px) {
/* Styles */
.radioLabel {
width: 75%;
}
.scaleValue li.extraScale label.scaleText, .likert li.extraScale label.scaleText, .yesNo li.extraScale label.scaleText, .xptx ul li.extraScale label.scaleText {
width:80%;
}
.survey_box .ladderComponents {
width: 50%;
}
}

/* iPads (portrait and landscape) ----------- */
@media screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
screen and (-webkit-min-device-pixel-ratio : 1.5),
screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* Styles for the Flash video player */
.surveyFlashContainer {
    margin: 1.5em auto;
}