Template:Montgomery Cougars NJUSA/Common CSS

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* Edit this file: https://2014hs.igem.org/wiki/index.php?title=Template:Montgomery_Cougars_NJUSA/Common_CSS&action=edit */
+
    /* 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 */
+
    /* https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki#Centralizing_the_layout_using_templates */
-
/***************************************/
+
    /***************************************/
-
/* WIKI RESET                          */
+
    /* WIKI RESET                          */
-
/***************************************/
+
    /***************************************/
-
body.mediawiki {
+
    body.mediawiki {
-
    margin-top: -1.5em;
+
        margin-top: -1.5em;
-
}
+
    }
-
#contentSub,  
+
    #contentSub,  
-
#search-controls,  
+
    #search-controls,  
-
.firstHeading,  
+
    .firstHeading,  
-
#footer-box,  
+
    #footer-box,  
-
#catlinks,  
+
    #catlinks,  
-
#p-logo {
+
    #p-logo {
-
    display:none;
+
        display:none;
-
}
+
    }
-
#top-section {
+
    #top-section {
-
    border: none;
+
        border: none;
-
    height: 0px;
+
        height: 0px;
-
}
+
    }
-
#content {
+
    #content {
-
    border: none;
+
        border: none;
-
}
+
    }
-
#menubar > ul > li:last-child {
+
    #menubar > ul > li:last-child {
-
    display: none;
+
        display: none;
-
}
+
    }
-
#menubar {
+
    #menubar {
-
    width: auto;
+
        width: auto;
-
}
+
    }
-
#menubar ul {
+
    #menubar ul {
-
    margin-bottom: 0.5em;
+
        margin-bottom: 0.5em;
-
}
+
    }
-
.firstHeading {
+
    .firstHeading {
-
    display: none;
+
        display: none;
-
}
+
    }
-
/* CUSTOM STYLES */
+
    /* CUSTOM STYLES */
-
#content {
+
    #content {
-
    width: 100%;
+
        width: 100%;
-
    padding: 0;
+
        padding: 0;
-
}
+
    }
-
.container {
+
    .container {
-
    width: 70%;
+
        width: 70%;
-
    max-width: 1100px;
+
        max-width: 1100px;
-
    margin: 0 auto;
+
        margin: 0 auto;
-
}
+
    }
-
p {
+
    p {
-
    line-height: 1.7;
+
        line-height: 1.7;
-
}
+
    }
-
/***************************************/
+
    /***************************************/
-
/* RANDOM                              */
+
    /* RANDOM                              */
-
/***************************************/
+
    /***************************************/
-
body {
+
    body {
-
    min-width: 1200px;
+
        min-width: 1200px;
-
    background-color: white;
+
        background-color: white;
-
    border-bottom: solid #333 1px;
+
        border-bottom: solid #333 1px;
-
}
+
    }
-
/* fontawesome */
+
    /* fontawesome */
-
[class*="fontawesome-"]:before {
+
    [class*="fontawesome-"]:before {
-
  font-family: 'FontAwesome', sans-serif;
+
      font-family: 'FontAwesome', sans-serif;
-
}
+
    }
-
/* http://css-tricks.com/snippets/css/clear-fix/ */
+
    /* http://css-tricks.com/snippets/css/clear-fix/ */
-
.clearfix:after {
+
    .clearfix:after {
-
visibility: hidden;
+
    visibility: hidden;
-
display: block;
+
    display: block;
-
font-size: 0;
+
    font-size: 0;
-
content: " ";
+
    content: " ";
-
clear: both;
+
    clear: both;
-
height: 0;
+
    height: 0;
-
}
+
    }
-
.clearfix { display: inline-block; }
+
    .clearfix { display: inline-block; }
-
/* start commented backslash hack \*/
+
    /* start commented backslash hack \*/
-
* html .clearfix { height: 1%; }
+
    * html .clearfix { height: 1%; }
-
.clearfix { display: block; }
+
    .clearfix { display: block; }
-
/* close commented backslash hack */
+
    /* close commented backslash hack */
-
.centered {
+
    .centered {
-
    display: table;
+
        display: table;
-
    margin-left: auto;
+
        margin-left: auto;
-
    margin-right: auto;
+
        margin-right: auto;
-
}
+
    }
-
th {
+
    table caption {
-
    background-color: #e0e0e0;
+
        font-size: 1.5em;
-
}
+
    }
-
table caption {
+
    /***************************************/
-
     font-size: 1.5em;
+
     /* FONT TWEAKS                        */
-
}
+
    /***************************************/
-
/***************************************/
+
    body {
-
/* FONT TWEAKS                        */
+
        font-size: 12px;
-
/***************************************/
+
    }
-
body {
+
    p {
-
    font-size: 12px;
+
        font-size: 16px;
-
}
+
    }
-
p {
+
    *, body, p, span, blockquote, article, section, aside, nav, th, td, .wikitable th, .wikitable td {
-
    font-size: 16px;
+
        font-family: 'Open Sans', sans-serif;
-
}
+
    }
-
*, body, p, span, blockquote, article, section, aside, nav, th, td, .wikitable th, .wikitable td {
+
    h1, h2, h3, h4, h5, h6,
-
    font-family: 'Open Sans', sans-serif;
+
    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, h2, h3, h4, h5, h6,
+
    h1, h1 a {
-
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+
        border-bottom: none;
-
    font-family: 'Open Sans', sans-serif;
+
        font-size: 3.75em;
-
    font-weight: 400;
+
     }
-
     padding-bottom: 0.25em;
+
-
}
+
-
h1, h1 a {
+
    p {
-
    border-bottom: none;
+
        line-height: 1.5;
-
     font-size: 3.75em;
+
     }
-
}
+
-
p {
+
    b, strong, th {
-
    line-height: 1.5;
+
        font-weight: 700;
-
}
+
    }
-
b, strong, th {
+
    ::selection {
-
     font-weight: 700;
+
        color: white;
-
}
+
        background: rgb(0, 102, 0);
 +
     }
 +
    ::-moz-selection {
 +
        color: white;  
 +
        background: rgb(0, 102, 0);
 +
    }
-
::selection {
+
     /***************************************/
-
     color: white;
+
     /* HEADER                              */
-
     background: rgb(0, 102, 0);
+
     /***************************************/
-
}
+
-
::-moz-selection {
+
-
     color: white;
+
-
    background: rgb(0, 102, 0);
+
-
}
+
-
/***************************************/
+
    #header-wrapper {
-
/* HEADER                              */
+
        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;
 +
    }
-
#header-wrapper {
+
    #logo {
-
    position: relative; /* create new stacking context to keep logo on top */
+
        margin-left: 20px;
-
    z-index: 100;
+
     }
-
}
+
-
#header {
+
-
    background-color: rgb(38, 38, 38);
+
-
     border-bottom: solid 0.75em rgb(0, 102, 0);
+
-
    height: 7.5em;
+
-
}
+
-
#logo {
+
    #logo span {
-
    margin-left: 20px;
+
        display: none;
-
}
+
    }
-
#logo span {
+
    #logo img {
-
    display: none;
+
        /*max-width: 275px;*/
-
}
+
        position: absolute;
 +
        width: 250px;
 +
    }
-
#logo img {
+
    #nav {
-
    /*max-width: 275px;*/
+
        background: none;
-
    position: absolute;
+
        max-width: 1400px;
-
    width: 250px;
+
        margin: 0 auto;
-
}
+
        position: relative;
 +
    }
-
#nav {
+
    #nav ul {
-
    background: none;
+
        position: absolute;
-
    max-width: 1400px;
+
        left: 320px;
-
    margin: 0 auto;
+
        top: 4.25em;
-
     position: relative;
+
     }
-
}
+
-
#nav ul {
+
    #nav li a {
-
    position: absolute;
+
        color: #E6E6E6;
-
    left: 320px;
+
        font-family: 'Open Sans', sans-serif;
-
    top: 4.25em;
+
        font-size: 1.2em;
-
}
+
        font-weight: 300;
-
#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;
 +
    }
-
     -webkit-transition: background-color 0.15s ease-in;
+
     #nav > ul > li:hover > a {
-
    -moz-transition: background-color 0.15s ease-in;
+
    background: rgb(50, 50, 50);
-
    -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 {
+
    #nav li ul {
-
background: rgb(50, 50, 50);
+
        background: rgb(50, 50, 50);
-
}
+
        opacity: 0;
 +
        position: absolute;
 +
            top: 2.6em;
 +
            left: 0;
 +
        width: auto;
 +
        z-index: 99;
-
#nav li ul {
+
        -webkit-transition: opacity 0.15s ease-in;
-
    background: rgb(50, 50, 50);
+
        -moz-transition: opacity 0.15s ease-in;
-
    opacity: 0;
+
         -o-transition: opacity 0.15s ease-in;
-
    position: absolute;
+
         -ms-transition: opacity 0.15s ease-in;
-
         top: 2.6em;
+
        transition: opacity 0.15s ease-in;
-
         left: 0;
+
     }
-
    width: auto;
+
-
     z-index: 99;
+
-
     -webkit-transition: opacity 0.15s ease-in;
+
     #nav li:hover ul {
-
    -moz-transition: opacity 0.15s ease-in;
+
        opacity: 1;
-
    -o-transition: opacity 0.15s ease-in;
+
        visibility: visible;
-
    -ms-transition: opacity 0.15s ease-in;
+
     }
-
     transition: opacity 0.15s ease-in;
+
-
}
+
-
#nav li:hover ul {
+
    #nav li ul li:hover a {
-
    opacity: 1;
+
        background: rgb(75, 75, 75);
-
     visibility: visible;
+
     }
-
}
+
-
#nav li ul li:hover a {
+
    #nav .is-parent:after {
-
    background: rgb(75, 75, 75);
+
        content: '▼';
-
}
+
        color: #C0C0C0;
 +
        margin-left: 0.5em;
 +
        font-size: 0.75em;
 +
    }
-
#nav .is-parent:after {
+
    #igem-logo {
-
    content: '▼';
+
        position: absolute;
-
    color: #C0C0C0;
+
        right: 0;
-
    margin-left: 0.5em;
+
     }
-
     font-size: 0.75em;
+
-
}
+
-
#igem-logo {
+
    #igem-logo span {
-
    position: absolute;
+
        display: none;
-
     right: 0;
+
     }
-
}
+
    #igem-logo  img {
 +
        width: 200px;
 +
        margin-top: 1em;
 +
    }
-
#igem-logo span {
+
     /***************************************/
-
     display: none;
+
     /* GALLERY                            */
-
}
+
     /***************************************/
-
#igem-logo  img {
+
-
     width: 200px;
+
-
     margin-top: 1em;
+
-
}
+
-
/***************************************/
+
    .generic-image {
-
/* GALLERY                            */
+
        position: relative;
-
/***************************************/
+
    }
-
.generic-image {
+
    .gallery {
-
    position: relative;
+
        position: relative;
-
}
+
    }
-
.gallery {
+
    #slider {
-
    position: relative;
+
        margin-right: 0;
-
}
+
        margin-bottom: 0;
 +
        position: relative;  
 +
        overflow: auto;
 +
        width: 100%;
 +
    }
-
#slider {
+
    #slider ul {
-
    margin-right: 0;
+
        margin-top: 0;
-
    margin-bottom: 0;
+
        padding-left: 0;
-
     position: relative;
+
     }
-
    overflow: auto;
+
-
    width: 100%;
+
-
}
+
-
#slider ul {
+
    #slider li  {
-
    margin-top: 0;
+
        list-style: none;  
-
    padding-left: 0;
+
        position: relative;
-
}
+
    }
-
#slider li {
+
    #slider ul li {
-
    list-style: none;  
+
        float: left;
-
     position: relative;
+
     }
-
}
+
-
#slider ul li {
+
    #slider ul li a {
-
    float: left;
+
        display: block;
-
}
+
    }
-
#slider ul li a {
+
    .slider img {
-
    display: block;
+
        display: table;
-
}
+
        margin: 0 auto;
 +
        width: 100%;
 +
    }
-
.slider img {
+
    #slider .caption {
-
    display: table;
+
        background-color: rgba(0,10,5,.8);
-
    margin: 0 auto;
+
        padding: 1.5em 1em;
-
    width: 100%;
+
        text-align: center;
-
}
+
        color: white;
 +
        position: absolute;
 +
        bottom: 0;
 +
        width: 100%;
 +
    }
-
#slider .caption {
+
    .slider .caption {
-
    background-color: rgba(0,10,5,.8);
+
        display: table;
-
    padding: 1.5em 1em;
+
        margin: 0;
-
    text-align: center;
+
        width: auto;
-
    color: white;
+
    }
-
    position: absolute;
+
-
    bottom: 0;
+
-
    width: 100%;
+
-
}
+
-
.slider .caption {
+
    #slider .caption h2 {
-
    display: table;
+
        color: white;
-
    margin: 0;
+
        border-bottom: none;
-
    width: auto;
+
        font-size: 3em;
-
}
+
        font-weight: 300;
 +
        margin: 0.25em 0 0.75em;
 +
        padding: 0;
 +
    }
-
#slider .caption h2 {
+
    #slider .caption h2:after {
-
    color: white;
+
        content: '►';
-
    border-bottom: none;
+
        font-size: 0.5em;
-
    font-size: 3em;
+
        margin-left: 0.2em;
-
    font-weight: 300;
+
        margin-bottom: 0.2em;
-
    margin: 0.25em 0 0.75em;
+
        color: rgb(0, 172, 0);
-
    padding: 0;
+
    }
-
}
+
-
#slider .caption h2:after {
+
    #slider .caption span{
-
    content: '►';
+
        color: white;
-
    font-size: 0.5em;
+
        font-size: 1.25em;
-
    margin-left: 0.2em;
+
        font-weight: 300;
-
    margin-bottom: 0.2em;
+
        margin: 0;
-
     color: rgb(0, 172, 0);
+
     }
-
}
+
-
#slider .caption span{
+
     /***************************************/
-
     color: white;
+
     /* LEFT LINKS                          */
-
     font-size: 1.25em;
+
     /***************************************/
-
     font-weight: 300;
+
-
    margin: 0;
+
-
}
+
-
/***************************************/
+
    #left-links-wrapper {
-
/* LEFT LINKS                          */
+
        font-size: 12px;
-
/***************************************/
+
        box-sizing: border-box;
 +
        -moz-box-sizing: border-box;
 +
        padding-right: 15px;
 +
    }
-
#left-links-wrapper {
+
    #left-links {
-
     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,
+
    #left-links h1 {
-
#left-links ul li a,
+
        background-color: rgb(0,102,0);
-
#left-links ul li .selflink {
+
        font-size: 2.25em;
-
    color: rgb(245, 245, 245);
+
        font-weight: 300;
-
    font-family: 'Open Sans', sans-serif;
+
        line-height: 1.15;
-
    text-decoration: none;
+
        padding: 10px;
-
}
+
        margin: 0 0 -1px;
 +
        float:  left;
 +
        min-width: 80%;
 +
    }
-
#left-links h1 {
+
    #left-links ul {
-
    background-color: rgb(0,102,0);
+
      float: left;
-
    font-size: 2.5em;
+
      margin: 0;
-
    font-weight: 300;
+
      padding: 0;
-
    line-height: 1.15;
+
      width: 100%;
-
    padding: 10px;
+
    }
-
    margin: 0 0 -1px;
+
-
    float:  left;
+
-
    min-width: 80%;
+
-
}
+
-
#left-links ul {
+
    #left-links ul li {
-
  float: left;
+
        display: block;
-
  margin: 0;
+
        font-size: 1.5em;
-
  padding: 0;
+
        font-weight: 300;
-
  width: 100%;
+
        margin-bottom: 0;
-
}
+
        width: 100%;
 +
    }
-
#left-links ul li {
+
    #left-links ul li a,
-
    display: block;
+
    #left-links ul li .selflink {
-
    font-size: 1.5em;
+
        display: block;
-
    font-weight: 300;
+
        clear: left;
-
    margin-bottom: 0;
+
        float: left;
-
    width: 100%;
+
        padding: 10px 15px;
-
}
+
-
#left-links ul li a,
+
        -webkit-transition: background 200ms ease;
-
#left-links ul li .selflink {
+
        -moz-transition: background 200ms ease;
-
    display: block;
+
        -ms-transition: background 200ms ease;
-
    clear: left;
+
        -o-transition: background 200ms ease;
-
    float: left;
+
        transition: background 200ms ease;
-
    padding: 10px 15px;
+
        width: 65%;
 +
    }
-
     -webkit-transition: background 200ms ease;
+
     #left-links ul li a:hover {
-
    -moz-transition: background 200ms ease;
+
        background-color: rgb(50,50,50);
-
    -ms-transition: background 200ms ease;
+
     }
-
     -o-transition: background 200ms ease;
+
-
    transition: background 200ms ease;
+
-
    width: 65%;
+
-
}
+
-
#left-links ul li a:hover {
+
    #left #left-links-title {
-
     background-color: rgb(50,50,50);
+
        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);
 +
    }
-
#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 {
-
/* CONTENT                            */
+
        position: relative;
-
/***************************************/
+
    }
-
#main {
+
    #main-wrapper {
-
    position: relative;
+
        max-width: 1400px;
-
}
+
        margin: 0 auto;
 +
        position: relative;
 +
    }
-
#main-wrapper {
+
    #inner-content {
-
    max-width: 1400px;
+
        box-sizing: border-box;
-
    margin: 0 auto;
+
        -moz-box-sizing: border-box;
-
    position: relative;
+
        padding-right: 2em;
-
}
+
    }
-
#inner-content {
+
    #inner-content h1 {
-
    box-sizing: border-box;
+
        margin: 0 0 0.5em;
-
     -moz-box-sizing: border-box;
+
     }
-
    padding-right: 2em;
+
-
}
+
-
#inner-content h1 {
+
    #inner-content p {
-
    margin: -.125em 0 0.5em;
+
        margin: 1.5em 0 .5em;
-
}
+
    }
-
#inner-content p {
+
     .editsection, .editsection a {
-
     margin: 1.5em 0 .5em;
+
        font-size: 16px;
-
}
+
    }
-
.editsection, .editsection a {
+
    .toc {
-
    font-size: 16px;
+
        float: right;
-
}
+
        margin: 3em 0 2em 2em;
 +
    }
-
.toc {
+
     /***************************************/
-
     float: right;
+
     /* PIKACHOOSE                          */
-
     margin: 3em 0 2em 2em;
+
    /***************************************/
-
}
+
-
/***************************************/
+
    .slider {
-
/* PIKACHOOSE                          */
+
        margin-left: 10%;
-
/***************************************/
+
        width: 75%;
 +
    }
-
.slider {
+
    .pika-thumbs {
-
    margin-left: 10%;
+
        height:75px;
-
    width: 75%;
+
        padding:0 16px;
-
}
+
    }
-
.pika-thumbs {
+
    .pika-thumbs li {
-
    height:75px;
+
        width:144px;
-
    padding:0 16px;
+
        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 {
+
    .pika-thumbs li .clip {
-
    width:144px;
+
        position:relative;
-
    height:74px;
+
        height:100%;
-
    overflow:hidden;
+
        text-align:center;
-
    float:left;
+
        vertical-align:middle;
-
    list-style-type:none;
+
        overflow:hidden;
-
    background:#fafafa;
+
     }
-
     border:1px solid #e5e5e5;
+
-
    cursor:pointer;
+
-
    margin:0 5px;
+
-
    padding:3px;
+
-
}
+
-
.pika-thumbs li .clip {
+
    .pika-stage {
-
    position:relative;
+
        position:relative;
-
    height:100%;
+
        background:#fafafa;
-
    text-align:center;
+
        border:1px solid #e5e5e5;
-
    vertical-align:middle;
+
        text-align:center;
-
    overflow:hidden;
+
        margin:0 auto;
-
}
+
        padding:10px 10px 40px;
 +
    }
-
.pika-stage {
+
    .pika-stage img {
-
    position:relative;
+
        height:100%;
-
     background:#fafafa;
+
     }
-
    border:1px solid #e5e5e5;
+
-
    text-align:center;
+
-
    margin:0 auto;
+
-
    padding:10px 10px 40px;
+
-
}
+
-
.pika-stage img {
+
    .pika-stage .caption {
-
     height:100%;
+
        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-stage .caption {
+
    .pika-imgnav a {
-
    position:absolute;
+
        position:absolute;
-
    background:rgba(0,0,0,0.75);
+
        text-indent:-5000px;
-
    border:1px solid #141414;
+
        display:block;
-
    color:#fafafa;
+
        z-index:3;
-
    text-align:right;
+
     }
-
    bottom:50px;
+
-
    right:10px;
+
-
    padding:10px;
+
-
}
+
-
.pika-stage .caption p {
+
-
    line-height:14px;
+
-
     margin:0;
+
-
    padding:0;
+
-
}
+
-
.pika-imgnav a {
+
    .pika-imgnav a.previous {
-
    position:absolute;
+
        background:url(https://static.igem.org/mediawiki/2014hs/3/39/Prev1.png) no-repeat left 45%;
-
    text-indent:-5000px;
+
        height:100%;
-
    display:block;
+
        width:50px;
-
    z-index:3;
+
        top:50px;
-
}
+
        left:0;
 +
        cursor:pointer;
 +
    }
-
.pika-imgnav a.previous {
+
    .pika-imgnav a.next {
-
    background:url(https://static.igem.org/mediawiki/2014hs/3/39/Prev1.png) no-repeat left 45%;
+
        background:url(https://static.igem.org/mediawiki/2014hs/a/a1/Next1.png) no-repeat right 45%;
-
    height:100%;
+
        height:100%;
-
    width:50px;
+
        width:50px;
-
    top:50px;
+
        top:50px;
-
    left:0;
+
        right:0;
-
    cursor:pointer;
+
        cursor:pointer;
-
}
+
    }
-
.pika-imgnav a.next {
 
-
    background:url(https://static.igem.org/mediawiki/2014hs/a/a1/Next1.png) no-repeat right 45%;
 
-
    height:100%;
 
-
    width:50px;
 
-
    top:50px;
 
-
    right:0;
 
-
    cursor:pointer;
 
-
}
 
 +
    .pika-imgnav a.play {
 +
        background:url(https://static.igem.org/mediawiki/2014hs/3/3c/Play1.png) no-repeat 0 50%;
 +
        height:100px;
 +
        width:44px;
 +
        top:0;
 +
        left:50%;
 +
        display:none;
 +
        cursor:pointer;
 +
    }
-
.pika-imgnav a.play {
+
    .pika-imgnav a.pause {
-
    background:url(https://static.igem.org/mediawiki/2014hs/3/3c/Play1.png) no-repeat 0 50%;
+
        background:url(https://static.igem.org/mediawiki/2014hs/4/47/Pause.png) no-repeat 0 50%;
-
    height:100px;
+
        height:100px;
-
    width:44px;
+
        width:44px;
-
    top:0;
+
        top:0;
-
    left:50%;
+
        left:50%;
-
    display:none;
+
        display:none;
-
    cursor:pointer;
+
        cursor:pointer;
-
}
+
    }
-
.pika-imgnav a.pause {
+
    .pika-textnav {
-
    background:url(https://static.igem.org/mediawiki/2014hs/4/47/Pause.png) no-repeat 0 50%;
+
        overflow:hidden;
-
    height:100px;
+
        bottom:2px;
-
    width:44px;
+
        position:absolute;
-
    top:0;
+
        width:100%;
-
    left:50%;
+
        margin:10px 0 0;
-
    display:none;
+
     }
-
     cursor:pointer;
+
-
}
+
-
.pika-textnav {
+
    .pika-textnav a {
-
    overflow:hidden;
+
        font-size:12px;
-
    bottom:2px;
+
        text-decoration:none;
-
    position:absolute;
+
        color:#333;
-
    width:100%;
+
        padding:4px;
-
     margin:10px 0 0;
+
     }
-
}
+
-
.pika-textnav a {
+
    .pika-textnav a.previous {
-
    font-size:12px;
+
        float:left;
-
    text-decoration:none;
+
        width:auto;
-
    color:#333;
+
        display:block;
-
     padding:4px;
+
     }
-
}
+
-
.pika-textnav a.previous {
+
    .pika-textnav a.next {
-
    float:left;
+
        float:right;
-
    width:auto;
+
        width:auto;
-
    display:block;
+
        display:block;
-
}
+
        margin-right:20px;
 +
    }
-
.pika-textnav a.next {
+
    .pika-tooltip {
-
    float:right;
+
        font-size:12px;
-
    width:auto;
+
        position:absolute;
-
    display:block;
+
        color:#FFF;
-
    margin-right:20px;
+
        background-color:rgba(0,0,0,0.7);
-
}
+
        border:3px solid #000;
 +
        padding:3px;
 +
    }
-
.pika-tooltip {
+
    .pika-counter {
-
    font-size:12px;
+
        position:absolute;
-
    position:absolute;
+
        bottom:45px;
-
    color:#FFF;
+
        left:15px;
-
    background-color:rgba(0,0,0,0.7);
+
        color:#FFF;
-
    border:3px solid #000;
+
        background:rgba(0,0,0,0.7);
-
    padding:3px;
+
        font-size:11px;
-
}
+
        -moz-border-radius:5px;
 +
        border-radius:5px;
 +
        padding:3px;
 +
    }
-
.pika-counter {
+
    .pika-loader {
-
    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:url(loading.gif) 3px 3px no-repeat #000;
+
        background-color:rgba(0,0,0,0.9);
-
    background-color:rgba(0,0,0,0.9);
+
        color:#FFF;
-
    color:#FFF;
+
        width:60px;
-
    width:60px;
+
        font-size:11px;
-
    font-size:11px;
+
        text-align:right;
-
    text-align:right;
+
        position:absolute;
-
    position:absolute;
+
        top:15px;
-
    top:15px;
+
        right:15px;
-
    right:15px;
+
        padding:5px 3px;
-
     padding:5px 3px;
+
     }
-
}
 
 +
    .slider img {
-
.slider img {
+
        width:auto;
-
     width:auto;
+
     }
-
}
 
 +
    .slider .clip img {
-
.slider .clip img {
+
        position:relative;
-
    position:relative;
+
        bottom:40%;
-
     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;}
-
.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 {
-
/* FOOTER                              */
+
        border-top: 1px solid rgb(175, 175, 175);
-
/***************************************/
+
        margin-top: 2em;
 +
        padding: 1em;
 +
    }
-
#footer {
+
    #footer li {
-
    border-top: 1px solid rgb(175, 175, 175);
+
        display: inline-block;
-
    margin-top: 2em;
+
        margin: 0;
-
     padding: 1em;
+
     }
-
}
+
-
#footer li {
+
    #footer-links {
-
    display: inline-block;
+
        text-align: center;
-
     margin: 0;
+
     }
-
}
+
-
#footer-links {
+
    #footer-text {
-
    text-align: center;
+
        color: #777;
-
}
+
        font-size: 0.8em;
 +
        margin: 0.75em 0;
 +
        text-align: center;
 +
    }
-
#footer-text {
+
    #footer-links-2 ul {
-
    color: #777;
+
        margin: 0.75em 0 0.25em;
-
    font-size: 0.8em;
+
        padding: 0;
-
    margin: 0.75em 0;
+
    }
-
    text-align: center;
+
-
}
+
-
#footer-links-2 ul {
+
    #footer-links-2 ul li {
-
    margin: 0.75em 0 0.25em;
+
        display: inline;
-
    padding: 0;
+
        list-style: none;
-
}
+
        padding-right: 1em;
 +
    }
-
#footer-links-2 ul li {
+
    #footer-links-2 ul li:last-child {
-
    display: inline;
+
        padding-right: 0;
-
    list-style: none;
+
    }
-
    padding-right: 1em;
+
-
}
+
-
#footer-links-2 ul li:last-child {
+
    #footer-links-2 ul li a {
-
    padding-right: 0;
+
        font-size: 0.9em;
-
}
+
        color: #777;
 +
        text-decoration: none;
 +
    }
-
#footer-links-2 ul li a {
+
     /***************************************/
-
     font-size: 0.9em;
+
     /* TOC                                */
-
     color: #777;
+
     /***************************************/
-
     text-decoration: none;
+
-
}
+
-
/***************************************/
+
    #jqtoc {
-
/* TOC                                */
+
        background: #3A3A3A;
-
/***************************************/
+
        color: #fff;
 +
        font-size: 12px;
 +
        font-family: 'Open Sans', sans-serif;
 +
        position: absolute;
 +
        top: 0;
 +
        bottom: 0; 
 +
        width: 150px;
 +
        right: 0;
 +
    }
-
#jqtoc {
+
    #jqtoc ul {
-
    background: #3A3A3A;
+
        box-sizing: border-box;
-
    color: #fff;
+
        list-style: none;
-
    font-size: 12px;
+
        margin: 0;
-
    font-family: 'Open Sans', sans-serif;
+
        padding: 1em 0 0;
-
    position: absolute;
+
        width: 150px;
-
    top: 0;
+
     }
-
    bottom: 0;
+
-
    width: 150px;
+
-
     right: 0;
+
-
}
+
-
#jqtoc ul {
+
    #jqtoc li {
-
    box-sizing: border-box;
+
        box-sizing: border-box;
-
    list-style: none;
+
        letter-spacing: initial;
-
    margin: 0;
+
        padding: 5px 10px;
-
    padding: 1em 0 0;
+
        width: 100%;
-
    width: 150px;
+
    }
-
}
+
-
#jqtoc li {
+
    #jqtoc a {
-
    box-sizing: border-box;
+
        color: #fff;
-
    letter-spacing: initial;
+
        text-decoration: none;
-
    padding: 5px 10px;
+
        display: block;
-
     width: 100%;
+
     }
-
}
+
-
#jqtoc a {
+
    #jqtoc .toc-h1 {
-
    color: #fff;
+
        background-color: rgb(70, 70, 70);
-
     text-decoration: none;
+
     }
-
    display: block;
+
-
}
+
-
#jqtoc .toc-h1 {
+
    #jqtoc .toc-h2 {
-
    background-color: rgb(70, 70, 70);
+
        padding-left: 10px;
-
}
+
    }
-
#jqtoc .toc-h2 {
+
    #jqtoc .toc-h3 {
-
    padding-left: 10px;
+
        padding-left: 20px;
-
}
+
    }
-
#jqtoc .toc-h3 {
+
    #jqtoc .toc-active {
-
    padding-left: 20px;
+
        background: rgb(0, 75, 15);
-
}
+
    }
-
#jqtoc .toc-active {
+
    .with-toc #inner-content {
-
    background: rgb(0, 75, 15);
+
        padding-right: 215px;
-
}
+
    }
-
.with-toc #inner-content {
+
    .sticky {  
-
    padding-right: 195px;
+
        float: none;
-
}
+
        position: fixed;
 +
        z-index: 6;  
 +
        left: auto;
 +
    }
-
.sticky {
+
     #scrolltop {
-
     float: none;
+
        background-color: rgb(41, 99, 41);;
-
    position: fixed;
+
        position: fixed;  
-
    z-index: 6;
+
        right: 5%;
-
    left: auto;
+
        color: white;
-
}
+
        bottom: 0px;
-
 
+
        font-size: 2.25em;
-
#scrolltop {
+
        width: 1em;
-
    background-color: rgb(41, 99, 41);;
+
        text-align: center;
-
    position: fixed;  
+
        border-radius: 5px 5px 0 0;
-
    right: 5%;
+
        height: 1em;
-
    color: white;
+
        line-height: 1.2;
-
    bottom: 0px;
+
        padding: 0.1em 0.25em 0.25em 0.2em;
-
    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;
+
-
}
+

Revision as of 01:21, 21 June 2014

   /* 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;
   }
Retrieved from "http://2014hs.igem.org/Template:Montgomery_Cougars_NJUSA/Common_CSS"