Template:Montgomery Cougars NJUSA/Common CSS

From 2014hs.igem.org

Revision as of 01:21, 21 June 2014 by Casey.chow (Talk | contribs)
   /* Edit this file: https://2014hs.igem.org/wiki/index.php?title=Template:Montgomery_Cougars_NJUSA/Common_CSS&action=edit */
   /* https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki#Centralizing_the_layout_using_templates */


   /***************************************/
   /* WIKI RESET                          */
   /***************************************/
   body.mediawiki {
       margin-top: -1.5em;
   }
   #contentSub, 
   #search-controls, 
   .firstHeading, 
   #footer-box, 
   #catlinks, 
   #p-logo {
       display:none;
   }
   #top-section {
       border: none;
       height: 0px;
   }
   #content {
       border: none;
   }
   #menubar > ul > li:last-child {
       display: none;
   }
   #menubar {
       width: auto;
   }
   #menubar ul {
       margin-bottom: 0.5em;
   }
   .firstHeading {
       display: none;
   }


   /* CUSTOM STYLES */
   #content {
       width: 100%;
       padding: 0;
   }
   .container {
       width: 70%;
       max-width: 1100px;
       margin: 0 auto;
   }
   p {
       line-height: 1.7;
   }
   /***************************************/
   /* RANDOM                              */
   /***************************************/
   body {
       min-width: 1200px;
       background-color: white;
       border-bottom: solid #333 1px;
   }
   /* fontawesome */
   [class*="fontawesome-"]:before {
     font-family: 'FontAwesome', sans-serif;
   }
   /* http://css-tricks.com/snippets/css/clear-fix/ */
   .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
   }
   .clearfix { display: inline-block; }
   /* start commented backslash hack \*/
   * html .clearfix { height: 1%; }
   .clearfix { display: block; }
   /* close commented backslash hack */
   .centered {
       display: table;
       margin-left: auto;
       margin-right: auto;
   }
   table caption {
       font-size: 1.5em;
   }
   /***************************************/
   /* FONT TWEAKS                         */
   /***************************************/
   body {
       font-size: 12px;
   }
   p {
       font-size: 16px;
   }
   *, body, p, span, blockquote, article, section, aside, nav, th, td, .wikitable th, .wikitable td {
       font-family: 'Open Sans', sans-serif;
   }
   h1, h2, h3, h4, h5, h6,
   h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
       font-family:  'Open Sans', sans-serif;
       font-weight: 400;
       padding-bottom: 0.25em;
   }
   h1, h1 a {
       border-bottom: none;
       font-size: 3.75em;
   }
   p {
       line-height: 1.5;
   }
   b, strong, th {
       font-weight: 700;
   }
   ::selection {
       color: white; 
       background: rgb(0, 102, 0);
   }
   ::-moz-selection {
       color: white; 
       background: rgb(0, 102, 0);
   }
   /***************************************/
   /* HEADER                              */
   /***************************************/
   #header-wrapper {
       position: relative; /* create new stacking context to keep logo on top */
       z-index: 100;
   }
   #header {
       background-color: rgb(38, 38, 38);
       border-bottom: solid 0.75em rgb(0, 102, 0);
       height: 7.5em;
   }
   #logo {
       margin-left: 20px;
   }
   #logo span {
       display: none;
   }
   #logo img {
       /*max-width: 275px;*/
       position: absolute;
       width: 250px;
   }
   #nav {
       background: none;
       max-width: 1400px;
       margin: 0 auto;
       position: relative;
   }
   #nav ul {
       position: absolute;
       left: 320px;
       top: 4.25em;
   }
   #nav li a {
       color: #E6E6E6;
       font-family: 'Open Sans', sans-serif;
       font-size: 1.2em;
       font-weight: 300;


       -webkit-transition: background-color 0.15s ease-in;
       -moz-transition: background-color 0.15s ease-in;
       -o-transition: background-color 0.15s ease-in;
       -ms-transition: background-color 0.15s ease-in;
       transition: background-color 0.15s ease-in;
   }
   #nav > ul > li:hover > a {
    background: rgb(50, 50, 50);
   }
   #nav li ul {
       background: rgb(50, 50, 50);
       opacity: 0;
       position: absolute;
           top: 2.6em;
           left: 0;
       width: auto;
       z-index: 99;
       -webkit-transition: opacity 0.15s ease-in;
       -moz-transition: opacity 0.15s ease-in;
       -o-transition: opacity 0.15s ease-in;
       -ms-transition: opacity 0.15s ease-in;
       transition: opacity 0.15s ease-in;
   }
   #nav li:hover ul {
       opacity: 1;
       visibility: visible;
   }
   #nav li ul li:hover a {
       background: rgb(75, 75, 75);
   }
   #nav .is-parent:after {
       content: '▼';
       color: #C0C0C0;
       margin-left: 0.5em;
       font-size: 0.75em;
   }
   #igem-logo {
       position: absolute;
       right: 0;
   }
   #igem-logo span {
       display: none;
   }
   #igem-logo  img {
       width: 200px;
       margin-top: 1em;
   }
   /***************************************/
   /* GALLERY                             */
   /***************************************/
   .generic-image {
       position: relative;
   }
   .gallery {
       position: relative;
   }
   #slider {
       margin-right: 0;
       margin-bottom: 0;
       position: relative; 
       overflow: auto; 
       width: 100%;
   }
   #slider ul {
       margin-top: 0;
       padding-left: 0;
   }
   #slider li  {
       list-style: none; 
       position: relative;
   }
   #slider ul li {
       float: left;
   }
   #slider ul li a {
       display: block;
   }
   .slider img {
       display: table;
       margin: 0 auto;
       width: 100%;
   }
   #slider .caption {
       background-color: rgba(0,10,5,.8);
       padding: 1.5em 1em;
       text-align: center;
       color: white;
       position: absolute;
       bottom: 0;
       width: 100%;
   }
   .slider .caption {
       display: table;
       margin: 0;
       width: auto;
   }
   #slider .caption h2 {
       color: white;
       border-bottom: none;
       font-size: 3em;
       font-weight: 300;
       margin: 0.25em 0 0.75em;
       padding: 0;
   }
   #slider .caption h2:after {
       content: '►';
       font-size: 0.5em;
       margin-left: 0.2em;
       margin-bottom: 0.2em;
       color: rgb(0, 172, 0);
   }
   #slider .caption span{
       color: white;
       font-size: 1.25em;
       font-weight: 300;
       margin: 0;
   }
   /***************************************/
   /* LEFT LINKS                          */
   /***************************************/
   #left-links-wrapper {
       font-size: 12px;
       box-sizing: border-box;
       -moz-box-sizing: border-box;
       padding-right: 15px;
   }
   #left-links {
   }
   #left-links h1, 
   #left-links ul li a,
   #left-links ul li .selflink {
       color: rgb(245, 245, 245);
       font-family: 'Open Sans', sans-serif;
       text-decoration: none;
   }
   #left-links h1 {
       background-color: rgb(0,102,0);
       font-size: 2.25em;
       font-weight: 300;
       line-height: 1.15;
       padding: 10px;
       margin: 0 0 -1px;
       float:  left;
       min-width: 80%;
   }
   #left-links ul {
      float: left;
      margin: 0;
      padding: 0;
      width: 100%;
   }
   #left-links ul li {
       display: block;
       font-size: 1.5em;
       font-weight: 300;
       margin-bottom: 0;
       width: 100%;
   }
   #left-links ul li a,
   #left-links ul li .selflink {
       display: block;
       clear: left;
       float: left;
       padding: 10px 15px;
       -webkit-transition: background 200ms ease;
       -moz-transition: background 200ms ease;
       -ms-transition: background 200ms ease;
       -o-transition: background 200ms ease;
       transition: background 200ms ease;
       width: 65%;
   }
   #left-links ul li a:hover {
       background-color: rgb(50,50,50);
   }
   #left #left-links-title {
       background-color: rgba(0, 102, 0, 1);
       color: rgb(240, 240, 240);
   }
   #left-links .selflink {
       background-color: rgb(46, 46, 46);
       font-weight: 300;
   }
   #left-links ul > :nth-child(1) > a {
       background-color: rgba(0, 102, 0, 0.95);
   }
   #left-links ul > :nth-child(2) > a {
       background-color: rgba(0, 102, 0, 0.91);
   }
   #left-links ul > :nth-child(3) > a {
       background-color: rgba(0, 102, 0, .87);
   }
   #left-links ul > :nth-child(4) > a {
       background-color: rgba(0, 102, 0, 0.83);
   }
   #left-links ul > :nth-child(5) > a {
       background-color: rgba(0, 102, 0, 0.79);
   }
   #left-links ul > :nth-child(6) > a {
       background-color: rgba(0, 102, 0, 0.75);
   }
   #left-links ul > :nth-child(7) > a {
       background-color: rgba(0, 102, 0, 0.71);
   }
   #left-links ul > :nth-child(8) > a {
       background-color: rgba(0, 102, 0, 0.67);
   }


   /***************************************/
   /* CONTENT                             */
   /***************************************/
   #main {
       position: relative;
   }
   #main-wrapper {
       max-width: 1400px;
       margin: 0 auto;
       position: relative;
   }
   #inner-content {
       box-sizing: border-box;
       -moz-box-sizing: border-box;
       padding-right: 2em;
   }
   #inner-content h1 {
       margin: 0 0 0.5em;
   }
   #inner-content p {
       margin: 1.5em 0 .5em;
   }
   .editsection, .editsection a {
       font-size: 16px;
   }
   .toc {
       float: right;
       margin: 3em 0 2em 2em;
   }
   /***************************************/
   /* PIKACHOOSE                          */
   /***************************************/
   .slider {
       margin-left: 10%;
       width: 75%;
   }
   .pika-thumbs {
       height:75px;
       padding:0 16px;
   }
   .pika-thumbs li {
       width:144px;
       height:74px;
       overflow:hidden;
       float:left;
       list-style-type:none;
       background:#fafafa;
       border:1px solid #e5e5e5;
       cursor:pointer;
       margin:0 5px;
       padding:3px;
   }
   .pika-thumbs li .clip {
       position:relative;
       height:100%;
       text-align:center;
       vertical-align:middle;
       overflow:hidden;
   }
   .pika-stage {
       position:relative;
       background:#fafafa;
       border:1px solid #e5e5e5;
       text-align:center;
       margin:0 auto;
       padding:10px 10px 40px;
   }
   .pika-stage img {
       height:100%;
   }
   .pika-stage .caption {
       position:absolute;
       background:rgba(0,0,0,0.75);
       border:1px solid #141414;
       color:#fafafa;
       text-align:right;
       bottom:50px;
       right:10px;
       padding:10px;
   }
   .pika-stage .caption p {
       line-height:14px;
       margin:0;
       padding:0;
   }
   .pika-imgnav a {
       position:absolute;
       text-indent:-5000px;
       display:block;
       z-index:3;
   }
   .pika-imgnav a.previous {
       background:url(Prev1.png) no-repeat left 45%;
       height:100%;
       width:50px;
       top:50px;
       left:0;
       cursor:pointer;
   }
   .pika-imgnav a.next {
       background:url(Next1.png) no-repeat right 45%;
       height:100%;
       width:50px;
       top:50px;
       right:0;
       cursor:pointer;
   }


   .pika-imgnav a.play {
       background:url(Play1.png) no-repeat 0 50%;
       height:100px;
       width:44px;
       top:0;
       left:50%;
       display:none;
       cursor:pointer;
   }
   .pika-imgnav a.pause {
       background:url(Pause.png) no-repeat 0 50%;
       height:100px;
       width:44px;
       top:0;
       left:50%;
       display:none;
       cursor:pointer;
   }
   .pika-textnav {
       overflow:hidden;
       bottom:2px;
       position:absolute;
       width:100%;
       margin:10px 0 0;
   }
   .pika-textnav a {
       font-size:12px;
       text-decoration:none;
       color:#333;
       padding:4px;
   }
   .pika-textnav a.previous {
       float:left;
       width:auto;
       display:block;
   }
   .pika-textnav a.next {
       float:right;
       width:auto;
       display:block;
       margin-right:20px;
   }
   .pika-tooltip {
       font-size:12px;
       position:absolute;
       color:#FFF;
       background-color:rgba(0,0,0,0.7);
       border:3px solid #000;
       padding:3px;
   }
   .pika-counter {
       position:absolute;
       bottom:45px;
       left:15px;
       color:#FFF;
       background:rgba(0,0,0,0.7);
       font-size:11px;
       -moz-border-radius:5px;
       border-radius:5px;
       padding:3px;
   }
   .pika-loader {
       background:url(loading.gif) 3px 3px no-repeat #000;
       background-color:rgba(0,0,0,0.9);
       color:#FFF;
       width:60px;
       font-size:11px;
       text-align:right;
       position:absolute;
       top:15px;
       right:15px;
       padding:5px 3px;
   }


   .slider img {
       width:auto;
   }


   .slider .clip img {
       position:relative;
       bottom:40%;
   }


   .slider .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;}
   .slider.jcarousel-clip-horizontal {height: 90px; width: 485px;}
   .slider .jcarousel-item-horizontal { margin-right: 10px;}


   /***************************************/
   /* FOOTER                              */
   /***************************************/
   #footer {
       border-top: 1px solid rgb(175, 175, 175);
       margin-top: 2em;
       padding: 1em;
   }
   #footer li {
       display: inline-block;
       margin: 0;
   }
   #footer-links {
       text-align: center;
   }
   #footer-text {
       color: #777;
       font-size: 0.8em;
       margin: 0.75em 0;
       text-align: center;
   }
   #footer-links-2 ul {
       margin: 0.75em 0 0.25em;
       padding: 0;
   }
   #footer-links-2 ul li {
       display: inline;
       list-style: none;
       padding-right: 1em;
   }
   #footer-links-2 ul li:last-child {
       padding-right: 0;
   }
   #footer-links-2 ul li a {
       font-size: 0.9em;
       color: #777;
       text-decoration: none;
   }
   /***************************************/
   /* TOC                                 */
   /***************************************/
   #jqtoc {
       background: #3A3A3A;
       color: #fff;
       font-size: 12px;
       font-family: 'Open Sans', sans-serif;
       position: absolute;
       top: 0;
       bottom: 0;  
       width: 150px;
       right: 0;
   }
   #jqtoc ul {
       box-sizing: border-box;
       list-style: none;
       margin: 0;
       padding: 1em 0 0;
       width: 150px;
   }
   #jqtoc li {
       box-sizing: border-box;
       letter-spacing: initial;
       padding: 5px 10px;
       width: 100%;
   }
   #jqtoc a {
       color: #fff;
       text-decoration: none;
       display: block;
   }
   #jqtoc .toc-h1 {
       background-color: rgb(70, 70, 70);
   }
   #jqtoc .toc-h2 {
       padding-left: 10px;
   }
   #jqtoc .toc-h3 {
       padding-left: 20px;
   }
   #jqtoc .toc-active {
       background: rgb(0, 75, 15);
   }
   .with-toc #inner-content {
       padding-right: 215px;
   }
   .sticky { 
       float: none; 
       position: fixed; 
       z-index: 6; 
       left: auto; 
   }
   #scrolltop {
       background-color: rgb(41, 99, 41);;
       position: fixed; 
       right: 5%;
       color: white;
       bottom: 0px;
       font-size: 2.25em;
       width: 1em;
       text-align: center;
       border-radius: 5px 5px 0 0;
       height: 1em;
       line-height: 1.2;
       padding: 0.1em 0.25em 0.25em 0.2em;
   }