.main-title, h1, h2 { text-align: center } body { background: #fff; font: 16px/24px roboto, Arial, sans-serif; color: #333; -webkit-font-smoothing: antialiased!important } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; font-family: inherit; font-weight: 700; line-height: 20px; color: inherit; text-rendering: optimizelegibility } h1, h2 { text-transform: uppercase; font-weight: 300; color: #E48942; font-size: 44px; line-height: 48px } .main-title { margin-top: 10px; margin-bottom: 10px } .main-title h2, .main-title p { font-size: 26px; font-weight: 300; margin-top: -5px; text-align: center; line-height: 30px; color: #333; text-transform: none } h2 span, h3 { font-size: 24px; font-weight: 300 } h2 { font-size: 32px; line-height: 30px; margin-bottom: 15px } footer h2, h3 { margin-bottom: 10px } h2 span { text-transform: none; display: block } h3 { text-transform: uppercase; line-height: 28px; color: #E48942 } footer h2 { text-transform: none; font-weight: 600; text-align: left; font-size: 22px; color: #fff } #copy, #top-wizard { text-align: center } .backward, .button_medium, .button_medium_2, .forward { cursor: pointer; outline: 0; display: inline-block; font-weight: 600; text-transform: uppercase } h4 { font-size: 18px; ine-height: 22px } h5 { font-size: 14px; line-height: 14px } footer h5 { color: #555 } h6 { font-size: 12px } p { margin: 0 0 20px } ol, ul { padding: 0; margin: 0 0 30px; list-style: none } ol ol, ol ul, ul ol, ul ul { margin-bottom: 0 } li { line-height: 20px } hr { border: 0; border-top: 1px solid #dfdfdf } .button_medium { border: none; background: #282828; color: #fff; -moz-transition: background .5s ease; -webkit-transition: background .5s ease; -o-transition: background .5s ease } .button_medium, .button_medium_2 { text-decoration: none; padding: 7px 20px; transition: background .5s ease } .button_medium:hover, a.button_medium:hover { background: #00aeef; color: #fff } .button_medium_2 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 2px solid #282828; color: #282828; -moz-transition: background .5s ease; -webkit-transition: background .5s ease; -o-transition: background .5s ease; background: #fff } a.button_medium_2:hover { background: #00aeef; color: #fff; border: 2px solid #00aeef } .backward, .forward { border: none; color: #fff; text-decoration: none; transition: background .5s ease; -moz-transition: background .5s ease; -webkit-transition: background .5s ease; -o-transition: background .5s ease; background: #282828; position: relative } .backward:before, .forward:before { font-family: FontAwesome; text-decoration: inherit; position: absolute; font-weight: 400; top: 8px; text-transform: none; font-size: 9px } .backward { padding: 7px 20px 7px 30px } button[disabled].backward, button[disabled].forward { border: none; background: #ccc; outline: 0 } .backward:before { content: "\f053"; left: 20px } .forward { padding: 7px 30px 7px 20px } .forward:before { content: "\f054"; right: 20px } .backward:hover, .forward:hover { background: #39bfc9; color: #fff } header { padding: 10px 0; width: 100%; background-color: #39bfc9 } #logo a { text-indent: -99999px; background: url(../img/logo_small.png) no-repeat; display: block; height: 35px; width: 127px } #top-nav ul { float: right; margin: 8px -10px 0 0; padding: 0; font-weight: 300 } #top-nav ul a { color: #fff; text-decoration: none } #top-nav ul a#active, #top-nav ul a:hover { color: #323232 } #top-nav ul li { float: left; padding-left: 10px; margin-right: 10px } #top-nav ul li:first-child { background: 0 0 } .btn-responsive-menu { display: none; float: right; padding: 5px; cursor: pointer; margin: 0 20px 0 0; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: #333; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px } .bar { display: block; width: 18px; height: 2px; margin: 5px; background: #fff; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .show { display: block!important } #main { padding-bottom: 60px } footer { width: 100%; background: #ffffff; padding: 30px 0 0; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25) } footer a { color: #FF9 } #footer_2 { width: 100%; background: #252525 } #footer_2 a { color: #888 } #footer_2 a:hover { color: #fff } ul#footer-nav { color: #fff; margin: 25px 0 10px } .ui-widget-content a, .ui-widget-header a { color: #222 } ul#footer-nav li:first-child { margin-right: 30px } ul#footer-nav li { display: inline-block; zoom: 1; margin-right: 10px } #copy { padding: 15px 0; background-color: #f8f8f8; font-size: 11px } #contact { background: url(../img/contact_map.png) 20% 50px no-repeat } #top-wizard { padding: 15px 120px; background-color: #f3f3f3; border-bottom: 1px solid #e7e7e7; position: relative; text-transform: uppercase; font-size: 14px } .shadow { width: 100%; height: 6px; position: absolute; left: 0; bottom: -6px; background: url(../img/shadow_top_form.png) center top no-repeat } .ui-widget-content { background: #fff; color: #222 } .ui-widget-header { background: #E48942 } .ui-progressbar { height: 2em; text-align: left } #bottom-wizard, #complete, #complete h3, #toTop { text-align: center } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100% } #survey_container, .ie8 #survey_container { position: relative; background-color: #fff; margin-bottom: 30px; z-index: 9 } #survey_container { box-shadow: 0 0 5px #777; margin-top: 0 } .ie8 #survey_container { border: 1px solid #ddd; margin-top: 30px } #middle-wizard { padding: 30px 125px 35px } #bottom-wizard { padding: 15px 120px; border-top: 1px solid #e7e7e7; background-color: #f3f3f3 } #complete { padding: 0 45px 35px } #complete h3 { margin-bottom: 40px } #complete i { color: #cacaca; margin: 0 0 10px; font-size: 160px; padding: 0 } #complete button { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 18px; border: 2px solid #8dc63f; color: #8dc63f; padding: 15px 35px; text-decoration: none; transition: background .5s ease; -moz-transition: background .5s ease; -webkit-transition: background .5s ease; -o-transition: background .5s ease; display: inline-block; cursor: pointer; font-weight: 600; text-transform: uppercase; outline: 0; background: #fff } #complete button:hover { background: #00aeef; color: #fff; border: 2px solid #00aeef } .form-control::-moz-placeholder { color: #999; opacity: 1 } .form-control::-webkit-input-placeholder { color: #999 } input.form-control, select.form-control, textarea.form-control { background: #fbfbfb; border: 2px solid #d5d5d5; border-radius: 0; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; color: #646464; min-height: 44px; font-size: 16px; font-weight: 400; line-height: 1.428571429; padding: 6px 12px; width: 100%!important } .form-control:focus { border-color: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; color: #555 } .styled-select select { background: 0 0; width: 107%; padding: 5px 30px 5px 15px; border: 0; border-radius: 0; height: 41px; margin: 0; font-weight: 400; -moz-appearance: none; -webkit-appearance: none; cursor: pointer } .styled-select { width: 100%; overflow: hidden; height: 44px; background: url(../img/down_arrow_select.png) 98% center no-repeat #fbfbfb; border: 2px solid #d5d5d5; margin-bottom: 20px; border-radius: 10px } ul.floated, ul.floated li { margin: 0; padding: 0 } .styled-select select::-ms-expand, .styled-select-2 select::-ms-expand { display: none } ul.floated li { float: left; width: 30% } label.label_gender { padding-left: 50px; line-height: 42px } ul.floated li#age { width: 100px; margin-right: 55px } ul.data-list li { position: relative } ul.data-list-2 li { position: relative; height: 42px; margin-bottom: 15px; width: 100%; display: block } ul.data-list-2 li label { float: left; margin-left: 60px; font-size: 18px; font-weight: 400; margin-top: 9px; line-height: 22px } ul.data-list { font-weight: 400; line-height: 22px; margin: 0; padding: 0; text-align: center } .qty-buttons { position: relative; width: 100px; height: 40px } input.qty { width: 70px } input.qtyminus, input.qtyplus, input.qtyplus:focus { position: absolute; width: 35px; height: 23px; border: 2px solid #d5d5d5; outline: 0; cursor: pointer; border-radius: 0; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none } input.qtyplus { background: url(../img/plus.png) center center no-repeat #fff; right: 0; top: 0; text-indent: -9999px } input.qtyminus { background: url(../img/minus.png) center center no-repeat #fff; right: 0; top: 21px; text-indent: -9999px } label.error, ul.floated li#age label.error { right: -15px } .qty-buttons span { position: absolute; top: 10px; display: block; width: 220px; left: 120px; font-weight: 700 } label.error, ul.data-list-2 li label.error { font-size: 11px; position: absolute; height: 25px; line-height: 25px; background-color: #e34f4f; color: #fff; font-weight: 400; padding: 0 6px } label.error { top: -28px; z-index: 99 } label.error:after { content: ''; position: absolute; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent #e34f4f; display: block; width: 0; z-index: 1; bottom: -6px; left: 20% } .styled-select label.error { overflow: visible } ul.floated li label.error { right: -50px } ul.data-list li label.error { left: 45%; display: inline-block; width: 80px } ul.data-list-2 li label.error { top: -30px; right: -10px; margin: 0; z-index: 99 } .tweets-next, .tweets-prev { display: inline-block; font-size: 28px; color: #FFF; margin-top: 10px } .tweets-prev { margin-right: 10px } .tweet_avatar { float: left } .tweet_time { display: block; margin-bottom: 5px } .add_bottom_30, .tweet-control { margin-bottom: 30px } #toTop { width: 100px; background: #111; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; display: none; color: #fff; font-size: 11px; z-index: 999 } .add_top_30 { margin-top: 30px } .add_top_15 { margin-top: 15px } .add_bottom_15 { margin-bottom: 15px } .divider { width: 100%; background: url(../img/divider.png) center top no-repeat; height: 10px; margin: 30px 0 } .modal-content { position: relative; background-color: #fff; border: 1px solid #fff; border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px c; box-shadow: 0 3px 9px rgba(0, 0, 0, .5); background-clip: padding-box } .modal-header { min-height: 16.43px; padding: 15px; border-bottom: 1px solid #ddd } .modal-footer { padding: 19px 20px 20px; margin-top: 15px; text-align: right; border-top: 1px solid #ddd } .close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #555; text-shadow: 0 1px 0 #000; opacity: .2; filter: alpha(opacity=20) } .close:focus, .close:hover { color: #333; text-decoration: none; cursor: pointer; opacity: .7; filter: alpha(opacity=70) } @media (min-width:768px) and (max-width:1200px) { #middle-wizard { padding: 40px 60px 35px } } @media (min-width:768px) and (max-width:979px) { #middle-wizard { padding: 40px 60px 35px } #footer_2 { text-align: center } #contact { background: 0 0 } ul.social-bookmarks { padding: 0; list-style-type: none; float: none; display: inline-block } } @media (max-width:767px) { #top-nav { width: 100%; float: left; display: none } #top-nav ul { float: none; padding: 20px 0; margin: 0 } #top-nav ul li { float: none; border-bottom: 1px solid rgba(255, 255, 255, .3); font-size: 14px; padding: 0; margin: 0 } #top-nav ul li:last-child { border-bottom: none } #top-nav ul li a { display: block; padding: 5px } #top-nav ul a#active { color: #323232; background-color: #ddd } .btn-responsive-menu { display: block } .main-title h1 { font-size: 32px; line-height: 30px } .main-title p { font-size: 16px } h2, h3 { font-size: 26px; line-height: 26px; margin-bottom: 30px } h2 span, h3 span { font-size: 16px; line-height: 18px } #top-wizard { padding: 15px 6s0px } #middle-wizard { padding: 20px 30px } ul.floated li#age { margin-bottom: -10px } ul.floated li { float: none; margin: 0; padding: 0 0 10px; width: 50% } #footer_2 { text-align: center } #contact { background: 0 0 } ul.social-bookmarks { padding: 0; list-style-type: none; float: none; display: inline-block } } @media (max-width:480px) { .main-title h1 { font-size: 24px; line-height: 26px; margin-top: 30px } .main-title p { font-size: 14px; ine-height: 16px } #top-nav ul { float: none; padding: 20px 0 40px; margin: 0 } #bottom-wizard, #top-wizard { padding: 15px 30px } .backward, .forward, button[disabled].backward, button[disabled].forward { text-indent: -9999px; width: 50px; padding: 0; height: 40px } .backward:before, .forward:before, button[disabled].backward:before, button[disabled].forward:before { text-indent: 0; top: 12px; font-size: 16px } .qty-buttons span { top: 10px; display: block; width: 100px; left: 120px; font-weight: 700; line-height: 12px } #survey_container { margin-bottom: 0 } #complete { padding: 0 25px 15px } #complete h3 { font-size: 18px; margin-bottom: 20px } #complete i { font-size: 80px; padding: 0 } } @media only screen and (max-width:320px) { .main-title h1 { font-size: 24px; line-height: 26px; margin-top: 25px } #survey_container { margin-bottom: 0 } #top-nav ul { float: none; padding: 20px 0 10px; margin: 0 } #complete h3, .step h3 { font-size: 18px; margin-bottom: 20px } ul#footer-nav li { display: block; margin-right: 0 } ul#footer-nav li:first-child { margin-right: 0 } .step h3 { line-height: 22px } #complete { padding: 0 15px 15px } } div.story ol,div.story ul { margin: 1em 0; padding: 0 0 0 40px; } div.story li { list-style-type: disc; }