Team:NTU-Taida/Templates/CSS/ntu-taida-wiki

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* Remove MediaWiki Annoyances */
+
#contentSub,#search-controls,.firstHeading,#footer-box,#catlinks,#p-logo,#toctitle,#top-section{display:none}#globalWrapper{font-size:100%;padding-bottom:0}#content{width:100%;margin:0;padding:0;border:0}body,html{margin:0}#bodyContent{border:0;margin:0;padding:0;width:100%}h1,h2,h3,h4,h5,h6{border:0;height:100%;margin:0;padding:0;width:100%;margin-bottom:10px}#bodyContent h1,#bodyContent h2,#bodyContent h3,#bodyContent h4,#bodyContent h5,#bodyContent h6{margin-bottom:10px}#bodyContent li{margin-bottom:0}#bodyContent{position:relative;padding-top:40px}.marketing{text-align:center;color:#5a5a5a}.marketing h1{margin:30px 0 10px;font-size:60px;font-weight:200;line-height:1;letter-spacing:-1px}.marketing h2{font-weight:200;margin-bottom:5px}.marketing p{font-size:16px;line-height:1.5}.marketing>.row-fluid p{padding-bottom:60px}.marketing .marketing-byline{margin-bottom:40px;font-size:20px;font-weight:300;line-height:25px;color:#999}.marketing img{display:block;margin:0 auto 30px}.jumbotron{height:150px;width:100%;background:url(https://static.igem.org/mediawiki/2012/0/0c/NTU-Taida-header-2012.jpg) no-repeat center center;opacity:.4;background-size:100%}section{padding-top:60px}body{padding-top:60px;padding-bottom:40px}.span3{min-height:100px}.row-logo{text-align:center;padding-bottom:20px}.my-sidebar-nav{width:228px;margin:30px 0 0;padding:0}.my-sidebar-nav.affix{top:60px}.my-sidebar-nav.affix-top{position:absolute;top:60px}.my-sidebar-nav.affix-bottom{position:absolute;top:auto;bottom:0}ul.sub-navlist{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.065);-moz-box-shadow:0 1px 4px rgba(0,0,0,.065);box-shadow:0 1px 4px rgba(0,0,0,.065)}.nav-header{*width:190px;margin:0 0 -1px;padding:8px 14px;border:1px solid #e5e5e5}.dropdown-menu>.nav-header{border:0}.sub-navlist>li>a{display:block;*width:190px;margin:0 0 -1px;padding:8px 14px;border:1px solid #e5e5e5}.sub-navlist>ul{margin-bottom:0 px}.sub-navlist>li:first-child>a,.sub-navlist>.nav-header:first-child{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.sub-navlist>li:last-child>a{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.sub-navlist>.active>a{position:relative;z-index:2;padding:9px 15px;border:0;text-shadow:0 1px 0 rgba(0,0,0,.15);-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1)}.sub-navlist>.active>a,.sub-navlist>.active>a:hover{color:white;text-shadow:0 -1px 0 rgba(0,0,0,0.2);background-color:#08C}@media(max-width:980px){.my-sidebar{width:70%;margin:0 auto}.my-sidebar-nav{width:auto;margin-bottom:20px}.my-sidebar-nav.affix,.my-sidebar-nav.affix-top{position:static;width:auto;top:0}.my-sidebar-nav.affix-bottom{position:absolute;top:auto;bottom:0}.row-logo{width:200px;margin:0 auto}}
-
/*-----------------------------*/
+
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo, #toctitle, #top-section
+
-
{
+
-
    display:none;
+
-
}
+
-
 
+
-
#globalWrapper {
+
-
    font-size:100%;
+
-
    padding-bottom: 0px;
+
-
}
+
-
 
+
-
#content {
+
-
  width:100%;
+
-
  margin:0px;
+
-
  padding:0px;
+
-
  border:none;
+
-
}
+
-
body, html
+
-
{
+
-
  margin: 0;
+
-
}
+
-
 
+
-
#bodyContent
+
-
{
+
-
  border: none;
+
-
  margin: 0;
+
-
  padding: 0;
+
-
  width: 100%;
+
-
}
+
-
 
+
-
h1, h2, h3, h4, h5, h6
+
-
{
+
-
  border: none;
+
-
  height: 100%;
+
-
  margin: 0;
+
-
  padding: 0;
+
-
  width: 100%;
+
-
  margin-bottom: 10px;
+
-
}
+
-
 
+
-
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6{
+
-
  margin-bottom: 10px;
+
-
}
+
-
 
+
-
#bodyContent li {
+
-
  margin-bottom: 0;
+
-
}
+
-
/* Self Custom CSS style */
+
-
#bodyContent {
+
-
    position: relative; /* To make the scrollspy works normally*/
+
-
    padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
+
-
}
+
-
 
+
-
/* Marketing section of Overview -------------------------------------------------- */
+
-
.marketing {
+
-
    text-align: center;
+
-
    color: #5a5a5a;
+
-
}
+
-
.marketing h1 {
+
-
    margin: 30px 0 10px;
+
-
    font-size: 60px;
+
-
    font-weight: 200;
+
-
    line-height: 1;
+
-
    letter-spacing: -1px;
+
-
}
+
-
.marketing h2 {
+
-
    font-weight: 200;
+
-
    margin-bottom: 5px;
+
-
}
+
-
.marketing p {
+
-
    font-size: 16px;
+
-
    line-height: 1.5;
+
-
}
+
-
.marketing > .row-fluid p{
+
-
    padding-bottom: 60px;
+
-
}
+
-
.marketing .marketing-byline {
+
-
    margin-bottom: 40px;
+
-
    font-size: 20px;
+
-
    font-weight: 300;
+
-
    line-height: 25px;
+
-
    color: #999;
+
-
}
+
-
.marketing img {
+
-
    display: block;
+
-
    margin: 0 auto 30px;
+
-
}
+
-
 
+
-
/* Jumbotron -------------------------------------------------- */
+
-
.jumbotron{
+
-
    height: 150px;
+
-
    width: 100%;
+
-
    background: url(https://static.igem.org/mediawiki/2012/0/0c/NTU-Taida-header-2012.jpg) no-repeat center center;  
+
-
    opacity: .4;
+
-
    /*background-color: pink;*/
+
-
    background-size: 100%;
+
-
    /*margin-bottom: 50px;*/
+
-
}
+
-
 
+
-
/* for navigaion */
+
-
section {
+
-
    padding-top: 60px;
+
-
}
+
-
 
+
-
body {
+
-
    padding-top: 60px;
+
-
    padding-bottom: 40px;
+
-
}
+
-
 
+
-
 
+
-
/* Sidebar -------------------------------------------------- */
+
-
.span3 {
+
-
    min-height: 100px;
+
-
}
+
-
.row-logo{
+
-
    text-align: center;
+
-
    /*margin: 0 auto;*/
+
-
    padding-bottom: 20px;
+
-
}
+
-
.my-sidebar-nav {
+
-
    width: 228px;
+
-
    margin: 30px 0 0;
+
-
    padding: 0;
+
-
}
+
-
.my-sidebar-nav.affix {
+
-
    top: 60px;
+
-
}
+
-
.my-sidebar-nav.affix-top {
+
-
    position: absolute;
+
-
    top: 60px;
+
-
}
+
-
.my-sidebar-nav.affix-bottom {
+
-
    position: absolute;
+
-
    top: auto;
+
-
    bottom: 0px;
+
-
}
+
-
 
+
-
ul.sub-navlist{
+
-
    -webkit-border-radius: 6px;
+
-
    -moz-border-radius: 6px;
+
-
    border-radius: 6px;
+
-
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+
-
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+
-
    box-shadow: 0 1px 4px rgba(0,0,0,.065);
+
-
 
+
-
}
+
-
.nav-header {
+
-
    *width: 190px;
+
-
    margin: 0 0 -1px;
+
-
    padding: 8px 14px;
+
-
    border: 1px solid #e5e5e5;
+
-
}
+
-
.dropdown-menu > .nav-header {
+
-
    border: none;
+
-
}
+
-
.sub-navlist > li > a {
+
-
    display: block;
+
-
    *width: 190px;
+
-
    margin: 0 0 -1px;
+
-
    padding: 8px 14px;
+
-
    border: 1px solid #e5e5e5;
+
-
}
+
-
.sub-navlist > ul {
+
-
    margin-bottom: 0 px;
+
-
}
+
-
.sub-navlist > li:first-child > a,
+
-
.sub-navlist > .nav-header:first-child {
+
-
    -webkit-border-radius: 6px 6px 0 0;
+
-
    -moz-border-radius: 6px 6px 0 0;
+
-
    border-radius: 6px 6px 0 0;
+
-
}
+
-
.sub-navlist > li:last-child > a {
+
-
    -webkit-border-radius: 0 0 6px 6px;
+
-
    -moz-border-radius: 0 0 6px 6px;
+
-
    border-radius: 0 0 6px 6px;
+
-
}
+
-
.sub-navlist > .active > a {
+
-
    position: relative;
+
-
    z-index: 2;
+
-
    padding: 9px 15px;
+
-
    border: 0;
+
-
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
+
-
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+
-
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+
-
    box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+
-
}
+
-
 
+
-
.sub-navlist > .active > a,
+
-
.sub-navlist > .active > a:hover{
+
-
    color: white;
+
-
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+
-
    background-color: #08C;
+
-
 
+
-
}
+
-
@media (max-width: 980px) {
+
-
    /* Sidenav */
+
-
    .my-sidebar{
+
-
        width: 70%;
+
-
        margin: 0 auto;
+
-
    }
+
-
    .my-sidebar-nav {
+
-
        width: auto;
+
-
        margin-bottom: 20px;
+
-
    }
+
-
    .my-sidebar-nav.affix, .my-sidebar-nav.affix-top{
+
-
        position: static;
+
-
        width: auto;
+
-
        top: 0;
+
-
    }
+
-
    .my-sidebar-nav.affix-bottom {
+
-
        position: absolute;
+
-
        top: auto;
+
-
        bottom: 0px;
+
-
    }
+
-
    .row-logo {
+
-
        width: 200px;
+
-
        margin:0 auto;
+
-
    }
+
-
}
+

Revision as of 11:31, 26 September 2012

  1. contentSub,#search-controls,.firstHeading,#footer-box,#catlinks,#p-logo,#toctitle,#top-section{display:none}#globalWrapper{font-size:100%;padding-bottom:0}#content{width:100%;margin:0;padding:0;border:0}body,html{margin:0}#bodyContent{border:0;margin:0;padding:0;width:100%}h1,h2,h3,h4,h5,h6{border:0;height:100%;margin:0;padding:0;width:100%;margin-bottom:10px}#bodyContent h1,#bodyContent h2,#bodyContent h3,#bodyContent h4,#bodyContent h5,#bodyContent h6{margin-bottom:10px}#bodyContent li{margin-bottom:0}#bodyContent{position:relative;padding-top:40px}.marketing{text-align:center;color:#5a5a5a}.marketing h1{margin:30px 0 10px;font-size:60px;font-weight:200;line-height:1;letter-spacing:-1px}.marketing h2{font-weight:200;margin-bottom:5px}.marketing p{font-size:16px;line-height:1.5}.marketing>.row-fluid p{padding-bottom:60px}.marketing .marketing-byline{margin-bottom:40px;font-size:20px;font-weight:300;line-height:25px;color:#999}.marketing img{display:block;margin:0 auto 30px}.jumbotron{height:150px;width:100%;background:url(NTU-Taida-header-2012.jpg) no-repeat center center;opacity:.4;background-size:100%}section{padding-top:60px}body{padding-top:60px;padding-bottom:40px}.span3{min-height:100px}.row-logo{text-align:center;padding-bottom:20px}.my-sidebar-nav{width:228px;margin:30px 0 0;padding:0}.my-sidebar-nav.affix{top:60px}.my-sidebar-nav.affix-top{position:absolute;top:60px}.my-sidebar-nav.affix-bottom{position:absolute;top:auto;bottom:0}ul.sub-navlist{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.065);-moz-box-shadow:0 1px 4px rgba(0,0,0,.065);box-shadow:0 1px 4px rgba(0,0,0,.065)}.nav-header{*width:190px;margin:0 0 -1px;padding:8px 14px;border:1px solid #e5e5e5}.dropdown-menu>.nav-header{border:0}.sub-navlist>li>a{display:block;*width:190px;margin:0 0 -1px;padding:8px 14px;border:1px solid #e5e5e5}.sub-navlist>ul{margin-bottom:0 px}.sub-navlist>li:first-child>a,.sub-navlist>.nav-header:first-child{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.sub-navlist>li:last-child>a{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px}.sub-navlist>.active>a{position:relative;z-index:2;padding:9px 15px;border:0;text-shadow:0 1px 0 rgba(0,0,0,.15);-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1)}.sub-navlist>.active>a,.sub-navlist>.active>a:hover{color:white;text-shadow:0 -1px 0 rgba(0,0,0,0.2);background-color:#08C}@media(max-width:980px){.my-sidebar{width:70%;margin:0 auto}.my-sidebar-nav{width:auto;margin-bottom:20px}.my-sidebar-nav.affix,.my-sidebar-nav.affix-top{position:static;width:auto;top:0}.my-sidebar-nav.affix-bottom{position:absolute;top:auto;bottom:0}.row-logo{width:200px;margin:0 auto}}