@charset "UTF-8" #js-course-mount .clearfix:after, #js-course-mount .gen-nav:after, #js-course-mount .grid:after, #js-course-mount .sales-form.user-anon article form label, #js-course-mount .topnav:after, #js-course-mount header#lead: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; } .agreement-inc .default-content ol.outline, .legalese ol.outline { counter-reset: item; } #js-course-mount body { line-height: 1; } #js-course-mount ol, #js-course-mount ul { list-style: none; } #js-course-mount blockquote, #js-course-mount q { quotes: none; } #js-course-mount blockquote:after, #js-course-mount blockquote:before, #js-course-mount q:after, #js-course-mount q:before { content: ''; content: none; } #js-course-mount table { border-collapse: collapse; border-spacing: 0; } #js-course-mount button.save-button { position: relative; } .fetching-spinner { width: 24px; height: 24px; position: absolute; top: 6px; right: 7px; -webkit-animation: iosIntro .6s; animation: iosIntro .6s; } .fetching-spinner svg { fill: #868686; } .fetching-spinner svg path:nth-of-type(1) { -webkit-animation: pulse 1s infinite linear; animation: pulse 1s infinite linear; } .fetching-spinner svg path:nth-of-type(2) { -webkit-animation: pulse 1s -.083s infinite linear; animation: pulse 1s -.083s infinite linear; } .fetching-spinner svg path:nth-of-type(3) { -webkit-animation: pulse 1s -.166s infinite linear; animation: pulse 1s -.166s infinite linear; } .fetching-spinner svg path:nth-of-type(4) { -webkit-animation: pulse 1s -.249s infinite linear; animation: pulse 1s -.249s infinite linear; } .fetching-spinner svg path:nth-of-type(5) { -webkit-animation: pulse 1s -.332s infinite linear; animation: pulse 1s -.332s infinite linear; } .fetching-spinner svg path:nth-of-type(6) { -webkit-animation: pulse 1s -.415s infinite linear; animation: pulse 1s -.415s infinite linear; } .fetching-spinner svg path:nth-of-type(7) { -webkit-animation: pulse 1s -.498s infinite linear; animation: pulse 1s -.498s infinite linear; } .fetching-spinner svg path:nth-of-type(8) { -webkit-animation: pulse 1s -.581s infinite linear; animation: pulse 1s -.581s infinite linear; } .fetching-spinner svg path:nth-of-type(9) { -webkit-animation: pulse 1s -.664s infinite linear; animation: pulse 1s -.664s infinite linear; } .fetching-spinner svg path:nth-of-type(10) { -webkit-animation: pulse 1s -.747s infinite linear; animation: pulse 1s -.747s infinite linear; } .fetching-spinner svg path:nth-of-type(11) { -webkit-animation: pulse 1s -.83s infinite linear; animation: pulse 1s -.83s infinite linear; } .fetching-spinner svg path:nth-of-type(12) { -webkit-animation: pulse 1s -.913s infinite linear; animation: pulse 1s -.913s infinite linear; } @-webkit-keyframes pulse { 50% { fill: #868686; } to { fill: rgba(134,134,134, .4); } } @keyframes pulse { 50% { fill: #868686; } to { fill: rgba(134,134,134, .4); } } @-webkit-keyframes iosIntro { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes iosIntro { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .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; } #js-course-mount .right { float: right; } #js-course-mount .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; } #js-course-mount .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; } #js-course-mount .modal-underlay-appear { opacity: .01; } #js-course-mount .modal-underlay-appear-active { opacity: 1; transition: opacity .5s ease-in; } #js-course-mount .modal-menu { height: 140px; overflow-y: auto; } #js-course-mount .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; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; } #js-course-mount .modal-wrapper h1 { margin: 0 0 20px; font-size: 24px; font-weight: 400; } #js-course-mount .modal-wrapper h4 { color: #070707; font-size: 16px; font-weight: 700; margin: 1em 0 .5em; } #js-course-mount .modal-wrapper input[type=search] { width: 100%; padding: 8px; border: 1px solid #DDD; font-size: larger; margin: 0; -webkit-appearance: none; } #js-course-mount .modal-wrapper .wrap-search { position: relative; } #js-course-mount .modal-wrapper .wrap-search svg { position: absolute; right: 5px; top: 5px; } #js-course-mount .modal-wrapper .modal-menu .does-exist-in-collection { background-color: #F5F5F5; } #js-course-mount .modal-wrapper .modal-menu li { height: 35px; } #js-course-mount .modal-wrapper .modal-menu li a { color: #070707; padding: 0 .5em; width: 100%; display: block; font-size: 16px; line-height: 35px; } #js-course-mount .modal-wrapper .modal-menu li a:hover { background-color: #EDEDED; text-decoration: none; } #js-course-mount .modal-wrapper .dropdown-item a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; position: relative; padding-right: 40px!important; } #js-course-mount .modal-wrapper .dropdown-item a .item-title { overflow: hidden; text-overflow: ellipsis; max-width: 420px; } #js-course-mount .modal-wrapper .error-message { background-color: #ef9a9a; margin-bottom: 30px; margin-top: 10px; max-width: 920px; padding: 10px 20px; width: 100%; } #js-course-mount .modal-wrapper .error-message p { font-size: 1em; margin: 0; } @media (max-width: 768px) { #js-course-mount .modal-wrapper { width:100%; margin-left: 0; left: 0; top: 0; height: 100%; } } #js-course-mount .modal-wrapper .modal-close { position: absolute; top: 0; right: 0; margin: 1em; 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); } #js-course-mount .modal-wrapper .modal-close svg { fill: #676767; height: 24px; pointer-events: none; width: 24px; vertical-align: top; } #js-course-mount .modal-close:hover { background-color: #DDD; } #js-course-mount .modal-close:focus { background-color: #AAA; } #js-course-mount .modal-wrapper .modal-menu li.list-slide-leave { height: 35px; opacity: 1; } #js-course-mount .modal-wrapper .modal-menu li.list-slide-leave-active { height: 0; opacity: .01; transition: all .3s ease-in; } #js-course-mount .modal-wrapper .modal-menu li.list-slide-enter { height: 0; opacity: .01; } #js-course-mount .modal-wrapper .modal-menu li.list-slide-enter-active { height: 35px; opacity: 1; transition: all .3s ease-in; } #js-course-mount .modal-wrapper .dropdown-item a .is-fetching-gif, #js-course-mount .modal-wrapper .dropdown-item a svg, #js-course-mount .modal-wrapper .dropdown-item a.error svg { position: absolute; right: 5px; top: 8px; } #js-course-mount .modal-create-collection.modal-wrapper { padding: 1em 2em 6em; } #js-course-mount .modal-create-collection .create-collection-container input[type=text], #js-course-mount .modal-create-collection .create-collection-container textarea { border: none; border-bottom: 2px solid #404040; background-color: transparent; width: 100%; max-width: 100%; border-radius: 0; outline: 0; padding: 6px 0; } #js-course-mount .modal-create-collection .create-collection-container input[type=text] { font-size: 20px; } #js-course-mount .modal-create-collection .create-collection-container textarea { margin-top: .35em; resize: none; } #js-course-mount .modal-create-collection .create-collection-container label { line-height: 1.3em; margin-top: 0; color: #999; } #js-course-mount .modal-create-collection .create-collection-container input[type=text].error { border: none; border-bottom: 2px solid #b9002d; background-color: transparent; } #js-course-mount .modal-create-collection .create-collection-container input[type=text].success { border: none; border-bottom: 2px solid green; background-color: transparent; } #js-course-mount .modal-create-collection .create-collection-container label.error, #js-course-mount .modal-create-collection .create-collection-container label.success { font-weight: 700; color: #444; } #js-course-mount .modal-create-collection .create-collection-container label.success a { cursor: pointer; color: #d3002d; } #js-course-mount .modal-create-collection .create-collection-container .actions { position: absolute; right: 28px; bottom: 30px; display: block; } #js-course-mount .modal-create-collection .create-collection-container .actions .cancel { color: #333; } #js-course-mount .modal-create-collection .create-collection-container .actions li { display: inline-block; margin-left: 15px; } #js-course-mount .modal-wrapper .create-collection-container .wrap-textarea h2, #js-course-mount .modal-wrapper .wrap-collection-name-input .wrap-svg { display: none; } #js-course-mount .modal-wrapper .wrap-collection-name-input { padding-right: 0; } #js-course-mount .modal-wrapper .wrap-collection-name-input .actions { position: absolute; top: 300px; left: auto; right: 30px; } @media screen and (max-width: 51.25em) { #js-course-mount .modal-wrapper .create-collection-container { margin-top:0; } } #js-course-mount .modal-wrapper .create-collection-container .wrap-collection-name-input, #js-course-mount .modal-wrapper .create-collection-container .wrap-textarea { margin-top: 0; } #js-course-mount .modal-pair-devices { text-align: center; padding-top: 30px; } #js-course-mount .modal-pair-devices p { font-size: 14px; color: #AAA; } #js-course-mount .modal-pair-devices .button-primary, #js-course-mount .modal-pair-devices .button-secondary, #js-course-mount .modal-pair-devices button { padding: 10px 40px; margin-top: 15px; } #js-course-mount .modal-wrapper.expiring-pair-code-modal-nag h1, #js-course-mount .modal-wrapper.modal-pair-devices h1 { padding-right: 30px; line-height: 1.25em; margin-top: 15px; } #js-course-mount .modal-wrapper.expiring-pair-code-modal-nag, #js-course-mount .modal-wrapper.modal-pair-devices { text-align: center; } #js-course-mount .modal-wrapper.expiring-pair-code-modal-nag p, #js-course-mount .modal-wrapper.modal-pair-devices p { color: #999; } @media (max-width: 540px) { #js-course-mount .modal-wrapper.expiring-pair-code-modal-nag .button-primary, #js-course-mount .modal-wrapper.expiring-pair-code-modal-nag .button-secondary, #js-course-mount .modal-wrapper.expiring-pair-code-modal-nag button, #js-course-mount .modal-wrapper.modal-pair-devices .button-primary, #js-course-mount .modal-wrapper.modal-pair-devices .button-secondary, #js-course-mount .modal-wrapper.modal-pair-devices button { width:100%; margin: 10px 0; text-align: center; } } #js-course-mount .title-cards .card-hover-actions .card-button { min-width: fit-content; } #js-course-mount .title-cards .card-hover-actions .title-add-to-queue { position: absolute; right: 10px; } #js-course-mount .js-transform-playlist-titles .title-hover .js-playlist-icon { left: 30px; position: inherit; top: 8px; } #js-course-mount .js-transform-playlist-titles .title-hover .js-playlist-icon svg { right: 0; position: inherit; } @media screen and (max-width: 580px) { #js-course-mount .js-transform-playlist-titles .title-hover .js-playlist-icon { top:10px; left: 25px; position: inherit; } #js-course-mount .js-transform-playlist-titles .title-hover .js-playlist-icon svg { top: -3px; left: 3px; position: relative; } } @-webkit-keyframes fadeOut180DegPopIn { 0% { opacity: 1; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 90% { opacity: 0; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 91% { opacity: 0; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 99% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut180DegPopIn { 0% { opacity: 1; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 90% { opacity: 0; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 91% { opacity: 0; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 99% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut0DegPopIn { 0% { opacity: 1; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 90% { opacity: 0; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 91% { opacity: 0; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 99% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut0DegPopIn { 0% { opacity: 1; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 90% { opacity: 0; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 91% { opacity: 0; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 99% { opacity: 0; } 100% { opacity: 1; } } #js-course-mount .menu-dropdown-wrapper { font-size: 14px; line-height: 14px; position: relative; } #js-course-mount .modal-wrapper .create-collection-container, #js-course-mount .modal-wrapper .edit-collection-container { width: 100%; } #js-course-mount .is-fetching-gif { max-width: 18px; float: right; } #js-course-mount .title-card .menu-dropdown-wrapper { margin: -7px -7px 0 15px; } #js-course-mount .title-card.title-cards-large .menu-dropdown-wrapper { display: inline-block; margin: -7px 10px 0 15px; } @media (max-width: 540px) { #js-course-mount .title-card.title-cards-large .menu-dropdown-wrapper { margin:-7px -3px 0 15px; } } #js-course-mount .menu-control { width: 65px; float: right; margin: 7px 0 0; } #js-course-mount .menu-control li { background-color: #fff; border: 1px solid #777; display: inline-block; float: left; height: 30px; position: relative; width: 30px; } #js-course-mount .menu-control li.caret, #js-course-mount .menu-control li.control.caret a { border-left: none; } #js-course-mount .menu-control li img.queue-spinner { max-width: 100%; min-width: 0; height: auto; width: 20px; position: absolute; top: 4px; left: 4px; } #js-course-mount .menu-control li .menu-caret, #js-course-mount .menu-control li .rec-fav { background-color: transparent; float: left; height: 26px; margin: 1px 0 0 1px; padding: 6px 8px; width: 26px; } #js-course-mount .menu-control li .rec-fav { color: #070707; } #js-course-mount .menu-control li .rec-fav:hover { color: #d3002d; } #js-course-mount .menu-control li .menu-caret { width: 27px; border: none; } #js-course-mount .menu-control li .menu-caret .is-fetching-gif { position: absolute; right: 5px; top: 5px; } #js-course-mount .menu-control li .rec-fav.error:before { content: url(http://cdn.oreillystatic.com/static/svg/icon--error.a8bcdce2e839.svg); } #js-course-mount .menu-control li .rec-fav:before { position: absolute; left: 8px; top: 9px; } #js-course-mount .menu-control li.control-disabled { border-color: #bcbcbc; } #js-course-mount .menu-control li.control-disabled button { color: #bcbcbc; background: #fff!important; } #js-course-mount .menu-control li.control-disabled button svg { fill: #bcbcbc; } #js-course-mount .menu-caret svg { position: absolute; top: 12px; right: 8px; width: 12px; -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); fill: #070707; } #js-course-mount .menu-caret.animate svg { animation-name: fadeOut0DegPopIn; animation-duration: .3s; } #js-course-mount .menu-caret.opened svg { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #js-course-mount .menu-caret.opened.animate svg { animation-name: fadeOut180DegPopIn; animation-duration: .3s; } #js-course-mount .menu-dropdown-wrapper .tooltip { position: absolute; top: 45px; color: #FFF; opacity: 1; } #js-course-mount .menu-dropdown-wrapper .tooltip.top-left { left: 5px; } #js-course-mount .menu-dropdown-wrapper .tooltip.top-right { right: 10px; } #js-course-mount .menu-dropdown-wrapper .tooltip.top-right.queue-tooltip { right: 40px; } #js-course-mount .menu-dropdown-wrapper .tooltip.top-left.collections-tooltip { left: 40px; } #js-course-mount .menu-dropdown-wrapper .tooltip.top-right.error-tooltip { right: 26px; } #js-course-mount .menu-dropdown-wrapper.align-right .menu-dropdown-region, #js-course-mount .tooltip.bottom-right .tooltip-arrow, #js-course-mount .tooltip.top-right .tooltip-arrow { right: 5px; } #js-course-mount .menu-dropdown-wrapper .tooltip.top-left.error-tooltip { left: 26px; } #js-course-mount .menu-dropdown-wrapper .tooltip .tooltip-arrow { top: -5px; transform: rotate(180deg); } #js-course-mount .menu-dropdown-region { width: 280px; background-color: #f6f6f6; position: absolute; top: 40px; -moz-box-shadow: 0 2px 5px #aaa; -webkit-box-shadow: 0 2px 5px #aaa; box-shadow: 0 2px 5px #aaa; border: 1px solid #EEE; z-index: 99; } #js-course-mount .dropdown-item svg { position: relative; top: -3px; } #js-course-mount .dropdown-item.is-fetching { background-color: #F5F5F5; } #js-course-mount .dropdown-item.is-fetching a { opacity: .5; } #js-course-mount .dropdown-item.error svg { top: 1px; } #js-course-mount .dropdown-item.border-top { border-top: 1px solid #D1D1D1; } #js-course-mount .actions a.dropdown-item.error { color: #ea6d60; } #js-course-mount .menu-dropdown-wrapper .menu-dropdown-region li a { display: block; padding: 0 15px; line-height: 35px; text-align: left; color: #1d2225!important; position: relative; font-size: 16px; } #js-course-mount .menu-dropdown-region li a:hover { color: #1d2225; background-color: #EDEDED; } #js-course-mount .menu-dropdown-region li a:active, #js-course-mount .menu-dropdown-region li a:focus, #js-course-mount .menu-dropdown-region li a:hover, #js-course-mount .menu-dropdown-region li a:visited { text-decoration: none; } #js-course-mount .menu-dropdown-region .item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 234px; } #js-course-mount .menu-dropdown-region .dropdown-item a { padding-right: 30px; } #js-course-mount .menu-dropdown-region li a .is-fetching-gif, #js-course-mount .menu-dropdown-region li a svg, #js-course-mount .menu-dropdown-region li a.error svg { position: absolute; right: 5px; top: 7px; } #js-course-mount .menu-dropdown-region li a.error svg { top: 11px; } #js-course-mount .menu-dropdown-region li a .loading-icon { position: absolute; right: 3px; top: 6px; display: none; } #js-course-mount .menu-dropdown-region li a .loading-icon img { width: 20px; height: 20px; } #js-course-mount .collections-dropdown.condensed .menu-control { width: 40px; margin-top: 2px; } #js-course-mount .collections-dropdown.condensed .menu-control>li { background-color: transparent; width: 20px; border: none; padding: 0; } #js-course-mount .js-playlist-icon, #js-course-mount .js-playlist-icon:disabled, #js-course-mount .js-playlist-icon:disabled:focus, #js-course-mount .js-playlist-icon:disabled:hover { background-color: transparent!important; } #js-course-mount .collections-dropdown.condensed .menu-dropdown-wrapper .tooltip { top: 30px; } #js-course-mount .collections-dropdown.condensed .menu-dropdown-wrapper .tooltip.top-right { right: 0; } #js-course-mount .collections-dropdown.condensed .menu-dropdown-wrapper .tooltip.top-right.queue-tooltip { right: 14px; } #js-course-mount .collections-dropdown.condensed .tooltip.top-left.collections-tooltip { left: 19px; } #js-course-mount .icon-added-to-playlist-sml g g, #js-course-mount .js-playlist-icon:hover .icon-add-to-playlist-sml g g { fill: #d3002d; } #js-course-mount .js-playlist-icon { position: relative; width: 18px; height: 30px; border: none!important; outline: 0!important; overflow: visible; } #js-course-mount .js-playlists-menu { position: relative; bottom: 10px; right: 7px; } #js-course-mount .top-right.playlist-tooltip { top: 38px!important; right: 4px!important; } #js-course-mount .top-left.playlist-tooltip { left: 7px!important; } #js-course-mount .collections-dropdown.condensed .js-playlists-menu { bottom: auto; right: auto; } #js-course-mount .collections-dropdown.condensed .js-playlist-icon { top: 0; left: 5px; height: 30px; } #js-course-mount .collections-dropdown.condensed .icon-add-to-playlist-sml, #js-course-mount .collections-dropdown.condensed .icon-added-to-playlist-sml { right: 12px; bottom: 0; margin-bottom: 8px; } @media (min-width: 800px) { #js-course-mount .collections-dropdown.condensed .icon-add-to-playlist-sml, #js-course-mount .collections-dropdown.condensed .icon-added-to-playlist-sml { right:6px ; } } #js-course-mount .search-page .js-playlist-icon { top: -12px; left: 40px; } #js-course-mount .js-tutorial-module.js-dashboard-module .js-playlist-icon { top: 8px; left: 20px; width: 40px; } #js-course-mount .title-info .js-playlist-icon { top: -2px; left: 3px; } #js-course-mount .js-new-in-topics .js-playlist-icon { top: 2px; left: -1px; } #js-course-mount .tutorial-cards .js-playlist-icon { top: 12px; left: 55px; } #js-course-mount .publisher-titles .js-playlist-icon { top: -3px; left: 12px; } #js-course-mount .icon-add-to-playlist-sml, #js-course-mount .icon-added-to-playlist-sml { position: absolute; bottom: 1px; right: 8px; width: 16px; height: 14px; } #js-course-mount .recent-items-container .js-playlist-icon .icon-add-to-playlist-sml, #js-course-mount .recent-items-container .js-playlist-icon .icon-added-to-playlist-sml { right: 8px; bottom: 1px; } #js-course-mount .dashboard__module__card-container .js-playlist-icon { top: 7px; left: -14px; width: 55px; } #js-course-mount .dashboard__module__card-array>div .card--mini-card .playlist-tooltip .tooltip-inner, #js-course-mount .recommendations-container .title-cards .playlist-tooltip .tooltip-inner { margin: 0 -110px 0 0; } #js-course-mount .dashboard__module__card-array .card--mini-card .icon-add-to-playlist-sml, #js-course-mount .dashboard__module__card-array .card--mini-card .icon-added-to-playlist-sml, #js-course-mount .recommendations-container .icon-add-to-playlist-sml, #js-course-mount .recommendations-container .icon-added-to-playlist-sml { right: 12px; bottom: 14px; width: 14px; height: 12px; } #js-course-mount .recommendations-container .js-playlist-icon { top: 14px; left: -20px; width: 55px; } #js-course-mount .dashboard__module__card-array .card--mini-card .js-playlist-addto-label, #js-course-mount .recommendations-container .js-playlist-addto-label { font-size: 11.2px; text-align: center; padding-top: 7px; display: inherit; left: -2px; position: relative; bottom: 1px; } #js-course-mount .js-playlist-addto-label:hover { color: #d3002d; } #js-course-mount .js-playlist-addto-label { display: none; text-transform: none; font-weight: 400; letter-spacing: normal; color: #070707; white-space: nowrap; width: 50px; } #js-course-mount .library-no-content .icon-add-to-playlist-sml { position: static; } #js-course-mount .svg-hexagon-design { display: none; } #js-course-mount .js-playlist-icon { top: 3px; left: -10px; } #js-course-mount .js-title-detail-page .tooltip.top-left.playlist-tooltip { right: unset!important; } #js-course-mount .title-hover.playlists-enabled { right: -22px!important; } #js-course-mount .card-hover-actions.playlists-enabled .button.card-button.js-start { left: 10px; } #js-course-mount .card-hover-actions.playlists-enabled .js-collections-dropdown { right: -27px; position: absolute; } #js-course-mount .title-hover.playlists-not-enabled .title-add-to-queue.js-queue { right: 15px; bottom: 10px; position: absolute; } #js-course-mount .library-content .js-playlist-icon, #js-course-mount .recent-items-container .js-playlist-icon { top: 3px; left: 7px; } @media screen and (max-width: 580px) { #js-course-mount .library-content .js-playlist-icon { top:3px; left: 18px; } #js-course-mount .recent-items-container .js-playlist-icon { top: 3px; left: 12px; } } #js-course-mount .gridt { display: table; } #js-course-mount .gridt .gridtc { display: table-cell; } #js-course-mount .gridx .griditem { vertical-align: top; } #js-course-mount .gridx .gridblock, #js-course-mount .gridx .griditem { display: block; margin-bottom: 1em; text-align: left; font-size: 16px; } @media only screen and (min-width: 600px) { #js-course-mount .gridx .gridblock, #js-course-mount .gridx .griditem { display:inline-block; vertical-align: top; } } #js-course-mount .gridx { font-size: .1px; width: 100%; } #js-course-mount .gridx:after { content: ''; display: inline-block; width: 100%; } #js-course-mount #billing_form select, #js-course-mount .search-result-page .facets select, #js-course-mount .user-profile .annotation-list .filter-highlights { display: inline-block; vertical-align: middle; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; appearance: none; background: url(http://cdn.oreillystatic.com/static/images/select-arrows.71862dd7534a.svg) right center no-repeat #FFF; margin-bottom: .625rem; padding: .1875rem 1.25rem .25rem .3125rem; border: 1px solid #ddd; min-width: 70px; min-width: 4.375rem; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; font-size: 14px; font-size: .875rem; color: #777; text-overflow: ellipsis; cursor: pointer; -moz-box-shadow: 0 1px 0 0 rgba(0,0,0,.05); -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,.05); -o-box-shadow: 0 1px 0 0 rgba(0,0,0,.05); box-shadow: 0 1px 0 0 rgba(0,0,0,.05); } #js-course-mount #billing_form .error select, #js-course-mount .error #billing_form select, #js-course-mount .error .search-result-page .facets select, #js-course-mount .error .user-profile .annotation-list .filter-highlights, #js-course-mount .search-result-page .facets .error select, #js-course-mount .user-profile .annotation-list .error .filter-highlights { border: 1px solid #ea6d60; } #js-course-mount #billing_form select:active, #js-course-mount #billing_form select:focus, #js-course-mount .search-result-page .facets select:active, #js-course-mount .search-result-page .facets select:focus, #js-course-mount .user-profile .annotation-list .filter-highlights:active, #js-course-mount .user-profile .annotation-list .filter-highlights:focus { border: 1px solid #00b3e7; } body.debug:before { display: block; background: red; position: fixed; bottom: 0; left: 0; font-size: 20px; color: #fff; padding: 20px; z-index: 100000000; content: "base"; } @media screen and (min-width: 240px) { body.debug:before { content:"smallest [1]" } } @media screen and (min-width: 20em) { body.debug:before { content:"small [2]" } } @media screen and (min-width: 32.5625em) { body.debug:before { content:"small-medium [3]" } } @media screen and (min-width: 41.9375em) { body.debug:before { content:"medium [4]" } } @media screen and (min-width: 56.25em) { body.debug:before { content:"medium-large [5]" } } @media screen and (min-width: 49.4375em) { body.debug:before { content:"large [6]" } } @media screen and (min-width: 50.6875em) { body.debug:before { content:"large-larger [7]" } } @media screen and (min-width: 69em) { body.debug:before { content:"larger [8]" } } @media screen and (min-width: 78.125em) { body.debug:before { content:"larger-largest [9]" } } @media screen and (min-width: 100.0625em) { body.debug:before { content:"largest [10]" } } #js-course-mount * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #js-course-mount body { position: relative; min-height: 100%; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; background-color: #f5f5f5; color: #070707; margin: 0; } #js-course-mount #container { width: 100%; max-width: 100.0625em; height: auto; margin: 0 auto; padding: 0 20px; } #js-course-mount header#lead { padding: 5px 0 10px; } #js-course-mount header#lead:after,header#lead:before { content: " "; display: table; } #js-course-mount header#lead #page-title { display: inline-block; margin: 0; padding-top: 10px; word-wrap: break-word; color: #404040; font: 300 36px oreilly-urw-typewriter-narro,monospace,serif; } #js-course-mount header .searchbox { position: absolute; left: 0; } @media screen and (min-width: 32.5625em) { #js-course-mount header .searchbox { position:static; margin: 12px 0 0; float: none; } } @media screen and (min-width: 50.6875em) { #js-course-mount header#lead { min-height:64px; } #js-course-mount header .searchbox { float: right; } } #js-course-mount article>h2 { margin: 1.25rem 2.625rem 1rem; text-transform: uppercase; font-weight: 700; color: #777; font-size: 18px; font-size: 1.125rem; } article>section#js-course-mount { margin-bottom: 20px; } article>section#js-course-mount.callout p { margin: 0; } @media screen and (max-width: 32.5em) { #js-course-mount article .pad { margin:.3125rem .9375rem; } } @media screen and (min-width: 31.25em) { #js-course-mount .user-anon article { display:block; } } #js-course-mount .grid { position: relative; } #js-course-mount .grid:after, #js-course-mount .grid:before { content: " "; display: table; } @media (min-width: 768px) { #js-course-mount .grid { max-width:1200px; margin: 0 auto; font-size: 0; } #js-course-mount [class*=col-] { display: inline-block; font-size: 16px; line-height: 1.5em; vertical-align: top; padding-right: 20px; } #js-course-mount .grid [class*=col-]:last-of-type { padding-right: 0; } #js-course-mount .col-2-3 { width: 66.66%; } #js-course-mount .col-1-3 { width: 33.33%; } #js-course-mount .col-3-4 { width: 75%; } #js-course-mount .col-1-2 { width: 50%; } #js-course-mount .col-1-4 { width: 25%; } #js-course-mount .col-1-8 { width: 12.5%; } #js-course-mount .module { padding: 20px; } #js-course-mount .grid-pad { padding: 20px 0 20px 20px; } #js-course-mount .grid-pad [class*=col-]:last-of-type { padding-right: 20px; } } #js-course-mount .orm-topbar { display: block; width: 100%; max-height: 26px; padding: 1px 20px 0 10px; font-size: 13px; line-height: 26px; background: #b9002d; } #js-course-mount .orm-topbar svg { width: 78px; height: 13px; margin-top: 6px; fill: #fff; } @media screen and (min-height: 26.25em) and (min-width:32.5625em) { #js-course-mount .orm-topbar { position:fixed; top: 0; left: 0; z-index: 9; } #js-course-mount .user-anon .orm-topbar { position: static; } } #js-course-mount html:hover [class^=ss-] { -ms-zoom:1} #js-course-mount [class*=ss-] span { display: none; } #js-course-mount .ss-icon, #js-course-mount .ss-icon.ss-flow,[class*=" ss-"].right:after,[class*=" ss-"].ss-flow.right:after,[class*=" ss-"].ss-flow:before,[class*=" ss-"]:before,[class^=ss-].right:after,[class^=ss-].ss-flow.right:after,[class^=ss-].ss-flow:before,[class^=ss-]:before { font-family: SSFlow; font-style: normal; font-weight: 400; text-decoration: none; white-space: nowrap; -webkit-font-smoothing: antialiased; } #js-course-mount .progress, #js-course-mount .topic-display li,a.skip:active,a.skip:focus,a.skip:hover { -webkit-font-smoothing: subpixel-antialiased; } #js-course-mount [class*=" ss-"].right:before,[class^=ss-].right:before { display: none; content: ''; } #js-course-mount .ss-flow.right:after, #js-course-mount .ss-flow:before { content: '\f700'; } #js-course-mount .ss-hexfill.right:after, #js-course-mount .ss-hexfill:before { content: '\f701'; } #js-course-mount .ss-hexbase.right:after, #js-course-mount .ss-hexbase:before { content: '\f702'; } #js-course-mount .ss-hextri.right:after, #js-course-mount .ss-hextri:before { content: '\f703'; } #js-course-mount .ss-hexlined.right:after, #js-course-mount .ss-hexlined:before { content: '\f704'; } #js-course-mount .ss-queue.right:after, #js-course-mount .ss-queue:before { content: '\f709'; } #js-course-mount .ss-book.right:after, #js-course-mount .ss-book:before { content: '📕'; } #js-course-mount .ss-search.right:after, #js-course-mount .ss-search:before { content: '🔎'; } #js-course-mount .ss-link.right:after, #js-course-mount .ss-link:before { content: '🔗'; } #js-course-mount .ss-write.right:after, #js-course-mount .ss-write:before { content: '\270e'; } #js-course-mount .ss-compose.right:after, #js-course-mount .ss-compose:before { content: '📝'; } #js-course-mount .ss-lock.right:after, #js-course-mount .ss-lock:before { content: '🔒'; } #js-course-mount .ss-unlock.right:after, #js-course-mount .ss-unlock:before { content: '🔓'; } #js-course-mount .ss-ban.right:after, #js-course-mount .ss-ban:before { content: '🚫'; } #js-course-mount .ss-tag.right:after, #js-course-mount .ss-tag:before { content: '\e100'; } #js-course-mount .ss-star.right:after, #js-course-mount .ss-star:before { content: '\22c6'; } #js-course-mount .ss-picks.right:after, #js-course-mount .ss-picks:before { content: '\f705'; } #js-course-mount .ss-user.right:after, #js-course-mount .ss-user:before { content: '👤'; } #js-course-mount .ss-femaleuser.right:after, #js-course-mount .ss-femaleuser:before { content: '👧'; } #js-course-mount .ss-users.right:after, #js-course-mount .ss-users:before { content: '👥'; } #js-course-mount .ss-volume.right:after, #js-course-mount .ss-volume:before { content: '🔈'; } #js-course-mount .ss-highvolume.right:after, #js-course-mount .ss-highvolume:before { content: '🔊'; } #js-course-mount .ss-video.right:after, #js-course-mount .ss-video:before { content: '📹'; } #js-course-mount .ss-play.right:after, #js-course-mount .ss-play:before { content: '\25b6'; } #js-course-mount .ss-pause.right:after, #js-course-mount .ss-pause:before { content: '\e8a0'; } #js-course-mount .ss-rewind.right:after, #js-course-mount .ss-rewind:before { content: '\23ea'; } #js-course-mount .ss-fastforward.right:after, #js-course-mount .ss-fastforward:before { content: '\23e9'; } #js-course-mount .ss-skipback.right:after, #js-course-mount .ss-skipback:before { content: '\23ee'; } #js-course-mount .ss-skipforward.right:after, #js-course-mount .ss-skipforward:before { content: '\23ed'; } #js-course-mount .ss-replay.right:after, #js-course-mount .ss-replay:before { content: '\21ba'; } #js-course-mount .ss-refresh.right:after, #js-course-mount .ss-refresh:before { content: '\21bb'; } #js-course-mount .ss-sync.right:after, #js-course-mount .ss-sync:before { content: '\eb82'; } #js-course-mount .ss-list.right:after, #js-course-mount .ss-list:before { content: '\ed50'; } #js-course-mount .ss-fontsize.right:after, #js-course-mount .ss-fontsize:before { content: '\f706'; } #js-course-mount .ss-highlights.right:after, #js-course-mount .ss-highlights:before { content: '\f707'; } #js-course-mount .ss-check.right:after, #js-course-mount .ss-check:before { content: '\2713'; } #js-course-mount .ss-delete.right:after, #js-course-mount .ss-delete:before { content: '\2421'; } #js-course-mount .ss-recent.right:after, #js-course-mount .ss-recent:before { content: '\f708'; } #js-course-mount .ss-settings.right:after, #js-course-mount .ss-settings:before { content: '\2699'; } #js-course-mount .ss-up.right:after, #js-course-mount .ss-up:before { content: '\2b06'; } #js-course-mount .ss-right.right:after, #js-course-mount .ss-right:before { content: '\27a1'; } #js-course-mount .ss-down.right:after, #js-course-mount .ss-down:before { content: '\2b07'; } #js-course-mount .ss-left.right:after, #js-course-mount .ss-left:before { content: '\2b05'; } #js-course-mount .ss-navigateup.right:after, #js-course-mount .ss-navigateup:before { content: '\f500'; } #js-course-mount .ss-navigateright.right:after, #js-course-mount .ss-navigateright:before { content: '\25bb'; } #js-course-mount .ss-navigatedown.right:after, #js-course-mount .ss-navigatedown:before { content: '\f501'; } #js-course-mount .ss-navigateleft.right:after, #js-course-mount .ss-navigateleft:before { content: '\25c5'; } #js-course-mount .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; } #js-course-mount .popup.fadeout { -moz-transition: opacity .15s ease-in-out; -webkit-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } #js-course-mount .popup.fadeout.closed { opacity: 0; } #js-course-mount .popup .headline { border-bottom: 1px solid #CCC; padding: .375rem 0; } #js-course-mount .popup .headline h2 { color: #777; margin: 0; padding: .625rem; } #js-course-mount .popup .popup-content { color: #777; padding: .625rem .9375rem; } #js-course-mount button,input,select,textarea { font-family: inherit; font-size: 100%; margin: 0; } #js-course-mount button,input { line-height: normal; } #js-course-mount button,html input[type=button],input[type=reset],input[type=submit] { -webkit-appearance: button; cursor: pointer; } #js-course-mount button[disabled],input[disabled] { cursor: default; } #js-course-mount label { display: block; font-size: 14px; font-size: .875rem; text-transform: None; color: #404040; margin: 1rem 0 .5rem; } #js-course-mount label .note { text-transform: capitalize; letter-spacing: 0; font-size: smaller; } #js-course-mount strong { font-weight: 700; } #js-course-mount .add-members-fake-field, #js-course-mount input[type=text], #js-course-mount input[type=email], #js-course-mount input[type=password], #js-course-mount textarea { background-color: rgba(244,243,240,.5); border: 1px solid rgba(118,118,118,.35); font-size: 18px; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; margin-bottom: .625rem; padding: .5em; min-width: 12em; width: 100%; max-width: 15em; color: #070707; } #js-course-mount .error .add-members-fake-field, #js-course-mount .error input[type=text], #js-course-mount .error input[type=email], #js-course-mount .error input[type=password], #js-course-mount .error textarea { border: 1px solid #ea6d60; } #js-course-mount .ie8 .add-members-fake-field, #js-course-mount .ie8 input[type=text], #js-course-mount .ie8 input[type=email], #js-course-mount .ie8 input[type=password], #js-course-mount .ie8 textarea { font-family: sans-serif; } #js-course-mount .django-messages, #js-course-mount .feedback .text, #js-course-mount .tooltip,a.l0,a.l1,a.l2,a.skip:active,a.skip:focus,a.skip:hover { font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; } #js-course-mount input:read-only { border-color: #e6e6e6; } #js-course-mount #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) { #js-course-mount .half-field { max-width:48%; } #js-course-mount .half-field.right { float: right; } #js-course-mount .half-field.left { float: left; } } #js-course-mount .sales-form.user-anon article form .left,label[for=id_card_number] { float: left; } #js-course-mount ul.credit-cards { position: relative; z-index: 1; font-weight: 400; } #js-course-mount ul.credit-cards .tooltip .tooltip-inner { max-width: 250px; width: 250px; white-space: normal; } @media screen and (max-width: 53.75em) { #js-course-mount ul.credit-cards .tooltip .tooltip-inner { max-width:200px; width: 200px; } } #js-course-mount ul.credit-cards li { display: inline-block; text-indent: -99999px; width: 40px; height: 25px; margin-right: 10px; opacity: .7; } #js-course-mount ul.credit-cards li.mastercard { background: url(http://cdn.oreillystatic.com/static/images/mastercard.aabfdb51fb69.png) no-repeat; } #js-course-mount ul.credit-cards li.discover { background: url(http://cdn.oreillystatic.com/static/images/discover.8f80db8aa5dd.png) no-repeat; } #js-course-mount ul.credit-cards li.visa { background: url(http://cdn.oreillystatic.com/static/images/visa.29cc60580576.png) no-repeat; } #js-course-mount ul.credit-cards li.amex { background: url(http://cdn.oreillystatic.com/static/images/amex.c32c7347ef6e.png) no-repeat; } #js-course-mount ul.credit-cards li:focus,ul.credit-cards li:hover { opacity: .9; } #js-course-mount textarea { width: 100%; min-height: 7em; max-width: 30em; font-size: 16px; } #js-course-mount .agreement-inc label, #js-course-mount .pod { font-size: 14px; } #js-course-mount input+small,select+small { display: block; margin: .5em 0!important; } #js-course-mount .agreement-inc input[type=checkbox]+small { display: inline; } #js-course-mount input.error { border: 1px solid #ea6d60; background-color: #fbe1de; } #js-course-mount input.ok { border: 1px solid #008542; background-color: #fff; } #js-course-mount small.ok { color: #d3002d; } #js-course-mount .form-row.error .errorlist,small.error { color: #ea6d60; } #js-course-mount #id_username { text-transform: lowercase; } #js-course-mount #id_username::-webkit-input-placeholder { text-transform: none; } #js-course-mount #id_username:-moz-placeholder { text-transform: none; } #js-course-mount #id_username::-moz-placeholder { text-transform: none; } #js-course-mount #id_username:-ms-input-placeholder { text-transform: none; } #js-course-mount input#id_username:-ms-input-placeholder, input#id_username::-moz-placeholder, input#id_username::-webkit-input-placeholder { text-transform: capitalize; } #js-course-mount .articlelist>li .controls .format-title, #js-course-mount .articlelist>li .position-link, #js-course-mount .button-orm, #js-course-mount .pod h3, #js-course-mount h3 { text-transform: uppercase; } #js-course-mount .form-row.error .errorlist li { margin: .5em 0; } #js-course-mount .sales-form.user-authenticated .page-head { display: none; } #js-course-mount .sales-form.user-anon { background-color: #f6f6f6; } #js-course-mount .sales-form.user-anon header[role=banner] { border-bottom: 1px solid #DDD; } #js-course-mount .sales-form.user-anon article, #js-course-mount .sales-form.user-anon footer { background: no-repeat; } #js-course-mount .link-to-markdown, #js-course-mount .pod, #js-course-mount .sf-cvv .cvv-help { background-clip: padding-box; } #js-course-mount .sales-form.user-anon article header { border-bottom: 1px solid #DDD; text-align: center; padding-bottom: .625rem; } #js-course-mount .sales-form.user-anon article .intro { text-align: center; } #js-course-mount .sales-form.user-anon article form { padding: 0 8.125rem 1.25rem; } #js-course-mount .sales-form.user-anon article form .left, #js-course-mount .sales-form.user-anon article form .right { display: inline-block; width: 48%; margin-bottom: .625rem; } #js-course-mount .sales-form.user-anon article form .right { float: right; } #js-course-mount .sales-form.user-anon article form input { padding: .5em; } #js-course-mount .sales-form.user-anon article form input[type=submit] { padding: 1rem 1.5625rem; margin: 1.875rem 0 1.5625rem; } #js-course-mount .sales-form.user-anon .pod { margin: 36px auto; max-width: 820px; max-width: 51.25rem; } @media screen and (max-width: 51.1875em) { #js-course-mount .sales-form.user-anon .pod { margin-right:10px; margin-left: 10px} #js-course-mount .sales-form.user-anon article form { padding: 0 5rem 1.25rem} #js-course-mount .sales-form.user-anon article form textarea { max-width: 100%; } } @media screen and (max-width: 51.1875em) and (max-width:45em) { #js-course-mount .sales-form.user-anon article form { padding:0 1.25rem 1.25rem} #js-course-mount .sales-form.user-anon article form .left, #js-course-mount .sales-form.user-anon article form .right { width: 100%; } } #js-course-mount .sf-cvv { position: relative; min-width: 95px; width: 100%; max-width: 100px; } #js-course-mount .sf-cvv .tooltip-inner { max-width: 300px; width: 300px; white-space: normal; } #js-course-mount .sf-cvv .cvv-help { position: absolute; right: 6px; bottom: 21px; padding-top: 1px; background-color: #777; color: #fff; -webkit-border-radius: 2px; border-radius: 2px; width: 20px; height: 20px; font-weight: 700; text-align: center; } #js-course-mount .sf-ccnum, #js-course-mount .sf-country, #js-course-mount .sf-cvv, #js-course-mount .sf-zip { display: inline-block; vertical-align: top; } #js-course-mount .sf-ccnum, #js-course-mount .sf-zip { max-width: 18em; width: 100%; } #js-course-mount .sf-additional-info textarea, #js-course-mount textarea.add-members { max-width: 100%; } #js-course-mount .agreement-inc label input { float: left; display: inline-block; margin: 10px 10px 0 0; } @media screen and (min-width: 20em) { #js-course-mount .sf-ccnum, #js-course-mount .sf-zip { margin-right:1em; } } @media screen and (min-width: 32.5625em) { #js-course-mount .form-row:after, #js-course-mount .form-row:before { content:" "; display: table; } #js-course-mount .form-row:after { clear: both; } #js-course-mount .sf-ccnum, #js-course-mount .sf-cvv { display: inline-block; vertical-align: top; } #js-course-mount .sf-ccnum { margin-right: 1em; } } #js-course-mount .clearfix:after, #js-course-mount .clearfix:before { content: " "; display: table; } #js-course-mount a:link, #js-course-mount a:visited { color: #d3002d; text-decoration: none; } #js-course-mount a:link.gray-link:focus, #js-course-mount a:link.gray-link:hover, #js-course-mount a:link:focus, #js-course-mount a:link:hover, #js-course-mount a:visited.gray-link:focus, #js-course-mount a:visited.gray-link:hover, #js-course-mount a:visited:focus, #js-course-mount a:visited:hover { color: #9f0027; text-decoration: underline; /*border-bottom: 1px solid #9f0027;*/} #js-course-mount a:link.gray-link, #js-course-mount a:visited.gray-link { text-decoration: underline; color: rgba(64,64,64,.75); } #js-course-mount a { -moz-transition: color .2s ease-out; -webkit-transition: color .2s ease-out; -o-transition: color .2s ease-out; transition: color .2s ease-out; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a span, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a span, #js-course-mount .social-sharing a span, #js-course-mount .visuallyhidden { border: 0; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:active, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:focus, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:active, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a span.focusable:focus, #js-course-mount .social-sharing a span.focusable:active, #js-course-mount .social-sharing a span.focusable:focus, #js-course-mount .visuallyhidden.focusable:active, #js-course-mount .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } #js-course-mount .hidden { display: none; } #js-course-mount form input.error,form textarea.error { border: 1px solid #ea6d60; background-color: #fae0de; } #js-course-mount .pod { margin: 0 0 1.25rem; padding: 1rem; background-color: #fff; font-size: .875rem; line-height: 19px; line-height: 1.1875rem; -webkit-border-radius: 2px; border-radius: 2px; } #js-course-mount .pod header h1 { margin-top: 0; } #js-course-mount .pod header h1.trial { color: #ea6d60; } #js-course-mount .pod h3, #js-course-mount h3, #js-course-mount h4 { color: #777; } #js-course-mount .pod h2 { font-size: 18px; } #js-course-mount h1, #js-course-mount h2 { font-weight: 400; color: #404040; } #js-course-mount .display-markdown ol, #js-course-mount .display-markdown ul { margin: 0 0 0 30px; } #js-course-mount .display-markdown ol li, #js-course-mount .display-markdown ul li { margin: 5px 0!important; list-style-type: disc; } #js-course-mount .display-markdown ol li { list-style-type: lower-alpha; } #js-course-mount .display-markdown blockquote { border-left: 1px solid #e98300; padding-left: 10px; margin: 10px; } #js-course-mount p, #js-course-mount ul { padding: 0; } #js-course-mount 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) { #js-course-mount.section-header { margin-left:15px; } } #js-course-mount h3, #js-course-mount p { font-size: 18px; margin: 1.125rem 0; } #js-course-mount h2 { font-size: 24px; font-size: 1.5rem; margin: 1.25rem 0; } #js-course-mount h3 { font-weight: 400; letter-spacing: 1px; font-size: 1.125rem; } #js-course-mount h4 { font-weight: 400; margin: 1.3125rem 0; } #js-course-mount p { line-height: 1.4em; font-size: 1.125rem; } #js-course-mount small { font-size: 14px; font-size: .875rem; } #js-course-mount .link-to-markdown { padding: 1px 8px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid #bbb; float: right; } #js-course-mount .bigbutton, #js-course-mount .button, #js-course-mount .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); } #js-course-mount .autocomplete-suggestions b, #js-course-mount .button-orm, #js-course-mount .gen-nav, #js-course-mount .gen-nav a, #js-course-mount .mknav li a, #js-course-mount .tooltip { font-weight: 700; } #js-course-mount .bigbutton.disabled, #js-course-mount .bigbutton:disabled, #js-course-mount .bigbutton:disabled:focus, #js-course-mount .bigbutton:disabled:hover, #js-course-mount .button-primary.disabled, #js-course-mount .button-primary:disabled, #js-course-mount .button-primary:disabled:focus, #js-course-mount .button-primary:disabled:hover, #js-course-mount .button.disabled, #js-course-mount .button:disabled, #js-course-mount .button:disabled:focus, #js-course-mount .button:disabled:hover, #js-course-mount a.bigbutton.disabled, #js-course-mount a.bigbutton:disabled, #js-course-mount a.bigbutton:disabled:focus, #js-course-mount a.bigbutton:disabled:hover, #js-course-mount a.button-primary.disabled, #js-course-mount a.button-primary:disabled, #js-course-mount a.button-primary:disabled:focus, #js-course-mount a.button-primary:disabled:hover, #js-course-mount a.button.disabled, #js-course-mount a.button:disabled, #js-course-mount a.button:disabled:focus, #js-course-mount a.button:disabled:hover, #js-course-mount button.button-primary.disabled, #js-course-mount button.button-primary:disabled, #js-course-mount button.button-primary:disabled:focus, #js-course-mount button.button-primary:disabled:hover, #js-course-mount button.disabled, #js-course-mount button:disabled, #js-course-mount button:disabled:focus, #js-course-mount button:disabled:hover, #js-course-mount input[type=reset].disabled, #js-course-mount input[type=reset]:disabled, #js-course-mount input[type=reset]:disabled:focus, #js-course-mount input[type=reset]:disabled:hover, #js-course-mount input[type=submit].disabled, #js-course-mount input[type=submit]:disabled, #js-course-mount input[type=submit]:disabled:focus, #js-course-mount input[type=submit]:disabled:hover { color: #ccc!important; background-color: #f5f5f5!important; border-color: #ccc!important; cursor: default; } #js-course-mount .button, #js-course-mount a.button, #js-course-mount button { color: #404040; background: #fff; border: 1px solid #777; } #js-course-mount .button.active, #js-course-mount .button:focus, #js-course-mount .button:hover, #js-course-mount a.button.active, #js-course-mount a.button:focus, #js-course-mount a.button:hover, #js-course-mount button.active, #js-course-mount button:focus, #js-course-mount button:hover { color: #d3002d; background: #fff; border-color: #d3002d; text-decoration: none; } #js-course-mount .button-primary, #js-course-mount a.button-primary, #js-course-mount button.button-primary, #js-course-mount input[type=reset], #js-course-mount input[type=submit] { color: #404040; background-color: #F5C517; border: 1px solid #F5C517; } #js-course-mount .button-primary:focus, #js-course-mount .button-primary:hover, #js-course-mount a.button-primary:focus, #js-course-mount a.button-primary:hover, #js-course-mount button.button-primary:focus, #js-course-mount button.button-primary:hover, #js-course-mount input[type=reset]:focus, #js-course-mount input[type=reset]:hover, #js-course-mount input[type=submit]:focus, #js-course-mount input[type=submit]:hover { color: #404040; background-color: #E8BA16; border-color: #E8BA16; text-decoration: none; } #js-course-mount .button-orm { padding: 6px 15px; letter-spacing: 1.4px; font-size: 12px; text-align: center; border: 1px solid #c7c1b4; background: #fff; color: #b9002d!important; } #js-course-mount html.no-touch .button-orm:hover { text-decoration: none; color: #fff!important; background: #b9002d; border-color: #b9002d; } #js-course-mount input[type=reset] { min-width: 0; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li, #js-course-mount .social-sharing li { display: inline-block; margin: 0; list-style-type: none; text-align: center; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.twitter, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.twitter, #js-course-mount .social-sharing a.twitter { background: url(http://cdn.oreillystatic.com/static/images/tweet_gray.c3649492e6d1.png) center center no-repeat; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.facebook, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.facebook, #js-course-mount .social-sharing a.facebook { background: url(http://cdn.oreillystatic.com/static/images/fb_gray.3f725069eb2b.png) center center no-repeat; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.googleplus, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.googleplus, #js-course-mount .social-sharing a.googleplus { background: url(http://cdn.oreillystatic.com/static/images/googleplus_gray.1379fcec2ce7.png) center center no-repeat; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.email, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.email, #js-course-mount .social-sharing a.email { background: url(http://cdn.oreillystatic.com/static/images/email_gray.05464fdf00d2.png) center center no-repeat; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotation-card.social-sharing li, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing li, #js-course-mount .annotation-card.social-sharing li, #js-course-mount .button-group.social-sharing li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotation-card.social-sharing li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing li { margin: 10px 10px 0; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button, #js-course-mount .button-group.social-sharing a.share-button, #js-course-mount .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; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; 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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button:focus, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .button-group.social-sharing a.share-button:hover, #js-course-mount .button-group.social-sharing a.share-button:focus, #js-course-mount .button-group.social-sharing a.share-button:hover { background-color: #f5f5f5; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing, #js-course-mount .dropdown-menu.social-sharing, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .interface-controls .social-sharing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #js-course-mount .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; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; background-clip: padding-box; border-right: 1px solid #777; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing li, #js-course-mount .dropdown-menu.social-sharing li, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li, #js-course-mount .interface-controls .social-sharing li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li:first-child, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing li:first-child, #js-course-mount .dropdown-menu.social-sharing li:first-child, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li:first-child, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li:first-child, #js-course-mount .interface-controls .social-sharing li:first-child, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing li:first-child, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing li:first-child { border-left: none; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.twitter, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.twitter, #js-course-mount .dropdown-menu.social-sharing a.twitter, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.twitter, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.twitter, #js-course-mount .interface-controls .social-sharing a.twitter, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.twitter, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.twitter { background-image: url(http://cdn.oreillystatic.com/static/images/tweet.a62814fba328.png); } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.facebook, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.facebook, #js-course-mount .dropdown-menu.social-sharing a.facebook, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.facebook, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.facebook, #js-course-mount .interface-controls .social-sharing a.facebook, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.facebook, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.facebook { background-image: url(http://cdn.oreillystatic.com/static/images/fb.249a5073b401.png); } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.googleplus, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.googleplus, #js-course-mount .dropdown-menu.social-sharing a.googleplus, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.googleplus, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.googleplus, #js-course-mount .interface-controls .social-sharing a.googleplus, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.googleplus, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.googleplus { background-image: url(http://cdn.oreillystatic.com/static/images/googleplus.84ff91fb93fb.png); } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.email, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.email, #js-course-mount .dropdown-menu.social-sharing a.email, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing a.email, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing a.email, #js-course-mount .interface-controls .social-sharing a.email, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing a.email, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing a.email { background-image: url(http://cdn.oreillystatic.com/static/images/email.60ea89b93003.png); } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .active .dropdown-menu.social-sharing, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .active .interface-controls .social-sharing, #js-course-mount .active #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #js-course-mount .active .dropdown-menu.social-sharing, #js-course-mount .active .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .active .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .active .interface-controls .social-sharing, #js-course-mount .active .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .active .dropdown-menu.social-sharing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .active .interface-controls .social-sharing { opacity: 1; visibility: visible; } @media screen and (max-width: 26.25em) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing, #js-course-mount .dropdown-menu.social-sharing, #js-course-mount .interface-controls #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .interface-controls .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .interface-controls .social-sharing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .dropdown-menu.social-sharing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .interface-controls .social-sharing { left:48px; right: 0; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; background-clip: padding-box; border-right: none; border-left: 1px solid #777; } } #js-course-mount .addone { float: right; } @media screen and (max-width: 32.5em) { #js-course-mount .addone { float:left; margin-top: .25rem; } } @media screen and (min-width: 32.5625em) and (min-height:33.6875em) { #js-course-mount body { padding-top:26px; } #js-course-mount body.sidenav { padding-left: 55px; } } #js-course-mount .topbar { background-color: #e6e6e6; } #js-course-mount 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; } #js-course-mount 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: #d3002d; color: #fff; text-align: center; text-decoration: none; font-size: 12px; } #js-course-mount .touch .shortcuts { display: none; } @media screen and (min-width: 32.5em),screen and (max-height:33.75em) { #js-course-mount .topnav .l0 { overflow:hidden; max-width: 190px; } #js-course-mount .nav-collapsed .topnav .l0 { max-width: 55px; } } #js-course-mount .topnav { position: relative; } #js-course-mount .topnav:after, #js-course-mount .topnav:before { content: " "; display: table; } #js-course-mount .topnav>li { float: left; } #js-course-mount .dropdown.usermenu, #js-course-mount .searchbox { float: right; } #js-course-mount .topnav>li a { transition: all .15s ease-in-out; } #js-course-mount .topnav .flyout-parent .flyout .l2, #js-course-mount .topnav>li a { -moz-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; } #js-course-mount .topnav>li a:focus, #js-course-mount .topnav>li a:hover { color: #404040; background-color: #d8d8d8; text-decoration: none; } #js-course-mount .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; } #js-course-mount .topnav .flyout-parent:hover .flyout .l2 { height: 50px; width: 190px; padding: 18px 18px 19px; opacity: 1; left: 0; } #js-course-mount .topnav .flyout-parent:hover a.l1 { background-color: #f5f5f5; } #js-course-mount .topnav .flyout { display: block; position: absolute; left: 190px; margin-top: -50px; } #js-course-mount .topnav .flyout li a { display: inline-block; width: 190px; background-color: #e6e6e6; padding: 18px 18px 19px; } #js-course-mount .topnav .flyout li a:hover { background-color: #d8d8d8; } @media screen and (max-width: 32.5em),screen and (max-height:33.75em) { #js-course-mount .topnav .flyout-parent .flyout .l2 { opacity:1; height: 50px; width: 190px; padding: 18px 18px 19px; left: 43px; } #js-course-mount .topnav .flyout-parent:hover .flyout .l2 { left: 43px; } #js-course-mount .topnav .flyout-parent:hover a.l1 { background-color: transparent!important; } #js-course-mount .topnav .flyout { position: relative; left: 0; margin-top: 0; } #js-course-mount .topnav .flyout li a { background-color: transparent; padding: 18px 18px 19px 56px; width: 100%; } #js-course-mount .topnav .flyout li a:hover { background-color: #999; } } @media screen and (min-width: 32.5625em) { #js-course-mount .topnav .l2 { display:none; } } @media screen and (max-height: 33.75em) { #js-course-mount .topnav .l2 { display:block; } } #js-course-mount .l2 { padding: 0 10px; display: inline-block; } #js-course-mount a.l0,a.l1,a.l2 { display: block; color: #404040; font-size: 13px; font-size: .8125rem; line-height: 1em; } #js-course-mount .l0.active, #js-course-mount .l1.active { background: #f5f5f5; } #js-course-mount .nav-dropdown { position: absolute; right: 0; top: 0; } #js-course-mount .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; } #js-course-mount .dropdown.active .l0, #js-course-mount .dropdown.active .l0:hover { color: #fff; background-color: #999; } #js-course-mount .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); } #js-course-mount .dropdown.active .l0 svg { fill: #fff; transform: rotate(0); } #js-course-mount .reading .dropdown.searchbox, #js-course-mount .reading li.search { display: none; } #js-course-mount .dropdown.usermenu .drop-content { position: absolute; background-color: #999; z-index: 30; right: 0; top: 61px; width: 200px; } @media screen and (max-width: 32.5em),screen and (max-height:33.75em) { #js-course-mount .l0 { height:62px; line-height: 1.75em!important; } #js-course-mount .wrap-search-form.active .drop-content { overflow: initial; } #js-course-mount .dropdown.active .drop-content { max-height: 490px; padding-bottom: 5px; } #js-course-mount .dropdown.active .drop-content a { color: #fff; } #js-course-mount .dropdown.active .drop-content a:focus, #js-course-mount .dropdown.active .drop-content a:hover { background-color: #888!important; } #js-course-mount .dropdown.active .drop-content a.active { background-color: #777; color: #444; } #js-course-mount .dropdown.active .drop-content #js-shortcuts-info { display: none; } #js-course-mount .dropdown.active .drop-content ul.profile { border-top: 1px solid #999; padding: 0 0 0 .375rem; display: none; } #js-course-mount .dropdown.active .drop-content ul.profile li { margin: .625rem 0; } #js-course-mount .dropdown.active .drop-content ul.profile li a:focus, #js-course-mount .dropdown.active .drop-content ul.profile li a:hover { background-color: transparent; } #js-course-mount .dropdown.active .drop-content ul.profile li .active { background-color: transparent; color: #fff; } #js-course-mount .dropdown.active .drop-content ul.profile li #nav-nag { color: #b3b3b3; } #js-course-mount .dropdown.active .drop-content ul.profile li #nav-nag a { text-decoration: none; color: #b3b3b3; } #js-course-mount .dropdown.active .drop-content ul.profile li #nav-nag a:focus, #js-course-mount .dropdown.active .drop-content ul.profile li #nav-nag a:hover { color: #fff; } } #js-course-mount .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; } #js-course-mount .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; } #js-course-mount .autocomplete-suggestions .autocomplete-suggestion { padding: .5rem 0 .5rem 1.25rem; line-height: 1.25em; } #js-course-mount .autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected, #js-course-mount .autocomplete-suggestions .autocomplete-suggestion:focus, #js-course-mount .autocomplete-suggestions .autocomplete-suggestion:hover { background-color: rgba(199,194,186,.15); color: #d3002d; cursor: pointer; } #js-course-mount .searchbox, #js-course-mount .wrap-search-form { margin: .75rem 1.25rem 0; position: relative; z-index: 8; } #js-course-mount .searchbox .search-form, #js-course-mount .wrap-search-form .search-form { -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; z-index: 8; position: relative; display: inline-block; border: 1px solid #d5d5d5; background-color: #fff; margin: 0; } #js-course-mount .searchbox .search-form.active, #js-course-mount .searchbox .search-form:active, #js-course-mount .searchbox .search-form:focus, #js-course-mount .searchbox .search-form:hover, #js-course-mount .wrap-search-form .search-form.active, #js-course-mount .wrap-search-form .search-form:active, #js-course-mount .wrap-search-form .search-form:focus, #js-course-mount .wrap-search-form .search-form:hover { border: 1px solid #d3002d; } #js-course-mount .searchbox .nav-search-in, #js-course-mount .wrap-search-form .nav-search-in { -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; background-clip: padding-box; display: inline-block; background-color: #fff; } #js-course-mount .searchbox .search-query, #js-course-mount .searchbox select.search-params, #js-course-mount .wrap-search-form .search-query, #js-course-mount .wrap-search-form select.search-params { display: inline-block; vertical-align: middle; border: none; outline: 0; -webkit-appearance: none; } #js-course-mount .searchbox select.search-params, #js-course-mount .wrap-search-form select.search-params { width: 107px; margin: 0 10px 0 0; padding: 5px 5px 5px 10px; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; appearance: none; background: url(http://cdn.oreillystatic.com/static/images/down_arrow_icon.183ac2d27457.svg) right 60% no-repeat; color: #777; text-overflow: ''; cursor: pointer; } #js-course-mount .searchbox select.search-params:active, #js-course-mount .searchbox select.search-params:focus, #js-course-mount .searchbox select.search-params:hover, #js-course-mount .wrap-search-form select.search-params:active, #js-course-mount .wrap-search-form select.search-params:focus, #js-course-mount .wrap-search-form select.search-params:hover { color: #404040; } #js-course-mount .searchbox select.search-params::-ms-expand, #js-course-mount .wrap-search-form select.search-params::-ms-expand { display: none; } #js-course-mount .ie8 .searchbox select.search-params, #js-course-mount .ie8 .wrap-search-form select.search-params { background: 0 0; } #js-course-mount .searchbox .search-query, #js-course-mount .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; } #js-course-mount .searchbox .search-query:focus::-webkit-input-placeholder, #js-course-mount .wrap-search-form .search-query:focus::-webkit-input-placeholder { transition: opacity .35s .35s ease; opacity: 0; } #js-course-mount .searchbox .search-button, #js-course-mount .wrap-search-form .search-button { width: 28px; height: 28px; padding: 0; color: #C7C2BA; vertical-align: middle; border: none; } #js-course-mount .searchbox .search-button span, #js-course-mount .wrap-search-form .search-button span { display: none; } #js-course-mount .searchbox .search-button svg, #js-course-mount .wrap-search-form .search-button svg { display: block; height: 17px; width: 28px; fill: #C7C2BA; } #js-course-mount .no-touch .searchbox .search-button:focus svg, #js-course-mount .no-touch .searchbox .search-button:hover svg, #js-course-mount .no-touch .wrap-search-form .search-button:focus svg, #js-course-mount .no-touch .wrap-search-form .search-button:hover svg, #js-course-mount .searchbox .search-button:active svg, #js-course-mount .searchbox .search-button:focus svg, #js-course-mount .searchbox .search-button:hover svg, #js-course-mount .wrap-search-form .search-button:active svg, #js-course-mount .wrap-search-form .search-button:focus svg, #js-course-mount .wrap-search-form .search-button:hover svg { fill: #404040; } @media screen and (max-width: 32.5em),screen and (max-height:33.75em) { #js-course-mount .searchbox, #js-course-mount .wrap-search-form { width:100%; background-color: #999; margin: -5px 0 0!important; } #js-course-mount .searchbox .search-form, #js-course-mount .wrap-search-form .search-form { margin: 12px 15px 5px; width: calc(100% - 30px); } #js-course-mount .searchbox .search-query, #js-course-mount .wrap-search-form .search-query { width: calc(100% - 153px); } } #js-course-mount .nav-collapse { display: none; } @media screen and (min-width: 32.5625em) and (min-height:33.6875em) { #js-course-mount .searchbox .drop-content, #js-course-mount .wrap-search-form .drop-content { max-height:999px; overflow: visible; } #js-course-mount body.nav-collapsed .topbar { width: 55px; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } #js-course-mount .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); } #js-course-mount .topbar a:before { top: 4px; font-size: 21px; } #js-course-mount .topbar [class*=ss-].l0 span { display: inline; } #js-course-mount .topbar .l0 { width: 100%; } #js-course-mount .topbar ul>li { width: auto; display: block; } #js-course-mount .topbar ul>li.search { display: none; } #js-course-mount .reading .topbar { top: 0; } #js-course-mount .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; } #js-course-mount .page-head, #js-course-mount .page-head:after { width: 100%; display: inline-block; } #js-course-mount .last-item { margin-bottom: 10px; } #js-course-mount .l2 { padding-top: 5px; padding-bottom: 5px; } #js-course-mount .l2:focus, #js-course-mount .l2:hover { background-color: transparent; color: #d3002d; } #js-course-mount .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; } #js-course-mount .page-head:after { content: ''; } #js-course-mount .nav-collapse, #js-course-mount .page-head h1 { display: block; text-align: left; } #js-course-mount .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; } #js-course-mount .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; -webkit-border-radius: 0; border-radius: 0; background-clip: padding-box; border: none; line-height: 1; color: #9B9B9B; text-decoration: none; text-indent: 20px; cursor: pointer; } #js-course-mount .nav-collapse:before { font-size: 15px; } #js-course-mount .nav-collapse:focus, #js-course-mount .nav-collapse:hover { background-color: #dadada!important; } #js-course-mount .nav-collapse:active { top: auto; } } #js-course-mount .tooltip.top .tooltip-arrow, #js-course-mount .tooltip.top-left .tooltip-arrow, #js-course-mount .tooltip.top-right .tooltip-arrow { bottom: 0; border-top-color: #777; border-width: 5px 5px 0; } #js-course-mount .gen-nav { background-color: #070707; width: 100%; min-width: 230px; } #js-course-mount .mknav, #js-course-mount .tooltip.active .tooltip-inner { background-color: #d3002d; } #js-course-mount .gen-nav:after, #js-course-mount .gen-nav:before { content: " "; display: table; } #js-course-mount .gen-nav a { color: #fff; padding: 0 16px; display: block; text-decoration: none; } #js-course-mount .gen-nav .login, #js-course-mount .gen-nav h1 { font-size: 16px; line-height: 50px; } #js-course-mount .gen-nav h1 { display: inline; margin: 0; float: left; } #js-course-mount .gen-nav .login { float: right; color: #d3002d; } #js-course-mount .mknav { color: #070707; font-size: 16px; padding: 16px; } #js-course-mount .mknav li { display: inline; padding-right: .4em; } #js-course-mount .mknav li:before { padding-right: .4em; content: '/'; } #js-course-mount .mknav li:first-child:before { padding-right: 0; content: ''; } #js-course-mount .mknav li a { color: #fff; text-decoration: none; } #js-course-mount .mknav li a:focus, #js-course-mount .mknav li a:hover { text-decoration: underline; } #js-course-mount .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; } #js-course-mount .tooltip.in { opacity: .9; filter: alpha(opacity=90); } #js-course-mount .tooltip.top { padding: 5px 0; margin-top: -3px; } #js-course-mount .tooltip.top .tooltip-arrow { left: 50%; margin-left: -5px; } #js-course-mount .tooltip.top-left .tooltip-arrow { left: 5px; } #js-course-mount .tooltip.right { padding: 0 5px; margin-left: 3px; } #js-course-mount .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-right-color: #777; border-width: 5px 5px 5px 0; } #js-course-mount .tooltip.bottom .tooltip-arrow, #js-course-mount .tooltip.bottom-left .tooltip-arrow, #js-course-mount .tooltip.bottom-right .tooltip-arrow { top: 0; border-bottom-color: #777; border-width: 0 5px 5px; } #js-course-mount .tooltip.active.right .tooltip-arrow { border-right-color: #d3002d; } #js-course-mount .tooltip.bottom { padding: 5px 0; margin-top: 3px; } #js-course-mount .tooltip.bottom .tooltip-arrow { left: 50%; margin-left: -5px; } #js-course-mount .tooltip.bottom-left .tooltip-arrow { left: 5px; } #js-course-mount .tooltip.left { padding: 0 5px; margin-left: -3px; } #js-course-mount .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-left-color: #777; border-width: 5px 0 5px 5px; } #js-course-mount .tooltip-inner { max-width: 300px; padding: 5px 12px; color: #fff; text-align: center; text-decoration: none; background-color: #777; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; } #js-course-mount .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } #js-course-mount .fade { opacity: 0; -webkit-transition: opacity .25s linear; transition: opacity .25s linear; } #js-course-mount .fade.in { opacity: 1; } #js-course-mount .l1.no-icon { padding: 16px 15px 16px 55px; white-space: nowrap; } #js-course-mount a.nav-icn { padding: 15px 17px; white-space: nowrap; } #js-course-mount a.nav-icn svg { width: 20px; height: 20px; margin: 0; } #js-course-mount a.nav-icn.l0 svg { margin: 7px 0 0 2px; } #js-course-mount a.nav-icn.l0 span { display: none; } #js-course-mount a.nav-icn.l1 svg { margin: 0 18px 0 2px; vertical-align: middle; } #js-course-mount a.nav-icn.l1 span { display: inline-block; vertical-align: middle; } #js-course-mount .usermenu { float: right; } #js-course-mount .usermenu .trigger { padding: 16px 15px 19px 17px; } #js-course-mount .usermenu .trigger:hover { color: #404040; background-color: #d8d8d8; text-decoration: none; } #js-course-mount .usermenu .trigger.active { color: #fff; background-color: #999; } #js-course-mount .topnav a svg { fill: #4A3B30; } #js-course-mount .topnav .usermenu a.l1 svg { fill: #fff; } @media screen and (min-width: 32.5625em) and (min-height:33.6875em) { #js-course-mount .dropdown.usermenu, #js-course-mount .topnav>li { float:none; } #js-course-mount a.nav-icn.l0 { width: auto; } #js-course-mount a.nav-icn.l0 svg,a.nav-icn.l1 svg { margin: 0 18px 0 2px; vertical-align: middle; } #js-course-mount a.nav-icn.l0.safari-home svg { margin: 0 16px 0 4px; } #js-course-mount a.nav-icn.l0 span,a.nav-icn.l1 span { display: inline-block; vertical-align: middle; } #js-course-mount a.nav-icn.safari-home { padding: 22px 15px; } #js-course-mount a.nav-icn.safari-home span { padding-top: 4px; } #js-course-mount .dropdown .trigger { display: none; } #js-course-mount .topnav .usermenu a.l1 svg { fill: #4A3B30; } } #js-course-mount .articlelist { max-width: 1600px; margin: 0 auto 15px; } #js-course-mount .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); } #js-course-mount .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; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; -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; } #js-course-mount .articlelist>li .position-link { text-decoration: none; float: right; font-size: 12px; font-size: .75rem; letter-spacing: 1px; position: relative; z-index: 1; } #js-course-mount .articlelist>li .topic-display { clear: left; } #js-course-mount .articlelist>li.js-last-viewed span.expired { display: none; } #js-course-mount .articlelist>li.js-related .feedback.text { font-size: 24px; } #js-course-mount .articlelist>li.js-related .feedback:before { top: 35px; } @media screen and (max-width: 767px) { #js-course-mount .articlelist>li { width:100%; } } @media screen and (min-width: 768px) and (max-width:1279px) { #js-course-mount .articlelist>li { width:48.720703125%; margin-right: 1.953125%; } .articlelist>li:nth-child(2n+2) { color: #fff; margin-right: 0; } } @media only screen and (min-width: 1280px) and (max-width:1600px) { #js-course-mount .articlelist>li { width:31.5234375%; margin-right: 2.34375%; } .articlelist>li:nth-child(3n+3) { margin-right: 0; } } @media only screen and (min-width: 1601px) { #js-course-mount .articlelist>li { width:23.375%; margin-right: 1.875%; } #js-course-mount .articlelist>li:nth-child(4n+4) { margin-right: 0; } } #js-course-mount .articlelist>li.more-container { display: block; width: 100%; margin: 0 auto; border: none; background-color: transparent; text-align: center; } #js-course-mount .news-block .articlelist>li { background: #fff; } #js-course-mount .news-block .articlelist>li p { font-size: 14px; } #js-course-mount .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; } #js-course-mount .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%; } #js-course-mount .feedback .canceled, #js-course-mount .feedback .expired { display: block; color: rgba(64,64,64.75); font-size: 18px; margin-top: 8px; line-height: 1.25em; } #js-course-mount .feedback:before { font-size: 36px; left: 50%; margin-left: -21px; top: 50%; margin-top: -50px; position: absolute; } #js-course-mount .feedback.added:before { color: #d3002d; } #js-course-mount .feedback.canceled:before, #js-course-mount .feedback.error:before, #js-course-mount .feedback.expired:before, #js-course-mount .feedback.removed:before { color: #B2B4B3; } #js-course-mount .detail-book .feedback .text, #js-course-mount .detail-video .feedback .text { font-size: 32px; font-size: 2rem; margin-top: 20px; } @media screen and (max-width: 32.5em) { #js-course-mount .detail-book .feedback .text, #js-course-mount .detail-video .feedback .text { font-size:26px; font-size: 1.625rem; } } #js-course-mount .articlelist>li .info { text-align: left; } #js-course-mount .articlelist>li .info h2 { margin: 0; padding: 15px 10px 10px; display: inline-block; color: #00B798; } #js-course-mount .articlelist>li .info .main { padding: 0 .9375rem .9375rem; color: rgba(64,64,64,.75); } #js-course-mount .articlelist>li .info .main:after, #js-course-mount .articlelist>li .info .main:before { content: " "; display: table; } #js-course-mount .articlelist>li .info .main:after { clear: both; } @media screen and (min-width: 650px) { #js-course-mount .articlelist>li .info { width:100%; right: 0; bottom: 0; } } @media screen and (min-width: 1250px) { #js-course-mount .articlelist>li .info .main { padding:0 .625rem .625rem; } } #js-course-mount .title-block { display: block; text-decoration: none; font-size: 18px; font-size: 1.125rem; margin-bottom: .1875rem; line-height: 20px; line-height: 1.25rem; } #js-course-mount .book-title { margin-bottom: .3125rem; line-height: 18px; line-height: 1.125rem; font-size: 13px; font-size: .8125rem; } #js-course-mount .book-title .issued { display: block; font-style: italic; } #js-course-mount .last-access { font-size: 12px; color: #777; margin-bottom: 10px; } #js-course-mount .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; } #js-course-mount .articlelist>li .controls .format-title { font-size: 10px; display: block; color: rgba(64,64,64,.75); position: absolute; left: 15px; top: 50%; } #js-course-mount .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) { #js-course-mount .articlelist>li .controls .format-title { left:10px; } } #js-course-mount .format-book .format-title:before { content: '\1F4D5'; } #js-course-mount .format-video .format-title:before { content: '\1F4F9'; } #js-course-mount .articlelist .rec-delete, #js-course-mount .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; } #js-course-mount .rec-delete, #js-course-mount .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; -webkit-border-radius: 0; border-radius: 0; background-clip: padding-box; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .uppercase, #js-course-mount .card-annotation .note, #js-course-mount .progress, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .uppercase { text-transform: uppercase; } #js-course-mount .rec-delete.invalid, #js-course-mount .rec-delete:disabled, #js-course-mount .rec-fav.invalid, #js-course-mount .rec-fav:disabled { background-color: transparent; color: rgba(64,64,64,.75); } #js-course-mount .rec-delete:before, #js-course-mount .rec-fav:before { vertical-align: middle; font-size: 14px; font-size: .875rem; } #js-course-mount .rec-fav.active, #js-course-mount .rec-fav.active:before { color: #d3002d; } #js-course-mount .no-touch button.rec-fav:focus { color: #999; } #js-course-mount .no-touch button.rec-delete:focus, #js-course-mount .no-touch button.rec-delete:hover { color: #ea6d60; } @media screen and (max-width: 1250px) { #js-course-mount .no-touch .articlelist button.rec-delete:hover, #js-course-mount .no-touch .articlelist button.rec-fav:hover { background-color:#EEE; } } #js-course-mount .progress .gridtc { display: table-cell; white-space: nowrap; } #js-course-mount .progress { font-size: 12px; font-size: .75rem; display: block; margin: 0; color: rgba(64,64,64,.65); letter-spacing: 1px; } #js-course-mount .progress .bar, #js-course-mount .progress .prog-text { vertical-align: middle; display: table-cell; } #js-course-mount .progress .bar { width: 100%; } #js-course-mount .progress .prog-text { white-space: nowrap; padding-left: 10px; } #js-course-mount .progress .per, #js-course-mount .progress .per .time { background-clip: padding-box; display: block; height: 8px; } #js-course-mount .progress .per { -webkit-border-radius: 2px; border-radius: 2px; background-color: #d5d5d5; padding: 0; } #js-course-mount .progress .per .time { margin: 0; -webkit-border-radius: 2px; border-radius: 2px; background-color: #999082; } #js-course-mount .sort-box { font-size: 20px; line-height: 1.3em; margin-bottom: 1em; text-align: right; color: #777; font-weight: 300; } #js-course-mount .recommended-reason .book-title, #js-course-mount .recommended-reason .book-title .topic-display li { font-size: 14px; } @media screen and (min-width: 40.625em) { #js-course-mount .sort-box { max-width:650px; } } @media screen and (min-width: 96.125em) { #js-course-mount .sort-box { max-width:1315px; } } @media screen and (min-width: 137.5625em) { #js-course-mount .sort-box { max-width:1975px; } } @media screen and (min-width: 179em) { #js-course-mount .sort-box { max-width:2635px; } } @media screen and (min-width: 220.4375em) { #js-course-mount .sort-box { max-width:100%; } } #js-course-mount .recommended-reason { padding: 5px 15px; background-color: #F7F7F7; border-top: 1px solid #d5d5d5; color: #999; } #js-course-mount .recommended-reason .book-title a { color: rgba(64,64,64,.75); text-decoration: underline; } #js-course-mount .chat-wrapper a, #js-course-mount .chat-wrapper a:hover, #js-course-mount .chat-wrapper input.sales-chat-btn:focus, #js-course-mount .chat-wrapper input.sales-chat-btn:hover { text-decoration: none; } #js-course-mount .recommended-reason .book-title a:focus, #js-course-mount .recommended-reason .book-title a:hover { color: #d3002d; } #js-course-mount .topic-display li { display: inline-block; font-size: 12px; font-size: .75rem; color: #777; } #js-course-mount .topic-display li .topic { color: #d3002d; } #js-course-mount .topic-display li:after { color: #ccc; content: ' / '; } #js-course-mount .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); } } #js-course-mount .trial-banner { background-color: #fff; margin: 0 20px 20px; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; 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; } #js-course-mount .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) { #js-course-mount .trial-banner h1 { font-size:35px; font-size: 2.1875rem; } } #js-course-mount .trial-banner p { font-size: 24px; font-size: 1.5rem; font-weight: 300; color: #999; margin-bottom: 1em; line-height: 1.1em; } #js-course-mount .trial-banner.trial-expired { padding: 15px 0; } #js-course-mount .trial-banner.trial-expired h1 { font-size: 26px; font-size: 1.625rem; } @media screen and (max-width: 32.5625em) { #js-course-mount .trial-banner.trial-expired h1 { font-size:21px; font-size: 1.3125rem; } } #js-course-mount .trial-banner .red-banner { background-color: #ea6d60; color: #FFF; padding: 15px 10% 25px; font-weight: 300; margin-bottom: 20px; } #js-course-mount .js-disable-shortcuts label { display: inline-block; margin: 0 0 0 10px; } #js-course-mount .keyboard-shortcuts-pane { font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif!important; overflow: hidden; clear: both; } #js-course-mount .keyboard-shortcuts-pane .inner .headline { border-bottom: 1px solid #CCC; padding: .375rem 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; background-clip: padding-box; height: 50px; } #js-course-mount .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; } #js-course-mount .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; } #js-course-mount .keyboard-shortcuts-pane .inner .headline .js-close:focus, #js-course-mount .keyboard-shortcuts-pane .inner .headline .js-close:hover { color: #666; } #js-course-mount .keyboard-shortcuts-pane .inner .headline .js-close span { display: block; text-indent: -99999px; } #js-course-mount .keyboard-shortcuts-pane .inner h4 { margin: 0; font-size: 18px; font-size: 1.125rem; color: #777; } #js-course-mount .keyboard-shortcuts-pane .inner .disable-shortcuts { clear: both; padding: 0 0 .625rem 1.25rem; font-size: smaller; } #js-course-mount .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) { #js-course-mount .keyboard-shortcuts-pane .inner { display:none; } } #js-course-mount .keyboard-shortcuts-pane .inner .tooltip-inner { max-width: 100%!important; width: 100%; } #js-course-mount .keyboard-shortcuts-pane .inner .column { width: 50%; } #js-course-mount .keyboard-shortcuts-pane .inner .column.right { float: right; padding: .625rem 2.5rem 1.25rem 0; } #js-course-mount .keyboard-shortcuts-pane .inner .column.left { padding: .625rem 0 1.25rem 2.5rem; float: left; } #js-course-mount .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; -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; } #js-course-mount .keyboard-shortcuts-pane .inner td, #js-course-mount .keyboard-shortcuts-pane .inner th { display: table-cell; } #js-course-mount .keyboard-shortcuts-pane .inner tr { display: table-row; vertical-align: inherit; border-color: inherit; } #js-course-mount .keyboard-shortcuts-pane .inner th { text-align: left; color: #00b78a; font-weight: 700; padding: .625rem 0; } #js-course-mount .keyboard-shortcuts-pane .inner td { padding: .1875rem 0; vertical-align: top; line-height: 20px; line-height: 1.25rem; font-size: 16px; font-size: 1rem; } #js-course-mount .keyboard-shortcuts-pane .inner td.keys { text-align: right; padding-right: 10px; white-space: nowrap; } #js-course-mount .chat-wrapper { position: fixed; z-index: 1000; color: #fff; font-size: 16px; font-size: 1rem; } #js-course-mount .chat-wrapper input.sales-chat-btn { -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; background-clip: padding-box; cursor: pointer; display: block!important; white-space: normal; } #js-course-mount .chat-wrapper input:focus { box-shadow: none; border: none; } #js-course-mount .subscribe-nag .chat-wrapper { visibility: hidden; } @media screen and (min-width: 450px) { #js-course-mount .chat-wrapper { right:0; bottom: 50%!important; margin-bottom: -107px; display: block; } #js-course-mount .chat-wrapper.slideUp { visibility: visible!important; } #js-course-mount .chat-wrapper input.sales-chat-btn { background: url(http://cdn.oreillystatic.com/static/images/sales-chat.b34d45f2713c.svg) 25px 158px no-repeat #d3002d; background-size: 40px; width: 90px; height: 215px; padding: 12px 9px 81px; font: 400 1.05em/1.38 'guardian-text-oreilly'; } #js-course-mount .expanded .live-agent { width: 188px; margin: 0 auto; display: block; position: relative; } #js-course-mount .expanded .live-agent:before { content: url(http://cdn.oreillystatic.com/static/images/sales-chat.b34d45f2713c.svg); position: absolute; left: 8px; top: 13px; z-index: 10; } #js-course-mount .expanded .live-agent input { white-space: normal; background: no-repeat #d3002d; background-size: 36px; padding-left: 60px; text-align: left; line-height: 1em; transition: all 0 linear 0s; } #js-course-mount .expanded .live-agent input:focus, .expanded .live-agent input:hover { background: #d3002d; background-image: -moz-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F5C517),color-stop(100%,#d3002d)); background-image: -webkit-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -o-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -ms-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: linear-gradient(to bottom,#F5C517 0,#d3002d 100%); text-decoration: none!important; background-size: 100%; } } @media screen and (max-width: 449px) { #js-course-mount .chat-wrapper { bottom:0; left: 50%; padding: 0; margin-left: -25.5%; width: 50%; position: fixed; } #js-course-mount .chat-wrapper input.sales-chat-btn { background: url(http://cdn.oreillystatic.com/static/images/sales-chat.b34d45f2713c.svg) 9px 15px no-repeat #d3002d; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; background-clip: padding-box; margin-left: 5px; font: 400 .95em/1.1 'guardian-text-oreilly'; text-align: left; padding: .0125rem .65rem 0 2.75rem; background-size: 25px; height: 60px; } #js-course-mount .chat-wrapper.slideUp { bottom: -70px!important; visibility: visible!important; } #js-course-mount .register .chat-wrapper { display: none; } #js-course-mount .subscribe-nag .expanded .live-agent { width: 172px; margin: 0 auto; display: block; } #js-course-mount .subscribe-nag .expanded .live-agent input { white-space: normal; background: url(http://cdn.oreillystatic.com/static/images/sales-chat.b34d45f2713c.svg) 9px 12px no-repeat #d3002d; background-size: 36px; padding: 10px 9px 10px 55px; text-align: left; line-height: 1em; margin: .25rem 0 .625rem!important; } #js-course-mount .subscribe-nag .chat-wrapper { bottom: -300%; position: absolute; left: 0; margin: 0; } } #js-course-mount .legal-agreement-details { color: #000; margin: 15px 0; } #js-course-mount .cover { display: inline-block; } #js-course-mount .cover a, #js-course-mount .cover img, #js-course-mount .cover span { display: block; } #js-course-mount .cover a { position: relative; max-width: 100%; } #js-course-mount .cover img { max-width: 100%; height: auto; box-shadow: 2px 0 6px 0 rgba(0,0,0,.2); } #js-course-mount .detail-video .cover a:before, #js-course-mount .format-case-study .cover a:before, #js-course-mount .format-learning-path .cover a:before, #js-course-mount .format-video .cover a:before { content: ''; background: url(http://cdn.oreillystatic.com/static/images/icon__cover-image__media-type--video.a76cad93c7f6.svg) center center no-repeat; position: absolute; height: 40px; width: 40px; line-height: 50px; margin-top: -20px; margin-left: -20px; top: 50%; left: 50%; text-align: center; text-indent: 3px; text-decoration: none; z-index: 1; } #js-course-mount .detail-video .cover a:before { height: 50px; width: 50px; margin: -25px 0 0 -25px; background-size: 100%; } #js-course-mount .format-case-study .cover a:before { height: 17px; width: 17px; margin: 15px 0 0 15px; background-size: 100%; } #js-course-mount .no-touch .rec-delete:focus, #js-course-mount .no-touch .rec-delete:hover, #js-course-mount .no-touch .rec-fav:focus, #js-course-mount .no-touch .rec-fav:hover, #js-course-mount .rec-delete, #js-course-mount .rec-fav { background: 0 0; color: #ccc; } #js-course-mount .results-list .cover { float: left; margin-left: -75px; } #js-course-mount .results-list .cover img { max-width: 60px; } @media (min-width: 450px) { #js-course-mount .results-list .cover { margin-left:-90px; } #js-course-mount .results-list .cover img { max-width: 73px; width: 73px; } } #js-course-mount .articlelist>li.format-video .cover { max-width: 122px; max-width: 7.625rem; height: 70px; overflow: hidden; } #js-course-mount .articlelist>li.format-video .cover a { max-height: 70px; } #js-course-mount .articlelist>li .cover { float: left; width: 100%; max-width: 65px; max-width: 4.0625rem; margin: .125rem .9375rem .3125rem 0; } #js-course-mount .articlelist>li .cover a { border: 1px solid transparent; } #js-course-mount .articlelist>li .cover a:focus { border: 1px solid #d3002d; } #js-course-mount .rec-delete, #js-course-mount .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; } #js-course-mount .rec-delete:active, #js-course-mount .rec-fav:active { top: 0; } #js-course-mount .django-messages { margin: 1rem 0; } #js-course-mount .django-messages>li { position: relative; padding: 1rem; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; color: #fff; } @media screen and (max-width: 30em) { #js-course-mount .django-messages>li { margin:1rem .9375rem; } } #js-course-mount .django-messages .fixed-position { position: fixed; width: 92%; z-index: 99; } #js-course-mount .django-messages .info, #js-course-mount .django-messages .success { background: #d3002d; font-weight: 400; } #js-course-mount .django-messages .info a, #js-course-mount .django-messages .success a { color: #fff; text-decoration: underline; } #js-course-mount .django-messages .info a.close, #js-course-mount .django-messages .success a.close { text-decoration: none; } #js-course-mount .django-messages .info:before, #js-course-mount .django-messages .success:before { speak: none; content: '\2713'; position: relative; top: 3px; font-size: 21px; padding-right: 1rem; color: #fff; font-family: SSFlow; } #js-course-mount .django-messages .success { background: #008542; } #js-course-mount .django-messages .warning { background: #815C00; } #js-course-mount .django-messages .error { background: maroon; } #js-course-mount .django-messages .welcome-banner { background-color: #fff; color: #333; padding: .125rem 1rem; } #js-course-mount .django-messages .welcome-banner h2 { margin-bottom: 0; line-height: 1.15em; } #js-course-mount .django-messages .welcome-banner p { margin-top: 10px; } #js-course-mount .django-messages .alert { background-color: #E8BA16; color: #fff; } #js-course-mount .django-messages .alert:before { content: ''; background: url(http://cdn.oreillystatic.com/static/images/alert.a1ddd023edd3.png) no-repeat; background-size: 25px; width: 25px; height: 21px; display: block; margin-top: -3px; } #js-course-mount .django-messages .alert a { color: #fff; text-decoration: underline; } #js-course-mount .django-messages .error, #js-course-mount .django-messages .warning { background-color: #E8BA16; } #js-course-mount .django-messages .error:before, #js-course-mount .django-messages .warning:before { speak: none; content: '\1F6AB'; position: relative; top: 3px; font-size: 21px; padding-right: .75rem; color: #fff; font-family: SSFlow; } #js-course-mount .django-messages .error, #js-course-mount .django-messages .nagbar { background-color: #ea6d60; } #js-course-mount .django-messages .error .buttongroup, #js-course-mount .django-messages .nagbar .buttongroup { height: 16px; height: 1rem; overflow: visible; display: inline-block; margin: 0; padding-left: .75rem; } #js-course-mount .django-messages .error a, #js-course-mount .django-messages .nagbar a { color: #fff; } #js-course-mount .django-messages .nagbar:before { content: none; } #js-course-mount .django-messages .close { position: absolute; top: 5px; right: 0; bottom: 0; width: 40px; height: 40px; text-decoration: none; } #js-course-mount .django-messages .close:before { speak: none; position: relative; background: rgba(0,0,0,.33); top: 12px; left: 8px; -webkit-border-radius: 50%; border-radius: 50%; background-clip: padding-box; padding: .3125rem .375rem .125rem; height: 24px; width: 24px; line-height: 24px; font-size: 12px; color: #fff; font-family: SSFlow; content: '\2421'; } #js-course-mount .enable-js, #js-course-mount .servererror { font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; } #js-course-mount .django-messages .close span { display: none; } #js-course-mount .pass-rules { font-size: 14px; color: #555; } #js-course-mount .pass-rules h4 { font-weight: 700; margin: 0; padding: 0; } #js-course-mount .pass-rules ul { list-style-type: disc; margin: 0 0 1em 1.5em; } #js-course-mount .servererror #masthead { background-color: #070707; width: 100%; min-width: 230px; font-weight: 700; } #js-course-mount .servererror #masthead h1 { margin: 0; padding: .5em; } #js-course-mount .servererror #masthead h1 a { color: #fff; text-decoration: none; } .servererror section#js-course-mount img { display: block; margin: .5em auto; max-width: 50%; } #js-course-mount .servererror .pod { text-align: center; } #js-course-mount .servererror footer { padding: 1.5em; } #js-course-mount .servererror h1 { color: #777; display: inline-block; padding: 0 1rem; margin: 0 0 1rem; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-hide, #js-course-mount .annotator-notice, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-hide { display: none!important; } #js-course-mount .servererror.js-error, #js-course-mount .servererror.js-error .pod { background: #f7f7f7; } #js-course-mount .upgrade { margin: 0 0 30px; padding: 20px; color: #FFF; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; } #js-course-mount .upgrade.upgrade-green { background-color: #d3002d; } #js-course-mount .upgrade.upgrade-yellow { background-color: #e5c15e; } #js-course-mount .upgrade.upgrade-red { background-color: #ea6d60; } #js-course-mount .upgrade.upgrade-blue { background-color: #C7C2BA; color: #4A3C31; border: none; } #js-course-mount .upgrade a { color: #FFF; } #js-course-mount .upgrade p { margin: 0; font-size: 18px; font-size: 1.125rem; } #js-course-mount .enable-js { min-height: 300px; padding: 1em; } #js-course-mount .recommendations_debug div, #js-course-mount .recommendations_debug li,div.recommendations_debug { padding-left: 5px; } #js-course-mount .recommendations_debug ul { padding-left: 5px; padding-top: 5px; } @-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); } } #js-course-mount .pdf #sbo-rt-content .annotator-wrapper .annotator-hl { opacity: .65; } #js-course-mount #sbo-rt-content, #js-course-mount .sbo-inpage-toc { position: static!important; -webkit-transform: none; } #js-course-mount #sbo-rt-content .annotator-wrapper, #js-course-mount .sbo-inpage-toc .annotator-wrapper { margin: 0; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-hl, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-hl { background-color: #FFE34F; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-hl-has-note, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-hl-has-note { position: relative; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-hl-has-note:before, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-hl-has-note:before { content: '•'; font-size: 40px; position: absolute; left: -8px; top: 0; line-height: 0; color: #d3002d; -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); } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-item, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-item { list-style-type: none; margin-left: 0; clear: both; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-item input.disabled, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-item label.disabled, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-item input.disabled, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-item label.disabled { opacity: .25; } #js-course-mount #sbo-rt-content .annotator-wrapper .animateIn, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .stretchRight, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .expandUp, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-touch-controls, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-viewer.viewer, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-touch-controls, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-viewer.viewer { position: absolute; margin: 0; padding: 0; background-color: transparent; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-touch-controls div, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-viewer.viewer div, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-touch-controls div, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-viewer.viewer div { display: none; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-touch-controls .annotator-widget, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-viewer.viewer .annotator-widget, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-touch-controls .annotator-widget, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-viewer.viewer .annotator-widget { margin-top: 0!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .toggle_public ul, #js-course-mount .sbo-inpage-toc .annotator-wrapper .toggle_public ul { margin: 0; padding: 0; } #js-course-mount #sbo-rt-content .annotator-wrapper .toggle_public ul li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .toggle_public ul li { font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; font-size: .9em!important; list-style-type: none; margin: 0 10px 0 0!important; float: left; color: #404040; } #js-course-mount #sbo-rt-content .annotator-wrapper .toggle_public ul li input+span, #js-course-mount .sbo-inpage-toc .annotator-wrapper .toggle_public ul li input+span { opacity: .75; font-size: 15px; margin-left: 5px; } #js-course-mount #sbo-rt-content .annotator-wrapper .toggle_public ul li input:checked+span, #js-course-mount .sbo-inpage-toc .annotator-wrapper .toggle_public ul li input:checked+span { opacity: 1; } #js-course-mount #sbo-rt-content .annotator-wrapper .toggle_public ul li label.disabled, #js-course-mount .sbo-inpage-toc .annotator-wrapper .toggle_public ul li label.disabled { opacity: .25; } #js-course-mount #sbo-rt-content .annotator-wrapper .editor_section, #js-course-mount .sbo-inpage-toc .annotator-wrapper .editor_section { font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; font-size: .9em!important; margin-top: 40px!important; padding-top: 10px; border-top: 1px solid #CCC; } #js-course-mount #sbo-rt-content .annotator-wrapper .editor_section label, #js-course-mount .sbo-inpage-toc .annotator-wrapper .editor_section label { display: inline-block; margin-left: 10px; } #js-course-mount #sbo-rt-content .annotator-wrapper small.error, #js-course-mount .sbo-inpage-toc .annotator-wrapper small.error { color: red!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-view-click, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-view-click { margin: 0!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-listing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-listing { padding-left: 0!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-adder, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-view-clicker, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-adder, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker { position: absolute!important; height: auto; width: 100%; background-color: transparent!important; padding: 0; margin: 0; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-adder ul, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-adder ul, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul { margin: 0!important; padding: 3px 5px!important; background-color: #FFF; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; -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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-adder ul li, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li { list-style-type: none; list-style-image: none; float: left; margin: 0!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-adder ul li:last-child a, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li:last-child a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li:last-child a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li:last-child a { border-right: none; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-adder ul li a, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li a { border: none; padding: 5px 10px; color: #256595; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; font-size: 15px; font-weight: 600; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-adder ul li a:hover, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-view-clicker ul li a:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-adder ul li a:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-view-clicker ul li a:hover { color: #002776!important; text-decoration: underline!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-viewer, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-viewer { width: 100%; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper { background-color: #FFF!important; position: absolute; z-index: 29; width: 100%; max-width: 650px; margin-left: -322px!important; left: 50%!important; -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; background: url(http://cdn.oreillystatic.com/static/images/loading.6b1710a5f2bc.gif) center center no-repeat #fff; display: none; color: #404040!important; right: auto!important; top: 130px; height: auto!important; border: 1px solid #b3b3b3!important; -moz-radius: all 5px; -webkit-radius: all 5px; -o-radius: all 5px; radius: all 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; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; font-size: 100%!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper code, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper li, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper p, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper code, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper p { color: #404040!important; background-color: #FFF!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper div, #js-course-mount .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) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper, #js-course-mount .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) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .editor, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .editor { float: left; height: 100%; position: static!important; top: 0!important; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .left, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .right, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .left, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .right { margin: 0!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget { background-color: #fff!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-media .left, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-media .left { line-height: 1.3em; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-media .left a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-media .left a { margin-top: 10px; display: block; font-size: .8em; line-height: 1.3em; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-outer>.title, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .row, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .row { border-top: 1px solid #ddd!important; padding: 8px 0; display: block; float: left; width: 100%; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .row.delete-highlight, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .row.delete-highlight { padding: 18px 0 8px; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .indent, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .indent { padding: 0 20px; margin-bottom: 15px; } @media screen and (max-width: 32.5625em) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .indent, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .indent { padding:0; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper h4, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper small, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper h4, #js-course-mount .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) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .left, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .left { float:left; width: 50%; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .right, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .right { float: right; } @media screen and (min-width: 45.0625em) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .right, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .right { width:50%; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .sans, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .sans { font: 500 .9em/1.2 'Source Sans Pro'; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a { border-bottom: none!important; white-space: initial; color: #d3002d; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a:focus, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a:focus, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a:hover { text-shadow: 0 0 0 transparent; text-decoration: underline; background: no-repeat; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a.edit-highlight, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a.edit-highlight { color: #404040; top: 0; right: 20px; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper a.button, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper a.button { padding: 10px 25px; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-delete, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-delete { width: auto; color: #FFF; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-delete:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-delete:hover { color: #FFF!important; text-shadow: 0 0 0 transparent!important; background: #d3002d; background-image: -moz-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -webkit-gradient(left top,left bottom,color-stop(0,#F5C517),color-stop(100%,#d3002d)); background-image: -webkit-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -o-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -ms-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: linear-gradient(to bottom,#F5C517 0,#d3002d 100%); text-decoration: none; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .grey-btn, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .grey-btn { width: auto; position: relative; top: 10px; background: no-repeat #c7c2ba!important; color: #FFF!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .grey-btn:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .grey-btn:hover { text-decoration: none; color: #070707!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .close, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .close { width: 20px; height: 20px; background: url(http://cdn.oreillystatic.com/static/images/close.862fc3a7237a.png) no-repeat; display: block; text-indent: -99999px; position: absolute; right: 20px; top: 16px; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .close:focus, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .close:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .close:focus, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .close:hover { opacity: .8; background: url(http://cdn.oreillystatic.com/static/images/close.862fc3a7237a.png) no-repeat; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing { float: right; margin: 15px 0 0!important; padding: 0!important; text-align: right; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing li { margin: 0 0 0 10px!important; } @media screen and (max-width: 32.5625em) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .social-sharing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .social-sharing { padding:0!important; float: none; text-align: center; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .delete-confirm, #js-course-mount .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 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls .link-to-markdown, #js-course-mount .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: #d3002d; border: 1px solid #bbb!important; font-size: 14px; } @media screen and (max-width: 32.5625em) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget { padding:10px 15px; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected { padding: 0; font: 400 .9em/1.3 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif!important; color: #777; overflow: hidden; background-color: #FFF!important; } @media screen and (max-width: 32.5625em) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .selected { padding:0 0 12px!important; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .comment { padding: 8px 0; font: 200 1em/1.3 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing { padding: 0!important; margin: 0!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing .annotator-item, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-listing .annotator-item { list-style-type: none; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea, #js-course-mount .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 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; } @media screen and (max-width: 32.5625em) { #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea { background-color:#EEE; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea:focus, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget textarea:focus { background-color: #f6f6f6; } } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls { text-align: center; padding: 0; margin: 0!important; background-color: #FFF!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li { display: inline-block; text-decoration: none; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete { float: left; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete a, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.delete a { margin-left: 0; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.cancel, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.save, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.cancel, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls ul li.save { float: right; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls p, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls p { background-color: #FFF!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a, #js-course-mount .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; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.annotator-cancel, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.annotator-cancel { background: no-repeat #C7C2BA!important; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive, #js-course-mount .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: #d3002d; } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive:focus, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a.positive:focus, #js-course-mount .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: #d3002d; background-image: -moz-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -webkit-gradient(left top,left bottom,color-stop(0,#F5C517),color-stop(100%,#d3002d)); background-image: -webkit-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -o-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: -ms-linear-gradient(top,#F5C517 0,#d3002d 100%); background-image: linear-gradient(to bottom,#F5C517 0,#d3002d 100%); } #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a:focus, #js-course-mount #sbo-rt-content .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a:hover, #js-course-mount .sbo-inpage-toc .annotator-wrapper .annotator-modal-wrapper .annotator-widget .annotator-controls a:focus, #js-course-mount .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) { #js-course-mount #js-course-mount .touch .annotator-modal-wrapper { position:absolute!important; margin-top: 200px!important; } } #js-course-mount .annotator-touch-controls { width: 100%; text-align: center; min-width: auto; z-index: 9999; } #js-course-mount .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; } #js-course-mount .annotator-touch-controls .annotator-edit { background-color: #f5f5f5; position: absolute; right: -25px; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; background-clip: padding-box; } #js-course-mount .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; } #js-course-mount .annotator-touch-controls .annotator-add { padding: .5rem; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; 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; } #js-course-mount .annotator-touch-controls .annotator-add:after, #js-course-mount .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; } #js-course-mount .annotator-touch-controls .annotator-add:before { top: -11px; border-color: #cdcdcd #cdcdcd transparent transparent; } #js-course-mount .annotator-touch-controls .annotator-add span { display: block; } #js-course-mount .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; } #js-course-mount .card-annotation { color: rgba(64,64,64,.65); } #js-course-mount .card-annotation .wrap-pod { max-width: 800px; margin: 0 auto; } #js-course-mount .card-annotation .pod { float: left; padding: 1.25rem 1.25rem 1.875rem; } @media screen and (max-width: 32.5625em) { #js-course-mount #js-course-mount .card-annotation .pod { margin:0 0 1.25rem; } } #js-course-mount .card-annotation .pod h2 { margin: 5px 0 20px; font-size: 21px; color: rgba(74,60,49,.75); } #js-course-mount .card-annotation form textarea { display: block; max-width: 100%; width: 100%; } #js-course-mount .card-annotation form [type=submit] { margin-left: .9375rem; } #js-course-mount .card-annotation form ul.delete-option { margin-top: 20px; } #js-course-mount .card-annotation form ul.delete-option input { margin: 0; font-size: 14px; } #js-course-mount .card-annotation form ul.buttons { margin-top: 15px; } #js-course-mount .card-annotation form ul#id_privacy_option li { margin-left: .625rem; } #js-course-mount .card-annotation form ul.privacy-options li label { font-size: 16px; font-size: 1rem; } #js-course-mount .card-annotation form ul li { display: inline-block; } #js-course-mount .card-annotation form ul li input { margin: 0 5px; } #js-course-mount .card-annotation .popup { font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif!important; overflow: hidden; color: #777; background-color: #fff; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; clear: both; width: 600px; position: fixed; z-index: 9999; -moz-transition: opacity .15s ease-in-out; -webkit-transition: opacity .15s ease-in-out; -o-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; } #js-course-mount .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; } #js-course-mount .card-annotation .popup .headline { width: 100%; float: left; border-bottom: 1px solid #CCC; } @media screen and (max-width: 40.625em) { #js-course-mount #js-course-mount .card-annotation .popup { max-width:95%; margin: 0 2.5%; left: 0; } } #js-course-mount .card-annotation .popup .inner { padding: 0 20px 20px; float: left; width: 100%; } #js-course-mount .card-annotation .popup ul { float: right; } #js-course-mount .card-annotation .popup ul li { display: inline-block; margin-left: 15px; } #js-course-mount .card-annotation .media-thumbnail { float: left; margin: 0 .9375rem .625rem 0; } #js-course-mount .card-annotation .annotation-note { margin: 0 0 .65em; word-break: break-all; } #js-course-mount .card-annotation .clear { clear: both; } #js-course-mount .card-annotation .left { float: left; margin: 0; } @media screen and (min-width: 32.5625em) { #js-course-mount #js-course-mount .card-annotation .left { width:50%; } } #js-course-mount .card-annotation .right { float: right; margin: 0; } @media screen and (max-width: 32.5625em) { #js-course-mount #js-course-mount .card-annotation .right { float:none; text-align: center; } } #js-course-mount .card-annotation .row { border-top: 1px solid #ddd; display: block; padding-top: .625rem; margin: 0 0 .625rem; float: left; width: 100%; } #js-course-mount .card-annotation .note.quote, #js-course-mount .card-annotation .row.border { margin-bottom: 0; } #js-course-mount .card-annotation div.quote { padding-bottom: .9375rem; } #js-course-mount .card-annotation .note { color: #888; padding-bottom: .5rem; display: inline-block; } #js-course-mount .card-annotation .social-sharing { text-align: center; margin-top: .9375rem; } #js-course-mount .card-annotation .social-sharing li { margin: .625rem .625rem 0; } #js-course-mount .card-annotation .sign-up { text-align: center; padding: 0 7.5rem; } #js-course-mount .card-annotation .sign-up h1 { padding-bottom: 0; margin-bottom: 0; } #js-course-mount .card-annotation .sign-up>p { margin-top: 10px; } @media screen and (max-width: 51.3125em) { #js-course-mount #js-course-mount .card-annotation .sign-up { padding:0; } } #js-course-mount .card-annotation .annotation-quote { color: rgba(64,64,64,.75); font-family: Georgia,serif; margin: 0; } #js-course-mount .card-annotation .annotation-quote:before { content: "\201C"; float: left; font-size: 50px; } #js-course-mount .card-annotation .annotation-quote:after { content: "\201D"; float: right; font-size: 50px; } #js-course-mount .ios-app-teaser { position: relative; height: 40px; margin: 0 1.25rem -5px; } @media only screen and (max-width: 520px) { #js-course-mount #js-course-mount .ios-app-teaser { margin:0 1.25rem -5px; } } #js-course-mount .ios-app-teaser ul { background: #404040; } #js-course-mount .ios-app-teaser ul:after, #js-course-mount .ios-app-teaser ul:before { content: " "; display: table; } #js-course-mount .ios-app-teaser ul:after { clear: both; } #js-course-mount .ios-app-teaser ul li { list-style: none; float: left; width: 50%; text-align: center; font-size: 16px; vertical-align: middle; } #js-course-mount .ios-app-teaser ul li:active, #js-course-mount .ios-app-teaser ul li:focus, #js-course-mount .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; } #js-course-mount .ios-app-teaser ul li a { display: block; color: #fff; font-weight: 300; padding: 10px 0; } #js-course-mount .ios-app-teaser ul li a:active, #js-course-mount .ios-app-teaser ul li a:focus, #js-course-mount .ios-app-teaser ul li a:hover { text-decoration: none; color: #fff; } #js-course-mount .sbo-toc .ios-app-teaser { display: none; margin: 0; } #js-course-mount .sbo-toc.has-ios-app-teaser .ios-app-teaser { display: block; } #js-course-mount .sbo-toc.has-ios-app-teaser .close { top: 40px; } #js-course-mount body.night-mode .sbo-toc .ios-app-teaser ul { background: #222; border-bottom: 1px solid #444; } #js-course-mount 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; } #js-course-mount .pagefoot { font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; font-size: 14px; font-size: .875rem; color: #777; line-height: 1.25em; } #js-course-mount .pagefoot .copyright { display: block; margin: .3em 0; } @media screen and (min-width: 32.5625em) { #js-course-mount #js-course-mount .pagefoot .copyright { display:inline; } } #js-course-mount .pagefoot a { color: #404040; } #js-course-mount .pagefoot a:active, #js-course-mount .pagefoot a:focus, #js-course-mount .pagefoot a:hover, #js-course-mount .pagefoot li a { color: #d3002d; } #js-course-mount .pagefoot li { display: inline-block; line-height: 1.5em; } #js-course-mount .pagefoot li:after { content: ' / '; } #js-course-mount .pagefoot li:last-child:after, #js-course-mount .subscribe-nag .promotion strike:before { content: ''; } #js-course-mount .user-anon .pagefoot { margin-top: 1em; } #js-course-mount .user-anon .pagefoot a { color: #777; } #js-course-mount .user-anon .pagefoot li a { color: #D64309; } #js-course-mount .pagefoot .icon-up { display: block; padding: 10px; position: fixed; right: 20px; bottom: 20px; z-index: 99999; text-transform: lowercase; border: 1px solid #ccc; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; background-color: #d5d5d5; text-decoration: none; } #js-course-mount .agreement-inc .default-content h2, #js-course-mount .course-nag .close, #js-course-mount .course-nag .message, #js-course-mount .layout2 nav h2, #js-course-mount .legalese h2 { text-transform: uppercase; } #js-course-mount .pagefoot .icon-up span { display: none; } #js-course-mount .pagefoot .icon-up:before { font-size: 19px; content: '\2B06'; font-family: SSFlow; display: inline-block; vertical-align: middle; color: #777; } #js-course-mount .subscribe-panel .pagefoot .icon-up { bottom: 80px; } #js-course-mount .user-anon .pagefoot #legal, #js-course-mount .user-anon .pagefoot nav { margin: .3125rem 0 .3125rem 3.4375rem; line-height: 1.15em; } #js-course-mount .user-anon .pagefoot nav a { text-decoration: none; } #js-course-mount .user-anon .pagefoot div#legal a { color: #777; text-decoration: none; } #js-course-mount .full-support, #js-course-mount .pagefoot .full-support { display: none; } @media screen and (min-width: 48.0625em) { #js-course-mount #js-course-mount .full-support, #js-course-mount .pagefoot .full-support { display:inline-block; } #js-course-mount .mobile-support, #js-course-mount .pagefoot .mobile-support { display: none; } } #js-course-mount .subscribe-nag.collapsed .expanded, #js-course-mount .subscribe-nag.promotion-included .pagefoot { display: none; } #js-course-mount #js-subscribe-panel-filler { float: left; width: 100%; } #js-course-mount .subscribe-nag { overflow: hidden; 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; } #js-course-mount .subscribe-nag .cta-group { padding-bottom: 15px; } #js-course-mount .subscribe-nag.expired-panel, #js-course-mount .subscribe-nag.trial-panel { max-height: 350px; } #js-course-mount .subscribe-nag.promotion-included { max-height: 515px; color: #FFF; } #js-course-mount .subscribe-nag.collapsed p { margin: 12px 0; } #js-course-mount .subscribe-nag h2, #js-course-mount .subscribe-nag h3 { line-height: 1.1em; color: #404040; font-size: 36px; font-size: 2.25rem; font-weight: 300; margin: 1.25rem 3rem; } #js-course-mount .subscribe-nag p { color: #4a3c31; } #js-course-mount .subscribe-nag h3 { font-size: 24px; font-size: 1.5rem; } #js-course-mount .subscribe-nag .green { color: #d3002d; } #js-course-mount .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; } #js-course-mount .subscribe-nag .js-toggle-nag:focus, #js-course-mount .subscribe-nag .js-toggle-nag:hover { background-color: #d3002d; color: #FFF; text-decoration: none; } #js-course-mount .subscribe-nag.expanded { position: absolute; } #js-course-mount .subscribe-nag.collapsed .sample-message { padding: 0; } #js-course-mount .subscribe-nag.collapsed h2 { font-size: 24px; font-size: 1.5rem; margin: .625rem 3rem .9375rem; } #js-course-mount .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; } #js-course-mount .subscribe-nag a { text-decoration: none; } #js-course-mount .subscribe-nag .promotion { background-color: #000; padding: 20px 10px; margin-bottom: 20px; position: relative; } #js-course-mount .subscribe-nag .promotion strike { position: relative; text-decoration: none; } #js-course-mount .subscribe-nag .promotion strike:before { border-bottom: 4px solid #FC4747; position: absolute; width: 115%; top: 46%; transform: rotate(-14deg); left: -6%; } #js-course-mount .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; } #js-course-mount .description em, #js-course-mount .description i, #js-course-mount .display-modal-view p.modal__document cite, #js-course-mount .markdown em, #js-course-mount .no-results i, #js-course-mount .publisher-extra em, #js-course-mount .publisher-extra i, #js-course-mount .search-help-container i { font-style: italic; } #js-course-mount .subscribe-nag .promotion h2 { color: #FFF; margin-top: 10px; } #js-course-mount .subscribe-nag .promotion b { font-weight: 700; } #js-course-mount .subscribe-nag .promotion .button { background: no-repeat #fff; text-shadow: none; border-radius: 0; color: #333; padding: 10px 20px; } #js-course-mount .subscribe-nag .promotion .callout { position: absolute; right: 0; top: 0; } #js-course-mount .subscribe-nag .promotion .callout img { width: 30%; float: right; } #js-course-mount .subscribe-nag .promotion .callout .accessible-text { position: relative; text-indent: -9999px; display: block; } @media screen and (max-width: 56.25em) { #js-course-mount #js-course-mount .subscribe-nag .promotion h1, #js-course-mount .subscribe-nag .promotion h2, #js-course-mount .subscribe-nag .promotion h3 { font-size:2em; } } @media screen and (max-width: 56.25em) { #js-course-mount #js-course-mount .subscribe-nag .promotion h1, #js-course-mount .subscribe-nag .promotion h2, #js-course-mount .subscribe-nag .promotion h3 { font-size:1.5em; } } #js-course-mount .subscribe-nag .help { font-size: smaller; text-decoration: none; } #js-course-mount .subscribe-nag .trending-topics { margin: 0; } #js-course-mount .subscribe-nag .old-price { text-decoration: line-through; } #js-course-mount .course-nag .close:hover, #js-course-mount .display-modal-view button.close-display-modal:hover, #js-course-mount .subscribe-nag .sample-message .cta-group .signin a, #js-course-mount .topic { text-decoration: none; } #js-course-mount .subscribe-nag .bigbutton.loading, #js-course-mount .subscribe-nag .bigbutton.loading:hover { background-color: #B2B4B3; background-image: none; } #js-course-mount .subscribe-nag .bigbutton.loading .spinner, #js-course-mount .subscribe-nag .bigbutton.loading:hover .spinner { background: url(http://cdn.oreillystatic.com/static/images/loading.6b1710a5f2bc.gif) center center no-repeat; background-size: 16px; width: 16px; display: inline-block; text-indent: -9999px; float: right; } #js-course-mount .subscribe-nag .bigbutton .spinner { display: none; } #js-course-mount .subscribe-nag .pagefoot #legal a.copyright, #js-course-mount .subscribe-nag .pagefoot nav a.copyright { color: #777; } #js-course-mount .subscribe-nag.anon-panel h2, #js-course-mount .subscribe-nag.anon-panel h3 { margin: .625rem .75rem; } @media screen and (max-width: 56.25em) { #js-course-mount #js-course-mount .subscribe-nag.anon-panel .doc-title { display:none; } #js-course-mount .subscribe-nag.anon-panel .doc-type { white-space: nowrap; } } #js-course-mount .subscribe-nag .sample-message { margin: 0 auto; padding: .3125rem 1.25rem 0; -webkit-border-radius: 0; border-radius: 0; background-clip: padding-box; -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; } #js-course-mount .subscribe-nag .sample-message .cta-group .bigbutton { display: inline-block; } #js-course-mount .subscribe-nag .sample-message .cta-group .signin { display: inline-block; font-size: smaller; } #js-course-mount .subscribe-nag .sample-message .text-links { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; } #js-course-mount .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; } #js-course-mount .subscribe-nag .sample-message footer { text-align: left; margin: .9375rem 0 .625rem; padding: 0; } #js-course-mount .subscribe-nag .sample-message footer object { display: none; } #js-course-mount .subscribe-nag .sample-message footer #logo { background: url(http://cdn.oreillystatic.com/static/images/sunshine_flag.0e1a4eec8506.svg) right -10px no-repeat; background-size: 45px 66px; width: 45px; height: 42px; margin-top: -12px; margin-right: 10px; text-indent: -9999px; display: block; float: left; padding-bottom: 3.75rem; } @media screen and (max-width: 32.5em) { #js-course-mount #js-course-mount .subscribe-nag .sample-message footer #logo { display:none; } } #js-course-mount .subscribe-nag .sample-message.nag-a, #js-course-mount .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; } #js-course-mount .subscribe-nag .sample-message.nag-a h2, #js-course-mount .subscribe-nag .sample-message.nag-b h2 { text-align: left; margin-left: 0; } #js-course-mount .subscribe-nag .sample-message.nag-a .doc-title, #js-course-mount .subscribe-nag .sample-message.nag-b .doc-title { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group { display: inline-block; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group .bigbutton, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group .bigbutton { width: 45%; padding: 10px; font-size: 1rem; font-weight: 400; float: left; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group .bigbutton.team-btn, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group .bigbutton.team-btn { width: 45%; margin-right: 0; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group div.bigbutton, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group .signin, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group .signin { width: 100%; margin: 5px 0; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form { float: left; text-align: left; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form li, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form li { display: inline-block; width: 31.5%; margin-right: 2%; vertical-align: top; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form li.password, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form li.password { margin-right: 0; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form li input, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form li input { max-width: 100%; min-width: 100%; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form li.error input, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form li.error input { margin-bottom: 0; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form .terms-conditions, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form .terms-conditions { display: none; width: 100%!important; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form .terms-conditions input, #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form .terms-conditions label, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form .terms-conditions input, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form .terms-conditions label { display: inline-block!important; margin: 0 10px 10px 0; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form .terms-conditions .error, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form .terms-conditions .error { display: block; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .terms-conditions, #js-course-mount .subscribe-nag .sample-message.nag-b.active .terms-conditions { display: block; float: left; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .terms-conditions label, #js-course-mount .subscribe-nag .sample-message.nag-b.active .terms-conditions label { width: 90%; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .terms-conditions #id_legal, #js-course-mount .subscribe-nag .sample-message.nag-b.active .terms-conditions #id_legal { vertical-align: top; margin: 3px 10px 0 0; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .doc-title, #js-course-mount .subscribe-nag .sample-message.nag-b.active .doc-title { display: inline-block; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .team-btn, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group button, #js-course-mount .subscribe-nag .sample-message.nag-b.active .team-btn { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .bigbutton, #js-course-mount .subscribe-nag .sample-message.nag-b.active .bigbutton { width: 100%; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form { width: 69%; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group { width: 30%; float: right; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group .bigbutton, #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group .team-btn { width: 100%; line-height: initial; } #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form { width: 85%; display: none; } #js-course-mount .subscribe-nag .sample-message.nag-b h2 { margin: 1rem 0 1rem 7%; float: left; width: 50%; } #js-course-mount .subscribe-nag .sample-message.nag-b form { width: 75%; margin: 1rem auto; } #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group { width: 35%; float: right; margin: .5rem 0 1rem 2%; } #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton { display: block; width: 100%; margin: 0 0 10px; } #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton.mobile { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-b.active h2 { width: 73%; margin: 1rem auto; float: none; } #js-course-mount .subscribe-nag .sample-message.nag-b.active form { margin: 0 auto; } #js-course-mount .subscribe-nag .sample-message.nag-b.active .registration-form { display: block; width: 100%; } #js-course-mount .subscribe-nag .sample-message.nag-b.active .registration-form li { width: 50%; margin-right: 0; float: left; padding: 0 1%; } #js-course-mount .subscribe-nag .sample-message.nag-b.active .registration-form_item.email { width: 100%; display: block; } #js-course-mount .subscribe-nag .sample-message.nag-b.active .cta-group button { display: block; } #js-course-mount .subscribe-nag .sample-message.nag-b.active .cta-group div.bigbutton { display: none; } @media screen and (max-width: 50em) { #js-course-mount #js-course-mount .subscribe-nag .sample-message.nag-a, #js-course-mount .subscribe-nag .sample-message.nag-b { padding:0 10%; } #js-course-mount .subscribe-nag .sample-message.nag-a h2, #js-course-mount .subscribe-nag .sample-message.nag-b h2 { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form { display: none; float: none; padding: 1.5rem 16.5% .5rem; width: 100%; } #js-course-mount .subscribe-nag .sample-message.nag-a .registration-form li, #js-course-mount .subscribe-nag .sample-message.nag-b .registration-form li { display: block; width: 100%; } #js-course-mount .subscribe-nag .sample-message.nag-a form, #js-course-mount .subscribe-nag .sample-message.nag-b form { margin-bottom: .75rem; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group { width: 100%; padding: 1.5rem 16.5% 0; margin: 0; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group div.bigbutton, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton { display: block; margin: 0 0 10px; } #js-course-mount .subscribe-nag .sample-message.nag-a .cta-group button, #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group button { display: none; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; margin: 0; } #js-course-mount .subscribe-nag .sample-message.nag-a.active h2, #js-course-mount .subscribe-nag .sample-message.nag-b.active h2 { display: block; padding: 1.5rem 16.5% 0; margin: 0; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .registration-form, #js-course-mount .subscribe-nag .sample-message.nag-b.active .registration-form { display: block; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .doc-title, #js-course-mount .subscribe-nag .sample-message.nag-b.active .doc-title { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .terms-conditions input, #js-course-mount .subscribe-nag .sample-message.nag-b.active .terms-conditions input { margin: 4px 10px 0 0; vertical-align: top; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .terms-conditions label, #js-course-mount .subscribe-nag .sample-message.nag-b.active .terms-conditions label { width: 90%; } #js-course-mount .subscribe-nag .sample-message.nag-b form, #js-course-mount .subscribe-nag .sample-message.nag-b.active h2 { width: 100%; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .cta-group, #js-course-mount .subscribe-nag .sample-message.nag-b.active .cta-group { padding: 0 16.5%; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .cta-group button, #js-course-mount .subscribe-nag .sample-message.nag-b.active .cta-group button { display: block; } #js-course-mount .subscribe-nag .sample-message.nag-a.active .cta-group div.bigbutton, #js-course-mount .subscribe-nag .sample-message.nag-b.active .cta-group div.bigbutton { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group { padding: 0; margin: 0 0 10px; } #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton.mobile { display: inline-block; float: none; } #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group div.bigbutton, #js-course-mount .subscribe-nag .sample-message.nag-b.active .cta-group div.bigbutton.mobile { display: none; } #js-course-mount .subscribe-nag .sample-message.nag-b .cta-group .signin { margin: 0; width: 100%; } #js-course-mount .subscribe-nag .sample-message.nag-b.active .registration-form li { width: 100%!important; } #js-course-mount .subscribe-nag .sample-message.nag-b.active .cta-group { padding: 0 17%; } #js-course-mount .subscribe-nag .sample-message .text-links { display: block; margin: 10px 0 0; } } #js-course-mount .subscribe-nag p.welcome { font-size: 1.5rem; margin: 1.5rem 0; font-weight: 300; } #js-course-mount .subscribe-nag .registration-form__minimize:before { content: "\2421"; font-family: SSFlow; position: absolute; } #js-course-mount .subscribe-nag .registration-form__minimize, #js-course-mount .subscribe-nag .registration-form__minimize__title { display: none; } #js-course-mount .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) { #js-course-mount #js-course-mount .subscribe-nag.collapsed .header { margin:10px 0; } #js-course-mount .subscribe-nag.collapsed footer { margin-top: 5px!important; } #js-course-mount .subscribe-nag h2 { font-size: 24px; font-size: 1.5rem; } #js-course-mount .subscribe-nag h3 { font-size: 18px; font-size: 1.125rem; } #js-course-mount .subscribe-nag .sample-message .signin { position: relative; right: auto; margin: 0 0 .9375rem; font-size: small; } #js-course-mount .subscribe-nag .sample-message p { font-size: 16px; font-size: 1rem; } #js-course-mount .subscribe-nag .sample-message p.usage-data { padding: 0 3.125rem; line-height: 1.3em; } #js-course-mount .subscribe-nag .sample-message .bigbutton { margin: 0 0 .625rem; } #js-course-mount .subscribe-nag .sample-message .comment { margin: -10px auto 0!important; } #js-course-mount .subscribe-nag footer { text-align: center!important; } #js-course-mount .subscribe-nag footer #logo { float: none!important; margin: 0 0 12px!important; padding: 0!important; } #js-course-mount .subscribe-nag footer ul { padding: 0; margin-top: 5px; font-size: smaller; line-height: 1em; } } #js-course-mount .cover-position-right { max-width: 100%; max-height: 100%; height: auto; display: inline-block; } #js-course-mount .academic-text { text-align: left; } #js-course-mount .academic-text h1 { color: #777; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; font-size: 40px; font-size: 2.5rem; } #js-course-mount .academic-text h2 { font-size: 20px; font-size: 1.25rem; } #js-course-mount .academic-text ol li { font-size: 18px; font-size: 1.125rem; } #js-course-mount #academic-text-bold { font-weight: 700; } #js-course-mount .support-text { margin-top: 20px; } #js-course-mount .support-text p { font-size: 14px; font-size: .875rem; margin: 0; } @media screen and (min-width: 1024px) and (orientation:landscape) { #js-course-mount #js-course-mount .cover-position-right { float:right; } #js-course-mount .academic-text { float: left; } #js-course-mount .academics-topics { clear: left; } } #js-course-mount #billing_form:after, #js-course-mount .results-list .meta:after, #js-course-mount .search-result-page .facets:after, #js-course-mount .topic-display:after, #js-course-mount .topic-select:after, #js-course-mount .user-profile .annotation-list .js-more-annotations:after, section.big-search header:after { clear: both; } #js-course-mount .academic-mailto-link { margin-top: 20px; } #js-course-mount .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); text-align: center; font-size: 14px; line-height: 1.3; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; } #js-course-mount .course-nag .close { padding: 1px 7px; position: absolute; top: 0; right: 0; font-size: 12px; font-weight: 600; color: #fff; background: #000; } #js-course-mount .course-nag .background { width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } #js-course-mount .course-nag .avatar { margin-bottom: 5px; } #js-course-mount .course-nag .avatar img { width: 100px; height: 100px; border: 2px solid #fff; border-radius: 50%; } #js-course-mount .course-nag .time { font-weight: 600; } #js-course-mount .course-nag .button { display: block; margin-top: 10px; padding: 7px 4px; font-size: 13px; } #js-course-mount .display-modal-view, #js-course-mount .modal-view { display: none; overflow: scroll; position: absolute; z-index: 99; } #js-course-mount .course-nag .button.is-streaming-now { color: #008542; } #js-course-mount .display-modal-view { text-align: center; background: #fff; border: 1px solid #d5d6d2; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; width: 650px; top: 10%; left: 50%; margin-left: -325px; font-family: 'guardian-text-oreilly',open-sans,Helvetica,Arial,sans-serif; } @media screen and (max-width: 620px) { #js-course-mount #js-course-mount .display-modal-view { width:95%; margin: 0 2.5%!important; left: 0!important; } } #js-course-mount .display-modal-view button.close-display-modal { position: absolute; top: 0; right: 0; padding: 10px; border: none; } #js-course-mount .display-modal-view button.close-display-modal:before { font-family: SSFlow; font-size: 14px; content: '\2421'; color: #777; } #js-course-mount .display-modal-view h2.modal__title { font-size: 36px; font-size: 2.25rem; padding: 1rem; font-weight: 300; line-height: 1.3; margin: 0; color: #404040; } #js-course-mount .display-modal-view p.modal__body, #js-course-mount .display-modal-view p.modal__document, #js-course-mount .modal-view h2.modal__title { padding: 1rem; font-weight: 300; line-height: 1.3; color: #777; } #js-course-mount .display-modal-view p.modal__body { font-size: 24px; font-size: 1.5rem; margin: 0; } #js-course-mount .display-modal-view p.modal__document { font-size: 16px; font-size: 1rem; margin: 0; } #js-course-mount .display-modal-view div.modal__controls { margin-bottom: 1rem; } #js-course-mount .modal-view { text-align: left; background: #fff; border: 1px solid #d5d6d2; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; width: 650px; top: 30%; left: 50%; margin-left: -325px; } @media screen and (max-width: 620px) { #js-course-mount #js-course-mount .modal-view { width:95%; margin: 0 2.5%!important; left: 0!important; } } #js-course-mount .modal-view h2.modal__title { font-size: 24px; font-size: 1.5rem; border-bottom: 1px solid #d5d5d5; margin: 0; } #js-course-mount .modal-view .modal__content form fieldset { padding: 0 1rem 1rem; } #js-course-mount .modal-view .modal__content form fieldset label { font-size: 16px; font-size: 1rem; } #js-course-mount .modal-view .modal__content form fieldset input { width: 100%; max-width: 100%; } #js-course-mount .modal-view .modal__controls { float: right; } #js-course-mount .buttongroup { margin: 1rem 0 0; text-align: right; position: relative; } #js-course-mount .rememberme { padding-top: .5rem; font-size: 13px; font-size: .8125rem; } #js-course-mount .forgotpass { font-size: 13px; font-size: .8125rem; font-weight: 400; } #js-course-mount .showmore { display: block; width: 100%; max-width: 10em; text-align: center; margin: 1em auto; } #js-course-mount .topic-display:after, #js-course-mount .topic-display:before, #js-course-mount .topic-select:after, #js-course-mount .topic-select:before { content: " "; display: table; } #js-course-mount .topic { display: inline-block; z-index: 1; } #js-course-mount .topic span:before, #js-course-mount .topic:after, #js-course-mount .topic:before { font-family: SSFlow; display: block; position: absolute; top: 0; left: 0; color: #ccc; text-align: center; } #js-course-mount [class*=hex-] .topic { font-size: 18px; position: relative; } #js-course-mount [class*=hex-] .topic:before,[class*=hex-] .topic:focus:before,[class*=hex-] .topic:hover:before { content: "\F704"; } #js-course-mount .no-touch [class*=hex-] .topic:focus span:before, #js-course-mount .no-touch [class*=hex-] .topic:hover span:before,[class*=hex-] .topic.active span:before { content: "\2713"; } #js-course-mount [class*=hex-] .topic.active:before { content: "\F702"; } #js-course-mount [class*=hex-] .topic.active:after { content: "\F703"; } #js-course-mount div.no-interest-topics li { margin-bottom: 4px; } #js-course-mount div.no-interest-topics li a.no-interest-topic { color: rgba(118,118,118,.35); font-size: 16px; } #js-course-mount [class*=hex-] li { display: block; margin: 0 0 10px -2px; width: 100%; } #js-course-mount [class*=hex-] li .topic { min-height: 66px; padding: 0 10px 0 70px; width: 100%; text-align: left; } #js-course-mount [class*=hex-] li .topic span { display: table-cell; vertical-align: middle; height: 66px; } #js-course-mount [class*=hex-] li .topic span:before,[class*=hex-] li .topic:after,[class*=hex-] li .topic:before { width: 60px; height: 66px; font-size: 60px; line-height: 81px; } #js-course-mount [class*=hex-] li .topic span:before { font-size: 25px; line-height: 76px; } #js-course-mount .hex-static .topic-display .topic span:before, #js-course-mount .hex-static .topic-display .topic:focus span:before, #js-course-mount .hex-static .topic-display .topic:hover span:before { content: ''; } #js-course-mount .hex-small li { min-width: 252px; } @media screen and (min-width: 40.625em) { #js-course-mount .hex-small li { display:inline-block; width: 50%; } #js-course-mount .ie8 .hex-small li { width: 47.5%; } } @media screen and (min-width: 57.1875em) { #js-course-mount .hex-small li { width:33.3%; } #js-course-mount .ie8 .hex-small li { width: 31.5%; } } @media screen and (min-width: 78.75em) { #js-course-mount .hex-small li { width:24.8%; } #js-course-mount .ie8 .hex-small li { width: 23.5%; } } @media screen and (min-width: 30.0625em) { #js-course-mount .hex-big ul, #js-course-mount .hex-static ul { margin:40px -23px 0 0; } #js-course-mount .hex-big li, #js-course-mount .hex-static li { display: inline-block; vertical-align: top; padding: 0; width: 125px; min-height: 140px; margin: 0 20px 40px -2px; } #js-course-mount .hex-big li .topic, #js-course-mount .hex-static li .topic { min-height: 140px; padding: 150px 0 0; width: 100%; text-align: center; } #js-course-mount .hex-big li .topic span, #js-course-mount .hex-static li .topic span { display: block; vertical-align: middle; height: auto; } #js-course-mount .hex-big li .topic span:before, #js-course-mount .hex-big li .topic:after, #js-course-mount .hex-big li .topic:before, #js-course-mount .hex-static li .topic span:before, #js-course-mount .hex-static li .topic:after, #js-course-mount .hex-static li .topic:before { width: 100%; height: 138px; font-size: 125px; line-height: 168px; } #js-course-mount .hex-big li .topic span:before, #js-course-mount .hex-static li .topic span:before { font-size: 50px; line-height: 151px; } } #js-course-mount .no-touch [class*=hex-] .topic:focus span:before, #js-course-mount .no-touch [class*=hex-] .topic:hover span:before { color: #ccc; } #js-course-mount .no-touch [class*=hex-] .topic.active:focus span:before, #js-course-mount .no-touch [class*=hex-] .topic.active:hover span:before,[class*=hex-] .topic.active span:before { color: #070707; } #js-course-mount .no-touch .topic:focus:after, #js-course-mount .no-touch .topic:hover:after, #js-course-mount .topic.active:after { color: #00b78a; } #js-course-mount .no-touch .topic:focus:before, #js-course-mount .no-touch .topic:hover:before, #js-course-mount .topic.active:before { color: #00ce98; } #js-course-mount .active.topic.appleios:after, #js-course-mount .active.topic.css:after, #js-course-mount .active.topic.design:after, #js-course-mount .active.topic.ios:after, #js-course-mount .active.topic.management:after, #js-course-mount .active.topic.net:after, #js-course-mount .active.topic.python:after, #js-course-mount .active.topic.teal:after, #js-course-mount .no-touch .topic.appleios:focus:after, #js-course-mount .no-touch .topic.appleios:hover:after, #js-course-mount .no-touch .topic.css:focus:after, #js-course-mount .no-touch .topic.css:hover:after, #js-course-mount .no-touch .topic.design:focus:after, #js-course-mount .no-touch .topic.design:hover:after, #js-course-mount .no-touch .topic.ios:focus:after, #js-course-mount .no-touch .topic.ios:hover:after, #js-course-mount .no-touch .topic.management:focus:after, #js-course-mount .no-touch .topic.management:hover:after, #js-course-mount .no-touch .topic.net:focus:after, #js-course-mount .no-touch .topic.net:hover:after, #js-course-mount .no-touch .topic.python:focus:after, #js-course-mount .no-touch .topic.python:hover:after, #js-course-mount .no-touch .topic.teal:focus:after, #js-course-mount .no-touch .topic.teal:hover:after { color: #00b78a; } #js-course-mount .active.topic.appleios:before, #js-course-mount .active.topic.css:before, #js-course-mount .active.topic.design:before, #js-course-mount .active.topic.ios:before, #js-course-mount .active.topic.management:before, #js-course-mount .active.topic.net:before, #js-course-mount .active.topic.python:before, #js-course-mount .active.topic.teal:before, #js-course-mount .no-touch .topic.appleios:focus:before, #js-course-mount .no-touch .topic.appleios:hover:before, #js-course-mount .no-touch .topic.css:focus:before, #js-course-mount .no-touch .topic.css:hover:before, #js-course-mount .no-touch .topic.design:focus:before, #js-course-mount .no-touch .topic.design:hover:before, #js-course-mount .no-touch .topic.ios:focus:before, #js-course-mount .no-touch .topic.ios:hover:before, #js-course-mount .no-touch .topic.management:focus:before, #js-course-mount .no-touch .topic.management:hover:before, #js-course-mount .no-touch .topic.net:focus:before, #js-course-mount .no-touch .topic.net:hover:before, #js-course-mount .no-touch .topic.python:focus:before, #js-course-mount .no-touch .topic.python:hover:before, #js-course-mount .no-touch .topic.teal:focus:before, #js-course-mount .no-touch .topic.teal:hover:before { color: #00ce98; } #js-course-mount .active.topic.agile:after, #js-course-mount .active.topic.blue:after, #js-course-mount .active.topic.business-communication:after, #js-course-mount .active.topic.databases:after, #js-course-mount .active.topic.graphic-design:after, #js-course-mount .active.topic.java:after, #js-course-mount .active.topic.microsoft:after, #js-course-mount .active.topic.product-management:after, #js-course-mount .active.topic.ruby:after, #js-course-mount .no-touch .topic.agile:focus:after, #js-course-mount .no-touch .topic.agile:hover:after, #js-course-mount .no-touch .topic.blue:focus:after, #js-course-mount .no-touch .topic.blue:hover:after, #js-course-mount .no-touch .topic.business-communication:focus:after, #js-course-mount .no-touch .topic.business-communication:hover:after, #js-course-mount .no-touch .topic.databases:focus:after, #js-course-mount .no-touch .topic.databases:hover:after, #js-course-mount .no-touch .topic.graphic-design:focus:after, #js-course-mount .no-touch .topic.graphic-design:hover:after, #js-course-mount .no-touch .topic.java:focus:after, #js-course-mount .no-touch .topic.java:hover:after, #js-course-mount .no-touch .topic.microsoft:focus:after, #js-course-mount .no-touch .topic.microsoft:hover:after, #js-course-mount .no-touch .topic.product-management:focus:after, #js-course-mount .no-touch .topic.product-management:hover:after, #js-course-mount .no-touch .topic.ruby:focus:after, #js-course-mount .no-touch .topic.ruby:hover:after { color: #4badb7; } #js-course-mount .active.topic.agile:before, #js-course-mount .active.topic.blue:before, #js-course-mount .active.topic.business-communication:before, #js-course-mount .active.topic.databases:before, #js-course-mount .active.topic.graphic-design:before, #js-course-mount .active.topic.java:before, #js-course-mount .active.topic.microsoft:before, #js-course-mount .active.topic.product-management:before, #js-course-mount .active.topic.ruby:before, #js-course-mount .no-touch .topic.agile:focus:before, #js-course-mount .no-touch .topic.agile:hover:before, #js-course-mount .no-touch .topic.blue:focus:before, #js-course-mount .no-touch .topic.blue:hover:before, #js-course-mount .no-touch .topic.business-communication:focus:before, #js-course-mount .no-touch .topic.business-communication:hover:before, #js-course-mount .no-touch .topic.databases:focus:before, #js-course-mount .no-touch .topic.databases:hover:before, #js-course-mount .no-touch .topic.graphic-design:focus:before, #js-course-mount .no-touch .topic.graphic-design:hover:before, #js-course-mount .no-touch .topic.java:focus:before, #js-course-mount .no-touch .topic.java:hover:before, #js-course-mount .no-touch .topic.microsoft:focus:before, #js-course-mount .no-touch .topic.microsoft:hover:before, #js-course-mount .no-touch .topic.product-management:focus:before, #js-course-mount .no-touch .topic.product-management:hover:before, #js-course-mount .no-touch .topic.ruby:focus:before, #js-course-mount .no-touch .topic.ruby:hover:before { color: #55c0d3; } #js-course-mount .active.topic.analytics:after, #js-course-mount .active.topic.certification:after, #js-course-mount .active.topic.data-viz:after, #js-course-mount .active.topic.javascript:after, #js-course-mount .active.topic.lean:after, #js-course-mount .active.topic.purple:after, #js-course-mount .active.topic.startups:after, #js-course-mount .no-touch .topic.analytics:focus:after, #js-course-mount .no-touch .topic.analytics:hover:after, #js-course-mount .no-touch .topic.certification:focus:after, #js-course-mount .no-touch .topic.certification:hover:after, #js-course-mount .no-touch .topic.data-viz:focus:after, #js-course-mount .no-touch .topic.data-viz:hover:after, #js-course-mount .no-touch .topic.javascript:focus:after, #js-course-mount .no-touch .topic.javascript:hover:after, #js-course-mount .no-touch .topic.lean:focus:after, #js-course-mount .no-touch .topic.lean:hover:after, #js-course-mount .no-touch .topic.purple:focus:after, #js-course-mount .no-touch .topic.purple:hover:after, #js-course-mount .no-touch .topic.startups:focus:after, #js-course-mount .no-touch .topic.startups:hover:after { color: #6b619e; } #js-course-mount .active.topic.analytics:before, #js-course-mount .active.topic.certification:before, #js-course-mount .active.topic.data-viz:before, #js-course-mount .active.topic.javascript:before, #js-course-mount .active.topic.lean:before, #js-course-mount .active.topic.purple:before, #js-course-mount .active.topic.startups:before, #js-course-mount .no-touch .topic.analytics:focus:before, #js-course-mount .no-touch .topic.analytics:hover:before, #js-course-mount .no-touch .topic.certification:focus:before, #js-course-mount .no-touch .topic.certification:hover:before, #js-course-mount .no-touch .topic.data-viz:focus:before, #js-course-mount .no-touch .topic.data-viz:hover:before, #js-course-mount .no-touch .topic.javascript:focus:before, #js-course-mount .no-touch .topic.javascript:hover:before, #js-course-mount .no-touch .topic.lean:focus:before, #js-course-mount .no-touch .topic.lean:hover:before, #js-course-mount .no-touch .topic.purple:focus:before, #js-course-mount .no-touch .topic.purple:hover:before, #js-course-mount .no-touch .topic.startups:focus:before, #js-course-mount .no-touch .topic.startups:hover:before { color: #8070ba; } #js-course-mount .active.topic.android:after, #js-course-mount .active.topic.cisco:after, #js-course-mount .active.topic.devops:after, #js-course-mount .active.topic.math-science:after, #js-course-mount .active.topic.mobile:after, #js-course-mount .active.topic.pink:after, #js-course-mount .active.topic.teams:after, #js-course-mount .no-touch .topic.android:focus:after, #js-course-mount .no-touch .topic.android:hover:after, #js-course-mount .no-touch .topic.cisco:focus:after, #js-course-mount .no-touch .topic.cisco:hover:after, #js-course-mount .no-touch .topic.devops:focus:after, #js-course-mount .no-touch .topic.devops:hover:after, #js-course-mount .no-touch .topic.math-science:focus:after, #js-course-mount .no-touch .topic.math-science:hover:after, #js-course-mount .no-touch .topic.mobile:focus:after, #js-course-mount .no-touch .topic.mobile:hover:after, #js-course-mount .no-touch .topic.pink:focus:after, #js-course-mount .no-touch .topic.pink:hover:after, #js-course-mount .no-touch .topic.teams:focus:after, #js-course-mount .no-touch .topic.teams:hover:after { color: #bf497f; } #js-course-mount .active.topic.android:before, #js-course-mount .active.topic.cisco:before, #js-course-mount .active.topic.devops:before, #js-course-mount .active.topic.math-science:before, #js-course-mount .active.topic.mobile:before, #js-course-mount .active.topic.pink:before, #js-course-mount .active.topic.teams:before, #js-course-mount .no-touch .topic.android:focus:before, #js-course-mount .no-touch .topic.android:hover:before, #js-course-mount .no-touch .topic.cisco:focus:before, #js-course-mount .no-touch .topic.cisco:hover:before, #js-course-mount .no-touch .topic.devops:focus:before, #js-course-mount .no-touch .topic.devops:hover:before, #js-course-mount .no-touch .topic.math-science:focus:before, #js-course-mount .no-touch .topic.math-science:hover:before, #js-course-mount .no-touch .topic.mobile:focus:before, #js-course-mount .no-touch .topic.mobile:hover:before, #js-course-mount .no-touch .topic.pink:focus:before, #js-course-mount .no-touch .topic.pink:hover:before, #js-course-mount .no-touch .topic.teams:focus:before, #js-course-mount .no-touch .topic.teams:hover:before { color: #e6528c; } #js-course-mount .active.topic.big-data:after, #js-course-mount .active.topic.c-plus-plus:after, #js-course-mount .active.topic.digital-media:after, #js-course-mount .active.topic.diy-hardware:after, #js-course-mount .active.topic.interaction-design:after, #js-course-mount .active.topic.networking:after, #js-course-mount .active.topic.photography:after, #js-course-mount .active.topic.red:after, #js-course-mount .active.topic.social-media:after, #js-course-mount .active.topic.tools:after, #js-course-mount .no-touch .topic.big-data:focus:after, #js-course-mount .no-touch .topic.big-data:hover:after, #js-course-mount .no-touch .topic.c-plus-plus:focus:after, #js-course-mount .no-touch .topic.c-plus-plus:hover:after, #js-course-mount .no-touch .topic.digital-media:focus:after, #js-course-mount .no-touch .topic.digital-media:hover:after, #js-course-mount .no-touch .topic.diy-hardware:focus:after, #js-course-mount .no-touch .topic.diy-hardware:hover:after, #js-course-mount .no-touch .topic.interaction-design:focus:after, #js-course-mount .no-touch .topic.interaction-design:hover:after, #js-course-mount .no-touch .topic.networking:focus:after, #js-course-mount .no-touch .topic.networking:hover:after, #js-course-mount .no-touch .topic.photography:focus:after, #js-course-mount .no-touch .topic.photography:hover:after, #js-course-mount .no-touch .topic.red:focus:after, #js-course-mount .no-touch .topic.red:hover:after, #js-course-mount .no-touch .topic.social-media:focus:after, #js-course-mount .no-touch .topic.social-media:hover:after, #js-course-mount .no-touch .topic.tools:focus:after, #js-course-mount .no-touch .topic.tools:hover:after { color: #bc3f39; } #js-course-mount .active.topic.big-data:before, #js-course-mount .active.topic.c-plus-plus:before, #js-course-mount .active.topic.digital-media:before, #js-course-mount .active.topic.diy-hardware:before, #js-course-mount .active.topic.interaction-design:before, #js-course-mount .active.topic.networking:before, #js-course-mount .active.topic.photography:before, #js-course-mount .active.topic.red:before, #js-course-mount .active.topic.social-media:before, #js-course-mount .active.topic.tools:before, #js-course-mount .no-touch .topic.big-data:focus:before, #js-course-mount .no-touch .topic.big-data:hover:before, #js-course-mount .no-touch .topic.c-plus-plus:focus:before, #js-course-mount .no-touch .topic.c-plus-plus:hover:before, #js-course-mount .no-touch .topic.digital-media:focus:before, #js-course-mount .no-touch .topic.digital-media:hover:before, #js-course-mount .no-touch .topic.diy-hardware:focus:before, #js-course-mount .no-touch .topic.diy-hardware:hover:before, #js-course-mount .no-touch .topic.interaction-design:focus:before, #js-course-mount .no-touch .topic.interaction-design:hover:before, #js-course-mount .no-touch .topic.networking:focus:before, #js-course-mount .no-touch .topic.networking:hover:before, #js-course-mount .no-touch .topic.photography:focus:before, #js-course-mount .no-touch .topic.photography:hover:before, #js-course-mount .no-touch .topic.red:focus:before, #js-course-mount .no-touch .topic.red:hover:before, #js-course-mount .no-touch .topic.social-media:focus:before, #js-course-mount .no-touch .topic.social-media:hover:before, #js-course-mount .no-touch .topic.tools:focus:before, #js-course-mount .no-touch .topic.tools:hover:before { color: #d74c3f; } #js-course-mount .active.topic.business:after, #js-course-mount .active.topic.engineering:after, #js-course-mount .active.topic.game-development:after, #js-course-mount .active.topic.new-languages:after, #js-course-mount .active.topic.orange:after, #js-course-mount .active.topic.project-management:after, #js-course-mount .active.topic.ux-ia:after, #js-course-mount .no-touch .topic.business:focus:after, #js-course-mount .no-touch .topic.business:hover:after, #js-course-mount .no-touch .topic.engineering:focus:after, #js-course-mount .no-touch .topic.engineering:hover:after, #js-course-mount .no-touch .topic.game-development:focus:after, #js-course-mount .no-touch .topic.game-development:hover:after, #js-course-mount .no-touch .topic.new-languages:focus:after, #js-course-mount .no-touch .topic.new-languages:hover:after, #js-course-mount .no-touch .topic.orange:focus:after, #js-course-mount .no-touch .topic.orange:hover:after, #js-course-mount .no-touch .topic.project-management:focus:after, #js-course-mount .no-touch .topic.project-management:hover:after, #js-course-mount .no-touch .topic.ux-ia:focus:after, #js-course-mount .no-touch .topic.ux-ia:hover:after { color: #d3711a; } #js-course-mount .active.topic.business:before, #js-course-mount .active.topic.engineering:before, #js-course-mount .active.topic.game-development:before, #js-course-mount .active.topic.new-languages:before, #js-course-mount .active.topic.orange:before, #js-course-mount .active.topic.project-management:before, #js-course-mount .active.topic.ux-ia:before, #js-course-mount .no-touch .topic.business:focus:before, #js-course-mount .no-touch .topic.business:hover:before, #js-course-mount .no-touch .topic.engineering:focus:before, #js-course-mount .no-touch .topic.engineering:hover:before, #js-course-mount .no-touch .topic.game-development:focus:before, #js-course-mount .no-touch .topic.game-development:hover:before, #js-course-mount .no-touch .topic.new-languages:focus:before, #js-course-mount .no-touch .topic.new-languages:hover:before, #js-course-mount .no-touch .topic.orange:focus:before, #js-course-mount .no-touch .topic.orange:hover:before, #js-course-mount .no-touch .topic.project-management:focus:before, #js-course-mount .no-touch .topic.project-management:hover:before, #js-course-mount .no-touch .topic.ux-ia:focus:before, #js-course-mount .no-touch .topic.ux-ia:hover:before { color: #ef871b; } #js-course-mount .active.topic.c:after, #js-course-mount .active.topic.cloud:after, #js-course-mount .active.topic.git:after, #js-course-mount .active.topic.googleandroid:after, #js-course-mount .active.topic.nosql:after, #js-course-mount .active.topic.security:after, #js-course-mount .active.topic.web-design:after, #js-course-mount .active.topic.yellow:after, #js-course-mount .no-touch .topic.c:focus:after, #js-course-mount .no-touch .topic.c:hover:after, #js-course-mount .no-touch .topic.cloud:focus:after, #js-course-mount .no-touch .topic.cloud:hover:after, #js-course-mount .no-touch .topic.git:focus:after, #js-course-mount .no-touch .topic.git:hover:after, #js-course-mount .no-touch .topic.googleandroid:focus:after, #js-course-mount .no-touch .topic.googleandroid:hover:after, #js-course-mount .no-touch .topic.nosql:focus:after, #js-course-mount .no-touch .topic.nosql:hover:after, #js-course-mount .no-touch .topic.security:focus:after, #js-course-mount .no-touch .topic.security:hover:after, #js-course-mount .no-touch .topic.web-design:focus:after, #js-course-mount .no-touch .topic.web-design:hover:after, #js-course-mount .no-touch .topic.yellow:focus:after, #js-course-mount .no-touch .topic.yellow:hover:after { color: #e5a128; } #js-course-mount .active.topic.c:before, #js-course-mount .active.topic.cloud:before, #js-course-mount .active.topic.git:before, #js-course-mount .active.topic.googleandroid:before, #js-course-mount .active.topic.nosql:before, #js-course-mount .active.topic.security:before, #js-course-mount .active.topic.web-design:before, #js-course-mount .active.topic.yellow:before, #js-course-mount .no-touch .topic.c:focus:before, #js-course-mount .no-touch .topic.c:hover:before, #js-course-mount .no-touch .topic.cloud:focus:before, #js-course-mount .no-touch .topic.cloud:hover:before, #js-course-mount .no-touch .topic.git:focus:before, #js-course-mount .no-touch .topic.git:hover:before, #js-course-mount .no-touch .topic.googleandroid:focus:before, #js-course-mount .no-touch .topic.googleandroid:hover:before, #js-course-mount .no-touch .topic.nosql:focus:before, #js-course-mount .no-touch .topic.nosql:hover:before, #js-course-mount .no-touch .topic.security:focus:before, #js-course-mount .no-touch .topic.security:hover:before, #js-course-mount .no-touch .topic.web-design:focus:before, #js-course-mount .no-touch .topic.web-design:hover:before, #js-course-mount .no-touch .topic.yellow:focus:before, #js-course-mount .no-touch .topic.yellow:hover:before { color: #ffbb2a; } #js-course-mount .active.topic.core-programming:after, #js-course-mount .active.topic.green:after, #js-course-mount .active.topic.html5:after, #js-course-mount .active.topic.information-technologyoperations:after, #js-course-mount .active.topic.leadership:after, #js-course-mount .active.topic.php:after, #js-course-mount .active.topic.testing:after, #js-course-mount .active.topic.web-performance:after, #js-course-mount .no-touch .topic.core-programming:focus:after, #js-course-mount .no-touch .topic.core-programming:hover:after, #js-course-mount .no-touch .topic.green:focus:after, #js-course-mount .no-touch .topic.green:hover:after, #js-course-mount .no-touch .topic.html5:focus:after, #js-course-mount .no-touch .topic.html5:hover:after, #js-course-mount .no-touch .topic.information-technologyoperations:focus:after, #js-course-mount .no-touch .topic.information-technologyoperations:hover:after, #js-course-mount .no-touch .topic.leadership:focus:after, #js-course-mount .no-touch .topic.leadership:hover:after, #js-course-mount .no-touch .topic.php:focus:after, #js-course-mount .no-touch .topic.php:hover:after, #js-course-mount .no-touch .topic.testing:focus:after, #js-course-mount .no-touch .topic.testing:hover:after, #js-course-mount .no-touch .topic.web-performance:focus:after, #js-course-mount .no-touch .topic.web-performance:hover:after { color: #a3b53a; } #js-course-mount .active.topic.core-programming:before, #js-course-mount .active.topic.green:before, #js-course-mount .active.topic.html5:before, #js-course-mount .active.topic.information-technologyoperations:before, #js-course-mount .active.topic.leadership:before, #js-course-mount .active.topic.php:before, #js-course-mount .active.topic.testing:before, #js-course-mount .active.topic.web-performance:before, #js-course-mount .no-touch .topic.core-programming:focus:before, #js-course-mount .no-touch .topic.core-programming:hover:before, #js-course-mount .no-touch .topic.green:focus:before, #js-course-mount .no-touch .topic.green:hover:before, #js-course-mount .no-touch .topic.html5:focus:before, #js-course-mount .no-touch .topic.html5:hover:before, #js-course-mount .no-touch .topic.information-technologyoperations:focus:before, #js-course-mount .no-touch .topic.information-technologyoperations:hover:before, #js-course-mount .no-touch .topic.leadership:focus:before, #js-course-mount .no-touch .topic.leadership:hover:before, #js-course-mount .no-touch .topic.php:focus:before, #js-course-mount .no-touch .topic.php:hover:before, #js-course-mount .no-touch .topic.testing:focus:before, #js-course-mount .no-touch .topic.testing:hover:before, #js-course-mount .no-touch .topic.web-performance:focus:before, #js-course-mount .no-touch .topic.web-performance:hover:before { color: #b6d141; } #js-course-mount .t-ipass-msg { display: none; } #js-course-mount .testing { background: green; margin: 0 20px; padding: 20px; position: relative; max-width: 1200px; } @media (min-width: 1295px) { #js-course-mount .testing { margin:0 auto; } } #js-course-mount .home-panel { padding: 8px 10px 10px; } #js-course-mount .home-panel:focus, #js-course-mount .home-panel:hover { background-color: #fff; } #js-course-mount .home-panel a { display: block; padding: 8px 18px; font-size: 21px; line-height: 1.4em; } #js-course-mount .home-panel a:focus, #js-course-mount .home-panel a:hover { background: no-repeat!important; } #js-course-mount .android-promotion-wrapper { display: block; overflow: hidden; max-width: 1500px; margin: 1em auto; } #js-course-mount .apps-promotion { position: relative; max-width: 1600px; margin: 0 auto 20px; padding: 15px; overflow: hidden; background-color: #e1dfda; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; box-sizing: border-box; } #js-course-mount .apps-promotion, #js-course-mount .simplelist .list-description { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; } #js-course-mount .apps-promotion .close-promotion { position: absolute; right: 25px; top: 5px; } #js-course-mount .apps-promotion .close-promotion:before { speak: none; position: relative; top: 12px; left: 8px; height: 24px; width: 24px; line-height: 24px; font-size: 16px; color: #786d65; font-family: SSFlow; content: '\2421'; } #js-course-mount .apps-promotion .close-promotion:hover { color: #333; text-decoration: none; } @media (min-width: 56.25em) { #js-course-mount .apps-promotion { padding:15px 2% 15px 49%; background-image: url(http://cdn.oreillystatic.com/static/images/screenshot-ios-queue-ipad-iphone-half@2x.6e8c114b8e19.png); background-size: 44% auto; background-position: 4% bottom; background-repeat: no-repeat; } #js-course-mount .apps-promotion.android { background-image: url(http://cdn.oreillystatic.com/static/images/android.d7dfdc6207ab.png); } } @media (min-width: 50.6875em) { #js-course-mount .apps-promotion { background-size:34% auto; background-position: 11% bottom; } } @media (min-width: 69em) { #js-course-mount .apps-promotion { background-size:28% auto; background-position: 14% bottom; } } @media (min-width: 78.125em) { #js-course-mount .apps-promotion { padding:15px 16% 15px 32%; background-size: 22% auto; background-position: 7% bottom; } } @media (min-width: 100.0625em) { #js-course-mount .apps-promotion { background-size:20% auto; background-position: 8% bottom; } } @media (max-width: 520px) { #js-course-mount .app-links { text-align:center; } } @media (min-width: 56.25em) { #js-course-mount .ie8 .apps-promotion { background-image:url(http://cdn.oreillystatic.com/static/images/screenshot-ios-queue-ipad-iphone.41e8e4e2eb29.png); background-repeat: no-repeat; max-width: 1600px!important; } #js-course-mount .ie8 .apps-promotion.android { background-image: url(http://cdn.oreillystatic.com/static/images/android.d7dfdc6207ab.png); } } #js-course-mount .apps-promotion__android-cta a, #js-course-mount .section__more-link a { color: #4a3c31; text-decoration: underline; } #js-course-mount .apps-promotion__android-cta a:visited, #js-course-mount .section__more-link a:visited { color: #4a3c31; } #js-course-mount .apps-promotion__android-cta a:active, #js-course-mount .apps-promotion__android-cta a:focus, #js-course-mount .apps-promotion__android-cta a:hover, #js-course-mount .section__more-link a:active, #js-course-mount .section__more-link a:focus, #js-course-mount .section__more-link a:hover { color: #e98300; } #js-course-mount .apps-promotion__title { margin-bottom: 16px; } #js-course-mount .apps-promotion__description { font-size: 13px; line-height: 18px; margin-bottom: 8px; } #js-course-mount .apps-promotion__android-cta { font-size: 12px; line-height: 16px; } #js-course-mount .apps-promotion__image--apple-store { margin-bottom: 8px; } #js-course-mount .apps-promotion__image--android-store { max-height: 40px; margin-bottom: 8px; margin-left: 15px; } #js-course-mount .section__more-link, #js-course-mount .section__title { font-weight: 400; color: rgba(74,60,49,.75); -webkit-font-smoothing: antialiased; } #js-course-mount .description b, #js-course-mount .description strong, #js-course-mount .legalese h3, #js-course-mount .publisher-extra b, #js-course-mount .publisher-extra strong { font-weight: 700; } #js-course-mount .section__title { font-size: 18px; line-height: 27px; } #js-course-mount .section__more-link { font-size: 12px; line-height: 27px; margin-bottom: 16px; } @media (min-width: 32.5625em) { #js-course-mount .apps-promotion__description { font-size:16px; line-height: 21.33px; margin-bottom: 16px; } #js-course-mount .apps-promotion__android-cta { margin: 0; font-size: 13px; line-height: 18px; } #js-course-mount .section__title { font-size: 21px; line-height: 31px; margin-bottom: 16px; } #js-course-mount .section__more-link { font-size: 14px; line-height: 31px; } } #js-course-mount .description h2, #js-course-mount .publisher-extra h2 { margin-bottom: 16px!important; } #js-course-mount .description li, #js-course-mount .description ol, #js-course-mount .description p, #js-course-mount .description span, #js-course-mount .description ul, #js-course-mount .publisher-extra li, #js-course-mount .publisher-extra ol, #js-course-mount .publisher-extra p, #js-course-mount .publisher-extra span, #js-course-mount .publisher-extra ul { margin-top: .75em; margin-bottom: .75em; font-size: 16px; } #js-course-mount .description ol, #js-course-mount .description ul, #js-course-mount .publisher-extra ol, #js-course-mount .publisher-extra ul { margin-left: 1.5em; } #js-course-mount .description ol>li, #js-course-mount .publisher-extra ol>li { list-style-type: decimal; } #js-course-mount .description ul>li, #js-course-mount .publisher-extra ul>li { list-style-type: disc; } #js-course-mount #registration-form legend { margin: 0; padding: 0; position: relative; top: 1.4em; text-transform: uppercase; color: #777; } #js-course-mount #registration-form h1 { margin: .5rem 0; } #js-course-mount #registration-form .default-content h1 { margin: 0; } #js-course-mount #registration-form p { margin-top: 0; } #js-course-mount .trial-form-test { color: #707070; margin-bottom: 225px!important; } #js-course-mount .trial-form-test .innercontent-registration { border-top: 1px solid #DDD; } #js-course-mount .trial-form-test .innercontent-registration .buttongroup p { padding-top: 10px; } #js-course-mount .trial-form-test .trust-logo-container { border-top: 1px solid #DDD; list-style: none; margin-top: 30px; padding-top: 10px; text-align: center; } #js-course-mount .trial-form-test .trust-logo-container p { font-size: 20px; } #js-course-mount .trial-form-test .trust-logo-container li { list-style: none; display: inline-block; vertical-align: middle; font-size: 0; max-width: 33%; } #js-course-mount .layout2 .other, #js-course-mount .layout2 nav { vertical-align: top; background-clip: padding-box; } @media only screen and (max-width: 41.9375em) { #js-course-mount .trial-form-test .trust-logo-container li svg { width:82px; height: 41px; } } #js-course-mount .agreement-inc h4 { margin-bottom: .5em; } #js-course-mount .agreement-inc .default-content { color: #404040; margin: 0 0 1em; overflow-y: scroll; border: 1px solid #ccc; padding: 0 .5em .5em; height: 100px; } #js-course-mount .agreement-inc .default-content ol.outline>li:before, #js-course-mount .legalese ol.outline>li:before { content: counters(item,".") "."; counter-increment: item; padding-right: .25em; color: #404040; } #js-course-mount .agreement-inc .default-content h1, #js-course-mount .agreement-inc .default-content h2, #js-course-mount .agreement-inc .default-content h3, #js-course-mount .agreement-inc .default-content h4 { color: #404040; } #js-course-mount .agreement-inc .default-content h3 { font-weight: 700; margin: 1.5em 0 0; } #js-course-mount .agreement-inc .default-content h4 { font-size: 18px; margin: 1.5em 0 0; } #js-course-mount .agreement-inc .default-content ol, #js-course-mount .agreement-inc .default-content p, #js-course-mount .agreement-inc .default-content ul { font-size: 16px; line-height: 1.5em; margin-bottom: 1.5em; } #js-course-mount .agreement-inc .default-content ol, #js-course-mount .agreement-inc .default-content ul { margin-left: 1.5em; } #js-course-mount .agreement-inc .default-content ol>li { list-style-type: decimal; } #js-course-mount .agreement-inc .default-content ul>li { list-style-type: disc; } #js-course-mount .agreement-inc .default-content ol.loweralpha>li, #js-course-mount .agreement-inc .default-content ul.loweralpha>li { list-style-type: lower-alpha; } #js-course-mount .agreement-inc .default-content ol.outline>li { display: block; margin-bottom: 1em; } #js-course-mount .agreement-inc .default-content ol.outline>li h2 { display: inline; } #js-course-mount .agreement-inc .default-content ol.outline>li ol { margin-top: 1em; } #js-course-mount .agreement-inc .default-content ol.outline ul>li { margin-bottom: 0; margin-left: 1.5em; } #js-course-mount .agreement-inc .default-content h1 { font-size: 16px; } #js-course-mount .agreement-inc .default-content li, #js-course-mount .agreement-inc .default-content p { font-size: 12px; margin-bottom: .5em; } #js-course-mount .legalese, #js-course-mount .legalese h1, #js-course-mount .legalese h2, #js-course-mount .legalese h3, #js-course-mount .legalese h4 { color: #404040; } #js-course-mount .legalese h3 { margin: 1.5em 0 0; } #js-course-mount .legalese h4 { font-size: 18px; margin: 1.5em 0 0; } #js-course-mount .legalese ol, #js-course-mount .legalese p, #js-course-mount .legalese ul { font-size: 16px; line-height: 1.5em; margin-bottom: 1.5em; } #js-course-mount .legalese ol, #js-course-mount .legalese ul { margin-left: 1.5em; } #js-course-mount .legalese ol>li { list-style-type: decimal; } #js-course-mount .legalese ul>li { list-style-type: disc; } #js-course-mount .legalese ol.loweralpha>li, #js-course-mount .legalese ul.loweralpha>li { list-style-type: lower-alpha; } #js-course-mount .legalese ol.outline>li { display: block; margin-bottom: 1em; } #js-course-mount .legalese ol.outline>li h2 { display: inline; } #js-course-mount .legalese ol.outline>li ol { margin-top: 1em; } #js-course-mount .legalese ol.outline ul>li { margin-bottom: 0; margin-left: 1.5em; } #js-course-mount address { display: block; margin-bottom: 1em; } #js-course-mount .ie8 .form-row { padding: 10px 0; } #js-course-mount .star-whole-title { margin: 1.25rem 0; } #js-course-mount .star-whole-title li { margin-top: .625rem; } #js-course-mount .star-whole-title li span { color: rgba(64,64,64,.75); font-size: 18px; font-size: 1.125rem; } #js-course-mount .star-whole-title li button { padding: 1.125rem .9375rem 1rem; border: 1px solid #C7C2BA; margin-right: .625rem; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; } #js-course-mount .star-whole-title li button:before { font-size: 21px; font-size: 1.3125rem; line-height: 0; } #js-course-mount .layout2 { display: table; table-layout: fixed; position: relative; height: 100%; max-width: 100%; overflow: auto; } #js-course-mount .layout2 nav { display: table-cell; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; background-color: #f7f7f7; border-right: 1px solid #eaeaea; width: 185px; } #js-course-mount .layout2 nav h2 { font-size: 10px; color: #aaa; letter-spacing: 1px; margin: 0; padding: 20px 20px 0; } #js-course-mount .layout2 nav li { display: inline; } #js-course-mount .layout2 nav a { font-size: 14px; color: #777; text-decoration: none; padding: 15px 20px; display: block; } #js-course-mount .inline-icon, #js-course-mount .layout2 nav a.active, #js-course-mount .no-touch .layout2 nav a:focus, #js-course-mount .no-touch .layout2 nav a:hover { color: #d3002d; } #js-course-mount .layout2 .other { display: table-cell; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; background-color: #fff; padding: 20px; } #js-course-mount .inline-icon { font-size: .8em; } #js-course-mount .big-icon { margin: .5em 0 0 20px; font-size: 3em; float: left; color: #C7C2BA; } #js-course-mount .empty-page { margin: 0 1em 3em 0; text-align: left; color: #404040; } #js-course-mount .empty-page p { font-size: 21px; font-size: 1.3125rem; } #js-course-mount .cancel { color: #ea6d60; font-size: 16px; font-size: 1rem; text-decoration: none; } #js-course-mount .plantype:focus, #js-course-mount .plantype:hover { cursor: pointer; } #js-course-mount .checkmark { color: #d3002d; font-size: 32px!important; display: none; margin: 0!important; } #js-course-mount .checkmark span { text-indent: -9999px; } #js-course-mount .selected .checkmark { display: inline-block; } #js-course-mount #cancel_form header h1, #js-course-mount #change_form header h1, #js-course-mount #plan_form header h1, #js-course-mount #pre-order-modal header h1, #js-course-mount #tutorial-suggestion-modal header h1 { margin-bottom: 0; } #js-course-mount #cancel_form header label, #js-course-mount #change_form header label, #js-course-mount #plan_form header label, #js-course-mount #pre-order-modal header label, #js-course-mount #tutorial-suggestion-modal header label { margin-right: 10px; display: inline-block; letter-spacing: normal; text-transform: none; } #js-course-mount #cancel_form header select, #js-course-mount #change_form header select, #js-course-mount #plan_form header select, #js-course-mount #pre-order-modal header select, #js-course-mount #tutorial-suggestion-modal header select { font-size: 16px; } #js-course-mount #cancel_form .plan-picker, #js-course-mount #change_form .plan-picker, #js-course-mount #plan_form .plan-picker, #js-course-mount #pre-order-modal .plan-picker, #js-course-mount #tutorial-suggestion-modal .plan-picker { margin: 0 auto 1em; text-align: center; } #js-course-mount #cancel_form .planoption, #js-course-mount #cancel_form .plantype, #js-course-mount #change_form .planoption, #js-course-mount #change_form .plantype, #js-course-mount #plan_form .planoption, #js-course-mount #plan_form .plantype, #js-course-mount #pre-order-modal .planoption, #js-course-mount #pre-order-modal .plantype, #js-course-mount #tutorial-suggestion-modal .planoption, #js-course-mount #tutorial-suggestion-modal .plantype { width: 100%; display: inline-block; margin: 0 15px 15px 0; padding: 10px 0 15px; vertical-align: top; background-color: #fff; border: 1px solid #ddd; text-align: center; -moz-box-shadow: 0 3px 0 0 rgba(0,0,0,.05); -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,.05); -o-box-shadow: 0 3px 0 0 rgba(0,0,0,.05); box-shadow: 0 3px 0 0 rgba(0,0,0,.05); -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; } @media only screen and (min-width: 690px) { #js-course-mount #cancel_form .planoption, #js-course-mount #cancel_form .plantype, #js-course-mount #change_form .planoption, #js-course-mount #change_form .plantype, #js-course-mount #plan_form .planoption, #js-course-mount #plan_form .plantype, #js-course-mount #pre-order-modal .planoption, #js-course-mount #pre-order-modal .plantype, #js-course-mount #tutorial-suggestion-modal .planoption, #js-course-mount #tutorial-suggestion-modal .plantype { max-width:45%; } } @media only screen and (min-width: 920px) { #js-course-mount #cancel_form .planoption, #js-course-mount #cancel_form .plantype, #js-course-mount #change_form .planoption, #js-course-mount #change_form .plantype, #js-course-mount #plan_form .planoption, #js-course-mount #plan_form .plantype, #js-course-mount #pre-order-modal .planoption, #js-course-mount #pre-order-modal .plantype, #js-course-mount #tutorial-suggestion-modal .planoption, #js-course-mount #tutorial-suggestion-modal .plantype { max-width:31%; } } @media only screen and (min-width: 1390px) { #js-course-mount #cancel_form .planoption, #js-course-mount #cancel_form .plantype, #js-course-mount #change_form .planoption, #js-course-mount #change_form .plantype, #js-course-mount #plan_form .planoption, #js-course-mount #plan_form .plantype, #js-course-mount #pre-order-modal .planoption, #js-course-mount #pre-order-modal .plantype, #js-course-mount #tutorial-suggestion-modal .planoption, #js-course-mount #tutorial-suggestion-modal .plantype { max-width:315px; } } #js-course-mount #cancel_form .planoption .explain-next-billed .firstbilling, #js-course-mount #cancel_form .plantype .explain-next-billed .firstbilling, #js-course-mount #change_form .planoption .explain-next-billed .firstbilling, #js-course-mount #change_form .plantype .explain-next-billed .firstbilling, #js-course-mount #plan_form .planoption .explain-next-billed .firstbilling, #js-course-mount #plan_form .plantype .explain-next-billed .firstbilling, #js-course-mount #pre-order-modal .planoption .explain-next-billed .firstbilling, #js-course-mount #pre-order-modal .plantype .explain-next-billed .firstbilling, #js-course-mount #tutorial-suggestion-modal .planoption .explain-next-billed .firstbilling, #js-course-mount #tutorial-suggestion-modal .plantype .explain-next-billed .firstbilling { display: none; text-align: center; } #js-course-mount #cancel_form .planoption .explain-next-billed .firstbilling .summary, #js-course-mount #cancel_form .plantype .explain-next-billed .firstbilling .summary, #js-course-mount #change_form .planoption .explain-next-billed .firstbilling .summary, #js-course-mount #change_form .plantype .explain-next-billed .firstbilling .summary, #js-course-mount #plan_form .planoption .explain-next-billed .firstbilling .summary, #js-course-mount #plan_form .plantype .explain-next-billed .firstbilling .summary, #js-course-mount #pre-order-modal .planoption .explain-next-billed .firstbilling .summary, #js-course-mount #pre-order-modal .plantype .explain-next-billed .firstbilling .summary, #js-course-mount #tutorial-suggestion-modal .planoption .explain-next-billed .firstbilling .summary, #js-course-mount #tutorial-suggestion-modal .plantype .explain-next-billed .firstbilling .summary { color: #b3b3b3; margin: 10px 0 0; font-size: 14px; font-size: .875rem; } #js-course-mount #cancel_form .planoption.selected .explain-next-billed .firstbilling, #js-course-mount #cancel_form .plantype.selected .explain-next-billed .firstbilling, #js-course-mount #change_form .planoption.selected .explain-next-billed .firstbilling, #js-course-mount #change_form .plantype.selected .explain-next-billed .firstbilling, #js-course-mount #plan_form .planoption.selected .explain-next-billed .firstbilling, #js-course-mount #plan_form .plantype.selected .explain-next-billed .firstbilling, #js-course-mount #pre-order-modal .planoption.selected .explain-next-billed .firstbilling, #js-course-mount #pre-order-modal .plantype.selected .explain-next-billed .firstbilling, #js-course-mount #tutorial-suggestion-modal .planoption.selected .explain-next-billed .firstbilling, #js-course-mount #tutorial-suggestion-modal .plantype.selected .explain-next-billed .firstbilling { display: block; } #js-course-mount #cancel_form .planoption h3, #js-course-mount #cancel_form .plantype h3, #js-course-mount #change_form .planoption h3, #js-course-mount #change_form .plantype h3, #js-course-mount #plan_form .planoption h3, #js-course-mount #plan_form .plantype h3, #js-course-mount #pre-order-modal .planoption h3, #js-course-mount #pre-order-modal .plantype h3, #js-course-mount #tutorial-suggestion-modal .planoption h3, #js-course-mount #tutorial-suggestion-modal .plantype h3 { border: 1px solid #d5d5d5; border-width: 1px 0; background: #f6f6f6; margin: 0 0 20px; padding: 5px 5px 5px 20px; font-size: 24px; line-height: normal; text-transform: none; text-align: left; } #js-course-mount #cancel_form .planoption .lead, #js-course-mount #cancel_form .planoption .pricing, #js-course-mount #cancel_form .plantype .lead, #js-course-mount #cancel_form .plantype .pricing, #js-course-mount #change_form .planoption .lead, #js-course-mount #change_form .planoption .pricing, #js-course-mount #change_form .plantype .lead, #js-course-mount #change_form .plantype .pricing, #js-course-mount #plan_form .planoption .lead, #js-course-mount #plan_form .planoption .pricing, #js-course-mount #plan_form .plantype .lead, #js-course-mount #plan_form .plantype .pricing, #js-course-mount #pre-order-modal .planoption .lead, #js-course-mount #pre-order-modal .planoption .pricing, #js-course-mount #pre-order-modal .plantype .lead, #js-course-mount #pre-order-modal .plantype .pricing, #js-course-mount #tutorial-suggestion-modal .planoption .lead, #js-course-mount #tutorial-suggestion-modal .planoption .pricing, #js-course-mount #tutorial-suggestion-modal .plantype .lead, #js-course-mount #tutorial-suggestion-modal .plantype .pricing { font-size: 24px; line-height: normal; color: #d3002d; } #js-course-mount #cancel_form .planoption .old-price, #js-course-mount #cancel_form .plantype .old-price, #js-course-mount #change_form .planoption .old-price, #js-course-mount #change_form .plantype .old-price, #js-course-mount #plan_form .planoption .old-price, #js-course-mount #plan_form .plantype .old-price, #js-course-mount #pre-order-modal .planoption .old-price, #js-course-mount #pre-order-modal .plantype .old-price, #js-course-mount #tutorial-suggestion-modal .planoption .old-price, #js-course-mount #tutorial-suggestion-modal .plantype .old-price { text-decoration: line-through; } #js-course-mount #cancel_form .planoption .summary, #js-course-mount #cancel_form .plantype .summary, #js-course-mount #change_form .planoption .summary, #js-course-mount #change_form .plantype .summary, #js-course-mount #plan_form .planoption .summary, #js-course-mount #plan_form .plantype .summary, #js-course-mount #pre-order-modal .planoption .summary, #js-course-mount #pre-order-modal .plantype .summary, #js-course-mount #tutorial-suggestion-modal .planoption .summary, #js-course-mount #tutorial-suggestion-modal .plantype .summary { font-size: 16px; padding: 0 20px; color: #777; } #js-course-mount #cancel_form .plantype.selected, #js-course-mount #change_form .plantype.selected, #js-course-mount #plan_form .plantype.selected, #js-course-mount #pre-order-modal .plantype.selected, #js-course-mount #tutorial-suggestion-modal .plantype.selected { border: 1px solid #00B3E7; } #js-course-mount #cancel_form .plantype.selected h3, #js-course-mount #change_form .plantype.selected h3, #js-course-mount #plan_form .plantype.selected h3, #js-course-mount #pre-order-modal .plantype.selected h3, #js-course-mount #tutorial-suggestion-modal .plantype.selected h3 { background: #E5F7FC; color: #00B3E7; border: 1px solid #00B3E7; border-width: 1px 0; } #js-course-mount #cancel_form .cancel, #js-course-mount #cancel_form .change, #js-course-mount #change_form .cancel, #js-course-mount #change_form .change, #js-course-mount #plan_form .cancel, #js-course-mount #plan_form .change, #js-course-mount #pre-order-modal .cancel, #js-course-mount #pre-order-modal .change, #js-course-mount #tutorial-suggestion-modal .cancel, #js-course-mount #tutorial-suggestion-modal .change { float: right; display: inline-block; padding: 0 15px 0 0; font-size: 1rem; } #js-course-mount #cancel_form .planoption, #js-course-mount #change_form .planoption, #js-course-mount #plan_form .planoption, #js-course-mount #pre-order-modal .planoption, #js-course-mount #tutorial-suggestion-modal .planoption { max-width: 60%; } #js-course-mount #cancel_form .goback, #js-course-mount #change_form .goback, #js-course-mount #plan_form .goback, #js-course-mount #pre-order-modal .goback, #js-course-mount #tutorial-suggestion-modal .goback { font-size: 13px; font-size: .8125rem; text-decoration: none; } @media only screen and (max-width: 47.125em) { #js-course-mount #cancel_form .griditem, #js-course-mount #change_form .griditem, #js-course-mount #plan_form .griditem, #js-course-mount #pre-order-modal .griditem, #js-course-mount #tutorial-suggestion-modal .griditem { display:block; width: 100%; } #js-course-mount #cancel_form .griditem.opt-in, #js-course-mount #cancel_form .griditem.opt-out, #js-course-mount #change_form .griditem.opt-in, #js-course-mount #change_form .griditem.opt-out, #js-course-mount #plan_form .griditem.opt-in, #js-course-mount #plan_form .griditem.opt-out, #js-course-mount #pre-order-modal .griditem.opt-in, #js-course-mount #pre-order-modal .griditem.opt-out, #js-course-mount #tutorial-suggestion-modal .griditem.opt-in, #js-course-mount #tutorial-suggestion-modal .griditem.opt-out { width: 100%; } } #js-course-mount #cancel_form .usage>p, #js-course-mount #change_form .usage>p, #js-course-mount #plan_form .usage>p, #js-course-mount #pre-order-modal .usage>p, #js-course-mount #tutorial-suggestion-modal .usage>p { font-size: 24px; color: #777; } #js-course-mount #cancel_form .griditem { width: 100%; } #js-course-mount #cancel_form .griditem.opt-in { width: 33%; } #js-course-mount #cancel_form .reason { margin-bottom: 20px; } #js-course-mount .planpage #billing_form .billing-group { max-width: 700px; max-width: 43.75rem; } #js-course-mount #billing_form:after, #js-course-mount #billing_form:before { content: " "; display: table; } #js-course-mount #billing_form .billing-footer { margin-top: 1rem; border-top: 1px solid #ddd; } #js-course-mount #billing_form input[type=text] { min-width: 100%; max-width: 100%; } #js-course-mount #billing_form small.error { display: block; padding: .125rem 0 .3125rem; text-align: left; } #js-course-mount #billing_form .buttongroup, #js-course-mount .result-desc { text-align: center; } #js-course-mount #billing_form .billing-submit { -moz-opacity: .5s ease-in-out; -webkit-opacity: .5s ease-in-out; -o-opacity: .5s ease-in-out; opacity: .5s ease-in-out; } #js-course-mount #billing_form .rate-plan-redeem-submit { background-color: rgba(244,243,240,.5); border: 1px solid rgba(118,118,118,.35); margin-top: 40px; width: 90px; } @media screen and (max-width: 32.5625em) { #js-course-mount #billing_form .button-entry { text-align:center; } #js-course-mount #billing_form .button-entry .rate-plan-redeem-submit { margin-top: 0; margin-bottom: 20px; } } #js-course-mount #billing_form .buttongroup input { margin: 1rem 0 .5rem; } #js-course-mount input[type=text].prefilled-editable { border: none; border-bottom: 1px solid #CCC; -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; color: #999; } #js-course-mount .billing-history { width: 100%; padding: 0; margin: 0 auto; } #js-course-mount .billing-history tr { font-size: 15px; font-size: .9375rem; line-height: 21px; line-height: 1.3125rem; color: #666; border-bottom: 1px solid #eee; } @media screen and (min-width: 755px) { #js-course-mount .billing-history { width:94%; padding: 0 3%; } #js-course-mount .billing-history tr { font-size: 18px; font-size: 1.125rem; line-height: 24px; line-height: 1.5rem; } } #js-course-mount .billing-history tr td { padding: .625rem 0; } #js-course-mount .billing-history tr a { text-decoration: none; } #js-course-mount .user-profile { padding: 0 0 0 200px; position: relative; background: url(http://cdn.oreillystatic.com/static/images/grey_tile_side.b2fcc8a15b43.png) repeat-y #fff; } #js-course-mount .user-profile.no-sidebar { background: #fff; padding: 0; } #js-course-mount .user-profile .nav { width: 200px; float: left; margin-left: -200px; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; background-clip: padding-box; } #js-course-mount .user-profile .nav ol li a { padding: .75rem .9375rem; float: left; width: 100%; color: #404040; text-decoration: none; -moz-transition: background-color 200ms linear; -webkit-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; transition: background-color 200ms linear; } #js-course-mount .user-profile .nav ol li a.all-books { -webkit-border-radius: 2px 0 0; border-radius: 2px 0 0; background-clip: padding-box; text-transform: uppercase; display: block; padding: 1.25rem .9375rem; word-wrap: break-word; } #js-course-mount .user-profile .nav ol li a.all-books span { margin: 0; } #js-course-mount .user-profile .nav ol li a span { display: block; margin-left: 40px; } #js-course-mount .user-profile .nav ol li a:focus, #js-course-mount .user-profile .nav ol li a:hover { background-color: rgba(190,185,166,.12); color: #d3002d; } #js-course-mount .user-profile .nav ol li a.current { background-color: #FFF; color: #d3002d; } #js-course-mount .user-profile .nav ol li img { max-width: 30px; height: auto; float: left; margin: .1875rem .625rem 0 0; border: 1px solid #AAA; } #js-course-mount .user-profile .headline { padding: 1.25rem 12.5rem 0 1.875rem; color: rgba(64,64,64,.75); float: left; width: 100%; font-size: 18px; font-size: 1.125rem; font-weight: 300; } #js-course-mount .user-profile .headline h1 { color: #404040; margin-top: 0; font-size: 28px; font-size: 1.75rem; line-height: 32px; line-height: 2rem; font-weight: 300; word-wrap: break-word; } #js-course-mount .user-profile .headline h1 span { text-transform: capitalize; } #js-course-mount .user-profile .headline .title { display: inline-block; margin-bottom: 0; } #js-course-mount .user-profile .headline .title a { text-decoration: none; } #js-course-mount .user-profile .headline ul { float: left; max-width: 70%; } #js-course-mount .user-profile .headline ul li { margin-bottom: 5px; } #js-course-mount .user-profile .headline img { float: left; max-width: 65px; height: auto; border: 1px solid #AAA; margin: .3125rem .9375rem 0; } #js-course-mount .user-profile .annotation-list { color: #777; margin-bottom: 1.5625rem; float: right; } #js-course-mount .user-profile .annotation-list ol.annotation-list-single-book { margin: 0 .625rem .625rem 2.5rem; } #js-course-mount .user-profile .annotation-list ol li { border-bottom: 1px solid #CCC; padding: .625rem 0; } #js-course-mount .user-profile .annotation-list ol li:last-child { border: none; } #js-course-mount .user-profile .annotation-list .filter-highlights, #js-course-mount .user-profile .annotation-list .js-toggle-all-notes { position: absolute; right: 20px; top: 20px; } #js-course-mount .user-profile .annotation-list .js-toggle-all-notes-lowered { position: absolute; right: 20px; top: 50px; } #js-course-mount .user-profile .annotation-list .js-more-annotations { position: relative; top: 15px; clear: both; } #js-course-mount .user-profile .annotation-list .js-more-annotations:after, #js-course-mount .user-profile .annotation-list .js-more-annotations:before { content: " "; display: table; } #js-course-mount .user-profile .annotation-list .annotation-htmlfile-title { border-bottom: none; padding-right: 6.25rem; display: inline-block; } #js-course-mount .user-profile .annotation-list .annotation-htmlfile-title h2 { color: rgba(64,64,64,.75); margin: 0; display: inline-block; line-height: 28px; line-height: 1.75rem; } #js-course-mount .user-profile .annotation-list .annotation-htmlfile-title a { text-decoration: none; } #js-course-mount .user-profile .annotation-list .annotation-info { color: rgba(64,64,64,.75); } #js-course-mount .user-profile .annotation-list .annotation-info li { border: none; padding: 0; margin: 0 0 0 .9375rem; } #js-course-mount .user-profile .annotation-list .annotation-info li.quote { border-bottom: 1px solid #C7C2BA; padding-bottom: .625rem; margin-bottom: .625rem; width: 100%; } #js-course-mount .user-profile .annotation-list .annotation-info li.annotation-created { text-transform: uppercase; font-size: smaller; margin: 0 0 .3125rem; } #js-course-mount .user-profile .annotation-list .annotation-info li.annotation-htmlfile-cover { margin: .3125rem .9375rem 0 0; float: left; } #js-course-mount .user-profile .annotation-list .annotation-info li.annotation-htmlfile-cover img { max-width: 25px; height: auto; border: 1px solid #AAA; } #js-course-mount .user-profile .annotation-list .annotation-info li .annotation-quote { text-decoration: none; font-size: 18px; font-size: 1.125rem; font-family: Georgia,serif; margin-bottom: .3125rem; line-height: 24px; line-height: 1.5rem; padding-right: 6.25rem; display: block; color: rgba(64,64,64,.75); } #js-course-mount .user-profile .annotation-list .annotation-info li .annotation-quote:before { content: "\201C"; } #js-course-mount .user-profile .annotation-list .annotation-info li .annotation-quote:after { content: "\201D"; } #js-course-mount .user-profile .annotation-list .annotation-info li .annotation-quote:focus, #js-course-mount .user-profile .annotation-list .annotation-info li .annotation-quote:hover { color: #d3002d; text-decoration: underline; } #js-course-mount .user-profile .annotation-list .annotation-info li.all-books-quote { margin-left: 2.5rem; } #js-course-mount .user-profile .annotation-list .annotation-info li .js-annotation-note { font-size: 16px; font-size: 1rem; padding: .9375rem 0; display: inline-block; word-break: break-all; } #js-course-mount .user-profile .annotation-list .annotation-info li .js-toggle-note { position: relative; padding-right: 1.25rem; margin-top: -1.375rem; cursor: pointer; } #js-course-mount .user-profile .annotation-list .annotation-info li .js-toggle-note:before { position: absolute; right: 0; } #js-course-mount .user-profile .annotation-list img.highlight-demo { width: 90%; height: auto; border: 1px solid #ccc; } @media screen and (max-width: 71.25em) { #js-course-mount .user-profile { width:95%; margin: 0 2.5% 20px; } #js-course-mount .user-profile .annotation-list li.annotation { float: left; width: 100%; } #js-course-mount .user-profile .annotation-list li .annotation-quote { padding-right: 0!important; } #js-course-mount .user-profile .annotation-list .annotation-list-single-book li { float: right; } #js-course-mount .user-profile .annotation-list .annotation-list-single-book .js-toggle-note { margin: 0!important; } } @media screen and (min-width: 821px) and (max-width:1140px) { #js-course-mount .user-profile .headline { padding:3.125rem 1.875rem 0; } } @media screen and (max-width: 51.25em) { #js-course-mount .user-profile { background:no-repeat #FFF; padding: 0; } #js-course-mount .user-profile .nav { width: 100%; margin: 0; } #js-course-mount .user-profile .nav .desktop-menu { display: none; } #js-course-mount .user-profile .headline .title, #js-course-mount .user-profile .nav .mobile-menu { display: block; } #js-course-mount .user-profile .headline { padding: 1.25rem 1.25rem 0; margin-top: 1.25rem; } #js-course-mount .user-profile .headline ul { max-width: 60%; } #js-course-mount .user-profile .annotation-list { width: 100%; } #js-course-mount .user-profile .annotation-list ol li { padding: .625rem 1.25rem .3125rem; } #js-course-mount .user-profile .annotation-list .annotation-quote { font-size: 18px; font-size: 1.125rem; } #js-course-mount .user-profile .annotation-list .filter-highlights, #js-course-mount .user-profile .annotation-list .js-toggle-all-notes { top: 75px; } #js-course-mount .user-profile .annotation-list .js-toggle-note { margin: 0!important; } #js-course-mount .user-profile .annotation-list .annotation-info li.all-books-quote { padding-bottom: .3125rem; } #js-course-mount .user-profile .annotation-list .annotation-info li .annotation-htmlfile-title { padding-right: 0; margin-bottom: .3125rem; } } #js-course-mount .results-content, #js-course-mount .search-help-container { background-color: #fff; background-clip: padding-box; } #js-course-mount .result-desc { display: block; margin: 25px 20px 15px; font-size: 18px; font-weight: 300; line-height: 1.38; color: #404040; } @media (min-width: 320px) { #js-course-mount .result-desc { font-size:21px; } } @media (min-width: 611px) { #js-course-mount .result-desc { text-align:left; } } #js-course-mount .search-result-page .facets { max-width: 100%; text-align: left; } #js-course-mount .search-result-page .facets:after, #js-course-mount .search-result-page .facets:before { content: " "; display: table; } #js-course-mount .search-result-page .facets label { margin: 0 10px 0 0; display: inline-block; text-transform: none; font-size: 18px; letter-spacing: normal; } #js-course-mount .search-result-page .facets #id_filter label { font-size: 16px; } #js-course-mount .search-result-page .facets #id_filter input[type=checkbox] { margin-right: 10px; } @media (min-width: 520px) { #js-course-mount .search-result-page .sort-box { width:88%; margin: 0 20px 20px; text-align: right; } #js-course-mount #id_filter { float: left; } #js-course-mount #id_filter li { display: inline-block; } } #js-course-mount .results-content { margin: 15px 0; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #d5d5d5; } #js-course-mount .results-content .pad { padding: 15px; } #js-course-mount .results-list>li { padding: 15px; font-size: 16px; line-height: 1.38; color: rgba(64,64,64,.75); border-bottom: 1px solid #d5d5d5; position: relative; } #js-course-mount .results-list>li:last-child { border-bottom: none; } @media (max-width: 520px) { #js-course-mount .results-list>li { font-size:14px; } } #js-course-mount .results-list .highlight { font-weight: 700; } #js-course-mount .results-list .meta { margin-bottom: 10px; padding-left: 90px; } #js-course-mount .results-list .meta:after, #js-course-mount .results-list .meta:before { content: " "; display: table; } #js-course-mount .results-list .meta span { display: block; font-weight: 300; line-height: 1.28; color: rgba(64,64,64,.75); } #js-course-mount .results-list .book-title { margin-bottom: 10px; display: block; font-size: 21px; line-height: 1.38; font-weight: 300; } @media (max-width: 700px) { #js-course-mount .results-list .book-title { font-size:18px; } } @media (max-width: 320px) { #js-course-mount .results-list .book-title { font-size:16px; margin-bottom: 5px; } } #js-course-mount .results-list .description { margin-top: 8px; padding: 0 10px; display: block; font-weight: 400; } #js-course-mount .results-list .includes-assessment { text-transform: uppercase; font-size: .7em; font-weight: 800; letter-spacing: .5px; } #js-course-mount .results-list .includes-assessment svg { width: 1em; margin: 0 3px -3px 0; fill: rgba(64,64,64,.75); } #js-course-mount .results-list .queue-bar { float: right; } #js-course-mount .results-list .queue-bar button { width: 50px; height: 50px; } #js-course-mount .results-list .queue-bar button:before { font-size: 20px; line-height: 20px; } #js-course-mount .results-list .queue-bar button:focus { outline: 0; } @media (max-width: 450px) { #js-course-mount .results-list .meta { padding-left:75px; } #js-course-mount .results-list .format-video .meta { padding-left: 100px; } } #js-course-mount .no-results, #js-course-mount .search-help-container { padding: 15px; } #js-course-mount .no-results ul, #js-course-mount .search-help-container ul { list-style: disc; padding: 0 0 0 30px; font-size: 18px; font-size: 1.125rem; line-height: 1.4em; } #js-course-mount .no-results ul li, #js-course-mount .search-help-container ul li { margin: 15px 0; } #js-course-mount .no-results ul li code, #js-course-mount .search-help-container ul li code { border: 1px solid #b3b3b3; padding: 0 5px; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; display: inline-block; margin: 1px 0; } #js-course-mount .no-results ul li ul, #js-course-mount .search-help-container ul li ul { list-style: circle; padding: 0 0 0 18px; } #js-course-mount .no-results b, #js-course-mount .no-results strong, #js-course-mount .search-help-container b, #js-course-mount .search-help-container strong { font-weight: 700; } #js-course-mount .search-help-container { display: none; margin: 15px 0; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #d5d5d5; } #js-course-mount .search-help-container .pad { padding: 15px; } #js-course-mount .paginate { text-align: center; padding: 30px 5px; border-top: 1px solid #CFCFCF; color: #777; font-size: 21px; font-size: 1.3125rem; } #js-course-mount .paginate li { display: inline-block; line-height: 1.35em; } #js-course-mount .paginate a, #js-course-mount .paginate span { margin: 0 5px; padding: 0 3px; font-weight: 300; text-decoration: none; line-height: 1.35em; } #js-course-mount .conf-banner,a.conf-banner { display: block; border: 1px solid #d5d5d5; background: #fff; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; padding: 1em; margin: 1em auto; max-width: 700px; text-align: center; color: #404040; } #js-course-mount .conf-banner h2,a.conf-banner h2 { line-height: 1.5; } #js-course-mount .conf-banner:hover,a.conf-banner:hover { text-decoration: none; } #js-course-mount .conf-banner p,a.conf-banner p { max-width: 65%; margin: 0 auto 1em; color: #4a3c31; font-size: 21px; line-height: 28px; font-weight: 100; } #js-course-mount .conf-banner img,a.conf-banner img { width: 100%; max-width: 360px; height: auto; max-height: 100px; } #js-course-mount .no-svg .conf-banner img, #js-course-mount .no-svg a.conf-banner img { background: red; } #js-course-mount .hero, #js-course-mount .simplelist .list-description { -webkit-border-radius: 2px; background-clip: padding-box; } #js-course-mount .no-svg .conf-banner img:before, #js-course-mount .no-svg a.conf-banner img:before { content: "what"; display: block; width: 400px; height: 200px; } #js-course-mount .markdown strong { font-weight: 700; } #js-course-mount .markdown code { font-family: monospace; } #js-course-mount .markdown ul { margin-left: 30px; } #js-course-mount .markdown ul li { list-style-type: square; margin: 0; } #js-course-mount .markdown ol { margin-left: 30px; } #js-course-mount .markdown ol li { list-style-type: decimal; margin: 0; } #js-course-mount .hero { border-radius: 2px; margin-bottom: .875rem; color: #fff; } #js-course-mount .hero .hero__title { color: inherit; font-size: 24px; font-size: 1.5rem; line-height: 36px; line-height: 2.25rem; margin-bottom: .5rem; font-weight: 400; } #js-course-mount .hero p { font-size: 16px; font-size: 1rem; line-height: 24px; line-height: 1.5rem; margin-bottom: 1rem; } #js-course-mount .hero p:last-child { margin-bottom: 0; } @media screen and (min-width: 32.5625em) { #js-course-mount .hero { margin-bottom:22px; } #js-course-mount .hero .hero__title { font-size: 32px; font-size: 2rem; line-height: 40px; line-height: 2.5rem; margin-bottom: 1rem; } #js-course-mount .hero p { font-size: 21px; font-size: 1.3125rem; line-height: 24px; line-height: 1.5rem; } } @media screen and (min-width: 69em) { #js-course-mount .hero .hero__title { font-size:48px; font-size: 3rem; line-height: 56px; line-height: 3.5rem; margin-bottom: 1.5rem; font-weight: 200; letter-spacing: -.0125em; } } #js-course-mount .no-svg img.ySVG, #js-course-mount .svg img.nSVG { display: none; } #js-course-mount .simplelist .list-description { max-width: 1600px; overflow: hidden; text-align: left; background-color: #e1dfda; border-radius: 2px; box-sizing: border-box; margin: 0 20px; padding: 15px; } @media (min-width: 56.25em) { #js-course-mount .simplelist .list-description { padding:15px 2% 15px 15px; } } @media (min-width: 78.125em) { #js-course-mount .simplelist .list-description { padding:15px 16% 15px 15px; } } #js-course-mount .simplelist .list-description article { font-size: 18px; max-width: 1000px; } #js-course-mount section.big-search { margin: 1rem 1.5625rem; padding: 2.1875rem 0; background-color: #fff; border-radius: 2px; } #js-course-mount section.big-search .big-search-container { margin: 0 auto; width: 800px; width: 50rem; } #js-course-mount section.big-search header { margin: 0; } #js-course-mount section.big-search header:after,section.big-search header:before { content: " "; display: table; } #js-course-mount section.big-search header h1 { float: left; font-size: 30px; font-size: 1.875rem; font-weight: 300; } #js-course-mount section.big-search header .big-search-msg { float: right; margin-top: 1.25rem; font-size: 16px; font-size: 1rem; color: #777; } #js-course-mount section.big-search .big-search-box { position: relative; border: 1px solid #c7c2ba; border-radius: 2px; } #js-course-mount section.big-search .big-search-box.focus { border-color: #d3002d; } #js-course-mount section.big-search .big-search-box form { width: 100%; } #js-course-mount section.big-search .big-search-box input { width: calc(100% - 40px); max-width: 100%; min-width: 0; margin: 0; border: none; color: #333; background-color: #fff; outline: 0; white-space: nowrap; text-overflow: ellipsis; } #js-course-mount section.big-search .big-search-box .ss-search { position: absolute; top: 14px; top: .875rem; right: 10px; right: .625rem; font-size: 24px; font-size: 1.5rem; cursor: pointer; color: #c7c2ba; } #js-course-mount section.big-search .big-search-box .ss-search:hover { color: #4a3c31; text-decoration: none; } #js-course-mount section.big-search .big-search-box .ss-search:focus { text-decoration: none; outline: 0; } @media (max-width: 1024px) { #js-course-mount section.big-search .big-search-container { width:80%; } #js-course-mount section.big-search header { text-align: center; margin-bottom: .9375rem; } #js-course-mount section.big-search header h1 { float: none; line-height: 30px; line-height: 1.875rem; margin-bottom: .3125rem; } #js-course-mount section.big-search header .big-search-msg { float: none; } } #js-course-mount .format-tutorial .format-title { background: url(http://cdn.oreillystatic.com/static/images/icon-toots.b4b8b0e5a703.svg) 2px center no-repeat; background-size: 10px; line-height: 10px; padding-left: 16px; top: 18px!important; }