@charset "UTF-8"; .card-annotation .popup, .popup.fadeout { -moz-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out } .gen-nav:after, .sales-form.user-anon article form label, .topnav:after { clear: both } #sbo-rt-content .annotator-wrapper .annotator-editor-modal ul li, #sbo-rt-content .annotator-wrapper .annotator-touch-controls ul li, #sbo-rt-content .annotator-wrapper .annotator-viewer.viewer ul li, .sbo-inpage-toc .annotator-wrapper .annotator-editor-modal ul li, .sbo-inpage-toc .annotator-wrapper .annotator-touch-controls ul li, .sbo-inpage-toc .annotator-wrapper .annotator-viewer.viewer ul li { list-style-image: none } .popup { border: 1px solid #d5d6d2; background-color: #fff; position: fixed; top: 100px; left: 50%; margin-left: -300px; width: 600px; z-index: 9999; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 #e6e6e6; -webkit-box-shadow: 0 3px 0 #e6e6e6; -o-box-shadow: 0 3px 0 #e6e6e6; box-shadow: 0 3px 0 #e6e6e6 } .popup.fadeout { -webkit-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out } .popup.fadeout.closed { opacity: 0 } .popup .headline { border-bottom: 1px solid #CCC; padding: .375rem 0 } .popup .headline h2 { color: #777; margin: 0; padding: .625rem } .popup .popup-content { color: #777; padding: .625rem .9375rem } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0 } button, input { line-height: normal } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer } button[disabled], input[disabled] { cursor: default } label { display: block; font-size: 14px; font-size: .875rem; text-transform: None; color: #404040; margin: 1rem 0 .5rem } label .note { text-transform: capitalize; letter-spacing: 0; font-size: smaller } .add-members-fake-field, input[type=text], input[type=email], input[type=password], textarea { background-color: rgba(244, 243, 240, .5); border: 1px solid rgba(118, 118, 118, .35); font-size: 18px; font-family: "source sans pro", sans-serif; margin-bottom: .625rem; padding: .5em; min-width: 12em; width: 100%; max-width: 15em; color: #070707 } .error .add-members-fake-field, .error input[type=text], .error input[type=email], .error input[type=password], .error textarea { border: 1px solid #ea6d60 } .ie8 .add-members-fake-field, .ie8 input[type=text], .ie8 input[type=email], .ie8 input[type=password], .ie8 textarea { font-family: sans-serif } .feedback .text, .tooltip, a.l0, a.l1, a.l2, a.skip:active, a.skip:focus, a.skip:hover { font-family: "source sans pro", sans-serif } input:read-only { border-color: #e6e6e6 } #registration-form input[type=submit]:disabled { color: #AAA; -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) } .half-field { max-width: 100%; width: 100% } @media screen and (min-width: 32.5625em) { .half-field { max-width: 48% } .half-field.right { float: right } .half-field.left { float: left } } .sales-form.user-anon article form .left, label[for=id_card_number] { float: left } ul.credit-cards { position: relative; z-index: 1; font-weight: 400 } ul.credit-cards .tooltip .tooltip-inner { max-width: 250px; width: 250px; white-space: normal } @media screen and (max-width: 53.75em) { ul.credit-cards .tooltip .tooltip-inner { max-width: 200px; width: 200px } } textarea { width: 100%; min-height: 7em; max-width: 30em; font-size: 16px } .agreement-inc label, .pod { font-size: 14px } input+small, select+small { display: block; margin: .5em 0!important } .agreement-inc input[type=checkbox]+small { display: inline } input.error { border: 1px solid #ea6d60; background-color: #fbe1de } input.ok { border: 1px solid #008542; background-color: #fff } small.ok { color: #F65D22 } .form-row.error .errorlist, small.error { color: #ea6d60 } #id_username { text-transform: lowercase } #id_username::-webkit-input-placeholder { text-transform: none } #id_username:-moz-placeholder { text-transform: none } #id_username::-moz-placeholder { text-transform: none } #id_username:-ms-input-placeholder { text-transform: none } input#id_username:-ms-input-placeholder, input#id_username::-moz-placeholder, input#id_username::-webkit-input-placeholder { text-transform: capitalize } .articlelist>li .controls .format-title, .articlelist>li .position-link, .button-orm, .pod h3, h3 { text-transform: uppercase } .form-row.error .errorlist li { margin: .5em 0 } .sales-form.user-authenticated .page-head { display: none } .sales-form.user-anon { background-color: #f6f6f6 } .sales-form.user-anon header[role=banner] { border-bottom: 1px solid #DDD } .sales-form.user-anon article, .sales-form.user-anon footer { background: no-repeat } .sales-form.user-anon article header { border-bottom: 1px solid #DDD; text-align: center; padding-bottom: .625rem } .sales-form.user-anon article .intro { text-align: center } .sales-form.user-anon article form { padding: 0 8.125rem 1.25rem } .sales-form.user-anon article form .left, .sales-form.user-anon article form .right { display: inline-block; width: 48%; margin-bottom: .625rem } .sales-form.user-anon article form .right { float: right } .sales-form.user-anon article form input { padding: .5em } .sales-form.user-anon article form input[type=submit] { padding: 1rem 1.5625rem; margin: 1.875rem 0 1.5625rem } .sales-form.user-anon .pod { margin: 36px auto; max-width: 820px; max-width: 51.25rem } @media screen and (max-width: 51.1875em) { .sales-form.user-anon .pod { margin-right: 10px; margin-left: 10px } .sales-form.user-anon article form { padding: 0 5rem 1.25rem } .sales-form.user-anon article form textarea { max-width: 100% } } @media screen and (max-width: 51.1875em) and (max-width: 45em) { .sales-form.user-anon article form { padding: 0 1.25rem 1.25rem } .sales-form.user-anon article form .left, .sales-form.user-anon article form .right { width: 100% } } .sf-cvv { position: relative; min-width: 95px; width: 100%; max-width: 100px } .sf-cvv .tooltip-inner { max-width: 300px; width: 300px; white-space: normal } .sf-cvv .cvv-help { position: absolute; right: 6px; bottom: 21px; padding-top: 1px; background-color: #777; color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; width: 20px; height: 20px; font-weight: 700; text-align: center } .sf-ccnum, .sf-country, .sf-cvv, .sf-zip { display: inline-block; vertical-align: top } .sf-ccnum, .sf-zip { max-width: 18em; width: 100% } .sf-additional-info textarea, textarea.add-members { max-width: 100% } .agreement-inc label input { float: left; display: inline-block; margin: 10px 10px 0 0 } @media screen and (min-width: 20em) { .sf-ccnum, .sf-zip { margin-right: 1em } } @media screen and (min-width: 32.5625em) { .form-row:after, .form-row:before { content: " "; display: table } .form-row:after { clear: both } .sf-ccnum, .sf-cvv { display: inline-block; vertical-align: top } .sf-ccnum { margin-right: 1em } } a:link, a:visited { color: #F65D22; text-decoration: none } a:link.gray-link:focus, a:link.gray-link:hover, a:link:focus, a:link:hover, a:visited.gray-link:focus, a:visited.gray-link:hover, a:visited:focus, a:visited:hover { color: #F65D22; text-decoration: underline } a:link.gray-link, a:visited.gray-link { text-decoration: underline; color: rgba(64, 64, 64, .75) } a { -moz-transition: color .2s ease-out; -webkit-transition: color .2s ease-out; -o-transition: color .2s ease-out; transition: color .2s ease-out } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a span, .interface-controls a .icon, .interface-controls button .icon, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a span, .social-sharing a span, .visuallyhidden { border: 0; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:active, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:focus, .interface-controls a .focusable.icon:active, .interface-controls a .focusable.icon:focus, .interface-controls button .focusable.icon:active, .interface-controls button .focusable.icon:focus, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:active, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:focus, .social-sharing a span.focusable:active, .social-sharing a span.focusable:focus, .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto } .hidden { display: none } form input.error, form textarea.error { border: 1px solid #ea6d60; background-color: #fae0de } .pod { margin: 0 0 1.25rem; padding: 1rem; background-color: #fff; font-size: .875rem; line-height: 19px; line-height: 1.1875rem; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } .pod header h1 { margin-top: 0 } .pod header h1.trial { color: #ea6d60 } .pod h3, h3, h4 { color: #777 } .pod h2 { font-size: 18px } h1, h2 { font-weight: 400; color: #404040 } .display-markdown ol, .display-markdown ul { margin: 0 0 0 30px } .display-markdown ol li, .display-markdown ul li { margin: 5px 0!important; list-style-type: disc } .display-markdown ol li { list-style-type: lower-alpha } .display-markdown blockquote { border-left: 1px solid #e98300; padding-left: 10px; margin: 10px } p, ul { padding: 0 } h1 { font-size: 30px; font-size: 1.875rem; line-height: 38px; line-height: 2.375rem; margin: 1.25rem 0 } @media screen and (max-width: 30em) { .section-header { margin-left: 15px } } h3, p { font-size: 18px; margin: 1.125rem 0 } h2 { font-size: 24px; font-size: 1.5rem; margin: 1.25rem 0 } h3 { font-weight: 400; letter-spacing: 1px; font-size: 1.125rem } h4 { font-weight: 400; margin: 1.3125rem 0 } p { line-height: 1.4em; font-size: 1.125rem } small { font-size: 14px; font-size: .875rem } .link-to-markdown { padding: 1px 8px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid #bbb; float: right } .bigbutton, .button, .button-primary, a.bigbutton, a.button, a.button-primary, button, button.button-primary, input[type=reset], input[type=submit] { display: inline-block; padding: 10px 15px; font-weight: 600; font-size: 14px; line-height: 1.2em; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; text-decoration: none; -moz-transition: all .15s cubic-bezier(.86, 0, .07, 1); -webkit-transition: all .15s cubic-bezier(.86, 0, .07, 1); -o-transition: all .15s cubic-bezier(.86, 0, .07, 1); transition: all .15s cubic-bezier(.86, 0, .07, 1) } .autocomplete-suggestions b, .button-orm, .gen-nav, .gen-nav a, .mknav li a, .tooltip { font-weight: 700 } .bigbutton.disabled, .bigbutton:disabled, .bigbutton:disabled:focus, .bigbutton:disabled:hover, .button-primary.disabled, .button-primary:disabled, .button-primary:disabled:focus, .button-primary:disabled:hover, .button.disabled, .button:disabled, .button:disabled:focus, .button:disabled:hover, a.bigbutton.disabled, a.bigbutton:disabled, a.bigbutton:disabled:focus, a.bigbutton:disabled:hover, a.button-primary.disabled, a.button-primary:disabled, a.button-primary:disabled:focus, a.button-primary:disabled:hover, a.button.disabled, a.button:disabled, a.button:disabled:focus, a.button:disabled:hover, button.button-primary.disabled, button.button-primary:disabled, button.button-primary:disabled:focus, button.button-primary:disabled:hover, button.disabled, button:disabled, button:disabled:focus, button:disabled:hover, input[type=reset].disabled, input[type=reset]:disabled, input[type=reset]:disabled:focus, input[type=reset]:disabled:hover, input[type=submit].disabled, input[type=submit]:disabled, input[type=submit]:disabled:focus, input[type=submit]:disabled:hover { color: #ccc!important; background-color: #f5f5f5!important; border-color: #ccc!important; cursor: default } .button, a.button, button { color: #404040; background: #fff; border: 1px solid #777 } .button.active, .button:focus, .button:hover, a.button.active, a.button:focus, a.button:hover, button.active, button:focus, button:hover { color: #F65D22; background: #fff; border-color: #F65D22; text-decoration: none } .button-primary, a.button-primary, button.button-primary, input[type=reset], input[type=submit] { color: #404040; background-color: #F5C517; border: 1px solid #F5C517 } .button-primary:focus, .button-primary:hover, a.button-primary:focus, a.button-primary:hover, button.button-primary:focus, button.button-primary:hover, input[type=reset]:focus, input[type=reset]:hover, input[type=submit]:focus, input[type=submit]:hover { color: #404040; background-color: #E8BA16; border-color: #E8BA16; text-decoration: none } .button-orm { padding: 6px 15px; letter-spacing: 1.4px; font-size: 12px; text-align: center; border: 1px solid #c7c1b4; background: #fff; color: #b9002d!important } html.no-touch .button-orm:hover { text-decoration: none; color: #fff!important; background: #b9002d; border-color: #b9002d } input[type=reset] { min-width: 0 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li, .social-sharing li { display: inline-block; margin: 0; list-style-type: none; text-align: center } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a, .social-sharing a { display: inline-block; padding: 0; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotation-card.social-sharing li, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing li, .annotation-card.social-sharing li, .button-group.social-sharing li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotation-card.social-sharing li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing li { margin: 10px 10px 0 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button, .button-group.social-sharing a.share-button, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button { -moz-box-shadow: 0 0 0 1px #e6e6e6; -webkit-box-shadow: 0 0 0 1px #e6e6e6; -o-box-shadow: 0 0 0 1px #e6e6e6; box-shadow: 0 0 0 1px #e6e6e6; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #fff; border-top: 1px solid rgba(255, 255, 255, .5)!important; border-bottom: 3px solid rgba(0, 0, 0, .05)!important; max-width: 100%; height: 47px; width: 47px } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button:focus, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button:hover, .button-group.social-sharing a.share-button:focus, .button-group.social-sharing a.share-button:hover { background-color: #f5f5f5 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing, .dropdown-menu.social-sharing, .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing, .interface-controls .social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing { display: block; background-color: #333; position: absolute; top: 0; right: 48px; width: 196px; opacity: 0; visibility: hidden; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px; border-right: 1px solid #777 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing li, .dropdown-menu.social-sharing li, .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li, .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li, .interface-controls .social-sharing li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing li { display: block; float: left; background: 0 0; border-left: 1px solid #777 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li:first-child, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing li:first-child, .dropdown-menu.social-sharing li:first-child, .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li:first-child, .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li:first-child, .interface-controls .social-sharing li:first-child, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li:first-child, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing li:first-child { border-left: none } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .active .dropdown-menu.social-sharing, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .active .interface-controls .social-sharing, .active #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, .active .dropdown-menu.social-sharing, .active .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, .active .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing, .active .interface-controls .social-sharing, .active .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .active .dropdown-menu.social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .active .interface-controls .social-sharing { opacity: 1; visibility: visible } @media screen and (max-width: 26.25em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing, .dropdown-menu.social-sharing, .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing, .interface-controls .social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing { left: 48px; right: 0; -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0; border-radius: 0 2px 2px 0; border-right: none; border-left: 1px solid #777 } } .addone { float: right } @media screen and (max-width: 32.5em) { .addone { float: left; margin-top: .25rem } } @media screen and (min-width: 32.5625em) and (min-height: 33.6875em) { body { padding-top: 26px } body.sidenav { padding-left: 55px } } .topbar { background-color: #e6e6e6 } a.skip { display: block; position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } a.skip:active, a.skip:focus, a.skip:hover { padding: .625rem; position: fixed; z-index: 5000; left: 0; top: 0; width: 100%; height: auto; overflow: visible; background-color: #F65D22; color: #fff; text-align: center; text-decoration: none; font-size: 12px } .touch .shortcuts { display: none } @media screen and (min-width: 32.5em), screen and (max-height: 33.75em) { .topnav .l0 { overflow: hidden; max-width: 190px } .nav-collapsed .topnav .l0 { max-width: 55px } } .topnav { position: relative } .topnav:after, .topnav:before { content: " "; display: table } .topnav>li { float: left } .dropdown.usermenu, .searchbox { float: right } .topnav>li a { transition: all .15s ease-in-out } .topnav .flyout-parent .flyout .l2, .topnav>li a { -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out } .topnav>li a:focus, .topnav>li a:hover { color: #404040; background-color: #d8d8d8; text-decoration: none } .topnav .flyout-parent .flyout .l2 { display: block; opacity: 0; transition: all .15s ease-in-out; height: 0; width: 0; padding: 0; position: relative; left: -999999px } .topnav .flyout-parent:hover .flyout .l2 { height: 50px; width: 190px; padding: 18px 18px 19px; opacity: 1; left: 0 } .topnav .flyout-parent:hover a.l1 { background-color: #f5f5f5 } .topnav .flyout { display: block; position: absolute; left: 190px; margin-top: -50px } .topnav .flyout li a { display: inline-block; width: 190px; background-color: #e6e6e6; padding: 18px 18px 19px } .topnav .flyout li a:hover { background-color: #d8d8d8 } @media screen and (max-width: 32.5em), screen and (max-height: 33.75em) { .topnav .flyout-parent .flyout .l2 { opacity: 1; height: 50px; width: 190px; padding: 18px 18px 19px; left: 43px } .topnav .flyout-parent:hover .flyout .l2 { left: 43px } .topnav .flyout-parent:hover a.l1 { background-color: transparent!important } .topnav .flyout { position: relative; left: 0; margin-top: 0 } .topnav .flyout li a { background-color: transparent; padding: 18px 18px 19px 56px; width: 100% } .topnav .flyout li a:hover { background-color: #999 } } @media screen and (min-width: 32.5625em) { .topnav .l2 { display: none } } @media screen and (max-height: 33.75em) { .topnav .l2 { display: block } } .l2 { padding: 0 10px; display: inline-block } a.l0, a.l1, a.l2 { display: block; color: #404040; font-size: 13px; font-size: .8125rem; line-height: 1em } .l0.active, .l1.active { background: #f5f5f5 } .nav-dropdown { position: absolute; right: 0; top: 0 } .drop-content { max-height: 0; overflow: hidden; -moz-transition: max-height .3s ease-in-out; -webkit-transition: max-height .3s ease-in-out; -o-transition: max-height .3s ease-in-out; transition: max-height .3s ease-in-out } .dropdown.active .l0, .dropdown.active .l0:hover { color: #fff; background-color: #999 } .dropdown .l0 svg { transform: rotate(180deg); -moz-transition: all .15s cubic-bezier(.86, 0, .07, 1); -webkit-transition: all .15s cubic-bezier(.86, 0, .07, 1); -o-transition: all .15s cubic-bezier(.86, 0, .07, 1); transition: all .15s cubic-bezier(.86, 0, .07, 1) } .dropdown.active .l0 svg { fill: #fff; transform: rotate(0) } .reading .dropdown.searchbox, .reading li.search { display: none } .dropdown.usermenu .drop-content { position: absolute; background-color: #999; z-index: 30; right: 0; top: 61px; width: 200px } .tooltip.bottom-right .tooltip-arrow, .tooltip.top-right .tooltip-arrow { right: 5px } @media screen and (max-width: 32.5em), screen and (max-height: 33.75em) { .l0 { height: 62px; line-height: 1.75em!important } .wrap-search-form.active .drop-content { overflow: initial } .dropdown.active .drop-content { max-height: 490px; padding-bottom: 5px } .dropdown.active .drop-content a { color: #fff } .dropdown.active .drop-content a:focus, .dropdown.active .drop-content a:hover { background-color: #888!important } .dropdown.active .drop-content a.active { background-color: #777; color: #444 } .dropdown.active .drop-content #js-shortcuts-info { display: none } .dropdown.active .drop-content ul.profile { border-top: 1px solid #999; padding: 0 0 0 .375rem; display: none } .dropdown.active .drop-content ul.profile li { margin: .625rem 0 } .dropdown.active .drop-content ul.profile li a:focus, .dropdown.active .drop-content ul.profile li a:hover { background-color: transparent } .dropdown.active .drop-content ul.profile li .active { background-color: transparent; color: #fff } .dropdown.active .drop-content ul.profile li #nav-nag { color: #b3b3b3 } .dropdown.active .drop-content ul.profile li #nav-nag a { text-decoration: none; color: #b3b3b3 } .dropdown.active .drop-content ul.profile li #nav-nag a:focus, .dropdown.active .drop-content ul.profile li #nav-nag a:hover { color: #fff } } .autocomplete-suggestions { text-align: left; background-color: #FFF; -moz-box-shadow: 1px 2px 3px #d5d5d5; -webkit-box-shadow: 1px 2px 3px #d5d5d5; -o-box-shadow: 1px 2px 3px #d5d5d5; box-shadow: 1px 2px 3px #d5d5d5; border: 1px solid #d5d5d5; color: #666; position: absolute; width: 100%; z-index: 9999; display: block } .autocomplete-suggestions:empty { border: none; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; -o-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent } .autocomplete-suggestions .autocomplete-suggestion { padding: .5rem 0 .5rem 1.25rem; line-height: 1.25em } .autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected, .autocomplete-suggestions .autocomplete-suggestion:focus, .autocomplete-suggestions .autocomplete-suggestion:hover { background-color: rgba(199, 194, 186, .15); color: #F65D22; cursor: pointer } .searchbox, .wrap-search-form { margin: .75rem 1.25rem 0; position: relative; z-index: 8 } .searchbox .search-form, .wrap-search-form .search-form { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; z-index: 8; position: relative; display: inline-block; border: 1px solid #d5d5d5; background-color: #fff; margin: 0 } .searchbox .search-form.active, .searchbox .search-form:active, .searchbox .search-form:focus, .searchbox .search-form:hover, .wrap-search-form .search-form.active, .wrap-search-form .search-form:active, .wrap-search-form .search-form:focus, .wrap-search-form .search-form:hover { border: 1px solid #F65D22 } .searchbox .nav-search-in, .wrap-search-form .nav-search-in { -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px; display: inline-block; background-color: #fff } .searchbox .search-query, .searchbox select.search-params, .wrap-search-form .search-query, .wrap-search-form select.search-params { display: inline-block; vertical-align: middle; border: none; outline: 0; -webkit-appearance: none } .searchbox select.search-params:active, .searchbox select.search-params:focus, .searchbox select.search-params:hover, .wrap-search-form select.search-params:active, .wrap-search-form select.search-params:focus, .wrap-search-form select.search-params:hover { color: #404040 } .searchbox select.search-params::-ms-expand, .wrap-search-form select.search-params::-ms-expand { display: none } .ie8 .searchbox select.search-params, .ie8 .wrap-search-form select.search-params { background: 0 0 } .searchbox .search-query, .wrap-search-form .search-query { width: 250px; height: 28px; padding: 3px 0; background-color: #fff; color: #333; white-space: nowrap; text-overflow: ellipsis; outline: 0 } .searchbox .search-query:focus::-webkit-input-placeholder, .wrap-search-form .search-query:focus::-webkit-input-placeholder { transition: opacity .35s .35s ease; opacity: 0 } .searchbox .search-button, .wrap-search-form .search-button { width: 28px; height: 28px; padding: 0; color: #C7C2BA; vertical-align: middle; border: none } .searchbox .search-button span, .wrap-search-form .search-button span { display: none } .searchbox .search-button svg, .wrap-search-form .search-button svg { display: block; height: 17px; width: 28px; fill: #C7C2BA } .no-touch .searchbox .search-button:focus svg, .no-touch .searchbox .search-button:hover svg, .no-touch .wrap-search-form .search-button:focus svg, .no-touch .wrap-search-form .search-button:hover svg, .searchbox .search-button:active svg, .searchbox .search-button:focus svg, .searchbox .search-button:hover svg, .wrap-search-form .search-button:active svg, .wrap-search-form .search-button:focus svg, .wrap-search-form .search-button:hover svg { fill: #404040 } @media screen and (max-width: 32.5em), screen and (max-height: 33.75em) { .searchbox, .wrap-search-form { width: 100%; background-color: #999; margin: -5px 0 0!important } .searchbox .search-form, .wrap-search-form .search-form { margin: 12px 15px 5px; width: calc(100% - 30px) } .searchbox .search-query, .wrap-search-form .search-query { width: calc(100% - 153px) } } .nav-collapse { display: none } @media screen and (min-width: 32.5625em) and (min-height: 33.6875em) { .searchbox .drop-content, .wrap-search-form .drop-content { max-height: 999px; overflow: visible } body.nav-collapsed .topbar { width: 55px; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none } .topbar { width: 190px; position: fixed; left: 0; top: 26px; height: 100%; z-index: 31; -moz-transition: width .1s ease-in-out; -webkit-transition: width .1s ease-in-out; -o-transition: width .1s ease-in-out; transition: width .1s ease-in-out; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1); -o-box-shadow: 0 0 4px rgba(0, 0, 0, .1); box-shadow: 0 0 4px rgba(0, 0, 0, .1) } .topbar a:before { top: 4px; font-size: 21px } .topbar [class*=ss-].l0 span { display: inline } .topbar .l0 { width: 100% } .topbar ul>li { width: auto; display: block } .topbar ul>li.search { display: none } .reading .topbar { top: 0 } .topnav .dropdown .drop-content { display: block; position: static; background-color: transparent; max-height: 999px; width: 100%; -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none } .page-head, .page-head:after { width: 100%; display: inline-block } .last-item { margin-bottom: 10px } .l2 { padding-top: 5px; padding-bottom: 5px } .l2:focus, .l2:hover { background-color: transparent; color: #F65D22 } .page-head { padding: 0; background-color: #fff; z-index: 999; text-align: justify; box-shadow: 0 3px 4px -4px rgba(0, 0, 0, .2); height: 55px } .page-head:after { content: '' } .nav-collapse, .page-head h1 { display: block; text-align: left } .page-head h1 { font-size: 18px; line-height: 1.4em; margin: 0 20px; padding: 10px 150px 0 0; vertical-align: top; position: relative; top: 3px; color: #777 } .nav-collapse { background-color: transparent; position: absolute; bottom: 0; left: 0; padding: 20px 0 15px; width: 100%; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border: none; line-height: 1; color: #9B9B9B; text-decoration: none; text-indent: 20px; cursor: pointer } .nav-collapse:before { font-size: 15px } .nav-collapse:focus, .nav-collapse:hover { background-color: #dadada!important } .nav-collapse:active { top: auto } } .tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow { bottom: 0; border-top-color: #777; border-width: 5px 5px 0 } .gen-nav { background-color: #070707; width: 100%; min-width: 230px } .mknav, .tooltip.active .tooltip-inner { background-color: #F65D22 } .gen-nav:after, .gen-nav:before { content: " "; display: table } .gen-nav a { color: #fff; padding: 0 16px; display: block; text-decoration: none } .gen-nav .login, .gen-nav h1 { font-size: 16px; line-height: 50px } .gen-nav h1 { display: inline; margin: 0; float: left } .gen-nav .login { float: right; color: #F65D22 } .mknav { color: #070707; font-size: 16px; padding: 16px } .mknav li { display: inline; padding-right: .4em } .mknav li:before { padding-right: .4em; content: '/' } .mknav li:first-child:before { padding-right: 0; content: '' } .mknav li a { color: #fff; text-decoration: none } .mknav li a:focus, .mknav li a:hover { text-decoration: underline } .tooltip { position: absolute; z-index: 1030; display: block; font-size: 14px; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); visibility: visible; white-space: nowrap } .tooltip.in { opacity: .9; filter: alpha(opacity=90) } .tooltip.top { padding: 5px 0; margin-top: -3px } .tooltip.top .tooltip-arrow { left: 50%; margin-left: -5px } .tooltip.top-left .tooltip-arrow { left: 5px } .tooltip.right { padding: 0 5px; margin-left: 3px } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-right-color: #777; border-width: 5px 5px 5px 0 } .tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow { top: 0; border-bottom-color: #777; border-width: 0 5px 5px } .tooltip.active.right .tooltip-arrow { border-right-color: #F65D22 } .tooltip.bottom { padding: 5px 0; margin-top: 3px } .tooltip.bottom .tooltip-arrow { left: 50%; margin-left: -5px } .tooltip.bottom-left .tooltip-arrow { left: 5px } .tooltip.left { padding: 0 5px; margin-left: -3px } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-left-color: #777; border-width: 5px 0 5px 5px } .tooltip-inner { max-width: 300px; padding: 5px 12px; color: #fff; text-align: center; text-decoration: none; background-color: #777; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid } .fade { opacity: 0; -webkit-transition: opacity .25s linear; transition: opacity .25s linear } .fade.in { opacity: 1 } .l1.no-icon { padding: 16px 15px 16px 55px; white-space: nowrap } a.nav-icn { padding: 15px 17px; white-space: nowrap } a.nav-icn svg { width: 20px; height: 20px; margin: 0 } a.nav-icn.l0 svg { margin: 7px 0 0 2px } a.nav-icn.l0 span { display: none } a.nav-icn.l1 svg { margin: 0 18px 0 2px; vertical-align: middle } a.nav-icn.l1 span { display: inline-block; vertical-align: middle } .usermenu { float: right } .usermenu .trigger { padding: 16px 15px 19px 17px } .usermenu .trigger:hover { color: #404040; background-color: #d8d8d8; text-decoration: none } .usermenu .trigger.active { color: #fff; background-color: #999 } .topnav a svg { fill: #4A3B30 } .topnav .usermenu a.l1 svg { fill: #fff } @media screen and (min-width: 32.5625em) and (min-height: 33.6875em) { .dropdown.usermenu, .topnav>li { float: none } a.nav-icn.l0 { width: auto } a.nav-icn.l0 svg, a.nav-icn.l1 svg { margin: 0 18px 0 2px; vertical-align: middle } a.nav-icn.l0.safari-home svg { margin: 0 16px 0 4px } a.nav-icn.l0 span, a.nav-icn.l1 span { display: inline-block; vertical-align: middle } a.nav-icn.safari-home { padding: 22px 15px } a.nav-icn.safari-home span { padding-top: 4px } .dropdown .trigger { display: none } .topnav .usermenu a.l1 svg { fill: #4A3B30 } } .articlelist { max-width: 1600px; margin: 0 auto 15px } .selected-card { outline-style: solid; outline-color: rgba(0, 134, 202, .25); -moz-box-shadow: 0 0 0 3px rgba(0, 134, 202, .35); -webkit-box-shadow: 0 0 0 3px rgba(0, 134, 202, .35); -o-box-shadow: 0 0 0 3px rgba(0, 134, 202, .35); box-shadow: 0 0 0 3px rgba(0, 134, 202, .35) } .articlelist>li { width: 100%; height: 100%; min-height: 200px; background-color: #fff; display: inline-block; position: relative; margin-bottom: 20px; vertical-align: top; border: 1px solid #d5d5d5; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition: width .15s ease-in-out; -webkit-transition: width .15s ease-in-out; -o-transition: width .15s ease-in-out; transition: width .15s ease-in-out } .articlelist>li .position-link { text-decoration: none; float: right; font-size: 12px; font-size: .75rem; letter-spacing: 1px; position: relative; z-index: 1 } .articlelist>li .topic-display { clear: left } .articlelist>li.js-last-viewed span.expired { display: none } .articlelist>li.js-related .feedback.text { font-size: 24px } .articlelist>li.js-related .feedback:before { top: 35px } @media screen and (max-width: 767px) { .articlelist>li { width: 100% } } @media screen and (min-width: 768px) and (max-width: 1279px) { .articlelist>li { width: 48.7207%; margin-right: 1.95313% } .articlelist>li:nth-child(2n+2) { color: #fff; margin-right: 0 } } @media only screen and (min-width: 1280px) and (max-width: 1600px) { .articlelist>li { width: 31.52344%; margin-right: 2.34375% } .articlelist>li:nth-child(3n+3) { margin-right: 0 } } @media only screen and (min-width: 1601px) { .articlelist>li { width: 23.375%; margin-right: 1.875% } .articlelist>li:nth-child(4n+4) { margin-right: 0 } } .articlelist>li.more-container { display: block; width: 100%; margin: 0 auto; border: none; background-color: transparent; text-align: center } .news-block .articlelist>li { background: #fff } .news-block .articlelist>li p { font-size: 14px } .feedback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; background-color: rgba(255, 255, 255, .9); text-align: center; z-index: 99 } .feedback .text { font-size: 28px; font-size: 1.75rem; position: relative; top: 50%; line-height: 1.1em; color: rgba(64, 64, 64, .75); font-weight: 300; font-style: normal; display: inline-block; width: 95% } .feedback .canceled, .feedback .expired { display: block; color: rgba(64, 64, 64, .75); font-size: 18px; margin-top: 8px; line-height: 1.25em } .feedback:before { font-size: 36px; left: 50%; margin-left: -21px; top: 50%; margin-top: -50px; position: absolute } .feedback.added:before { color: #F65D22 } .feedback.canceled:before, .feedback.error:before, .feedback.expired:before, .feedback.removed:before { color: #B2B4B3 } .detail-book .feedback .text, .detail-video .feedback .text { font-size: 32px; font-size: 2rem; margin-top: 20px } @media screen and (max-width: 32.5em) { .detail-book .feedback .text, .detail-video .feedback .text { font-size: 26px; font-size: 1.625rem } } .articlelist>li .info { text-align: left } .articlelist>li .info h2 { margin: 0; padding: 15px 10px 10px; display: inline-block; color: #00B798 } .articlelist>li .info .main { padding: 0 .9375rem .9375rem; color: rgba(64, 64, 64, .75) } .articlelist>li .info .main:after, .articlelist>li .info .main:before { content: " "; display: table } .articlelist>li .info .main:after { clear: both } @media screen and (min-width: 650px) { .articlelist>li .info { width: 100%; right: 0; bottom: 0 } } @media screen and (min-width: 1250px) { .articlelist>li .info .main { padding: 0 .625rem .625rem } } .title-block { display: block; text-decoration: none; font-size: 18px; font-size: 1.125rem; margin-bottom: .1875rem; line-height: 20px; line-height: 1.25rem } .book-title { margin-bottom: .3125rem; line-height: 18px; line-height: 1.125rem; font-size: 13px; font-size: .8125rem } .book-title .issued { display: block; font-style: italic } .last-access { font-size: 12px; color: #777; margin-bottom: 10px } .articlelist>li .controls { min-height: 45px; -webkit-touch-callout: none; -khtml-user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; border-bottom: 1px solid #d5d5d5; font-size: .1px; line-height: .1px; text-align: right; margin-bottom: 10px; position: relative } .articlelist>li .controls .format-title { font-size: 10px; display: block; color: rgba(64, 64, 64, .75); position: absolute; left: 15px; top: 50% } .articlelist>li .controls .format-title:before { font-family: SSFlow; font-size: 11px; padding-right: 3px; color: #C7C2BA; position: relative; top: 2px } @media screen and (min-width: 1250px) { .articlelist>li .controls .format-title { left: 10px } } .format-book .format-title:before { content: '\1F4D5' } .format-video .format-title:before { content: '\1F4F9' } .articlelist .rec-delete, .articlelist .rec-fav { -moz-padding: 10px 12px 10px; -webkit-padding: 10px 12px 10px; -o-padding: 10px 12px 10px; padding: 10px 12px; -moz-margin: 3px; -webkit-margin: 3px; -o-margin: 3px; margin: 3px } .rec-delete, .rec-fav { text-shadow: none; -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; text-transform: lowercase; cursor: pointer; display: inline-block; text-align: center; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .uppercase, .card-annotation .note, .progress, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .uppercase { text-transform: uppercase } .rec-delete.invalid, .rec-delete:disabled, .rec-fav.invalid, .rec-fav:disabled { background-color: transparent; color: rgba(64, 64, 64, .75) } .rec-delete:before, .rec-fav:before { vertical-align: middle; font-size: 14px; font-size: .875rem } .rec-fav.active, .rec-fav.active:before { color: #F65D22 } .no-touch button.rec-fav:focus { color: #999 } .no-touch button.rec-delete:focus, .no-touch button.rec-delete:hover { color: #ea6d60 } @media screen and (max-width: 1250px) { .no-touch .articlelist button.rec-delete:hover, .no-touch .articlelist button.rec-fav:hover { background-color: #EEE } } .progress .gridtc { display: table-cell; white-space: nowrap } .progress { font-size: 12px; font-size: .75rem; display: block; margin: 0; color: rgba(64, 64, 64, .65); letter-spacing: 1px } .progress .bar, .progress .prog-text { vertical-align: middle; display: table-cell } .progress .bar { width: 100% } .progress .prog-text { white-space: nowrap; padding-left: 10px } .progress .per { -moz-border-radius: 2px; border-radius: 2px; background-color: #d5d5d5; padding: 0 } .progress .per, .progress .per .time { display: block; height: 8px; -webkit-border-radius: 2px } .progress .per .time { margin: 0; -moz-border-radius: 2px; border-radius: 2px; background-color: #999082 } .sort-box { font-size: 20px; line-height: 1.3em; margin-bottom: 1em; text-align: right; color: #777; font-weight: 300 } .recommended-reason .book-title, .recommended-reason .book-title .topic-display li { font-size: 14px } @media screen and (min-width: 40.625em) { .sort-box { max-width: 650px } } @media screen and (min-width: 96.125em) { .sort-box { max-width: 1315px } } @media screen and (min-width: 137.5625em) { .sort-box { max-width: 1975px } } @media screen and (min-width: 179em) { .sort-box { max-width: 2635px } } @media screen and (min-width: 220.4375em) { .sort-box { max-width: 100% } } .recommended-reason { padding: 5px 15px; background-color: #F7F7F7; border-top: 1px solid #d5d5d5; color: #999 } .recommended-reason .book-title a { color: rgba(64, 64, 64, .75); text-decoration: underline } .chat-wrapper a, .chat-wrapper a:hover, .chat-wrapper input.sales-chat-btn:focus, .chat-wrapper input.sales-chat-btn:hover { text-decoration: none } .recommended-reason .book-title a:focus, .recommended-reason .book-title a:hover { color: #F65D22 } .topic-display li { display: inline-block; font-size: 12px; font-size: .75rem; color: #777 } .topic-display li .topic { color: #F65D22 } .topic-display li:after { color: #ccc; content: ' / ' } .topic-display li:last-child:after, [class*=hex-] .topic-display li:after { content: '' } @-webkit-keyframes $animationName { 0% { -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } 100% { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } } @-moz-keyframes $animationName { 0% { -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } 100% { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } } @-o-keyframes $animationName { 0% { -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } 100% { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } } @keyframes $animationName { 0% { -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%) } 100% { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } } .trial-banner { background-color: #fff; margin: 0 20px 20px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; text-align: center; padding: 15px; border: 1px solid rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc } .trial-banner h1 { font-size: 38px; font-size: 2.375rem; font-weight: 400; margin-bottom: 0; line-height: 1.15em } @media screen and (max-width: 53.125em) { .trial-banner h1 { font-size: 35px; font-size: 2.1875rem } } .trial-banner p { font-size: 24px; font-size: 1.5rem; font-weight: 300; color: #999; margin-bottom: 1em; line-height: 1.1em } .trial-banner.trial-expired { padding: 15px 0 } .trial-banner.trial-expired h1 { font-size: 26px; font-size: 1.625rem } @media screen and (max-width: 32.5625em) { .trial-banner.trial-expired h1 { font-size: 21px; font-size: 1.3125rem } } .trial-banner .red-banner { background-color: #ea6d60; color: #FFF; padding: 15px 10% 25px; font-weight: 300; margin-bottom: 20px } .js-disable-shortcuts label { display: inline-block; margin: 0 0 0 10px } .keyboard-shortcuts-pane { font-family: "source sans pro", Helvetica, Arial, sans-serif!important; overflow: hidden; clear: both } .keyboard-shortcuts-pane .inner .headline { border-bottom: 1px solid #CCC; padding: .375rem 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px; border-radius: 2px 2px 0 0; height: 50px } .keyboard-shortcuts-pane .inner .headline h2 { margin: 0; color: #777; font-size: 21px; font-size: 1.3125rem; padding: .625rem; line-height: 1em; float: left!important } .keyboard-shortcuts-pane .inner .headline .js-close { width: 20px; height: 20px; display: block; float: right; font-size: 21px; font-size: 1.3125rem; margin: .6875rem .9375rem 0; color: #999; text-decoration: none; line-height: 1em } .keyboard-shortcuts-pane .inner .headline .js-close:focus, .keyboard-shortcuts-pane .inner .headline .js-close:hover { color: #666 } .keyboard-shortcuts-pane .inner .headline .js-close span { display: block; text-indent: -99999px } .keyboard-shortcuts-pane .inner h4 { margin: 0; font-size: 18px; font-size: 1.125rem; color: #777 } .keyboard-shortcuts-pane .inner .disable-shortcuts { clear: both; padding: 0 0 .625rem 1.25rem; font-size: smaller } .keyboard-shortcuts-pane .inner.popup { color: #777; top: 100px; min-height: 250px; -moz-transition: height .15s ease-in-out; -webkit-transition: height .15s ease-in-out; -o-transition: height .15s ease-in-out; transition: height .15s ease-in-out; border: 1px solid #b3b3b3!important } @media screen and (max-width: 620px) { .keyboard-shortcuts-pane .inner { display: none } } .keyboard-shortcuts-pane .inner .tooltip-inner { max-width: 100%!important; width: 100% } .keyboard-shortcuts-pane .inner .column { width: 50% } .keyboard-shortcuts-pane .inner .column.right { float: right; padding: .625rem 2.5rem 1.25rem 0 } .keyboard-shortcuts-pane .inner .column.left { padding: .625rem 0 1.25rem 2.5rem; float: left } .keyboard-shortcuts-pane .inner .key { padding: .3125rem .375rem; color: #777; font-family: Monaco, "Liberation Mono", Courier, monospace; line-height: 1; display: inline-block; font-size: 12px; font-size: .75rem; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #d8d8d8; background: -moz-linear-gradient(top, #d8d8d8 0, #f2f2f2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d8d8d8), color-stop(100%, #f2f2f2)); background: -webkit-linear-gradient(top, #d8d8d8 0, #f2f2f2 100%); background: -o-linear-gradient(top, #d8d8d8 0, #f2f2f2 100%); background: -ms-linear-gradient(top, #d8d8d8 0, #f2f2f2 100%); background: linear-gradient(to bottom, #d8d8d8 0, #f2f2f2 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#f2f2f2', GradientType=0); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc; -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc; border: 1px solid #CCC } .keyboard-shortcuts-pane .inner td, .keyboard-shortcuts-pane .inner th { display: table-cell } .keyboard-shortcuts-pane .inner tr { display: table-row; vertical-align: inherit; border-color: inherit } .keyboard-shortcuts-pane .inner th { text-align: left; color: #00b78a; font-weight: 700; padding: .625rem 0 } .keyboard-shortcuts-pane .inner td { padding: .1875rem 0; vertical-align: top; line-height: 20px; line-height: 1.25rem; font-size: 16px; font-size: 1rem } .keyboard-shortcuts-pane .inner td.keys { text-align: right; padding-right: 10px; white-space: nowrap } .chat-wrapper { position: fixed; z-index: 1000; color: #fff; font-size: 16px; font-size: 1rem } .chat-wrapper input.sales-chat-btn { -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px; cursor: pointer; display: block!important; white-space: normal } .chat-wrapper input:focus { box-shadow: none; border: none } .subscribe-nag .chat-wrapper { visibility: hidden } @media screen and (min-width: 450px) { .chat-wrapper { right: 0; bottom: 50%!important; margin-bottom: -107px; display: block } .chat-wrapper.slideUp { visibility: visible!important } .expanded .live-agent { width: 188px; margin: 0 auto; display: block; position: relative } .expanded .live-agent input { white-space: normal; background: no-repeat #F65D22; background-size: 36px; padding-left: 60px; text-align: left; line-height: 1em; transition: all 0 linear 0s } .expanded .live-agent input:focus, .expanded .live-agent input:hover { background: #F65D22; background-image: -moz-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F5C517), color-stop(100%, #F65D22)); background-image: -webkit-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -o-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -ms-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: linear-gradient(to bottom, #f5c517 0, #f65d22 100%); text-decoration: none!important; background-size: 100% } } @media screen and (max-width: 449px) { .chat-wrapper { bottom: 0; left: 50%; padding: 0; margin-left: -25.5%; width: 50%; position: fixed } .chat-wrapper.slideUp { bottom: -70px!important; visibility: visible!important } .register .chat-wrapper { display: none } .subscribe-nag .expanded .live-agent { width: 172px; margin: 0 auto; display: block } .subscribe-nag .chat-wrapper { bottom: -300%; position: absolute; left: 0; margin: 0 } } .legal-agreement-details { color: #000; margin: 15px 0 } .cover { display: inline-block } .cover a, .cover img, .cover span { display: block } .cover a { position: relative; max-width: 100% } .cover img { max-width: 100%; height: auto; box-shadow: 2px 0 6px 0 rgba(0, 0, 0, .2) } .detail-video .cover a:before { height: 50px; width: 50px; margin: -25px 0 0 -25px; background-size: 100% } .results-list .cover { float: left; margin-left: -75px } .results-list .cover img { max-width: 60px } @media (min-width: 450px) { .results-list .cover { margin-left: -90px } .results-list .cover img { max-width: 73px; width: 73px } } .articlelist>li.format-video .cover { max-width: 122px; max-width: 7.625rem; height: 70px; overflow: hidden } .articlelist>li.format-video .cover a { max-height: 70px } .articlelist>li .cover { float: left; width: 100%; max-width: 65px; max-width: 4.0625rem; margin: .125rem .9375rem .3125rem 0 } .articlelist>li .cover a { border: 1px solid transparent } .articlelist>li .cover a:focus { border: 1px solid #F65D22 } @-webkit-keyframes $animationName { 0% { -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0 } 60% { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } 80% { -moz-transform: scale(.9); -webkit-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); opacity: 1 } 100% { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1 } } @-moz-keyframes $animationName { 0% { -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0 } 60% { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } 80% { -moz-transform: scale(.9); -webkit-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); opacity: 1 } 100% { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1 } } @-o-keyframes $animationName { 0% { -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0 } 60% { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } 80% { -moz-transform: scale(.9); -webkit-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); opacity: 1 } 100% { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes $animationName { 0% { -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0 } 60% { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1) } 80% { -moz-transform: scale(.9); -webkit-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); opacity: 1 } 100% { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1 } } @-webkit-keyframes $animationName { 0% { -moz-transform: scaleX(.3); -webkit-transform: scaleX(.3); -o-transform: scaleX(.3); transform: scaleX(.3) } 40% { -moz-transform: scaleX(1.02); -webkit-transform: scaleX(1.02); -o-transform: scaleX(1.02); transform: scaleX(1.02) } 60% { -moz-transform: scaleX(.98); -webkit-transform: scaleX(.98); -o-transform: scaleX(.98); transform: scaleX(.98) } 80% { -moz-transform: scaleX(1.01); -webkit-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01) } 100% { -moz-transform: scaleX(1); -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @-moz-keyframes $animationName { 0% { -moz-transform: scaleX(.3); -webkit-transform: scaleX(.3); -o-transform: scaleX(.3); transform: scaleX(.3) } 40% { -moz-transform: scaleX(1.02); -webkit-transform: scaleX(1.02); -o-transform: scaleX(1.02); transform: scaleX(1.02) } 60% { -moz-transform: scaleX(.98); -webkit-transform: scaleX(.98); -o-transform: scaleX(.98); transform: scaleX(.98) } 80% { -moz-transform: scaleX(1.01); -webkit-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01) } 100% { -moz-transform: scaleX(1); -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @-o-keyframes $animationName { 0% { -moz-transform: scaleX(.3); -webkit-transform: scaleX(.3); -o-transform: scaleX(.3); transform: scaleX(.3) } 40% { -moz-transform: scaleX(1.02); -webkit-transform: scaleX(1.02); -o-transform: scaleX(1.02); transform: scaleX(1.02) } 60% { -moz-transform: scaleX(.98); -webkit-transform: scaleX(.98); -o-transform: scaleX(.98); transform: scaleX(.98) } 80% { -moz-transform: scaleX(1.01); -webkit-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01) } 100% { -moz-transform: scaleX(1); -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @keyframes $animationName { 0% { -moz-transform: scaleX(.3); -webkit-transform: scaleX(.3); -o-transform: scaleX(.3); transform: scaleX(.3) } 40% { -moz-transform: scaleX(1.02); -webkit-transform: scaleX(1.02); -o-transform: scaleX(1.02); transform: scaleX(1.02) } 60% { -moz-transform: scaleX(.98); -webkit-transform: scaleX(.98); -o-transform: scaleX(.98); transform: scaleX(.98) } 80% { -moz-transform: scaleX(1.01); -webkit-transform: scaleX(1.01); -o-transform: scaleX(1.01); transform: scaleX(1.01) } 100% { -moz-transform: scaleX(1); -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } } @-webkit-keyframes $animationName { 0% { -moz-transform: translateY(100%) scale(0) scaleY(0); -webkit-transform: translateY(100%) scale(0) scaleY(0); -o-transform: translateY(100%) scale(0) scaleY(0); transform: translateY(100%) scale(0) scaleY(0) } 100% { -moz-transform: translateY(0) scale(1) scaleY(1); -webkit-transform: translateY(0) scale(1) scaleY(1); -o-transform: translateY(0) scale(1) scaleY(1); transform: translateY(0) scale(1) scaleY(1) } } @-moz-keyframes $animationName { 0% { -moz-transform: translateY(100%) scale(0) scaleY(0); -webkit-transform: translateY(100%) scale(0) scaleY(0); -o-transform: translateY(100%) scale(0) scaleY(0); transform: translateY(100%) scale(0) scaleY(0) } 100% { -moz-transform: translateY(0) scale(1) scaleY(1); -webkit-transform: translateY(0) scale(1) scaleY(1); -o-transform: translateY(0) scale(1) scaleY(1); transform: translateY(0) scale(1) scaleY(1) } } @-o-keyframes $animationName { 0% { -moz-transform: translateY(100%) scale(0) scaleY(0); -webkit-transform: translateY(100%) scale(0) scaleY(0); -o-transform: translateY(100%) scale(0) scaleY(0); transform: translateY(100%) scale(0) scaleY(0) } 100% { -moz-transform: translateY(0) scale(1) scaleY(1); -webkit-transform: translateY(0) scale(1) scaleY(1); -o-transform: translateY(0) scale(1) scaleY(1); transform: translateY(0) scale(1) scaleY(1) } } @keyframes $animationName { 0% { -moz-transform: translateY(100%) scale(0) scaleY(0); -webkit-transform: translateY(100%) scale(0) scaleY(0); -o-transform: translateY(100%) scale(0) scaleY(0); transform: translateY(100%) scale(0) scaleY(0) } 100% { -moz-transform: translateY(0) scale(1) scaleY(1); -webkit-transform: translateY(0) scale(1) scaleY(1); -o-transform: translateY(0) scale(1) scaleY(1); transform: translateY(0) scale(1) scaleY(1) } } .annotator-notice { display: none!important } .pdf #sbo-rt-content .annotator-wrapper .annotator-hl { opacity: .65 } #sbo-rt-content, .sbo-inpage-toc { position: static!important; -webkit-transform: none } #sbo-rt-content .annotator-wrapper, .sbo-inpage-toc .annotator-wrapper { margin: 0 } #sbo-rt-content .annotator-wrapper .annotator-hl, .sbo-inpage-toc .annotator-wrapper .annotator-hl { background-color: #FFE34F } #sbo-rt-content .annotator-wrapper .annotator-hl-has-note, .sbo-inpage-toc .annotator-wrapper .annotator-hl-has-note { position: relative } #sbo-rt-content .annotator-wrapper .annotator-hl-has-note:before, .sbo-inpage-toc .annotator-wrapper .annotator-hl-has-note:before { content: '•'; font-size: 40px; position: absolute; left: -8px; top: 0; line-height: 0; color: #F65D22; -moz-box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, .8); -webkit-box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, .8); -o-box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, .8); box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, .8) } #sbo-rt-content .annotator-wrapper .annotator-hide, .sbo-inpage-toc .annotator-wrapper .annotator-hide { display: none!important } #sbo-rt-content .annotator-wrapper .annotator-item, .sbo-inpage-toc .annotator-wrapper .annotator-item { list-style-type: none; margin-left: 0; clear: both } #sbo-rt-content .annotator-wrapper .annotator-item input.disabled, #sbo-rt-content .annotator-wrapper .annotator-item label.disabled, .sbo-inpage-toc .annotator-wrapper .annotator-item input.disabled, .sbo-inpage-toc .annotator-wrapper .annotator-item label.disabled { opacity: .25 } #sbo-rt-content .annotator-wrapper .animateIn, .sbo-inpage-toc .annotator-wrapper .animateIn { animation-name: animateIn; -webkit-animation-name: animateIn; animation-duration: .15s; -webkit-animation-duration: .15s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible } #sbo-rt-content .annotator-wrapper .stretchRight, .sbo-inpage-toc .annotator-wrapper .stretchRight { animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: .3s; -webkit-animation-duration: .3s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0 } #sbo-rt-content .annotator-wrapper .expandUp, .sbo-inpage-toc .annotator-wrapper .expandUp { animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: .2s; -webkit-animation-duration: .2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible!important } #sbo-rt-content .annotator-wrapper .annotator-touch-controls, #sbo-rt-content .annotator-wrapper .annotator-viewer.viewer, .sbo-inpage-toc .annotator-wrapper .annotator-touch-controls, .sbo-inpage-toc .annotator-wrapper .annotator-viewer.viewer { position: absolute; margin: 0; padding: 0; background-color: transparent } #sbo-rt-content .annotator-wrapper .annotator-touch-controls div, #sbo-rt-content .annotator-wrapper .annotator-viewer.viewer div, .sbo-inpage-toc .annotator-wrapper .annotator-touch-controls div, .sbo-inpage-toc .annotator-wrapper .annotator-viewer.viewer div { display: none } #sbo-rt-content .annotator-wrapper .annotator-touch-controls .annotator-widget, #sbo-rt-content .annotator-wrapper .annotator-viewer.viewer .annotator-widget, .sbo-inpage-toc .annotator-wrapper .annotator-touch-controls .annotator-widget, .sbo-inpage-toc .annotator-wrapper .annotator-viewer.viewer .annotator-widget { margin-top: 0!important } #sbo-rt-content .annotator-wrapper .toggle_public ul, .sbo-inpage-toc .annotator-wrapper .toggle_public ul { margin: 0; padding: 0 } #sbo-rt-content .annotator-wrapper .toggle_public ul li, .sbo-inpage-toc .annotator-wrapper .toggle_public ul li { font-family: 'Source Sans Pro', arial, sans-serif; font-size: .9em!important; list-style-type: none; margin: 0 10px 0 0!important; float: left; color: #404040 } #sbo-rt-content .annotator-wrapper .toggle_public ul li input+span, .sbo-inpage-toc .annotator-wrapper .toggle_public ul li input+span { opacity: .75; font-size: 15px; margin-left: 5px } #sbo-rt-content .annotator-wrapper .toggle_public ul li input:checked+span, .sbo-inpage-toc .annotator-wrapper .toggle_public ul li input:checked+span { opacity: 1 } #sbo-rt-content .annotator-wrapper .toggle_public ul li label.disabled, .sbo-inpage-toc .annotator-wrapper .toggle_public ul li label.disabled { opacity: .25 } #sbo-rt-content .annotator-wrapper .editor_section, .sbo-inpage-toc .annotator-wrapper .editor_section { font-family: 'Source Sans Pro', arial, sans-serif; font-size: .9em!important; margin-top: 40px!important; padding-top: 10px; border-top: 1px solid #CCC } #sbo-rt-content .annotator-wrapper .editor_section label, .sbo-inpage-toc .annotator-wrapper .editor_section label { display: inline-block; margin-left: 10px } #sbo-rt-content .annotator-wrapper small.error, .sbo-inpage-toc .annotator-wrapper small.error { color: red!important } #sbo-rt-content .annotator-wrapper .annotator-view-click, .sbo-inpage-toc .annotator-wrapper .annotator-view-click { margin: 0!important } #sbo-rt-content .annotator-wrapper .annotator-listing, .sbo-inpage-toc .annotator-wrapper .annotator-listing { padding-left: 0!important } #sbo-rt-content .annotator-wrapper .annotator-adder, #sbo-rt-content .annotator-wrapper .annotator-view-clicker, .sbo-inpage-toc .annotator-wrapper .annotator-adder, .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker { position: absolute!important; height: auto; width: 100%; background-color: transparent!important; padding: 0; margin: 0 } #sbo-rt-content .annotator-wrapper .annotator-adder ul, #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul, .sbo-inpage-toc .annotator-wrapper .annotator-adder ul, .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul { margin: 0!important; padding: 3px 5px!important; background-color: #FFF; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, .2); -o-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, .2); box-shadow: 0 2px 5px 2px rgba(0, 0, 0, .2); border: 1px solid #CCC; float: left } #sbo-rt-content .annotator-wrapper .annotator-adder ul li, #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li, .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li, .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li { list-style-type: none; list-style-image: none; float: left; margin: 0!important } #sbo-rt-content .annotator-wrapper .annotator-adder ul li:last-child a, #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li:last-child a, .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li:last-child a, .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li:last-child a { border-right: none } #sbo-rt-content .annotator-wrapper .annotator-adder ul li a, #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li a, .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li a, .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li a { border: none; padding: 5px 10px; color: #256595; font-family: 'Source Sans Pro', arial, sans-serif; font-size: 15px; font-weight: 600 } #sbo-rt-content .annotator-wrapper .annotator-adder ul li a:hover, #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li a:hover, .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li a:hover, .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li a:hover { color: #002776!important; text-decoration: underline!important } #sbo-rt-content .annotator-wrapper .annotator-viewer, .sbo-inpage-toc .annotator-wrapper .annotator-viewer { width: 100% } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper code, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper li, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper p, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper code, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper p { color: #404040!important; background-color: #FFF!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper div, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper div { margin: 0!important; background-color: #FFF!important } @media screen and (max-width: 53.125em) and (min-width: 45.0625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper { max-width: 80%!important; margin-left: 0!important; left: 10%!important } } @media screen and (max-width: 45em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper { position: absolute!important; max-width: 100%!important; left: 0!important; margin-left: 0!important; padding-bottom: 10px } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .editor, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .editor { float: left; height: 100%; position: static!important; top: 0!important } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .left, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .right, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .left, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .right { margin: 0!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget { background-color: #fff!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-media .left, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-media .left { line-height: 1.3em } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-media .left a, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-media .left a { margin-top: 10px; display: block; font-size: .8em; line-height: 1.3em } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-outer>.title, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-outer>.title { padding: 0 15px 10px!important; margin: 10px 0 0!important; border-bottom: 1px solid #ddd!important; font: 500 1.5em/1.38 'Source Sans Pro'; color: #777!important; background-color: #FFF!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .row, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .row { border-top: 1px solid #ddd!important; padding: 8px 0; display: block; float: left; width: 100% } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .row.delete-highlight, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .row.delete-highlight { padding: 18px 0 8px } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .indent, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .indent { padding: 0 20px; margin-bottom: 15px } @media screen and (max-width: 32.5625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .indent, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .indent { padding: 0 } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper h4, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper small, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper h4, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper small { color: #777!important; margin-top: 5px!important; font: 500 .8em/1.2 'Source Sans Pro'; background-color: #FFF!important } @media screen and (min-width: 45.0625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .left, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .left { float: left; width: 50% } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .right, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .right { float: right } @media screen and (min-width: 45.0625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .right, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .right { width: 50% } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .sans, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .sans { font: 500 .9em/1.2 'Source Sans Pro' } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a { border-bottom: none!important; white-space: initial; color: #F65D22 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a:focus, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a:hover, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a:focus, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a:hover { text-shadow: 0 0 0 transparent; text-decoration: underline; background: no-repeat } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a.edit-highlight, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a.edit-highlight { color: #404040; top: 0; right: 20px } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a.button, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a.button { padding: 10px 25px } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-delete, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-delete { width: auto; color: #FFF } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-delete:hover, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-delete:hover { color: #FFF!important; text-shadow: 0 0 0 transparent!important; background: #F65D22; background-image: -moz-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -webkit-gradient(left top, left bottom, color-stop(0, #F5C517), color-stop(100%, #F65D22)); background-image: -webkit-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -o-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -ms-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: linear-gradient(to bottom, #f5c517 0, #f65d22 100%); text-decoration: none } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .grey-btn, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .grey-btn { width: auto; position: relative; top: 10px; background: no-repeat #c7c2ba!important; color: #FFF!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .grey-btn:hover, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .grey-btn:hover { text-decoration: none; color: #070707!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing { float: right; margin: 15px 0 0!important; padding: 0!important; text-align: right } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li { margin: 0 0 0 10px!important } @media screen and (max-width: 32.5625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing { padding: 0!important; float: none; text-align: center } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget { width: 100%; left: auto; bottom: auto; position: relative; float: left; margin: 0; padding: 10px 25px } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .delete-confirm, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .delete-confirm { text-align: center; padding: 15px 35px 25px; color: #777; font: 400 .9em/1.3 'Source Sans Pro', arial, sans-serif!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls .link-to-markdown, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls .link-to-markdown { margin-top: -14px; line-height: 22px; padding: 0 8px; position: absolute; right: 25px; color: #F65D22; border: 1px solid #bbb!important; font-size: 14px } @media screen and (max-width: 32.5625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget { padding: 10px 15px } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected { padding: 0; font: 400 .9em/1.3 'Source Sans Pro', arial, sans-serif!important; color: #777; overflow: hidden; background-color: #FFF!important } @media screen and (max-width: 32.5625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected { padding: 0 0 12px!important } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment { padding: 8px 0; font: 200 1em/1.3 'Source Sans Pro', arial, sans-serif!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing { padding: 0!important; margin: 0!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing .annotator-item, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing .annotator-item { list-style-type: none } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea { clear: both; max-width: 100%; color: #999; padding: 10px; font: 400 .875em/1.3 'Source Sans Pro', arial, sans-serif } @media screen and (max-width: 32.5625em) { #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea { background-color: #EEE } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea:focus, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea:focus { background-color: #f6f6f6 } } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls { text-align: center; padding: 0; margin: 0!important; background-color: #FFF!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul { width: 100%; display: block; margin: 10px 0 0; padding: 0!important; float: left } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li { display: inline-block; text-decoration: none } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete { float: left } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete a, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete a { margin-left: 0 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.cancel, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.save, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.cancel, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.save { float: right } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls p, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls p { background-color: #FFF!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a { display: inline-block; padding: 5px 25px; -webkit-appearance: none!important; font-family: 'Source Sans Pro'!important; color: #fff; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.annotator-cancel, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.annotator-cancel { background: no-repeat #C7C2BA!important } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive { -webkit-appearance: none; color: #fff; margin-left: 12px; border: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .4)!important; background: #F65D22 } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive:focus, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive:hover, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive:focus, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive:hover { color: #FFF!important; text-shadow: 0 0 0 transparent!important; background: #F65D22; background-image: -moz-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -webkit-gradient(left top, left bottom, color-stop(0, #F5C517), color-stop(100%, #F65D22)); background-image: -webkit-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -o-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: -ms-linear-gradient(top, #F5C517 0, #F65D22 100%); background-image: linear-gradient(to bottom, #f5c517 0, #f65d22 100%) } #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a:focus, #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a:hover, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a:focus, .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a:hover { background-color: #C7C2BA!important; text-decoration: none!important; color: #404040!important } @media screen and (min-width: 45em) { .touch .annotator-modal-wrapper { position: absolute!important; margin-top: 200px!important } } .annotator-touch-controls { width: 100%; text-align: center; min-width: auto; z-index: 9999 } .annotator-touch-controls .animateIn { animation-name: animateIn; -webkit-animation-name: animateIn; animation-duration: .35s; -webkit-animation-duration: .35s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible } .annotator-touch-controls .annotator-edit { background-color: #f5f5f5; position: absolute; right: -25px; -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px } .annotator-touch-controls.annotator-touch-hide { right: -9999em; opacity: 0; -webkit-transition: opacity .2s 0 ease-in, right 0s .3s linear; -moz-transition: opacity .2s 0 ease-in, right 0s .3s linear; -ms-transition: opacity .2s 0 ease-in, right 0s .3s linear; -o-transition: opacity .2s 0 ease-in, right 0s .3s linear; transition: opacity .2s 0 ease-in, right 0s .3s linear } .annotator-touch-controls .annotator-add { padding: .5rem; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #777; color: #fff; position: absolute; margin-left: -20px; left: 50%; width: 48px; height: 45px; cursor: pointer; border-bottom: none; -moz-box-shadow: 0 0 1px #cdcdcd; -webkit-box-shadow: 0 0 1px #cdcdcd; -o-box-shadow: 0 0 1px #cdcdcd; box-shadow: 0 0 1px #cdcdcd; display: block; text-align: center } .annotator-touch-controls .annotator-add:after, .annotator-touch-controls .annotator-add:before { width: 0; height: 0; border: .65em solid; border-color: #777 #777 transparent transparent; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); content: ""; left: 14px; top: -10px; position: absolute } .annotator-touch-controls .annotator-add:before { top: -11px; border-color: #cdcdcd #cdcdcd transparent transparent } .annotator-touch-controls .annotator-add span { display: block } .annotator-touch-controls .annotator-add span:before { font-family: SSFlow; content: '\F707'; height: 48px; width: 49px; font-size: 26px; font-size: 1.625rem; top: 5px; position: relative; color: #fff } .card-annotation { color: rgba(64, 64, 64, .65) } .card-annotation .wrap-pod { max-width: 800px; margin: 0 auto } .card-annotation .pod { float: left; padding: 1.25rem 1.25rem 1.875rem } @media screen and (max-width: 32.5625em) { .card-annotation .pod { margin: 0 0 1.25rem } } .card-annotation .pod h2 { margin: 5px 0 20px; font-size: 21px; color: rgba(74, 60, 49, .75) } .card-annotation form textarea { display: block; max-width: 100%; width: 100% } .card-annotation form [type=submit] { margin-left: .9375rem } .card-annotation form ul.delete-option { margin-top: 20px } .card-annotation form ul.delete-option input { margin: 0; font-size: 14px } .card-annotation form ul.buttons { margin-top: 15px } .card-annotation form ul#id_privacy_option li { margin-left: .625rem } .card-annotation form ul.privacy-options li label { font-size: 16px; font-size: 1rem } .card-annotation form ul li { display: inline-block } .card-annotation form ul li input { margin: 0 5px } .card-annotation .popup { font-family: "source sans pro", Helvetica, Arial, sans-serif!important; overflow: hidden; color: #777; background-color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; clear: both; width: 600px; position: fixed; z-index: 9999; -webkit-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; border: 1px solid #ccc; -moz-box-shadow: 0 3px 0 #e6e6e6; -webkit-box-shadow: 0 3px 0 #e6e6e6; -o-box-shadow: 0 3px 0 #e6e6e6; box-shadow: 0 3px 0 #e6e6e6; top: 200px; left: 50%; margin-left: -300px } .card-annotation .popup h1 { margin: 0; color: #777; font-size: 26px; font-size: 1.625rem; padding: .9375rem; line-height: 1em; float: left!important; font-weight: 500 } .card-annotation .popup .headline { width: 100%; float: left; border-bottom: 1px solid #CCC } @media screen and (max-width: 40.625em) { .card-annotation .popup { max-width: 95%; margin: 0 2.5%; left: 0 } } .card-annotation .popup .inner { padding: 0 20px 20px; float: left; width: 100% } .card-annotation .popup ul { float: right } .card-annotation .popup ul li { display: inline-block; margin-left: 15px } .card-annotation .media-thumbnail { float: left; margin: 0 .9375rem .625rem 0 } .card-annotation .annotation-note { margin: 0 0 .65em; word-break: break-all } .card-annotation .clear { clear: both } .card-annotation .left { float: left; margin: 0 } @media screen and (min-width: 32.5625em) { .card-annotation .left { width: 50% } } .card-annotation .right { float: right; margin: 0 } @media screen and (max-width: 32.5625em) { .card-annotation .right { float: none; text-align: center } } .card-annotation .row { border-top: 1px solid #ddd; display: block; padding-top: .625rem; margin: 0 0 .625rem; float: left; width: 100% } .card-annotation .note.quote, .card-annotation .row.border { margin-bottom: 0 } .card-annotation div.quote { padding-bottom: .9375rem } .card-annotation .note { color: #888; padding-bottom: .5rem; display: inline-block } .card-annotation .social-sharing { text-align: center; margin-top: .9375rem } .card-annotation .social-sharing li { margin: .625rem .625rem 0 } .card-annotation .sign-up { text-align: center; padding: 0 7.5rem } .card-annotation .sign-up h1 { padding-bottom: 0; margin-bottom: 0 } .card-annotation .sign-up>p { margin-top: 10px } @media screen and (max-width: 51.3125em) { .card-annotation .sign-up { padding: 0 } } .card-annotation .annotation-quote { color: rgba(64, 64, 64, .75); font-family: Georgia, serif; margin: 0 } .card-annotation .annotation-quote:before { content: "\201C"; float: left; font-size: 50px } .card-annotation .annotation-quote:after { content: "\201D"; float: right; font-size: 50px } .ios-app-teaser { position: relative; height: 40px; margin: 0 1.25rem -5px } @media only screen and (max-width: 520px) { .ios-app-teaser { margin: 0 1.25rem -5px } } .ios-app-teaser ul { background: #404040 } .ios-app-teaser ul:after, .ios-app-teaser ul:before { content: " "; display: table } .ios-app-teaser ul:after { clear: both } .ios-app-teaser ul li { list-style: none; float: left; width: 50%; text-align: center; font-size: 16px; vertical-align: middle } .ios-app-teaser ul li:active, .ios-app-teaser ul li:focus, .ios-app-teaser ul li:hover { background: #1b1a1a; -moz-transition: background .7s ease; -webkit-transition: background .7s ease; -o-transition: background .7s ease; transition: background .7s ease } .ios-app-teaser ul li a { display: block; color: #fff; font-weight: 300; padding: 10px 0 } .ios-app-teaser ul li a:active, .ios-app-teaser ul li a:focus, .ios-app-teaser ul li a:hover { text-decoration: none; color: #fff } .sbo-toc.has-ios-app-teaser .ios-app-teaser { display: block } .sbo-toc.has-ios-app-teaser .close { top: 40px } body.night-mode .sbo-toc .ios-app-teaser ul { background: #222; border-bottom: 1px solid #444 } body.night-mode .sbo-toc .ios-app-teaser ul li:active, body.night-mode .sbo-toc .ios-app-teaser ul li:focus, body.night-mode .sbo-toc .ios-app-teaser ul li:hover { background: #070707 } .pagefoot { font-family: "source sans pro", sans-serif; font-size: 14px; font-size: .875rem; color: #777; line-height: 1.25em } .pagefoot .copyright { display: block; margin: .3em 0 } @media screen and (min-width: 32.5625em) { .pagefoot .copyright { display: inline } } .pagefoot a { color: #404040 } .pagefoot a:active, .pagefoot a:focus, .pagefoot a:hover, .pagefoot li a { color: #F65D22 } .pagefoot li { display: inline-block; line-height: 1.5em } .pagefoot li:after { content: ' / ' } .pagefoot li:last-child:after, .subscribe-nag .promotion strike:before { content: '' } .user-anon .pagefoot { margin-top: 1em } .user-anon .pagefoot a { color: #777 } .user-anon .pagefoot li a { color: #D64309 } .pagefoot .icon-up { display: block; padding: 10px; position: fixed; right: 20px; bottom: 20px; z-index: 99999; text-transform: lowercase; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #d5d5d5; text-decoration: none } .course-nag .close, .course-nag .message, .pagination-label, h1.video-toc-title { text-transform: uppercase } .pagefoot .icon-up span { display: none } .pagefoot .icon-up:before { font-size: 19px; content: '\2B06'; font-family: SSFlow; display: inline-block; vertical-align: middle; color: #777 } .subscribe-panel .pagefoot .icon-up { bottom: 80px } .user-anon .pagefoot #legal, .user-anon .pagefoot nav { margin: .3125rem 0 .3125rem 3.4375rem; line-height: 1.15em } .user-anon .pagefoot nav a { text-decoration: none } .user-anon .pagefoot div#legal a { color: #777; text-decoration: none } .full-support, .pagefoot .full-support { display: none } @media screen and (min-width: 48.0625em) { .full-support, .pagefoot .full-support { display: inline-block } .mobile-support, .pagefoot .mobile-support { display: none } } .subscribe-nag.collapsed .expanded, .subscribe-nag.promotion-included .pagefoot { display: none } #js-subscribe-panel-filler { float: left; width: 100% } .subscribe-nag { position: fixed; width: 100%; max-width: 100%; padding: 0 10px; bottom: -300%; max-height: 50%; left: 0; z-index: 99999; margin: 0; background-color: #FFF; -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2); box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2); border-top: 1px solid #CCC; text-align: center } .subscribe-nag .cta-group { padding-bottom: 15px } .subscribe-nag.expired-panel, .subscribe-nag.trial-panel { max-height: 350px } .subscribe-nag.promotion-included { max-height: 515px; color: #FFF } .subscribe-nag.collapsed p { margin: 12px 0 } .subscribe-nag h2, .subscribe-nag h3 { line-height: 1.1em; color: #404040; font-size: 36px; font-size: 2.25rem; font-weight: 300; margin: 1.25rem 3rem } .subscribe-nag p { color: #4a3c31 } .subscribe-nag h3 { font-size: 24px; font-size: 1.5rem } .subscribe-nag .green { color: #F65D22 } .subscribe-nag .js-toggle-nag { position: absolute; text-align: center; line-height: 1.3em; right: 0; top: 0; color: #888; font-size: 18px; font-size: 1.125rem; text-decoration: none; z-index: 10; padding: .9375rem .9375rem .75rem } .subscribe-nag .js-toggle-nag:focus, .subscribe-nag .js-toggle-nag:hover { background-color: #F65D22; color: #FFF; text-decoration: none } .subscribe-nag.expanded { position: absolute } .subscribe-nag.collapsed .sample-message { padding: 0 } .subscribe-nag.collapsed h2 { font-size: 24px; font-size: 1.5rem; margin: .625rem 3rem .9375rem } .subscribe-nag.slideUp { bottom: 0!important; animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: .5s; -webkit-animation-duration: .5s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible!important } .subscribe-nag a { text-decoration: none } .subscribe-nag .promotion { background-color: #000; padding: 20px 10px; margin-bottom: 20px; position: relative } .subscribe-nag .promotion strike { position: relative; text-decoration: none } .subscribe-nag .promotion strike:before { border-bottom: 4px solid #FC4747; position: absolute; width: 115%; top: 46%; transform: rotate(-14deg); left: -6% } .subscribe-nag .promotion h1 { color: #F5C517; font-family: 'Stag Web', georgia, serif; font-weight: 400; font-style: normal; font-stretch: normal; font-size: 2.5em } .subscribe-nag .promotion h2 { color: #FFF; margin-top: 10px } .subscribe-nag .promotion b { font-weight: 700 } .subscribe-nag .promotion .button { background: no-repeat #fff; text-shadow: none; border-radius: 0; color: #333; padding: 10px 20px } .subscribe-nag .promotion .callout { position: absolute; right: 0; top: 0 } .subscribe-nag .promotion .callout img { width: 30%; float: right } .subscribe-nag .promotion .callout .accessible-text { position: relative; text-indent: -9999px; display: block } @media screen and (max-width: 56.25em) { .subscribe-nag .promotion h1, .subscribe-nag .promotion h2, .subscribe-nag .promotion h3 { font-size: 2em } } @media screen and (max-width: 48em) { .subscribe-nag .promotion h1, .subscribe-nag .promotion h2, .subscribe-nag .promotion h3 { font-size: 1.5em } } .subscribe-nag .help { font-size: smaller; text-decoration: none } .subscribe-nag .trending-topics { margin: 0 } .subscribe-nag .bigbutton.loading, .subscribe-nag .bigbutton.loading:hover { background-color: #B2B4B3; background-image: none } .subscribe-nag .bigbutton .spinner { display: none } .subscribe-nag .pagefoot #legal a.copyright, .subscribe-nag .pagefoot nav a.copyright { color: #777 } .subscribe-nag.anon-panel h2, .subscribe-nag.anon-panel h3 { margin: .625rem .75rem } @media screen and (max-width: 48em) { .subscribe-nag.anon-panel .doc-title { display: none } .subscribe-nag.anon-panel .doc-type { white-space: nowrap } } .subscribe-nag .sample-message { margin: 0 auto; padding: .3125rem 1.25rem 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; -o-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent; border: none; max-width: 900px; max-width: 56.25rem; position: relative; color: #4a3c31 } .subscribe-nag .sample-message .cta-group .bigbutton { display: inline-block } .subscribe-nag .sample-message .cta-group .signin { display: inline-block; font-size: smaller } .subscribe-nag .sample-message .cta-group .signin a { text-decoration: none } .subscribe-nag .sample-message .text-links { display: inline-block; margin: 0 0 0 10px; vertical-align: middle } .subscribe-nag .sample-message p { max-width: 550px; max-width: 34.375rem; font-size: 18px; font-size: 1.125rem; line-height: 24px; line-height: 1.5rem; margin: 10px auto 15px; font-weight: 500 } .subscribe-nag .sample-message footer { text-align: left; margin: .9375rem 0 .625rem; padding: 0 } .subscribe-nag .sample-message footer object { display: none } @media screen and (max-width: 32.5em) { .subscribe-nag .sample-message footer #logo { display: none } } .subscribe-nag .sample-message.nag-a, .subscribe-nag .sample-message.nag-b { max-width: 85rem; padding: 0; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out } .subscribe-nag .sample-message.nag-a h2, .subscribe-nag .sample-message.nag-b h2 { text-align: left; margin-left: 0 } .subscribe-nag .sample-message.nag-a .doc-title, .subscribe-nag .sample-message.nag-b .doc-title { display: none } .subscribe-nag .sample-message.nag-a .cta-group, .subscribe-nag .sample-message.nag-b .cta-group { display: inline-block } .subscribe-nag .sample-message.nag-a .cta-group .bigbutton, .subscribe-nag .sample-message.nag-b .cta-group .bigbutton { width: 45%; padding: 10px; font-size: 1rem; font-weight: 400; float: left } .subscribe-nag .sample-message.nag-a .cta-group .bigbutton.team-btn, .subscribe-nag .sample-message.nag-b .cta-group .bigbutton.team-btn { width: 45%; margin-right: 0 } .subscribe-nag .sample-message.nag-a .cta-group div.bigbutton, .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton { display: none } .subscribe-nag .sample-message.nag-a .cta-group .signin, .subscribe-nag .sample-message.nag-b .cta-group .signin { width: 100%; margin: 5px 0 } .subscribe-nag .sample-message.nag-a .registration-form, .subscribe-nag .sample-message.nag-b .registration-form { float: left; text-align: left } .subscribe-nag .sample-message.nag-a .registration-form li, .subscribe-nag .sample-message.nag-b .registration-form li { display: inline-block; width: 31.5%; margin-right: 2%; vertical-align: top } .subscribe-nag .sample-message.nag-a .registration-form li.password, .subscribe-nag .sample-message.nag-b .registration-form li.password { margin-right: 0 } .subscribe-nag .sample-message.nag-a .registration-form li input, .subscribe-nag .sample-message.nag-b .registration-form li input { max-width: 100%; min-width: 100% } .subscribe-nag .sample-message.nag-a .registration-form li.error input, .subscribe-nag .sample-message.nag-b .registration-form li.error input { margin-bottom: 0 } .subscribe-nag .sample-message.nag-a .registration-form .terms-conditions input, .subscribe-nag .sample-message.nag-a .registration-form .terms-conditions label, .subscribe-nag .sample-message.nag-b .registration-form .terms-conditions input, .subscribe-nag .sample-message.nag-b .registration-form .terms-conditions label { display: inline-block!important; margin: 0 10px 10px 0 } .subscribe-nag .sample-message.nag-a .registration-form .terms-conditions .error, .subscribe-nag .sample-message.nag-b .registration-form .terms-conditions .error { display: block } .subscribe-nag .sample-message.nag-a.active .terms-conditions, .subscribe-nag .sample-message.nag-b.active .terms-conditions { display: block; float: left } .subscribe-nag .sample-message.nag-a.active .terms-conditions label, .subscribe-nag .sample-message.nag-b.active .terms-conditions label { width: 90% } .subscribe-nag .sample-message.nag-a.active .terms-conditions #id_legal, .subscribe-nag .sample-message.nag-b.active .terms-conditions #id_legal { vertical-align: top; margin: 3px 10px 0 0 } .subscribe-nag .sample-message.nag-a.active .doc-title, .subscribe-nag .sample-message.nag-b.active .doc-title { display: inline-block } .subscribe-nag .sample-message.nag-a.active .team-btn, .subscribe-nag .sample-message.nag-b .cta-group button, .subscribe-nag .sample-message.nag-b.active .team-btn { display: none } .subscribe-nag .sample-message.nag-a.active .bigbutton, .subscribe-nag .sample-message.nag-b.active .bigbutton { width: 100% } .subscribe-nag .sample-message.nag-a .registration-form { width: 69% } .subscribe-nag .sample-message.nag-a .cta-group { width: 30%; float: right } .subscribe-nag .sample-message.nag-a .cta-group .bigbutton, .subscribe-nag .sample-message.nag-a .cta-group .team-btn { width: 100%; line-height: initial } .subscribe-nag .sample-message.nag-b .registration-form { width: 85%; display: none } .subscribe-nag .sample-message.nag-b h2 { margin: 1rem 0 1rem 7%; float: left; width: 50% } .subscribe-nag .sample-message.nag-b form { width: 75%; margin: 1rem auto } .subscribe-nag .sample-message.nag-b .cta-group { width: 35%; float: right; margin: .5rem 0 1rem 2% } .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton { display: block; width: 100%; margin: 0 0 10px } .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton.mobile { display: none } .subscribe-nag .sample-message.nag-b.active h2 { width: 73%; margin: 1rem auto; float: none } .subscribe-nag .sample-message.nag-b.active form { margin: 0 auto } .subscribe-nag .sample-message.nag-b.active .registration-form { display: block; width: 100% } .subscribe-nag .sample-message.nag-b.active .registration-form li { width: 50%; margin-right: 0; float: left; padding: 0 1% } .subscribe-nag .sample-message.nag-b.active .registration-form_item.email { width: 100%; display: block } .subscribe-nag .sample-message.nag-b.active .cta-group button { display: block } .subscribe-nag .sample-message.nag-b.active .cta-group div.bigbutton { display: none } @media screen and (max-width: 50em) { .subscribe-nag .sample-message.nag-a, .subscribe-nag .sample-message.nag-b { padding: 0 10% } .subscribe-nag .sample-message.nag-a h2, .subscribe-nag .sample-message.nag-b h2 { display: none } .subscribe-nag .sample-message.nag-a .registration-form li, .subscribe-nag .sample-message.nag-b .registration-form li { display: block; width: 100% } .subscribe-nag .sample-message.nag-a form, .subscribe-nag .sample-message.nag-b form { margin-bottom: .75rem } .subscribe-nag .sample-message.nag-a .cta-group, .subscribe-nag .sample-message.nag-b .cta-group { width: 100%; padding: 1.5rem 16.5% 0; margin: 0 } .subscribe-nag .sample-message.nag-a .cta-group div.bigbutton, .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton { display: block; margin: 0 0 10px } .subscribe-nag .sample-message.nag-a.active h2, .subscribe-nag .sample-message.nag-b.active h2 { display: block; padding: 1.5rem 16.5% 0; margin: 0 } .subscribe-nag .sample-message.nag-a.active .registration-form, .subscribe-nag .sample-message.nag-b.active .registration-form { display: block } .subscribe-nag .sample-message.nag-a.active .doc-title, .subscribe-nag .sample-message.nag-b.active .doc-title { display: none } .subscribe-nag .sample-message.nag-a.active .terms-conditions input, .subscribe-nag .sample-message.nag-b.active .terms-conditions input { margin: 4px 10px 0 0; vertical-align: top } .subscribe-nag .sample-message.nag-a.active .terms-conditions label, .subscribe-nag .sample-message.nag-b.active .terms-conditions label { width: 90% } .subscribe-nag .sample-message.nag-b form, .subscribe-nag .sample-message.nag-b.active h2 { width: 100% } .subscribe-nag .sample-message.nag-a.active .cta-group, .subscribe-nag .sample-message.nag-b.active .cta-group { padding: 0 16.5% } .subscribe-nag .sample-message.nag-a.active .cta-group button, .subscribe-nag .sample-message.nag-b.active .cta-group button { display: block } .subscribe-nag .sample-message.nag-a.active .cta-group div.bigbutton, .subscribe-nag .sample-message.nag-b.active .cta-group div.bigbutton { display: none } .subscribe-nag .sample-message.nag-b .cta-group { padding: 0; margin: 0 0 10px } .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton.mobile { display: inline-block; float: none } .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton, .subscribe-nag .sample-message.nag-b.active .cta-group div.bigbutton.mobile { display: none } .subscribe-nag .sample-message.nag-b .cta-group .signin { margin: 0; width: 100% } .subscribe-nag .sample-message.nag-b.active .registration-form li { width: 100%!important } .subscribe-nag .sample-message.nag-b.active .cta-group { padding: 0 17% } .subscribe-nag .sample-message .text-links { display: block; margin: 10px 0 0 } } .subscribe-nag p.welcome { font-size: 1.5rem; margin: 1.5rem 0; font-weight: 300 } .subscribe-nag .registration-form__minimize:before { content: "\2421"; font-family: SSFlow; position: absolute } .subscribe-nag .registration-form__minimize, .subscribe-nag .registration-form__minimize__title { display: none } .subscribe-nag .registration-form__minimize.active { position: absolute; display: block; width: 20px; height: 20px; right: 20px; top: 5px; z-index: 10; cursor: pointer } @media screen and (max-width: 32.5625em), screen and (max-height: 25.0625em) { .subscribe-nag.collapsed .header { margin: 10px 0 } .subscribe-nag.collapsed footer { margin-top: 5px!important } .subscribe-nag h2 { font-size: 24px; font-size: 1.5rem } .subscribe-nag h3 { font-size: 18px; font-size: 1.125rem } .subscribe-nag .sample-message .signin { position: relative; right: auto; margin: 0 0 .9375rem; font-size: small } .subscribe-nag .sample-message p { font-size: 16px; font-size: 1rem } .subscribe-nag .sample-message p.usage-data { padding: 0 3.125rem; line-height: 1.3em } .subscribe-nag .sample-message .bigbutton { margin: 0 0 .625rem } .subscribe-nag .sample-message .comment { margin: -10px auto 0!important } .subscribe-nag footer { text-align: center!important } .subscribe-nag footer #logo { float: none!important; margin: 0 0 12px!important; padding: 0!important } .subscribe-nag footer ul { padding: 0; margin-top: 5px; font-size: smaller; line-height: 1em } } .cover-position-right { max-width: 100%; max-height: 100%; height: auto; display: inline-block } .academic-text { text-align: left } .course-nag, .servererror .pod { text-align: center } .academic-text h1 { color: #777; font-family: "source sans pro", sans-serif; font-size: 40px; font-size: 2.5rem } .academic-text h2 { font-size: 20px; font-size: 1.25rem } .academic-text ol li { font-size: 18px; font-size: 1.125rem } #academic-text-bold { font-weight: 700 } .support-text { margin-top: 20px } .support-text p { font-size: 14px; font-size: .875rem; margin: 0 } @media screen and (min-width: 1024px) and (orientation: landscape) { .cover-position-right { float: right } .academic-text { float: left } .academics-topics { clear: left } } .academic-mailto-link { margin-top: 20px } .course-nag { width: 140px; padding: 20px 10px 10px; position: fixed; z-index: 9999999; background: #fff; top: 15%; right: 0; box-shadow: 0 0 15px 4px rgba(0, 0, 0, .1); font-size: 14px; line-height: 1.3; font-family: "source sans pro", arial, sans-serif } .course-nag .close { padding: 1px 7px; position: absolute; top: 0; right: 0; font-size: 12px; font-weight: 600; color: #fff; background: #000 } .course-nag .close:hover { text-decoration: none } .course-nag .background { width: 100%; position: absolute; top: 0; left: 0; z-index: -1 } .course-nag .avatar { margin-bottom: 5px } .course-nag .avatar img { width: 100px; height: 100px; border: 2px solid #fff; border-radius: 50% } .course-nag .time { font-weight: 600 } .course-nag .button { display: block; margin-top: 10px; padding: 7px 4px; font-size: 13px } .course-nag .button.is-streaming-now { color: #008542 } .no-touch .rec-delete:focus, .no-touch .rec-delete:hover, .no-touch .rec-fav:focus, .no-touch .rec-fav:hover, .rec-delete, .rec-fav { background: 0 0; color: #ccc } .rec-delete, .rec-fav { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; line-height: 1; margin: 0; padding: 0; border: none; font-weight: 400 } .rec-delete:active, .rec-fav:active { top: 0 } .django-messages { margin: 1rem 0; font-family: "source sans pro", sans-serif } .django-messages>li { position: relative; padding: 1rem; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color: #fff } @media screen and (max-width: 30em) { .django-messages>li { margin: 1rem .9375rem } } .django-messages .fixed-position { position: fixed; width: 92%; z-index: 99 } .django-messages .info, .django-messages .success { background: #F65D22; font-weight: 400 } .django-messages .info a, .django-messages .success a { color: #fff; text-decoration: underline } .django-messages .info a.close, .django-messages .success a.close { text-decoration: none } .django-messages .info:before, .django-messages .success:before { speak: none; content: '\2713'; position: relative; top: 3px; font-size: 21px; padding-right: 1rem; color: #fff; font-family: SSFlow } .django-messages .success { background: #008542 } .django-messages .warning { background: #815C00 } .django-messages .error { background: maroon } .django-messages .welcome-banner { background-color: #fff; color: #333; padding: .125rem 1rem } .django-messages .welcome-banner h2 { margin-bottom: 0; line-height: 1.15em } .django-messages .welcome-banner p { margin-top: 10px } .django-messages .alert { background-color: #E8BA16; color: #fff } .django-messages .alert a { color: #fff; text-decoration: underline } .django-messages .error, .django-messages .warning { background-color: #E8BA16 } .django-messages .error:before, .django-messages .warning:before { speak: none; content: '\1F6AB'; position: relative; top: 3px; font-size: 21px; padding-right: .75rem; color: #fff; font-family: SSFlow } .django-messages .error, .django-messages .nagbar { background-color: #ea6d60 } .django-messages .error .buttongroup, .django-messages .nagbar .buttongroup { height: 16px; height: 1rem; overflow: visible; display: inline-block; margin: 0; padding-left: .75rem } .django-messages .error a, .django-messages .nagbar a { color: #fff } .django-messages .nagbar:before { content: none } .django-messages .close { position: absolute; top: 5px; right: 0; bottom: 0; width: 40px; height: 40px; text-decoration: none } .django-messages .close:before { speak: none; position: relative; background: rgba(0, 0, 0, .33); top: 12px; left: 8px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; padding: .3125rem .375rem .125rem; height: 24px; width: 24px; line-height: 24px; font-size: 12px; color: #fff; font-family: SSFlow; content: '\2421' } .enable-js, .modal-wrapper, .servererror { font-family: "source sans pro", sans-serif } .django-messages .close span { display: none } .pass-rules { font-size: 14px; color: #555 } .pass-rules h4 { font-weight: 700; margin: 0; padding: 0 } .pass-rules ul { list-style-type: disc; margin: 0 0 1em 1.5em } .servererror #masthead { background-color: #070707; width: 100%; min-width: 230px; font-weight: 700 } .servererror #masthead h1 { margin: 0; padding: .5em } .servererror #masthead h1 a { color: #fff; text-decoration: none } .servererror section img { display: block; margin: .5em auto; max-width: 50% } .servererror footer { padding: 1.5em } .servererror h1 { color: #777; display: inline-block; padding: 0 1rem; margin: 0 0 1rem } .servererror.js-error, .servererror.js-error .pod { background: #f7f7f7 } .upgrade { margin: 0 0 30px; padding: 20px; color: #FFF; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } .upgrade.upgrade-green { background-color: #F65D22 } .upgrade.upgrade-yellow { background-color: #e5c15e } .upgrade.upgrade-red { background-color: #ea6d60 } .upgrade.upgrade-blue { background-color: #C7C2BA; color: #4A3C31; border: none } .upgrade a { color: #FFF } .upgrade p { margin: 0; font-size: 18px; font-size: 1.125rem } .enable-js { min-height: 300px; padding: 1em } .recommendations_debug div, .recommendations_debug li, div.recommendations_debug { padding-left: 5px } .recommendations_debug ul { padding-left: 5px; padding-top: 5px } body.night-mode { background-color: #000!important } body.night-mode.video { background-color: #000 } body.night-mode.video .sbo-book-meta { background-color: transparent } body.night-mode.video .sbo-inpage-toc { border: 1px solid #444 } body.night-mode.video .sbo-inpage-toc .toc-contents { border: none; background-color: #000 } body.night-mode.video .sbo-inpage-toc .tocList li { border: none } body.night-mode.video .sbo-inpage-toc .tocList li a { border-bottom: 1px solid #222 } body.night-mode.video .sbo-inpage-toc .rec-fav { color: #AAA } body.night-mode.video .sbo-inpage-toc li { background-color: transparent } body.night-mode.video .sbo-inpage-toc li a { border: none } body.night-mode .tutorial-toc .tocList li a, body.night-mode.video .sbo-inpage-toc .toc-bottom { border-top: 1px solid #444 } body.night-mode.video .sbo-inpage-toc .tabs li { border-bottom: 1px solid #444; background-color: #222 } body.night-mode.video .sbo-inpage-toc .tabs li.item-1, body.night-mode.video .sbo-inpage-toc .tabs li.item-2, body.night-mode.video .sbo-inpage-toc .tabs li.item3 { border-left: 1px solid #444 } body.night-mode.video .sbo-inpage-toc .tabs li:hover { color: #FFF; background-color: #111 } body.night-mode.video .sbo-inpage-toc .tabs li.active-tab { background-color: transparent; border-bottom: none; color: #FFF } body.night-mode .lesson-content, body.night-mode.video .sbo-inpage-toc #description-tab, body.night-mode.video .sbo-inpage-toc .tab-inner p { color: #FFF } body.night-mode .lesson-content h1, body.night-mode .lesson-content h2, body.night-mode .lesson-content h3, body.night-mode .lesson-content h4, body.night-mode .lesson-content h5, body.night-mode .lesson-content li, body.night-mode .lesson-content p { color: #FFF!important } body.night-mode .lesson-content div { color: #fff; background-color: #000!important } body.night-mode .lesson-content div table, body.night-mode .lesson-content div table * { background-color: #000!important; color: #fff!important; border-color: #fff } body.night-mode .tutorial-toc .rec-fav { color: #fff } body.night-mode .tutorial-toc .featured-title, body.night-mode .tutorial-toc .tocList li a.topic { background-color: #222; color: #FFF } body.night-mode .tutorial-toc .featured-title { border-top: 1px solid #444; border-bottom: 1px solid #444 } body.night-mode .tutorial-toc .tocList li { border-bottom: none } body.night-mode .nav-icn.active { background-color: #000!important } body.night-mode .tutorial-progress-bars { color: #fff!important } body.night-mode .lesson-introduction { background-color: #222!important; border: 1px solid #666!important; color: #FFF!important } body.night-mode .lesson-introduction h2 { color: #999!important } body.night-mode .info-about-chapter, body.night-mode .show-full-lesson { background-color: #333!important } body.night-mode ul.topics-percentage-bar .topic .topic-title { background-color: #666 } body.night-mode ul.topics-percentage-bar .lessons-percentage-bar a { background-color: #999 } body.night-mode ul.topics-percentage-bar .lessons-percentage-bar .lesson-completed a { background-color: #F65D22 } body.night-mode ul.topics-percentage-bar .lessons-percentage-bar .current_lesson a { background-color: #F5C517 } body.night-mode ul.topics-percentage-bar li { background-color: transparent; border-right: 1px solid #000 } body.night-mode ul.topics-percentage-bar li.current_lesson a { background-color: #F65D22 } body.night-mode .night { background-color: #000!important } body.night-mode .night .fa { color: #F65D22!important } body.night-mode .day { background-color: #222!important } body.night-mode .day .fa { color: #FFF!important } body.night-mode #container { background-color: #000!important } body.night-mode .sbo-book-meta { background-color: #000; border-bottom: 1px solid #444 } body.night-mode .font-controls-panel { top: -1px } body.night-mode .search-in-archive .search-archive-bar, body.night-mode .search-in-archive .search-archive-results ul { border: 1px solid #666 } body.night-mode .search-in-archive .search-archive-results ul { border-top: none } body.night-mode .search-in-archive .search-archive-bar { border-right: none } body.night-mode .search-in-archive.result-active .search-archive-bar { border-bottom: none } body.night-mode .search-in-archive { background-color: #000 } body.night-mode .search-in-archive.active { border-color: #666; background-color: #222 } body.night-mode .search-in-archive.active .search-controls { background-color: #222 } body.night-mode .search-in-archive.active .search-controls:before { background-color: #F65D22 } body.night-mode .search-in-archive .search-archive-bar, body.night-mode .search-in-archive .search-archive-results li, body.night-mode .search-in-archive .search-archive-results li.pagination a, body.night-mode .search-in-archive .search-archive-results li.search-whole-site a, body.night-mode .search-in-archive .search-archive-results ul { background-color: #222 } body.night-mode .search-in-archive .search-archive-results li { border-color: #666; color: #fff } body.night-mode .search-in-archive .search-archive-results li .description { color: #fff } body.night-mode .search-in-archive .search-archive-results li a.title { color: #fff; background-color: #222 } body.night-mode .topbar { background-color: #222!important } body.night-mode .pagefoot, body.night-mode .topbar .topnav>li a:hover { background-color: #000 } body.night-mode .topbar svg { stroke: #FFF; fill: #FFF } body.night-mode .pagefoot .icon-up { background-color: #222; border: 1px solid #666 } body.night-mode .pagefoot a { color: #ddd!important } body.night-mode .interface-controls .queue-control .rec-fav:focus, body.night-mode .interface-controls .queue-control .rec-fav:hover { background-color: #000!important } body.night-mode .interface-controls .sharing-controls, body.night-mode .interface-controls a, body.night-mode .interface-controls button { background-color: #000 } @media screen and (min-width: 49.4375em) { body.night-mode .interface-controls #font-controls, body.night-mode .interface-controls .search-in-archive, body.night-mode .interface-controls button { border-bottom: 1px solid #555 } body.night-mode .interface-control-btns { border: 1px solid #666 } } body.night-mode .pagination-title, body.night-mode .sbo-title h1, body.night-mode .topnav>li a { color: #fff!important } body.night-mode .toc-contents { border: 10px solid #444; background-color: #222 } body.night-mode ul.toc-level-2 { border-top: none } body.night-mode .tocList li { background-color: #222; border-bottom: 1px solid #222 } body.night-mode .tocList li a { color: #AAA; border-bottom: 1px solid #333 } body.night-mode .tocList li.currently-reading, body.night-mode .tocList li.currently-reading a { background-color: #555 } body.night-mode .nav-link, body.night-mode .sbo-menu-top { background-color: #000 } body.night-mode .sbo-prev .nav-link { border: none; border-right: 1px solid #444; border-bottom: 1px solid #444 } body.night-mode .sbo-menu-top { border-bottom: 1px solid #444; border-right: 1px solid #444; border-left: 1px solid #444 } body.night-mode .sbo-next .nav-link { border-bottom: 1px solid #444 } body.night-mode .sbo-next.sbo-nav-bottom, body.night-mode .sbo-prev.sbo-nav-bottom { border-top: 1px solid #444 } @media screen and (max-width: 32.5625em), (max-height: 26.25em) { body.night-mode .sbo-menu-top { border-right: none; border-left: none } body.night-mode .sbo-next .nav-link { border-top: none } } body.night-mode #sbo-rt-content { background-color: #000!important } body.night-mode #sbo-rt-content .annotator-wrapper::selection { background-color: rgba(255, 225, 255, .5) } body.night-mode #sbo-rt-content .annotator-wrapper::-moz-selection { background-color: rgba(255, 225, 255, .5) } body.night-mode #sbo-rt-content .annotator-wrapper span.annotator-hl { background-color: rgba(255, 225, 255, .3); color: #FFF } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-adder ul, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-adder ul a, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-adder ul li, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul a, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li { background-color: #666!important } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-adder ul a:hover, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul a:hover { color: #fff!important } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper { background-color: #333!important } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .left a, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .row, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .title, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper div, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper h4, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper li, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper p { background-color: #333!important; color: #FFF!important } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea { color: #FFF!important } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea { background-color: #999 } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button { border: none } body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper code, body.night-mode #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper em { background-color: #333 } body.night-mode #sbo-rt-content div, body.night-mode #sbo-rt-content table, body.night-mode #sbo-rt-content table th, body.night-mode #sbo-rt-content table thead, body.night-mode #sbo-rt-content table tr { background-color: #000!important; border-color: #fff!important } body.night-mode #sbo-rt-content .box_title, body.night-mode #sbo-rt-content .chaptertitle, body.night-mode #sbo-rt-content .cn-chapter-number, body.night-mode #sbo-rt-content .figure-title, body.night-mode #sbo-rt-content .fm_title_document, body.night-mode #sbo-rt-content .h1, body.night-mode #sbo-rt-content .heading-1, body.night-mode #sbo-rt-content .heading-3, body.night-mode #sbo-rt-content .paragraph-head, body.night-mode #sbo-rt-content .title, body.night-mode #sbo-rt-content .title_document, body.night-mode #sbo-rt-content h1, body.night-mode #sbo-rt-content h2, body.night-mode #sbo-rt-content h3, body.night-mode #sbo-rt-content h4, body.night-mode #sbo-rt-content h5, body.night-mode #sbo-rt-content h6, body.night-mode #sbo-rt-content hr { background-color: #000; color: #ddd!important } body.night-mode #sbo-rt-content #lesson-fragment .pre, body.night-mode #sbo-rt-content #lesson-fragment .pre-ex, body.night-mode #sbo-rt-content #lesson-fragment .pre1, body.night-mode #sbo-rt-content #lesson-fragment .pre_w, body.night-mode #sbo-rt-content #lesson-fragment p.pre, body.night-mode #sbo-rt-content #lesson-fragment pre, body.night-mode #sbo-rt-content .pre, body.night-mode #sbo-rt-content .pre-ex, body.night-mode #sbo-rt-content .pre1, body.night-mode #sbo-rt-content .pre_w, body.night-mode #sbo-rt-content p.pre, body.night-mode #sbo-rt-content pre { background-color: #222!important; color: #aaa!important; border: none!important } body.night-mode #sbo-rt-content a, body.night-mode #sbo-rt-content div, body.night-mode #sbo-rt-content dt, body.night-mode #sbo-rt-content em, body.night-mode #sbo-rt-content li, body.night-mode #sbo-rt-content p, body.night-mode #sbo-rt-content strong { color: #ddd!important; background-color: #000; box-shadow: none!important } body.night-mode #sbo-rt-content code { color: #ddd!important } body.night-mode #sbo-rt-content p.pre { color: #000 } body.night-mode #sbo-rt-content div.bgbox dd, body.night-mode #sbo-rt-content div.bgbox dt, body.night-mode #sbo-rt-content div.bgbox li, body.night-mode #sbo-rt-content div.bgbox p, body.night-mode #sbo-rt-content div.boxg dt, body.night-mode #sbo-rt-content div.boxg li, body.night-mode #sbo-rt-content div.boxg p, body.night-mode #sbo-rt-content div.feature dd, body.night-mode #sbo-rt-content div.feature dt, body.night-mode #sbo-rt-content div.note dd, body.night-mode #sbo-rt-content div.note dt, body.night-mode #sbo-rt-content div.note li, body.night-mode #sbo-rt-content div.note p, body.night-mode #sbo-rt-content div.sidebar dd, body.night-mode #sbo-rt-content div.sidebar dt, body.night-mode #sbo-rt-content div.sidebar li, body.night-mode #sbo-rt-content div.sidebar p, body.night-mode #sbo-rt-content div.sidebar1 dd, body.night-mode #sbo-rt-content div.sidebar1 dt, body.night-mode #sbo-rt-content div.sidebar1 li, body.night-mode #sbo-rt-content div.sidebar1 p, body.night-mode #sbo-rt-content div.tip dd, body.night-mode #sbo-rt-content div.tip dt, body.night-mode #sbo-rt-content div.tip li, body.night-mode #sbo-rt-content div.tip p, body.night-mode #sbo-rt-content div.warning dd, body.night-mode #sbo-rt-content div.warning dt, body.night-mode #sbo-rt-content div.warning li, body.night-mode #sbo-rt-content div.warning p, body.night-mode #sbo-rt-content p.note, body.night-mode #sbo-rt-content p.pre-ex { color: #fff } body.night-mode #sbo-rt-content div.bgbox p a, body.night-mode #sbo-rt-content div.boxg p a, body.night-mode #sbo-rt-content div.note a, body.night-mode #sbo-rt-content div.note p a, body.night-mode #sbo-rt-content div.sidebar p a, body.night-mode #sbo-rt-content div.sidebar1 p a, body.night-mode #sbo-rt-content div.tip p a, body.night-mode #sbo-rt-content div.warning p a, body.night-mode #sbo-rt-content p.note a, body.night-mode #sbo-rt-content p.pre-ex a { color: #fff; text-decoration: none } body.night-mode #sbo-rt-content div.note h3, body.night-mode #sbo-rt-content div.note p.title, body.night-mode #sbo-rt-content div.sidebar h5, body.night-mode #sbo-rt-content div.sidebar p.title, body.night-mode #sbo-rt-content div.sidebar-title, body.night-mode #sbo-rt-content div.tip h3, body.night-mode #sbo-rt-content div.warning h3, body.night-mode #sbo-rt-content p.box_title { background-color: transparent; color: #fff!important } body.night-mode #sbo-rt-content #lesson-fragment .boxg, body.night-mode #sbo-rt-content #lesson-fragment .note, body.night-mode #sbo-rt-content #lesson-fragment .note1, body.night-mode #sbo-rt-content #lesson-fragment .sidebar1, body.night-mode #sbo-rt-content #lesson-fragment .tip, body.night-mode #sbo-rt-content #lesson-fragment .warning, body.night-mode #sbo-rt-content #lesson-fragment div.note, body.night-mode #sbo-rt-content #lesson-fragment div.sidebar, body.night-mode #sbo-rt-content #lesson-fragment div.tip, body.night-mode #sbo-rt-content #lesson-fragment div.warning, body.night-mode #sbo-rt-content .boxbg, body.night-mode #sbo-rt-content .note, body.night-mode #sbo-rt-content .note1, body.night-mode #sbo-rt-content .sidebar1, body.night-mode #sbo-rt-content .tip, body.night-mode #sbo-rt-content .warning, body.night-mode #sbo-rt-content div.note, body.night-mode #sbo-rt-content div.sidebar, body.night-mode #sbo-rt-content div.tip, body.night-mode #sbo-rt-content div.warning { box-shadow: none; color: #fff!important } body.night-mode #sbo-rt-content td, body.night-mode #sbo-rt-content td a, body.night-mode #sbo-rt-content td li, body.night-mode #sbo-rt-content td p, body.night-mode #sbo-rt-content td p a, body.night-mode #sbo-rt-content th, body.night-mode #sbo-rt-content th p { color: #fff } body.night-mode .related .bitlist-header { color: #ddd } body.cloudy-mode { background-color: #f5eee0!important } body.cloudy-mode.video .sbo-book-meta { border-bottom: 1px solid #c7c1b4 } body.cloudy-mode.video .tocList li a { border-bottom: 1px solid #e6e6e6 } body.cloudy-mode.video .sbo-inpage-toc { border: 1px solid #c7c1b4 } body.cloudy-mode.video .sbo-inpage-toc .toc-contents { border: none } body.cloudy-mode.video .sbo-inpage-toc .progress-indicator { color: #BEB9A6; border: 2px solid #BEB9A6 } body.cloudy-mode.video .sbo-inpage-toc .toc-bottom { border-top: 1px solid #c7c1b4 } body.cloudy-mode.video .sbo-inpage-toc .tabs li { background-color: #e0d9cb; border-bottom: 1px solid #c7c1b4 } body.cloudy-mode.video .sbo-inpage-toc .tabs li.active-tab { background-color: #f5eee0; border-bottom: none } body.cloudy-mode .lesson-content div, body.cloudy-mode .nav-icn.active { background-color: #f5eee0!important } body.cloudy-mode.video .sbo-inpage-toc .tabs li.item-1, body.cloudy-mode.video .sbo-inpage-toc .tabs li.item-2, body.cloudy-mode.video .sbo-inpage-toc .tabs li.item-3, body.cloudy-mode.video .sbo-inpage-toc .tabs li.item-4 { border-left: 1px solid #c7c1b4 } body.cloudy-mode .rec-fav.active:before { color: #F65D22 } body.cloudy-mode .ss-toots.active, body.cloudy-mode .tutorial-toc .featured-title, body.cloudy-mode .tutorial-toc .tocList li a.topic { background-color: #f5eee0 } body.cloudy-mode .tutorial-toc .tocList li a .lesson-indicator { border: 2px solid #BEB9A6 } body.cloudy-mode .tutorial-toc .tocList li a .lesson-indicator:before { color: #BEB9A6 } body.cloudy-mode .tutorial-toc .tocList li { border-bottom: none } body.cloudy-mode .lesson-introduction { background-color: #f5eee0!important; border: 1px solid #BEB9A6!important } body.cloudy-mode .info-about-chapter, body.cloudy-mode .show-full-lesson { background-color: #c7c1b4!important } body.cloudy-mode .cloudy { background-color: #000!important } body.cloudy-mode .cloudy .fa { color: #F65D22!important } body.cloudy-mode .day { background-color: #222!important } body.cloudy-mode .day .fa { color: #FFF!important } body.cloudy-mode #container { background-color: #f5eee0!important } body.cloudy-mode .pagefoot { background-color: #f5eee0 } body.cloudy-mode .pagefoot .icon-up { background-color: #f5eee0; border: 1px solid #c7c1b4 } body.cloudy-mode .pagefoot a { color: #404040!important } body.cloudy-mode .interface-controls .queue-control .rec-fav:focus, body.cloudy-mode .interface-controls .queue-control .rec-fav:hover { background-color: #f5eee0!important } body.cloudy-mode .interface-controls .sharing-controls, body.cloudy-mode .interface-controls a, body.cloudy-mode .interface-controls button, body.cloudy-mode .search-in-archive, body.cloudy-mode .search-in-archive.active .search-controls { background-color: #f5eee0 } body.cloudy-mode .interface-controls .fa-share, body.cloudy-mode .interface-controls a:before, body.cloudy-mode .interface-controls button:before { color: #ada799 } body.cloudy-mode .search-in-archive.active { border-color: #c7c1b4; background-color: #f5eee0 } body.cloudy-mode .search-in-archive.active .search-controls:before { background-color: #F65D22 } body.cloudy-mode .sbo-book-meta, body.cloudy-mode .search-in-archive .search-archive-bar, body.cloudy-mode .search-in-archive .search-archive-results li, body.cloudy-mode .search-in-archive .search-archive-results li.pagination a, body.cloudy-mode .search-in-archive .search-archive-results li.search-whole-site a, body.cloudy-mode .search-in-archive .search-archive-results ul, body.cloudy-mode .toc-contents, body.cloudy-mode .tocList li { background-color: #f5eee0 } body.cloudy-mode .search-in-archive .search-archive-results li { border-color: #c7c1b4; color: #404040 } body.cloudy-mode .search-in-archive .search-archive-results li .description { color: #404040 } body.cloudy-mode .search-in-archive .search-archive-results li a.title { color: #404040; background-color: #f5eee0 } @media screen and (min-width: 49.4375em) { body.cloudy-mode .interface-controls #font-controls, body.cloudy-mode .interface-controls .search-in-archive, body.cloudy-mode .interface-controls button { border-bottom: 1px solid #c7c1b4 } body.cloudy-mode .interface-control-btns { border: 1px solid #c7c1b4 } } body.cloudy-mode .toc-contents { border: 10px solid #c7c1b4 } body.cloudy-mode .sbo-book-meta { border-bottom: 1px solid #c7c1b4 } body.cloudy-mode .tocList li.currently-reading, body.cloudy-mode .tocList li.currently-reading a { background-color: #EAE7DB } body.cloudy-mode .nav-link, body.cloudy-mode .sbo-menu-top { background-color: #f5eee0 } body.cloudy-mode .sbo-prev .nav-link { border: none; border-right: 1px solid #c7c1b4; border-bottom: 1px solid #c7c1b4 } body.cloudy-mode .sbo-menu-top, body.cloudy-mode .sbo-next .nav-link { border-bottom: 1px solid #c7c1b4 } body.cloudy-mode .sbo-menu-top { border-right: 1px solid #c7c1b4; border-left: 1px solid #c7c1b4 } body.cloudy-mode .sbo-next.sbo-nav-bottom, body.cloudy-mode .sbo-prev.sbo-nav-bottom { border-top: 1px solid #c7c1b4 } body.cloudy-mode .topbar { background-color: #e0d9cb!important } body.cloudy-mode .topbar .topnav>li a:hover { background-color: #f5eee0 } @media screen and (max-width: 32.5625em), (max-height: 26.25em) { body.cloudy-mode .sbo-next .nav-link { border-top: none } } body.cloudy-mode #sbo-rt-content { background-color: #f5eee0!important } body.cloudy-mode #sbo-rt-content div, body.cloudy-mode #sbo-rt-content table, body.cloudy-mode #sbo-rt-content table th, body.cloudy-mode #sbo-rt-content table thead, body.cloudy-mode #sbo-rt-content table tr { background-color: #f5eee0!important; border: none!important } body.cloudy-mode #sbo-rt-content .box_title, body.cloudy-mode #sbo-rt-content .chaptertitle, body.cloudy-mode #sbo-rt-content .cn-chapter-number, body.cloudy-mode #sbo-rt-content .figure-title, body.cloudy-mode #sbo-rt-content .fm_title_document, body.cloudy-mode #sbo-rt-content .h1, body.cloudy-mode #sbo-rt-content .heading-1, body.cloudy-mode #sbo-rt-content .heading-3, body.cloudy-mode #sbo-rt-content .paragraph-head, body.cloudy-mode #sbo-rt-content .title, body.cloudy-mode #sbo-rt-content .title_document, body.cloudy-mode #sbo-rt-content h1, body.cloudy-mode #sbo-rt-content h2, body.cloudy-mode #sbo-rt-content h3, body.cloudy-mode #sbo-rt-content h4, body.cloudy-mode #sbo-rt-content h5, body.cloudy-mode #sbo-rt-content h6, body.cloudy-mode #sbo-rt-content hr { background-color: #f5eee0; color: #404040!important } body.cloudy-mode #sbo-rt-content #lesson-fragment .pre, body.cloudy-mode #sbo-rt-content #lesson-fragment .pre-ex, body.cloudy-mode #sbo-rt-content #lesson-fragment .pre1, body.cloudy-mode #sbo-rt-content #lesson-fragment .pre_w, body.cloudy-mode #sbo-rt-content #lesson-fragment p.pre, body.cloudy-mode #sbo-rt-content #lesson-fragment pre, body.cloudy-mode #sbo-rt-content .pre, body.cloudy-mode #sbo-rt-content .pre-ex, body.cloudy-mode #sbo-rt-content .pre1, body.cloudy-mode #sbo-rt-content .pre_w, body.cloudy-mode #sbo-rt-content p.pre, body.cloudy-mode #sbo-rt-content pre { background-color: #f5eee0!important; color: #404040!important; border: none!important } body.cloudy-mode #sbo-rt-content a, body.cloudy-mode #sbo-rt-content dt, body.cloudy-mode #sbo-rt-content li, body.cloudy-mode #sbo-rt-content p, body.cloudy-mode #sbo-rt-content strong { color: #404040; box-shadow: none!important } body.cloudy-mode #sbo-rt-content div { color: inherit!important } body.cloudy-mode #sbo-rt-content div.bgbox dd, body.cloudy-mode #sbo-rt-content div.bgbox dt, body.cloudy-mode #sbo-rt-content div.bgbox li, body.cloudy-mode #sbo-rt-content div.bgbox p, body.cloudy-mode #sbo-rt-content div.boxg dt, body.cloudy-mode #sbo-rt-content div.boxg li, body.cloudy-mode #sbo-rt-content div.boxg p, body.cloudy-mode #sbo-rt-content div.feature dd, body.cloudy-mode #sbo-rt-content div.feature dt, body.cloudy-mode #sbo-rt-content div.note dd, body.cloudy-mode #sbo-rt-content div.note dt, body.cloudy-mode #sbo-rt-content div.note li, body.cloudy-mode #sbo-rt-content div.note p, body.cloudy-mode #sbo-rt-content div.sidebar dd, body.cloudy-mode #sbo-rt-content div.sidebar dt, body.cloudy-mode #sbo-rt-content div.sidebar li, body.cloudy-mode #sbo-rt-content div.sidebar p, body.cloudy-mode #sbo-rt-content div.sidebar1 dd, body.cloudy-mode #sbo-rt-content div.sidebar1 dt, body.cloudy-mode #sbo-rt-content div.sidebar1 li, body.cloudy-mode #sbo-rt-content div.sidebar1 p, body.cloudy-mode #sbo-rt-content div.tip dd, body.cloudy-mode #sbo-rt-content div.tip dt, body.cloudy-mode #sbo-rt-content div.tip li, body.cloudy-mode #sbo-rt-content div.tip p, body.cloudy-mode #sbo-rt-content div.warning dd, body.cloudy-mode #sbo-rt-content div.warning dt, body.cloudy-mode #sbo-rt-content div.warning li, body.cloudy-mode #sbo-rt-content div.warning p, body.cloudy-mode #sbo-rt-content p.note, body.cloudy-mode #sbo-rt-content p.pre-ex { color: #404040 } body.cloudy-mode #sbo-rt-content div.bgbox p a, body.cloudy-mode #sbo-rt-content div.boxg p a, body.cloudy-mode #sbo-rt-content div.note a, body.cloudy-mode #sbo-rt-content div.note p a, body.cloudy-mode #sbo-rt-content div.sidebar p a, body.cloudy-mode #sbo-rt-content div.sidebar1 p a, body.cloudy-mode #sbo-rt-content div.tip p a, body.cloudy-mode #sbo-rt-content div.warning p a, body.cloudy-mode #sbo-rt-content p.note a, body.cloudy-mode #sbo-rt-content p.pre-ex a { color: #404040; text-decoration: none } body.cloudy-mode #sbo-rt-content div.note h3, body.cloudy-mode #sbo-rt-content div.note p.title, body.cloudy-mode #sbo-rt-content div.sidebar h5, body.cloudy-mode #sbo-rt-content div.sidebar p.title, body.cloudy-mode #sbo-rt-content div.sidebar-title, body.cloudy-mode #sbo-rt-content div.tip h3, body.cloudy-mode #sbo-rt-content div.warning h3, body.cloudy-mode #sbo-rt-content p.box_title { background-color: transparent; color: #404040!important } body.cloudy-mode #sbo-rt-content #lesson-fragment .boxg, body.cloudy-mode #sbo-rt-content #lesson-fragment .note, body.cloudy-mode #sbo-rt-content #lesson-fragment .note1, body.cloudy-mode #sbo-rt-content #lesson-fragment .sidebar1, body.cloudy-mode #sbo-rt-content #lesson-fragment .tip, body.cloudy-mode #sbo-rt-content #lesson-fragment .warning, body.cloudy-mode #sbo-rt-content #lesson-fragment div.note, body.cloudy-mode #sbo-rt-content #lesson-fragment div.sidebar, body.cloudy-mode #sbo-rt-content #lesson-fragment div.tip, body.cloudy-mode #sbo-rt-content #lesson-fragment div.warning, body.cloudy-mode #sbo-rt-content .boxbg, body.cloudy-mode #sbo-rt-content .note, body.cloudy-mode #sbo-rt-content .note1, body.cloudy-mode #sbo-rt-content .sidebar1, body.cloudy-mode #sbo-rt-content .tip, body.cloudy-mode #sbo-rt-content .warning, body.cloudy-mode #sbo-rt-content div.note, body.cloudy-mode #sbo-rt-content div.sidebar, body.cloudy-mode #sbo-rt-content div.tip, body.cloudy-mode #sbo-rt-content div.warning { box-shadow: none; color: #404040!important } body.cloudy-mode #sbo-rt-content td, body.cloudy-mode #sbo-rt-content td a, body.cloudy-mode #sbo-rt-content td li, body.cloudy-mode #sbo-rt-content td p, body.cloudy-mode #sbo-rt-content td p a, body.cloudy-mode #sbo-rt-content th, body.cloudy-mode #sbo-rt-content th p { color: #404040 } body.cloudy-mode #sbo-rt-content span.annotator-hl { background-color: #ddd; color: #000 } .scale-right-to-left-appear { transform: scale(0); transform-origin: top right; transition: .3s all cubic-bezier(.19, 1, .22, 1) } .scale-right-to-left-appear-active { transform: scale(1) } .fade-in-appear { opacity: .01 } .fade-in-appear-active { opacity: 1; transition: opacity .5s ease-in } .modal-active { overflow: hidden } .no-touch .modal-active .title-cards .title-hover { visibility: visible; opacity: 1; display: block } button.fetching { background-size: 30px; padding-right: 35px!important } .modal-underlay { position: fixed; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .7); left: 0; top: 0; z-index: 999; transition: opacity .25s ease-in-out } .modal-underlay-appear { opacity: .01 } .modal-underlay-appear-active { opacity: 1; transition: opacity .5s ease-in } .modal-menu { height: 140px; overflow-y: auto } .menu-dropdown-region li a, .modal-wrapper .dropdown-item a, .sbo-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .modal-wrapper { width: 480px; z-index: 9999; background-color: #FFF; position: fixed; left: 50%; margin-left: -240px; top: 100px; border: 1px solid #ededed; -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); padding: 1em 2em 3em; border-radius: 1.5px; text-align: left } .modal-wrapper h1 { margin: 0 0 20px; font-size: 24px; font-weight: 400 } .modal-wrapper h4 { color: #070707; font-size: 16px; font-weight: 700; margin: 1em 0 .5em } .modal-wrapper input[type=search] { width: 100%; padding: 8px; border: 1px solid #DDD; font-size: larger; margin: 0; -webkit-appearance: none } .modal-wrapper .wrap-search { position: relative } .modal-wrapper .wrap-search svg { position: absolute; right: 5px; top: 5px } .modal-wrapper .modal-menu .does-exist-in-collection { background-color: #F5F5F5 } .modal-wrapper .modal-menu li { height: 35px } .modal-wrapper .modal-menu li a { color: #070707; padding: 0 .5em; width: 100%; display: block; font-size: 16px; line-height: 35px } .modal-wrapper .modal-menu li a:hover { background-color: #EDEDED; text-decoration: none } .modal-wrapper .dropdown-item a { max-width: 420px; position: relative; padding-right: 40px!important; text-align: left } @media (max-width: 768px) { .modal-wrapper { width: 100%; margin-left: 0; left: 0; top: 0; height: 100% } } .modal-wrapper .modal-close { position: absolute; top: 0; right: 0; padding: .6em; max-width: 40px; max-height: 40px; background: #fff; border-radius: 50%!important; -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1); transition: all .5s cubic-bezier(.23, 1, .32, 1) } .modal-wrapper .modal-close svg { fill: #676767; height: 24px; pointer-events: none; width: 24px; vertical-align: top } .modal-close:hover { background-color: #DDD } .modal-close:focus { background-color: #AAA } .modal-wrapper .modal-menu li.list-slide-leave { height: 35px; opacity: 1 } .modal-wrapper .modal-menu li.list-slide-leave-active { height: 0; opacity: .01; transition: all .3s ease-in } .modal-wrapper .modal-menu li.list-slide-enter { height: 0; opacity: .01 } .modal-wrapper .modal-menu li.list-slide-enter-active { height: 35px; opacity: 1; transition: all .3s ease-in } .modal-wrapper .dropdown-item a .is-fetching-gif, .modal-wrapper .dropdown-item a svg, .modal-wrapper .dropdown-item a.error svg { position: absolute; right: 5px; top: 8px } .modal-create-collection.modal-wrapper { padding: 1em 2em 6em } .modal-create-collection .create-collection-container input[type=text], .modal-create-collection .create-collection-container textarea { border: none; border-bottom: 2px solid #999; background-color: transparent; width: 100%; max-width: 100%; border-radius: 0; outline: 0; padding: 6px 0 } .modal-create-collection .create-collection-container input[type=text] { font-size: 20px } .modal-create-collection .create-collection-container textarea { margin-top: .35em; resize: none } .modal-create-collection .create-collection-container label { line-height: 1.3em; margin-top: 0; color: #999 } .modal-create-collection .create-collection-container input[type=text].error { border: none; border-bottom: 2px solid #b9002d; background-color: transparent } .modal-create-collection .create-collection-container input[type=text].success { border: none; border-bottom: 2px solid green; background-color: transparent } .modal-create-collection .create-collection-container label.error, .modal-create-collection .create-collection-container label.success { font-weight: 700; color: #444 } .modal-create-collection .create-collection-container label.success a { cursor: pointer; color: #F65D22 } .modal-create-collection .create-collection-container .actions { position: absolute; right: 28px; bottom: 30px; display: block } .modal-create-collection .create-collection-container .actions .cancel { color: #333 } .modal-create-collection .create-collection-container .actions li { display: inline-block; margin-left: 15px } #lesson-fragment nav[hidden], #sbo-rt-content nav[hidden], .modal-wrapper .create-collection-container .wrap-textarea h2, .modal-wrapper .wrap-collection-name-input .wrap-svg { display: none } .modal-wrapper .wrap-collection-name-input { padding-right: 0 } .modal-wrapper .wrap-collection-name-input .actions { position: absolute; top: 300px; left: auto; right: 30px } @media screen and (max-width: 51.25em) { .modal-wrapper .create-collection-container { margin-top: 0 } } .modal-wrapper .create-collection-container .wrap-collection-name-input, .modal-wrapper .create-collection-container .wrap-textarea { margin-top: 0 } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased } #lesson-fragment, #sbo-rt-content { position: relative; z-index: 10 } #lesson-fragment img, #sbo-rt-content img { height: auto; max-width: 100% } #sbo-rt-content .sbo-vid-wrapper { background-color: #000; width: 100%; position: relative; padding-bottom: 75% } #sbo-rt-content .sbo-vid-wrapper.arriving { background: center center no-repeat #000 } #sbo-rt-content .sbo-vid-wrapper iframe, #sbo-rt-content .sbo-vid-wrapper object { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 60.1% } @media screen and (max-width: 78.125em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 61% } } @media screen and (max-width: 50em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 62% } } @media screen and (max-width: 43.75em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 63% } } @media screen and (max-width: 40.625em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 64% } } @media screen and (max-width: 34.375em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 64.5% } } @media screen and (max-width: 30em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 66% } } @media screen and (max-width: 26.25em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 67% } } @media screen and (max-width: 23.75em) { #sbo-rt-content .sbo-vid-wrapper.kaltura-player { padding-bottom: 68% } } body { margin: 0 } body.reading { background-color: #FFF; padding-top: 62px } @media screen and (max-width: 32.5em), screen and (max-height: 26.25em) { body.reading { padding-top: 0 } } body.reading.video { padding-top: 0 } .is-fetching-gif { max-width: 18px; float: right } .menu-caret .is-fetching-gif { max-width: 12px } .menu-dropdown-region { position: absolute; left: -305px; top: -1px; width: 300px; text-align: left; background-color: #f6f6f6; z-index: 99; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px; border-radius: 5px 0 0 5px; -moz-box-shadow: 0 2px 5px #aaa; -webkit-box-shadow: 0 2px 5px #aaa; box-shadow: 0 2px 5px #aaa; border: 1px solid #EEE } .menu-dropdown-region li { float: left; background-color: transparent!important } .interface-controls .collections-dropdown .caret .is-fetching-gif, .modal-wrapper .modal-menu li.dropdown-item { float: none } .menu-dropdown-region li.is-fetching { background-color: #F5F5F5 } .menu-dropdown-region li.is-fetching a { opacity: .65 } .menu-dropdown-region li a { display: inline-block; max-width: 300px; height: auto; font-size: inherit; padding: 10px 30px 10px 10px; width: 100%; text-align: left; font-family: "Source Sans Pro", arial, sans-serif; color: #1d2225 } .nav-link, .sbo-prev-next, .sbo-reading-menu { font-family: "source sans pro", sans-serif } .menu-dropdown-region li a:focus, .menu-dropdown-region li a:hover { background-color: #eee; color: #1d2225; text-decoration: none!important } .menu-dropdown-region li img, .menu-dropdown-region li svg { position: absolute; top: 9px; right: 10px } @media screen and (max-width: 49.375em) { .menu-dropdown-region { left: -150px; top: 40px } .menu-dropdown-region li { float: none; width: 100% } } .modal-active .sbo-reading-menu { display: none } .modal-wrapper input { margin: 0 0 .5em } .modal-wrapper .modal-close { margin: 5px } .modal-wrapper .actions a, .modal-wrapper .actions button { width: auto; height: auto; font-size: 15px; color: #404040 } .interface-controls .modal-wrapper a { width: auto; height: auto; font-size: 13px; cursor: pointer } .interface-controls .queue-control .collections-dropdown .rec-fav:before { left: -5px } .interface-controls .collections-dropdown .caret { position: absolute; top: 10px; width: 10px; left: 35px; background-color: transparent } .interface-controls .collections-dropdown .caret .menu-caret { padding: 0; width: auto; height: auto; border: none; text-align: left; outline: 0 } .interface-controls .collections-dropdown .caret .menu-caret svg { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0) } .interface-controls .collections-dropdown .caret .menu-caret.opened svg { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg) } .interface-controls .collections-dropdown .caret a { height: 20px } .interface-controls .collections-dropdown .dropdown-item.border-top { border-top: 1px solid #D1D1D1 } .interface-controls .collections-dropdown .menu-control { border-bottom: 1px solid #CCC; height: 50px } .interface-controls .collections-dropdown .menu-control svg { width: 6px!important; height: 4px!important } .interface-controls .collections-dropdown .menu-control .tooltip { position: absolute; right: 0; top: 45px; color: #FFF; opacity: 1 } .interface-controls .collections-dropdown .menu-control .tooltip.top-right .tooltip-arrow { top: -5px; transform: rotate(180deg) } .interface-controls .collections-dropdown .menu-control .tooltip.queue-tooltip { right: 20px } .interface-controls .collections-dropdown .queue-spinner { width: 30px; position: relative; top: 8px; right: 5px } .interface-controls .collections-dropdown .rec-fav { border-bottom: none } .interface-controls .collections-dropdown .rec-fav:hover { color: #F65D22 } .sbo-inpage-toc .collections-dropdown { width: 80px; height: 40px; position: absolute; right: 10px; top: 0 } .sbo-inpage-toc .queue-spinner { width: 20px; position: absolute; right: 12px; top: 10px } .sbo-inpage-toc .collections-dropdown .menu-caret { position: relative; padding: 0!important; margin: 0!important; width: 15px; height: 20px; top: -1px; left: 70px; border: none; background-color: transparent; outline: 0 } .sbo-inpage-toc .collections-dropdown .menu-caret svg { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); width: 6px; height: 4px } .sbo-inpage-toc .collections-dropdown .menu-caret.opened svg { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg) } .sbo-inpage-toc .collections-dropdown .menu-caret a:hover { text-decoration: none } .sbo-inpage-toc .collections-dropdown .menu-caret .is-fetching-gif { position: absolute; right: 0; top: 1px } .sbo-inpage-toc .collections-dropdown .menu-caret:before { margin-left: 0!important } .sbo-inpage-toc .collections-dropdown .menu-dropdown-region { left: -255px } .sbo-inpage-toc .collections-dropdown .menu-dropdown-region .dropdown-item { width: 100%; padding: 0 } .sbo-inpage-toc .collections-dropdown .menu-dropdown-region .dropdown-item.border-top { border-top: 1px solid #D1D1D1 } .sbo-inpage-toc .collections-dropdown .menu-dropdown-region .dropdown-item a { padding: 6px 15px 6px 10px; border: none } .sbo-inpage-toc .collections-dropdown .menu-control .tooltip { position: absolute; right: 10px; top: 35px; color: #FFF; opacity: 1 } .sbo-inpage-toc .collections-dropdown .menu-control .tooltip.queue-tooltip { right: 13px } .sbo-inpage-toc .collections-dropdown .menu-control .tooltip.collections-tooltip { right: -10px } .sbo-inpage-toc .collections-dropdown .menu-control .tooltip.top-right .tooltip-arrow { top: -5px; transform: rotate(180deg) } .reading .mfp-bg { background-color: #000 } .reading .mfp-content { margin: .625rem } @media screen and (max-width: 32.625em) { .reading .mfp-content { margin: 0 } } .reading .mfp-content img { background-color: #FFF; padding: 0 } .reading .mfp-content .mfp-figure { background-color: #000; padding: 1.5625rem .625rem 0; border: 1px solid #555; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } .reading .mfp-content .mfp-figure button { color: #9b9b9b; font-weight: 700; font-size: 25px; font-size: 1.5625rem; padding: 0; right: 5px; top: -8px } @media screen and (max-width: 32.5em) { .reading .mfp-content .mfp-figure { padding: 2.5rem 0 } } .reading .mfp-content .mfp-figure .mfp-title { color: rgba(64, 64, 64, .75) } .no-touch .nav-link:hover, .no-touch .nav-link:hover .pagination-label, .no-touch .nav-link:hover .pagination-label:after, .no-touch .nav-link:hover .pagination-label:before, .no-touch .pagination-label:after:hover, .no-touch .pagination-label:after:hover .pagination-label, .no-touch .pagination-label:after:hover .pagination-label:after, .no-touch .pagination-label:after:hover .pagination-label:before, .no-touch .pagination-label:before:hover, .no-touch .pagination-label:before:hover .pagination-label, .no-touch .pagination-label:before:hover .pagination-label:after, .no-touch .pagination-label:before:hover .pagination-label:before, .no-touch .pagination-label:hover, .no-touch .pagination-label:hover .pagination-label, .no-touch .pagination-label:hover .pagination-label:after, .no-touch .pagination-label:hover .pagination-label:before, .sbo-nav-top:hover a, .sbo-nav-top:hover div, .sbo-nav-top:hover span, .sbo-nav-top:hover span:after, .sbo-nav-top:hover span:before, .sbo-toc-thumb:active .ss-list:before, .sbo-toc-thumb:focus .ss-list:before, .sbo-toc-thumb:hover .ss-list:before, .tutorial-toc-thumb:active .ss-list:before, .tutorial-toc-thumb:focus .ss-list:before, .tutorial-toc-thumb:hover .ss-list:before { color: #F65D22 } .reading .mfp-content .mfp-figure:after { position: relative } .reading .mfp-content .mfp-figure .mfp-bottom-bar { position: relative; margin: 20px 0 0 } @media screen and (max-width: 32.625em) { .reading .mfp-content .mfp-figure .mfp-bottom-bar { margin: 20px 0 0 10px } } #sbo-rt-content img.js-totri-lightbox { -moz-transition: border 200ms linear; -webkit-transition: border 200ms linear; -o-transition: border 200ms linear; transition: border 200ms linear; cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; border: 2px solid #404040!important } #sbo-rt-content a.totri-footnote { padding: .5rem .375rem .375rem; border: none!important; display: inline-block } #sbo-rt-content a.totri-footnote:hover { text-decoration: underline } #sbo-rt-content sup { position: relative; top: -8px; z-index: 2 } .topnav .search { display: none } @media screen and (max-width: 32.5625em) { .topnav .search { display: inline-block } } .clearfix:after, .clearfix:before { content: " "; display: table } .clearfix:after { clear: both } .sbo-prev-next { background: #fff } .sbo-nav-bottom { position: relative; z-index: 20 } .sbo-nav-top { position: relative; z-index: 1 } .nav-link { text-overflow: ellipsis } .nav-link, .pagination-label, .pagination-label:after, .pagination-label:before { transition: color .2s ease-out } .nav-link, .pagination-label, .pagination-label:after, .pagination-label:before, .ss-list:before { -moz-transition: color .2s ease-out; -webkit-transition: color .2s ease-out; -o-transition: color .2s ease-out } .sbo-reading-menu { background-color: #f7f7f7; position: relative } .sbo-reading-menu a { text-decoration: none } .ss-list:before { transition: color .2s ease-out; color: #777; font-size: 13px; margin-right: 5px; vertical-align: middle } .sbo-toc-thumb, .tutorial-toc-thumb { z-index: 29; padding: .75rem; text-align: center; width: 100%; display: inline-block; border: none; -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent; text-shadow: 0 0 0 transparent } @media screen and (max-width: 32.5625em) { .sbo-toc-thumb, .tutorial-toc-thumb { padding: 1.375rem 0 0 } } .sbo-toc-thumb:active, .sbo-toc-thumb:focus, .sbo-toc-thumb:hover, .tutorial-toc-thumb:active, .tutorial-toc-thumb:focus, .tutorial-toc-thumb:hover { background-color: transparent; focus: 0 } .sbo-toc-thumb.close:hover, .tutorial-toc-thumb.close:hover { background-color: transparent } .sbo-title { display: inline-block; width: 87%; position: relative } @media screen and (min-width: 32.625em) { .sbo-title { top: 5px } } .sbo-title h1 { display: inline } .touch .pdfdoc #font-controls, body.video #font-controls, body.video .search-controls { display: none } .sbo-menu-top { margin-right: 55px; z-index: 30 } .sbo-menu-bottom .sbo-toc-thumb, .sbo-menu-bottom .title-link { z-index: 20 } #font-controls, .search-controls { position: relative; padding: .5rem; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; text-decoration: none } #font-controls:before, .search-controls:before { font-family: SSFlow; content: '\F706'; height: 45px; width: 45px; font-size: 19px; font-size: 1.1875rem; top: 8px; position: relative } #font-controls.open, .search-controls.open { border-left: 1px solid #777; background-color: #222; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px } #font-controls.open:before, .search-controls.open:before { font-family: SSFlow!important; content: '\2421'!important; font-size: 21px!important; vertical-align: middle; top: 4px; color: #F65D22 } .touch .search-in-archive .search-archive-bar input { padding: .5rem 0 .4375rem .125rem } .no-zoom .search-in-archive .search-archive-bar { padding: .3125rem 0 .3125rem .375rem } .no-zoom .search-in-archive .search-archive-bar input { padding: .625rem 0 .4375rem .125rem; position: relative; top: -1px } .no-zoom #font-controls:before, .no-zoom .search-controls:before { top: 7px } .search-in-archive .sitb-title { float: left; width: 100% } .search-in-archive .sitb-title span { float: right } .search-in-archive .search-controls:before { content: '🔎'; background-color: transparent; left: -8px; top: 6px; padding: .4375rem .5rem .1875rem .9375rem; -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0; border-radius: 0 2px 2px 0 } .search-in-archive.active { border: 1px solid #CCC; -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0; border-radius: 0 2px 2px 0; margin-right: -58px } .search-in-archive.active .search-archive-bar, .search-in-archive.active .search-archive-results { visibility: visible } .search-in-archive.active .search-controls { background-color: transparent; -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0; border-radius: 0 2px 2px 0 } .search-in-archive.active .search-controls:before { color: #FFF; content: '🔎'; background-color: #CCC } .search-in-archive.active .search-controls:hover:before { color: #FFF; background-color: #F65D22 } .search-in-archive.result-active { -moz-border-radius: 0 2px 0 0; -webkit-border-radius: 0; border-radius: 0 2px 0 0 } .search-in-archive .search-archive-bar { visibility: hidden; background-color: #fff; padding: .3125rem 0 .4375rem .375rem; border: 1px solid #CCC; border-right: none; position: absolute; right: 46px; -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px; top: -1px; z-index: 99 } .search-in-archive .search-archive-bar input { min-width: 260px; display: inline-block; padding: .4375rem .4375rem .4375rem .375rem; text-overflow: ellipsis; font-size: 16px!important; font-family: "source sans pro", sans-serif, arial, sans-serif; background-color: #fff; border: 1px solid #CCC; border-right: none; position: relative; margin-top: 1px; -webkit-appearance: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0 } .search-in-archive.result-active .search-archive-bar { border-bottom: none; -moz-border-radius: 2px 0 0; -webkit-border-radius: 2px; border-radius: 2px 0 0 } .search-in-archive .search-archive-results { visibility: hidden; position: absolute; right: -1px; font-family: "source sans pro", sans-serif; width: 314px; text-align: left } .search-in-archive .search-archive-results.results-error { right: 0!important } .search-in-archive .search-archive-results.results-error h1 { font-size: 18px; font-size: 1.125rem; padding: 1.25rem .625rem } .search-in-archive .search-archive-results ul { overflow-x: hidden; overflow-y: scroll; padding: 0 10px; border: 1px solid #CCC; border-top: none; -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0; border-radius: 0 0 2px 2px; background-color: #fff; max-height: 240px; max-height: 100% } @media screen and (min-height: 26.25em) { .search-in-archive .search-archive-results ul { max-height: 200px } } @media screen and (min-height: 570px) { .search-in-archive .search-archive-results ul { max-height: 400px } } @media screen and (min-height: 840px) { .search-in-archive .search-archive-results ul { max-height: 550px } } @media screen and (min-height: 1050px) { .search-in-archive .search-archive-results ul { max-height: 100% } } .search-in-archive .search-archive-results li.pagination { text-align: center; padding: .625rem 0; border-bottom: 0; clear: left; color: #404040 } .search-in-archive .search-archive-results li.pagination a { height: 5px; width: 10px; position: relative; top: -8px; color: #F65D22; font-size: 14px; font-size: .875rem } .search-in-archive .search-archive-results li.no-results { color: #404040; border-bottom: 1px solid #ddd; padding: 10px 0 15px } .search-in-archive .search-archive-results li.sitb-item { padding: 10px 0; border-bottom: 1px solid #ccc; background-color: transparent; color: #404040; font-size: 14px; font-size: .875rem; float: left } .search-in-archive .search-archive-results li.sitb-item .description { width: 300px; max-height: 240px; overflow: hidden; text-overflow: ellipsis } .search-in-archive .search-archive-results li .description { display: inline-block; padding-bottom: 10px; color: #404040; font-size: 16px; font-size: 1rem } .search-in-archive .search-archive-results li .description+span { float: right } .search-in-archive .search-archive-results li a.title { width: auto; height: auto; padding: 3px 0; text-align: left; font-family: "source sans pro", sans-serif; display: block; font-size: 14px; font-size: .875rem; color: #404040 } .search-in-archive .search-archive-results li a.title:hover { color: #F65D22 } .search-in-archive .search-archive-results li.search-whole-site { clear: left; padding: 5px 0 0; margin: 0 0 0 2px; text-align: center; border: none } .interface-controls .interface-control-btns:after, .interface-controls:after { clear: both } .search-in-archive .search-archive-results li.search-whole-site a { color: #F65D22; font-family: "source sans pro", sans-serif; width: auto; font-size: 100% } .font-flyout { opacity: 0; position: absolute; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; visibility: hidden } .font-flyout.open { opacity: 1; height: 49px; z-index: 99; visibility: visible } body.video .font-flyout { display: none } .icnTxLr { -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px } .pdf-size-changer { padding: 3px 18px 5px; background-color: #222; border-left: 1px solid #444; border-top: 1px solid #444; border-bottom: 1px solid #444; display: block; float: left; text-decoration: none!important } .pdf-size-changer.icnTxSm { border-right: 1px solid #444 } .pdf-size-changer span { display: inline-block; text-indent: -99999px; width: 0; height: 0 } @media screen and (max-width: 49.4375em) and (-webkit-min-device-pixel-ratio: 0) { .font-flyout.open .font-controls-panel, ::i-block-chrome { margin-right: -170px } } @media screen and (max-width: 49.4375em) { #font-controls.open { position: relative; right: -170px } .pdfdoc #font-controls.open { right: 0 } :root .font-flyout.open .font-controls-panel, _::-webkit-full-page-media, _:future { margin-right: -170px } } .font-controls-panel { font: 700 26px/45px Georgia, serif; background-color: #222; border: 1px solid #444; right: 0; top: 0; position: absolute; height: 185px; width: 300px; -moz-border-radius: 2px 0 2px 2px; -webkit-border-radius: 2px; border-radius: 2px 0 2px 2px } .font-controls-panel.is-android-device { height: 145px } .font-controls-panel .nightmodes ul { float: left; width: 100%; border-bottom: 1px solid #444 } .font-controls-panel .nightmodes ul li { display: inline-block; float: left; width: 33.3%; border-right: 1px solid #444; background-color: #222 } .font-controls-panel .nightmodes ul li a { display: block; height: 48px; text-align: center; overflow: hidden } .font-controls-panel .nightmodes ul li a span { display: block; text-indent: -999999px } .font-controls-panel .nightmodes ul li a .fa { color: #FFF; position: relative; top: 3px } .font-controls-panel .nightmodes ul li:hover a { background-color: #000!important } .font-controls-panel .nightmodes ul li.day { -moz-border-radius: 2px 0 0; -webkit-border-radius: 2px; border-radius: 2px 0 0; background-color: #000 } .font-controls-panel .nightmodes ul li.day .fa { color: #F65D22 } .font-controls-panel .nightmodes ul li.cloudy a svg { position: relative; top: 3px } .font-controls-panel .nightmodes ul li.night { border-right: none } #reset { line-height: 1em; padding: 3px 10px; margin: 0; font-size: 12px; position: absolute; right: 10px; bottom: 10px; font-family: arial, sans-serif } .resizer .draggable-containment-wrapper { width: 60%; height: 2px; background-color: #666; margin: 85px 20% 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } .resizer .draggable-containment-wrapper:after, .resizer .draggable-containment-wrapper:before { font-weight: 700; font-size: 31px; font-family: georgia, serif; position: absolute; color: #FFF; top: 62px } .pdfdoc #font-controls:before, .pdfdoc .font-size-changer:before, .subscribe-nag { font-family: "source sans pro", sans-serif } .resizer .draggable-containment-wrapper .filler { height: 2px; display: block; background-color: #F65D22 } .mobile-menu, .sbo-toc-open .sbo-toc-container>.sbo-toc-thumb { display: none } .resizer .draggable-containment-wrapper:before { left: 15px; font-size: 18px } .resizer .draggable-containment-wrapper:after { right: 15px } .resizer .draggable-containment-wrapper .draggable { cursor: move; width: 15px; height: 15px; padding: .5em; float: left; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin-top: -14px; top: 0!important; background-color: #ddd } .column-resizer .draggable-containment-wrapper, .font-resizer .draggable-containment-wrapper { position: relative } .column-resizer .draggable-containment-wrapper .fa, .font-resizer .draggable-containment-wrapper .fa { color: #FFF; position: absolute; top: -8px } .column-resizer .draggable-containment-wrapper .fa.left, .font-resizer .draggable-containment-wrapper .fa.left { left: -40px; font-size: 18px } .column-resizer .draggable-containment-wrapper .fa.right, .font-resizer .draggable-containment-wrapper .fa.right { top: -10px; right: -40px } .column-resizer .draggable-containment-wrapper .fa.right.fa-font, .font-resizer .draggable-containment-wrapper .fa.right.fa-font { top: -14px } .column-resizer .draggable-containment-wrapper { margin: 35px 20% 0 } .subscribe-nag { overflow: hidden } .pdfdoc #font-controls:before { content: '\002B\002F\2212'; font-weight: 700; font-size: 22px; top: 5px } .pdfdoc .font-size-changer:before { font-weight: 700; font-size: 31px; position: relative; top: 2px } .pdfdoc .font-size-changer#increase-font:before { content: '\002B' } .pdfdoc .font-size-changer#decrease-font:before { content: '\2212' } .icnTxSm:before { position: relative; top: 7%; font-size: 80% } .tutorials .toc-contents .rec-fav { top: 2px } .toc-contents { width: 100%; border: 10px solid #ddd; background-color: #fff; overflow: hidden; max-height: 0; opacity: 0; transition: all .4s ease-in-out } .toc-contents, .toc-contents.open { top: 0; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out } .toc-contents.open { opacity: 1; transition: all .4s ease-in-out } .tocList { line-height: 1.125; padding-bottom: 15px } @media screen and (min-width: 521px) and (min-height: 420px) { .toc-contents { position: fixed; overflow-y: scroll; -webkit-overflow-scroll: touch; left: 50%; bottom: 0; margin-left: -330px; max-width: 725px } .tocList { padding-bottom: 0 } } .tocList .minutes { color: #999 } .tocList li:last-child { border-bottom: 0 } .tocList .toc-level1 { color: #777; background-color: #fff; border-bottom: 1px solid #ddd } .tocList .toc-level1>a.toc-link { padding: .625rem 1.875rem .625rem .9375rem } .tocList .toc-level1.currently-reading { background-color: transparent!important } .tocList .toc-level1.currently-reading>a, .tocList [class*=toc-level].currently-reading { background-color: #f0f0f0 } .tocList [class*=toc-level-] a.toc-link { padding: .375rem .9375rem .375rem 2.1875rem; line-height: 1.35em } .tocList [class*=toc-level-] a.toc-link:before { content: '\2022'; color: #999; font-size: 21px; line-height: 0; margin-left: -10px; position: relative; left: -5px } .tocList .toc-level-3 a.toc-link { padding-left: 3.4375rem } .tocList .toc-level-4 a.toc-link { padding-left: 4.6875rem } .tocList .toc-level-5 a.toc-link { padding-left: 5.9375rem } .tocList a.toc-link { font-weight: 400; display: block } .tocList a.toc-link:focus { background-color: rgba(0, 134, 202, .01) } .progress-indicator { font-size: 12px; font-size: .75rem; line-height: 1px; font-family: ss-flow; color: #e7e5de; border: 2px solid #e7e5de; text-align: center; float: left; width: 20px; height: 20px; margin: 0 .9375rem 0 0; padding: .5625rem .125rem .375rem; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -moz-border-radius: 45px; -webkit-border-radius: 45px; border-radius: 45px; position: absolute; left: 5px; top: 10px } .progress-indicator.completed { background-color: #F65D22; border: 2px solid #F65D22 } .progress-indicator.completed:before { color: #fff } li:hover.video-pagination-item .progress-indicator, li:hover>.progress-indicator { width: 24px; height: 24px; padding: .6875rem .25rem .5rem; margin: -.125rem -.5rem 0 0 } .toc-contents .toc-level2 .progress-indicator { left: 30px; top: 12px } .toc-contents .rec-fav { outline: 0; position: absolute; right: 15px; top: 13px; z-index: 9 } h1.video-toc-title { font-family: "source sans pro", sans-serif, sans-serif; color: #777; font-size: 13px; letter-spacing: 1px; line-height: 1.35em } @media screen and (max-width: 51.3125em) { h1.video-toc-title { margin: 1em 1.5em 0 } } h1.video-toc-title a { color: #F65D22; text-decoration: none; border: none!important } h1.video-toc-title a:hover { text-decoration: underline } .video #sbo-rt-content h1.video-title { margin: .4em 0 .8em!important } .mobile-menu select { display: inline-block; width: 100%; padding: 1.25rem 3.125rem .9375rem 1.25rem; color: #777; background: #f5f5f5; cursor: pointer; text-overflow: ellipsis; font-size: 18px; font-size: 1.125rem; -moz-box-shadow: "0 1px 0 $color-warm-gray-dark, 0 -1px #fff inset"; -webkit-box-shadow: "0 1px 0 $color-warm-gray-dark, 0 -1px #fff inset"; -o-box-shadow: "0 1px 0 $color-warm-gray-dark, 0 -1px #fff inset"; box-shadow: "0 1px 0 $color-warm-gray-dark, 0 -1px #fff inset"; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; appearance: none } .mobile-menu label { margin: 0; position: relative } .mobile-menu label:after { padding-bottom: 2px; position: absolute; top: 20px; right: 8px; content: '<>'; font: 20px Consolas, monospace; color: #aaa; border-bottom: 1px solid #d5d5d5; pointer-events: none; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg) } @media screen and (max-width: 51.25em) { .desktop-menu { display: none } .mobile-menu { display: block; height: 58px; border: none } } .sbo-inpage-toc { color: #777; position: relative; margin: 0 auto 2em; font-family: "source sans pro", sans-serif, sans-serif; font-size: 16px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #e6e6e6; display: none } .sbo-inpage-toc .tocList li a.toc-link { border-bottom: 1px solid #EEE } .sbo-inpage-toc .section-title { width: 100%; display: block; padding: 10px 0; border-bottom: 1px solid #EEE } .sbo-inpage-toc .tabs { height: 51px; z-index: 20 } .sbo-inpage-toc .tabs li { padding: 15px 20px; float: left; border-bottom: 1px solid #d8d8d8; color: #777; background-color: #e6e6e6 } .sbo-inpage-toc .tabs li::selection { background-color: transparent!important } .sbo-inpage-toc .tabs li.item-1, .sbo-inpage-toc .tabs li.item-2, .sbo-inpage-toc .tabs li.item-3, .sbo-inpage-toc .tabs li.item-4 { border-left: 1px solid #d8d8d8 } .sbo-inpage-toc .tabs li:hover { color: #404040; background-color: #d8d8d8; cursor: pointer } .sbo-inpage-toc .toc-bottom, .sbo-inpage-toc .toc-contents { background-color: transparent } .sbo-inpage-toc .tabs li.active-tab { cursor: default; background-color: transparent; border-bottom: none } .sbo-inpage-toc .tabs li.active-tab:hover { color: #777 } .sbo-inpage-toc .rec-fav { color: #4a3c31 } .sbo-inpage-toc #description-tab .sbo-book-meta, .sbo-inpage-toc #resources-tab .sbo-book-meta, .sbo-inpage-toc #transcripts-tab .sbo-book-meta { border: none } .sbo-inpage-toc #resources-tab ul li { margin: 10px 0 } .sbo-inpage-toc #description-tab p { line-height: 1.5em; margin: 10px 0 } .sbo-inpage-toc .tab-content { display: none } .sbo-inpage-toc .tab-content.active-tab, .sbo-inpage-toc.arrived { display: block } .sbo-inpage-toc .tab-inner { margin: 0 2%; padding: 10px 10px 20px } @media screen and (max-width: 51.3125em) { .sbo-inpage-toc { margin: 0 20px 30px } } .sbo-inpage-toc .sbo-inpage-toc-inner { height: 545px; position: relative } .sbo-inpage-toc .transcripts-wrapper abbr.begin, .sbo-inpage-toc .transcripts-wrapper abbr.end { display: none } .sbo-inpage-toc .transcripts-wrapper p, .sbo-inpage-toc .transcripts-wrapper span.text { display: inline } .sbo-inpage-toc .transcripts-wrapper p { line-height: 2em } .sbo-inpage-toc .transcripts-wrapper #js-transcription-region { max-height: 500px; overflow: hidden; overflow-y: scroll } .sbo-inpage-toc .toc-bottom { position: absolute; bottom: 0; left: 0; width: 96%; margin: 0 2%; border-top: 1px solid #ddd; text-align: right; height: 80px } .sbo-inpage-toc .toc-bottom .to-top { position: relative; top: 24px; font-size: small } .sbo-inpage-toc h2 { font-size: 21px; color: #777; margin: 1.25rem 0 } .sbo-inpage-toc .sbo-book-meta { float: left; background-color: #fff; width: 96%; z-index: 1; margin: 0 2%; padding: .625rem .625rem 1.25rem; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px; border-radius: 2px 2px 0 0 } .sbo-inpage-toc .sbo-book-meta .cover img { max-width: 75px; box-shadow: none } .sbo-inpage-toc .tocList { float: left; width: 100%; overflow-y: scroll; list-style-type: none; padding: .3125rem 2.5rem 0; height: 260px; height: 16.25rem; -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0; border-radius: 0 0 2px 2px } @media screen and (max-width: 30.9375em) { .sbo-inpage-toc .tocList { height: 255px; height: 15.9375rem } } .sbo-inpage-toc .tocList [class*=toc-level-] a.toc-link { padding-left: 3.75rem; margin-right: 3.75rem } .sbo-inpage-toc .tocList .toc-level1 { padding-top: 0 } .sbo-inpage-toc .tocList .toc-level1>a.toc-link { padding-left: 2.1875rem } .sbo-inpage-toc .tocList li { padding: .3125rem 0 0; border: none } .sbo-inpage-toc .tocList li a.toc-link:before { content: ''; margin-left: -3px } .sbo-inpage-toc .tocList .minutes { font-size: smaller } .sbo-inpage-toc li { position: relative } .sbo-inpage-toc .sbo-toc-thumb { display: none } .sbo-inpage-toc .toc-contents { position: relative; overflow-y: initial; overflow: initial; margin: 0; border: none; opacity: 1; max-height: 100%; max-width: 100%; left: 0; bottom: 0; padding: 0 } .progress-percent-complete { height: 8px; font-size: 12px; display: table; margin: 10px 0 0 90px; width: calc(100% - 90px) } .progress-percent-complete .percent-complete-bar { display: table-cell; vertical-align: middle; white-space: nowrap; width: 100% } .progress-percent-complete .percent-complete { background-color: #d5d5d5; position: relative; text-indent: -999999px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; display: block; height: 8px; padding: 0; width: 100% } .progress-percent-complete .percent-complete .percent { background-color: #999082; display: block; height: 8px; width: 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } @media screen and (min-width: 41.9375em) and (min-height: 26.25em) { .tocList .toc-level1>a { padding-left: 4.375rem } .tocList [class*=toc-level-] a.toc-link { padding-left: 5.625rem } .tocList .toc-level-3 a.toc-link { padding-left: 6.875rem } .tocList .toc-level-4 a.toc-link { padding-left: 8.125rem } .tocList .toc-level-5 a.toc-link { padding-left: 9.375rem } } .sbo-toc .close { width: auto; position: absolute; top: 0; right: 20px; cursor: pointer; background: 0 0 } .sbo-toc .close span { display: none } .sbo-toc .close:before { font-family: SSFlow; font-size: 14px; content: '\2421'; color: #777 } .sbo-book-meta { background: #f7f7f7; border-bottom: 1px solid #ddd; color: #777; overflow: auto; padding: 10px; line-height: 1.25em } .sbo-book-meta .cover { float: left } .sbo-book-meta .cover a { display: block; margin-right: 10px } .sbo-book-meta .cover a:focus { background-color: #F65D22 } .sbo-book-meta .cover img { border: 1px solid #ddd; max-width: 50px; height: auto } .sbo-book-meta span { display: block; font-size: 13px } .sbo-book-meta span.title { font-size: 18px; margin-bottom: 5px } .sbo-book-meta .title { padding-right: 25px } .video .sbo-book-meta .title { padding-right: 0 } .sbo-book-meta .publisher-logo { max-width: 105px; max-height: 35px; float: right; padding: 3px 30px 0 0 } .video .sbo-book-meta .publisher-logo { padding: 0; max-width: 75px } @media only screen and (max-width: 32.5625em) { .sbo-book-meta .publisher-logo { padding: 3px 3px 0 0; max-width: 76px } } .sbo-book-meta .publishers { font-style: italic } .bitlist-header { padding: 1rem 3.125rem 1rem 1rem; color: rgba(64, 64, 64, .75); font-size: 21px } .pagination-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .pagination-label:after, .pagination-label:before { font-family: SSFlow; color: #777; font-size: 12px; height: 100%; position: relative; top: 11px } .sbo-next .pagination-label:after { content: '\23ED'; float: right; margin-left: 7px } .no-zoom .sbo-next .pagination-label { margin-right: 20px } .no-zoom .sbo-next .pagination-label:after { position: relative; top: -4px } .sbo-prev .pagination-label:before { content: '\23EE'; margin-right: 7px; float: left } .sbo-next, .sbo-prev { display: inline-block; width: 50%; position: relative; float: left; z-index: 10 } .video .sbo-next, .video .sbo-prev { top: auto } .sbo-next .nav-link, .sbo-prev .nav-link { width: 100%; height: 62px; background: #f7f7f7; display: inline-block; padding: 9px 15px; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 30 } .interface-controls .interface-control-btns:after, .interface-controls .interface-control-btns:before, .interface-controls:after, .interface-controls:before { content: " "; display: table } .sbo-next .nav-link:hover, .sbo-prev .nav-link:hover { text-decoration: none } .sbo-next { float: right } .sbo-prev .nav-link { border: 1px solid #ddd; border-width: 1px 1px 1px 0; text-align: left } .sbo-next .nav-link { border-bottom: solid 1px #ddd; text-align: right } .sbo-nav-bottom { top: 107px } .prodsample-book .sbo-nav-bottom { top: 140px } .pagination-label { color: #777; font-size: 12px; letter-spacing: 1px } .interface-controls { position: relative; margin: 0 auto; padding: 0; width: 200px; z-index: 15; list-style-type: none; text-align: center; top: 70px } @media screen and (min-width: 32.5625em) and (min-height: 420px) { .interface-controls { top: 24px } } @media screen and (min-width: 49.4375em) and (min-height: 420px) { .interface-controls { top: 100px } } .interface-controls a:hover { text-decoration: none!important } .reading-controls-bottom .interface-controls { top: -66px; width: 55px } .interface-controls li { float: right; background-color: #FFF; position: relative } @media screen and (max-width: 32.5625em) { .interface-controls li { background-color: transparent } } .interface-controls .queue-control .rec-fav { outline: 0 } .interface-controls .queue-control .rec-fav:before { position: relative; top: 2px } .interface-controls a, .interface-controls button { display: inline-block; height: 49px; width: 48px; text-align: center; vertical-align: middle; color: #b3b3b3; font-size: 20px } .interface-controls a:before, .interface-controls button:before { -moz-transition: color .2s ease-out; -webkit-transition: color .2s ease-out; -o-transition: color .2s ease-out; transition: color .2s ease-out; text-align: center; line-height: 1; font-size: 19px } .no-touch .interface-controls a:not(.rec-fav):hover:before, .no-touch .interface-controls button:not(.rec-fav):hover:before { color: #F65D22 } .interface-controls .sharing-controls .trigger { width: 48px; height: 49px; display: inline-block; background-color: transparent } .interface-controls .sharing-controls .trigger .fa { position: relative; top: 13px; visibility: visible } .interface-controls .sharing-controls .trigger:before { -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0; border-radius: 0 2px 2px 0; font-family: SSFlow; content: "\2421"; font-size: 21px; line-height: 57px; position: absolute; height: 49px; width: 48px; color: #F65D22; left: 0; top: 0; overflow: hidden; opacity: 0; visibility: hidden; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out } .interface-controls .sharing-controls ul li:first-child a { border-left: 1px solid #666; -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px } .interface-controls .sharing-controls.active a { background-color: #222; border-top: 1px solid #666; border-bottom: 1px solid #666 } .interface-controls .sharing-controls.active .trigger .fa { visibility: hidden } .interface-controls .sharing-controls.active .trigger:before { background-color: #222; visibility: visible; opacity: 1 } @media screen and (max-width: 26.25em) { .interface-controls .sharing-controls .trigger:before { -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px; border-radius: 2px 0 0 2px } } .adjustable-column { margin: 0 auto } body.video { font-family: Georgia, serif } body.video .application { margin-top: 1em } body.video .sbo-nav-bottom { display: none } @media screen and (max-width: 51.3125em) { body.video .interface-controls-top { display: none } } body.video .reading-controls-bottom .interface-controls { top: -15px } body.video [role=document] #sbo-rt-content { background: center 150px no-repeat #000; min-height: 250px; padding: 0; margin-bottom: 30px!important; margin-top: 20px!important; display: block } body.video [role=document] #sbo-rt-content .kaltura-player { background-color: transparent!important } body.video [role=document].javascript-ready #sbo-rt-content { background: no-repeat } @media screen and (min-width: 32.5625em) and (min-height: 26.25em) { .ss-list { margin-right: 5px } .sbo-reading-menu { background-color: #fff } .sbo-next, .sbo-prev { top: -49px } .pagination-title, .reading-controls-bottom, .sbo-nav-bottom { display: none } .pagination-label { font-size: 0 } .pagination-label:after, .pagination-label:before { position: relative; top: 13px; font-size: 14px } .sbo-title { font-size: 18px } .sbo-next .nav-link, .sbo-prev .nav-link { background-color: #fff; border-top-width: 0; position: fixed; top: 0; text-decoration: none; width: 55px } .sbo-prev .nav-link { left: 55px; transition: left .2s ease-in-out; right: auto } .sbo-menu-top, .sbo-prev .nav-link { -moz-transition: left .2s ease-in-out; -webkit-transition: left .2s ease-in-out; -o-transition: left .2s ease-in-out } .sbo-menu-top { height: 62px; top: 0; right: 0; left: 109px; margin-right: 55px; position: fixed; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; transition: left .2s ease-in-out } .sbo-next .nav-link { right: 0; left: auto } .sbo-book-meta .title { margin-bottom: 5px } .sbo-book-meta .title a:focus, .sbo-book-meta .title a:hover { color: #F65D22 } } @media screen and (min-width: 41.9375em) and (min-height: 26.25em) { .pagination-label { font-size: 12px } .pagination-label:after, .pagination-label:before { top: 14px } .pagination-title { display: block } .sbo-next .nav-link, .sbo-prev .nav-link { width: 23% } .sbo-menu-top { left: 54px; margin-left: 23%; right: 22.5%; margin-right: 0; z-index: 29; position: fixed; -moz-transition: left .2s ease-in-out; -webkit-transition: left .2s ease-in-out; -o-transition: left .2s ease-in-out; transition: left .2s ease-in-out } } footer.pagefoot { padding: 1.25rem } footer.pagefoot .copyright { text-align: left; display: inline } footer.pagefoot ul a { text-decoration: none } @media screen and (min-width: 49.4375em) and (min-height: 26.25em) { #font-controls { height: 49px; border-bottom: 1px solid #ccc } #font-controls:before { font-size: 24px } #font-controls.open { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border: none } .font-flyout { position: fixed } .interface-controls { position: fixed; right: 20px; left: auto; z-index: 25; width: auto } .interface-controls .interface-control-btns { padding: 0; color: #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #ccc } .interface-controls .interface-control-btns li:first-child a { -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px; border-radius: 2px 2px 0 0 } .interface-controls .interface-control-btns .video-highlight-control { border-top: 1px solid #ccc } .interface-controls .interface-control-btns .video-highlight-control a>span:before { content: '\F707'; font-family: SSFlow; font-size: 21px; font-size: 1.3125rem; position: relative; top: 18px } .interface-controls .search-in-archive { font-family: "source sans pro", sans-serif, sans-serif; border-bottom: 1px solid #CCC } .interface-controls .search-in-archive.active { border: none; border-bottom: 1px solid #CCC; margin-right: 0 } .interface-controls .search-in-archive .search-archive-bar input { min-width: 320px; top: 1px } .interface-controls .search-in-archive .search-archive-results { right: 48px; width: 325px } .interface-controls li { float: none } .interface-controls li:first-child { -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px; border-radius: 2px 2px 0 0 } body.video .interface-controls li:first-child { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } body.video .interface-controls li:first-child button { border-bottom: none } .interface-controls li:last-child { -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0; border-radius: 0 0 2px 2px; border-bottom: none } .interface-controls .sharing-controls.active .trigger { border-top-right-radius: 0 } .interface-controls .sharing-controls.active .trigger:before { -moz-border-radius: 0 0 2px; -webkit-border-radius: 0; border-radius: 0 0 2px } .interface-controls button { border-bottom: 1px solid #ccc } .interface-controls button:before { font-size: 21px } } @media screen and (min-width: 30em) { .articlelist { padding-left: 15px } .related .articlelist { padding: 0 15px } } @media screen and (max-width: 32.5625em), (max-height: 26.25em) { .sbo-menu-top { margin-right: 0 } .sbo-next .nav-link { border-top: 1px solid #DDD } .prodsample-video .nav-link { position: relative } } @charset "UTF-8"; .video #sbo-rt-content { max-width: 100% } @media (min-width: 32.5625em) { .video .lesson-content, .video [role=document] { max-width: 50rem } } @media (min-width: 78.125em) { .video .lesson-content, .video [role=document] { max-width: 60rem } } [role=document] { padding: 0; margin: 0 auto } [role=document]:after, [role=document]:before { content: " "; display: table } [role=document]:after { clear: both } @media screen and (max-width: 32.5em), screen and (max-height: 26.25em) { [role=document] { margin: 0 auto 5px; position: relative; top: -49px } .video [role=document] { top: 0 } .js-preview-content [role=document], .video [role=document] { margin: 0 auto; z-index: 0 } } #container { background-color: #fff } blockquote, code, dd, dir, div, dl, dt, fieldset, figcaption, figure, form, h1, h2, h3, h4, h5, h6, input, li, menu, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0 } table { border-collapse: collapse; border-spacing: 0; border-color: none; font-size: inherit } abbr, acronym, fieldset, img { border: 0 } address, caption, cite, code, dfn, strong, th, var { font-style: normal; font-weight: 400 } code { font-family: "Droid Sans Mono", Courier, monospace } strong { font-weight: 700 } ol, ul { list-style: none } caption, th { text-align: left } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 } q:after, q:before { content: '' } em { font-style: italic } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block } audio, canvas, video { display: inline-block } #lesson-fragment .boxg hr, #lesson-fragment .bul_hang img, #lesson-fragment .bul_hang1 img, #lesson-fragment .bul_hang2 img, #lesson-fragment .bul_hang3 img, #lesson-fragment .hanging-i img, #lesson-fragment .indentbullet img, #lesson-fragment .note hr, #lesson-fragment .note1 hr, #lesson-fragment .sidebar1 hr, #lesson-fragment .tip hr, #lesson-fragment .warning hr, #lesson-fragment div.note hr, #lesson-fragment div.sidebar hr, #lesson-fragment div.tip hr, #lesson-fragment div.warning hr, #lesson-fragment hr, #sbo-rt-content .boxg hr, #sbo-rt-content .bul_hang img, #sbo-rt-content .bul_hang1 img, #sbo-rt-content .bul_hang2 img, #sbo-rt-content .bul_hang3 img, #sbo-rt-content .hanging-i img, #sbo-rt-content .indentbullet img, #sbo-rt-content .note hr, #sbo-rt-content .note1 hr, #sbo-rt-content .sidebar1 hr, #sbo-rt-content .tip hr, #sbo-rt-content .warning hr, #sbo-rt-content div.note hr, #sbo-rt-content div.sidebar hr, #sbo-rt-content div.tip hr, #sbo-rt-content div.warning hr, #sbo-rt-content hr, .pdfdoc.prodsample-book .t, audio:not([controls]) { display: none } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } .footnote, .footnotes, sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline } #lesson-fragment .fn-group, #lesson-fragment .footnote, #lesson-fragment .footnotes, #sbo-rt-content .fn-group, #sbo-rt-content .footnote, #sbo-rt-content .footnotes { border: none } #lesson-fragment .fn-group div, #lesson-fragment .fn-group p, #lesson-fragment .footnote div, #lesson-fragment .footnote p, #lesson-fragment .footnotes div, #lesson-fragment .footnotes p, #sbo-rt-content .fn-group div, #sbo-rt-content .fn-group p, #sbo-rt-content .footnote div, #sbo-rt-content .footnote p, #sbo-rt-content .footnotes div, #sbo-rt-content .footnotes p { font-size: 85%!important; margin-bottom: 1.5em; line-height: 1.5em } sup { top: -.5em } sub { bottom: -.25em } #lesson-fragment>div, #sbo-rt-content>div { margin: 0; padding: 0 } #sbo-rt-content { width: 100%; max-width: 37em } @media only screen and (min-width: 1250px) { #sbo-rt-content { font-size: 118%!important; max-width: 900px; max-width: 56.25rem } } @media only screen and (min-width: 521px) and (max-width: 1249px) { #sbo-rt-content { max-width: 700px; max-width: 43.75rem; font-size: 100%!important } } @media only screen and (max-width: 520px) { #container { overflow: hidden } #sbo-rt-content { max-width: 100%; font-size: 88%!important } } .pdfdoc .js-toc { overflow: hidden } .pdfdoc #sbo-rt-content { padding: 0 5px; margin: 0!important } .pdfdoc.prodsample-book img.bi { width: 100%!important } .js .pdfdoc section[role=document] { border: none!important; -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent } .js .pdfdoc section[role=document] #sbo-rt-content { opacity: 0 } .js .pdfdoc section[role=document].showPdf #sbo-rt-content { opacity: 1 } #sbo-rt-content #pdf-main .pd, #sbo-rt-content #pdf-main .pf { margin: 15px 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15); box-shadow: 0 0 5px rgba(0, 0, 0, .15); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px } .scalefonts #lesson-fragment div div, .scalefonts #lesson-fragment div p, .scalefonts #lesson-fragment li, .scalefonts #lesson-fragment li li, .scalefonts #lesson-fragment ol, .scalefonts #lesson-fragment ol ol, .scalefonts #lesson-fragment p p, .scalefonts #lesson-fragment table, .scalefonts #lesson-fragment td, .scalefonts #lesson-fragment ul, .scalefonts #lesson-fragment ul ul, .scalefonts #sbo-rt-content div div, .scalefonts #sbo-rt-content div p, .scalefonts #sbo-rt-content li, .scalefonts #sbo-rt-content li li, .scalefonts #sbo-rt-content ol, .scalefonts #sbo-rt-content ol ol, .scalefonts #sbo-rt-content p p, .scalefonts #sbo-rt-content table, .scalefonts #sbo-rt-content td, .scalefonts #sbo-rt-content ul, .scalefonts #sbo-rt-content ul ul { font-size: 100%!important; line-height: 1.65em!important; text-align: left } .scalefonts #lesson-fragment div, .scalefonts #lesson-fragment ol, .scalefonts #lesson-fragment p, .scalefonts #lesson-fragment ul, .scalefonts #sbo-rt-content div, .scalefonts #sbo-rt-content ol, .scalefonts #sbo-rt-content p, .scalefonts #sbo-rt-content ul { text-indent: 0!important; margin-left: 0!important; margin-right: 0!important } .scalefonts #lesson-fragment .FOOTNOTES, .scalefonts #lesson-fragment .endnoteentry, .scalefonts #lesson-fragment .footnotes, .scalefonts #sbo-rt-content .FOOTNOTES, .scalefonts #sbo-rt-content .endnoteentry, .scalefonts #sbo-rt-content .footnotes { font-size: small!important } #lesson-fragment, #sbo-rt-content { clear: both; margin: 0 auto; padding: 1.25rem; border: 0 solid #ddd; color: #333; font-family: Georgia, "Droid Serif", Times, serif; font-style: normal; font-weight: 400; min-height: 450px } @media only screen and (max-width: 520px) { #lesson-fragment, #sbo-rt-content { padding: 3.125rem 1.25rem 1.25rem } } #lesson-fragment .figure, #sbo-rt-content .figure { text-align: center; margin: 1.5625rem 0 .9375rem } #lesson-fragment .p, #sbo-rt-content .p { padding: 0 } #lesson-fragment table, #sbo-rt-content table { padding-left: 0; padding-right: 0 } #lesson-fragment div, #lesson-fragment div.booksection, #sbo-rt-content div, #sbo-rt-content div.booksection { font-family: inherit; margin: 0; padding: 0 } #lesson-fragment div.sect1.case_study, #lesson-fragment div.sect1.pattern, #sbo-rt-content div.sect1.case_study, #sbo-rt-content div.sect1.pattern { border: none; background-color: transparent } .video #lesson-fragment, .video #sbo-rt-content { padding-top: 20px; min-height: 2em } #lesson-fragment blockquote, #lesson-fragment li, #lesson-fragment p, #sbo-rt-content blockquote, #sbo-rt-content li, #sbo-rt-content p { line-height: 1.5 } #lesson-fragment li code, #lesson-fragment li p, #lesson-fragment p code, #sbo-rt-content li code, #sbo-rt-content li p, #sbo-rt-content p code { font-size: inherit } #lesson-fragment .indent, #lesson-fragment .noindent, #lesson-fragment .p, #lesson-fragment div.chp .para_indented, #lesson-fragment div>p, #lesson-fragment p, #lesson-fragment p.para_indented, #sbo-rt-content .indent, #sbo-rt-content .noindent, #sbo-rt-content .p, #sbo-rt-content div.chp .para_indented, #sbo-rt-content div>p, #sbo-rt-content p, #sbo-rt-content p.para_indented { margin: .75em 0 1.25em!important; text-indent: 0; text-align: inherit; font-family: inherit!important; line-height: 1.5em!important } #lesson-fragment .figure table, #lesson-fragment .informalfigure, #lesson-fragment .totri-image-wrapper, #lesson-fragment .totri-image-wrapper p, #lesson-fragment p.image, #lesson-fragment table img, #sbo-rt-content .figure table, #sbo-rt-content .informalfigure, #sbo-rt-content .totri-image-wrapper, #sbo-rt-content .totri-image-wrapper p, #sbo-rt-content p.image, #sbo-rt-content section.transcript-wrapper h2, #sbo-rt-content table img { text-align: center } #lesson-fragment ul li, #sbo-rt-content ul li { margin: .5em 0 .65em!important; list-style: disc } #lesson-fragment blockquote p, #sbo-rt-content blockquote p { font-weight: inherit } #lesson-fragment strong code, #sbo-rt-content strong code { font-weight: 700 } #lesson-fragment sup, #sbo-rt-content sup { height: 0; line-height: 1; bottom: 1em; font-size: .7em; color: #666 } #lesson-fragment span.inlinemediaobject, #sbo-rt-content span.inlinemediaobject { height: auto } #lesson-fragment .box_title, #lesson-fragment .chaptertitle, #lesson-fragment .cn-chapter-number, #lesson-fragment .fm_title_document, #lesson-fragment .heading-1, #lesson-fragment .heading-3, #lesson-fragment .paragraph-head, #lesson-fragment .title_document, #lesson-fragment h1, #lesson-fragment h2, #lesson-fragment h3, #lesson-fragment h4, #lesson-fragment h5, #lesson-fragment h6, #sbo-rt-content .box_title, #sbo-rt-content .chaptertitle, #sbo-rt-content .cn-chapter-number, #sbo-rt-content .fm_title_document, #sbo-rt-content .heading-1, #sbo-rt-content .heading-3, #sbo-rt-content .paragraph-head, #sbo-rt-content .title_document, #sbo-rt-content h1, #sbo-rt-content h2, #sbo-rt-content h3, #sbo-rt-content h4, #sbo-rt-content h5, #sbo-rt-content h6 { font-family: "source sans pro", sans-serif, AvenirNextCondensed-Medium, HelveticaNeue-CondensedBold, "Droid Sans", Helvetica, Arial, sans-serif!important; line-height: 1.1; font-style: normal; font-weight: 500; color: #404040; margin: 1.5em 0 .35em!important; background-color: transparent; word-wrap: break-word } #lesson-fragment .chaptertitle, #lesson-fragment h1, #sbo-rt-content .chaptertitle, #sbo-rt-content h1 { font-size: 2em; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto } #lesson-fragment h2, #sbo-rt-content h2 { font-size: 1.575em } #lesson-fragment h3, #sbo-rt-content h3 { font-size: 1.25em; text-indent: 0!important } #lesson-fragment h4, #sbo-rt-content h4 { font-size: 1.15em } #lesson-fragment h5, #lesson-fragment h6, #sbo-rt-content h5, #sbo-rt-content h6 { font-size: .9375em } #lesson-fragment div.titlepage, #sbo-rt-content div.titlepage { margin: 1em 0 .35em } #lesson-fragment .transcript-wrapper .video-title, #sbo-rt-content .transcript-wrapper .video-title, .video #lesson-fragment h1, .video #sbo-rt-content h1 { font-size: 1.5em; margin: .8em 0 1.2em!important; padding: 0; font-weight: 700 } #lesson-fragment a, #lesson-fragment a:link, #lesson-fragment a:visited, #sbo-rt-content a, #sbo-rt-content a:link, #sbo-rt-content a:visited { text-decoration: none; border-bottom: 1px dashed #bbb; color: #070707; -webkit-transition: border-bottom .3s ease; -moz-transition: border-bottom .3s ease; transition: border-bottom .3s ease } #lesson-fragment a:focus, #lesson-fragment a:hover, #sbo-rt-content a:focus, #sbo-rt-content a:hover { border-bottom: 1px dashed #333 } #lesson-fragment .small, #sbo-rt-content .small { font-size: .6em } #lesson-fragment .sc, #lesson-fragment abbr, #lesson-fragment acronym, #sbo-rt-content .sc, #sbo-rt-content abbr, #sbo-rt-content acronym { font-size: .85em; text-transform: uppercase; letter-spacing: 1px } #lesson-fragment .noborder, #sbo-rt-content .noborder { border: 0 } #lesson-fragment p, #sbo-rt-content p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto } #lesson-fragment .footnote p, #sbo-rt-content .footnote p { font-family: Arial, sans-serif; font-size: inherit } #lesson-fragment .boxg, #lesson-fragment .note, #lesson-fragment .note1, #lesson-fragment .sidebar1, #lesson-fragment .tip, #lesson-fragment .warning, #lesson-fragment div.note, #lesson-fragment div.sidebar, #lesson-fragment div.tip, #lesson-fragment div.warning, #sbo-rt-content .boxg, #sbo-rt-content .note, #sbo-rt-content .note1, #sbo-rt-content .sidebar1, #sbo-rt-content .tip, #sbo-rt-content .warning, #sbo-rt-content div.note, #sbo-rt-content div.sidebar, #sbo-rt-content div.tip, #sbo-rt-content div.warning { border: 1px dotted #ddd; padding: 1em 2em!important; background-color: #eee; box-shadow: 0 5px 10px #eee; margin: 2em!important; font-size: smaller!important } #lesson-fragment .boxg p, #lesson-fragment .note p, #lesson-fragment .note1 p, #lesson-fragment .sidebar1 p, #lesson-fragment .tip p, #lesson-fragment .warning p, #lesson-fragment div.note p, #lesson-fragment div.sidebar p, #lesson-fragment div.tip p, #lesson-fragment div.warning p, #sbo-rt-content .boxg p, #sbo-rt-content .note p, #sbo-rt-content .note1 p, #sbo-rt-content .sidebar1 p, #sbo-rt-content .tip p, #sbo-rt-content .warning p, #sbo-rt-content div.note p, #sbo-rt-content div.sidebar p, #sbo-rt-content div.tip p, #sbo-rt-content div.warning p { font-size: 90%!important; font-family: Arial, sans-serif!important } #lesson-fragment .boxg .title, #lesson-fragment .boxg h3, #lesson-fragment .note .title, #lesson-fragment .note h3, #lesson-fragment .note1 .title, #lesson-fragment .note1 h3, #lesson-fragment .sidebar1 .title, #lesson-fragment .sidebar1 h3, #lesson-fragment .tip .title, #lesson-fragment .tip h3, #lesson-fragment .warning .title, #lesson-fragment .warning h3, #lesson-fragment div.note .title, #lesson-fragment div.note h3, #lesson-fragment div.sidebar .title, #lesson-fragment div.sidebar h3, #lesson-fragment div.tip .title, #lesson-fragment div.tip h3, #lesson-fragment div.warning .title, #lesson-fragment div.warning h3, #sbo-rt-content .boxg .title, #sbo-rt-content .boxg h3, #sbo-rt-content .note .title, #sbo-rt-content .note h3, #sbo-rt-content .note1 .title, #sbo-rt-content .note1 h3, #sbo-rt-content .sidebar1 .title, #sbo-rt-content .sidebar1 h3, #sbo-rt-content .tip .title, #sbo-rt-content .tip h3, #sbo-rt-content .warning .title, #sbo-rt-content .warning h3, #sbo-rt-content div.note .title, #sbo-rt-content div.note h3, #sbo-rt-content div.sidebar .title, #sbo-rt-content div.sidebar h3, #sbo-rt-content div.tip .title, #sbo-rt-content div.tip h3, #sbo-rt-content div.warning .title, #sbo-rt-content div.warning h3 { font-family: AvenirNextCondensed-Medium, HelveticaNeue-CondensedBold, "Droid Sans", Arial, sans-serif!important; text-shadow: 1px 1px 0 #fff; color: #666; font-weight: 500 } @media only screen and (max-width: 520px) { #lesson-fragment .boxg, #lesson-fragment .note, #lesson-fragment .note1, #lesson-fragment .sidebar1, #lesson-fragment .tip, #lesson-fragment .warning, #lesson-fragment div.note, #lesson-fragment div.sidebar, #lesson-fragment div.tip, #lesson-fragment div.warning, #sbo-rt-content .boxg, #sbo-rt-content .note, #sbo-rt-content .note1, #sbo-rt-content .sidebar1, #sbo-rt-content .tip, #sbo-rt-content .warning, #sbo-rt-content div.note, #sbo-rt-content div.sidebar, #sbo-rt-content div.tip, #sbo-rt-content div.warning { margin: 1.5em 0!important } } #lesson-fragment .boxg img, #lesson-fragment .boxg img:hover, #lesson-fragment .note img, #lesson-fragment .note img:hover, #lesson-fragment .note1 img, #lesson-fragment .note1 img:hover, #lesson-fragment .sidebar1 img, #lesson-fragment .sidebar1 img:hover, #lesson-fragment .tip img, #lesson-fragment .tip img:hover, #lesson-fragment .warning img, #lesson-fragment .warning img:hover, #lesson-fragment div.note img, #lesson-fragment div.note img:hover, #lesson-fragment div.sidebar img, #lesson-fragment div.sidebar img:hover, #lesson-fragment div.tip img, #lesson-fragment div.tip img:hover, #lesson-fragment div.warning img, #lesson-fragment div.warning img:hover, #sbo-rt-content .boxg img, #sbo-rt-content .boxg img:hover, #sbo-rt-content .note img, #sbo-rt-content .note img:hover, #sbo-rt-content .note1 img, #sbo-rt-content .note1 img:hover, #sbo-rt-content .sidebar1 img, #sbo-rt-content .sidebar1 img:hover, #sbo-rt-content .tip img, #sbo-rt-content .tip img:hover, #sbo-rt-content .warning img, #sbo-rt-content .warning img:hover, #sbo-rt-content div.note img, #sbo-rt-content div.note img:hover, #sbo-rt-content div.sidebar img, #sbo-rt-content div.sidebar img:hover, #sbo-rt-content div.tip img, #sbo-rt-content div.tip img:hover, #sbo-rt-content div.warning img, #sbo-rt-content div.warning img:hover { border: none; background-color: transparent } #lesson-fragment .note h3, #lesson-fragment .tip h3, #lesson-fragment .warning h3, #sbo-rt-content .note h3, #sbo-rt-content .tip h3, #sbo-rt-content .warning h3 { margin-top: 0 } #lesson-fragment .note1 .note, #sbo-rt-content .note1 .note { background: no-repeat; border: none; margin: 0!important; padding: 0 } #lesson-fragment .codelink, #sbo-rt-content .codelink { font-size: 80%!important } #lesson-fragment .pre, #lesson-fragment .pre-ex, #lesson-fragment .pre1, #lesson-fragment .pre_w, #lesson-fragment p.pre, #lesson-fragment pre, #sbo-rt-content .pre, #sbo-rt-content .pre-ex, #sbo-rt-content .pre1, #sbo-rt-content .pre_w, #sbo-rt-content p.pre, #sbo-rt-content pre { font-family: "Droid Sans Mono", Courier, monospace; line-height: 1.5em!important; margin: 0 0 1.5em!important; padding: 1em 2em!important; background-color: #fbfbfb!important; font-size: 80%!important; color: #404040; border-top: 1px solid #DDD!important; border-bottom: 1px solid #DDD!important; overflow-x: scroll; overflow: auto; overflow-y: hidden; -webkit-hyphens: none; word-wrap: initial!important; word-break: keep-all!important; white-space: pre!important } #lesson-fragment pre code, #sbo-rt-content pre code { font-size: inherit } #lesson-fragment .pd_lightblue, #lesson-fragment .pd_white, #lesson-fragment .skycolor, #lesson-fragment .tab_num, #lesson-fragment .tabcolor, #sbo-rt-content .pd_lightblue, #sbo-rt-content .pd_white, #sbo-rt-content .skycolor, #sbo-rt-content .tab_num, #sbo-rt-content .tabcolor { color: #404040!important } #lesson-fragment .indenthanging, #lesson-fragment .indenthangingB, #sbo-rt-content .indenthanging, #sbo-rt-content .indenthangingB { margin: 0 0 .625rem 2.1875rem } #lesson-fragment .bul_hang, #lesson-fragment .bul_hang1, #lesson-fragment .bul_hang2, #lesson-fragment .bul_hang3, #lesson-fragment .hanging-i, #lesson-fragment .indentbullet, #sbo-rt-content .bul_hang, #sbo-rt-content .bul_hang1, #sbo-rt-content .bul_hang2, #sbo-rt-content .bul_hang3, #sbo-rt-content .hanging-i, #sbo-rt-content .indentbullet { text-indent: -10px!important } #lesson-fragment .bul_hang1:before, #lesson-fragment .bul_hang2:before, #lesson-fragment .bul_hang3:before, #lesson-fragment .bul_hang:before, #lesson-fragment .hanging-i:before, #lesson-fragment .indentbullet:before, #sbo-rt-content .bul_hang1:before, #sbo-rt-content .bul_hang2:before, #sbo-rt-content .bul_hang3:before, #sbo-rt-content .bul_hang:before, #sbo-rt-content .hanging-i:before, #sbo-rt-content .indentbullet:before { content: "• "; position: relative; left: -10px } #lesson-fragment .box_title, #sbo-rt-content .box_title { font-size: 165%!important; margin: 1em 0 .5em } #lesson-fragment .figure, #lesson-fragment .figure_legend, #sbo-rt-content .figure, #sbo-rt-content .figure_legend { border: none!important } #lesson-fragment .centera, #lesson-fragment .centerb, #sbo-rt-content .centera, #sbo-rt-content .centerb { margin: 0; text-align: center } #lesson-fragment .annotator-wrapper .FigCapt, #lesson-fragment .annotator-wrapper .TabCapt, #lesson-fragment .annotator-wrapper .caption, #lesson-fragment .annotator-wrapper .ex-caption, #lesson-fragment .annotator-wrapper .fig, #lesson-fragment .annotator-wrapper .fig-caption, #lesson-fragment .annotator-wrapper .fig-title, #lesson-fragment .annotator-wrapper .fig_num, #lesson-fragment .annotator-wrapper .figleg, #lesson-fragment .annotator-wrapper .figure p.title, #lesson-fragment .annotator-wrapper .notetitle, #lesson-fragment .annotator-wrapper .tab-caption, #lesson-fragment div .FigCapt, #lesson-fragment div .TabCapt, #lesson-fragment div .caption, #lesson-fragment div .ex-caption, #lesson-fragment div .fig, #lesson-fragment div .fig-caption, #lesson-fragment div .fig-title, #lesson-fragment div .fig_num, #lesson-fragment div .figleg, #lesson-fragment div .figure p.title, #lesson-fragment div .notetitle, #lesson-fragment div .tab-caption, #sbo-rt-content .annotator-wrapper .FigCapt, #sbo-rt-content .annotator-wrapper .TabCapt, #sbo-rt-content .annotator-wrapper .caption, #sbo-rt-content .annotator-wrapper .ex-caption, #sbo-rt-content .annotator-wrapper .fig, #sbo-rt-content .annotator-wrapper .fig-caption, #sbo-rt-content .annotator-wrapper .fig-title, #sbo-rt-content .annotator-wrapper .fig_num, #sbo-rt-content .annotator-wrapper .figleg, #sbo-rt-content .annotator-wrapper .figure p.title, #sbo-rt-content .annotator-wrapper .notetitle, #sbo-rt-content .annotator-wrapper .tab-caption, #sbo-rt-content div .FigCapt, #sbo-rt-content div .TabCapt, #sbo-rt-content div .caption, #sbo-rt-content div .ex-caption, #sbo-rt-content div .fig, #sbo-rt-content div .fig-caption, #sbo-rt-content div .fig-title, #sbo-rt-content div .fig_num, #sbo-rt-content div .figleg, #sbo-rt-content div .figure p.title, #sbo-rt-content div .notetitle, #sbo-rt-content div .tab-caption { background-color: transparent; font-size: 80%!important; max-width: 75%; margin: 10px auto 1.5em!important } #lesson-fragment code.docutils>span.pre, #sbo-rt-content code.docutils>span.pre { border-top: 0!important; border-bottom: 0!important; padding: 0!important } #lesson-fragment table, #sbo-rt-content table { border: 1px solid #ddd!important; padding: 10px; max-width: 100%!important; width: 100%; background-color: #fff; margin-bottom: 1.5em; overflow: scroll; display: block } #lesson-fragment table pre, #sbo-rt-content table pre { border: none; background-color: transparent; padding: 0 } #lesson-fragment table img.totri-border, #sbo-rt-content table img.totri-border { padding: 0; border: none } #lesson-fragment thead, #sbo-rt-content thead { font-family: Arial, sans-serif; border-bottom: 2px solid #ddd; background-color: #e8edff } #lesson-fragment thead th, #sbo-rt-content thead th { padding: 10px; font-weight: 700 } #lesson-fragment tbody, #sbo-rt-content tbody { max-width: 100%; overflow: scroll } #lesson-fragment tbody td, #sbo-rt-content tbody td { padding: 10px } #lesson-fragment tbody tr, #sbo-rt-content tbody tr { border-bottom: 1px solid #ddd } #lesson-fragment tbody tr:last-child, #sbo-rt-content tbody tr:last-child { border-bottom: 0 } #lesson-fragment tbody tr:nth-child(even), #sbo-rt-content tbody tr:nth-child(even) { background-color: #f7f7f7 } #lesson-fragment table p, #sbo-rt-content table p { margin: 0; font-size: inherit } #lesson-fragment dir, #lesson-fragment dl, #lesson-fragment menu, #lesson-fragment ol, #lesson-fragment ul, #sbo-rt-content dir, #sbo-rt-content dl, #sbo-rt-content menu, #sbo-rt-content ol, #sbo-rt-content ul { margin: 1.5em 0 2em 2em; padding-left: 25px } #lesson-fragment ol li, #sbo-rt-content ol li { list-style: decimal } #lesson-fragment li p, #sbo-rt-content li p { margin-bottom: 0 } #lesson-fragment dt, #sbo-rt-content dt { font-size: 1em; line-height: 1.5em } #lesson-fragment code, #lesson-fragment code code, #lesson-fragment dt code, #lesson-fragment li code, #lesson-fragment li pre, #lesson-fragment ol code, #sbo-rt-content code, #sbo-rt-content code code, #sbo-rt-content dt code, #sbo-rt-content li code, #sbo-rt-content li pre, #sbo-rt-content ol code { font-size: inherit } #lesson-fragment table img, #sbo-rt-content table img { border: 0; padding: 20px 0; margin: 0 auto } #lesson-fragment img.totri-border, #sbo-rt-content img.totri-border { padding: 10px; background-color: #fff; border: 2px solid #ddd; max-width: 100%; height: auto } #lesson-fragment #pdf-main img, #sbo-rt-content #pdf-main img { padding: 0; border: 0 } #sbo-rt-content section.transcript-wrapper { display: table-cell; height: auto; margin-bottom: 5%; border: 1px solid #BEB9A6; font-family: "source sans pro", sans-serif, AvenirNextCondensed-Medium, HelveticaNeue-CondensedBold, "Droid Sans", Helvetica, Arial, sans-serif } #sbo-rt-content section.transcript-wrapper>div.t-video-description { float: left; width: 100%; height: auto; padding: 20px; color: #8B8D8E; overflow: auto } #sbo-rt-content section.transcript-wrapper>div.t-video-description .video-title, #sbo-rt-content section.transcript-wrapper>div.t-video-description h1 { margin: 10px 0 20px!important } #sbo-rt-content section.transcript-wrapper>div#transcript-box { background-color: #e6e6e6; width: 100%; height: auto; float: right; margin: 0 8%; padding: 20px } #sbo-rt-content section.transcript-wrapper>div#transcript-box div.transcript { height: auto } #sbo-rt-content section.transcript-wrapper>div#transcript-box div.transcript>p { display: inline; line-height: 1.2em!important; font-size: 90%!important; margin: 0 0 2%!important; padding: 0!important; color: #070707; overflow: hidden; font-weight: 300 } #sbo-rt-content section.transcript-wrapper>div#transcript-box div.transcript>p span.text { display: inline } #sbo-rt-content section.transcript-wrapper>div#transcript-box div.transcript abbr.begin:before { content: '[' } #sbo-rt-content section.transcript-wrapper>div#transcript-box div.transcript abbr.begin:after { content: ']' } #sbo-rt-content section.transcript-wrapper>div#transcript-box div.transcript abbr.end { display: none } @media (min-width: 768px) { #sbo-rt-content section.transcript-wrapper { height: 502px } #sbo-rt-content section.transcript-wrapper>div.t-video-description { width: 50%; height: 465px } #sbo-rt-content section.transcript-wrapper>div#transcript-box { width: 50%; height: 500px; border-left: 1px solid #BEB9A6 } #sbo-rt-content section.transcript-wrapper>div#transcript-box div.transcript { height: 456px; overflow: auto } } @media only screen and (min-width: 78.125em) { #lesson-fragment blockquote, #lesson-fragment li, #lesson-fragment p, #sbo-rt-content blockquote, #sbo-rt-content li, #sbo-rt-content p { line-height: 1.6em } } @media only screen and (max-device-width: 30em) { #lesson-fragment .note, #lesson-fragment .tip, #lesson-fragment .warning, #sbo-rt-content .note, #sbo-rt-content .tip, #sbo-rt-content .warning { margin-left: 0!important; margin-right: 0!important } #lesson-fragment dir, #lesson-fragment dl, #lesson-fragment menu, #lesson-fragment ol, #lesson-fragment ul, #sbo-rt-content dir, #sbo-rt-content dl, #sbo-rt-content menu, #sbo-rt-content ol, #sbo-rt-content ul { margin-left: 1.8em; margin-bottom: 2em } } @media only screen and (max-device-width: 30em) and (orientation: landscape) { #lesson-fragment dir, #lesson-fragment dl, #lesson-fragment menu, #lesson-fragment ol, #lesson-fragment ul, #sbo-rt-content dir, #sbo-rt-content dl, #sbo-rt-content menu, #sbo-rt-content ol, #sbo-rt-content ul { margin-left: 1.5em; margin-bottom: 2em } [role=document] { top: 0 } .video [role=document] { top: 49px } [role=document] .sbo-nav-top { top: -49px } } @media only screen and (device-aspect-ratio: 40 / 71) and (orientation: landscape) { #lesson-fragment blockquote, #lesson-fragment li, #lesson-fragment p, #sbo-rt-content blockquote, #sbo-rt-content li, #sbo-rt-content p { line-height: 1.6em } } @media only screen and (min-device-width: 48em) and (device-height: 64em) and (orientation: portrait) { [role=document] { max-width: 100% } #lesson-fragment, #sbo-rt-content { padding: 0 100px } } @media only screen and (min-device-width: 48em) and (device-height: 64em) and (orientation: landscape) { #lesson-fragment blockquote, #lesson-fragment li, #lesson-fragment p, #sbo-rt-content blockquote, #sbo-rt-content li, #sbo-rt-content p { line-height: 1.6em } } @media print { .note, .tip, .warning, body, pre { background-color: #fff } body { color: #000; font-size: 7pt } .note p, pre { font-size: 1.4em } @page { margin: 1in 1.25in 1in 1.25in } h1, h2, h3, h4, h5, h6 { text-shadow: none; color: #000 } .note, .tip, .warning { box-shadow: none } a[href^="http://"]:after { content: " (" attr(href) ")"; font-size: 75% } } .mfp-bg, .mfp-wrap { left: 0; top: 0; position: fixed } .mfp-bg, .mfp-container, .mfp-wrap { width: 100%; height: 100% } .mfp-container:before, .mfp-figure:after { content: '' } .mfp-bg { z-index: 1042; overflow: hidden; background: #0b0b0b; opacity: .8; filter: alpha(opacity=80) } .mfp-wrap { z-index: 1043; outline: 0!important; -webkit-backface-visibility: hidden } .mfp-container { text-align: center; position: absolute; left: 0; top: 0; padding: 0 8px; box-sizing: border-box } .mfp-container, img.mfp-img { -webkit-box-sizing: border-box; -moz-box-sizing: border-box } .mfp-container:before { display: inline-block; height: 100%; vertical-align: middle } .mfp-align-top .mfp-container:before { display: none } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045 } .mfp-ajax-holder .mfp-content, .mfp-inline-holder .mfp-content { width: 100%; cursor: auto } .mfp-ajax-cur { cursor: progress } .mfp-zoom, .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer } .mfp-zoom { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in } .mfp-auto-cursor .mfp-content { cursor: auto } .mfp-arrow, .mfp-close, .mfp-counter, .mfp-preloader { -webkit-user-select: none; -moz-user-select: none; user-select: none } .mfp-loading.mfp-figure { display: none } .mfp-hide { display: none!important } .mfp-preloader { color: #ccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -.8em; left: 8px; right: 8px; z-index: 1044 } .mfp-preloader a { color: #ccc } .mfp-close, .mfp-preloader a:hover { color: #fff } .mfp-s-error .mfp-content, .mfp-s-ready .mfp-preloader { display: none } button.mfp-arrow, button.mfp-close { overflow: visible; cursor: pointer; background: 0 0; border: 0; -webkit-appearance: none; display: block; outline: 0; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none } .mfp-figure:after, .mfp-iframe-scaler iframe { position: absolute; left: 0; box-shadow: 0 0 8px rgba(0, 0, 0, .6) } button::-moz-focus-inner { padding: 0; border: 0 } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: .65; filter: alpha(opacity=65); padding: 0 0 18px 10px; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace } .mfp-close:focus, .mfp-close:hover { opacity: 1; filter: alpha(opacity=100) } .mfp-close:active { top: 1px } .mfp-close-btn-in .mfp-close { color: #333 } .mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close { color: #fff; right: -6px; text-align: right; padding-right: 6px; width: 100% } .mfp-counter { position: absolute; top: 0; right: 0; color: #ccc; font-size: 12px; line-height: 18px } .mfp-figure, img.mfp-img { line-height: 0 } .mfp-arrow { position: absolute; opacity: .65; filter: alpha(opacity=65); margin: -55px 0 0; top: 50%; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent } .mfp-arrow:active { margin-top: -54px } .mfp-arrow:focus, .mfp-arrow:hover { opacity: 1; filter: alpha(opacity=100) } .mfp-arrow .mfp-a, .mfp-arrow .mfp-b, .mfp-arrow:after, .mfp-arrow:before { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: inset transparent } .mfp-arrow .mfp-a, .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px } .mfp-arrow .mfp-b, .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: .7 } .mfp-arrow-left { left: 0 } .mfp-arrow-left .mfp-a, .mfp-arrow-left:after { border-right: 17px solid #fff; margin-left: 31px } .mfp-arrow-left .mfp-b, .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3f3f3f } .mfp-arrow-right { right: 0 } .mfp-arrow-right .mfp-a, .mfp-arrow-right:after { border-left: 17px solid #fff; margin-left: 39px } .mfp-arrow-right .mfp-b, .mfp-arrow-right:before { border-left: 27px solid #3f3f3f } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px } .mfp-image-holder .mfp-content, img.mfp-img { max-width: 100% } .mfp-iframe-holder .mfp-close { top: -40px } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25% } .mfp-iframe-scaler iframe { display: block; top: 0; width: 100%; height: 100%; background: #000 } .mfp-figure:after, img.mfp-img { display: block; width: auto; height: auto } img.mfp-img { box-sizing: border-box; padding: 40px 0; margin: 0 auto } .mfp-figure:after { top: 40px; bottom: 40px; right: 0; z-index: -1; background: #444 } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px } .mfp-figure figure { margin: 0 } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-wrap: break-word; padding-right: 36px } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0 } .mfp-img-mobile img.mfp-img { padding: 0 } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0 } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, .6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0 } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, .6); position: fixed; text-align: center; padding: 0 } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(.75); transform: scale(.75) } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0 } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100% } .mfp-container { padding-left: 6px; padding-right: 6px } } .mfp-ie7 .mfp-img { padding: 0 } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px } .mfp-ie7 .mfp-container { padding: 0 } .mfp-ie7 .mfp-content { padding-top: 44px } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0 } .mfp-fade.mfp-bg { opacity: 0; transition: all .15s ease-out } .mfp-fade.mfp-bg, .mfp-fade.mfp-wrap .mfp-content { -webkit-transition: all .15s ease-out; -moz-transition: all .15s ease-out } .mfp-fade.mfp-bg.mfp-ready { opacity: .8 } .mfp-fade.mfp-bg.mfp-removing { opacity: 0 } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: all .15s ease-out } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1 } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0 }