|
|
| Line 1: |
Line 1: |
| − | /****************************************************************************************************************/
| |
| − | /************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/
| |
| − | /************************************************* (iGEM CODE) **************************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| | | | |
| − | /* Clear the default wiki settings */
| |
| − |
| |
| − | #home_logo, #sideMenu {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #sideMenu, #top_title, .patrollink {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | width: 100%;
| |
| − | padding: 0px;
| |
| − | margin-top: -7px;
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | background-color: red;
| |
| − | }
| |
| − |
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /*********************************************** SETS MAIN STYLES ***********************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − | /***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/
| |
| − |
| |
| − | #windowcontent * {
| |
| − | box-sizing: border-box;
| |
| − | font-family: sans-serif, "Times New Roman", Times, serif;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | #windowcontent ul, ol {
| |
| − | list-style: none;
| |
| − | }
| |
| − |
| |
| − | /*makes the website span from edge to edge of the viewport*/
| |
| − |
| |
| − | #windowcontent body {
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | /***** centers all headlines as standard *****/
| |
| − |
| |
| − | h1, h2, h3, h4, h5, h6 {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | /***** defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport *****/
| |
| − |
| |
| − | .col-1 {
| |
| − | width: 08.33%;
| |
| − | }
| |
| − | .col-2 {
| |
| − | width: 16.66%;
| |
| − | }
| |
| − | .col-3 {
| |
| − | width: 25.00%;
| |
| − | }
| |
| − | .col-4 {
| |
| − | width: 33.33%;
| |
| − | }
| |
| − | .col-5 {
| |
| − | width: 41.66%;
| |
| − | }
| |
| − | .col-6 {
| |
| − | width: 50.00%;
| |
| − | }
| |
| − | .col-7 {
| |
| − | width: 58.33%;
| |
| − | }
| |
| − | .col-8 {
| |
| − | width: 66.66%;
| |
| − | }
| |
| − | .col-9 {
| |
| − | width: 75.00%;
| |
| − | }
| |
| − | .col-10 {
| |
| − | width: 83.33%;
| |
| − | }
| |
| − | .col-11 {
| |
| − | width: 91.66%;
| |
| − | }
| |
| − | .col-12 {
| |
| − | width: 100.0%;
| |
| − | }
| |
| − |
| |
| − | /***** defines columns in pixels used for main content area, so user zoom will not affect the layout *****/
| |
| − |
| |
| − | .colp-1 {
| |
| − | width: calc(1000px/12);
| |
| − | }
| |
| − | .colp-2 {
| |
| − | width: calc(1000px/12*2);
| |
| − | }
| |
| − | .colp-3 {
| |
| − | width: calc(1000px/12*3);
| |
| − | }
| |
| − | .colp-4 {
| |
| − | width: calc(1000px/12*4);
| |
| − | }
| |
| − | .colp-5 {
| |
| − | width: calc(1000px/12*5);
| |
| − | }
| |
| − | .colp-6 {
| |
| − | width: calc(1000px/12*6);
| |
| − | }
| |
| − | .colp-7 {
| |
| − | width: calc(1000px/12*7);
| |
| − | }
| |
| − | .colp-8 {
| |
| − | width: calc(1000px/12*8);
| |
| − | }
| |
| − | .colp-9 {
| |
| − | width: calc(1000px/12*9);
| |
| − | }
| |
| − | .colp-10 {
| |
| − | width: calc(1000px/12*10);
| |
| − | }
| |
| − | .colp-11 {
| |
| − | width: calc(1000px/12*11);
| |
| − | }
| |
| − | .colp-12 {
| |
| − | width: 1000px;
| |
| − | }
| |
| − |
| |
| − | /***** makes all the columns go to the left of the page and "stack" to the right if room *****/
| |
| − |
| |
| − | [class*="col-"] {
| |
| − | float: left;
| |
| − | padding: 15px;
| |
| − | }
| |
| − |
| |
| − | [class*="colp-"] {
| |
| − | float: left;
| |
| − | padding: 15px;
| |
| − | }
| |
| − |
| |
| − | /***** EACH ROW MUST BE 12 COLUMNS (OF THE SAME TYPE) IN TOTAL *****/
| |
| − | /************ (for example col-4, col-6, col-2 is a row) ***********/
| |
| − |
| |
| − |
| |
| − | /***** clears the row of other content *****/
| |
| − |
| |
| − | .row::after {
| |
| − | content: "";
| |
| − | clear: both;
| |
| − | display: table;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /***** removes margin and padding *****/
| |
| − |
| |
| − | #windowcontent .rmvpadmarg {
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | /***** removes vertical lines on links *****/
| |
| − |
| |
| − | #windowcontent .rmvlinkstyle a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | /***** brings element to front of page, used to bring nav bar in front of everything else *****/
| |
| − |
| |
| − | #windowcontent .tofront {
| |
| − | position: relative;
| |
| − | z-index: 9999;
| |
| − | }
| |
| − |
| |
| − | /***** sets the position of the element to be given a bottom border *****/
| |
| − |
| |
| − | #windowcontent .bottomborder {
| |
| − | position: relative;
| |
| − | padding: 25px 0px;
| |
| − | }
| |
| − |
| |
| − | /***** styles borders for h1 elements *****/
| |
| − |
| |
| − | #windowcontent h1.bottomborder:after {
| |
| − | content:"";
| |
| − | background: black;
| |
| − | position: absolute;
| |
| − | left: 150px;
| |
| − | bottom: 16px;
| |
| − | height: 1px;
| |
| − | width: 700px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /***** styles borders for h2 elements *****/
| |
| − |
| |
| − | #windowcontent h2.bottomborder:after {
| |
| − | content:"";
| |
| − | background: black;
| |
| − | position: absolute;
| |
| − | left: 300px;
| |
| − | bottom: 18px;
| |
| − | height: 1px;
| |
| − | width: 400px;
| |
| − | }
| |
| − |
| |
| − | #windowcontent .fixed {
| |
| − | position: fixed;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /**************************************************** NAVBAR ****************************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | /***** defines key properties of the nav bar *****/
| |
| − |
| |
| − | #windowcontent nav {
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | overflow: hidden;
| |
| − | top: 0px;
| |
| − | width: 100%;
| |
| − | height: 40px;
| |
| − | }
| |
| − |
| |
| − | /***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/
| |
| − |
| |
| − | #windowcontent .navbarcenter {
| |
| − | width: 1000px;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | /***** sets color of nav bar when the page is scrolled to the top *****/
| |
| − |
| |
| − | #windowcontent .navbar {
| |
| − | background-color: rgba(20,20,20,1);
| |
| − | box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /***** makes nav bar choices float next to each other *****/
| |
| − |
| |
| − | #windowcontent .dropdown {
| |
| − | float: right;
| |
| − | height: 40px;
| |
| − | }
| |
| − |
| |
| − | /***** layout of nav bar choice buttons *****/
| |
| − |
| |
| − | #windowcontent .dropdown .dropbtn {
| |
| − | height: 40px;
| |
| − | display: inline-block;
| |
| − | color: white;
| |
| − | text-align: center;
| |
| − | padding: 10px 16px;
| |
| − | width: 200px;
| |
| − | text-decoration: none;
| |
| − | font-size: 1em;
| |
| − | font-family: sans-serif, "Times New Roman", Times, serif;
| |
| − | }
| |
| − |
| |
| − | /***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/
| |
| − |
| |
| − | #windowcontent .dropdown-content {
| |
| − | -webkit-transition: background 1.5s;
| |
| − | transition: background 1.5s;
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | background-color: transparent;
| |
| − | min-width: 200px;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | /***** displays dropdown content when nav bar choice is hovered *****/
| |
| − |
| |
| − | #windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /***** defines nav bar dropdown link layout *****/
| |
| − |
| |
| − | #windowcontent .dropdown-content a {
| |
| − | color: black;
| |
| − | background-color: white;
| |
| − | padding: 12px 16px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | /***** changes navbar dropdown menu color when choice is hovered *****/
| |
| − |
| |
| − | #windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
| |
| − | background-color: rgb(235,235,235);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /************************************************* MAIN CONTENT *************************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | /***** styles main text area on main page *****/
| |
| − |
| |
| − | #windowcontent .maincontainer {
| |
| − | margin: 0px auto 100px auto;
| |
| − | width: 1000px;
| |
| − | text-align: justify;
| |
| − | clear: both;
| |
| − | display: table;
| |
| − | }
| |
| − |
| |
| − | /****************************************************************************************************************/
| |
| − | /**************************************************** FOOTER ****************************************************/
| |
| − | /****************************************************************************************************************/
| |
| − |
| |
| − |
| |
| − | /***** styles main footer area *****/
| |
| − |
| |
| − | #windowcontent footer {
| |
| − | background: #848282;
| |
| − | color: white;
| |
| − | width: 100%;
| |
| − | min-width: 1000px;
| |
| − | position: absolute;
| |
| − | text-align: center;
| |
| − | color: white;
| |
| − | font-size: x-small;
| |
| − | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
| |
| − | }
| |
| − |
| |
| − | /***** defines a container of same width as main content that contains footer content *****/
| |
| − |
| |
| − | #windowcontent .footercontainer {
| |
| − | width: 1000px;
| |
| − | margin: 20px auto 25px auto;
| |
| − | }
| |
| − |
| |
| − | /***** centers footer content in the individual columns *****/
| |
| − |
| |
| − | #windowcontent .footercolstyle * {
| |
| − | align-content: center;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #windowcontent .footercolstyle a {
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | /***** styles left footer column *****/
| |
| − |
| |
| − | #windowcontent .leftfootercol {
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | /***** styles right footer column *****/
| |
| − |
| |
| − | #windowcontent .rightfootercol {
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − | /***** gives space between the "find us at" icons *****/
| |
| − |
| |
| − | #windowcontent footer img {
| |
| − | margin: 10px;
| |
| − | }
| |
