Difference between revisions of "Template:Goettingen/CSS"

 
(241 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
<style type="text/css">
 
  
 +
<!-- *************************************************** CSS PART ************************************************** -->
 +
 +
 +
<style type="text/css">
  
  
Line 24: Line 27:
  
 
}
 
}
 +
 +
 +
/***************** DON'T HAVE ANY F****** CLUE WHY, BUT THIS RESET IS VERY IMOPORTANT! *****************/
 +
/*reset padding, margin and list style*/
 +
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 +
padding:0;
 +
margin:0;
 +
/*        list-style-image:url('');*/
 +
/*        background-image:url('');*/
 +
        border-bottom:none;
 +
}
 +
 +
 +
a:link {
 +
text-decoration:none;
 +
        color: #000000;
 +
        font-weight: bold;
 +
 +
}
 +
 +
a:visited {
 +
      text-decoration: none;
 +
      color: #000000;
 +
 +
}
 +
 +
 +
a:hover {
 +
        color: #6f6f6f;
 +
        text-decoration: none;
 +
     
 +
}
 +
 +
h1,h2,h3,h4,h5,h6{
 +
font-weight:normal;
 +
font-size:100%;
 +
}
 +
p{
 +
        line-height:150%;
 +
        font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 +
}
 +
body{
 +
background-color:#F7F7F7;
 +
}
 +
 +
td{
 +
      text-align: center;
 +
}
 +
 +
#top-section{
 +
        display:block;
 +
        position:relative;
 +
        margin-top:10px;
 +
        background:none;
 +
       
 +
}
 +
 +
.text ul {
 +
list-style-type: disc !important;
 +
}
 +
 +
/*end of the reset*/
 +
 +
/***************************************************************/
 +
  
 
/****** PLACE HOLDER DIVS FROM EXAMPLE WIKI TEAMPLATE *******/
 
/****** PLACE HOLDER DIVS FROM EXAMPLE WIKI TEAMPLATE *******/
Line 76: Line 144:
  
 
/************************* SIDE BAR  *************************/
 
/************************* SIDE BAR  *************************/
 +
 +
html,body,.container {
 +
    height:100%;
 +
}
 +
  
 
/* Side Bar */
 
/* Side Bar */
Line 164: Line 237:
 
line-height:24px;
 
line-height:24px;
 
}
 
}
 
/*
 
@media (max-width: 690px) {
 
.sidebar {
 
 
    position: absolute;
 
    bottom:-1px;
 
    /*float:none;*/
 
}
 
}
 
*/
 
  
  
Line 498: Line 560:
 
a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}
 
a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}
  
.contentpara {margin-bottom: 30px;}
 
  
span.email{font-family: monospace; font-weight: normal;}
 
  
fieldset {border: 1px solid #337f53;}
 
  
.greyout {color: #A0A0A0;}
 
.highlightme {background-color: #FFFF00;}
 
  
#alertContainer { margin-bottom: 10px; width: 936px;}
 
#annContainer {margin-left: 8px;}
 
#newsContainer {border: 1px solid #ccc;}
 
  
.newsTitle {
 
display: block;
 
color: #414141;
 
font-size: 25px; 
 
        font-family:Helvetica, Arial, sans-serif;
 
padding: 10px 15px 5px 10px;
 
border-bottom: 1px solid #ccc;
 
margin-bottom: 0px;
 
}
 
 
.newsItem {
 
border-bottom: 1px solid #ccc;
 
display: block;
 
padding: 5px 15px 0px 10px;
 
margin-bottom: 0px;
 
}
 
 
.newsItem h3 {
 
width: auto;
 
display: inline;
 
font-size: 14px;
 
font-family: Arial, Helvetica, sans-serif;
 
padding: 0px;
 
margin: 0px;
 
}
 
 
.newsItem img {
 
float: right;
 
clear: right;
 
width: 80px;
 
padding-left: 15px;
 
display: inline-block;
 
}
 
 
.newsItem .newsDate {
 
font-style: italic;
 
font-size: 14px;
 
display: inline-block;
 
color: #999;
 
float: right;
 
padding: 0px 0px 10px 15px;
 
}
 
 
.newsItem p, .newsItem ul, .newsItem li {
 
padding: 0px;
 
margin-left: 20px;
 
font-size: 12px;
 
line-height: 1.2;
 
}
 
 
.newsItem p {margin-top: 10px;}
 
 
.annItem {
 
border: 2px solid #414141;
 
display: block;
 
padding: 0px 15px 10px 10px;
 
margin-bottom: 18px;
 
position: relative;
 
height: 160px;
 
vertical-align: middle;
 
}
 
 
.annItem .annCentered {
 
display: table-cell;
 
vertical-align: middle;
 
height: 160px;
 
}
 
 
.annCentered h3 {
 
padding: 0px;
 
display: block;
 
margin-left: auto;
 
margin-right: auto;
 
text-align: center;
 
}
 
 
.annItem ul, .annItem li {padding: 0px; margin: 0px;}
 
.annItem li {list-style: none; margin: 5px}
 
 
/*reset padding, margin and list style*/
 
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 
padding:0;
 
margin:0;
 
        list-style-image:url('');
 
        background-image:url('');
 
        border-bottom:none;
 
}
 
 
 
a:link {
 
text-decoration:none;
 
        color: #000000;
 
        font-weight: bold;
 
 
}
 
 
a:visited {
 
      text-decoration: none;
 
      color: #000000;
 
 
}
 
 
 
a:hover {
 
        color: #6f6f6f;
 
        text-decoration: none;
 
     
 
}
 
 
h1,h2,h3,h4,h5,h6{
 
font-weight:normal;
 
font-size:100%;
 
}
 
p{
 
        line-height:150%;
 
        font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 
}
 
body{
 
background-color:#F7F7F7;
 
}
 
 
td{
 
      text-align: center;
 
}
 
 
#top-section{
 
        display:block;
 
        position:relative;
 
        margin-top:10px;
 
        background:none;
 
       
 
}
 
 
/*end of the reset*/
 
  
  
Line 784: Line 704:
  
  
/* For team part*/
+
.t-left table {
.teamM{
+
border: solid 4px white;
float:left;
+
border-bottom: solid 1px #DDDDDD;
/*width:690px;*/
+
border-top: solid 2px #DDDDDD;
margin-top:10px;
+
 
border-bottom-style:solid;  
+
border-width:2px;
+
border-color:#CCC;
+
 
}
 
}
.teamM img{
+
 
width:200px;
+
 
height:250px;
+
.t-center table {
margin-top:36px;
+
border: solid 4px white;
        border-radius:8%;
+
border-bottom: solid 1px #DDDDDD;
 +
border-top: solid 2px #DDDDDD;
 +
 
 
}
 
}
  
.titleLeft{
+
 
        float:left;
+
.t-center th {
        width:200px;
+
  text-align: center !important;  
 +
  border-right: solid 1px #DDDDDD;
 +
  border-left: solid 1px #DDDDDD;  
 
}
 
}
.titleRight{
+
 
        float:right;
+
.t-center td {
        width:200px;
+
  text-align: left !important;  
 +
    border-right: solid 1px #DDDDDD;  
 
}
 
}
.content{
+
 
        float:left;
+
 
        width:410px;
+
.t-left .table th {
margin-left:30px;
+
  text-align: left !important;
        margin-bottom:25px;
+
  border-right: solid 1px #DDDDDD;  
 +
  border-left: solid 1px #DDDDDD;
 +
}
 +
 
 +
 
 +
.t-left .table td {
 +
  text-align: left !important; 
 +
  border-right: solid 1px #DDDDDD;
 +
  border-left: solid 1px #DDDDDD;
 
}
 
}
  
  
  
.instructors{
 
float:left;
 
/*width:690px;*/
 
  
margin-top:10px;
+
 
border-bottom-style:solid;  
+
 
border-width:2px;
+
 
border-color:#CCC;
+
.exp {
 +
padding:0px;
 +
margin:0px;
 +
width:80%;
 +
background-repeat: no-repeat;
 +
display: block;
 +
margin:0 auto 0 auto;
 +
 
 
}
 
}
.instructors img{
+
 
display:block;
+
.img-noborder {
float:left;
+
margin-top:-0.5px;
width:200px;
+
margin-left:-4.5px;
margin-top:36px;
+
padding:0;
        border-radius:8%;
+
opacity: 0;
 +
 
 
}
 
}
.instructors h2{
+
 
display:block;
+
.img-noborder1 {
float:left;
+
margin-top:-0.5px;
width:410px;
+
padding:0;
height:36px;
+
opacity: 0;
margin-left:25px;
+
 
 
}
 
}
.instructors h3{
+
 
display:block;
+
.img-noborder:hover {
float:left;
+
 
width:410px;
+
opacity: 1;
margin-left:40px;
+
 
 
}
 
}
.instructors p{
+
 
display:block;
+
.img-noborder1:hover {
float:left;
+
 
width:410px;
+
opacity: 1;
margin-left:40px;
+
 
        margin-bottom:20px;
+
}
+
#instr2 img{
+
        float: right;
+
}
+
#instr2 h2{
+
        margin-left:0;
+
}
+
#instr2 p{
+
        margin-left:20px;
+
 
}
 
}
  
.links a{
 
display:none;
 
}
 
/*For the acknowledge part*/
 
.ackn{
 
        float:left;
 
        width:688px;
 
}
 
.ackn img{
 
        display:block;
 
        float:left;
 
width:120px;
 
margin-bottom:30px;
 
        padding:0 20px 0 20px;
 
        border-radius:6%;
 
}
 
.ackn h3{
 
        display:block;
 
float:left;
 
width:520px;
 
height:36px;
 
}
 
.ackn p{
 
        display:block;
 
float:left;
 
width:520px;
 
}
 
#ackn2 img{
 
        float:right;
 
}
 
#ackn3 p{
 
      width:688px;
 
}
 
#ackn5 img{
 
        float:right;
 
}
 
#ackn7 img{
 
        float:right;
 
}
 
#ackn9 img{
 
        float:right;
 
}
 
#ackn14 img{
 
        float:right;
 
}
 
#ackn10 p{
 
      width:688px;
 
}
 
#ackn11 p{
 
      width:688px;
 
}
 
#ackn15 p{
 
      width:688px;
 
}
 
  
  
Line 947: Line 818:
 
font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 
font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 
         font-size:24px;
 
         font-size:24px;
line-height:32px;
+
line-height:40px;
 
font-weight:bold;
 
font-weight:bold;
 
padding:0;
 
padding:0;
Line 1,004: Line 875:
 
list-style-type: circle !important;
 
list-style-type: circle !important;
 
}
 
}
 +
 +
.text ol{
 +
font-size: 16px;
 +
list-style-type: decimal;
 +
}
 +
 +
 +
ol.ref {
 +
    counter-reset: item;
 +
    list-style-type: none;
 +
    *list-style-type: decimal; /*Conditional hack for ie7*/
 +
}
 +
 +
ol.ref li:before {
 +
    content: '[' counter(item, decimal) '. ';
 +
    counter-increment: item;
 +
}
 +
 +
ol.ref { counter-reset: item; }
 +
ol.ref li:before { content: '[' counter(item, decimal) '] '; }
 +
 +
 +
img.text {
 +
width:100%;
 +
}
 +
 +
.caption {
 +
margin:auto;
 +
display:block;
 +
width:80%;
 +
margin-top:16px;
 +
margin-bottom:16px;
 +
}
 +
 +
 +
.photo {
 +
width:90%;
 +
margin:16px auto 16px auto;
 +
display: block;
 +
border-radius:4px;
 +
}
 +
 +
.poem {
 +
text-align:center !important;
 +
}
 +
 +
.poem p{
 +
text-align:center !important;
 +
}
 +
  
  
Line 1,060: Line 981:
  
  
 +
.member{
 +
float:left;
 +
width:100%;
 +
height:100%;
 +
margin:0 0 10px 0;
 +
padding:8px 0 8px 0;
 +
background-color: #ffffff;
 +
border-style:solid;
 +
border-color:#ececec;
 +
border-width:1px;
 +
        border-radius:3px;
 +
font-size: 14px;
 +
align-items: stretch
 +
}
  
 +
.member h2{
 +
font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 +
  font-size:20px;
 +
line-height:340px;
 +
font-weight:bold;
 +
padding:0;
 +
margin-top:16px;
 +
        color:#034996;
 +
        text-align:left;
 +
}
  
 +
.member h3{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:18px;
 +
font-weight:bold;
 +
line-height:20px;
 +
padding:0;
 +
margin-top:14px;
 +
color:#000000;
 +
        text-align:center;
 +
}
 +
.member h4{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:14px;
 +
color:black;
 +
text-align:justify;
 +
        font-weight:bold;
 +
        margin-bottom: 0 !important;
 +
        padding:0;
 +
}
  
 +
.member h5{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:14px;
 +
        line-height:24px;
 +
padding:10px 0;
 +
color:black;
 +
text-align:center;
 +
        margin-bottom: 0 !important;
 +
}
  
 +
.member h6{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:14px;
 +
font-weight:bold;
 +
line-height:18px;
 +
padding:0;
 +
margin-top:16px;
 +
color:#000000;
 +
        text-align:left;
 +
}
  
 +
.member p{
 +
font-size:14px;
 +
text-align:justify;
 +
}
 +
 +
.member ul{
 +
font-size: 14px;
 +
list-style-type: circle !important;
 +
}
 +
 +
.member img {
 +
width:100%;
 +
border-radius:4px;
 +
 +
}
 +
 +
 +
.member hr {
 +
margin-top:10px;
 +
margin-bottom:10px;
 +
}
 +
 +
.supervisor {
 +
background-color: #f1f7f9;
 +
}
 +
 +
.supervisor hr {
 +
background-color:#000000;
 +
}
 +
 +
 +
 +
 +
 +
 +
@media (min-width: 768px) {
 +
.row-eq-height {
 +
  display: -webkit-box;
 +
  display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display:        flex;
 +
margin-bottom:20px;
 +
}
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
.box{
 +
float:left;
 +
width:100%;
 +
height:100%;
 +
margin:0 0 10px 0;
 +
padding:10px;
 +
background-color: #ffffff;
 +
border-style:solid;
 +
border-color:#ececec;
 +
border-width:1px;
 +
        border-radius:3px;
 +
font-size: 14px;
 +
align-items: stretch
 +
}
 +
 +
.box h2{
 +
font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 +
font-family:"Charter Black", sans-serif;
 +
font-size:24px;
 +
font-weight:bold;
 +
line-height:48px;
 +
padding:0;
 +
margin-top:14px;
 +
color:#000000;
 +
        text-align:center;
 +
 +
}
 +
 +
.box h3{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:18px;
 +
font-weight:bold;
 +
line-height:20px;
 +
padding:0;
 +
margin-top:14px;
 +
color:#000000;
 +
        text-align:center;
 +
}
 +
.box h4{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:14px;
 +
color:black;
 +
text-align:justify;
 +
        font-weight:bold;
 +
        margin-bottom: 0 !important;
 +
        padding:0;
 +
}
 +
 +
.box h5{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:14px;
 +
        line-height:24px;
 +
padding:10px 0;
 +
color:black;
 +
text-align:center;
 +
        margin-bottom: 0 !important;
 +
}
 +
 +
.box h6{
 +
font-family:"Charter Black", sans-serif;
 +
font-size:14px;
 +
font-weight:bold;
 +
line-height:18px;
 +
padding:0;
 +
margin-top:16px;
 +
color:#000000;
 +
        text-align:left;
 +
}
 +
 +
 +
 +
.box:hover {
 +
        border-color:#000000 !important;
 +
        border: 2px solid;
 +
        padding: 9px;
 +
     
 +
}
 +
 +
 +
 +
.box p{
 +
font-size:14px;
 +
text-align:justify;
 +
font-weight: normal !important;
 +
        color: #000000;
 +
}
 +
 +
.box ul{
 +
font-size: 20px;
 +
line-height:48px;
 +
list-style-type: square !important;
 +
font-weight: normal !important;
 +
        color: #000000 !important;
 +
}
 +
 +
.box img {
 +
width:100%;
 +
border-radius:4px;
 +
 +
}
 +
 +
 +
.box hr {
 +
margin-top:10px;
 +
margin-bottom:10px;
 +
}
  
  
Line 1,213: Line 1,353:
 
.table1 th,  .table1 td{
 
.table1 th,  .table1 td{
 
   font-size:1em;
 
   font-size:1em;
   border:1px solid #98bf21;
+
   border:1px solid #2EBAFF;
 
   padding:3px 7px 2px 7px;
 
   padding:3px 7px 2px 7px;
 
}
 
}
Line 1,221: Line 1,361:
 
           padding-top:5px;
 
           padding-top:5px;
 
           padding-bottom:4px;
 
           padding-bottom:4px;
           background-color:#A7C942;
+
           background-color:#2EBAFF;
 
           color:#ffffff;
 
           color:#ffffff;
 
}
 
}
 
.table1 tr:nth-child(odd){
 
.table1 tr:nth-child(odd){
           background-color:#EAF2D3;
+
           background-color:#DFF5FF;
 
}
 
}
 
.table2{
 
.table2{
Line 1,288: Line 1,428:
  
  
/*** VIDEO PLAYER **/
+
</style>
 +
<!-- ***************************************************************************************************************** -->
 +
 
 +
 
  
  
Line 1,294: Line 1,437:
  
  
</style>
 
  
 +
<!-- *************************************************** HTML PART ************************************************** -->
  
  
Line 1,311: Line 1,454:
  
 
<!--  Plyr css-->
 
<!--  Plyr css-->
 
 
<link rel="stylesheet" href="https://2016.igem.org/Template:Goettingen/plyr_css?action=raw&ctype=text/css">
 
<link rel="stylesheet" href="https://2016.igem.org/Template:Goettingen/plyr_css?action=raw&ctype=text/css">
 +
 +
<!--  Fontawesome CSS-->
 +
<link rel="stylesheet" href="https://2016.igem.org/Template:Goettingen/CSS_fontawesome?action=raw&ctype=text/css">
 +
  
  
Line 1,370: Line 1,516:
 
           <ul class="dropdown-menu">
 
           <ul class="dropdown-menu">
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Description"> Description </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Description"> Description </a></li>
<li> <a href="https://2016.igem.org/Team:Goettingen/Design"> ★ Design </a></li>
 
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Experiments"> Experiments </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Experiments"> Experiments </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Proof"> Proof of Concept </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Proof"> Proof of Concept </a></li>
<li> <a href="https://2016.igem.org/Team:Goettingen/Demonstrate"> ★ Demonstrate </a></li>
 
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Notebook"> Notebook </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Notebook"> Notebook </a></li>
Line 1,386: Line 1,530:
 
           <ul class="dropdown-menu">
 
           <ul class="dropdown-menu">
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Parts">Parts </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Parts">Parts </a></li>
<li> <a href="https://2016.igem.org/Team:Goettingen/Basic_Part"> Basic Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:Goettingen/Basic_Part"> Basic Parts </a></li>
<li> <a href="https://2016.igem.org/Team:Goettingen/Composite_Part"> ★ Composite Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:Goettingen/Part_Collection"> ★ Part Collection </a></li>
+
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
Line 1,407: Line 1,549:
 
           <ul class="dropdown-menu">
 
           <ul class="dropdown-menu">
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Human_Practices"> Human Practices </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Human_Practices"> Human Practices </a></li>
<li> <a href="https://2016.igem.org/Team:Goettingen/HP/Silver"> Silver </a></li>
+
<li> <a href="https://2016.igem.org/Team:Goettingen/HP/Silver"> HP on the Road </a></li>
<li> <a href="https://2016.igem.org/Team:Goettingen/HP/Gold"> Gold </a></li>
+
<li> <a href="https://2016.igem.org/Team:Goettingen/HP/Gold"> HP on the Web </a></li>
<li> <a href="https://2016.igem.org/Team:Goettingen/Integrated_Practices"> ★ Integrated Practices </a></li>
+
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Engagement"> Engagement </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Engagement"> Engagement </a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
        <li class="dropdown">
 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Awards <span class="caret"></span></a>
 
          <ul class="dropdown-menu">
 
<li><a href="https://2016.igem.org/Team:Goettingen/Entrepreneurship"> ★ Entrepreneurship </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Hardware"> ★ Hardware </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Software">★ Software </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Measurement">★  Measurement </a></li>
 
<li> <a href="https://2016.igem.org/Team:Goettingen/Model">★ Model </a></li>
 
          </ul>
 
        </li>
 
 
  
  

Latest revision as of 17:49, 19 October 2016