@charset "iso-8859-1";
/* By default, Safari on the iPhone will render your page as if it was a desktop browser on a big screen, with 980 pixels width available for the web content. Then it will scale down the content so that it fits the small screen. */
/*
*/
/*
body.portrait p { color: red; }
body.landscape p { color: blue; }
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
What happens if your page is too short to become scrollable?
We'll need an additional meta element in case that occurs.
In order to make the page scrollable, we can set the height of the viewport using the meta element:
The iPhone automatically adjusts font size for readability.
This feature can be overridden with -webkit-text-size-adjust
-webkit-text-size-adjust none | auto | %value
*/
/*
*/
/* IE version 5.5 or earlier: some versions of IE render CSS regadless of media type declarations */ /*
*/
/* ====================================================================== */
/* ================================================================== all */
.AppleMobileHide{ display: none !important; }
.AppleMobile320 { width: 320px !important; }
.AppleMobile480 { width: 480px !important; }
.AppleMobile720 { width: 720px !important; }
/*
Webkit on the iPad honors CSS media query declarations based on orientation.
body[orient="landscape"] > *:not(.toolbar) {
/* min-height:268px;
min-height:402px;
}
*/
/* -----------------------------------------------------------------------*/
/* Reset fixed */
/* -----------------------------------------------------------------------*/
body>#fixedTop ,
body>#fixedBottom
{ position: static; }
body>#fixedTop ,
body>#fixedBottom
{
margin: 0;
padding: 1em 0;
height: auto;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
#contentCentered ,
#fixedTopCentered ,
#fixedBottomCentered
{ width: auto; }
#contentContent { padding-top: 0; }
#BottomContent
{
margin: 0;
padding: 0;
}
/* -----------------------------------------------------------------------*/
/* old Laxout - soon obsolete */
#BannerOben
{ height: auto; }
/* -----------------------------------------------------------------------*/
#LoginMenu
{
box-shadow: none;
text-shadow: none;
}
/* ---------------------------------------------------------------------*/
#NavigationBar
{
/* border: none; /* */
background: transparent none;
-webkit-animation-name: none;
-webkit-border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none; /* Safari 3.1+ */
text-shadow: none;
}
/*
44*320
20px Helveica bold
L: 10px B: 14px
Button: height 29px , radius 5px helvetica 12, middle, 10px von rechts
Round:
44*300 8px rounded
17px Helveica bold
margin-top: 17px;
*/
#NavigationBar h3 ,
#NavigationBar li
{
min-height: 43px;
line-height: 43px;
font-size: 20px;
}
#NavigationBar input[type='search']
{
width: 60%;
}
/* -----------------------------------------------------------------------*/
/* Reset Web-Effects */
/* -----------------------------------------------------------------------*/
.Effekt_TextLandung /* no state = runs immediately when the page is loaded */
{ -webkit-animation-name: none; }
#NavigationBar /* no state = runs immediately when the page is loaded */
{ -webkit-animation-name: none; }
/* ================================================================== all */
/* ================================================================= iPad */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) {
}
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}
/* ================================================================= iPad */
/* =================================================== iPhone, iPod touch */
@media only screen and (max-device-width: 480px) {
/* -----------------------------------------------------------------------*/
.AdDesktop
{ display: none; }
/* -----------------------------------------------------------------------*/
body {
min-height: 480px;
/* min-height: 558px; /* 372 * 1.5 */
/*font: 30px "Helvetica"; /* 30 px entspricht 20px */
}
/* -----------------------------------------------------------------------*/
#TopMenu
{
height: auto;
-webkit-background-size: 38px;
background-repeat: repeat; /* pre HTML5 */
font: 20px "Helvetica";
text-transform: none;
text-shadow: -1px -1px 1px #1c2a3d;
}
#TopMenu ,
#LoginMenu ,
.SiteMap
{ margin: 0 10px ! important; }
#BottomContent
{ padding: 0 10px; }
#BottomMenu
{ float: none; }
#TopMenu li a
{
width: 49%;
overflow: hidden;
white-space: nowrap;
height: 39px;
line-height: 39px;
}
#TopMenu li.Icon a
{
width: 100%;
max-width: 320px;
}
#LoginMenu { height: auto; }
#NavigationBar
{
border: none;
position: relative;
min-height: inherit;
}
#SplitViewContent
{
margin: 0;
width: 320px;
overflow: hidden;
}
/* -----------------------------------------------------------------------*/
.InneresMenu { font: 20px "Helvetica"; }
.HauptSpalten > .InneresMenu ,
.HauptSpalten .Rahmen .InneresMenu
{ border-bottom-width: 2px; }
.InneresMenu li { line-height: 1.5em; }
/* -----------------------------------------------------------------------*/
.Spalte,
.SpalteL ,
.SpalteR ,
.Spalte25 ,
.Spalte50 ,
.Spalte75
{
float: none;
width: auto;
}
.SiteMap .SMSpalte ,
.SiteMap2 .SMSpalte ,
.SiteMap3 .SMSpalte
{
padding: 0 10px;
width: auto;
float: none;
}
/* -----------------------------------------------------------------------*/
/* -----------------------------------------------------------------------*/
/* -----------------------------------------------------------------------*/
.CommunityForm { }
.CommunityForm fieldset .FieldSubSet ,
.CommunityForm fieldset .FieldSubSet3 {
margin: 0;
height: auto;
width: 98%;
float: none;
clear: both;
display: block;
}
.CommunityForm fieldset input {
width: 100% !important;
}
.CommunityForm fieldset input.auto {
width: auto !important;
}
.CommunityForm fieldset legend ,
.CommunityForm fieldset label ,
.CommunityForm fieldset .FieldSubSet label ,
.CommunityForm fieldset .FieldSubSet3 label ,
.CommunityForm fieldset input {
font-size: 150%;
}
.CommunityForm fieldset label ,
.CommunityForm fieldset .FieldSubSet label ,
.CommunityForm fieldset .FieldSubSet3 label ,
.CommunityForm fieldset input {
margin-top: 0.5em;
}
.Edit ol.Steps li
{ width: 24%; }
/* -----------------------------------------------------------------------*/
/* -----------------------------------------------------------------------*/
/* -----------------------------------------------------------------------*/
/* -----------------------------------------------------------------------*/
.AdSky ,
.AdBanner ,
.AdLink
{ display: none; }
/* -----------------------------------------------------------------------*/
#contentContent .HeaderAnimation {
margin: 0;
width: 320px;
height: 6em;
overflow: hidden;
}
.HeaderAnimation > h1
{
font-size: 30px;
}
.HeaderAnimation > h2
{
font-size: 20px;
}
/* -----------------------------------------------------------------------*/
}
/* =================================================== iPhone, iPod touch */