@charset "utf-8"; /* CSS Document */ body.modal-open { overflow: hidden; margin-right: 17px; /* may need various margin widths depending on browser .. 17px works in Chrome Version 47.0.2526.106 m & IE Version: 9.0.8112.16421 (Windows 7)*/ } a.link-wrapping { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-all; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-all; /* Adds a hyphen where the word breaks, if supported (No Blink), must do this in IE for wrap to work properly */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } a.broken-link { background-color: rgba(255,245,0,1.00) !important; color: rgba(255,0,4,1.00) !important ; } a.broken-link::after { content: " - Broken Link"; } a.missing-file-size { background-color: rgba(240,0,255,1.00) !important; color: rgba(0,13,255,1.00) !important } a.missing-file-size::after { content: " - Missing File Size"; } footer { /*padding: auto 20px; text-align: center;*/ } /* BEGIN custom overrides */ .tooltip { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); } .tooltip > .tooltip-inner { background-color: #fff; color: #000; } .tooltip.top > .tooltip-arrow { border-top-color:#fff; } .tooltip.right > .tooltip-arrow { border-right-color:#fff; } .tooltip.bottom > .tooltip-arrow { border-bottom-color:#fff; } .tooltip.left > .tooltip-arrow { border-left-color:#fff; } #body #myCarousel > a.left carousel-control, #body #myCarousel > a.right carousel-control { text-decoration: none !important; } #myCarousel { margin: 0px 70px; } .btn-help { top: -5px; right: -15px; opacity: 1 !important; } div.hover-crossfade { position: relative; width: 100%; } img.a, img.b { position: absolute; left: 0; top: 0; } img.a { z-index: 10; } .modal { background-color: transparent; } .modal-header { background: rgba(151, 209, 247,1) !important; border-bottom: 2px solid rgba(91,116,151,1.00) !important; border-radius: 6px 6px 0 0; height: auto; padding-left: 15px; } .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6 { /*color: white !important;*/ color: rgba(27,35,46,1.00) !important; text-transform: capitalize; } .modal-header .close { /*color: rgba(191,135,25,1);*/ color: rgba(91,116,151,1.00); text-shadow: 0 1px 0 rgba(0,0,0,0.75); } .modal-header .close:hover { color: rgba(0,0,0,0.40); } .modal .modal-body { background-color: rgba(255,255,255,1.00); min-height: 220px; max-height: 420px; overflow: auto; padding: 15px; } .modal-body h5 { font-weight: bold; } .modal-footer { background: rgba(49, 131, 171,1) !important; border-top: 0px solid rgba(91,116,151,1.00) !important; } /* END custom overides */ .activity-container { margin: 0 auto; text-align: center; position: relative; } img.current-view { border: 1px solid rgba(118,118,118,1.00); border-bottom: 0px; } .modal-body > img:first-child { margin-right: 10px; max-height: 200px; max-width: 150px; } .modal-body > p:last-child { text-align: center; } .modal-body > p:last-child > img { max-height: 35px; } .transparent-background { background-color: rgba(0,0,0,0.70); } .box-shadow { -webkit-box-shadow: 0px 0px 26px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 26px 0px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 26px 0px rgba(50, 50, 50, 0.75); } .upper-nav { background-color: rgba(183, 194, 203,1); border: 1px solid rgba(118,118,118,1.00); border-bottom-width: 0px; margin: 0 auto; height: 50px; width: 768px; padding-top: 2px; position: relative; z-index: 300; border-top-right-radius: 8px; border-top-left-radius: 8px; } .upper-nav > div:first-child { display: table; width: 100%; height: 100%; } .upper-nav > div:first-child > div { display: table-cell; vertical-align: middle; text-align: center; } .scene-container { z-index: 200; overflow: hidden; position: relative; height: 432px; width: 770px; margin: 0 auto; } .slider-navigation { background-color: rgba(183, 194, 203,1); border: 1px solid rgba(118,118,118,1.00); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; margin: 0 auto; height: 80px; width: 768px; position: relative; top: 0px; left: 0px; z-index: 300; } a.thumbnail, a.thumbnail:hover, a.thumbnail:focus { background-color: transparent; box-shadow: none; color: transparent; border: 0px !important; padding: 0px; } #myCarousel > .carousel-control.left { left: -65px; top: 40%; border: 0px; opacity: .7; text-decoration: none; background-image: url(../img/btn-arrow-left.png); background-repeat: no-repeat; background-origin: content-box; background-color: transparent; height: 60px; width: 60px; } #myCarousel > .carousel-control.right { right: -65px; top: 40%; border: 0px; opacity: .7; text-decoration: none; background-image: url(../img/btn-arrow-right.png); background-repeat: no-repeat; background-origin: content-box; background-color: transparent; height: 60px; width: 60px; } #myCarousel > a.carousel-control, #myCarousel > a.carousel-control:hover { text-decoration: none !important; } #myCarousel.carousel > .carousel-indicators { position: absolute; top: 95px; right: calc(50% - 20px); } .carousel-indicators .active { background-color: #f1aa1e; cursor: default; } .carousel-indicators li { background-color: #f1aa1e; background-color: rgba(241,170,30,0.5); cursor: pointer; } .clickable-object { cursor: pointer; position: absolute; transition: all .3s ease-in-out; transform: scale(0.6); opacity: 0; z-index: 200; } .clickable-object:hover, .clickable-object:focus { /*transform: scale(1.2);*/ transform: scale(1); opacity: 1; } .clickable-object.hover, .clickable-object:focus { /*transform: scale(1.2);*/ transform: scale(1); opacity: 1; } .non-clickable-object { position: absolute; } .scene-subcontainer { display: none; position: absolute; height: 432px; width: 768px; } .scene-subcontainer.active { display: block; } .wscc-btn, .resources-btn, .map-btn, .download-btn, .begin-btn { cursor: pointer; } .scene-thumb { cursor: pointer; position: relative; transition: all .3s ease-in-out; border-width: 6px; border-radius: 6px; border-style: solid; border-color: transparent; height: 68px; width: 88px; } .scene-thumb.active { border-color: #00FF00; } #scene_wscc .close, #scene_map .close { color: #fff; } .wscc-btn{ left: 5px; z-index: 1020; } .map-btn { right: 5px; z-index: 1020; } #scene_map { border: 1px solid rgba(118,118,118,1.00); -webkit-animation: cssAnimation-fadeIn 0.5s 1 ease-in-out; -moz-animation: cssAnimation-fadeIn 0.5s 1 ease-in-out; -o-animation: cssAnimation-fadeIn 0.5s 1 ease-in-out; z-index: 1010; } #scene_map_subcontainer { -webkit-animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; -moz-animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; -o-animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; } #scene_wscc { border: 1px solid rgba(118,118,118,1.00); -webkit-animation: cssAnimation-fadeIn 0.5s 1 ease-in-out; -moz-animation: cssAnimation-fadeIn 0.5s 1 ease-in-out; -o-animation: cssAnimation-fadeIn 0.5s 1 ease-in-out; animation: cssAnimation-fadeIn 0.5s 1 ease-in-out; z-index: 1010; } #scene_wscc_subcontainer { -webkit-animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; -moz-animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; -o-animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; animation: cssAnimation-zoomIn 0.75s 1 ease-in-out; } /************************************************************* Conversation Modals *************************************************************/ .modal.conversation > .modal-body > div { /*border-bottom: 1px solid rgba(164,164,164,1.00);*/ padding: 10px; position: relative; min-height: 125px; } .modal.conversation > .modal-body > div:last-child { border-bottom: none; } .modal.conversation > .modal-body > div > p { position: relative; top: 0px; margin-left: 160px; } .modal.conversation > .modal-body > div:nth-child(odd) > p { margin-left: 0px; margin-right: 160px; } /* SCENE SETUP */ .modal.conversation > .modal-body > div:first-child > p { margin-left: 0px; margin-right: 0px; } .modal.conversation > .modal-body > div > img:first-child { width: 120px; height: auto; } .hide { display: none; } @-webkit-keyframes cssAnimation-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes cssAnimation-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes cssAnimation-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes cssAnimation-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes cssAnimation-zoomIn { from { -webkit-transform: scale(0.001); } to { -webkit-transform: scale(1); } } @-moz-keyframes cssAnimation-zoomIn { from { -moz-transform: scale(0.001); } to { -moz-transform: scale(1.00); } } @-o-keyframes cssAnimation-zoomIn { from { -o-transform: scale(0.001); } to { -o-transform: scale(1.00); } } @keyframes cssAnimation-zoomIn { from { transform: scale(0.001); } to { transform: scale(1.00); } } .drawAttention { -webkit-animation: cssAnimation-drawAttention .75s 3 ease-in-out; -moz-animation: cssAnimation-drawAttention .75s 3 ease-in-out; -o-animation: cssAnimation-drawAttention .75s 3 ease-in-out; animation: cssAnimation-drawAttention .75s 3 ease-in-out; } @-webkit-keyframes cssAnimation-drawAttention { 0% { -webkit-transform: scale(0.6); } 50% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0.6); } } @-moz-keyframes cssAnimation-drawAttention { 0% { -moz-transform: scale(0.6); } 50% { -moz-transform: scale(1); } 100% { -moz-transform: scale(0.6); } } @-o-keyframes cssAnimation-drawAttention { 0% { -o-transform: scale(0.6); } 50% { -o-transform: scale(1); } 100% { -o-transform: scale(0.6); } } @keyframes cssAnimation-drawAttention { 0% { transform: scale(0.6); } 50% { transform: scale(1); } 100% { transform: scale(0.6); } } .pad-of-paper { background-color: rgba(204,193,92,0.70); background-image: url(../img/notepad-bg.png); background-repeat: no-repeat; background-position: top left; font-size: 10px; height: 160px; width: 125px; position: absolute; bottom: 10px; right: 8px; z-index: 300; } .pad-of-paper > ul { margin: 0; padding: 15px 0px; } .pad-of-paper > ul > li:hover { cursor: pointer; background-color: rgba(255,255,0,0.85); } .pad-of-paper > ul > li { list-style-type: none; text-align: left; padding: 2px 2px 2px 2px; } .pad-of-paper > ul > li > span { pointer-events: none; line-height: 11px; display: table-cell; } .pad-of-paper > ul > li span:nth-of-type(2) { padding-left: 5px; } .pad-of-paper > ul > li > span.check-mark { background-image: url(../img/blank.png); background-repeat: no-repeat; background-position: left top; height: 12px; width: 14px; } .pad-of-paper > ul > li > span.check-mark.visted { background-image: url(../img/check-mark.png); } .interactive-lg, .interactive-sm { /*margin-bottom: 50px;*/ } @media screen and (min-width: 769px) { .interactive-sm { display: none; } .activity-container { margin-left: -18px; } } @media screen and (max-width: 768px) { .interactive-sm { display: ; } .interactive-lg { display: none; } }