@viewport
{  
   orientation: portrait; 
}  

body 
{
 	font-family: Arial, sans-serif;
	text-align: left;
	font-size: 2.75vh; 
	width: 100vw; 
	color: #333333; 
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

#wrapper
{
	width:100%;
	max-width: 97vh;
	padding: 0 0 0 0;
	margin: 0.25em auto 0 auto;
	border: solid 0px red;
}

#content
{
		border: solid 0px green;

}

#target
{
	overflow: hidden;
	margin-bottom:0.5em;
	font-size: 3vh;
	line-height: 3.25vh;
}

#xtarget
{
	overflow: hidden;
	margin-bottom:0.5em;
	font-size: 3.25vh;
	line-height: 1.25em;
	
	
    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 1s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 1s;
}

#ytarget
{
	overflow: hidden;
	margin-bottom:0.5em;
	font-size: 3.5vh;
	line-height: 1.25em;
	
	
    -moz-animation-name: xdropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 1s;

    -webkit-animation-name: xdropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;

    animation-name: xdropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 1s;
}

@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateX(90%);
    }
    100% {
        -moz-transform: translateX(0);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateX(90%);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
@keyframes dropHeader {
    0% {
        transform: translateX(90%);
    }
    100% {
        transform: translateX(0);
    }
}
	
@-moz-keyframes xdropHeader {
    0% {
        -moz-transform: translateX(-90%);
    }
    100% {
        -moz-transform: translateX(0);
    }
}
@-webkit-keyframes xdropHeader {
    0% {
        -webkit-transform: translateX(-90%);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
@keyframes xdropHeader {
    0% {
        transform: translateX(-90%);
    }
    100% {
        transform: translateX(0);
    }
}	
	
.bold {	font-weight: bold; }	
.red {	color: #CC0000; }
.rot {  color: #FFFFFF; background-color: #CC0000; } 
.center { text-align: center; }
.right { text-align: right; }
.einzug { margin-left: 2em;  }
highlight { background-color: yellow; font-weight: bold; }
.mobile-menu-item { text-align: center; margin:0 0 0 0; width:100%; height: 8vh; max-height: 48px; background-color:#005e96; user-select:none; -moz-user-select: none; -webkit-user-select: none; display: block;}
#header { margin: 0 0 0 0; padding: 0 0 0 0; }
table { margin: 0.75em 0 0.75em 0; width: 100%; font-size: 2.5vh; line-height: 3vh; }
table, th, tr { padding: 0 0 0 0; border-collapse: collapse; }
td, th { padding: 1% 1%; width:48%; text-align: left; }
tr:nth-child(odd) { background-color: #e0e0e0; }
table.autotable th, table.autotable td { text-align: center; width: auto;}
.collapse { padding: 0 0 0 0; width:auto; background-color: #ffffff; }
th, .header { background-color: #005e96; color: #ffffff; padding: 1% 1%; width:48%; }
.zf { background-color: #e0e0e0; }
h5 { font-size: 1.25em; line-height: 0.9em; margin: 0 0 0 0; padding: 0 0 0 0; color: #cc0000; text-align: center; clear: both;}
.link_mehr { font-size: 2.5vh; }
c:before { color: #005e96; font-style: italic; content: "Mehr auf Seite 2 ..." }
#page2, #pic { display: none; }
#target, #picture { position: relative; margin: 1vh 1rem 0 1rem; font-size: 3vh; hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto;  -ms-hyphens: auto; height: 85vh; max-height: 70vh; text-align: left; cursor: grab; }
#picture { display: none; overflow: scroll; }
#edit { margin: 0 0.5rem 0 0.5rem; }
#xtarget, #ytarget {height: 80vh; max-height: 64vh; font-size: 3vh; hyphens: auto;  -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto;  -ms-hyphens: auto; }
#copyright { margin-top:0;text-align:center;font-size:0.75rem; user-select:none; -moz-user-select: none; -webkit-user-select: none; } 
#logo { text-align:center; margin:0 0 0 0; padding: 0 0 0 0; user-select:none; -moz-user-select: none; -webkit-user-select: none;  }
#logoimg-m1, #logoimg { height: 12vh; max-height: 10vh; float: left; cursor: pointer; margin: 0 0 0 0;}
#logoimg-m2 { height: 12vh; max-height: 10vh; float: left; cursor: pointer; margin: 0 0 0 0;}
#logoimg-l { height: 12vh; max-height: 10vh; float:left; margin-left: 1em; cursor: pointer;  margin: 0 0 0 0;}
#logoimg-r { height: 12vh; max-height: 10vh; float:right; margin-right: 1em; cursor: pointer;  margin: 0 0 0 0;}
#trefferliste { margin:0 0.5em 0 5rem; font-size: 0.8rem; }
#suchfeld { margin: 0 0 0 0.2em; padding: 0 0 0 0.25em; width:1%; text-align: left; font-size:3vh; height: 4vh; border-radius: 0 0; display: none;}
#proposal, #ctag, #cmonat, #cjahr { margin: 0 0 0 0; padding: 0 0 0 0; width:80%; text-align: left; font-size:0.75rem; height: 5vh; float:right; display:inline-block;  }
#treffer, #treffernr { color: #cc0000; }
#methode-bug { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/methode-bug-64.jpg); }
#methode { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/methode-64.jpg); }
#methode7 { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/methode7-64.jpg); }
#windows { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/windows-64.jpg); }
#stashcat { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/stashcat-64.jpg); }
#swing { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/swing-64.jpg); }
#chrome { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/chrome-64.jpg); }
#google { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/google-64.jpg); }
#rnd { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/rndlogo-64.jpg); }
#apple { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/apple-64.jpg); }
#em-pagetrack { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/empagetrack-64.jpg); }
#apphilfe { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/apphilfe.jpg); }
#icon-dc { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/dcx-64.jpg); }
#openstage { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/openstage-64.jpg); }
#office { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/office-64.jpg); }
#outlook2010 { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/outlook2010-64.jpg); }
#outlook { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/outlook-64.jpg); }
#office365 { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/office365-64.jpg); }
#sportbuzzer { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/sportbuzzer-64.jpg); }
#ozlogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/ozlogo-64.jpg); }
#hazlogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/hazlogo-64.jpg); }
#dnnlogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/dnnlogo-64.jpg); }
#mazlogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/mazlogo-64.jpg); }
#lvzlogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/lvzlogo-64.jpg); }
#nplogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/nplogo-64.jpg); }
#gtlogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/gtlogo-64.jpg); }
#nikonlogo { width: 12vh; height: 14vh; float: left; margin: 0 2vh 0 0; background-repeat: no-repeat; background-size: contain; background-position: 0 8px; background-image: url(../img/nikonlogo-64.jpg); }
#layout-tool, #artikel-tool { display:block; color:#005e96; margin:0.75rem 0 0 0; vertical-align: top; }
#layout-tool::after { content: url(../img/icon_tool_layout.jpg) attr(href) " Tool: Layout-Werkzeug"; vertical-align: top; }
#artikel-tool::after { content: url(../img/icon_tool_text.jpg) attr(href) " Tool: Artikel-Werkzeug"; vertical-align: top; }
.tapicon-l { height:8vh; max-height: 48px; cursor:pointer; float:left; margin: -0.75rem 0 0.25rem 0.5rem; } 
.tapicon-m { height:8vh; max-height: 48px; cursor:pointer; float: left; margin-left:7%;  margin-right:4%;  }
.tapicon-r { height:8vh; max-height: 48px; cursor:pointer; float:right; margin-right:4%; }
i { color: #005e96; margin: 0.75vh 0 0 0; display: block; }
hinweis { display: inline-block; color: #005e96; display: inline-block; }
.em-icons { float: left; margin: 0 1rem 0 0; }
.em-icons-64 { float: left; margin: 0.75rem 1rem -0.2em 0; }
.picture { float: left; width:50vw; max-width:128px; margin: 0.75rem 1rem -0.2em 0; }
.big-pic { display: block; width:90vw; max-width:280px; margin: 0.5rem auto 0.5rem auto; }
t, .tasten { font-weight: bold; color: #cc0000; }
m, .menu { font-weight: bold; color: #005e96; }
.duden { margin-top:0,5em; font-size: 1em; }
.url { color: #cc0000; font-style: italic; }
.status { font-weight: bold; font-size:0.9em; font-style: italic; margin-left: 0.25em; }
.sq { vertical-align: middle; width: 1em; height: 1em; display: inline-block; margin-right: 4px; border: 1px solid #999999; white-space: nowrap;}
.status-angelegt { background-color: #003366; }
.status-erfasst { background-color: #ff66cc;  }
.status-aktualisiert { background-color: #ff66cc; }
.status-freigegeben { background-color: #ffff00; } 
.status-geprüft { background-color: #ffff00; }
.status-inarbeit { background-color: #ff0000; }
.status-fehler { background-color: #ff0000; }
.status-ok { background-color: #339900; }
.status-ppiok { background-color: #339900; }
.status-optimiert { background-color: #339900; }
.status-fertig { background-color: #339900; }
.status-neu { background-color: #990099; }
.status-eigene { background-color: #990099; }
.status-repro { background-color: #ffaa00; }
.status-reprofertig { background-color: #336600; }
.status-zurückgezogen { background-color: #000000;  }
.status-geplant { background-color: #99ccff; }
.status-vorläufig { background-color: #3399ff; }
.share-button-o { position: relative; z-index: 99; cursor: pointer; font-size:5vh; text-align: center; width:100%; color: #005e96; padding: 0.75em 0 0.75em 0; margin: 0 0 0 0; background-color: #ffffff; border-style: solid; border-color: #005e96; border-width: 2px 0 0 0;}
.share-button-u { position: relative; z-index: 99; cursor: pointer; font-size: 5vh; text-align: center; width:100%; color: #005e96; padding: 0.75em 0 0.75em 0; margin: 0 0 0 0; background-color: #ffffff; border-style: solid; border-color: #005e96; border-width: 2px 0 2px 0;}
.call-button {position:relative;font-size:1rem;height:2rem;width:100%;z-index:99; cursor: pointer; border-radius: 1em; background-color: #fcfcfc; color: #005e96; border: 1px solid #005e96; margin-top:0.85rem; font-weight: bold; }
.link-label {font-size:1rem; display: block; font-weight:normal;}
.link-button {font-size:1rem; display: block; font-weight: bold;}
u { font-weight: bold; text-decoration: none; font-style: italic; font-size: 0.9em; color: #666666; white-space: nowrap;}
.madsackInfo { font-size: 0.9em; line-height:0.9em;}
#page2, #cdate { display: none; }
r, k, p6, p7{ display: inline-block; font-size: 1em; height: 1em; background-color: #69A3D8; color: #ffffff; margin: 0.5em 0; padding: 0.1rem 0.5rem 0.25rem 0.5rem; border: 2px solid #69A3D8; border-radius: 1em 1em; font-weight: bold; }
p6:before { content: ' Méthode 6 '; }
p7:before { content: ' Méthode 7 '; }
zitat:before { content: '... dass Du hier sogar ein paar Lebensweisheiten findest, die auch für den Job nützlich sein können?'; }
r { color: #ffffff; border: 2px solid #2DB34A; background-color: #2DB34A; }
ol { padding: 0 0 0 0; margin: 0 0 0 0; }
duden::after { content: '... dass beim RND folgende Schreibweise vereinbart ist?'; }

/* @media screen and (orientation:portrait) and (max-height:1024px)*/

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait)
{
	body, #wrapper { max-width: 1024px; margin: 0 auto 0 auto; }
	h5 { font-size: 1.5rem; margin-top: 0; }
	#suchfeld { max-width: 412px; }
	#proposal { max-width: 400px; }
	#wrapper { max-width: 488px; }
	#target { max-height: 80vh; }
	#logoimg-m1, #logoimg-m2, #logoimg-l, #logoimg-r, #logoimg {  max-height: 12vh; margin-bottom: 0.5em; }
	
}

@media only screen and (orientation:landscape) and (max-width:1024px)
{
	
	body, #wrapper { max-width: 96vw; margin: 0 auto 0 auto; }
	h5 { font-size: 1.25rem; margin-top: 0; width:100%; }
	#logoimg, #logoimg-m1, #logoimg-m2, #logoimg-l, #logoimg-r, #trefferliste, #suchfeld, #proposal,#inputleiste, .mobile-menu-item, c { display: none; }
	#wrapper { max-width: 96vw; }
	#target { max-width: 96vw; max-height: 78vh; }
	#xtarget, #ytarget { max-height: 78vh; font-size: 5vh; }
	#copyright { display: none; }
	#picture { max-height: 78vh; }
	.big-pic { max-width: 160px; max-height: 36px; }
	table { font-size: 4vh; line-height: 1.2em; }
	i { font-size: 5vh; line-height: 1.2em; margin-top: 2vh; }
}

/*
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait)
{
	body, #wrapper { max-width: 320px; max-height: 90vh; margin: 0 auto 0 auto; }
	h5 { font-size: 3vh; margin-top: 0;  }
	#suchfeld { max-width: 412px; }
	#proposal { max-width: 400px; }
	#wrapper { max-width: 480px; }
	#trefferliste { font-size: 2.5vh; }
	#target { height: 52vh; }
	#xtarget, #ytarget { font-size: 2.75vh; line-height: 3vh; }
	#copyright { font-size: 2vh; }
	#logoimg-m1, #logoimg-m2, #logoimg-l, #logoimg-r, #logoimg {  height: 12vh; margin-bottom: 0.5em; }
	
}
*/