/*-------------------------------------------------------------------------------------------- SCREENS MIN 768 px/ 48em ---*/
@media only screen and (min-width : 48em) {
       /* WIDTH, HEIGHT */
       #page-wrapper {
        margin-left:10px;
        margin-top:5px;
        width:98%;
        max-width:1440px;
       }

       #main {
        width:79.5%;
        height:495px;
        top:5px;
        overflow-y:auto;
       }

       #sidebar {
        width:83.5%;
        top:5px;
       }

       #background {
        height:560px;
       }

       .logo {
        width:75px;
       }

       .prof {
        width:45px;
       }

       /* BACKGROUNDS */
       .mainimg {
        background-image:url('../pics/dots.svg');
       }

       .mainimg:hover {
        background-image:url('../pics/dots_hover.svg');
       }

       .mainimg:active {
        background-image:url('../pics/dots_active.svg');
       }

       /* BOXES */
      #header-image {
        top:2px;
        left:25px;
       }

       #prof {
        top:552px;
        left:15px;
       }

       #mainnav {
        width:16.5%;
        position:absolute;
        top:40px;
        left:0;
        display:inline;
        /* top right bottom left */
        padding:2.5% 0 1.5% 0;
       }

       /* HIDDEN */
       #navigation {
        display:none;
       }
	   
	   .f_link{
		  display:none;
	   }
} /* END SCREEN */

/*-------------------------------------------------------------------------------------------- SCREENS MAX 768 px/ 48em, p.e. Tablets, Smartphones ---*/
@media only screen and (max-width : 48em) {
         /* WIDTH, HEIGHT */
         #page-wrapper {
          width:100%;
         }

         #prof {
          top:3px;
          left:5px;
         }

         .prof {
          width:25px;
         }

         #background {
          height:auto;
         }

         #navigation {
          display:inline;
          height:20px;
         }

         /* BOXES */
         #main {
          width:95%;
          height:auto;
          top:0;
          left:0;
          padding:2.5%;
          overflow:auto;
         }

         #sidebar {
          width:99%;
          top:0;
          left:0;
          padding:0.5%;
         }
		 
		 input[type="submit"], input[type="reset"] {
			width: 10em;
		}
		 
         /* HIDDEN */
         #header-image, #mainnav {
          display:none;
         }
		 
		 .f_link{
		  display:none;
		 }
		 
 @media only screen and (max-width : 30em){
    #page-wrapper {
     margin:0;
    }

    /* BACKGROUND */
    body {
     background-image:none;
    }

    /* WIDTH, HEIGHT */
    header, footer, #background, #navigation {
     width:100%;
    }

    #prof {
     top:2px;
     left:3px;
    }

    .prof {
     width:20px;
    }
	
	/* HIDDEN */
	.friends{
	 display:none;
	}
	
	.f_link{
	 display:inline;	
	}
	
	/*-----------------------------Kontaktformular--------------------------------------------*/
input[type="submit"], input[type="reset"] {
	width: 8em;
}	
  } /* END SMARTPHONES */
} /* END MOBILE */