html, button, input, select, textarea { color: #222 } body { font-size: 1em; line-height: 1.4 } ::-moz-selection { background: #b3d4fc; text-shadow: none } ::selection { background: #b3d4fc; text-shadow: none } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 } img { vertical-align: middle } fieldset { border: 0; margin: 0; padding: 0 } textarea { resize: vertical } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0 } .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px } .ir:before { content: ""; display: block; width: 0; height: 150% } .hidden { display: none !important; visibility: hidden } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto } .invisible { visibility: hidden } .clearfix:before, .clearfix:after { content: " "; display: table } .clearfix:after { clear: both } .clearfix { *zoom: 1 } @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href) ")" } abbr[title]:after { content: " (" attr(title) ")" } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: "" } pre, blockquote { border: 1px solid #999; page-break-inside: avoid } thead { display: table-header-group } tr, img { page-break-inside: avoid } img { max-width: 100% !important } @page { margin: 0.5cm } p, h2, h3 { orphans: 3; widows: 3 } h2, h3 { page-break-after: avoid } } /*! normalize.css v1.0.1 | MIT License | git.io/normalize */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1 } audio:not([controls]) { display: none; height: 0 } [hidden] { display: none } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } html, button, input, select, textarea { font-family: sans-serif } body { margin: 0 } a:focus { outline: thin dotted } a:active, a:hover { outline: 0 } h1 { font-size: 2em; margin: 0.67em 0 } h2 { font-size: 1.5em; margin: 0.83em 0 } h3 { font-size: 1.17em; margin: 1em 0 } h4 { font-size: 1em; margin: 1.33em 0 } h5 { font-size: 0.83em; margin: 1.67em 0 } h6 { font-size: 0.75em; margin: 2.33em 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: bold } blockquote { margin: 1em 40px } dfn { font-style: italic } mark { background: #ff0; color: #000 } p, pre { margin: 1em 0 } code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word } q { quotes: none } q:before, q:after { content: ''; content: none } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -0.5em } sub { bottom: -0.25em } dl, menu, ol, ul { margin: 1em 0 } dd { margin: 0 0 0 40px } menu, ol, ul { padding: 0 0 0 40px } nav ul, nav ol { list-style: none; list-style-image: none } img { border: 0; -ms-interpolation-mode: bicubic } svg:not(:root) { overflow: hidden } figure { margin: 0 } form { margin: 0 } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle } button, input { line-height: normal } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible } button[disabled], input[disabled] { cursor: default } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } textarea { overflow: auto; vertical-align: top } table { border-collapse: collapse; border-spacing: 0 } @font-face { font-family: "stjohns_icons"; src: url("stjohns_icons.eot"); src: url("stjohns_icons.eot?#iefix") format("embedded-opentype"), url("stjohns_icons.woff") format("woff"), url("stjohns_icons.ttf") format("truetype"), url("stjohns_icons.svg#stjohns_icons") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: 'BrownBoldCondensed'; src: url("28A485_2_0.eot"); src: url("28A485_2_0.eot?#iefix") format("embedded-opentype"), url("28A485_2_0.woff") format("woff"), url("28A485_2_0.ttf") format("truetype") } @-moz-keyframes spin { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } body, html, #clear { width: 100%; height: 100%; overflow: hidden; color: #fff } body { min-width: 300px; font-size: 0.6em } @media screen and (min-width: 45em) and (min-height: 40em) { body { font-size: 0.7em } } @media screen and (min-width: 65em) and (min-height: 44em) { body { font-size: 0.8em } } @media screen and (min-width: 75em) and (min-height: 47em) { body { font-size: 0.9em } } @media screen and (min-width: 85em) and (min-height: 51em) { body { font-size: 1em } } body { -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear } @-webkit-keyframes fontfix { from { opacity: 1 } to { opacity: 1 } } a { cursor: pointer } button:active, button:focus { outline: none } p { font-size: 0.9rem; line-height: 1.5em; margin-top: 1.5em } @media screen and (min-width: 65em) { p { font-size: 1rem } } .page_wrap { display: none; max-width: 80em; padding-top: 5em; margin: 0 auto; width: 90% } @media screen and (min-width: 700px) { .page_wrap { width: 85% } } #clear>div:not(#pg_title) .page_wrap p:first-of-type { font-family: 'Minion Pro', 'Minion', Times, serif; font-weight: 900; font-style: italic; border-left: 10px solid #fff; font-size: 1.25rem; line-height: 1.65; padding-left: 0.7em; -webkit-font-smoothing: antialiased } #pg_title { background: #dc291e; width: 100%; height: 100%; position: relative; top: 0; overflow: auto } #pg_title header:after { clear: both; content: ""; height: 1px; width: 100%; display: block } #pg_title h1 { font-family: "BrownBoldCondensed", sans-serif; font-size: 6em; text-transform: uppercase; line-height: 0.8em; font-weight: normal; margin: 0; float: left; width: 3.6em } #pg_title h1 .the { font-size: 0.5em; display: inline-block; vertical-align: top; padding: 0.3em 0 0.2em; line-height: 0.5em; border: solid; border-width: 0.15em 0; margin-right: -0.3em } @media screen and (min-width: 25em) { #pg_title h1 { font-size: 9em } } @media screen and (min-width: 30em) { #pg_title h1 { font-size: 10em } } #pg_title h2 { float: left; max-width: 15em; width: 90%; margin: 0; text-transform: uppercase; font-family: "Raleway", sans-serif; line-height: 1em; font-weight: 800; font-size: 2em } @media screen and (min-width: 70em) { #pg_title h2 { font-size: 2.1em } } #begin, #next, #seeNext { background: none; border: none; color: #fff; text-transform: uppercase; font-family: "BrownBoldCondensed", sans-serif; padding: 0; font-size: 1.3em; position: relative; margin-bottom: 1em } #begin span, #next span, #seeNext span { font-size: 1.2rem } @media screen and (max-width: 499px) { #begin, #restart, #next, #seeNext { background: #fff; padding: 1.1em 2em !important } #begin, #restart { color: #002D56 } #begin:hover, #restart:hover { color: #dc291e } #next, #seeNext { color: #dc291e } #next:hover, #seeNext:hover { color: #002D56 } } @media screen and (min-width: 500px) { #begin, #next { margin: 1.2em 0 0 -1em } #begin:after, #next:after { content: ""; display: block; margin-top: 0.5em; width: 7em; padding: 4.08541em 0; height: 0; background: url(sju-shield.png) 0 0 no-repeat transparent; background-size: contain !important } .svg #begin:after, .svg #next:after { background: url(sju-shield.svg) 0 0 no-repeat transparent } .ltie9 #begin:after, .ltie9 #next:after { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sju-shield.png', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(\a 			src='sju-shield.png',\a 			sizingMethod='scale')" } #seeNext { display: block; margin-top: 2.2em } #seeNext span { display: inline-block; vertical-align: middle } #seeNext:before { content: ""; margin-right: 1.5em; vertical-align: middle; display: inline-block; width: 7em; padding: 2.50356em 0; height: 0; background: url(sju-shield-right.png) 0 0 no-repeat transparent; background-size: contain !important } .svg #seeNext:before { background: url(sju-shield-right.svg) 0 0 no-repeat transparent } .ltie9 #seeNext:before { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sju-shield-right.png', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(\a 			src='sju-shield-right.png',\a 			sizingMethod='scale')" } } .question { width: 100%; height: 100%; background: #dc291e; position: relative; overflow: auto; padding-bottom: 2em } .question .page_wrap>* { max-width: 60rem } .question .q_title { font-family: "Raleway", sans-serif; -webkit-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01"; font-feature-settings: "ss01"; font-size: 2.1em; line-height: 1.2em; text-transform: uppercase } .question .answers { list-style: none; padding: 0 } .question .answers li { margin: 0.7em 0; background: #002D56; font-size: 0.9rem } @media screen and (min-width: 70em) { .question .answers li { font-size: 1rem } } .question .answer { padding: 1.5em 1.5em 1.5em 3em; display: block; position: relative; background: #002D56; -moz-transition: background 500ms ease-out; -o-transition: background 500ms ease-out; -webkit-transition: background 500ms ease-out; transition: background 500ms ease-out } .question .answer:before, .question .answer:after { content: ""; border: solid transparent; border-left: solid #dc291e; border-width: 2em 0 2em 1.6em; position: absolute; top: 50%; left: -0.85em; margin-top: -2em; z-index: 1000; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -webkit-transition: all 300ms ease-out; transition: all 300ms ease-out } .question .answer:before { border-left: solid #f3f3f3 1.6em; left: -0.7em } .question .answer:hover { background: #00203d } .question .answer:hover:after { left: -1.3em } .question .answer:hover:before { left: -1em } .question .answer.selected:before, .question .answer.selected:hover:before { left: -5.55em } .question .answer.selected:after, .question .answer.selected:hover:after { left: -5.7em } .question .counter { list-style: none; padding: 0 } .question .counter li { text-indent: -9999em; width: 0; height: 0; padding: 0.5rem; background: #e4433a; border: #bd231a solid 1px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor: pointer; display: inline-block; margin-right: 0.3rem } .question .counter li:hover { background: #ec7b74 } .question .counter li.loading { background: none !important; border: none !important; position: relative } .question .counter li.loading:after { position: absolute; top: -0.1rem; left: -0.1rem; display: block; margin: 0 } .question .counter .answered, .question .counter .answered:hover { background: #002D56 } .question .counter .current, .question .counter .current:hover { background: #fff } .result { background: #002D56; width: 100%; height: 100%; position: relative; overflow: auto; padding-bottom: 2em } .result .page_wrap>* { max-width: 60rem } .result .r_title { font-family: "Raleway", sans-serif; -webkit-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01"; font-feature-settings: "ss01"; font-size: 2.1em; line-height: 1.2em; text-transform: uppercase; margin: 0 0 1em } @media screen and (min-width: 400px) { .result { padding: 2em } } #finished { overflow: auto; width: 100%; height: 100%; background: #dc291e top center; background-size: cover; position: relative } #finished .interior p { margin: 1em 0 } #finished .interior p:last-of-type { font-weight: bolder } #finished .interior a { color: #fefefe } #finished h2 { font-family: "Raleway", sans-serif; -webkit-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01"; font-feature-settings: "ss01"; text-transform: uppercase; line-height: 0.85em; margin: 0 0 1rem; font-size: 3em } @media screen and (min-width: 350px) { #finished h2 { font-size: 4.2em } } @media screen and (min-width: 500px) { #finished h2 span { display: block } } #finished #restart { background: #fff; color: #002D56; font-family: "BrownBoldCondensed", sans-serif; text-transform: uppercase; border: none; font-size: 2em; padding: 0.4em 0.6em; line-height: 1em; margin-bottom: 1em } #finished #restart:before { content: "\f0e2"; display: inline-block; color: #777; font-family: stjohns_icons; margin-right: 0.4em; -moz-transition: all 300ms; -o-transition: all 300ms; -webkit-transition: all 300ms; transition: all 300ms } #finished #restart:hover { color: #dc291e } #finished #restart:hover:before { -moz-transform: rotate(-340deg); -ms-transform: rotate(-340deg); -webkit-transform: rotate(-340deg); transform: rotate(-340deg) } @media screen and (min-width: 500px) { #finished { background-image: url("finished-bg-med.jpg") } #finished .page_wrap { padding: 5em 0 } #finished .interior { background: #dc291e; border: 4px solid #fff; padding: 3.3em 4em; max-width: 44rem } #finished .interior p { margin: 1em 0 } #finished .interior p:last-of-type { font-weight: bolder } #finished .interior a { color: #fefefe } #finished #restart { margin-left: 2.5rem } } @media screen and (min-width: 768px) { #finished { background-image: url("finished-bg.jpg") } } #pg_title .page_wrap p, .result .page_wrap p { max-width: 40rem; width: 100% } @media screen and (min-width: 500px) { #pg_title .page_wrap p, .result .page_wrap p { width: 90% } } .loading { position: relative } .loading:after { display: inline-block; content: "\e000"; font-family: stjohns_icons; text-indent: 0; font-size: 1.2rem; line-height: 1; height: 1em; width: 1em; text-indent: 0; color: #fff; position: absolute; top: 0; right: 0; margin-left: 1em; margin-right: -1.5em; -webkit-animation-name: spin; -webkit-animation-duration: 600ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 600ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 600ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 600ms; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: 50% 49% } .italic { font-style: italic }