﻿body {
    text-align:center;
    font-family:'Segoe UI',Calibri,Arial;
    background-color:#cfcfcf;
}

#top-nav {
    width:100%;
		height:10%;
}
.panel {
    width:20%;
    float:left;
    background-color:#ffd800;
}
#panel-center {
    /*float:left;*/
    width:60%;
}

.imagecollection {
    background-color:#b6ff00;
    height:70%;
    width:95%;
    float:left;
}

.imagecontainer {
    position:absolute;
    width:100%;
/* height:1024px;		 */
}
#image-container{
	/* height:1014px; */
}
.image {
    width:50%;
    
    border:solid 10px #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}

.current {
    z-index: 15;
}
.past {
    z-index: 10;
}

#KlickInfo {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    background-color:#ffffff;
    opacity:.9;
    visibility:hidden ;
}
#NavDialog {
    position:absolute;
    /*top:10%;*/
    /*left:40%;*/
    min-height:250px;
    z-index:150;
    background-color:#ffffff;
    box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    border-radius:2px;
}

#map-container {
    position:absolute;
    background-color:#ff6a00;
    left:1%;
    z-index:100;
    height:90%;
    width:97%;
    border:solid 10px #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    
}
#map-canvas {
    height:100%;
    width:100%;

}
#map-panel {
    position:absolute;
    top:0;
    width:100%;
}

/****** Buttons ******/
.ui-btn {
    /*background-position: center;*/
    /*height:50px;*/
}
.ui-grid-d {
    /*height:500px;*/
}
.ui-page{
	height:90%;
}
/* iPhone / iPod touch (iOS) */
@media screen and (max-width: 320px) and (orientation: portrait) {
    body {
        /*width:320px;*/
    }
    .ui-btn {
        height:50px;
    }
    .map-button {
        max-height:15px;
    }
}
@media screen and (max-width: 480px) and (orientation: landscape) {}
/* LG Optimus S (Android) */
@media screen and (max-width: 320px) and (orientation: portrait) {}
@media screen and (max-width: 480px) and (orientation: landscape) {}
/* Google Nexus S (Android) */
@media screen and (max-width: 480px) and (orientation: portrait) {}
@media screen and (max-width: 800px) and (orientation: landscape) {}
/* Asus Galaxy 7 (Windows Phone) */
@media screen and (max-width: 480px) and (orientation: portrait) {}
@media screen and (max-width: 800px) and (orientation: 
landscape) {}
/* iPad 2 (iOS) */
@media screen and (max-width: 768px) and (orientation: portrait) {}
@media screen and (max-width: 1024px) and (orientation: 
landscape) {}
/* Samsung Galaxy (Android) */
@media screen and (max-width: 600px) and (orientation: portrait) {}
@media screen and (max-width: 1024px) and (orientation: 
landscape) {}
/* Motorola Xoom (Android) */
@media screen and (max-width: 800px) and (orientation: portrait) {}
@media screen and (max-width: 1280px) and (orientation: 
landscape) {}
/* Desktop: Hier sollte der übliche Mindestwert angegeben werden */
@media screen and (min-width: 768px) and (orientation: portrait) {}
@media screen and (min-width: 1024px) and (orientation: landscape) {}