Team:Berlin/css/style.css
/* General
- /
@font-face {
font-family: "ag_book_roundedregular"; src: url('../fonts/headline/ag-book-rounded-bold-condensed-outline-webfont.eot'); src: url('../fonts/headline/ag-book-rounded-bold-condensed-outline-webfont.eot?#iefix position: relative;') format('embedded-opentype'), url('../fonts/headline/ag-book-rounded-bold-condensed-outline-webfont.woff') format('woff'), url('../fonts/headline/ag-book-rounded-bold-condensed-outline-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal;
}
h1, h2, h3{ font-family: "ag_book_roundedregular"; /* #0ecd28*/ color: #000080; text-transform: uppercase; }
h2 { font-size: 50px; color: white; }
h3 { font-size: 50px; }
h4 { font-size: 30px; color: #0ecd28; font-weight: normal; }
h5 { text-transform: uppercase; font-weight: bold; font-size: 16px; }
b{ font-size: 0.8em; }
b:hover{ color: white; }
.btn{ margin-top: 10px; }
.top { margin-top: 13px; }
.black{ color: black; }
.green-text { color: #0ecd28; }
.more-informations-white { text-transform: uppercase; color: white; font-size: 16px; float: right; background: transparent url('https://static.igem.org/mediawiki/2014/2/2b/Team_Berlin_igem_arrow_right_white.png') no-repeat right center; padding: 10px 30px 10px 0; margin-bottom: 30px; margin-top: 5px; }
.more-informations-white:hover { text-decoration: none; color: white; }
.more-informations-green { text-transform: uppercase; color: #0ecd28; font-size: 16px; float: right; background: transparent url('../img/Team_Berlin_igem_arrow_right_green.png') no-repeat right center; padding: 10px 30px 10px 0; margin-bottom: 30px; margin-top: 5px; }
.more-informations-green:hover { text-decoration: none; color: #0ecd28; }
.deactivate{ text-decoration: line-through; opacity: 0.5;
/*filter:Alpha(Opacity=50);*/ border: none; background: none;
}
.deactivate:hover { text-decoration: line-through; opacity: 0.5;
/*filter:Alpha(Opacity=50);*/ border: none;
background: none; }
.igem-logo{ height: 53px; width: 70px; }
.button-teilnehmen { background-color: #000080; width: 120px; margin-left: auto; margin-right: auto; height: 40px; border-radius: 21px; padding-top: 4px; margin-bottom: 4px; color: white; font-size: 16px; font-weight: bold; border: none; }
.button-teilnehmen a { color: white; font-size: 16px; font-weight: bold; }
.button-teilnehmen a:hover { color: white; font-size: 16px; font-weight: bold; }
/* Backgrounds
- /
- background1 {
background: url('../img/background/Team_Berlin_igem_background_01.jpg') no-repeat bottom fixed;
height: 640px; margin: 0 auto; width: 100%; position: relative;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
- background2 {
background: url('../img/background/Team_Berlin_igem_background_02.jpg') no-repeat bottom fixed; height: 700px; margin: 0 auto; width: 100%;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
- background3 {
background: url('../img/background/Team_Berlin_igem_big_02.jpg') no-repeat bottom fixed;
height: 640px; margin: 0 auto; width: 100%; position: relative;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
- background4 {
background: url('../img/background/Team_Berlin_igem_big_09.jpg') no-repeat bottom fixed; height: 700px; margin: 0 auto; width: 100%;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.container-green { background: url('../img/background/Team_Berlin_igem_background_green.jpg') no-repeat center center;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-bottom: 4px solid #4be861;
}
.container-blue { background: url('../img/background/Team_Berlin_igem_background_blue.jpg') no-repeat center center;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-bottom: 4px solid #000080 /* #4be861; */
}
/* Footer
- /
.footer { width: 100%; color: #000; padding: 12px 0 10px 0; }
.back-to-top-arrow{ font-size: 1.5em; color: rgba(130,130,130,0.9); margin: 0% auto 2% auto; }
.footer-color{ color: rgba(150,150,150,0.9); }
.footer-menue { padding-right: 2%; text-align: right; float: right; }
.footer-address{ text-align: left; margin-top: 5px; margin-left: 33px; }
.footer-sm-icons a { margin-left: 10px; }
.footer-sm-icons { text-align: left; }
.footer-sm-icons a img { margin-top: 8px;
}
.footer-imprint{
text-transform: uppercase;
color: #8d8d8d;
font-size: 12px;
text-align: right;
}
.footer-sitemap{ margin-bottom: 10px; text-align: right; }
.footer-sitemap li{ list-style-type: none;
display: inline-block; color: #0000F0;
}
.footer-sitemap a:hover{ text-decoration: none; }
/*
* MENÜ
- /
.main-menue {
text-transform: uppercase; font-size: 16px; /* margin-top: 30px; */ color: #ffffff; background-color: rgba(255,255,255,.9);
}
.main-menue-links { /*color: white;*/ color: #000080; }
.main-menue-ul { padding-left: 0; }
.main-menue li {
list-style-type: none; display: inline-block; width: 123px; padding-top: 2px; padding-bottom: 2px;
}
.main-menue li:hover {
list-style-type: none; display: inline-block; width: 121px; padding-top: 2px; padding-bottom: 2px;
}
.main-menue .active { /* border: 1px solid #0ecd28; */ border: 1px solid #000080; -moz-border-radius: 17px; border-radius: 17px;
/*just for the beta site, delete afterwards!!!!*/ width: 121px; padding-top: 2px; padding-bottom: 2px; }
.main-menue-links:hover { color: #0000FF;
text-decoration: none;
border: 1px solid #0000FF;
-moz-border-radius: 17px; border-radius: 17px; width: 121px; padding-top: 4px; padding-bottom: 4px;
}
.igem-link:hover { /*color: white;*/ color: #0ecd28;
text-decoration: none;
}
/*
* TEASER
- /
.teaser { font-size: 18px; }
.teaser-workshop { font-size: 16px; color: #656565; padding-top: 16px; padding-bottom: 6px; }
/* Site Wrapper
- /
.jumbotron{
background-color: rgba(0,0,0,0.0);
}
.jumbotron-home { background-color: rgba(0,0,0,0.0); top: 0;
bottom: 0; /*left: 0;*/ right: 0; width: 35%; height: 30%; margin: auto; position: absolute; text-align: right; padding-right: 30px;
}
.jumbotron-sub { margin-top: 48px; }
.jumbotron-blog { margin-top: 14px; }
.jumbotron-workshop { margin-top: 71px; }
- main-button{
font-weight: normal; font-size: 18px; margin-top: 10px; }
- main-button img
{ padding-top: 10px; }
- main-button a:hover
{ text-decoration: none; cursor: pointer; }
- ecoli-button{
font-weight: normal; font-size: 18px; margin-top: 10px; margin-bottom: 20px; }
- ecoli-button a:hover
{ text-decoration: none; cursor: pointer; }
- project-button{
font-weight: normal; font-size: 18px; margin-top: 10px; margin-bottom: 20px; }
- project-button a:hover
{ text-decoration: none; cursor: pointer; }
- team-button{
font-weight: normal; font-size: 18px; margin-top: 10px; margin-bottom: 20px; }
- team-button a:hover
{ text-decoration: none; cursor: pointer; }
/* Featurette
- /
.featurette{
}
.featurette-button{ width: 150px; box-shadow: 0 3px 0 rgba(0,0,0,0.5); text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.first-featurette-image{ border-radius: 5%; border: 0.5px solid #202020; -moz-box-shadow: 5px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 5px rgba(0,0,0,0.5); box-shadow: 5px 5px rgba(0,0,0,0.5); }
.span1, .span3{ color: rgba(0,0,0,0.5); font-family: Bubble; }
.green-featurette-row{ background-color: rgb(7,100,16); }
.white-background{ background-color: white; }
.row2-heading, .row2-p{ color: rgba(0,0,0,0.6); }
.row2-muted{ color: rgb(145,213,87); }
.start-text-container { padding: 35px 24% 75px 24%; }
.start-text-container-workshop { padding: 18px 24% 52px 24%; }
.teaser-icons { margin-bottom: 10px; margin-right: 10px; }
.teaser-text-sub { margin-bottom: 10px; }
.teaser-text-sub div { text-align: center; }
/* Canvas
- /
.game-intro{ font-family: Bubble; font-size: 2em; }
/* Sponsors
- /
.sponsor-title{ color: grey; font-size: 2.5em; }
.sponsor-wrapper{ background-color: #efefef; padding-top: 25px; }
.sponsor-heading-row{ padding-bottom: 18px; font-size: 1.7em; }
.sponsor-img-row{ text-align: center; }
.sponsor-img{ margin-bottom: 50px; height: 60%; width: 60%; }
img.grayscale {
/* filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'> <filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\' /></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img.grayscale:hover {
filter: none; -webkit-filter: grayscale(0%);
}
/* SUBSIDE POJECT
- /
- section-sub
{ background-color: #f3f3f3; }
- subside-content
{ color: #000; padding: 30px 0 20px 0; }
- subside-content-workshop
{ padding: 30px 5px 20px 5px; max-width: 800px; text-align: center; margin-right: auto; margin-left: auto; color: black; }
.project-steps-img img
{
/*-moz-border-radius: 100%;
border-radius: 100%;*/
margin-bottom: 16px;
}
.project-steps-img span {
margin: auto; position: absolute; top: 77px; left: 8px; right: 0; font-family: "ag_book_roundedregular"; font-size: 50px; color: #fff; -moz-border-radius: 100%;
border-radius: 100%; border: 1px solid white; width: 60px; height: 60px; line-height: 60px;
}
.project-steps { padding: 0 20px 65px 20px; }
.project-steps p { padding: 0 20% 0 20%; margin: 0 0 4px 0; }
/*SEARCH
- /
.search-archive { margin-top: 25px; margin-right: 8px; }
.search-archive img { position: absolute; right: 0; }
.search-archive input:first-child { background-color: transparent; color: #0ecd28; font-size: 16px; border: 1px solid #0ecd28; border-radius: 15px; padding: 5px 10px 5px 10px; }
.search-archive form { height: 22px; position: relative; width: 250px; margin-left: auto; margin-right: auto; }
.search-form-submit { background: transparent url('../img/Team_Berlin_igem_search.png') center center no-repeat; height: 33px; position: absolute; right: 0; text-indent: -1000em; top: 0; width: 23px; border: none; }
/*BLOG
- /
.blog-entry { width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 35px; }
/*.blog-entry-left { float: left; }
.blog-entry-right { float: left; width: 675px; text-align: left; margin-left: 20px; margin-top: 10px; }*/
.blog-text { text-align: left; }
.blog-headline { text-align: left; }
.blog-entry-tags { margin-bottom: 8px; text-align: left; }
.blog-entry-tags ul { padding-left: 0px; }
.blog-entry-tags li { list-style-type: none; display: inline-block; border: 1px solid #0ecd28; color: #0ecd28; -moz-border-radius: 17px; border-radius: 17px; padding: 3px 5px 2px 5px; min-width: 100px; text-transform: uppercase; text-align: center; padding-left: 10px; padding-right: 10px; }
.blog-entry-link { float:right; }
.clear{ clear: both; }
/* Media Querie Large
- /
@media (min-width: 992px) { .last-featurette{ padding: 0; }
.igem-logo{ /*margin-top: 10px;*/ }
}
@media (max-width: 995px) {
.footer-icon-bar { margin: 20px 0; }
.footer-imprint { padding-left: 10px; } }
/* Media Querie Medium
- /
@media (max-width: 768px){ .sponsor-img{ margin: 10% auto; height: 20%; width: 20%; } /* * MENÜ ****************************/
.main-menue { text-transform: uppercase; font-size: 15px; /* margin-top: 30px; */
}
.main-menue li
{
list-style-type: none;
display: inline-block;
width: 80px;
padding-top: 2px;
padding-bottom: 2px;
}
.main-menue li:hover { list-style-type: none; display: inline-block; width: 80px; padding-top: 2px; padding-bottom: 2px; }
.main-menue .active { border: 1px solid #0ecd28; -moz-border-radius: 17px; border-radius: 17px;
/*just for the beta site, delete afterwards!!!!*/ width: 80px; padding-top: 2px; padding-bottom: 2px; }
.start-text-container { padding: 35px 14% 75px 14%; }
.jumbotron-home{ left:0; text-align: center; min-height: 250px; } }
/* Media Querie small
- /
@media (max-width: 468px){ .featurette{ padding: 2% 0; }
.start-text-container { padding: 35px 5px 75px 5px; }
.jumbotron-home { width: 98%; }
.container-fluid { padding-right: 5px; padding-left: 5px; margin-right: auto; margin-left: auto; }
.sitewrapper{ background-color: green; }
.blog-headline{ font-size: 3em; }
}
/* media query display */ @media (max-width: 767px) {
.hidden-xs { display: none !important; }
} @media (min-width: 768px) and (max-width: 991px) {
.hidden-sm { display: none !important; }
} @media (min-width: 992px) and (max-width: 1199px) {
.hidden-md { display: none !important; }
} @media (min-width: 1200px) {
.hidden-lg { display: none !important; }
}