DIR : /home/kozerus/public_html/jkwii/js/jsdoit/jsdoit15/style.css
/home/kozerus/public_html/jkwii/js/jsdoit/jsdoit15
/* clearfix --------------------------------- */
.clearfix:after {
content: " ";
clear: both;
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/*
* For IE 6/7/8 - Using HTML5
*/
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
/*
* Override twitter bootstrap
*/
img { max-width: none; }
body {
background: #e5e5e5;
font-size: 14px;
margin:0;
padding:0;
}
#wrapper {
background: #fff;
margin: 7px;
min-height: 765px;
}
header {
margin-top: 30px;
}
.container {
background: #fff;
}
.content {
margin: 30px auto;
}
#gallery {
height: 450px;
}
.gallery-container {
background: #fff;
border: solid 1px #e1e1e1;
box-shadow: -8px 5px 20px #e5e5e5;
position: relative;
height: 445px;
transition: transform .8s ease-out;
-webkit-transition: -webkit-transform .8s ease-out;
-moz-transition: -moz-transform .8s ease-out;
-ms-transition: -ms-transform .8s ease-out;
-o-transition: -o-transform .8s ease-out;
transition: transform .8s ease-out;
width: 915px;
z-index: 3;
}
.gallery-container:nth-child(2) {
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
top: -445px;
z-index: 2;
}
.gallery-container:nth-child(3) {
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
top: -890px;
z-index: 1;
}
#map-canvas {
height: 200px;
left: 695px;
position: absolute;
top: 20px;
width: 200px;
z-index: 11;
}
#map-sv-canvas {
height: 425px;
left: 10px;
position: absolute;
top: 10px;
width: 895px;
z-index: 10;
}
.map-fake {
background: #e9e9e9;
height: 425px;
left: 10px;
position: absolute;
top: 10px;
width: 895px;
}
@-webkit-keyframes drop {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
}
100% {
top: 200px;
-webkit-transform: rotate(-80deg);
-ms-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
transform: rotate(-80deg);
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
}
}
.drop-down {
animation-name: drop;
-webkit-animation-name: drop;
animation-duration: .8s;
-webkit-animation-duration: .8s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
/* Growl */
#growlAreaWrapper {
position: fixed;
width: 301px;
right: 30px;
top: 30px;
z-index: 99999;
}
.growlArea {
background-color: rgba(0, 0, 0, 0.8);
width: 300px;
min-height: 70px;
padding: 8px;
margin-bottom: 15px;
color: white;
-webkit-box-shadow: 3px 3px 5px 0px #777777;
-moz-box-shadow: 3px 3px 5px 0px #777777;
-ms-box-shadow: 3px 3px 5px 0px #777777;
-o-box-shadow: 3px 3px 5px 0px #777777;
box-shadow: 3px 3px 5px 0px #777777;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: -o-box;
display: box;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.growlArea .growlBody {
width: 300px;
height: 100%;
}
.growlArea .growlBody h1, .growlArea .growlBody p {
text-align: left;
color: white;
}
.growlArea .growlBody h1 {
text-indent: 0;
font-size: 20px;
margin-bottom: 12px;
}
.growlArea .growlBody p {
font-size: 12px;
}
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer