Template:Judd UK/mainCSS

/* Judd iGEM Wiki CSS

*
* Copyright Aleksandur Murfitt
* Released under the MIT license
* (<[URL]>)/license.txt
*
* Date: 2017-10-01T12:38Z
*/

body {

   margin: 0;
   padding: 0;
   height: 100%;
   position: relative;

}

.JC * {

   word-wrap: break-word;
   line-height: 24px;
   text-decoration: none;
   font-family: 'Raleway';

}

.JC :not(h1):not(h2):not(h3) {

   font-size: 15px;
   font-weight: 300;

}

.JC h1, .JC h2, .JC h3{

   font-weight: 400;

}

.JC [href]:not(a) {

   color: #0000EE;
   cursor: pointer;

}

.JC #Header, .JC #Footer {

   background: #cb2222;
   width: 100%;
   z-index: 3;
   text-align: center;
   position: relative;

}

.JC #Header {

   height: 80px;

}

.JC #Footer {

   height: 60px;
   margin-top: 40px;
   padding-top: 17px;

}

.JC #Header img {

   position: relative;
   top: 50%;
   height: 100%;
   visibility: visible;
   transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   z-index: 100;

}

.JC #Header a {

   right: 0px;
   left: 0px;
   margin: auto;
   color: black;
   top: 50%;
   transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   width: 25%;
   opacity: 0;
   position: absolute;
   transition: left 1s, opacity 0.8s;

}

.JC #Header:hover #O1 {

   left: -75%;
   opacity: 1;

}

.JC #Header:hover #O2 {

   left: -25%;
   opacity: 1;

}

.JC #Header:hover #O3 {

   left: 25%;
   opacity: 1;

}

.JC #Header:hover #O4 {

   left: 75%;
   opacity: 1;

}

.JC #content-container {

   visibility: hidden;
   min-height: 100vh;
   height: 100%;
   width: calc(100% - 200px);
   position: relative;
   left: 200px;

}

.JC #content-body {

   text-align: justify;
   text-justify: inter-word;
   margin: 20px;
   margin-top: 37px;

} .JC #content-body a {

   text-decoration: underline;

}

.JC #content-body img{

   float:right;
   margin-top:10px;
   margin-bottom:10px;
   margin-left:20px;

} .JC #content-body .left{

   float:left;
   margin-right: 20px;
   margin-left: 0;

}

.JC #content-index {

   background: #efefef;
   display: inline-block;
   padding-right: 30px;
   margin: 20px;
   margin-top: 0px;
   float: left;
   text-decoration: none;
   position: relative;
   z-index: 1;

}

.JC #content-index h4,.JC #site-index h4 {

   text-align: center;
   margin-bottom: 10px;

} .JC #content-index h4{

   text-decoration: underline;
   padding-left:30px;

} .JC #site-index h4{

   margin-top:97px;

} .JC #content-index ol {

   counter-reset: listing;
   list-style: none;
   text-align: left;
   padding-left: 30px;
   margin-top: 0px;

} .JC #content-index ol li:before {

   content: counters(listing, ".") " ";
   counter-increment: listing;

}

.JC #site-index {

   background: #ddd;
   display: inline-block;
   top: 0;
   width: 200px;
   height: 100%;
   position: absolute;

}

.JC #site-index ol {

   list-style: none;
   text-align: left;
   padding-left: 30px;
   margin-top: 0px;

}

.JC #content-loader {

   position: absolute;
   width: 100%;
   height: 100%;
   top: 80px;
   left: 0px;
   background-color: #eeeeee;

}

.JC #content-loader bar-loader {

   position: absolute;
   left: 50%;
   font-size: 7px;
   transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -webkit-transform: translateX(-50%);

}

.JC bar-loader {

   z-index:10000;
   font-size:5px !important;
   position: absolute;
   margin-left: -27px;
   top: 44.5px;

}