/**** Base styles ****/

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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

html {
  overflow-y: scroll;
}

body {
  font: 14px/18px 'Helvetica Neue', Arial, sans-serif;
  background: #070807 url(../images/BestOf2014/DSCN3238.jpg) no-repeat left top;
  background-size: 100%;
  color: #eee;
}

a {
  color: #A2C;
  text-decoration: none;
  font-weight: bold;
}
a.himmelblau {
  color: skyblue;
  text-decoration: underline;
  font-weight: bold;
}
a:hover {
  color: #D26;
}
a.himmelblau:hover {
  color: darkblue;
  text-decoration: none;
  font-weight: bold;
}
a:active {
  background: hsla( 0, 100%, 100%, 0.5 );
}

h1, h2 {
  font-weight: 100;
  line-height: 1.2em;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
  color: #234;
}

h3 {
  font-size: 17px;
  font-weight: bold;
}

h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
}

em { font-style: italic; font-weight: bold;}
strong { font-weight: bold; }


/**** Content ****/

header, #content {
  padding: 10px;
}


a img {
  border: none;
}

pre, code {
  font-family: Monaco, monospace;
  font-size: 12px;
  background: #111;
  color: #F5F5F5;
}

p code {
  padding: 1px 3px;
}

pre {
  padding: 10px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

ul, ol { padding-left: 1.3em;}

.hidden { display: none; }

blockquote {
        margin: 0;
        font: italic 18px Georgia, serif;
}

dt {
  font-weight: bold;
  font-size: 14px;
}

dd + dt {
  margin-top: 0.5em;
}

dd {
  margin-left: 1.0em;
}

button {
  -webkit-appearance: push-button;
}

#site-footer {
  clear: both;
  margin: 20px 0px;
  border-top: 2px solid white;
  padding: 10px;
  line-height: 30px;
  font-size: 95%;
  font-style: italic;
}

#container { max-width:800px; margin:.1em auto;
  background:transparent ;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  clear: both;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.centered { margin: 0 auto; }

.box { 
  margin: 5px;
  padding: 5px;
  background: orangered;
  font-size: 14px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
.durchsichtig {
  background: transparent;
}

.box img {
  display: block;
  width: 100%;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }

/**** Gutters ****/

.has-gutters .box {
  margin: 5px 0;
}

.has-gutters .col1 { width: 90px; }
.has-gutters .col2 { width: 230px; }
.has-gutters .col3 { width: 370px; }
.has-gutters .col4 { width: 550px; }

/**** Transitions ****/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
      -ms-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}


/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }