/* Global CSS that are applied for all screen sizes */


.nav ul {
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.5em;
	font-weight: 100;
}

.nav li {
    border: 1px #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.nav li span {
	display: block;
}
body {
	background-color: #fff;
}

.nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	}
p {
    font-size: 14px;
    color: #000;
}

/* Adding some background color to the different menu items */

.nav li:nth-child(12n+1) { background: #0099CC;}
.nav li:nth-child(12n+2) { background: #288BA0;}
.nav li:nth-child(12n+3) { background: #00239C;}
.nav li:nth-child(12n+4) { background: #2F407A;}
.nav li:nth-child(12n+5) { background: #91A7D0;}
.nav li:nth-child(12n+6) { background: #01BEB2;}


/*++++++++++++++++++++ 4 colummns-version +++++++++++++++++++++*/
@media (min-width:44em) {

.nav li {
    display: block;
    border: 3px #fff;
	float: left;
	width: 33.3%;    /* 4 columns */
    font-size: 1.1em;
    height: 120px;
}
	
.nav a {
		padding: 0.5em;		
}

.nav img {
        height: 40px;
        width: auto;
}
.container > header {
		font-size: 1.1em;
	} 
}

p {
    font-size: 14px;
}
/*++++++++++++++++++++ 3 colummns-version ++++++++++++++++++++++*/
@media (max-width: 43.99em) {


.nav li {
    display: block;
    border: 2px #fff;
	float: left;
	width: 33.3%;    /* 4 columns */
    font-size: 1.0em;
    height: 100px;
}
    
.nav a {
		padding: 0.5em;		
}   
    
.nav img {
        height: 35px;
        width: auto;
}
.container > header {
		font-size: 0.9em;
	}    
}
p {
    font-size: 14px;
}
/*++++++++++++++++++++ 2 colummns-version ++++++++++++++++++++++*/
@media (max-width: 36em) {


.nav li {
    display: block;
    border: 2px #fff;
	float: left;
	width: 50%;    /* 4 columns */
    font-size: 1.0em;
    height: 100px;
}
    
.nav a {
		padding: 0.5em;		
}
    
.nav img {
        height: 30px;
        width: auto;
}
.container > header {
		font-size: 0.7em;
	}
}
p {
    font-size: 14px;
}
/*++++++++++++++++++++ 1 colummns-version ++++++++++++++++++++++*/
@media (max-width: 20em) {


.nav li {
    display: block;
    border: 1px #fff;
	float: left;
	width: 100%;    /* 1 column */
    font-size: 1.0em;
    height: 30px;
}
    
.nav a {
	padding-left: 0.5em;
    padding-top: 0.2em;
}

.image  {
    display: none;  /*Bild wird auf kleinen Displays entfernt */
}
.container > header {
		font-size: 0.6em;
	}
}
p {
    font-size: 14px;
}