Template:ETH Zurich/template.css

/* TAGS */ html { 

   overflow-y: scroll;
   min-height:100%;

} body { 

   zoom:1;
   width:100%;
   overflow:hidden;
   background: #383838;

}

  1. bodyContent {
   width: 100%;

}

  1. globalWrapper {
   background-image: url("ETH_Zurich_background.png");
   background-position: 25px 25px;
   background-attachment: fixed;

}


h1#loading { 

   border-bottom:none;
   color:white;

}

/* IDs */

  1. content {
   font-family: "Trebuchet MS", Helvetica, sans-serif;
   width:100%;

}

  1. topContainer {
   height: 100px;
   display:table-header-group;

} @media screen and (max-device-width:480px) {

  1. topContainer {
   height:314px;

} }

  1. mobileMenu {
   display:none;

}

  1. sideFiller {
   width:20%;
   height:100px;
   float:left;

} @media screen and (max-device-width:480px) {

  1. sideFiller {
   width:80%;
   height:auto;

} }

  1. sidemenuContainer {
   margin-right:1%;
   width:19%;
   float:left;
   display:table-cell;
   height:100%;
   position:relative;

}

  1. sidemenu {
   padding:11%;
   height:auto;
   background:white;
   border: 1px solid black;
   border-radius: 4px;
   position:absolute;
   width: 77%;

}

  1. mainContainer { 
   width:100%;
   max-width: 1020px;
   margin:auto;
   position:relative;
   min-height:400px;
   height:100%;
   overflow-y: visible;
   display:table;

}

  1. menuButton {
   padding:30px;
   margin:85px 30px 0px 0px;
   background:#383838;
   display:none;
   width:90px;
   height:90px;
   float:right;

} @media screen and (max-device-width: 480px) {

  1. menuButton {
   display:block;

} }

  1. menuButton img {
   width:100%;

}

  1. footerContainer {
   width: 100%;
   text-align:center;
   background-color: #505050;
   padding: 10px;
   border: 1px solid black;
   border-radius: 4px;
   display:table-footer-group;

}

  1. socialmedia {
   width:100%;
   margin:auto;

/* text-align:center;*/ 

   float:right;

}

.expContainer { 

   padding: 4%;
   background: #fff; 
   border-radius: 4px;
   float:right;
   clear:right;
   display:table-cell;
   width:72%;
   margin:0 0 1% 0;

}

@media screen and (max-width:1100px) {

  1. sidemenuContainer {
   display:none;

} .expContainer { 

   width:92%;

} } @media screen and (max-device-width:480px) {

  1. mainMenu {
   display:none;

} }


/* CLASSES */

.mediabutton { 

   width:48px;
   margin:3px;
   border-radius: 50%;
   display:inline-block;

} @media screen and (max-device-width:480px) { .mediabutton { 

   width:120px;
   height:120px;

} }

/*Clear class for all the pages, adds spacing too*/ .clear{ 

   clear:both;
   height: 10px;

}

/* highlight box for special messages */ .highlightBox { 

   width:500px; 
   margin:auto; 
   background-color: #E8E8E9; 
   margin-bottom: 15px;
   margin-top: 15px;
   padding: 15px;
   padding-top: 5px;

}

.info { 

   max-height:70px;
   overflow:hidden;
   position:relative;
   margin-bottom: 20px;

/* padding-bottom:35px;*/ } .open-info { 

   max-height:99999px !important;
   padding-bottom:35px;

} .closed-info { 

   height:70px;

/* max-height:70px !important;*/ 

   padding-bottom:auto;

} .expander { 

   position:absolute;
   bottom:0px;
   width:100% !important;
   display:inline-block;
   padding:5px 0px 5px 0;
   text-align:center;
   background: linear-gradient(rgba(192,192,192,0), #ccc);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
   border-radius: 4px;
   outline : none;

}

/* SIDEMENU STYLES */

  1. mainContainer #sidemenu ul {
   margin: 0em 0em 0em 1em;

}

  1. mainContainer #sidemenu ul ul {
   margin: 0 0 0 0.5em;

}

  1. mainContainer #sidemenu ul ul ul {
   margin: 0 0 0 0.8em;

}

  1. mainContainer #sidemenu ul li {
   list-style: none;
   color: #00964B;
   margin-left:-1em;
   font-size:17px;

}

  1. mainContainer #sidemenu ul li a {
   font-weight: bold;

}

  1. mainContainer #sidemenu ul ul li {
   list-style: initial;
   color: #000000;
   margin:0;
   font-size:15px;

}

  1. mainContainer #sidemenu ul ul li a {
   font-weight:normal;

}

  1. mainContainer #sidemenu a {
   color: #00964B;
   font-weight: normal;

}

  1. mainContainer #sidemenu a:hover,#mainContainer #sidemenu a.current {
   color: #006EB4;

}


/* MAIN STYLE */

  1. mainContainer p { 
   font-size: 15px;
   padding-top: 5px;
   padding-bottom: 5px;
   text-align:justify;
   margin:0 1% 0 1%;

}

  1. mainContainer p.caption {
   display:block;
   margin:auto;
   text-align:center;

}

  1. mainContainer h1,h2,h3,h4,h5,h6 {
   color: #000000;
   border-bottom: none;
   font-weight: bold;

/* line-height:normal;*/ }

  1. mainContainer h1 {
   text-align: center;
   color:#00964B;
   font-size:36px;
   padding-top:0px;

/* margin-bottom: 0px;*/ }

  1. mainContainer h2 {
   font-size:24px;
   padding-top: 40px;
   border-bottom:1px solid black;

}

  1. mainContainer h2:first-child {
   padding-top: 0px;

}

  1. mainContainer h3 {
   font-size:20px;

}

  1. mainContainer li,td,th {
   font-size:15px;

}

.expContainer a { 

   font-weight: bold;
   color: #00964B;

}

.expContainer a:hover { 

   color: #59bf92;

}

/*Change the styling of tables */

  1. mainContainer table {

/* border: 1px solid #565656;*/ 

   border-collapse: collapse;
   margin: auto;

}

/*Change the styling of table cells*/

  1. mainContainer td,th {
   padding: 10px;
   vertical-align:middle;
   border: 1px solid #565656;

}

/*Change the styling of table headers */

  1. mainContainer th {
   background-color: #93c6ac;

}

  1. mainContainer .imgBox {
   padding:3px;
   height:auto;
   border: 1px solid #ccc;
   font-family: sans-serif;
   margin: 20px 0 20px 0;

}

  1. mainContainer .imgBox #mag {
   width:15px;
   height:11px;
   float:right;
   margin: 3px;

}

  1. mainContainer .imgBox #mag img {
   border:none !important;

}

  1. mainContainer .imgBox p {
   font-size: 10pt;
   padding:3px;
   margin: 0px;
   text-align:left;

}

  1. mainContainer .imgBox object,.imgBox img {
   width:100%;
   border: 1px solid #ccc;

}


.expContainer img,.expContainer object.svg { 

   display:block;
   margin:auto;
   text-align:center;

} .expContainer ul { 

   list-style: square;

} a.expander img { 

   background: url("Updownarrows.png") no-repeat;
   outline : none;
   height:100%;
   background-size:100%;

/* background-position: 0 100%;*/ } .open-info a.expander img { 

   background-position: 0 100%;

} .closed-info a.expander img { 

   background-position: 0 0;

} .expContainer b.TODO { 

   color: #F660AB;

}

@media screen and (max-device-width: 480px) { 

   a.expander {
       height: 10em;
   }
   .info {
       padding-bottom:20em;
   }
   .open-info {
       padding-bottom:20em;
   }
   .info {
       max-height:10em;
   }
   .closed-info {

/* max-height:10em;*/ 

       height:10em;
   }

}




/* MENU STYLE */

.hideMenu a { 

   color: white;
   text-decoration:none;
   display:block;
   cursor: pointer;
   cursor: hand;
   outline : none;

}


.hideMenu { 

   list-style: none;
   font-weight: bold;
   cursor: pointer;
   outline : none;
   -moz-user-select:-moz-none;
   -moz-user-select:none;
     -o-user-select:none;
 -khtml-user-select:none;
-webkit-user-select:none;
    -ms-user-select:none;
        user-select:none;
   text-align: center;
   height: 100px;
   width:80%;
   float:left;
   position:relative;
   margin: 0px;
   -webkit-transition: z-index 0s;
      -moz-transition: z-index 0s;
       -ms-transition: z-index 0s;
        -o-transition: z-index 0s;
           transition: z-index 0s;
   -webkit-transition-delay: 1s;
      -moz-transition-delay: 1s;
       -ms-transition-delay: 1s;
        -o-transition-delay: 1s;
           transition-delay: 1s;

}

.hideMenu li { 

   color: #fff;
   text-transform:uppercase;
   cursor: pointer;
   margin:auto;
   outline : none;
   width:14.2857%;
   float:left;
   z-index:10;  
   padding:10px 0 10px 0;
   border-radius: 20px;
   line-height:40px;

}

.hideMenu li ul { 

   overflow:hidden;
   border-radius: 0px 0px 20px 20px;
   background: #00B058;
   display:none;
   position:relative;
   margin: 10px 0 0 0;
   z-index:100;
   list-style: none;

}



.hideMenu li.sub { 

   height:60px;

} .hideMenu li.ignoreSwitch { 

   line-height:normal;

} .hideMenu li:hover { 

   color:  #FFF;
   background-color: #00964B;
   cursor: pointer;

} .hideMenu li.sub:hover { 

   border-radius: 20px 20px 0px 0px;
   background:      -o-linear-gradient(top,#00964B,#19b768);
   background: -webkit-linear-gradient(top,#00964B,#19b768);
   background:    -moz-linear-gradient(top,#00964B,#19b768);
   background:         linear-gradient(top,#00964B,#19b768);

} .hideMenu li:hover a{ 

   color:  #FFF;

} .hideMenu li:hover ul { 

   display:block;

} /*Style the submenu buttons*/ .hideMenu li ul li { 

   text-transform:capitalize;
   line-height:30px;
   border-radius: 0px;
   color: #383838;
   background-clip: border-box;
   padding:5px 0 5px 0;
   width:100%;

}


@media only screen and (max-device-width: 480px) { .hideMenu { 

   text-align: left;
   height:auto;
   float:none;
   margin: .3em 0 0 2em;
   background-color:#383838;
   position:absolute;
   width:100%;

}

  1. menuContainer .hideMenu {
   display:none;

}

.hideMenu li { 

   font-size:70px;
   width:auto;
   line-height:120px;
   float:left;
   display:inline-block;
   clear:both;
   padding: 50px 0 50px 0;

} .hideMenu li:hover { 

   background:transparent;

} .hideMenu li.ignoreSwitch br { 

   display:none;

}

.hideMenu li.sub { 

   height:auto;
   line-height:60px;

} .hideMenu li.sub:hover { 

   border-radius: 20px 20px 0px 0px;
   background: transparent;

} .hideMenu li ul { 

   margin: 0 0 0 20%;
   background:transparent;
   float:none;
   width:100%;
   display:none;

} .hideMenu li:hover ul { 

   display:none;

} .hideMenu li ul li { 

   line-height:120px;
   color: #fff;

} .hideMenu li ul li:hover { 

   line-height:120px;
   color: #fff;
   background-color: #00964B;

} }



/* FOOTER STYLE */

  1. footerContainer img {
   padding:10px;
   max-width:200px;
   max-height:70px;

}

  1. footerContainer h2 {
   text-align:center;
   border: none;
   color: white;

}

img#runnerImg { 

   animation: run 10s linear;
   animation-fill-mode: forwards;
   position:relative;
   float:left;
   left:50px;

} @keyframes run { 

   from {left:0;}
   to {left:100%;display:none;}

}