@font-face {
	font-family: 'exo2';
	src: url('/fonts/Exo2-Regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*reset */ body{color:#000;background:#fff;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{vertical-align:text-top;} sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

html { overflow: -moz-scrollbars-vertical; }

body,
input,
textarea { font-family: exo2, sans-serif; font-size: 1.1em; line-height: 1.8em; color: #777; }

p { padding-bottom: .8em; }

a { color: #f40; text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { display: none; }
h2 { color: #555; }

strong { font-weight: bold; color: #000; }

header > div,
nav,
main,
footer > div { max-width: 1250px; margin: 0 auto; }

header div p,
nav > div,
main > div,
footer div address,
footer > div > p { padding-left: 40px; padding-right: 10px; }

header > div { padding-top: 200px; padding-bottom: 35px; }
nav { padding-bottom: 40px; }
main { padding-bottom: 50px; }
footer { padding-top: 50px; padding-bottom: 10px; }

header,
footer { background-color: #333; color: #bbb; }

header > div { background-image: url('/img/git-workflow.png'); background-position: right -190px; background-repeat: no-repeat; }
	header h2 { padding-bottom: 35px; }
	header h2 .name { font-weight: bold; font-size: 2em; background-color: #e60; color: #eee; display: inline; padding: 3px 40px 0 40px; box-shadow: 0 0 15px 5px #222; -webkit-box-shadow: 0 0 15px 5px #222; -moz-box-shadow: 0 0 15px 5px #222; -o-box-shadow: 0 0 15px 5px #222; }
	#menuButton { display: none; }
	.breakingPoint { display: none; }

nav li span,
nav li a { display: block; float: left; padding: 20px 0 3px 0; margin-right: 50px; color: #000; font-weight: bold; text-decoration: none; }
nav li:last-child span,
nav li:last-child a { margin-right: 0; }
nav li span { color: #f40; border-bottom: 3px solid #fff; }
nav li a:hover { border-bottom: 3px solid #e60; text-decoration: none; }
nav ul:after { content: ""; display: table; clear: both; }

footer a { color: #e50; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer address { padding-bottom: 1.6em; }
	footer address div { float: left; width: 25%; }
footer address:after { content: ""; display: table; clear: both; }

.quote blockquote { font-style: italic; background-color: #eee; padding: 5px 20px; }
.quote blockquote p { color: #555; }
.quote blockquote p:last-child { padding-bottom: 0; }
.quote blockquote p:first-child:before { content: "„"; }
.quote blockquote p:last-child:after { content: "“"; }
.quote > p { color: #000; text-align: right; }

main h2,
main h3 { font-weight: bold; }
main ul.flatList > li { padding-bottom: .8em; }

.label { display: inline-block; width: 4.5em; }

main ul { padding-bottom: .8em; }
main ul li { list-style-type: square; margin-left: 1.2em; padding: 0 0 0 .2em; }

code { background-color: #ddd; color: #555; padding: 0.3em .3em; border-radius: 2px; }
.gra2p_code { line-height: 1.5em; background-color: #162a3a; padding: .5em 1em; color: #bbb; margin-bottom: .8em; overflow-x: auto; }
.gra2p_lineNumber { color: #666; padding-right: .5em; margin-right: 1em; }
.gra2p_functionName { color: #fa0; }
.gra2p_switchName { color: #fa0; }
.gra2p_effectName { color: #f70; }
.gra2p_stateName { color: #3af; }
.gra2p_inputStateName { color: #3ef; }
.gra2p_outputStateName { color: #3ef; }
.gra2p_type { color: #e6a; }
.gra2p_string { color: #3d3; }
.gra2p_case { color: #3d3; }
.gra2p_serviceName { color: #ff6; }

@media screen and (max-width: 1260px) {
	body { font-size: 1.1em; }
	nav li span,
	nav li a { margin-right: 30px; }
}

@media screen and (max-width: 1175px) {
	header > div { padding-top: 170px; }
	header div p,
	nav > div,
	main > div,
	footer div address,
	footer > div > p { padding-right: 40px; }
  .secondHeaderSentence { display: none; }
  .breakingPoint { display: inline; }
}

@media screen and (max-width: 920px) {
	body { font-size: 1em; }
	header > div { padding-top: 60px; padding-bottom: 25px; }
	nav { padding-bottom: 25px; }
}

@media screen and (max-width: 850px) {
	#menuButton { display: inline-block; background-color: #bbb; height: 42px; position: absolute; top: 50px; right: 40px; padding: 0; box-shadow: 0 0 15px 5px #222; -webkit-box-shadow: 0 0 15px 5px #222; -moz-box-shadow: 0 0 15px 5px #222; -o-box-shadow: 0 0 15px 5px #222; cursor: pointer; }
	#menuButton:hover { background-color: #fff; }
	#menuButton span { display: inline-block; padding: 9px 20px 0; color: #222; font-weight: bold; font-size: .65em; }
		nav > div { display: none; position: absolute; top: 125px; left: 0; right: 0; background-color: #333; background-image: url('/img/git-workflow.png'); background-position: right -315px; background-repeat: no-repeat; padding: 0; }
			nav li { border-bottom: 1px solid #ccc; }
			nav ul li a,
			nav ul li span { float: none; border: none; padding: 10px 40px; margin: 0; font-weight: normal; font-size: 1.1em; }
			nav ul li a { color: #ccc; }
			nav ul li a:hover { border: none; background-color: #000; }
			nav ul li span { background-color: #000; }
  main { padding-top: 25px; }
  h1 { display: block; font-weight: bold; color: #000; font-size: 1.2em; padding-bottom: 1em; }
}

@media screen and (max-width: 780px) {
	footer address div { float: none; width: 100%; }
}

@media screen and (max-width: 670px) {
	header h2 .name { font-size: 1.6em; }
	#menuButton { top: 54px; height: 37px; }
		#menuButton span { padding-top: 8px; }
}

@media screen and (max-width: 500px) {
	header > div { padding-top: 0; }
		header h2 .name { display: block; font-size: 1.2em; width: 100%; color: #222; padding: 13px 0 10px; }
			header h2 .name .inner { padding: 0 0 0 40px; }
	#menuButton { float: right; margin-right: 20px; height: auto; background: none; position: static; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; text-align: right; }
	#menuButton:hover { background: none; }
		#menuButton span { display: inline-block; padding: 0 20px 0; color: #fff; font-weight: normal; font-size: 1em; }
	nav > div { top: 51px; background-position: right -377px; }
}

@media screen and (max-width: 400px) {
	header h2 .name .inner { padding-left: 20px; }
	#menuButton { margin-right: 0; }
  header > div p,
  main > div,
  footer > div address,
  footer > div > p { padding-right: 20px; padding-left: 20px; }
}