/* bowlby-one-sc-regular - latin */
@font-face {
  font-family: 'Bowlby One SC';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bowlby-one-sc-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/bowlby-one-sc-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bowlby-one-sc-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bowlby-one-sc-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bowlby-one-sc-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bowlby-one-sc-v19-latin-regular.svg#BowlbyOneSC') format('svg'); /* Legacy iOS */
}
/* roboto-100italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-100italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-100italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* yanone-kaffeesatz-regular - latin */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/yanone-kaffeesatz-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/yanone-kaffeesatz-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/yanone-kaffeesatz-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/yanone-kaffeesatz-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/yanone-kaffeesatz-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/yanone-kaffeesatz-v24-latin-regular.svg#YanoneKaffeesatz') format('svg'); /* Legacy iOS */
}
/* yanone-kaffeesatz-700 - latin */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/yanone-kaffeesatz-v24-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/yanone-kaffeesatz-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/yanone-kaffeesatz-v24-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/yanone-kaffeesatz-v24-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/yanone-kaffeesatz-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/yanone-kaffeesatz-v24-latin-700.svg#YanoneKaffeesatz') format('svg'); /* Legacy iOS */
}

html {height:100%;}
body {font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 100; height:100%;}
a {text-decoration: none; color: #999}
a:hover {color: #666}
h1 {font-family: 'Bowlby One SC';font-size: 162px; text-align: center; font-weight: normal; line-height: 95px;}
h1 span { opacity: 0.5; margin: 0 -17px; color: #ff0066; position: relative; z-index: 1;}
h1 span.green {color: #1CEFEB; margin: 0 -22px; z-index: 0; }
h2, h3 {font-family: 'Yanone Kaffeesatz'; font-size: 18px; color: #333; font-weight: 300; margin: 40px 0 20px 0}
ul {list-style: none; margin: 0 0 0 177px; padding-top: 50px}
li {float:left; width: 32px; height: 32px; margin: 0 12px 0 0}
li a {background: url(img/social-icons.png) no-repeat; height: 32px; width: 32px}
#mail {background-position: 0px -33px}
#linked-in {background-position: -39px -33px}
#xing {background-position: -79px -33px}
#twitter {background-position: -117px -33px}
#stack-overflow {background-position: -157px -33px}
#mail:hover {background-position: 0px 0px}
#linked-in:hover {background-position: -39px 0px}
#xing:hover {background-position: -79px 0px}
#twitter:hover {background-position: -117px 0px}
#stack-overflow:hover {background-position: -157px 0px}
#github {background-image: url(img/octocat.png)}
#github:hover {background-image: url(img/octocat-hover.png)}

#blog {background: #ddd; padding: 12px 9px; color: #000; border-radius: 6px; width: 190px; display: inline-block }
#blog:hover {background: #ff0066; color: #FFF}
#cv {background: #ddd; padding: 12px 9px; color: #000; border-radius: 6px; width: 190px; display: inline-block }
#cv:hover {background: #1CEFEB; color: #FFF}

.content {width: 600px; margin: 0 auto 0 auto;  position: relative; top: 20%}
.content p {font-style: italic; color:#000; margin: 60px 0; font-size: 22px; text-align: center; }

footer {color:#999; font-size: 11px;  overflow: hidden; text-align: center; padding: 0 0 20px 0; font-style: italic; clear: both; padding-top: 20px}

.stuff .content {width: 900px; position: static; top:0; margin-top: 40px}
.stuff .content article {margin: 0 0 120px 0; clear:left; padding: 0;}
.stuff h1 {font-size:80px; line-height: 43px; text-align: left}
.stuff h1 a span {opacity: 0.5; margin: 0 -5px}
.stuff h1 a span.green {margin: 0 -5.8px}
.stuff h2 {font-size: 30px; margin-bottom:50px}
.stuff h3 {font-size: 32px; text-align: left; margin: 0 0 32px 0; padding-bottom: 8px; border-bottom: 2px dotted #aaa;}
.stuff h4 {font-weight: normal; font-size: 18px; color:#000; margin: 0 0 12px 130px; font-size: 22px;}
.stuff h5 {font-weight: normal; margin: 0 0 12px 130px; }
.stuff img.icon {border-radius: 20px; width: 100px; float:left;}
.stuff img.bordered {border: 2px solid #DDD;}
.stuff p {margin: 0 150px 20px 130px; font-size: 16px; font-style: normal; text-align: left; line-height: 1.3em;}
.stuff a.button {float:right; height: 40px; width: 120px; background: url(/img/button-download.png) no-repeat; margin: 0}
.stuff p.not-available {float:right; width: 135px; color: #999; padding: 4px; text-align: center;font-size: 14px; margin: 0; background: #eee; font-style: italic; border-radius: 8px}
.stuff .content article div {clear:both; padding: 30px 0 0 130px;}
.stuff .content article div img {margin: 0 12px 0 0; width: 320px}
.stuff .content article div img.full-width {width: 650px}
.stuff .content article:before, .stuff .content article:after {content: " "; display: table;}
.stuff .content article:after {clear: both;}
.stuff ul {margin: 0 0 0 130px; padding: 0;}
.stuff li a {display: block}
.stuff ul.tags {margin: 0; padding: 0}
.stuff ul.tags li {float:left; width: auto; height: auto; white-space: nowrap; background: #ff0066; color: #FFF; font-family: 'Yanone Kaffeesatz'; font-size: 24px; margin: 0 12px 12px 0; padding: 4px 8px; border-radius: 4px}

.cv .content article:first-of-type {margin-top: 80px}
.cv h4 {font-family: 'Yanone Kaffeesatz'; font-size: 32px;}
.cv h5 {font-size: 20px}
.cv cite {background: #eee; padding: 4px 8px; border-radius: 8px; display: inline-block; margin: 4px 4px 2px 0; font-weight: bold}

.privacy article { line-height: 1.6em }
.privacy article p { margin: 0 0 30px 0; line-height: 1.6em }

.av .content {width: 900px; position: static; top:0; margin-top: 40px}
.av .content article {margin: 0 0 50px 0; clear:left; background: #FFF; padding: 0 0 40px 0;}
.av h1 {font-size:80px; line-height: 43px; text-align: left}
.av h1 a span {opacity: 0.5; margin: 0 -5px}
.av h1 a span.green {margin: 0 -5.8px}
.av h2 {font-size: 32px; margin-bottom: 60px}
.av h3 {font-size: 32px; text-align: left; margin: 0 0 32px 0; padding-bottom: 8px; border-bottom: 2px dotted #aaa;}
.av ul {margin: 0; padding: 0}
.av li {float:none; width: auto; height: auto; margin: 0 0 16px 0; line-height: 1.5em}
.av li a {background: none}
.av p {font-size: 16px; line-height: 1.5em; text-align: left; margin: 0 0 30px 0; font-style: normal}
.av .content article:before, .av .content article:after {content: " "; display: table;}
.av .content article:after {clear: both;}
.av table {width: 100%; }
.av tr {border-bottom: 1px solid #ddd}
.av th {text-align: left; padding: 8px; border-bottom: 1px solid #aaa}
.av td {padding: 8px; line-height: 1.5em}
.av td:nth-child(2) {font-style: italic}
.av strong {font-family: Courier; font-weight: bold}
.av a {color: #ff3882}

ol {list-style-type: none; counter-reset: item; margin: 0; padding: 0; }
ol > li {display: table; counter-increment: item; margin-bottom: 0.6em; }
ol > li:before {content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em; }
li ol > li {margin: 0;}
li ol > li:before {content: counters(item, ".") " "; }
li ol > li:first-child {margin-top: 16px}
li ol > li:last-child {margin-bottom: 0;}

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
    li a {background: url(img/social-icons@2x.png) no-repeat; background-size: 189px 66px}
    li #github {background: url(img/octocat.png) no-repeat; background-size: 38px 32px}
    li #github:hover {background: url(img/octocat-hover.png) no-repeat; background-size: 38px 32px}
}