Difference between revisions of "Team:NUS Singapore-A/Templates/Style"

Line 10: Line 10:
  
 
<style>
 
<style>
 +
/*Remove standard formatting of iGEM HQ */
 +
/* set page to fill window*/
  
−
p, ol li, ul li  {
+
html {
−
        font-family: "Roboto", sans-serif;
+
    height: 100%;
−
        font-size: 14px;
+
    padding: 0;
−
        word-spacing: 0.1em;
+
    margin: 0;
−
        text-align:justify;
+
    overflow-y: scroll;
−
    }
+
}
  
 +
body {
 +
    height: 100%;
 +
    padding: 0;
 +
    margin: 0;
 +
    background-color: white;
 +
}
 +
 +
#globalWrapper {
 +
    min-height: 100%;
 +
    margin: 0;
 +
    padding: 0!important;
 +
    font-size: initial;
 +
}
 +
 +
#sideMenu,
 +
#top_title {
 +
    display: none;
 +
}
 +
#top_menu_inside {
 +
    box-sizing: content-box;
 +
}
 +
#top_menu_14 {
 +
    box-sizing: content-box;
 +
}
 +
#top_menu_under {
 +
    box-sizing: content-box;
 +
}
 +
#bars_item img {
 +
    vertical-align: baseline;
 +
}
 +
#content {
 +
    width:100%;
 +
    min-width: 100%!important;
 +
    margin: 0;
 +
    padding: 0;
 +
    top: -10px;
 +
}
 +
#mw-content-text {
 +
    position:relative;
 +
    margin: 0;
 +
    padding: 0;
 +
    left: 0;   
 +
    font-size: 100%;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/c/cc/T--Wageningen_UR--Team_background.jpg");
 +
    z-index:0;
 +
}
 +
/* set all basic objects to neutral formatting, removes all padding, margins, etc and sets the fontsize to 100%*/
 +
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
    font-family: 'roboto', sans-serif !important;
 +
    color: black;
 +
    background: none;
 +
    font-weight: normal;
 +
    margin-bottom: 0;
 +
    padding: 0;
 +
    overflow: visible;
 +
}
 +
/*as a script gets a paragraph, by default, no formatting for p */
 +
 +
p {
 +
    font-size: 1.1rem !important;
 +
    font-family: 'roboto', sans-serif !important;
 +
    line-height:1.5;
 +
    text-align:left!important;
 +
    color: #1d2129;
 +
}
 +
h1 {
 +
    font-size: 3.0rem;
 +
    line-height: normal;
 +
    padding-bottom: 1.4rem;
 +
    margin-top: 3rem;
 +
    text-align: center;
 +
}
 +
h2 {
 +
    font-size: 2.4rem;
 +
    line-height: normal;
 +
    border-bottom: 1px solid #aaa;
 +
    padding-bottom: 0.4rem;
 +
    padding-top: 1.0rem;
 +
}
 +
h3 {
 +
    font-size: 1.8rem;
 +
    line-height: normal;
 +
    padding-bottom: 0.4rem;
 +
    padding-top: 0.6rem;
 +
}
 +
h4 {
 +
    font-size: 1.5rem;
 +
    line-height: normal;
 +
    padding-bottom: 0.4rem;
 +
    padding-top: 0.6rem;
 +
}
 +
h5 {
 +
    font-weight: bold;
 +
    line-height: normal;
 +
    font-size: 1.2rem;
 +
    padding-bottom: 0rem;
 +
    padding-top: 0rem;
 +
}
 +
 +
 +
.OurContent {
 +
    font-size: 1.1rem;
 +
    position: relative;
 +
    top: -0.6rem;
 +
    padding-bottom: 100px;
 +
}
 +
.OurContent p {
 +
    padding-bottom: 0.6rem;
 +
}
 +
.Main-Center-Column {
 +
    background-color: transparant;   
 +
}
 +
 +
.Main-Left-Column {
 +
  padding:0;
 +
}
 +
 +
.Main-Right-Column {
 +
  padding:0;
 +
}
 +
 +
.Center-Content-Column {
 +
    max-width: 980px;
 +
    margin: auto;
 +
    clear: both;
 +
    position: relative;
 +
    background-color: white;
 +
}
 +
.Main-Border {
 +
    box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5);
 +
    max-width: 980px;
 +
    margin: auto;
 +
    position: relative;   
 +
    background-color: white;
 +
    padding-left: 3.0rem;
 +
    padding-right: 3.0rem;
 +
    padding-bottom: 2.0rem;
 +
    padding-top: 1rem;
 +
}
 +
.Main-Center-Content-Column {
 +
    max-width: 980px;
 +
    margin: auto;
 +
    position: relative;
 +
    background-color: white;
 +
}
 +
.col-centered {
 +
    padding: 0;
 +
}
 +
.clearer {
 +
    clear: both;
 +
}
 +
.nested-ordered-list ol ol li {
 +
    margin-left: 2rem;
 +
}
 +
.nested-ordered-list ol {
 +
    list-style-type: decimal;
 +
}
 +
.nested-ordered-list ol ol {
 +
    list-style-type: lower-alpha;
 +
}
 +
/*images and boxes */
 +
 +
.figure-center {
 +
    width: 75%;
 +
    margin: 0 auto;
 +
    text-align: center;
 +
}
 +
.figure-bordered-center {
 +
    width: 75%;
 +
    margin: 0 auto;
 +
    border: 1px solid #000000;
 +
}
 +
.figure-center-imagebox {
 +
    padding-top: 0.4rem;
 +
    padding-left: 0.4rem;
 +
    padding-right: 0.4rem;
 +
    padding-bottom: 0rem;
 +
}
 +
.figure-bordered-center-imagebox {
 +
    padding-top: 0.4rem;
 +
    padding-left: 0.4rem;
 +
    padding-right: 0.4rem;
 +
    padding-bottom: 0rem;
 +
    border: 1px solid #000000;
 +
}
 +
.figure-center-img {
 +
    width: 100%;
 +
    display: block;
 +
}
 +
.figure-center-caption {
 +
    font-size: 0.8rem;
 +
    padding-bottom: 0.8rem;
 +
}
 +
.figure-bordered-center-caption {
 +
    padding: 0.4rem;
 +
    border: 1px solid #000000;
 +
}
 +
.figure-fullwidth {
 +
    width: 100%;
 +
    margin: 0 auto;
 +
    text-align: center;
 +
}
 +
.figure-center-accordion {
 +
    width: 100%;
 +
    margin: 0 auto;
 +
    text-align: center;
 +
}
 +
 +
.inline-img-left {
 +
  padding-top:0;
 +
  padding-bottom:0;
 +
  padding-right:0.8rem;
 +
  padding-left:0;
 +
}
 +
 +
.inline-img-right {
 +
  float:right;
 +
  padding-right:0rem;
 +
  padding-top:0;
 +
  padding-bottom:0;
 +
  padding-left:0.8rem;
 +
}
 +
 +
.sponsor-img {
 +
    width:100%;
 +
}
 +
 +
Video {
 +
  width:100%;
 +
  max-width:900px;
 +
  padding-top:2rem;
 +
  padding-bottom:2rem;
 +
}
 +
 +
 +
.YoutubeVideo {
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    width: 50%;
 +
    margin-top: 2rem;
 +
    margin-bottom: 2rem;
 +
}
 +
/*Bootstrap accordion titles */
 +
 +
.panel-title {
 +
    padding-bottom: .8rem;
 +
}
 +
/*Accordion box formatting*/
 +
/*Accordion panel heading text formatting*/
 +
 +
.panel-heading h4 {
 +
    padding-top: .5rem;
 +
    padding-bottom: .17rem;
 +
    margin: 0;
 +
    font-weight: 500;
 +
    line-height: 1.1;
 +
    font-size: 1.25rem;
 +
    overflow: hidden;
 +
    text-align: left;
 +
    direction: ltr;
 +
}
 +
.Title-centered {
 +
    text-align: center;
 +
}
 +
.Textbox {
 +
    margin-top: 0.2rem;
 +
    margin-bottom: 0.2rem;
 +
    font-size: 1.2rem;
 +
}
 +
.Textbox-Left {
 +
    width: 50%;
 +
    margin-top: 0.2rem;
 +
    margin-bottom: 0.2rem;
 +
    font-size: 1.2rem;
 +
    float: left;
 +
}
 +
.Textbox-Right {
 +
    width: 50%;
 +
    margin-top: 0.2rem;
 +
    margin-bottom: 0.2rem;
 +
    font-size: 1.2rem;
 +
    float: right;
 +
}
 +
.Textbox-center {
 +
    text-align: center;
 +
    margin-top: 0.2rem;
 +
    margin-bottom: 0.2rem;
 +
    font-size: 1.2rem;
 +
}
 +
a.anchor {
 +
    display: block;
 +
    position: relative;
 +
    top: -16px;
 +
    visibility: hidden;
 +
}
 +
/*bullet points properties */
 +
 +
ul {
 +
    list-style-position: inside;
 +
    list-style-image: none;
 +
}
 +
.nested-ordered-list ol ol li {
 +
    margin-left: 2rem;
 +
}
 +
.nested-ordered-list ol {
 +
    list-style-type: decimal;
 +
    list-style-position: inside;
 +
}
 +
.nested-ordered-list ol ol {
 +
    list-style-type: lower-alpha;
 +
}
 +
 +
 +
/*specific elements that do not have their own dedicated css file */
 +
 +
.TeamPageColumn p {
 +
    margin-left: 20px;
 +
    margin-right: 20px;
 +
    margin-top: 20px;
 +
    margin-bottom: 20px;
 +
}
 +
.FooterWrapper {
 +
    position: absolute;
 +
    bottom: -20px;
 +
    text-align: center;
 +
    width: 100%;
 +
    height: 120px;
 +
    padding: 0!important;
 +
    background-color: white;   
 +
}
 +
.FooterImage {
 +
    position: absolute;
 +
    bottom: 0px;
 +
    width: 100%;
 +
    height: 100px;
 +
    padding: 0!important;   
 +
    background-image: url(https://static.igem.org/mediawiki/2017/6/66/Mantis--Wiki_Footer.png);
 +
    background-color: white;
 +
    background-position: 0% 0%;
 +
    background-repeat: repeat-x;
 +
}
 +
 +
.FooterMainColumn {   
 +
    position: relative;
 +
    height: 100%;
 +
    background-color: transparent;
 +
    padding: 0!important;
 +
}
 +
#Footer {
 +
    position: relative;
 +
    width: 100%;
 +
    height: 100%;
 +
    top: 0px;
 +
}
 +
#Footer p {
 +
    margin: 0;
 +
    padding: 0;
 +
    font-family: roboto, sans-serif;
 +
    text-align: center!important;
 +
}
 +
 +
.clearer {
 +
    clear: both;
 +
}
 +
#breadcrumb-wrapper {
 +
    margin: 0;
 +
    padding-bottom: 2rem;
 +
    position: relative;
 +
}
 +
.breadcrumb {
 +
    position: relative;
 +
}
 +
/* Style the list */
 +
 +
ul.breadcrumb {
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style: none;
 +
    background-color: #FFFFFF;
 +
}
 +
/* Display list items side by side */
 +
 +
ul.breadcrumb li {
 +
    display: inline;
 +
    font-size: 1.2rem;
 +
}
 +
/* Add a slash symbol (/) before/behind each list item */
 +
 +
ul.breadcrumb li+li:before {
 +
    padding: 0.1rem;
 +
    color: black;
 +
    content: "/\00a0";
 +
}
 +
/* Add a color to all links inside the list */
 +
 +
ul.breadcrumb li a {
 +
    color: #0275d8;
 +
    text-decoration: none;
 +
}
 +
/* Add a color on mouse-over */
 +
 +
ul.breadcrumb li a:hover {
 +
    color: #01447e;
 +
    text-decoration: underline;
 +
}
 +
.Citations li {
 +
    font-size: 0.7rem;
 +
}
 +
/*Split page in top 90% and bottom 10% for down arrow*/
 +
 +
#DownArrow {
 +
    display: none;
 +
    width: 100px;
 +
    height: 100px;
 +
    position: fixed;
 +
    top: 94%;
 +
    left: 50%;
 +
    margin-top: -100px;
 +
    margin-left: -100px;
 +
    opacity: 0.5;
 +
    z-index: 10;
 +
}
 
</style>
 
</style>
  
 
</html>
 
</html>

Revision as of 12:05, 7 October 2018