mobile.css

body
{
    background-image: url(backgroundmobile.jpg);
    background-size:cover;
    
    height: 100%;
    width: 100vw;
    
    /*can be added at this point again when the map positioning gets fixed --> na doch nimma mochn*/
    /*width: 100vw;*/
    
    /*Make user not be able to select text(because looks shitty)*/
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}

.main
{
    margin: 0 auto;
    width: 100%;
    height: 90vh;
    /*background-color: rgba(92,211,250,0.77);*/
    overflow: auto;
    /*background-image: url('images/woodtexture.jpg');*/
    /*background-size:cover;*/
    text-align: center;
    font-family: Headliner;
    font-size: 5vh;
}


#logo
{
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

    #yourImageID
    {    
    min-width: 1000px;
    min-height: 1000px;
    }
   

/* Portrait */
@media screen and (orientation:portrait) 
{
 
    #undersection
    {
        width: 100vw;
    }
    
    table
    {
        margin: 0 auto;
        padding-top: 5%;
    }
    
    .main
    {
        height: 90vh;
        font-size: 3vh;
    }
    
    #mapsection
    {    
    display:inline-block;
    width: 100vw;
    /*position: fixed;*/
    /*min-width: 500px;
    min-height: 500px;*/
    /*transform: translate(510px, -390px);
    border-width: 5%;
    border-style: solid;
    border-color: rgba(92,211,250,0.77);*/
    
    /*border-image: url(images/woodtexture.jpg);*/
    }
    
}


/* Landscape */
@media screen and (orientation:landscape) 
{
    
    #uppersection
    {
        float: left;
        width: 58%;
    }

    #undersection
    {
        width: 42%;
        float: right;
    }  
    
    #logo
    {
        width: 25%;
    }
    
    
    table
    {
    margin: 0 auto;
    padding-top: 0%;
    }
    
    .main
    {
        height: 45vw;
    }
    
    td
    {
        line-height: 40px;
    }
    
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) 
{
      #uppersection
    {
        float: left;
        width: 50%;
    }


    #undersection
    {
        float: right;
        width: 42%;
    }
  
    
}


@font-face
{
    font-family: Headliner;
    src: url("Headliner.ttf");
}

table
{
    margin: 0 auto;
    padding-top: 0%;
    width: 80%;
}

td:nth-child(1)
{
width: 10%;
}

td:nth-child(2)
{
width: 40%;
text-align: left;
}

td:nth-child(3)
{
width: 50%;
text-align: center;
}

td
{
    vertical-align: middle;
}

button
{
    font-family: Headliner;
    font-size: 5vh;
    background-color: rgba(251,167,39,1);
    border-style: inset;
    border-width: thin;
    border-color: rgba(255,170,40,1);
    
    /*background-color: Transparent;
    background-repeat:no-repeat;*/
}

button:hover
{
    background-color: rgba(255,190,0,1); 
}

	.smooth_zoom_preloader {
		background-image: url(zoom_assets/preloader.gif);
	}	
	.smooth_zoom_icons {
		background-image: url(zoom_assets/icons.png);
	}
	#mapsection .landmarks{
		position:absolute;
		z-index:10;	
		top:0px;
		left:0px;
		font-family: Helvetica, Arial, Verdana;
		font-size:12px;
		color: #ffffff;
	}	
	#mapsection .landmarks .item {
		position:absolute;		
		text-align:center;		
		display: none;	
	}	
	#mapsection .landmarks .lable div {
		width: 100px;
		padding: 4px;
	}	
	#mapsection .landmarks .mark .text{
		background-color:#000000;
		padding:2px 6px;
	}