/* v3.css style mobile */

/* ------------------------------------------------------------------------ */

/* Tablet PC */
/* ------------------------------------------------------------------------ */

@media all and (max-device-width: 1000px) 
{

html {
  color:#000; background:#fff;
}
body {
  color:#000; background:#fff;
  font-size:0.8em;
  font-family:verdana,arial,helvetica,sans-serif;
}

/* Anchor Elements */

a:link {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:visited {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:active {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:hover {
  color:#000000; background:#BF8660;
  text-decoration:underline;
}
         

/* Layout  Layout  Layout  Layout */

* { margin: 0; padding: 0; }
	
/* TITLE-Content-Box */

#page-wrap {
	position: absolute;
	z-index: 2;
	width: 400px;
	margin: 50px auto;
	padding: 20px;
	background: rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 0 20px black;
	-webkit-box-shadow: 0 0 20px black;
	box-shadow: 0 0 20px black;
	right: 20px;	
	bottom: 0;
}


/* starnavi */

.starnavi{
width:100px;
}

#navi {
	position: absolute;
	z-index: 2;
	width: 100px;
	padding: 20px;
	left: 0;
	
	top: 0;
}

#navi ul {
margin: 0;
padding: 0;
list-style: none;
}

#navi a {
position: absolute;
text-indent: -1000em;
}

#navi .seite1 a {
top: 20px;
left: 20px;
width: 30px;
height: 30px;
}

#navi .seite2 a {
top: 30px;
left: 70px;
width: 30px;
height: 30px;
}

#navi .seite3 a {
top: 30px;
left: 100px;
width: 30px;
height: 30px;
}

#navi .seite4 a {
top: 50px;
left: 130px;
width: 30px;
height: 30px;
}

#navi .seite5 a {
top: 110px;
left: 160px;
width: 30px;
height: 30px;
}

#navi .seite6 a {
top: 190px;
left: 50px;
width: 30px;
height: 30px;
}

#navi .seite7 a {
top: 115px;
left: 80px;
width: 30px;
height: 30px;
}

#navi .seite8 a {
top: 50px;
left: 40px;
width: 30px;
height: 30px;
}

#navi a:hover {
background-image: url(../images/hover50.gif);
width: 50px;
height: 50px;
}

/* BG-Imagecontainer */
	
	#bg {
  width: 100%;
  top: 0;
  left: 0;
  overflow:auto;
  background-attachment: fixed;
  position: local;
}

/* floating bottom menu  */

.menu {
  position:absolute;
  overflow:hidden;
	z-index: 4;
  margin:0;
  padding:2px 0 2px 4px;
}


}


/* ------------------------------------------------------------------------ */

/* Tablet small 600x800  helens ipod reagiert hierauf  */
/* ------------------------------------------------------------------------ */

@media only screen and (max-device-width: 680px) 
{

html {
  color:#000; background:#fff;
}
body {
  color:#000; background:#fff;
  font-size:2.0em;
  font-family:verdana,arial,helvetica,sans-serif;
}

/* Anchor Elements */

a:link {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:visited {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:active {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:hover {
  color:#000000; background:#BF8660;
  text-decoration:underline;
}
            

/* Layout  Layout  Layout  Layout */

* { margin: 0; padding: 0; }
	
/* TITLE-Content-Box */

#page-wrap {
	position: absolute;
	z-index: 2;
	width: 400px;
	margin: 50px auto;
	padding: 20px;
	background: rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 0 20px black;
	-webkit-box-shadow: 0 0 20px black;
	box-shadow: 0 0 20px black;
	right: 20px;	
	bottom: 0;
}

/* starnavi */

.starnavi{
width:200%;
//height:800%;
}

#navi {
	position: absolute;
	z-index: 2;
	width: 100px;
	padding: 20px;
	left: 0;
	
	top: 0;
}

#navi ul {
margin: 0;
padding: 0;
list-style: none;
}

#navi a {
position: absolute;
text-indent: -1000em;
}

#navi .seite1 a {
top: 20px;
left: 20px;
width: 30px;
height: 30px;
}

#navi .seite2 a {
top: 30px;
left: 70px;
width: 30px;
height: 30px;
}

#navi .seite3 a {
top: 30px;
left: 100px;
width: 30px;
height: 30px;
}

#navi .seite4 a {
top: 50px;
left: 130px;
width: 30px;
height: 30px;
}

#navi .seite5 a {
top: 110px;
left: 160px;
width: 30px;
height: 30px;
}

#navi .seite6 a {
top: 190px;
left: 50px;
width: 30px;
height: 30px;
}

#navi .seite7 a {
top: 115px;
left: 80px;
width: 30px;
height: 30px;
}

#navi .seite8 a {
top: 50px;
left: 40px;
width: 30px;
height: 30px;
}

#navi a:hover {
background-image: url(../images/hover50.gif);
width: 50px;
height: 50px;
}

/* BG-Imagecontainer */
	
	#bg {
  width: 100%;
  top: 0;
  left: 0;
  overflow:auto;
  background-attachment: fixed;
  position: local;
}

/* floating bottom menu  */

.menu {
  position:absolute;
  overflow:hidden;
	z-index: 4;
  margin:0;
  padding:2px 0 2px 4px;
}


}


/* ------------------------------------------------------------------------ */

/* Smartphone / iPhone */
/* ------------------------------------------------------------------------ */

    // target mobile devices
@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }
    
html {
  color:#000; background:#fff;
}
body {
  color:#000; background:#fff;
  font-size:1.8em;
  font-family:verdana,arial,helvetica,sans-serif;
}

/* Anchor Elements */

a:link {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:visited {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:active {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:hover {
  color:#000000; background:#BF8660;
  text-decoration:underline;
}
            

/* Layout  Layout  Layout  Layout */

* { margin: 0; padding: 0; }
	
/* TITLE-Content-Box */

#page-wrap {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100px;
	padding: 0px;
  overflow:auto;
	left: 0;
	bottom: 0;
}

/* starnavi */


.starnavi{
width:100%;
//height:100%;
}

#navi {
	position: absolute;
	z-index: 2;
	width: 400px;
	padding: 0px;
	left: 0;
	
	top: 0;
}

/* BG-Imagecontainer */
	
	#bg {
  width: 100%;
  top: 0;
  left: 0;
  overflow:auto;
  background-attachment: fixed;
  position: local;
}

/* floating bottom menu  */

.menu {
  position:absolute;
  overflow:visible;
	z-index: 4;
  margin:0;
  padding:2px 0 2px 4px;
}



}



/* ------------------------------------------------------------------------ */

/* Smartphone / iPhone 4 high res */  recent Webkit-specific media query to 
target the iPhone 4s high-resolution Retina display
/* ------------------------------------------------------------------------ */

    // target mobile devices

@media only screen and (-webkit-min-device-pixel-ratio: 2) 

{
    
html {
  color:#000; background:#fff;
}
body {
  color:#000; background:#fff;
  font-size:1.8em;
  font-family:verdana,arial,helvetica,sans-serif;
}

/* Anchor Elements */

a:link {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:visited {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:active {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:hover {
  color:#000000; background:#BF8660;
  text-decoration:underline;
}
            

/* Layout  Layout  Layout  Layout */

* { margin: 0; padding: 0; }
	
/* TITLE-Content-Box */

#page-wrap {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100px;
	padding: 0px;
  overflow:auto;
	left: 0;
	bottom: 0;
}

/* starnavi */


.starnavi{
width:100%;
//height:100%;
}

#navi {
	position: absolute;
	z-index: 2;
	width: 400px;
	padding: 0px;
	left: 0;
	
	top: 0;
}

/* BG-Imagecontainer */
	
	#bg {
  width: 100%;
  top: 0;
  left: 0;
  overflow:auto;
  background-attachment: fixed;
  position: local;
}

/* floating bottom menu  */

.menu {
  position:absolute;
  overflow:visible;
	z-index: 4;
  margin:0;
  padding:2px 0 2px 4px;
}



}



/* ------------------------------------------------------------------------ */

/* Smartphone / iPhone 4 high res */  recent Webkit-specific media query to 
target the iPhone 4s high-resolution Retina display
should technically achieve a similar result to the above query, 
targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) */

/* ------------------------------------------------------------------------ */

    // target mobile devices

@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(min-device-pixel-ration: 1.5)

{ 
    
html {
  color:#000; background:#fff;
}
body {
  color:#000; background:#fff;
  font-size:1.8em;
  font-family:verdana,arial,helvetica,sans-serif;
}

/* Anchor Elements */

a:link {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:visited {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:active {
  color:#000000; background:transparent;
  text-decoration:none;
}
a:hover {
  color:#000000; background:#BF8660;
  text-decoration:underline;
}
            

/* Layout  Layout  Layout  Layout */

* { margin: 0; padding: 0; }
	
/* TITLE-Content-Box */

#page-wrap {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100px;
	padding: 0px;
  overflow:auto;
	left: 0;
	bottom: 0;
}

/* starnavi */

.starnavi{
width:100%;
//height:100%;
}

#navi {
	position: absolute;
	z-index: 2;
	width: 400px;
	padding: 0px;
	left: 0;
	
	top: 0;
}

/* BG-Imagecontainer */
	
	#bg {
  width: 100%;
  top: 0;
  left: 0;
  overflow:auto;
  background-attachment: fixed;
  position: local;
}

/* floating bottom menu  */

.menu {
  position:absolute;
  overflow:visible;
	z-index: 4;
  margin:0;
  padding:2px 0 2px 4px;
}



}