Difference between revisions of "Template:ETH Zurich/template.css"

 
(91 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<html>
 +
<style>
 
/* TAGS */
 
/* TAGS */
 
html {
 
html {
Line 7: Line 9:
 
     zoom:1;
 
     zoom:1;
 
     width:100%;
 
     width:100%;
−
    overflow:hidden;
 
 
     background: #383838;
 
     background: #383838;
 +
}
 +
body:after {
 +
  content: url(https://static.igem.org/mediawiki/2015/7/76/ETH_babybeacon.png);
 +
  display: none;
 +
}
 +
#bodyContent {
 +
    width: 100%;
 
}
 
}
 
#globalWrapper {
 
#globalWrapper {
Line 48: Line 56:
 
@media screen and (max-device-width:480px) {
 
@media screen and (max-device-width:480px) {
 
#sideFiller {
 
#sideFiller {
−
     width:auto;
+
     width:80%;
−
     height:314px;
+
     height:auto;
 
}
 
}
 
}
 
}
Line 58: Line 66:
 
     float:left;
 
     float:left;
 
     display:table-cell;
 
     display:table-cell;
−
     height:100%;
+
     position:absolute;
−
    position:relative;
+
    top:103px;
 +
    bottom:0px;
 +
/*    height:100%;*/
 +
/*    position:relative;*/
 +
/*    overflow:auto;*/
 
}
 
}
  
Line 68: Line 80:
 
     border: 1px solid black;
 
     border: 1px solid black;
 
     border-radius: 4px;
 
     border-radius: 4px;
−
    position:absolute;
 
 
     width: 77%;
 
     width: 77%;
 +
    position:absolute;
 
}
 
}
  
 
#mainContainer {   
 
#mainContainer {   
−
     width:100%;
+
     width:80%;
 
     max-width: 1020px;
 
     max-width: 1020px;
 
     margin:auto;
 
     margin:auto;
Line 85: Line 97:
 
#menuButton {
 
#menuButton {
 
     padding:30px;
 
     padding:30px;
−
     margin:85px 0px 0px 0px;
+
     margin:85px 30px 0px 0px;
 
     background:#383838;
 
     background:#383838;
 
     display:none;
 
     display:none;
Line 102: Line 114:
  
 
#footerContainer {
 
#footerContainer {
−
     width: 100%;
+
     width:80%;
 +
    max-width: 1020px;
 
     text-align:center;
 
     text-align:center;
−
     background-color: #505050;
+
     background-color: #C0C0C0;
−
    padding: 10px;
+
/*    padding: 10px;*/
 
     border: 1px solid black;
 
     border: 1px solid black;
 
     border-radius: 4px;
 
     border-radius: 4px;
−
     display:table-footer-group;
+
     margin:auto;
 +
/*    display:table-footer-group;*/
 
}
 
}
  
Line 137: Line 151:
 
}
 
}
 
}
 
}
 +
@media print {
 +
#sidemenuContainer {
 +
    display:none;
 +
}
 +
.expContainer {
 +
    width:92%;
 +
}
 +
}
 +
 
@media screen and (max-device-width:480px) {
 
@media screen and (max-device-width:480px) {
 
#mainMenu {
 
#mainMenu {
Line 167: Line 190:
 
/* highlight box for special messages */
 
/* highlight box for special messages */
 
.highlightBox {
 
.highlightBox {
−
     width:500px;  
+
     width:80%;  
 
     margin:auto;  
 
     margin:auto;  
−
    background-color: #E8E8E9;
 
 
     margin-bottom: 15px;
 
     margin-bottom: 15px;
 
     margin-top: 15px;
 
     margin-top: 15px;
 
     padding: 15px;
 
     padding: 15px;
 
     padding-top: 5px;
 
     padding-top: 5px;
 +
    border:1px solid #383838;
 +
    border-radius:4px;
 
}
 
}
  
Line 181: Line 205:
 
     position:relative;
 
     position:relative;
 
     margin-bottom: 20px;
 
     margin-bottom: 20px;
 +
/*    padding-bottom:35px;*/
 
}
 
}
 
.open-info {
 
.open-info {
−
     max-height:999999px !important;
+
     max-height:99999px !important;
 
     padding-bottom:35px;
 
     padding-bottom:35px;
 
}
 
}
 +
/*.closed-info {
 +
    height:70px;
 +
    max-height:70px !important;
 +
    padding-bottom:auto;
 +
}*/
 
.expander {
 
.expander {
 
     position:absolute;
 
     position:absolute;
Line 253: Line 283:
 
}
 
}
  
−
#mainContainer h1,h2,h3,h4,h5,h6 {
+
#mainContainer h1,#mainContainer h2,#mainContainer h3,#mainContainer h4,#mainContainer h5,#mainContainer h6 {
 
     color: #000000;
 
     color: #000000;
 
     border-bottom: none;
 
     border-bottom: none;
 
     font-weight: bold;
 
     font-weight: bold;
−
/*    line-height:normal;*/
+
    line-height:normal;
 
}
 
}
 +
#mainContainer h1 p,#mainContainer h2 p,#mainContainer h3 p,#mainContainer h4 p,#mainContainer h5 p,#mainContainer h6 p {
 +
    font-weight:normal;
 +
    text-align:left;
 +
}
 +
 
#mainContainer h1 {
 
#mainContainer h1 {
 
     text-align: center;
 
     text-align: center;
Line 264: Line 299:
 
     font-size:36px;
 
     font-size:36px;
 
     padding-top:0px;
 
     padding-top:0px;
 +
    clear:both;
 
/*    margin-bottom: 0px;*/
 
/*    margin-bottom: 0px;*/
 
}
 
}
Line 271: Line 307:
 
     padding-top: 40px;
 
     padding-top: 40px;
 
     border-bottom:1px solid black;
 
     border-bottom:1px solid black;
 +
    clear:both;
 
}
 
}
  
Line 279: Line 316:
 
#mainContainer h3 {
 
#mainContainer h3 {
 
     font-size:20px;
 
     font-size:20px;
 +
    clear:both;
 
}
 
}
  
Line 292: Line 330:
 
.expContainer a:hover {  
 
.expContainer a:hover {  
 
     color: #59bf92;
 
     color: #59bf92;
 +
}
 +
 +
.expContainer ul {
 +
    margin: .3em 0 0 2.5em;
 
}
 
}
  
 
/*Change the styling of tables */
 
/*Change the styling of tables */
 
#mainContainer table {
 
#mainContainer table {
−
/*    border: 1px solid #565656;*/
+
    border: 3px solid #565656;
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
     margin: auto;
 
     margin: auto;
 +
    margin-bottom:20px;
 
}
 
}
  
Line 305: Line 348:
 
     padding: 10px;
 
     padding: 10px;
 
     vertical-align:middle;
 
     vertical-align:middle;
−
     border: 1px solid #565656;
+
     border: 3px solid #565656;
 +
    max-width:100%;
 
}
 
}
  
Line 317: Line 361:
 
     height:auto;
 
     height:auto;
 
     border: 1px solid #ccc;
 
     border: 1px solid #ccc;
−
     font-family: sans-serif;
+
     font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
    margin: 20px 0 20px 0;
 +
    background-color:#f9f9f9;
 +
}
 +
#mainContainer .imgBox a {
 +
    display:block;
 +
}
 +
#mainContainer .imgBox > :not(p) {
 +
    background-color:#fff;
 
}
 
}
 
#mainContainer .imgBox #mag {
 
#mainContainer .imgBox #mag {
Line 338: Line 390:
 
     width:100%;
 
     width:100%;
 
     border: 1px solid #ccc;
 
     border: 1px solid #ccc;
 +
}
 +
#mainContainer .imgBox > table, #mainContainer .imgBox > table td,#mainContainer .imgBox > table th {
 +
    border: 0;
 +
}
 +
#mainContainer .imgBox > table table, #mainContainer .imgBox > table table td, #mainContainer .imgBox > table table th {
 +
    border: 3px solid black;
 
}
 
}
  
Line 354: Line 412:
 
     height:100%;
 
     height:100%;
 
     background-size:100%;
 
     background-size:100%;
 +
/*    background-position: 0 100%;*/
 
}
 
}
 
.open-info a.expander img {
 
.open-info a.expander img {
 
     background-position: 0 100%;
 
     background-position: 0 100%;
 +
}
 +
/*.closed-info a.expander img {
 +
    background-position: 0 0;
 +
}*/
 +
.expContainer b.TODO {
 +
    color: #F660AB;
 
}
 
}
  
Line 362: Line 427:
 
     a.expander {
 
     a.expander {
 
         height: 10em;
 
         height: 10em;
 +
    }
 +
    .info {
 +
        padding-bottom:20em;
 
     }
 
     }
 
     .open-info {
 
     .open-info {
Line 369: Line 437:
 
         max-height:10em;
 
         max-height:10em;
 
     }
 
     }
 +
/*    .closed-info {
 +
        max-height:10em;
 +
        height:10em;
 +
    }*/
 
}
 
}
  
Line 377: Line 449:
  
 
/* MENU STYLE */
 
/* MENU STYLE */
 +
 +
#sideFiller img {
 +
    width:95%;
 +
}
  
 
.hideMenu a {
 
.hideMenu a {
Line 416: Line 492:
 
         -o-transition-delay: 1s;
 
         -o-transition-delay: 1s;
 
             transition-delay: 1s;
 
             transition-delay: 1s;
 +
}
 +
 +
#menuContainer .hideMenu {
 +
    margin:0.3em 0 0 0;
 
}
 
}
  
Line 424: Line 504:
 
     margin:auto;
 
     margin:auto;
 
     outline : none;
 
     outline : none;
−
    width:14.2857%;
+
/*    width:14.2857%;*/
 +
    width:16.66666666%;
 
     float:left;
 
     float:left;
 
     z-index:10;   
 
     z-index:10;   
Line 441: Line 522:
 
     z-index:100;
 
     z-index:100;
 
     list-style: none;
 
     list-style: none;
 +
    width:100%;
 
}
 
}
  
Line 540: Line 622:
 
}
 
}
 
}
 
}
−
 
−
 
  
  
Line 553: Line 633:
 
     text-align:center;
 
     text-align:center;
 
     border: none;
 
     border: none;
−
     color: white;
+
     color: black;
 +
    overflow: initial;
 +
}
 +
 
 +
#lives {
 +
    position:fixed;
 +
    left:5px;
 +
    top:16px;
 +
    display:none;
 +
}
 +
#runner {
 +
    position:fixed;
 +
    left:5px;
 +
    bottom:0px;
 +
    display:none;
 +
    width:100%;
 +
    z-index:100;
 +
}
 +
#sandbox {
 
}
 
}
  
Line 567: Line 665:
 
     to {left:100%;display:none;}
 
     to {left:100%;display:none;}
 
}
 
}
 +
 +
/* CHANGE MEDIAWIKI STUFF */
 +
div.thumb div div.thumbcaption {
 +
    font-size: 10pt;
 +
}
 +
</style>
 +
</html>

Latest revision as of 23:58, 18 September 2015