Difference between revisions of "Template:Freiburg/CSS"

(Created page with "{{Template_All_Teams}} <!-- Declare that you are going to use html code instead of wiki code --> <html> <!-- Start of CSS--> <style type="text/css"> →‎PAGE LAYOUT: ...")
 
 
(300 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{Template_All_Teams}}
+
{{Freiburg/Javascript}}
  
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
  
−
<!-- Start of CSS-->
+
<style>
−
<style type="text/css">
+
  
−
/* PAGE LAYOUT */
 
−
 
−
/* page background color*/
 
−
body {
 
−
background-color: #A7A9AB;
 
−
}
 
  
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
/* =================== CSS Navigation =================== */
−
#mainContainer { 
+
/* Resetting css coming from wiki itself
−
width: 980px;
+
/* Clearing DokuWiki elements
−
overflow: hidden;
+
/* Declare Fonts for non-Windows machines
−
float:left;
+
/* CSS for Menubar
−
margin-left: 20px;
+
/* Important Site setup
−
background-color: #EEEDEA;
+
/* Background
−
border-bottom: 6px solid #EE3e53;
+
/* Text Styling
−
}
+
/* Full Width Banners
 +
/* Footer
 +
/* Accordion - Ausklappmenues
 +
/* Lightbox
 +
/* Float Barrier
 +
/*
 +
/* Flipcard-CSS for the members-section: inline in https://2015.igem.org/Team:Freiburg/Team
 +
/* CSS-slider: inline for the respective pages. e.g. https://2015.igem.org/wiki/index.php?title=Team:Freiburg/PaP/ScienceFair
 +
/* CSS classes and ids for Human Practice
 +
/* CSS for back-button
 +
/* CSS for the upwards-blob: on wiki_content_start
 +
/* CSS for Project Pages
 +
/* Horizontal Menu for Paragraphs
 +
/* Button for important links
 +
/* =================== END: CSS Navigation =================== */
  
−
/* Creates the container for the menu */
 
−
#menuContainer  {
 
−
float:right;
 
−
width: 150px;
 
−
background-color: #0e232f;
 
−
height: 100%;
 
−
border-top: 6px solid #EE3e53;
 
−
font-family: "Arial", Helvetica, sans-serif;
 
−
}
 
  
−
/* Creates the container for the content */
 
−
#contentContainer {
 
−
background-color: #EEEDEA;
 
−
width: 810px;
 
−
float: left;
 
−
padding: 10px;
 
−
border-top: 6px solid #EE3e53;
 
−
}
 
  
 +
/* ============= Resetting css coming from wiki itself ============= */
 +
body {
 +
    font: sans-serif;
 +
    color: #000;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    background-color: #FCFCFC;
 +
line-height: 1.8;
 +
}
  
−
/*Set up height place holder for the banner*/
+
a {
−
#bannerContainer {
+
    color: #002BB8;
−
height:200px;
+
    text-decoration: none;
−
margin:auto;
+
    background: transparent none repeat scroll 0% 0%;
−
text-align:center;
+
}
−
color: #24B694;
+
−
}
+
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
p {
 +
    margin: 0.4em 0px 0.5em;
 +
    line-height: 1.5em;
 +
}
  
 +
#globalWrapper {
 +
    position: absolute;
 +
    font-size: 150%;
 +
    width: 100%;
 +
    margin: 0px;
 +
    padding: 0px 0px 0px;
 +
}
  
−
/*Change the styling of text for everything inside main container*/
+
#mainContainer {
−
#mainContainer p {  
+
    margin: 0;
−
font-family: "Arial", Helvetica, sans-serif;
+
    width: 100%;
−
font-size: 12px;
+
}
−
color: #0e232f;
+
−
}
+
−
+
−
/*This changes the color and font family */
+
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
−
font-family: "Arial", Helvetica, sans-serif;
+
−
color: #0e232f;
+
−
border-bottom: none;
+
−
font-weight: bold;
+
−
text-transform: uppercase;
+
−
}
+
  
−
/*Style of the links - links are different inside the menu */
+
#top_menu_under {
−
#contentContainer a {  
+
    position: relative;
−
font-weight: bold;
+
    width: 100%;
−
color: #ee3e53;
+
    height: 16px;
−
}
+
    border-bottom: 2px solid #000;
 +
}
  
−
  /* Styling links on hover- links are different inside the menu */
+
#top_menu_14 {
−
#contentContainer a:hover{
+
    position: fixed;
−
color: #f4b248;
+
    width: 100%;
−
}
+
    top: 0px;
 +
    left: 0px;
 +
    height: 16px;
 +
    background-color: #383838;
 +
    border-bottom: 2px solid #000;
 +
    z-index: 9999;
 +
}
  
−
/*Change the styling of tables */
 
−
        #contentContainer table {
 
−
    border: 1px solid #0e232f;
 
−
    border-collapse: collapse;
 
−
    width: 90%
 
−
    margin: auto;
 
−
    margin-bottom: 15px;
 
−
    margin-top: 15px;
 
−
    margin-right: 10px;
 
−
    margin-left: 10px;
 
−
    }
 
  
−
/*Change the styling of table cells*/
+
#top_menu_inside {
−
    #contentContainer  td {
+
    display: block;
−
    padding: 10px;
+
    position: relative;
−
    border: 1px solid #0e232f;
+
    width: 900px;
−
    border-collapse: collapse;
+
    height: 100%;
−
    vertical-align: text-top;
+
    margin: 0px auto;
−
    background-color: #EEEDEA;
+
    padding: 0px 10px;
−
    }
+
    border-left: 1px solid #C8C8C8;
 +
    border-right: 1px solid #C8C8C8;
 +
    font-family: "arial",sans-serif;
 +
    font-size: 12px;
 +
    font-weight: 400;
 +
    color: #FFF;
 +
}
  
−
/*Change the styling of table headers */
 
−
    #contentContainer th {
 
−
    padding: 10px;
 
−
    border: 1px solid #0e232f;
 
−
    border-collapse: collapse;
 
−
    vertical-align: text-top;
 
−
    background-color: #e8d5b7;
 
−
    }
 
  
  
−
/*MENU STYLING */
+
#content {
 +
    position: relative;
 +
    width: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
    background: #FFF none repeat scroll 0% 0%;
 +
    color: #000;
 +
    border-left: 0;
 +
    border-right: 0;
 +
  /* line-height: 0; */
 +
    z-index: 2;
  
−
/*Styling for the links in the menu */
 
−
#menuContainer a {
 
−
color: #EEEDEA;
 
−
text-decoration:none;
 
−
font-weight: bold;
 
−
}
 
  
−
/* Sets the style for lists inside menuContainer  */
+
}
−
#menuContainer ul {
+
−
width:100%;
+
−
list-style: none;
+
−
margin: auto;
+
−
padding-top: 10px;
+
−
padding-bottom: 10px;
+
  
−
}
+
.visualClear {
 +
    clear: both;
 +
}
  
−
/*Styles the list items to become menu buttons */
 
−
#menuContainer ul li {
 
−
display: block;
 
−
position: relative;
 
−
padding: 10px;
 
−
margin-bottom:5px;
 
−
padding-left: -20px;
 
−
}
 
  
−
#menuContainer ul li:hover {
+
/* removes URL from current site from the top of the window */
−
background: #F4B248;
+
.firstHeading{
−
color: #0e232f;
+
    font-size: 0;
−
}
+
    border: 0;
 +
    margin-bottom: -8px;
 +
    margin-top: 0;
 +
}
  
 +
/* ============= END: Resetting css coming from wiki itself ============= */
  
−
/*HIde the submenus and removes the padding */
 
−
#menuContainer li ul {
 
−
display: none;
 
−
padding-top:15px;
 
−
margin-left: -9px;
 
−
}
 
  
−
/*Shows the submenus once you hover*/
 
−
#menuContainer li:hover ul {
 
−
display: block;
 
−
}
 
  
−
/*style the submenu buttons*/
 
−
#menuContainer li ul li {
 
−
background: #0E232F;
 
−
width: 100%;
 
−
}
 
  
−
#menuContainer li ul li:hover {
 
−
background: #EE3E53;
 
−
color: #fff;
 
−
}
 
  
  
  
−
/*CLASSES */
 
−
/*Clear class for all the pages, adds spacing too*/
 
−
.clear{
 
−
clear:both;
 
−
height: 10px;
 
−
}
 
  
−
/* highlight box for special messages */
+
/* ============= Clearing DokuWiki elements ============= */
−
    .highlightBox {
+
−
    width:500px;
+
−
            margin:auto;
+
−
            background-color: #E8D5B7;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    padding: 15px;
+
−
    padding-top: 5px;
+
−
          }
+
  
−
</style>
+
.tags{
−
<!-- End of CSS -->
+
/* remove tags from bottom */
 +
    font-size: 0;
 +
}
  
 +
acronym{
 +
/* remove text-decoration from acronyms*/
 +
    border-bottom: none;
 +
    text-decoration: none;
 +
    cursor: auto;
 +
}
  
−
<!-- Start of the template html elements. -->
+
.urlextern {
−
<div id ="mainContainer"><!--This div will close on the page.-->
+
    background: none !important;
 +
}
  
−
<div id="bannerContainer">
+
.link-https {
−
<br><br>
+
    background: none !important;
−
<h2> Add a banner to your wiki! </h2>
+
}
−
+
−
<p>You can make the image 980px  by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_Example_banner.jpg</i>" </p>
+
−
</div>
+
  
−
<!-- Start of menu -->
 
−
<div id="menuContainer">
 
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
−
<ul>
 
−
<a href="https://2015.igem.org/Team:Freiburg"><li>HOME</li></a>
 
  
−
<a href="https://2015.igem.org/Team:Freiburg/Team"><li>TEAM</li></a>
+
/* ============= END: Clearing DokuWiki elements ============= */
  
  
−
<a href="#"><li>PROJECT
 
−
            <ul>
 
−
<a href="https://2015.igem.org/Team:Freiburg/Description"><li>Description</li></a>
 
−
<a href="https://2015.igem.org/Team:Freiburg/Experiments"><li>Experiments & Protocols</li></a> 
 
−
<a href="https://2015.igem.org/Team:Freiburg/Results"><li>Results</li></a> 
 
−
</ul>
 
−
</li></a>
 
  
−
<a href="#"><li>PARTS
 
−
            <ul>
 
−
<a href="https://2015.igem.org/Team:Freiburg/Parts"><li>Team Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Freiburg/Basic_Part"><li>Basic Parts</li></a> 
 
−
<a href="https://2015.igem.org/Team:Freiburg/Composite_Part"><li>Composite Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Freiburg/Part_Collection"><li>Part Collection</li></a> 
 
−
</ul>
 
−
</li></a>
 
  
−
<a href="https://2015.igem.org/Team:Freiburg/Notebook"><li>NOTEBOOK</li></a>
 
−
     
 
−
<a href="https://2015.igem.org/Team:Freiburg/Attributions"><li>ATTRIBUTIONS</li></a>
 
  
−
<a href="https://2015.igem.org/Team:Freiburg/Collaborations"><li>COLLABORATIONS</li></a>
 
  
−
<a href="https://2015.igem.org/Team:Freiburg/Practices"><li>HUMAN PRACTICES</li></a>
 
  
−
<a href="https://2015.igem.org/Team:Freiburg/Safety"><li>SAFETY</li></a>
 
  
−
<a href="https://2015.igem.org/Team:Freiburg/Modeling"><li>MODELING</li></a>
+
/* ============= Declaring Fonts  ============= */
  
−
<a href="https://2015.igem.org/Team:Freiburg/Measurement"><li>MEASUREMENT</li></a>
+
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/e/ee/Freiburg_Roboto-Regular.eot);
 +
    src: url(https://static.igem.org/mediawiki/2015/b/bf/Freiburg_Roboto-Regular-webfont.woff) format('woff'),
 +
    url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype'),
 +
    url('https://static.igem.org/mediawiki/2015/3/38/Freiburg_Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
 +
}
 +
@font-face {
 +
  font-family: Roboto;
 +
  src: url(https://static.igem.org/mediawiki/2015/7/7f/Freiburg_Roboto-Light.eot);
 +
  src: url(https://static.igem.org/mediawiki/2015/2/28/Freiburg_Roboto-Light-webfont.woff) format('woff'),
 +
  url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf)  format('truetype'),
 +
  url('https://static.igem.org/mediawiki/2015/8/87/Freiburg_Roboto-Light-webfont.svg#RobotoLight') format('svg');
 +
  font-style: normal;
 +
  font-weight: 300;
 +
 
 +
}
  
−
<a href="https://2015.igem.org/Team:Freiburg/Software"><li>SOFTWARE</li></a>
+
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/c/c4/Freiburg_Roboto-LightItalic-webfont.eot);
 +
    src: url(https://static.igem.org/mediawiki/2015/4/4b/Freiburg_Roboto-LightItalic-webfont.woff) format('woff'),        url(https://static.igem.org/mediawiki/2015/0/0e/Freiburg_Roboto-LightItalic-webfont.ttf)  format('truetype'),
 +
    url('https://static.igem.org/mediawiki/2015/1/1d/Freiburg_Roboto-LightItalic-webfont.svg#RobotoItalic') format('svg');
 +
    font-weight: normal;
 +
    font-style: italic;
 +
}
  
−
<a href="https://2015.igem.org/Team:Freiburg/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold.eot);
 +
    src: url(https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Roboto-Bold-webfont.woff) format('woff'),
 +
    url(https://static.igem.org/mediawiki/2015/b/b9/Freiburg_Roboto-Bold.ttf)  format('truetype'),
 +
    url('https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold-webfont.svg#RobotoBold') format('svg');
 +
    font-weight: bold;
 +
    font-style: normal;
 +
}
 +
 
 +
@font-face {
 +
    font-family: Roboto;
 +
    src: url(https://static.igem.org/mediawiki/2015/c/ce/Freiburg_Roboto-BoldItalic.eot);
 +
    src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Roboto-BoldItalic-webfont.woff)  format('woff'),
 +
    url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf)  format('truetype'),
 +
    url('https://static.igem.org/mediawiki/2015/a/ac/Freiburg_Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* ============= END: Declaring Fonts  ============= */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ============= Important Site setup ============= */
 +
 
 +
 
 +
/* avoid dotted outline after clicking on links */
 +
a {
 +
  outline: 0;
 +
}
 +
 
 +
/* properties for central text box */
 +
.bodyContent{
 +
    overflow: hidden;
 +
    box-sizing: border-box;
 +
/* REMOVE WITH NEW NAVIGATION */
 +
/* Avoid layout damage due to old navigation */
 +
    clear: both;
 +
}
 +
/*adds padding on topside - necessary for attached menubar: mauri*/
 +
.content_background_wrapper{
 +
padding-top: 100px;
 +
}
 +
 
 +
 
 +
/* flows around all the content in the center of the screen */
 +
.page_content{
 +
    margin: 20px 5px;
 +
    box-sizing: border-box; /* allows for efficient paositioning of the elements within */
 +
}
 +
 
 +
/* flows around text in the page_content */
 +
.content_box{
 +
    border-radius: 30px 60px;
 +
    overflow: hidden;
 +
    padding: 4%;
 +
    margin: 2em 10px;
 +
}
 +
/*links linking to ID's have to link to a span located on top of the targeted id. This span has to be an anchor element, otherwise the menubar will float over the targeted headline*/
 +
.anchor{
 +
display: block;
 +
  height: 62px; /*same height as header*/
 +
  margin-top: -62px; /*same height as header*/
 +
  visibility: hidden;
 +
}
 +
 
 +
/* ================== FLEXBOXES and IMAGE_BOXES ===================*/
 +
 
 +
/* flexbox: contains the whole dokuwiki image part and renders it readable
 +
/* flexbox images are placed in one row and break the text.
 +
/* allow placing of several images including caption in one row */
 +
.flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/
 +
    font-size: 70%;
 +
    padding: 0 10px;
 +
    text-align: justify;
 +
}
 +
 
 +
.flexbox img,
 +
.image_box img {
 +
    max-width: 100%;
 +
}
 +
 
 +
.image_box .thumb2,
 +
.image_box .thumb2 .thumbinner,
 +
.flexbox .thumb2,
 +
.flexbox .thumb2 .thumbinner{
 +
    max-width: 80vw;
 +
}
 +
 
 +
/*
 +
.image_box .thumb2 .thumbinner img{
 +
    width: 100%;
 +
}*/
 +
 
 +
/* see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
 +
 
 +
.flexbox{
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-box;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    margin: 5% 0;
 +
    -moz-justify-content: space-around;
 +
    -ms-justify-content: space-around;
 +
    -webkit-justify-content: space-around;
 +
    justify-content: space-around;
 +
    -moz-flex-wrap: wrap;
 +
    -ms-flex-wrap: wrap;
 +
    -webkit-flex-wrap: wrap;
 +
    flex-wrap: wrap;
 +
    align-content: center;
 +
}
 +
 
 +
.flexbox .thumbinner{
 +
  margin: 0 5% 5% 5%;
 +
}
 +
 
 +
/* for DokuWiki image boxes this prevents a zickzack positioning of the flexbox childs when wrap occurs */
 +
a.media{
 +
  margin: 0 auto;
 +
}
 +
 
 +
/* contains images where text shall float around */
 +
.image_box .thumb2 .thumbinner .thumbcaption{
 +
    margin: 0.4em 0;
 +
    overflow: hidden;
 +
    font-size: 70%;
 +
    text-align: justify;
 +
}
 +
 
 +
.image_box.left{
 +
    float: left;
 +
    margin-right: 3%;
 +
}
 +
 
 +
.image_box.right{
 +
    float: right;
 +
    margin-left: 3%
 +
}
 +
 
 +
@media screen and (max-width: 600px){
 +
 
 +
.image_box{
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    display: -webkit-box;
 +
    -ms-justify-content: space-around;
 +
    -moz-justify-content: space-around;
 +
    -webkit-justify-content: space-around;
 +
    justify-content: space-around;
 +
    -moz-flex-wrap: wrap;
 +
    -ms-flex-wrap: wrap;
 +
    flex-wrap: wrap;
 +
    -webkit-flex-wrap: wrap;
 +
    align-content: center;
 +
    font-size: 70%;
 +
    padding: 0;
 +
    text-align: justify;
 +
    width: 100%;
 +
}
 +
 
 +
} /* end media query */
 +
 
 +
/* ================== END: FLEXBOXES and IMAGE_BOXES ===================*/
 +
 
 +
 
 +
/* prevents the floating of images out of the DokuWiki-sections */
 +
.level1,
 +
.level2{
 +
  overflow: hidden;
 +
}
 +
 
 +
 
 +
/* references coming from DokuWiki */
 +
.footnotes{
 +
    width: 90%;
 +
    margin: 2em auto 0 auto;
 +
}
 +
 
 +
.fn_top{
 +
  font-size: 70%
 +
}
 +
 
 +
/* styling tables coming from dokuwiki */
 +
.content_box .table{
 +
    margin: 2em 5%;
 +
}
 +
 
 +
/* the element that can be used to style the table */
 +
.content_box .table .inline{
 +
    font-size: 90%;
 +
    width: 100%;
 +
    border-collapse: collapse;
 +
}
 +
 
 +
/* grey background for the header line */
 +
.content_box .table th{
 +
    background-color: #DDD;
 +
}
 +
 
 +
/* greyish background for every second row */
 +
.content_box .table tr:nth-child(odd){
 +
    background-color: #EEE;
 +
}
 +
 
 +
/* move text away from cell borders */
 +
.content_box .table td,
 +
.content_box .table th{
 +
    padding: 0 10px;
 +
}
 +
 
 +
/* hovering efects */
 +
.content_box .table tr:hover{
 +
    background-color: #D2D4F3;
 +
}
 +
 
 +
/* === content_box2 for brick layout === */
 +
 
 +
/* two content boxes in same line (sb) */
 +
.content_box2_parent {
 +
    text-align: center;
 +
}
 +
 
 +
.content_box2_child {               
 +
    border-radius: 30px 60px;
 +
    display: inline-block;
 +
    background-color: #FFFFFF;
 +
    text-align: justify;
 +
    vertical-align: middle;
 +
    box-shadow: 1px 1px 10px #888;
 +
    -webkit-box-shadow: 1px 1px 10px #888;
 +
    -moz-box-shadow: 1px 1px 10px #888;
 +
    padding: 4%;
 +
    min-height: 430px;
 +
}
 +
 
 +
@media screen and (min-width: 601px){
 +
    .content_box2_child{
 +
        margin: 2em 1em 2em 1em;
 +
        width: 35%;
 +
    }
 +
}
 +
 
 +
@media screen and (max-width: 600px){
 +
    .content_box2_child{
 +
        margin: 1em 0 0;
 +
        width: auto;
 +
    }
 +
}
 +
 
 +
/* === Floatboxes for two column layout === */
 +
 
 +
.floatbox{
 +
    width: 48%; /* 100% - 2*48% = 4% padding*/
 +
}
 +
 
 +
@media screen and (min-width: 601px){
 +
    .floatbox.left{
 +
        float: left;
 +
    }
 +
 
 +
    .floatbox.right{
 +
        float: right;
 +
    }
 +
}
 +
 
 +
@media screen and (max-width: 600px){
 +
    .floatbox{
 +
        float: none;
 +
        width: auto;
 +
    }
 +
}
 +
 
 +
/* ============= END: Important Site setup ============= */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ============= Text Styling ============= */
 +
 
 +
.page_content{
 +
    color: #666666;
 +
    font-family: 'Roboto',sans-serif;
 +
    font-style: normal;
 +
    font-weight: 300;
 +
    font-size: 110%;
 +
    text-align: justify;
 +
    }
 +
 
 +
.page_content p{
 +
    line-height: 1.8em;
 +
    margin-bottom: 2em; /*move next paragraph away vertically */
 +
}
 +
 
 +
h1, h2, h3{
 +
 
 +
    font-family: "Roboto", sans-serif;
 +
    color: #C5162F;
 +
    clear: both;
 +
    font-weight: 400;
 +
    line-height: 1.2;
 +
    border-bottom: 0;
 +
}
 +
 
 +
h1 {font-size: 150%;}
 +
 
 +
h2 {font-size: 120%;}
 +
 
 +
h3 {font-size: 110%;}
 +
 
 +
h4 {font-size: 100%; color: black; font-weight: 400;}
 +
 
 +
.grey_titletext {
 +
    text-align: center;
 +
    color: #888;
 +
    font-size: 300%;
 +
    text-shadow: 
 +
        1px 0px 1px #ccc, 0px 1px 1px #eee,
 +
        2px 1px 1px #ccc, 1px 2px 1px #eee,
 +
        3px 2px 1px #ccc, 2px 3px 1px #eee,
 +
        4px 3px 1px #ccc, 3px 4px 1px #eee,
 +
        5px 4px 1px #ccc, 4px 5px 1px #eee,
 +
        6px 5px 1px #ccc, 5px 6px 1px #eee,
 +
        7px 6px 1px #ccc;
 +
}
 +
 
 +
/* flows around text in the page_content */
 +
.content_box{
 +
    background-color: #FFFFFF;
 +
    text-align: justify;
 +
    box-shadow: 1px 1px 10px #888;
 +
    -webkit-box-shadow: 1px 1px 10px #888;
 +
    -moz-box-shadow: 1px 1px 10px #888;
 +
}
 +
 
 +
/* properties for central text box */
 +
#bodyContent{
 +
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+13,0051a2+100 */
 +
background: rgb(252,252,252); /* Old browsers */
 +
background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 13%, rgba(0,81,162,1) 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, right bottom, color-stop(13%,rgba(252,252,252,1)), color-stop(100%,rgba(0,81,162,1))); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* IE10+ */
 +
background: linear-gradient(135deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#0051a2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 +
}
 +
 
 +
/* references coming from DokuWiki */
 +
.footnotes{
 +
    font-size: 80%;
 +
    font-style: italic;
 +
}
 +
 
 +
/* KOMMENTARFUNKTION */
 +
.kommentar{
 +
display:none;
 +
    background-color: red;
 +
    color: black;
 +
    border: 2px solid black;
 +
    width: 100%;
 +
    clear: both;
 +
}
 +
.kommentar_stefan{
 +
display:none;
 +
    background-color: #ff1493;
 +
    color: black;
 +
    font-size: 14px;
 +
    font-family: "Comic Sans MS";
 +
    border: 2px solid black;
 +
    width: 100%;
 +
    clear: both;
 +
}
 +
 
 +
.todo_box{
 +
display:none;
 +
  background-color: lightblue;
 +
  border: 1px dashed;
 +
display: table;
 +
}
 +
 
 +
/* Links */
 +
#red_link {
 +
  color: #C5162F;
 +
}
 +
 
 +
/* ============= END: Text Styling ============= */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ============= Background ============= */
 +
 
 +
/* use central position as anchor for the vertical position of the side images */
 +
.central_position_wrap{
 +
    position: relative;
 +
}
 +
 
 +
/* define width and positioning of side images */
 +
.background_image_left,
 +
.background_image_right{
 +
    width: 150px;
 +
    position: absolute;
 +
}
 +
 
 +
.background_image_left{
 +
display: none;
 +
    left:0;
 +
    bottom: -20px;
 +
}
 +
 
 +
.background_image_right{
 +
    top: 120px;
 +
    right:0;
 +
}
 +
 
 +
/* float the right image to the right s.t. it fits to the window border */
 +
.background_image_right img{
 +
    float: right;
 +
}
 +
 
 +
 
 +
 
 +
/* === Background: Responsive Design === */
 +
 
 +
/* hide side images if screen is too small */
 +
@media only screen and (max-width: 1320px){
 +
    .background_image_left,
 +
    .background_image_right{
 +
        display: none;
 +
    }
 +
}
 +
 
 +
/* adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/
 +
@media only screen and (min-width: 1021px){
 +
    /* style for browsers wider than 1000px */
 +
    /* the 20px come from the scrollbar */
 +
    .page_content{
 +
        width: 1000px;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
}
 +
 
 +
/*
 +
@media only screen and (max-width: 1020px){
 +
    /* style for browsers smaller than 1000px
 +
    .page_content{
 +
        width: intrinsic;
 +
        width: moz-fit-content;
 +
        width: -webkit-fit-content;
 +
        width: fit-content;   
 +
    }
 +
}
 +
*/
 +
/* === END: Background: Responsive Design === */
 +
 
 +
/* ============= END: Background ============= */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ============= Full Width Banners  ============= */
 +
#banner_home{
 +
    margin:0;
 +
    padding: 0px;
 +
    background-image: url("../wiki/images/8/89/Freiburg_frontpage_banner.jpg");
 +
    background-repeat: no-repeat;
 +
    background-size:  cover;
 +
    width: 100%;
 +
    height: 400px;
 +
}
 +
#banner_team{
 +
    margin:0;
 +
    padding: 0px;
 +
    background-image: url("../wiki/images/e/e7/FreiburgTeam2015.jpg");
 +
    background-repeat: no-repeat;
 +
    background-size:  cover;
 +
    width: 100%;
 +
    height: 400px;
 +
}
 +
#banner_labjournal{
 +
    margin:0;
 +
    padding: 0px;
 +
    background-image: url("https://static.igem.org/mediawiki/2015/d/dc/Labjournal.jpg");
 +
    background-repeat: no-repeat;
 +
    background-size:  cover;
 +
    width: 100%;
 +
    height: 400px;
 +
}
 +
 
 +
/* ============= END: Full Width Banners  ============= */
 +
 
 +
 
 +
 
 +
 
 +
/* =================== Footer =================== */
 +
 
 +
.content_footer{
 +
    background: #0051A2 scroll;
 +
    width: 100%;
 +
    height: 75px;
 +
}
 +
 
 +
.contacts{
 +
    width: 320px;
 +
    margin: 0 auto;
 +
    display: flex;
 +
    justify-content: space-around;
 +
    display: -webkit-flex; /*Safari*/
 +
    -webkit-justify-content: space-around; /* Safari 6.1+ */
 +
}
 +
 
 +
#uni a img,
 +
#bioss a img,
 +
#facebook a img,
 +
#email a img,
 +
#zbsa a img{
 +
    max-height: 40px
 +
}
 +
 
 +
#uni,
 +
#bioss,
 +
#facebook,
 +
#email,
 +
#zbsa{
 +
    padding-top: 15px;
 +
    padding-right:10px;
 +
}
 +
 
 +
/* gap between social links and uni links */
 +
#facebook{
 +
    padding-right: 40px;
 +
}
 +
 
 +
@media screen and (max-width:400px){
 +
    #uni,
 +
    #zbsa{
 +
        display: none;
 +
    }
 +
}
 +
 
 +
/* The html for the footer is included in wiki_content-end! */
 +
 
 +
/* =================== END: Footer =================== */
 +
 
 +
/* =================== Accordion =====================*/
 +
/*----- Accordion -----*/
 +
.accordion, .accordion * {
 +
    -webkit-box-sizing:border-box;
 +
    -moz-box-sizing:border-box;
 +
    box-sizing:border-box;
 +
}
 +
 +
.accordion {
 +
    overflow:hidden;
 +
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
 +
    border-radius:20px;
 +
    background:#EEE;
 +
}
 +
 +
/*----- Section Titles -----*/
 +
.accordion-section-title {
 +
    width:100%;
 +
    padding:15px;
 +
    display:inline-block;
 +
    border-bottom:1px solid #1a1a1a;
 +
    background: rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px 15px;
 +
    transition:all linear 0.15s;
 +
    /* Type */
 +
    font-size:1.200em;
 +
    text-shadow:0px 1px 0px #1a1a1a;
 +
    color:#fff;
 +
    text-decoration: none;
 +
    padding-left: 50px;
 +
}
 +
 +
@media screen and (max-width: 600px){
 +
    .accordion-section-title {
 +
        background: rgb(0, 81, 162);
 +
        padding-left: 15px;
 +
    }
 +
}
 +
 
 +
.accordion-section-title.active, .accordion-section-title:hover {
 +
    background:rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px -25px;
 +
    /* Type */
 +
    text-decoration:none;
 +
}
 +
 +
.accordion-section:last-child .accordion-section-title {
 +
    border-bottom:none;
 +
}
 +
}
 +
 +
/*----- Section Content -----*/
 +
.accordion-section-content {
 +
    padding:15px;
 +
    display:none;
 +
}
 +
 
 +
/* ================= END: Accordion =================*/
 +
 
 +
/* =============== LIghtbox =========================*/
 +
 
 +
/* from http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528 */
 +
 
 +
#lightbox {
 +
    position:fixed; /* keeps the lightbox window in the current viewport */
 +
    top:0;
 +
    left:0;
 +
    width:100%;
 +
    height:100%;
 +
    background: rgba(0,0,0,.7);
 +
    text-align:center;
 +
    z-index: 9999;
 +
}
 +
 
 +
#lightbox p {
 +
    text-align:right;
 +
    color:#fff;
 +
    margin-right:20px;
 +
    font-size:12px;
 +
}
 +
 
 +
#lightbox img {
 +
    box-shadow:0 0 25px #111;
 +
    -webkit-box-shadow:0 0 25px #111;
 +
    -moz-box-shadow:0 0 25px #111;
 +
    max-width: 95vw;
 +
    max-height: 95vh;
 +
    background-color: white;
 +
}
 +
 
 +
/* =============== END: Lightbox =========================*/
 +
 
 +
/* =============== BEGIN: FloatBarrier =========================*/
 +
 
 +
.float_barrier{
 +
    overflow: hidden;
 +
    width: 100%;
 +
}
 +
 
 +
/* =============== END: FloatBarrier =========================*/
 +
 
 +
#head {
 +
    height: 0px;
 +
}
 +
 
 +
/* ============== BEGIN:CSS classes and ids for Human Practice =============*/
 +
#recipe {
 +
    width: 80%;
 +
}
 +
/* ============== END:CSS classes and ids for Human Practice =============*/
 +
 
 +
 
 +
/* ============== BEGIN:CSS for back-button =============*/
 +
.button_back {
 +
    margin-left: -14%;
 +
    margin-top: 5%;
 +
    padding: 3px 5px 5px 0px;
 +
    width: 10%;
 +
    line-height: 1.5em;
 +
    text-align: center;
 +
    background-color: #0051A2;
 +
    border-radius: 30px 15px 15px 30px;
 +
    border: 1px groove #004081;
 +
    float: left;
 +
}
 +
 
 +
.white_link {
 +
    color: #FFF;
 +
}
 +
/* ============== END:CSS for back-button =============*/
 +
 
 +
</style>
 +
 
 +
<!-- INITIALIZE UPWARDS BLOB, SO ITS TOP REFERENCES TO DOCUMENT TOP -->
 +
 
 +
<style>
 +
 
 +
/* upwards navigation blob */
 +
 
 +
#upwards_blob{
 +
    display: none;
 +
}
 +
 
 +
 
 +
/* min-width is chosen so the blob does just not interfere with the content box */
 +
/* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */
 +
@media screen and (min-width: 1144px){
 +
    #upwards_blob{
 +
        transition: transform 0.5s ease;
 +
        display: inline;
 +
        position: absolute;
 +
        top: 900px;
 +
        right: 30px;
 +
        z-index: 1000;
 +
        transform: translateY(130px);
 +
    }
 +
}
 +
 
 +
</style>
 +
 
 +
<div id="upwards_blob"><a href="#globalWrapper"><img src="https://static.igem.org/mediawiki/2015/9/93/Freiburg_upwards_blob.png"></a></div>
 +
 
 +
<style>
 +
/* ============= BEGIN: CSS for Project Pages ================ */
 +
.content_text {
 +
    border-radius: 30px 60px;
 +
    overflow: hidden;
 +
    padding: 4%;
 +
    margin: 2em 0;
 +
    margin-bottom: 0;
 +
    text-align: justify;
 +
    color: #000;
 +
    width: 50%;
 +
}
 +
 
 +
.rightshift {
 +
    margin-right: -5%;
 +
    margin-left: 8%;
 +
}
 +
 
 +
.leftshift {
 +
    margin-left: -5%;
 +
    margin-right: 8%;
 +
}
 +
 
 +
.reference_box {
 +
    overflow: hidden;
 +
    border: 1px solid rgb(0, 0, 0);
 +
    border-radius: 10px;
 +
    background-color: #EEE;
 +
    text-align: justify;
 +
    box-shadow: 1px 1px 10px #888;
 +
    padding: 1% 2% 3%;
 +
    margin-top: 2em;
 +
    margin-right: auto;
 +
    margin-left: auto;
 +
    width: 80%;
 +
}
 +
 
 +
.h1_fancy {
 +
    text-align: center;
 +
    color: #888;
 +
    font-size: 300%;
 +
    text-shadow: 
 +
        1px 0px 1px #ccc, 0px 1px 1px #eee,
 +
        2px 1px 1px #ccc, 1px 2px 1px #eee,
 +
        3px 2px 1px #ccc, 2px 3px 1px #eee,
 +
        4px 3px 1px #ccc, 3px 4px 1px #eee,
 +
        5px 4px 1px #ccc, 4px 5px 1px #eee,
 +
        6px 5px 1px #ccc, 5px 6px 1px #eee,
 +
        7px 6px 1px #ccc;
 +
}
 +
/* ============= END: CSS for Project Pages ================ */
 +
 
 +
 
 +
/* ============= BEGIN: Horizontal Menu for Paragraphs ================ */
 +
.horizontal_menu {
 +
    margin: 0px auto;
 +
}
 +
 
 +
.horizontal_menu ul{
 +
    margin: 0px auto;
 +
    padding: 0px;
 +
    list-style: none;
 +
    text-align: center;
 +
}
 +
 
 +
.horizontal_menu li {
 +
    margin: 0px 5px auto;
 +
    padding: 1%;
 +
    display: inline;
 +
    text-align: center;
 +
    border: 2px groove #0051A2;
 +
    border-radius: 10px;
 +
    background-color: #0051A2;
 +
}
 +
 
 +
.horizontal_menu a {
 +
    color: #FFF;
 +
}
 +
/* ============= END: Horizontal Menu for Paragraphs ================ */
 +
 
 +
/* ============= Added: Styling for results pages ================ */
 +
 
 +
 
 +
.content_box h1{
 +
color: #C5162F;
 +
font-size: 40px;
 +
margin-bottom: 28px;
 +
margin-top: 20px;
 +
line-height: 45px;
 +
font-weight: 200;
 +
padding-top: 0;
 +
padding-bottom: 0;
 +
overflow: visible;
 +
text-align: center;
 +
}
 +
 
 +
.results_page h1{
 +
text-align: right;
 +
}
 +
 
 +
.content_box h2 {
 +
    font-size: 140%;
 +
    font-weight: 200;
 +
    letter-spacing: 0.5px;
 +
}
 +
 
 +
.results_page h2{
 +
letter-spacing: 0px;
 +
font-size: 35px;
 +
text-align: right;
 +
margin-bottom: 28px;
 +
margin-top: 20px;
 +
line-height: 45px;
 +
font-weight: 200;
 +
}
 +
 
 +
.content_box h3{
 +
font-weight: 200;
 +
 
 +
}
 +
 
 +
h2.left,
 +
h1.left{
 +
text-align: left;
 +
}
 +
 
 +
@media screen and (max-width: 600px){
 +
 
 +
.results_page h1{
 +
font-size: 120%;
 +
margin-bottom: 10px;
 +
margin-top: 8px;
 +
line-height: 150%;
 +
}
 +
 
 +
.results_page h2{
 +
font-size: 100%;
 +
margin-bottom: 10px;
 +
margin-top: 8px;
 +
line-height: 110%;
 +
}
 +
 
 +
/*========================= Style for Important Links Button =======================*/
 +
.link_button_arrow{
 +
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
 +
background-repeat: no-repeat;
 +
background-position: 3% 50%;
 +
background-size: 10px 13px;
 +
}
 +
 
 +
.link_button {
 +
margin: 0px auto;
 +
padding: 0px 5px 0px 10px;
 +
width: 200px;
 +
line-height: 16px;
 +
text-align: center;
 +
background-color: #888;
 +
font-size: 14pt;
 +
border-radius: 2px;
 +
color: #FFF;
 +
opacity: 0.8;
 +
box-shadow: 1px 1px 1px 2px #777;
 +
}
 +
 
 +
.link_button a:hover {
 +
    text-decoration: underline;
 +
}
 +
 
 +
.link_button a {
 +
    color: #FFF;
 +
}
 +
</style>
  
−
</ul>
 
−
</div>
 
−
<!-- End of menu  -->
 
  
−
<!-- Start of content -->
 
−
<div id="contentContainer"><!--This div will close on the page.-->
 
 
</html>
 
</html>

Latest revision as of 01:45, 19 September 2015