/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */


/* MY CODE */
html{width: 100%;}
body{width: 100%; font-family: 'Open Sans', sans-serif;}

#wrapper{width: 80%; max-width: 1000px;margin: 0 auto;}

/*Logo*/
figure.logo{width: 300px; float:left; margin-top: 50px;}
figure.logo > img{width: 100%;}

/* Navigation */
nav{float: right; margin-top: 150px;}
nav > ul > li{display: inline;}
nav > ul > li > a{text-decoration: none; color: black; padding: 5px; font-weight: bold;}
nav > ul > li > a:hover{color: white; background:#333745;}

/* Header */
header{clear: right; display: block; margin-top: 30px; margin-bottom: 30px; height: 280px; width: 100%; background:#cccccc;}


/* Balken Oben*/
#balkenOben{width: 100%; height:65px; background:#333745;}


/* Content */
section.content h1{font-size: 30px;}

section.content article{margin-bottom: 20px;}
/* Footer */
footer{width: 100%; height: 100px; background:#333745; margin-top: 50px;}


/* Media Query */
@media screen and (max-width: 700px) {
	figure.logo{clear: both;}
	nav {width: 100%; margin-top: 30px; float: inherit; width:100%; display:inline-block;}
	nav > ul {width: 100%;text-align: center;}
	nav > ul > li{width: 100%; display:list-item; margin-bottom: 10px; font-size: 30px;}
	nav > ul > li > a{display: inline-block; width: 100%;}
	figure.logo{float: inherit; margin-left: auto; margin-right: auto; width: 80%;}
	figure.logo > img{}
}


/* Clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}


/* END MY CODE */