/* ==|== eigene Stile ===================================================== */
/* freihalten des background-Image */
#titlepicbar { margin: 0 auto 5px auto; display:block;  
background-image:url('/images/entry.jpg'); width: 550px; height:183px;
background-repeat:no-repeat; background-position:center 0px; }
/* Spalten   */
#mainbar { display:block; }
#sidebar { float: right; display:block;	width: 40%; }
/* oben rechts unten links      */
#sideContent { margin: 10px 0px 10px 20px;	padding: 10px 0px 10px 5px; }
#footer { display:block; width: 100%; margin: 0 0px 0 0px; padding: 0px 0px 0px 0px;
  text-align: center; clear: both; }
#textbox { margin: 10px 5px 10px 5px; padding: 10px 10px 10px 10px;
	border-radius:10px;	border:1px solid silver; background-color: #F3E2A9;}
#rahmen { float: right; display:block; width: 322px; border: 2px solid blue; border-radius: 10px; 
  padding: 0 5px 0 5px; margin: 0 15px 10px 10px; }
#rahmenquer { float: right; display:block; width: 420px; border: 2px solid blue; border-radius: 10px; 
  padding: 0 5px 0 5px; margin: 0 15px 10px 10px; }
#bild { text-align: center; margin: 15px auto 20px auto; }
#cloud { text-align:center; background-color:#F5DA81; margin: 10px 5px 10px 5px; padding: 10px 10px 10px 10px;
	border-radius:10px;	border:1px solid silver;}

.level1 { font-size: 60%; }
.level2 { font-size: 80%; }
.level3 { font-size: 100%; }
.level4 { font-size: 120%; }
.level5 { font-size: 140%; }


p.prio1 { display:block; }
p.prio2 { display:block; }
p.prio3 { display:block; }
p.onlysmall { display: none;}

div.prio1 { display:block; }
div.prio2 { display:block; }
div.prio3 { display:block; }
div.social { display: block; }
div.clearbar { clear: both; }


/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design. This example overrides the primary ('mobile first') styles */
/* Mini-Mobile -------------------------------- */
@media only screen and (max-width: 319px) {
/* Foto-Show mini, kein Titelfoto, aber Logo, nur 1 Spalte, keine Fotoshow */
body { background-image:none;  }
#mainbar { display:block; width: 100%; }
#mainContent { /* oben rechts unten links      */
  margin: 0 1px 0 1px; padding: 0px 0px 0px 0px; }
#titlepicbar { display: none; }
#sidebar { display:block; width: 100%; }
#sideContent { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
#textbox { margin: 3px 0px 3px 0px; padding: 10px 10px 10px 10px;
	border-radius: 0px; border:none; }
#titlepicbar { display:block; height: 1px;}
#rahmen { display:none; }
#rahmenquer { display:none; }

p.onlysmall { display: block; font-style:italic;}
p.prio2   { display: none; }
div.prio2 { display: none; }
p.prio3   { display: none; }
div.prio3 { display: none; }
div.social { display: none; }
div.trenner { display: none; }

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* Fotoshow midi, kleines Titelfoto, aber Logo */
#titlepicbar { margin: 0 auto 1px auto; display:block;  
background-image:url('/images/entry140.jpg'); width: 140px; height:52px;
background-repeat:no-repeat; background-position:center 0px; }
#mainbar { display:block; width: 100%; }
#mainContent { /* oben rechts unten links      */
  margin: 0 1px 0 1px; padding: 0px 0px 0px 0px; }
#sidebar { display:block; width: 100%; }
#sideContent { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
#textbox { margin: 3px 1px 3px 1px; padding: 10px 10px 10px 10px;
	border-radius: 0px; border:none; }
#titlepicbar { display:block; height: 54px; }
#rahmen { display:none; }
#rahmenquer { display:none; }

p.onlysmall { display: block; font-style:italic;}
p.prio2   { display: none; }
div.prio2 { display: none; }
p.prio3   { display: none; }
div.prio3 { display: none; }
}
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}
/* zwischen Smartphones und iPads + iPhones */
@media only screen and (min-width: 481) and (max-width: 767px) {
/* Fotoshow maxi, auch Titelfoto nur im Querformat */
#titlepicbar { margin: 0 auto 3px auto; display:block;  
background-image:url('/images/entry140.jpg'); width: 140px; height:52px;
background-repeat:no-repeat; background-position:center 0px; }
p.prio3   { display: none; }
div.prio3 { display: none; }
#rahmen { display:none; }
#rahmenquer { display:none; }
#sidebar { display:block; width: 100%;}
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
/* volle Info, Fotos entweder landscpae oder portrait voll betrachtbar */
}
/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px)
and (orientation : landscape) { 
}
/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px)
and (orientation : portrait) { 
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
@media only screen and (-webkit-min-device-pixel-ratio : 2.0),
only screen and (min-device-pixel-ratio : 2.0) {
}
@media only screen and (min-width: 35em) {
  /* Style adjustments - ursprünglich in Boilerplate */
}


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }
 /* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
 /* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 @media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}