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('../img/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

• • • • • • • • • • • • • • • • • /

1. 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;

}

1. 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; }

1. 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;

}

1. 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; }

1. main-button{

font-weight: normal; font-size: 18px; margin-top: 10px; }

1. main-button img

{ padding-top: 10px; }

1. main-button a:hover

{ text-decoration: none; cursor: pointer; }

1. ecoli-button{

font-weight: normal; font-size: 18px; margin-top: 10px; margin-bottom: 20px; }

1. ecoli-button a:hover

{ text-decoration: none; cursor: pointer; }

1. project-button{

font-weight: normal; font-size: 18px; margin-top: 10px; margin-bottom: 20px; }

1. project-button a:hover

{ text-decoration: none; cursor: pointer; }

1. team-button{

font-weight: normal; font-size: 18px; margin-top: 10px; margin-bottom: 20px; }

1. 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

• • • • • • • • • • • • • • • • • • • • /

1. section-sub

{ background-color: #f3f3f3; }

1. subside-content

{ color: #000; padding: 30px 0 20px 0; }

1. 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;
 }

}