body
{
        margin:0em;
        padding:0em;
        background-color:#D9D9D9;
        font-family:helvetica,arial,verdana,sans-serif;
        color:#666;
}

h1
{
        margin:0em;
        margin-right:5px;
        color:#999;
        text-transform: uppercase;
        font-size:1.5em;
        font-weight:normal;
        text-align:right;
}

p
{
        margin:0em;
}

#j-graphx-site
{
		margin-left:auto;
        margin-right:auto;
        background-color:white;
}

#erkennung
{
	width:100%;
        height:5px;
        background-color:red;
}

#preview
{
	width: 98%;
	height: auto;
	overflow: hidden;
	padding-left: 1%;
}

#preview img {
	  width: 100%;
	  height: auto;
}


div#logo
{
	width: 7%;
	height: auto;
	float: left;
	background-color: white;
	position: relative;
	z-index: 800;
	margin-left: 1%;
	margin-top: 10px;
	margin-bottom: 10px;
}

#navi
{
	max-width:100%;
        height:auto;
}

#navi div
{
	max-width:20%;
        height:auto;
        float:left;
}

#navi div a img
{
	max-width:100%;
        height:auto;
        width: auto; /* IE8 */
}


#content
{
	width:100%;
	min-height:630px;
        z-index:100;
}

#content p
{
        font-size:0.7em;  
        text-align:center;  
        line-height:1.2em;  
}

#content p b
{
       color:#0099ff;    
}



#footer
{
	width:100%;
	height:30px;
    background-color:white;
	margin-top: 20px;
}



#footer p
{
        color:#777;
        font-size:0.6em;
        text-align:center;
}

a.img_link
{
        outline:none;

}

.clear
{
	clear:both;
}






/* ************************ RESPONSIVE STYLE MEDIA QUERIES************************** */

/* Large Resolutions on Desktop/Notebook */
@media ( min-width : 1200px) 
{
    .page_width 
    {
        max-width: 1200px;
    }
    
    #erkennung
    {
            background-color:black;
    }
}

/* Desktop and Notebook-Styles */
@media ( max-width : 872px) 
{
     .page_width 
    {
        width: 100%;
    }
    
    #erkennung
    {
            background-color:yellow;
    }

}

/* Tablets: Landscape and Portrait */
@media ( max-width : 720px) 
{
   
    .page_width 
    {
        width: 100%;
    }
    
    #erkennung
    {
            background-color:green;
    }
}

/* Smartphones: Landscape and Portrait  */
@media ( max-width : 568px) 
{
 
    .page_width 
    {
        width: 100%;
    }
    
    #erkennung
    {
            background-color:blue;
    }
    
   
}


/* Smartphones - small: Landscape and Portrait  */
@media ( max-width : 400px) 
{
  
    .page_width 
    {
        width: 100%;
    }
    
    #erkennung
    {
            background-color:pink;
    }
    
	div#logo
	{
		width: 10%;
		margin-left: 1%;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	#footer
	{
		margin-top: 10px;
		height: 20px;
	}



	#footer p
	{
			font-size:0.5em;
	}

	}