/*-------------------------------------------------------------------------------------------- SCREENS MIN 768 px/ 48em ---*/
@media only screen and (min-width : 48em) {
       #header-image {
        top:2px;
        left:25px;

        border-radius:50px;
        background:rgba(255,255,255,0.7);
       }
	   
       /* Change mainnavigation */
   @media only screen and (max-width : 87.5em) {  /* Bis 1400px */
     #mainnav { font-size:1.4em; }

     @media only screen and (max-width : 85em)  { /* Bis 1360px */
       #mainnav { font-size:1.3em; }

       @media only screen and (max-width : 80em)  { /* Bis 1280px */
          #mainnav { font-size:1.2em; }

          @media only screen and (max-width : 73em)  { /* Bis 1168px */
             #mainnav { font-size:1.1em; }

             @media only screen and (max-width : 70.5em)  { /* Bis 1128px */
                #mainnav { font-size:1.0em; }

                @media only screen and (max-width : 64.5em)  { /* Bis 1032px */
                   .mainimg { display:none; }
                   #mainnav { left:15px;
                              font-size:1.1em; }
					
                }

                @media only screen and (max-width : 53em)  { /* Bis 848px */
                   #mainnav { font-size:1.0em; }
                }
             }
          }
       }
     }
   }

} /* END SCREEN */

/*-------------------------------------------------------------------------------------------- SCREENS MAX 768 px/ 48em, p.e. Tablets, Smartphones ---*/
@media only screen and (max-width : 48em) {
         /* SIZE */
         #sidebar {
          font-size:0.95em;
         }

         footer, .header, .sidebar {
          font-size:0.75em;
         }

         /* BORDER */
         #main, #sidebar {
          border-radius:0;
          border:0;
         }

         /* COLORS */
         html, body {
         /* Scrollbar fuer IE, Opera und Konqueror */
          scrollbar-arrow-color:#489;
          scrollbar-shadow-color:#489; /* Farbe fuer den unteren und rechten Rand */
         }

         header {
          background-color:#489;
         }

         #navigation {
          background-color: #ACC;
         }

         #main {
          background:rgba(255,255,255,1.0);
         }

         #sidebar {
          background-color:#489;
          color:#FFF;
         }

         .sidebar {
          color:#FFF;
         }

         .sidebar:hover, sidebar:focus {
          color:#ACC;
         }

         .header:active, .sidebar:active {
          color:#002;
         }
		 
		 fieldset {
			border: 1px solid #489;	
		}

		 legend {
			color: #489;
		 }
		 
		 input, textarea {
			border: 1px solid #489;
		}
		
		input[type="submit"], input[type="reset"] {
			background: #489;
		}
		
  @media only screen and (max-width : 30em){
    /* SIZE */
    h1 {
	 font-size:1.4em;
	}
	
	h2, legend {
	 font-size:1.0em;
	}
	
	#main {
     font-size:0.9em;
    }

    #navigation {
     font-size:0.75em;
    }

    #sidebar {
     font-size:0.9em;
    }
	
	#vcard {
	 display:none;
	}
	
	#vcard_mobile {
	 display:block;
	}

    footer {
     font-size:0.6em;
    }

    /* FONTS */
    #navigation, #me, legend {
     font-family:'Muli', sans-serif;
    }
  } /* END SMARTPHONES */
} /* END MOBILE */