Template:Montgomery Cougars NJUSA/Common JS

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#Remove_all_empty_.3Cp.3E.3C.2Fp.3E_tags */
 
-
$(document).ready(function() {
 
-
    $("p").filter( function() {
 
-
        return $.trim($(this).html()) == '';
 
-
    }).remove();
 
-
    $("br:only-child").remove();
 
-
    $('#slider').unslider({
 
-
        delay: 3250,
 
-
        fluid: true
 
-
    });
 
-
    if($('#toc').length != 0) {
+
/***************************************/
-
        var visible = false;
+
/* WIKI RESET                          */
 +
/***************************************/
-
        $('#toc').remove();
+
body.mediawiki {
-
        $('body').addClass('with-toc');
+
    margin-top: -1.25em;
 +
}
-
        var $jqtoc = $('<div id="jqtoc"></div>')
+
#contentSub,
-
        .prependTo('#main-wrapper')
+
#search-controls,
-
        .toc({
+
.firstHeading,
-
            container: '#inner-content',
+
#footer-box,
-
            headerText: function(i, heading, $heading) { // remove [edit] link
+
#catlinks,
-
                return $heading.text().replace(/\[edit\]/g, '');  
+
#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;
 +
}
-
        if (!window.location.hash) {
 
-
            $jqtoc.children('ul').fadeOut(0);
 
-
        }
 
 +
/* CUSTOM STYLES */
-
        $('#header').onScreen({
+
#content {
-
            doOut: function() {
+
    width: 100%;
-
                $jqtoc.children('ul').fadeIn();
+
    padding: 0;
-
            }
+
}
-
        });
+
-
    }
+
-
});
+
.container {
 +
    width: 70%;
 +
    max-width: 1100px;
 +
    margin: 0 auto;
 +
}
-
/*!
+
p {
-
* toc - jQuery Table of Contents Plugin
+
    line-height: 1.5;
-
* v0.3.2
+
}
-
* http://projects.jga.me/toc/
+
-
* copyright Greg Allen 2014
+
-
* MIT License
+
-
*/
+
-
!function(a){a.fn.smoothScroller=function(b){b=a.extend({},a.fn.smoothScroller.defaults,b);var c=a(this);return a(b.scrollEl).animate({scrollTop:c.offset().top-a(b.scrollEl).offset().top-b.offset},b.speed,b.ease,function(){var a=c.attr("id");a.length&&(history.pushState?history.pushState(null,null,"#"+a):document.location.hash=a),c.trigger("smoothScrollerComplete")}),this},a.fn.smoothScroller.defaults={speed:400,ease:"swing",scrollEl:"body,html",offset:0},a("body").on("click","[data-smoothscroller]",function(b){b.preventDefault();var c=a(this).attr("href");0===c.indexOf("#")&&a(c).smoothScroller()})}(jQuery),function(a){var b={};a.fn.toc=function(b){var c,d=this,e=a.extend({},jQuery.fn.toc.defaults,b),f=a(e.container),g=a(e.selectors,f),h=[],i=e.activeClass,j=function(b,c){if(e.smoothScrolling&&"function"==typeof e.smoothScrolling){b.preventDefault();var f=a(b.target).attr("href");e.smoothScrolling(f,e,c)}a("li",d).removeClass(i),a(b.target).parent().addClass(i)},k=function(){c&&clearTimeout(c),c=setTimeout(function(){for(var b,c=a(window).scrollTop(),f=Number.MAX_VALUE,g=0,j=0,k=h.length;k>j;j++){var l=Math.abs(h[j]-c);f>l&&(g=j,f=l)}a("li",d).removeClass(i),b=a("li:eq("+g+")",d).addClass(i),e.onHighlight(b)},50)};return e.highlightOnScroll&&(a(window).bind("scroll",k),k()),this.each(function(){var b=a(this),c=a(e.listType);g.each(function(d,f){var g=a(f);h.push(g.offset().top-e.highlightOffset);var i=e.anchorName(d,f,e.prefix);if(f.id!==i){a("<span/>").attr("id",i).insertBefore(g)}var l=a("<a/>").text(e.headerText(d,f,g)).attr("href","#"+i).bind("click",function(c){a(window).unbind("scroll",k),j(c,function(){a(window).bind("scroll",k)}),b.trigger("selected",a(this).attr("href"))}),m=a("<li/>").addClass(e.itemClass(d,f,g,e.prefix)).append(l);c.append(m)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",listType:"<ul/>",selectors:"h1,h2,h3",smoothScrolling:function(b,c,d){a(b).smoothScroller({offset:c.scrollToOffset}).on("smoothScrollerComplete",function(){d()})},scrollToOffset:0,prefix:"toc",activeClass:"toc-active",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(c,d,e){if(d.id.length)return d.id;var f=a(d).text().replace(/[^a-z0-9]/gi," ").replace(/\s+/g,"-").toLowerCase();if(b[f]){for(var g=2;b[f+g];)g++;f=f+"-"+g}return b[f]=!0,e+"-"+f},headerText:function(a,b,c){return c.text()},itemClass:function(a,b,c,d){return d+"-"+c[0].tagName.toLowerCase()}}}(jQuery);
+
-
/* http://silvestreh.github.io/onScreen/ */
+
/***************************************/
-
(function($){$.fn.onScreen=function(options){var params=$.extend({container:window,direction:'vertical',toggleClass:null,doIn:null,doOut:null,tolerance:0,throttle:null,lazyAttr:null,lazyPlaceholder:'data:image/gif;base64,R0lGODlhEAAFAIAAAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCQAAACwAAAAAEAAFAAACCIyPqcvtD00BACH5BAkJAAIALAAAAAAQAAUAgfT29Pz6/P///wAAAAIQTGCiywKPmjxUNhjtMlWrAgAh+QQJCQAFACwAAAAAEAAFAIK8urzc2tzEwsS8vrzc3tz///8AAAAAAAADFEiyUf6wCEBHvLPemIHdTzCMDegkACH5BAkJAAYALAAAAAAQAAUAgoSChLS2tIyKjLy+vIyOjMTCxP///wAAAAMUWCQ09jAaAiqQmFosdeXRUAkBCCUAIfkECQkACAAsAAAAABAABQCDvLq83N7c3Nrc9Pb0xMLE/P78vL68/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCEwkCnKGbegvQn4RjGMx8F1HxBi5Il4oEiap2DcVYlpZwQAIfkECQkACAAsAAAAABAABQCDvLq85OLkxMLE9Pb0vL685ObkxMbE/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCDwnCGHEcIMxPn4VAGMQNBx0zQEZHkiYNiap5RaBKG9EQAh+QQJCQAJACwAAAAAEAAFAIOEgoTMysyMjozs6uyUlpSMiozMzsyUkpTs7uz///8AAAAAAAAAAAAAAAAAAAAAAAAEGTBJiYgoBM09DfhAwHEeKI4dGKLTIHzCwEUAIfkECQkACAAsAAAAABAABQCDvLq85OLkxMLE9Pb0vL685ObkxMbE/Pr8////AAAAAAAAAAAAAAAAAAAAAAAAAAAABCAQSTmMEGaco8+UBSACwWBqHxKOJYd+q1iaXFoRRMbtEQAh+QQJCQAIACwAAAAAEAAFAIO8urzc3tzc2tz09vTEwsT8/vy8vrz8+vz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAEIhBJWc6wJZAtJh3gcRBAaXiIZV2kiRbgNZbA6VXiUAhGL0QAIfkECQkABgAsAAAAABAABQCChIKEtLa0jIqMvL68jI6MxMLE////AAAAAxRoumxFgoxGCbiANos145e3DJcQJAAh+QQJCQAFACwAAAAAEAAFAIK8urzc2tzEwsS8vrzc3tz///8AAAAAAAADFFi6XCQwtCmAHbPVm9kGWKcEQxkkACH5BAkJAAIALAAAAAAQAAUAgfT29Pz6/P///wAAAAIRlI8SAZsPYnuJMUCRnNksWwAAOw==',debug:false},options);return this.each(function(){var isOnScreen=false;var scrollTop;var scrollLeft;var $el=$(this);var $container;var containerHeight;var containerWidth;var containerBottom;var containerRight;var elHeight;var elWidth;var elTop;var elLeft;var containerIsWindow=$.isWindow(params.container);function verticalIn(){if(containerIsWindow){return elTop<containerBottom-params.tolerance&&scrollTop<(elTop+elHeight)-params.tolerance;}else{return elTop<containerHeight-params.tolerance&&elTop>(-elHeight)+params.tolerance;}}function verticalOut(){if(containerIsWindow){return elTop+(elHeight-params.tolerance)<scrollTop||elTop>containerBottom-params.tolerance;}else{return elTop>containerHeight-params.tolerance||-elHeight+params.tolerance>elTop;}}function horizontalIn(){if(containerIsWindow){return elLeft<containerRight-params.tolerance&&scrollLeft<(elLeft+elWidth)-params.tolerance;}else{return elLeft<containerWidth-params.tolerance&&elLeft>(-elWidth)+params.tolerance;}}function horizontalOut(){if(containerIsWindow){return elLeft+(elWidth-params.tolerance)<scrollLeft||elLeft>containerRight-params.tolerance;}else{return elLeft>containerWidth-params.tolerance||-elWidth+params.tolerance>elLeft;}}function directionIn(){if(isOnScreen){return false;}if(params.direction==='horizontal'){return horizontalIn();}else{return verticalIn();}}function directionOut(){if(!isOnScreen){return false;}if(params.direction==='horizontal'){return horizontalOut();}else{return verticalOut();}}function throttle(fn,timeout,ctx){var timer,args,needInvoke;return function(){args=arguments;needInvoke=true;ctx=ctx||this;if(!timer){(function(){if(needInvoke){fn.apply(ctx,args);needInvoke=false;timer=setTimeout(arguments.callee,timeout);}else{timer=null;}})();}};}var checkPos=function(){if(!containerIsWindow&&$(params.container).css('position')==='static'){$(params.container).css('position','relative');}$container=$(params.container);containerHeight=$container.height();containerWidth=$container.width();containerBottom=$container.scrollTop()+containerHeight;containerRight=$container.scrollLeft()+containerWidth;elHeight=$el.outerHeight(true);elWidth=$el.outerWidth(true);if(containerIsWindow){var offset=$el.offset();elTop=offset.top;elLeft=offset.left;}else{var position=$el.position();elTop=position.top;elLeft=position.left;}scrollTop=$container.scrollTop();scrollLeft=$container.scrollLeft();if(params.debug){console.log('Container: '+params.container+'\n'+'Width: '+containerHeight+'\n'+'Height: '+containerWidth+'\n'+'Bottom: '+containerBottom+'\n'+'Right: '+containerRight);console.log('Matched element: '+($el.attr('class')!==undefined?$el.prop('tagName').toLowerCase()+'.'+$el.attr('class'):$el.prop('tagName').toLowerCase())+'\n'+'Left: '+elLeft+'\n'+'Top: '+elTop+'\n'+'Width: '+elWidth+'\n'+'Height: '+elHeight);}if(directionIn()){if(params.toggleClass){$el.addClass(params.toggleClass);}if($.isFunction(params.doIn)){params.doIn.call($el[0]);}if(params.lazyAttr&&$el.prop('tagName')==='IMG'){var lazyImg=$el.attr(params.lazyAttr);$el.css({background:'url('+params.lazyPlaceholder+') 50% 50% no-repeat',minHeight:'5px',minWidth:'16px'});$el.prop('src',lazyImg);}isOnScreen=true;}else if(directionOut()){if(params.toggleClass){$el.removeClass(params.toggleClass);}if($.isFunction(params.doOut)){params.doOut.call($el[0]);}isOnScreen=false;}};if(window.location.hash){throttle(checkPos,50);}else{checkPos();}if(params.throttle){checkPos=throttle(checkPos,params.throttle);}$(params.container).on('scroll resize',checkPos);if(!containerIsWindow){$(window).on('resize',checkPos);}if(typeof module==='object'&&module&&typeof module.exports==='object'){module.exports=jQuery;}else{if(typeof define==='function'&&define.amd){define('jquery-onscreen',[],function(){return jQuery;});}}});};})(jQuery);
+
/* RANDOM                              */
 +
/***************************************/
 +
 
 +
body {
 +
    min-width: 1200px;
 +
}
 +
 
 +
/* 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;
 +
}
 +
 
 +
 
 +
/***************************************/
 +
/* FONT TWEAKS                        */
 +
/***************************************/
 +
 
 +
body {
 +
    font-size: 12px;
 +
}
 +
 
 +
p {
 +
    font-size: 14px;
 +
}
 +
 
 +
body, p, span, blockquote, article, section, aside, nav {
 +
    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.25em;
 +
}
 +
 
 +
p {
 +
    line-height: 1.5;
 +
}
 +
/***************************************/
 +
/* 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;
 +
    width: 70%;
 +
}
 +
 
 +
#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 li a:hover {
 +
background: rgb(50, 50, 50);
 +
}
 +
 
 +
/***************************************/
 +
/* GALLERY                            */
 +
/***************************************/
 +
 
 +
#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;  
 +
    /*margin-top: -1em;*/
 +
}
 +
 
 +
#slider ul li a {
 +
    display: block;
 +
}
 +
 
 +
#slider img {
 +
    width: 100%;
 +
}
 +
 
 +
#slider .caption {
 +
    background-color: rgba(0,10,5,.8);
 +
    padding: 1.5em 1em;
 +
    position: absolute;
 +
    bottom: 0;
 +
    text-align: center;
 +
    width: 100%;
 +
    color: white;
 +
}
 +
 
 +
#slider .caption h2 {
 +
    color: white;
 +
    border-bottom: none;
 +
    font-size: 3em;
 +
    font-weight: 300;
 +
    margin: 0.25em 0 0.75em;
 +
    padding: 0;
 +
}
 +
 
 +
#slider .caption span {
 +
    color: white;
 +
    font-size: 1.25em;
 +
    font-weight: 300;
 +
    margin: 0;
 +
}
 +
 
 +
/***************************************/
 +
/* LEFT LINKS                          */
 +
/***************************************/
 +
 
 +
#left-links-wrapper {
 +
    font-size: 12px;
 +
    padding-right: 15px;
 +
    box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
}
 +
 
 +
#left-links {
 +
}
 +
 
 +
#left-links h1,
 +
#left-links ul li a {
 +
    color: rgb(245, 245, 245);
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-decoration: none;
 +
}
 +
 
 +
#left-links h1 {
 +
    background-color: rgba(0, 102, 0, 1);
 +
    font-size: 2.5em;
 +
    font-weight: 300;
 +
    float: left;
 +
    line-height: 1.15;
 +
    margin: 0 0 -1px;
 +
    min-width: 75%;
 +
    max-width: 95%;
 +
    padding: 10px;
 +
}
 +
 
 +
 
 +
#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 {
 +
    display: block;
 +
    float: left;
 +
    min-width: 50%;
 +
    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;
 +
}
 +
 
 +
#left-links ul li a:hover {
 +
    background-color: rgb(50,50,50);
 +
}
 +
 
 +
#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);
 +
}
 +
 
 +
/***************************************/
 +
/* CONTENT                            */
 +
/***************************************/
 +
 
 +
#main-wrapper {
 +
    max-width: 1400px;
 +
    margin: 0 auto;
 +
}
 +
 
 +
#inner-content {
 +
    box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    padding-right: 3em;
 +
}
 +
 
 +
#innercontent h1:first-child {
 +
    margin: 0.3em 0 0.25em;
 +
}
 +
 
 +
h1 .editsection, h1 .editsection a {
 +
    font-size: 16px;
 +
}
 +
 
 +
.toc {
 +
    float: right;
 +
    margin: 3em 0 2em 2em;
 +
}
 +
 
 +
/***************************************/
 +
/* FOOTER                              */
 +
/***************************************/
 +
 
 +
#footer {
 +
    margin-top: 2em;
 +
}
 +
 
 +
#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;
 +
    height: 100%;
 +
    padding-top: 25%;
 +
    position: fixed;
 +
    bottom: 0;
 +
    right: 0;
 +
    width: 150px;
 +
}
 +
 
 +
#jqtoc ul {
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0 0 3em;
 +
    position: absolute;
 +
    top: 50%;
 +
}
 +
 
 +
#jqtoc li {
 +
    padding: 5px 10px;
 +
}
 +
 
 +
#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: 175px;
 +
}

Revision as of 18:19, 14 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.25em;

}

  1. contentSub,
  2. search-controls,

.firstHeading,

  1. footer-box,
  2. catlinks,
  3. p-logo { 
   display:none;

}

  1. top-section { 
   border: none;
   height: 0px;

}

  1. content { 
   border: none;

}

  1. menubar > ul > li:last-child { 
   display: none;

}

  1. menubar { 
   width: auto;

}

  1. menubar ul { 
   margin-bottom: 0.5em;

}


/* CUSTOM STYLES */

  1. content { 
   width: 100%;
   padding: 0;

}

.container { 

   width: 70%;
   max-width: 1100px;
   margin: 0 auto;

}

p { 

   line-height: 1.5;

}

/***************************************/ /* RANDOM */ /***************************************/

body { 

   min-width: 1200px;

}

/* 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;

}


/***************************************/ /* FONT TWEAKS */ /***************************************/

body { 

   font-size: 12px;

}

p { 

   font-size: 14px;

}

body, p, span, blockquote, article, section, aside, nav { 

   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.25em;

}

p { 

   line-height: 1.5;

} /***************************************/ /* HEADER */ /***************************************/

  1. header-wrapper { 
   position: relative; /* create new stacking context to keep logo on top */
   z-index: 100;

}

  1. header { 
   background-color: rgb(38, 38, 38);
   border-bottom: solid 0.75em rgb(0, 102, 0);
   height: 7.5em;

}

  1. logo { 
   margin-left: 20px;

}

  1. logo span { 
   display: none;

}

  1. logo img { 
   /*max-width: 275px;*/
   position: absolute;
   width: 250px;

}

  1. nav { 
   background: none;
   max-width: 1400px;
   margin: 0 auto;
   position: relative;

}

  1. nav ul { 
   position: absolute;
   left: 320px;
   top: 4.25em;
   width: 70%;

}

  1. 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;

}

  1. nav li a:hover { 
background: rgb(50, 50, 50);

}

/***************************************/ /* GALLERY */ /***************************************/

  1. gallery { 
   position: relative;

}

  1. slider { 
   margin-right: 0;
   margin-bottom: 0;
   position: relative; 
   overflow: auto; 
   width: 100%;

}

  1. slider ul { 
   margin-top: 0;
   padding-left: 0;

}

  1. slider li { 
   list-style: none; 
   position: relative;

}

  1. slider ul li { 
   float: left; 
   /*margin-top: -1em;*/

}

  1. slider ul li a { 
   display: block;

}

  1. slider img { 
   width: 100%;

}

  1. slider .caption { 
   background-color: rgba(0,10,5,.8);
   padding: 1.5em 1em;
   position: absolute;
   bottom: 0;
   text-align: center;
   width: 100%;
   color: white;

}

  1. slider .caption h2 { 
   color: white;
   border-bottom: none;
   font-size: 3em;
   font-weight: 300;
   margin: 0.25em 0 0.75em;
   padding: 0;

}

  1. slider .caption span { 
   color: white;
   font-size: 1.25em;
   font-weight: 300;
   margin: 0;

}

/***************************************/ /* LEFT LINKS */ /***************************************/

  1. left-links-wrapper { 
   font-size: 12px;
   padding-right: 15px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;

}

  1. left-links {

}

  1. left-links h1,
  2. left-links ul li a { 
   color: rgb(245, 245, 245);
   font-family: 'Open Sans', sans-serif;
   text-decoration: none;

}

  1. left-links h1 { 
   background-color: rgba(0, 102, 0, 1);
   font-size: 2.5em;
   font-weight: 300;
   float: left;
   line-height: 1.15;
   margin: 0 0 -1px;
   min-width: 75%;
   max-width: 95%;
   padding: 10px;

}


  1. left-links ul { 
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;

}

  1. left-links ul li { 
   display: block;
   font-size: 1.5em;
   font-weight: 300;
   margin-bottom: 0;
   width: 100%;

}

  1. left-links ul li a { 
   display: block;
   float: left;
   min-width: 50%;
   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;

}

  1. left-links ul li a:hover { 
   background-color: rgb(50,50,50);

}

  1. left-links ul > :nth-child(1) > a { 
   background-color: rgba(0, 102, 0, 0.95);

}

  1. left-links ul > :nth-child(2) > a { 
   background-color: rgba(0, 102, 0, 0.91);

}

  1. left-links ul > :nth-child(3) > a { 
   background-color: rgba(0, 102, 0, .87);

}

  1. left-links ul > :nth-child(4) > a { 
   background-color: rgba(0, 102, 0, 0.83);

}

  1. left-links ul > :nth-child(5) > a { 
   background-color: rgba(0, 102, 0, 0.79);

}

  1. left-links ul > :nth-child(6) > a { 
   background-color: rgba(0, 102, 0, 0.75);

}

  1. left-links ul > :nth-child(7) > a { 
   background-color: rgba(0, 102, 0, 0.71);

}

  1. left-links ul > :nth-child(8) > a { 
   background-color: rgba(0, 102, 0, 0.67);

}

  1. left #left-links-title { 
   background-color: rgba(0, 102, 0, 1);
   color: rgb(240, 240, 240);

}

/***************************************/ /* CONTENT */ /***************************************/

  1. main-wrapper { 
   max-width: 1400px;
   margin: 0 auto;

}

  1. inner-content { 
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   padding-right: 3em;

}

  1. innercontent h1:first-child { 
   margin: 0.3em 0 0.25em;

}

h1 .editsection, h1 .editsection a { 

   font-size: 16px;

}

.toc { 

   float: right;
   margin: 3em 0 2em 2em;

}

/***************************************/ /* FOOTER */ /***************************************/

  1. footer { 
   margin-top: 2em;

}

  1. footer li { 
   display: inline-block;
   margin: 0;

}

  1. footer-links { 
   text-align: center;

}

  1. footer-text { 
   color: #777;
   font-size: 0.8em;
   margin: 0.75em 0;
   text-align: center;

}

  1. footer-links-2 ul { 
   margin: 0.75em 0 0.25em;
   padding: 0;

}

  1. footer-links-2 ul li { 
   display: inline;
   list-style: none;
   padding-right: 1em;

}

  1. footer-links-2 ul li:last-child { 
   padding-right: 0;

}

  1. footer-links-2 ul li a { 
   font-size: 0.9em;
   color: #777;
   text-decoration: none;

}

/***************************************/ /* TOC */ /***************************************/

  1. jqtoc { 
   background: #3A3A3A;
   color: #fff;
   font-size: 12px;
   height: 100%;
   padding-top: 25%;
   position: fixed;
   bottom: 0;
   right: 0;
   width: 150px;

}

  1. jqtoc ul { 
   list-style: none;
   margin: 0;
   padding: 0 0 3em;
   position: absolute;
   top: 50%;

}

  1. jqtoc li { 
   padding: 5px 10px;

}

  1. jqtoc a { 
   color: #fff;
   text-decoration: none;
   display: block;

}

  1. jqtoc .toc-h1 { 
   background-color: rgb(70, 70, 70);

}

  1. jqtoc .toc-h2 { 
   padding-left: 10px;

}

  1. jqtoc .toc-h3 { 
   padding-left: 20px;

}

  1. jqtoc .toc-active { 
   background: rgb(0, 75, 15);

}

.with-toc #inner-content { 

   padding-right: 175px;

}

Retrieved from "http://2014hs.igem.org/Template:Montgomery_Cougars_NJUSA/Common_JS"