Template:Duesseldorf/CSS

/***** Wiki CSS ******/

#sideMenu, #top_title { display: none; }

#content { width: 100%; padding: 0px; margin: 0px; margin-top: -2px; background-color: #e6e6e6; }

body { background-color: #e6e6e6; font-family: 'Roboto', sans-serif; margin: 0px; line-height: 1.5; font-size: 15px; } /***** Normalize *****/

html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /***** Page CSS ******/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } /* Fonts */

h1, h2, h3, h4, h5, h6 { color: #0C9476; padding-bottom: 5px; }

h1 { font-size: 36px }

h2 { font-size: 30px }

h3 { font-size: 24px }

h4 { font-size: 20px }

h5 { font-size: 18px }

h6 { font-size: 16px }

.page a:link { color: #0C9476; font-weight: bold; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; text-decoration: none; }

.page a:visited { color: #0C9476; }

.page a:hover { color: black; text-decoration: underline; }

.page a:active { color: #0C9476; }

.page p {padding-left: 3px; padding-right: 3px; font-size: 15px;} .page ul {padding-left: 3px; padding-right: 3px; font-size: 15px;}

dd { font-size: 12px; } b {color:#0C9476 }

.text-justify { text-align: justify; }

.text-left { text-align: left; padding-right: 10px; }

.text-right { text-align: right; padding-left: 10px; }

img { max-width: 100%; height: auto } /* Nützliche Klassen*/

.middle { margin: auto; }

.width { width: 80%; max-width: 1200px; }

.top-padding { padding-top: 15px; } /*Responsive*/

.row { width: 100%; float: left; }

.row::after { content: ""; clear: both; display: table; } /* For mobile phones: */

[class*="col-"] { width: 100%; float: left; }

.colhalf { width: 50%; }

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

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

.banner { background-color: #e6e6e6; margin-bottom: 2% }

.navigation { background-color: #e6e6e6; margin-bottom: 1%; }

ul.topnav { list-style: none; margin: 0; padding: 0; overflow: hidden; }

ul.topnav li {display:inline;}

ul.topnav li a { display: inline-block; color: grey; text-align: center; padding: 14px 16px; text-decoration: none; font-weight: normal; font-size: 17px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

ul.topnav li a.active { color: #0C9476; }

ul.topnav li a:hover { color: #0C9476; text-decoration: underline; }

ul.topnav li.icon { display: none; }

@media screen and (max-width: 1024px) { ul.topnav li:not(: last-child) { display: none; } ul.topnav li { float: left; } ul.topnav li.icon { float: right; display: inline-block; } }

@media screen and (max-width: 1024px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } /*Page*/

.border { border-radius: 10px; }

.shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }

.page { background-color: #ffffff; margin-bottom: 6%; padding-top: 4%; padding-bottom: 2%; overflow-x: auto }

.attention { background-color: #0C9476; border: 1px solid #09765e; border-radius: 4px; padding: 25px; margin-bottom: 25px; }

.footer { margin-top: 50px; } /* Footer Gallery */

.sponsor { padding: 5px; }

.sponsor img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }

.sponsor img:hover { -webkit-filter: grayscale(0%); filter: none; } /* Switch Gallery*/

.sg-container { max-width: 100%; float: left; display: list-item; list-style-type: none; position: relative; margin: 4px; cursor: pointer }

.sg-container img { max-width: 100%; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border: 0px solid #000000; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }

.img-hidden { bottom: 0; position: absolute; opacity: 0; filter: alpha(opacity=0); width: 100%; z-index: 1000; transition: opacity 2s; -moz-transition: opacity 2s; -webkit-transition: opacity 2s; }

.sg-container.active .img-hidden { opacity: 1; filter: alpha(opacity=100); transition: opacity 2s; -moz-transition: opacity 2s; -webkit-transition: opacity 2s; } /* Accordion */

button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }

button.accordion.active, button.accordion:hover { background-color: #ddd; }

div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: 0.6s ease-in-out; opacity: 0; }

div.panel.show { opacity: 1; max-height: 500px; } .sponsors img:hover { -webkit-filter: grayscale(0%); filter: none; }

.sponsors img {

 display: inline-block;
 vertical-align: middle;  
 width: 25%;
 transition: transform .2s ease-in-out;
 -webkit-filter: grayscale(100%);		
 filter: grayscale(100%);

}

/* Change number of boxes per row based on viewport width */ @media all and (min-width: 600px) {

 .sponsors img {
   width: 20%;
 }

} @media all and (min-width: 1024px) {

 .sponsors img {
   width: 15%;
 }

}