/*----------------------------------------------------------------------------------- Global Reset v0.3 (based on http://meyerweb.com/eric/tools/css/reset/ - v1.0 | 20080212) -----------------------------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; /* background: transparent; */ } body { line-height: 1; } ol, ul { list-style: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } /* HTML5 INIT */ header, nav, section, article, figure, aside, footer { display: block; } /*--------------------------- FONTS ---------------------------*/ @font-face { font-family: 'WaltersGothicRegular'; src: url('../fonts/waltersgothic-webfont.eot'); src: local('?'), url('../fonts/waltersgothic-webfont.woff') format('woff'), url('../fonts/waltersgothic-webfont.ttf') format('truetype'), url('../fonts/waltersgothic-webfont.svg#webfontuNVVkGbv') format('svg'); font-weight: normal; font-style: normal; } /*--------------------------- Elements ---------------------------*/ html { min-height: 100%; } body { font-family: "Lucida Grande", "Lucida Sans", sans-serif; height: 100%; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; cursor: default; } ::-moz-selection { background-color: transparent; } ::selection { background-color: transparent; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: "WaltersGothicRegular", sans-serif; } *, *:link, *:visited, *:hover, *:active, *:focus { -webkit-transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear; -moz-transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear; -ms-transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear; -o-transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear; transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear; } /* html { -webkit-transform: translate3d(0,0,0); } */ /*------------------------------------------- Global -------------------------------------------*/ .left { float: left; } .block_left { float: left; margin: 0 10px 10px 0; } .right { float: right; } .block_right { float: right; margin: 0 0 10px 10px; } .center { text-align: center; } .clear { clear: both; } .contain { overflow: hidden; } /*------------------------------------------- Main -------------------------------------------*/ #preloader { display: none; } .main_logo { background: url(../images/logo_main.png) no-repeat center; bottom: 10px; display: block; height: 96px; left: 10px; position: absolute; text-indent: -99999px; width: 129px; z-index: 50; } #header { background: #E9E7E2; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); height: 46px; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; } h1.presentation_title { color: rgba(149, 133, 112, 0.9); float: left; font-size: 18px; line-height: 44px; padding: 0 0 0 20px; text-transform: uppercase; } nav.display_options { float: right; } nav.display_options span { background: rgba(234, 232, 227, 0.9); border: 1px solid #fff; border-width: 0 0 0 1px; color: #928570; cursor: pointer; display: block; float: left; font-size: 10px; height: 46px; letter-spacing: 1px; line-height: 44px; padding: 0 22px; text-transform: uppercase; } nav.display_options span:hover { background: rgba(149, 133, 112, 1); color: #fff; } nav.display_options span.selected { background: rgba(244, 123, 106, 0.9); color: #fff; } nav.display_options span.deactivate, nav.display_options span.selected.deactivate { background: rgba(234, 232, 227, 0.9); color: #928570; } nav.display_options span.deactivate:hover, nav.display_options span.selected.deactivate:hover { background: rgba(149, 133, 112, 1); color: #fff; } #presentations { padding: 50px 15px; } #presentations li { margin: 10px 0; text-transform: uppercase; } #presentations li h2 a { color: #928570; font-size: 22px; text-decoration: none; } #presentations li h2 a:hover { color: #333; } #content { height: 100%; position: relative; width: 100%; z-index: 2; } /*------------------------------------------- Images/Slideshow -------------------------------------------*/ #content .slideshow { height: 500px; margin: 140px 0 0; position: absolute; overflow: hidden; top: 0; width: 100%; z-index: 1; } #content .slideshow span.btn { background-color: rgba(244, 123, 106, 0.9); background-position: center center; background-repeat: no-repeat; cursor: pointer; display: block; height: 280px; position: absolute; text-indent: -99999px; top: 60px; width: 46px; z-index: 5; } #content .slideshow span.btn:hover { background-color: rgba(244, 123, 106, 1); } #content .slideshow span.btn.prev { background-image: url(../images/btn_arrow_left.png); left: -46px; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -ms-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } #content .slideshow span.btn.prev.visible { left: 0; } #content .slideshow span.btn.next { background-image: url(../images/btn_arrow_right.png); right: -46px; -webkit-transition: right 0.3s ease-in-out; -moz-transition: right 0.3s ease-in-out; -ms-transition: right 0.3s ease-in-out; -o-transition: right 0.3s ease-in-out; transition: right 0.3s ease-in-out; } #content .slideshow span.btn.next.visible { right: 0; } #content .slideshow .slides { left: 10px; position: absolute; top: 0; width: 10000px; } #content .slideshow .slides .slide { cursor: pointer; float: left; margin: 0 20px 0 0; width: 365px; } #content .slideshow .slides .slide strong { color: #938570; display: block; font-size: 14px; line-height: 17px; margin: 3px 0 0; } #content .slideshow .slides .slide span.load_image { background: #E9E7E2 url(../images/loading.gif) no-repeat center; border: 1px solid #E9E7E2; display: block; height: 400px; width: 365px; } #content .slideshow .slides .slide img { } #content .slideshow .slides .slide:hover strong { color: #333; } #content .slideshow .slides .slide:hover img { border-color: #333; } /*------------------------------------------- Map -------------------------------------------*/ #content .map_layer { background: #fff; height: 1000px; left: 0; position: absolute; overflow: hidden; top: 0; width: 100%; z-index: 1; } #gmap { height: 100%; width: 100%; } #content .map_layer nav.map_controls { position: absolute; top: -46px; z-index: 81; -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -ms-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out; } #content .map_layer nav.map_controls.visible { top: 0; } #content .map_layer nav.map_controls span { background-color: rgba(244, 123, 106, 0.9); color: #fff; display: block; float: left; font-size: 10px; letter-spacing: 1px; margin: 0 1px 0 0; padding: 18px 22px; text-transform: uppercase; } #content .map_layer nav.map_controls span.label { background-color: rgba(149, 133, 112, 0.9); } #content .map_layer nav.map_controls span.btn { background-position: center center; background-repeat: no-repeat; cursor: pointer; padding: 18px 22px; text-indent: -99999px; } #content .map_layer nav.map_controls span.btn:hover { background-color: rgba(244, 123, 106, 1); color: #fff; } #content .map_layer nav.map_controls span.btn.zoom_in { background-image: url(../images/btn_zoom_in.png); } #content .map_layer nav.map_controls span.btn.zoom_out { background-image: url(../images/btn_zoom_out.png); } /*------------------------------------------- Object Details -------------------------------------------*/ #content .object_layer { background: #fff; height: 1000px; left: 0; position: absolute; overflow: hidden; top: 0; width: 100%; z-index: 75; } #content .object_layer aside.panel { background-color: rgba(149, 133, 112, 0.9); height: 100%; left: -200px; overflow: hidden; position: absolute; top: 0; width: 200px; z-index: 81; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -ms-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } #content .object_layer aside.panel.visible { left: 0; } #content .object_layer nav.controls { border-bottom: 1px solid rgba(255, 255, 255, 0.15); height: 46px; margin: 0 0 1px 0; } #content .object_layer nav.controls span { border: 1px solid rgba(255, 255, 255, 0.15); border-width: 0 1px; color: #fff; cursor: pointer; display: block; float: left; font-size: 10px; height: 46px; line-height: 49px; margin: 0; text-align: center; text-transform: uppercase; width: 74px; } #content .object_layer nav.controls span:hover { background-color: rgba(149, 133, 112, 1); } #content .object_layer nav.controls span.btn { background-position: center center; background-repeat: no-repeat; border: none; text-indent: -99999px; width: 62px; } #content .object_layer nav.controls span.btn.prev { background-image: url(../images/btn_arrow_left.png); } #content .object_layer nav.controls span.btn.next { background-image: url(../images/btn_arrow_right.png); } #content .object_layer nav.controls span.btn.disabled { background-image: none; cursor: default; } #content .object_layer nav.controls span.btn.disabled:hover { background-color: rgba(149, 133, 112, 0.9); } #content .object_layer .info { /* padding: 20px 18px 25px; */ } #content .object_layer .info h3 { color: #fff; font-size: 16px; line-height: 16px; margin: 0 0 20px 0; padding: 24px 18px 0; text-transform: uppercase; } #content .object_layer .info .thumbnails { overflow: hidden; margin: 0 0 10px 0; padding: 0 18px; } #content .object_layer .info .thumbnails span { background: #fff url(../images/loading_small.gif) no-repeat center; display: block; cursor: pointer; height: 85px; float: left; margin: 0 5px 5px 0; overflow: hidden; width: 77px; } #content .object_layer .info .thumbnails span img { float: left; width: 77px; } #content .object_layer .info .thumbnails span.selected { border: 1px solid #fff; height: 83px; width: 75px; } #content .object_layer .info .thumbnails span.selected img { margin: -1px; } #content .object_layer .info .links { border-top: 1px solid #ACA191; } #content .object_layer .info .links span { border-bottom: 1px solid #ACA191; color: #fff; cursor: pointer; display: block; font-size: 13px; line-height: 1.4; padding: 16px 20px; } #content .object_layer .info .links span:hover { background: #ACA191; } #content .object_layer .info .links span.selected { background: #F7F6F4; color: #333; } #content .object_layer .info .links span.audio { background: url(../images/btn_play.png) no-repeat 20px center; padding-left: 44px; } #content .object_layer .info .links span.audio:hover { background-color: #ACA191; } #content .object_layer .info .links span.audio.loading { background-image: url(../images/loading_small_dark.gif); } #content .object_layer .info .links span.audio.playing { background-image: url(../images/btn_pause.png); } #content .object_layer nav.viewer_controls { position: absolute; top: -46px; z-index: 76; -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -ms-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out; } #content .object_layer nav.viewer_controls.visible { top: 0; } #content .object_layer nav.viewer_controls span { background-color: rgba(244, 123, 106, 0.9); color: #fff; display: block; float: left; font-size: 10px; letter-spacing: 1px; margin: 0 1px 0 0; padding: 18px 24px; text-transform: uppercase; } #content .object_layer nav.viewer_controls span.label { background-color: rgba(149, 133, 112, 0.9); } #content .object_layer nav.viewer_controls span.btn { background-position: center center; background-repeat: no-repeat; cursor: pointer; padding: 18px 24px; text-indent: -99999px; } #content .object_layer nav.viewer_controls span.btn:hover { background-color: rgba(244, 123, 106, 1); color: #fff; } #content .object_layer nav.viewer_controls span.btn.zoom_in { background-image: url(../images/btn_zoom_in.png); } #content .object_layer nav.viewer_controls span.btn.zoom_out { background-image: url(../images/btn_zoom_out.png); } #content .object_layer nav.viewer_controls span.btn.rotate_cw { background-image: url(../images/btn_rotate_cw.png); } #content .object_layer nav.viewer_controls span.btn.rotate_ccw { background-image: url(../images/btn_rotate_ccw.png); } #content .object_layer nav.viewer_controls.image span.label.rotate, #content .object_layer nav.viewer_controls.image span.btn.rotate_cw, #content .object_layer nav.viewer_controls.image span.btn.rotate_ccw { display: none; } #content .object_layer nav.viewer_controls span.btn.toggle_hints { text-indent: 0; width: auto; } #content .object_layer .art_hints { background: rgba(244, 123, 106, 0.9) url(../images/icon_art_hints.png) no-repeat 10px center; color: #fff; cursor: pointer; display: block; float: left; font-size: 10px; letter-spacing: 1px; margin: 0; padding: 14px 20px 14px 40px; position: absolute; text-transform: uppercase; top: -38px; right: 0; z-index: 76; -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -ms-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out; } #content .object_layer .art_hints.visible { top: 0; } #content .object_layer .art_hints:hover { background-color: rgba(244, 123, 106, 1); color: #fff; } #content .object_layer #fl_cover { background: url(../images/cover_bg.png) repeat; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 79; } /*------------------------------------------- Modal - Generic -------------------------------------------*/ #content .overlay { background: rgba(255, 255, 255, 0); position: absolute; width: 100%; z-index: 70; } #content .modal { background: #F7F6F4; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); padding: 0; overflow: hidden; position: absolute; top: 0; width: 700px; } #content .modal .close { background: url(../images/btn_close.png) no-repeat center; cursor: pointer; display: block; height: 32px; position: absolute; right: 15px; top: 17px; text-indent: -99999px; width: 32px; z-index: 71; } #content .modal .inner { height: 100%; overflow: hidden; margin: 0 18px 0 20px; } #content .modal .scroll_pane { padding: 37px 0 50px; overflow: hidden; width: 629px; } #content .modal h2 { color: #333; font-size: 28px; text-transform: uppercase; margin: 0 0 20px 20px; } #content .modal h3 { color: #333; font-size: 22px; text-transform: uppercase; margin: 0 0 20px 20px; } #content .modal p { color: #333; font-size: 15px; line-height: 21px; margin: 20px 0; padding: 0 20px; } #content .modal p a { color: #333; text-decoration: underline; } #content .modal p a:hover { color: #F6921C; } #content .modal.timeline { right: -700px; z-index: 71; -webkit-transition: right 0.3s ease-in-out; -moz-transition: right 0.3s ease-in-out; -ms-transition: right 0.3s ease-in-out; -o-transition: right 0.3s ease-in-out; transition: right 0.3s ease-in-out; } #content .modal.timeline.visible { right: 0; } #content .modal.details { left: -700px; width: 900px; z-index: 77; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -ms-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } #content .modal.details.visible { left: 0; } #content .modal.details .inner { margin: 0 18px 0 220px; } #content .modal iframe, .modal embed, .modal object { display: block; margin: 0 auto; max-width: 600px; } /*------------------------------------------- Modal - Timeline -------------------------------------------*/ #content .modal.timeline h2 { margin: 0 0 35px 20px; } #content .modal.timeline ul { background: url(../images/bg_timeline_edge.png) repeat-y 23px 0; padding: 0 30px 0 20px; } #content .modal.timeline ul li { background: url(../images/bg_timeline_marker.png) no-repeat 0 5px; color: #191919; font-size: 13px; line-height: 18px; margin: 15px 0; overflow: hidden; padding: 0 0 0 15px; } #content .modal.timeline ul li span.date { background: #938570 url(../images/bg_timeline_carot.png) no-repeat top left; color: #fff; display: block; float: left; font-size: 11px; height: 18px; line-height: 18px; margin: 0 10px 0 0; padding: 0 5px 0 0; text-align: right; width: 77px; } #content .modal.timeline ul li span.event { display: block; float: left; overflow: hidden; width: 470px; } #content .modal.timeline ul li span.object_link { color: #F6921C; cursor: pointer; font-style: italic; } #content .modal.timeline ul li span.object_link:hover { color: #766394; } #content .modal.timeline ul li.object span.date { background-color: #F6921C; } #content .modal.timeline ul li.first { background: url(../images/bg_timeline_marker_first.png) no-repeat 0 0; } #content .modal.timeline ul li.last { background: url(../images/bg_timeline_marker_last.png) no-repeat 0 5px; } /*------------------------------------------- Modal - Details -------------------------------------------*/ #content .modal.details { } /*------------------------------------------- Modal - iFrame -------------------------------------------*/ #content .overlay.dark { background: rgba(0, 0, 0, 0.75); position: absolute; width: 100%; z-index: 1000; } #content .modal.iframe { background: #000; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); padding: 0; z-index: 1001; } #content .modal.iframe iframe { max-width: 100%; width: 100%; } #content .modal.iframe .title { background: #000; color: #666; font-size: 12px; line-height: 20px; height: 20px; padding: 15px 20px; text-transform: uppercase; } #content .modal.iframe .close { right: 12px; top: 12px; } /*------------------------------------------- No Flash -------------------------------------------*/ .no_flash h3 a { background: rgba(246, 136, 120, 0.9); color: #fff; display: block; font-size: 20px; margin: 300px auto; padding: 30px; text-decoration: none; text-transform: uppercase; width: 300px; } /*------------------------------------------- Info Window -------------------------------------------*/ .gmap_info_window { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); position: absolute; z-index: 10000; } .gmap_info_window div.content { padding: 20px; position: relative; width: 360px; } .gmap_info_window div.content div.inner { overflow: hidden; } .gmap_info_window span.close { background: url(../images/btn_close.png) no-repeat center; cursor: pointer; display: block; height: 32px; position: absolute; right: -13px; top: -13px; text-indent: -99999px; width: 32px; } .gmap_info_window h3 { font-family: "Lucida Grande", "Lucida Sans", sans-serif; font-size: 14px; font-weight: bold; line-height: 18px; margin: 10px 0; } .gmap_info_window img.thumbnail { border: 1px solid #E9E7E2; margin: 0; width: 360px; height: 280px; } .gmap_info_window p { color: #928570; font-size: 12px; line-height: 17px; margin: 10px 0; } .gmap_info_window p a { color: #333; text-decoration: underline; } .gmap_info_window p a:hover { color: #F6921C; } .gmap_info_window p.object_title { font-style: italic; margin: 10px 0 0; } .gmap_info_window span.object_link { color: #F6921C; cursor: pointer; display: block; font-style: italic; margin: 5px 0 0; } .gmap_info_window span.object_link:hover { color: #766394; } /*------------------------------------------- Tooltip -------------------------------------------*/ #tooltip { position: absolute; z-index: 10000; } #tooltip .tooltip_content { background: #333; color: #fff; display: block; float: left; font-size: 11px; height: 18px; line-height: 18px; margin: 0 10px 0 0; padding: 0 5px; text-align: right; } #tooltip .tooltip_caret { background: url(../images/tooltip_caret.png) no-repeat left top; display: block; height: 18px; text-indent: -99999px; width: 11px; } /*------------------------------------------- Scrollbar -------------------------------------------*/ /* .jScrollPaneContainer { position: relative; z-index: 1; } .jScrollPaneTrack { position: absolute; right: -23px; top: 0; height: 100%; } .jScrollPaneDrag { cursor: pointer; position: absolute; background: #666; overflow: hidden; z-index: 1; width: 6px !important; background: #EAE8E3; height: 100px; left: 2px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } a.jScrollArrowUp { background: url(../images/scroll_btn_up.png) no-repeat top center; display: block; position: absolute; z-index: 1; top: 0; right: -23px; text-indent: -2000px; overflow: hidden; height: 10px; } a.jScrollArrowUp:hover {} a.jScrollArrowDown { background: url(../images/scroll_btn_down.png) no-repeat bottom center; display: block; position: absolute; z-index: 1; bottom: 0; right: -23px; text-indent: -2000px; overflow: hidden; height: 10px; } a.jScrollArrowDown:hover {} a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {} */ .hint_marker { height: 1px; opacity: 0; position: absolute; width: 1px; } .hint_marker .marker { background: url(../images/icon_hint_inactive.png) no-repeat left top; cursor: pointer; display: block; height: 46px; margin: -23px 0 0 -23px; position: relative; width: 46px; z-index: 2; } .hint_marker.active { z-index: 3; } .hint_marker.active .marker { background-image: url(../images/icon_hint_active.png); } .zoomer-loaded .hint_marker { opacity: 1; } .hint_info_overlay { background: rgba(0, 0, 0, 0); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .hint_marker .hint_info_window { left: 50px; position: absolute; } .hint_marker .hint_info_window.on_left { left: auto; right: 50px; position: absolute; } .hint_info_window { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); left: 0; position: absolute; z-index: 75; } .hint_info_window div.content { padding: 20px; position: relative; width: 360px; } .hint_info_window div.content div.inner { overflow: hidden; } .hint_info_window span.close { background: url(../images/btn_close.png) no-repeat center; cursor: pointer; display: block; height: 32px; position: absolute; right: -13px; top: -13px; text-indent: -99999px; width: 32px; } .hint_info_window h3 { font-family: "Lucida Grande", "Lucida Sans", sans-serif; font-size: 14px; font-weight: bold; line-height: 18px; margin: 10px 0; } .hint_info_window img.thumbnail { border: 1px solid #E9E7E2; margin: 0; width: 358px; } .hint_info_window p { color: #928570; font-size: 12px; line-height: 17px; margin: 10px 0; } .hint_info_window p a { color: #333; text-decoration: underline; } .hint_info_window p a:hover { color: #F6921C; }