/*
Title: Stylesheet
Author: Florian Stelzer
*/


/* font import*/
@import url(source_sans_pro/source-sans-pro.css);

html {
  font-size: 16px;
  }
body {
  background-color: #ffffff;
  font-family: Source Sans Pro;
  font-size: 1rem;
  color: #777777;
  line-height: 1.4;
}
#header{
   width: 96vmin;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2rem;   
}

#content{
   width: 96vmin;
   margin-left: auto;
   margin-right: auto;
}

#footer{
   width: 96vmin;
   margin-left: auto;
   margin-right: auto;
   margin-top: 4rem;
   font-size: 0.75rem;   
}

div.thumbnail_with_caption{
  margin-top: 3vmin;
  width: 30vmin;
  float: left;
}

div.thumbnail_with_caption_center{
  width: 30vmin;
  margin-top: 3vmin;
  margin-left: 3vmin;
  margin-right: 3vmin;
  float: left;
}

div.thumbnail{
  margin-top: 3vmin;
  width: 30vmin;
  height: 30vmin;
  float: left;
}

div.thumbnail_center{
  width: 30vmin;
  height: 30vmin;
  margin-top: 3vmin;
  margin-left: 3vmin;
  margin-right: 3vmin;
  float: left;
}

div.thumbnail_with_caption img, div.thumbnail_with_caption_center img, div.thumbnail img, div.thumbnail_center img {
	height: 100%; width: 100%; object-fit: contain
}

#photo{
  width: 96vmin;
  margin-bottom: 1rem;
}

#photo img {
	width: 100%;
	object-fit: contain;
	max-height: 80vh;
}

p {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

/* Klasse fuer Haupttexte,z.B. in Albumseiten der Startseite und dem Impressum,
aber nicht fuer die Bildbeschreibungen auf den Fotoseiten */
p.main_text {
	font-size: 1.125rem
}


a, a:link, a:visited {
	text-decoration:none;
	color:#777777;
	-webkit-transition:color 100ms linear;
	-moz-transition:color 100ms linear;
	transition:color 100ms linear;
}

a:hover {
	color:#000000;
}

h1 {
  font-size: 4rem;
  font-weight: 200;
  color: #222222;
  margin-bottom: 1rem;
  margin-top: 1rem;
  margin-left: -0.3rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: normal;
  color: #222222;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
  
h3 {
  font-size: 1rem;
  font-weight: bold;
  color: #222222;
  margin-bottom: 0;
  margin-top: 0;
}

hr {
  clear: both;
  border:0;
  height:1px;
  background:#dddddd;
}

#previous {display:block; text-align:left; float:left; font-size: 0.875rem; margin-bottom: 0.5rem;
}

#next {display:block; text-align:right; font-size: 0.875rem; margin-bottom: 0.5rem;
}



/* Ab hier abweichende Angaben fuer Mobile Devices */

@media (max-width: 719px) {
	
  html {
    font-size: 16px;
    }

  #header{
     width: 90vmin;  
  }

  #content{
     width: 90vmin;
  }

  #footer{
     width: 90vmin;  
  }

  div.thumbnail_with_caption, div.thumbnail{
    width: 90vmin;
    margin-top: 6vmin;
  }

  div.thumbnail_with_caption_center, div.thumbnail_center{
    width: 90vmin;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6vmin;
  }

  div.thumbnail, div.thumbnail_center{
	  height: 90vmin;
  }

  #photo{
    width: 90vmin;
  }
  
  p.main_text {
	font-size: 1rem
  }
  
}