Team:Goettingen/css/main

/* Overriding standard styles */

.logo_2018 { 

 display: none;

}

  1. top_title {
 display: none;

}

  1. content {
 width: 100%;
 padding: 0;
 margin: 0;
 background-color: transparent;

}

  1. mw-content-text > p {
 display: none;

}

/*#####BASE#####*/

body { 

 background: #E0D7CE url("T--Goettingen--Main-Page-glyph_background.png") no-repeat fixed;
 background-size: cover;
 font-size: 80%;
 margin: 0;
 width: 100%;

}

  1. bodyContent {
 margin: 0;
 padding: none;

}

  1. bodyContent a {
 color: #FEDC54;
 font-weight: bold;

}

  1. bodyContent a[href ^="https://"] {
 padding: 0;

}

  1. bodyContent div {
 text-align: justify;

}

  1. bodyContent a:visited {
 color: #B19A3A;

}

  1. bodyContent a:hover {
 text-decoration: underline;
 cursor: pointer;

}

  1. bodyContent h1,
  2. bodyContent h2,
  3. bodyContent h3,
  4. bodyContent h4,
  5. bodyContent h5,
  6. bodyContent h6 {
 padding: 5px 10px;
 margin: 0px;
 overflow: visible;
 text-align: left;
 line-height: 1.2em;

}

  1. bodyContent table,
  2. bodyContent th,
  3. bodyContent td {
 border: none;

}

  1. bodyContent table {
 margin: 10px auto;
 white-space: normal;
 background-color: transparent;

}

  1. bodyContent th {
 font-size: 1.1em;
 background-color: transparent;

}

  1. bodyContent td,

th { 

 word-break: normal;

}

  1. bodyContent,
  2. bodyContent p {
 font-size: 1em;
 font-family: Tahoma, Geneva, sans-serif;

}

  1. bodyContent p {
 margin: 0;
 padding: 10px;

}

  1. bodyContent img {
 box-sizing: border-box;

}

/*#####LAYOUT#####*/

  1. bodyContent #header {
 width: 100%;
 height: 80px;
 display: flex;
 justify-content: space-between;
 background-color: #3E3E3E;
 border-bottom: 5px solid #5E5E5E;

}

  1. bodyContent #header_logo {
 flex: 1 0;
 height: 60px;
 margin: auto;
 padding-right: 10px;
 align-self: center;

}

  1. bodyContent #header_logo img {
 height: 100%;
 float: right;

}

  1. bodyContent #header_team {
 flex: 1 0;
 display: flex;
 align-items: center;
 justify-content: flex-start;

}

  1. bodyContent #header_team p{
 color: white;
 font-weight: bold;
 font-size: 1.2em;
 line-height: 1.1;
 text-align: center;

}

@media only screen and (max-width: 600px) { 

 #bodyContent #header_team {
   font-size: 3vw;
 }

}

  1. bodyContent #header_middle {
 display: flex;
 flex: 3 0;

}

  1. bodyContent #header_middle-container {
 margin: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 85px;
 box-sizing: border-box;
 border-left: 5px solid #5E5E5E;
 border-right: 5px solid #5E5E5E;
 border-bottom: 5px solid #5E5E5E;

}

  1. bodyContent #header_middle-container p {
 padding-left: 20px;
 padding-right: 20px;
 line-height: 1.1;
 text-align: center;
 font-family: "Arial Black", Gadget, sans-serif;
 text-transform: uppercase;
 color: #FEDC54;
 font-size: 1.8em;

}

  1. bodyContent #header_middle-container span {
 text-transform: none;
 font-family: Georgia, serif;
 color: white;

}

@media only screen and (max-width: 600px) { 

 #bodyContent #header_middle-container p {
   font-size: 4.8vw;
 }

}

  1. bodyContent #content_menu_wrapper {
 position: relative;
 background-image: url("T--Goettingen--Main-Page-background.png");
 background-repeat: repeat;
 background-position: bottom;
 background-size: 1000px;
 /*etwas unsauber, ist eigentlich 900px aber dann muss ich das bild neu zuschneiden*/
 background-attachment: fixed;
 overflow: hidden;

}

@media only screen and (max-width: 900px) and (max-aspect-ratio: 6/10) { 

 #bodyContent #content_menu_wrapper {
   background-image: url("T--Goettingen--Main-Page-background_6_10.png");
   background-repeat: no-repeat;
   background-position: bottom left;
   background-size: auto 100%;
   background-attachment: fixed;
 }

}

  1. bodyContent #main_wrapper {
 background-color: #E0D7CE;

}

@media only screen and (min-width: 900px) { 

 #bodyContent #main_wrapper {
   width: 900px;
   margin: 0 auto;
   border-bottom: 5px solid #5E5E5E;
   border-right: 5px solid #5E5E5E;
   border-left: 5px solid #5E5E5E;
   box-sizing: border-box;
 }

}

  1. bodyContent #navigation {
 display: block;
 width: 20%;
 float: left;
 margin-bottom: 20%;
 z-index: 999;

}

@media only screen and (max-width: 600px) { 

 #bodyContent #navigation {
   display: block;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 30%;
   border-bottom: 5px solid #5E5E5E;
   border-right: 5px solid #5E5E5E;
 }
 #bodyContent #navigation.is-nav-hidden {
   display: none;
 }

}

  1. bodyContent #main-content {
 width: 80%;
 float: right;
 box-sizing: border-box;
 padding: 0.1px;
 /*Aus mir unbekannten Gründen, muss das Padding wohl angegeben werden, um das Hintergrund-Bild auf die ganze Seite zu spannen, entweder ein Bug oder ich bin da noch nicht ganz hinter gestiegen*/

}

@media only screen and (max-width: 600px) { 

 #bodyContent #main-content {
   width: 100%;
 }

}

  1. bodyContent #footer {
 width: 100%;
 position: relative;
 background-color: #3E3E3E;

}

  1. bodyContent .l-two-col {
 display: flex;
 justify-content: space-between;
 flex-direction: row;
 padding: 10px;

}

  1. bodyContent .l-two-col > * {
 flex: 0 0 50%;

}

  1. bodyContent .l-four_col {
 display: flex;
 justify-content: space-around;
 flex-direction: row;

}

  1. bodyContent .l-four_col > * {
 flex: 0 0 15%;

}

  1. bodyContent .l-four_col-social {
 position: absolute;
 top: 20px;
 width: 100%;

}

  1. bodyContent .l-four_col-social > * {
 flex: 0 0 20%;
 z-index: 1;

}

  1. bodyContent .l-four_col-social img {
 border-radius: 25%;
 width: 100%;

}

.l-four_col-social img:hover { 

 transform: scale(1.1);
 transition: all ease-in 0.3s;

}

/*#####MODULES#####*/

  1. bodyContent .control-button {
 display: none;
 align-items: center;
 justify-content: center;
 width: 50px;
 height: 40px;
 background-color: #3E3E3E;
 border: 2px solid #FEDC54;
 font-size: 1.5em;
 font-weight: bold;
 color: white;
 z-index: 999;

}

  1. top-scroll {
 position: fixed;
 bottom: 20px;
 right: 20px;

}

  1. bodyContent .control-button:hover {
 background-color: #7E7E7E;
 transition: all ease-in 0.2s;
 cursor: pointer;

}

  1. bodyContent #show_nav {
 z-index: 1;
 display: none;
 position: absolute;
 left: 20px;
 top: 20px;

}

@media only screen and (max-width: 600px) { 

 #bodyContent #show_nav {
   display: block;
 }

}

  1. bodyContent .sidebar-items {
 display: block;
 width: 100%;
 padding: 10px 10px 10px 20px;
 box-sizing: border-box;
 border: none;
 color: white;
 font-size: 1em;
 font-weight: bold;
 text-decoration: none;
 text-align: left;
 line-height: 1.5;
 background: #3E3E3E url("T--Goettingen--sidemenu_bg.png") left bottom/contain no-repeat;

}

@media only screen and (max-width: 600px) { 

 #bodyContent .sidebar-items {
   text-align: center;
 }

}

  1. bodyContent .sidebar-items:hover {
 background-color: #FEDC54;
 color: #3E3E3E;
 text-decoration: none;
 transition: 0.5s ease-out;
 cursor: pointer;

}

  1. bodyContent .sidebar-items:visited {
 color: #ffffff;
 text-decoration: none;

}

  1. bodyContent .sidebar-drop_items {
 padding: 5px 5px 5px 20px;
 font-size: 0.8em;
 background: #585858 url("T--Goettingen--sidemenu_bg.png") left bottom/75% no-repeat;

}

@media only screen and (max-width: 600px) { 

 #bodyContent .sidebar-drop_items {
   background-color: #585858;
 }

}

  1. bodyContent .sidebar .is-sidebar-active {
 background-color: #FEDC54;
 color: #3E3E3E;

}

  1. bodyContent .sidebar-dropdown.is-hidden {
 display: none;

}

  1. bodyContent .l-triangle {
 width: 100%;
 padding-top: 140%;
 position: relative;
 overflow: hidden;

}

@media only screen and (max-width: 600px) { 

 #bodyContent .l-triangle {
   display: none;
 }

}

  1. bodyContent .l-triangle_down {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 200%;
 height: 200%;
 background-color: #3E3E3E;
 transform: rotate(-45deg);
 transform-origin: 0 100%;

}

  1. bodyContent .l-triangle-absolute {
 position: absolute;
 left: 0;
 bottom: 100%;
 width: 20%;
 padding-top: 20%;

}

  1. bodyContent .l-triangle_up {
 position: absolute;
 top: 0;
 left: 0;
 width: 300%;
 height: 300%;
 background-color: #3E3E3E;
 transform: rotate(45deg);
 transform-origin: 0 0;

}

  1. bodyContent .footer_heading {
 padding: 0 5px 0 5px;
 font-size: 1.1em;
 font-weight: bold;
 color: #ffffff;
 text-align: left;

}

  1. bodyContent .sponsor_mention-flex {
 display: flex;
 justify-content: center;
 flex-direction: row;
 padding-bottom: 10px;
 padding-left: 10px;

}

  1. bodyContent .sponsor_mention-flex > * {
 height: 50px;
 margin-right: 10px;
 margin-left: 10px;

}

@media only screen and (max-width: 600px) { 

 #bodyContent .sponsor_mention-flex > * {
   height: 8vw;
 }

}

  1. bodyContent .contact table {
 width: 100%;
 font-size: 1em;

}

@media only screen and (max-width: 600px) { 

 #bodyContent .contact table {
   font-size: 2.4vw
 }

}

  1. bodyContent .contact table,
  2. bodyContent .contact th,
  3. bodyContent .contact td,
  4. bodyContent .contact tr {
 margin: 0;
 padding: 0 5px 0 0px;
 line-height: 1;
 text-align: left;
 color: white;
 background-color: transparent;
 border: none;

}

  1. bodyContent .contact th,
  2. bodyContent .contact td {
 padding: 2px 5px 2px 5px;

}

  1. bodyContent .shout_out p {
 padding: 0 5px 0 5px;
 color: white;
 font-size: 1em;
 text-align: justify;

}

@media only screen and (max-width: 600px) { 

 #bodyContent .shout_out p {
   font-size: 2.4vw;
 }

}

  1. bodyContent p.shout_out_wall_of {
 text-align: center;
 font-size: 1.5em;

}

@media only screen and (max-width: 600px) { 

 #bodyContent p.shout_out_wall_of {
   font-size: 3vw;
 }

}

/* Haupt-Template für die Artikel, dies wird auch als Vorlage für die anderen genutzt */

  1. bodyContent .article {
 margin: 10px;
 padding: 10px;
 background-color: rgba(255, 255, 255, 0.6);

}

  1. bodyContent .article a {
 color: #B19A3A;

}

  1. bodyContent .article_direct-footnote {
 margin: 10px;
 font-size: 0.8em;

}

  1. bodyContent .article ul {
 margin: 10px 10px 10px 40px;

}

  1. bodyContent .article ol {
 margin: 10px 10px 10px 40px;

}

  1. bodyContent .article ul li {
 list-style: circle outside url(T--Goettingen--notebook-ring.png);

}

  1. bodyContent .article li {
 padding-left: 5px;
 padding-bottom: 10px;
 margin: 0;

}

  1. bodyContent .article li:last-of-type {
 padding-bottom: 0px;

}

  1. bodyContent .article_head-line {
 background-color: #FEDC54;
 transform: skewX(-20deg);
 width: 90%;
 margin: 10px 5%;
 box-shadow: 3px 3px 3px grey;

}

  1. bodyContent .article_head-line > * {
 clear: both;
 padding-left: 7.5%;
 padding-right: 7.5%;
 text-align: center;
 transform: skewX(20deg);

}

  1. bodyContent .article_picture {
 width: 75%;
 margin: 0 auto;
 padding-top: 10px;

}

  1. bodyContent .article_picture img {
 width: 100%;

}

  1. bodyContent .article_picture p {
 text-align: justify;
 font-weight: bold;
 font-size: 0.8em;

}

  1. bodyContent .article_picture-left {
 float: left;
 width: 30%;
 padding-left: 10px;
 padding-right: 15px;

}

  1. bodyContent .article_picture-right {
 float: right;
 width: 30%;
 padding-left: 15px;
 padding-right: 10px;

}

  1. bodyContent .article_multpicture {
 margin: 10px;

}

  1. bodyContent .article_multpicture > div {
 display: flex;
 justify-content: space-around;
 align-items: flex-end;

}

  1. bodyContent .article_multpicture > div > * {
 flex: 0 0 48%;

}

  1. bodyContent > div .article_multpicture-paragraph {
 align-items: flex-start;

}

  1. bodyContent .article_multpicture p {
 width: 100%;
 text-align: justify;
 font-weight: bold;
 font-size: 0.8em;
 box-sizing: border-box;

}

  1. bodyContent .article_multpicture img {
 width: 100%;
 height: 100%;
 object-fit: contain;

}


  1. bodyContent .article_multpicture-triple > div > * {
 flex: 0 0 32%;

}

  1. bodyContent .article_clear-left {
 clear: left;

}

  1. bodyContent .article_clear-right {
 clear: right;

}

/*Content-Table wird verwendet für Tabellen jeder Art, die Informationen in einem spalten-orientieren Aufbau enthalten*/

  1. bodyContent .article_table {
 margin: 10px;
 text-align: left;
 word-wrap: break-word;
 word-break: break-all;
 hyphens: auto;
 -ms-hyphens: auto;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;

}

  1. bodyContent .article_table a {
 word-wrap: break-word;
 word-break: break-all;
 hyphens: auto;
 -ms-hyphens: auto;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;

}

  1. bodyContent .article_table table {
 margin-top: 0px;

} /*

  1. bodyContent .article_table th,
  2. bodyContent .article_table td {
 border-left: 2px solid #3E3E3E;
 border-right: 2px solid #3E3E3E;

}

  • /
  1. bodyContent .article_table th {
 background-color: #FEDC54;

}

  1. bodyContent .article_table td {
 background-color: #ECE7E1;

}

  1. bodyContent .article_table td:nth-child(odd) {
 background-color: #e3ded8;

}

  1. bodyContent .article_table td:first-child,
  2. bodyContent .article_table th:first-child {
 border-left: none;

}

  1. bodyContent .article_table td:last-child,
  2. bodyContent .article_table th:last-child {
 border-right: none;

}

  1. bodyContent .article_table p {
 text-align: center;
 font-weight: bold;

}

  1. bodyContent .article_table_hline {
 border-top: 2px solid #3E3E3E;

}

  1. bodyContent .article-table_right {
 text-align: right;

}

  1. bodyContent .article_formula {
 height: 2.5em;
 margin-left: 10px;
 margin-right: 10px;

 display: flex;
 justify-content: center;
 align-items: center;

}

  1. bodyContent .article_formula img {
 height: 100%;
 margin: 0;

}