/* Grundlegende Seitenaufteilung */
* {
    box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-flow: nowrap;
  justify-content: center;  
}

.flex-container > div {
    width: auto;
    margin: 10px;
  }

.hide {
	text-indent: -12000px;
	}

body {
    font-family: "Georgia", "New Century Schoolbook", "Times Roman", serif;
    background-color: RGB(210,210,210);
    padding: 0;
    overflow-y: scroll;
	}
	#dark {
		background-color: RGB(210,210,210);
	}
	#hell {
		background: RGB(235,235,235);
	}

.header {
    padding: 20px;
    font-family:Tahoma;
    text-align: center;
    color: RGB(51,153,102);
}

.header h2 {
    font-family:Tahoma, Arial, sans-serif;
    text-align: center;
    background-color: RGB(210,210,210);
    color:RGB(100,100,100);   
}

.footer {
	padding: 20px;
	text-align: center;
	font-size: 0.8em;
}

/*Titel, Paragraphen, etc.*/
h1, h2, h3, h4, h5, h6 {
	font-family: Tahoma, verdana, arial, sans-serif;
    }

h1 {
    font-size: 1.1em;
    color:RGB(51,153,102);
    font-weight: bold;
    font-family: Tahoma, Verdana, sans-serif;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: center;
    }

  h2 {
    font-family:Tahoma;
    text-align:center; 
    color:RGB(100,100,100); 
    padding: 10px; 
  }

  h3 {
    font-family: Tahoma;
    font-weight: bold;
    font-size: 14px;
    color: #DF3459;
  }

p {
    font-family: "Georgia", "New Century Schoolbook", "Times Roman", serif;
    font-size: 1em;
    font-weight: normal;
    margin-top: .025em;
    margin-bottom: 0.25em;
    text-align: left;
}

.center {
    float:none;
    text-align: center;
    color: rgb(102, 93, 93);
}

/*Listen, NavBar, etc.*/
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: RGB(235,235,235);
}

li {
	display:inline-flex;
	float: left;
}

li a {
	display: block;
	color: #DF3459;
	padding: 14px 16px;
	background-color: white;
	text-decoration: none;
}

li a:link {
	display: block;
	font-weight: bold;
	text-decoration: none;
	color: indigo;
	background: transparent;
	}

li a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #c30;
	background: transparent;
	}
li a:hover {
	font-weight: bold;
	border-style: solid;
	border-color: #DF3459;
	text-decoration: underline;
	color: #f60;
	background: whitesmoke;
	}

.bnImg {
  height: 400px;
  width: 282px;
  margin:auto;
}

.jpgLegendC {
  text-align: center;
  font-size: 1em;
}

.jpgLegendL {
  text-align: left;
  font-size: 1em;
}

.text {
  font-size: 1.2em;
  font-family: "Georgia", "New Century Schoolbook", "Times Roman", serif;
  line-height: normal;
  text-align:left;
  padding: 15px;
}

/*Tabellen*/
#laureates {
	border-collapse:collapse;
	}

#laureates td, #laureates th {
    font-family:georgia;
    font-size:0.7em;
    border:1px solid #DF3459;
    padding:2px 2px 2px 2px;
    }

#laureates th {
    font-family:verdana;
    font-size:0.8em;
    text-align:center;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#DD2355;
    color:#ffffff;
    }

/*Bilder*/
.pictures {
    width: 40%;
      padding: 5px;
      margin: 3px;
      float: left;
  }

/* Column container */
.row {
    display: flex;
    flex-wrap: nowrap;
  }
  /* Main column */
.main {
    flex: 50%; /* Set the width of the main content */
    background-color: RGB(235,235,235); /* White background color */
    /* Some padding */
  }
.side {
	flex:25%;
	background-color: RGB(235,235,235); /* White background color */
}

.content {
	width: auto;
	margin: auto
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 50%; /* Set the width of the sidebar */
    background-color: RGB(235,235,235); /* Grey background color */
    /* Some padding */
  }

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other 
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
    float: left;
    padding: 5px;
  }

  /* For tablets: */
  @media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%; padding: 5px;}
    .col-s-2 {width: 16.66%; padding: 5px;}
    .col-s-3 {width: 25%; padding: 5px;}
    .col-s-4 {width: 33.33%; padding: 5px;}
    .col-s-5 {width: 41.66%; padding: 5px;}
    .col-s-6 {width: 50%; padding: 5px;}
    .col-s-7 {width: 58.33%; padding: 5px;}
    .col-s-8 {width: 66.66%; padding: 5px;}
    .col-s-9 {width: 75%; padding: 5px;}
    .col-s-10 {width: 83.33%; padding: 5px;}
    .col-s-11 {width: 91.66%; padding: 5px;}
    .col-s-12 {width: 100%; padding: 5px;}
   }
   /*For tablets landscape*/
   @media only screen and (min-width: 950px) {
    .col-m-1 {width: 8.33%; padding: 5px;}
    .col-m-2 {width: 16.66%; padding: 5px;}
    .col-m-3 {width: 25%; padding: 5px;}
    .col-m-4 {width: 33.33%; padding: 5px;}
    .col-m-5 {width: 41.66%; padding: 5px;}
    .col-m-6 {width: 50%; padding: 5px;}
    .col-m-7 {width: 58.33%; padding: 5px;}
    .col-m-8 {width: 66.66%; padding: 5px;}
    .col-m-9 {width: 75%; padding: 5px;}
    .col-m-10 {width: 83.33%; padding: 5px;}
    .col-m-11 {width: 91.66%; padding: 5px;}
    .col-m-12 {width: 100%; padding: 5px;}
   }
  /* For desktop: */
  @media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%; padding: 5px;}
    .col-2 {width: 16.66%; padding: 5px;}
    .col-3 {width: 25%; padding: 5px;}
    .col-4 {width: 33.33%; padding: 5px;}
    .col-5 {width: 41.66%; padding: 5px;}
    .col-6 {width: 50%; padding: 5px;}
    .col-7 {width: 58.33%; padding: 5px;}
    .col-8 {width: 66.66%; padding: 5px;}
    .col-9 {width: 75%; padding: 5px;}
    .col-10 {width: 83.33%; padding: 5px;}
    .col-11 {width: 91.66%; padding: 5px;}
    .col-12 {width: 100%; padding: 5px;}
  }

  /*On smaller screens, decrease text size*/
  @media only screen and (max-width: 300px) {
    .text {font-size: 1em}
  }