"

From 2014.igem.org

Revision as of 21:12, 14 September 2014 (view source) Mikkel (Talk | contribs) (Main style for the Team Berlin Wiki) ← Older edit		Revision as of 21:30, 14 September 2014 (view source) Mikkel (Talk | contribs) Newer edit →
Line 1:		Line 1:
-
-	/* General
-	*****************/
	@font-face {		@font-face {
	font-family: "ag_book_roundedregular";		font-family: "ag_book_roundedregular";
Line 10:		Line 7:
	font-weight: normal;		font-weight: normal;
	font-style: normal;		font-style: normal;
-
	}		}
Line 79:		Line 75:
	padding: 10px 30px 10px 0;		padding: 10px 30px 10px 0;
	margin-bottom: 30px;		margin-bottom: 30px;
-	margin-top: 5px;	+	margin-top: 5px;
	}		}
Line 97:		Line 93:
	padding: 10px 30px 10px 0;		padding: 10px 30px 10px 0;
	margin-bottom: 30px;		margin-bottom: 30px;
-	margin-top: 5px;	+	margin-top: 5px;
	}		}
Line 108:		Line 104:
	.deactivate{		.deactivate{
	text-decoration: line-through;		text-decoration: line-through;
-	opacity: 0.5;	+	opacity: 0.5;
-	/*filter:Alpha(Opacity=50);*/	+	border: none;
-	border: none;	+	background: none;
-	background: none;	+
	}		}
Line 117:		Line 112:
	{		{
	text-decoration: line-through;		text-decoration: line-through;
-	opacity: 0.5;	+	opacity: 0.5;
-	/*filter:Alpha(Opacity=50);*/	+	border: none;
-	border: none;	+	background: none;
-	background: none;	+
	}		}
Line 158:		Line 152:
	}		}
-	/* Backgrounds
-	*****************/
	#background1 {		#background1 {
	background: url('../img/background/Team_Berlin_igem_background_01.jpg') no-repeat bottom fixed;		background: url('../img/background/Team_Berlin_igem_background_01.jpg') no-repeat bottom fixed;
Line 218:		Line 210:
	}		}
-
-	/* Footer
-	*****************/
	.footer		.footer
Line 287:		Line 276:
	}		}
-
-
-	/*
-	* MENÜ
-	****************************/
	.main-menue		.main-menue
Line 297:		Line 281:
	text-transform: uppercase;		text-transform: uppercase;
	font-size: 16px;		font-size: 16px;
-	/* margin-top: 30px; */
	color: #fff;		color: #fff;
	background-color: rgba(255,255,255,.9);		background-color: rgba(255,255,255,.9);
Line 304:		Line 287:
	.main-menue-links a		.main-menue-links a
	{		{
-	/*color: white;*/
	color: #0ecd28;		color: #0ecd28;
	}		}
-	.main-menue-ul	+	.main-menue-ul
-	{	+	{
-	padding-left: 0;	+	padding-left: 0;
-	}	+	}
	.main-menue li		.main-menue li
Line 329:		Line 311:
	padding-top: 2px;		padding-top: 2px;
	padding-bottom: 2px;		padding-bottom: 2px;
-
-	/*just for the beta site, uncommend afterwards!!!!*/
-	/*border: 1px solid #0ecd28;
-	-moz-border-radius: 17px;
-	border-radius: 17px;*/
	}		}
Line 341:		Line 318:
	-moz-border-radius: 17px;		-moz-border-radius: 17px;
	border-radius: 17px;		border-radius: 17px;
-
-	/*just for the beta site, delete afterwards!!!!*/
	width: 121px;		width: 121px;
	padding-top: 2px;		padding-top: 2px;
Line 350:		Line 325:
	.main-menue-links:hover		.main-menue-links:hover
	{		{
-	/*color: white;*/
	color: #0ecd28;		color: #0ecd28;
	text-decoration: none;		text-decoration: none;
-
	border: 1px solid #0ecd28;		border: 1px solid #0ecd28;
	-moz-border-radius: 17px;		-moz-border-radius: 17px;
Line 365:		Line 338:
	.igem-link:hover		.igem-link:hover
	{		{
-	/*color: white;*/
	color: #0ecd28;		color: #0ecd28;
	text-decoration: none;		text-decoration: none;
-
-
-
	}		}
-	/*
-	* TEASER
-	****************************/
	.teaser		.teaser
	{		{
Line 388:		Line 354:
	padding-bottom: 6px;		padding-bottom: 6px;
	}		}
-
-
-	/* Site Wrapper
-	*****************/
-
	.jumbotron{		.jumbotron{
Line 493:		Line 454:
-
-
-	/* Featurette
-	*****************/
	.featurette{		.featurette{
Line 565:		Line 522:
	}		}
-
-	/* Canvas
-	*****************/
	.game-intro{		.game-intro{
Line 574:		Line 528:
	}		}
-
-
-	/* Sponsors
-	*****************/
	.sponsor-title{		.sponsor-title{
Line 622:		Line 572:
	}		}
-	/* SUBSIDE POJECT	+
-	********************/	+
	#section-sub		#section-sub
	{		{
Line 648:		Line 597:
	.project-steps-img img		.project-steps-img img
	{		{
-	/*-moz-border-radius: 100%;
-	border-radius: 100%;*/
	margin-bottom: 16px;		margin-bottom: 16px;
	}		}
Line 681:		Line 628:
	}		}
-	/*SEARCH
-	***************/
	.search-archive		.search-archive
Line 726:		Line 671:
	border: none;		border: none;
	}		}
-
-	/*BLOG
-	***************/
	.blog-entry		.blog-entry
	{		{
Line 736:		Line 678:
	margin-bottom: 35px;		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		.blog-text
Line 796:		Line 724:
	clear: both;		clear: both;
	}		}
-
-	/* Media Querie Large
-	*****************/
	@media (min-width: 992px) {		@media (min-width: 992px) {
	.last-featurette{		.last-featurette{
	padding: 0;		padding: 0;
-	}
-
-	.igem-logo{
-	/*margin-top: 10px;*/
	}		}
Line 825:		Line 746:
-	/* Media Querie Medium
-	*****************/
	@media (max-width: 768px){		@media (max-width: 768px){
	.sponsor-img{		.sponsor-img{
Line 833:		Line 752:
	width: 20%;		width: 20%;
	}		}
-	/*
-	* MENÜ
-	****************************/
	.main-menue		.main-menue
Line 841:		Line 757:
	text-transform: uppercase;		text-transform: uppercase;
	font-size: 15px;		font-size: 15px;
-	/* margin-top: 30px; */
	}		}
Line 863:		Line 778:
	padding-bottom: 2px;		padding-bottom: 2px;
-	/*just for the beta site, uncommend afterwards!!!!*/
-	/*border: 1px solid #0ecd28;
-	-moz-border-radius: 17px;
-	border-radius: 17px;*/
	}		}
Line 873:		Line 784:
	border: 1px solid #0ecd28;		border: 1px solid #0ecd28;
	-moz-border-radius: 17px;		-moz-border-radius: 17px;
-	border-radius: 17px;	+	border-radius: 17px;
-		+
-	/*just for the beta site, delete afterwards!!!!*/	+
	width: 80px;		width: 80px;
	padding-top: 2px;		padding-top: 2px;
Line 892:		Line 802:
	}		}
-
-
-	/* Media Querie small
-	*****************/
	@media (max-width: 468px){		@media (max-width: 468px){
	.featurette{		.featurette{

---

Revision as of 21:30, 14 September 2014

@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"; color: #0ecd28; 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;

  	border: none;
  	background: none;

}

.deactivate:hover { text-decoration: line-through; opacity: 0.5;

  	border: none;

background: none; }

.igem-logo{ height: 53px; width: 70px; }

.button-teilnehmen { background-color: #0ecd28; 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; }

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;

}

.footer { width: 100%; color: #000; padding: 20px 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; }

.footer-sitemap{ margin-bottom: 10px; }

.footer-sitemap li{ list-style-type: none;

 	display: inline-block;

}

.footer-sitemap a:hover{ text-decoration: none; }

.main-menue {

 text-transform: uppercase;
 font-size: 16px;
 color: #fff;
 background-color: rgba(255,255,255,.9);

}

.main-menue-links a { color: #0ecd28; }

.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; -moz-border-radius: 17px; border-radius: 17px; width: 121px; padding-top: 2px; padding-bottom: 2px; }

.main-menue-links:hover { color: #0ecd28;

 	text-decoration: none;
 	border: 1px solid #0ecd28;

-moz-border-radius: 17px; border-radius: 17px; width: 121px; padding-top: 4px; padding-bottom: 4px;

}

.igem-link:hover { color: #0ecd28;

 	text-decoration: none;

}

.teaser { font-size: 18px; }

.teaser-workshop { font-size: 16px; color: #656565; padding-top: 16px; padding-bottom: 6px; }

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

.game-intro{ font-family: Bubble; font-size: 2em; }

.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%);

}

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 { 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-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-entry { width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 35px; }

.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 (min-width: 992px) { .last-featurette{ padding: 0; }

}

@media (max-width: 995px) {

.footer-icon-bar { margin: 20px 0; }

.footer-imprint { padding-left: 10px; } }

@media (max-width: 768px){ .sponsor-img{ margin: 10% auto; height: 20%; width: 20%; }

.main-menue { text-transform: uppercase; font-size: 15px;

}

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

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 (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; }

}