User:Irukaza/common.css

/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/e/e1/T--AHUT-ZJU-China--font0.woff) format('woff');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/0/0a/T--AHUT-ZJU-China--font1.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/a/a9/T--AHUT-ZJU-China--font2.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/1/1b/T--AHUT-ZJU-China--font3.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/********/



/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/8/80/T--AHUT-ZJU-China--font4.woff) format('woff');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/8/8c/T--AHUT-ZJU-China--font5.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/b/bc/T--AHUT-ZJU-China--font6.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/a/ad/T--AHUT-ZJU-China--font7.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/8/80/T--AHUT-ZJU-China--font4.woff) format('woff');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/8/8c/T--AHUT-ZJU-China--font5.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/b/bc/T--AHUT-ZJU-China--font6.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://2020.igem.org/wiki/images/a/ad/T--AHUT-ZJU-China--font7.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/

/* Clear the default wiki settings */

/********************************** DEFAULT WIKI SETTINGS  *********************************/
#top_menu_inside #bars_item {
    position: absolute;
    top: -30px !important;
    left: -100px !important;
    z-index: -1 !important;
    cursor: pointer;
}

#sideMenu,
#top_title {
    display: none;
}

#content {
    padding: 0px;
    width: 100%;
}

body {
    background-color: white;
    margin: 0px;
}

#bodyContent h1 {
    font-weight: 300 !important;
}

#bodyContent h1,
#bodyContent h2,
#bodyContent h3,
#bodyContent h4,
#bodyContent h5 {
    margin-bottom: 0px;
    border-bottom: none;
}

#bodyContent {
    padding-right: 0px;
}

#globalWrapper {
    font-size: 100%;
    padding: 0px;
    margin: -10px -20px -20px -20px;
}

.navbar-collapse {
    padding-left: 0px;
}

#banner {
    margin-top: 50px;
}

#sideMenu {
    margin-top: 10px;
}

.navbar-nav .dropdown-menu,
.navbar .dropdown-menu {
    margin-top: 0;
}

/**************************************************************** MENU ***************************************************************/
/* Wrapper for the menu */
.igem_2017_menu_wrapper {
    width: 15%;
    height: 100vh;
    position: fixed;
    right: 0%;
    padding: 0px;
    float: right;
    border-left: 1px solid #d3d3d3;
    background-color: #dddddd;
    text-align: left;
    font-family: Tahoma, Geneva, sans-serif;
    overflow-y: auto;
    overflow-x: hidden;
}

/* this hides the scrollbar to keep view consistency */
.igem_2017_menu_wrappe::-webkit-scrollbar {
    display: none;
}

/* styling for links in the menu, removes the line under text */
.igem_2017_menu_wrapper a {
    text-decoration: none;
}

/* styling for the images in the menu */
.igem_2017_menu_wrapper img {
    width: 100%;
}

/* styling for the menu buttons */
.igem_2017_menu_wrapper .menu_button {
    width: 100%;
    padding: 10px 0px 10px 15px;
    float: left;
    border-bottom: 1px solid #d3d3d3;
    font-size: 12px;
    font-weight: bold;
    color: #5e5f5f;
    cursor: pointer;
}

.igem_2017_menu_wrapper .menu_bottom_padding {
    width: 100%;
    height: 30px;
    float: left;
}

.menu_button.direct_to_page {
    padding-left: 36px;
}

.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
    width: 10%;
    float: left;
}

.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
    content: "+";
}


/* styling for the menu buttons on hover */
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover {
    background-color: #3399ff;
    text-decoration: none;
    color: #ffffff;
}

/* styling for the menu button when it is the current page */
.current_page {
    background-color: #7fc1f7 !important;
    color: #5e5f5f !important;
}

/* styling for the submenu buttons */
.igem_2017_menu_wrapper .submenu_button {
    width: 100%;
    padding: 10px 0px 10px 34px;
    float: left;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d3d3d3;
    font-size: 12px;
    color: #5e5f5f;
    cursor: pointer;
}

/* wrapper for the submenu items, they are hidden by default*/
.igem_2017_menu_wrapper .submenu_wrapper {
    display: none;
}

/* when the page size is bigger than 800px, this show/hide control is hidden by default */
.igem_2017_menu_wrapper #display_menu_control {
    display: none;
    text-align: center;
}

/***************************************************** CONTENT OF THE PAGE ****************************************************/

/* Wrapper for the content */
.igem_2017_content_wrapper {
    width: 81%;
    margin: 2%;
    display: block;
    float: left;
    background-color: white;
    font-family: Tahoma, Geneva, sans-serif;
}

/********************************* HTML STYLING  *********************************/

/* styling for the titles h1 h2 */
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
    padding: 5px 15px;
    border-bottom: 0px;
    color: #3399ff;
}

/* styling for the titles  h3 h4 h5 h6*/
.igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
    padding: 5px 15px;
    border-bottom: 0px;
    color: #000000;
}

/* font and text */
.igem_2017_content_wrapper p {
    padding: 0px 15px;
    font-size: 13px;
}

/* Links */
.igem_2017_content_wrapper a {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #3399ff;
    color: #3399ff;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* hover for the links */
.igem_2017_content_wrapper a:hover {
    text-decoration: none;
    color: #000000;
}

/* non numbered lists */
.igem_2017_content_wrapper ul {
    padding: 0px 20px;
    font-size: 13px;
    font-family: Tahoma, Geneva, sans-serif;
}

/* numbered lists */
.igem_2017_content_wrapper ol {
    padding: 0px;
    font-size: 13px;
    font-family: Tahoma, Geneva, sans-serif;
}

/* Table */
.igem_2017_content_wrapper table {
    width: 97%;
    margin: 15px 10px;
    border: 1px solid #d3d3d3;
    border-collapse: collapse;
}

/* table cells */
.igem_2017_content_wrapper td {
    padding: 10px;
    vertical-align: text-top;
    border: 1px solid #d3d3d3;
    border-collapse: collapse;
}

/* table headers */
.igem_2017_content_wrapper th {
    padding: 10px;
    vertical-align: text-top;
    border: 1px solid #d3d3d3;
    border-collapse: collapse;
    background-color: #f2f2f2;
}

/**********************************LAYOUT CLASSES **********************************/

/* general class for column divs */
.igem_2017_content_wrapper .column {
    padding: 10px 0px;
    float: left;
}

/* class for a full width column */
.column .full_size {
    width: 100%;
}

/* styling for images in a full width column*/
.column.full_size img {
    width: 97%;
    padding: 10px 15px;
}

/* class for a half width column */
.column.half_size {
    width: 50%;
}

/* styling for images in a half width column*/
.column.half_size img {
    width: 94.5%;
    padding: 10px 15px;
}

/********************************* SUPPORT CLASSES ********************************/

/* class that clears content below*/
.igem_2017_content_wrapper .clear {
    clear: both;
}

/* adds extra spacing when clearing content */
.igem_2017_content_wrapper .clear.extra_space {
    height: 30px;
}

/* highlight class, makes content slightly smaller */
.igem_2017_content_wrapper .highlight {
    margin: 0px 15px;
    padding: 15px 0px;
}

/* highlight class, adds a gray background */
.igem_2017_content_wrapper .highlight.gray {
    background-color: #f2f2f2;
}

/* highlight with decoration blue line on top */
.igem_2017_content_wrapper .highlight.blue_top {
    border-top: 4px solid #3399ff;
}

/* highlight with a full blue border decoration */
.igem_2017_content_wrapper .highlight.blue_border {
    border: 4px solid #3399ff;
}

/* button class */
.igem_2017_content_wrapper .button {
    max-width: 35%;
    margin: 30px auto;
    padding: 12px 10px;
    background-color: #3399ff;
    text-align: center;
    color: #ffffff;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* styling for button on hover */
.igem_2017_content_wrapper .button:hover {
    background-color: #3399ff;
    color: #000000;
}

/***************************************************** RESPONSIVE STYLING ****************************************************/

/* IF THE SCREEN IS LESS THAN 1200PX */
@media only screen and (max-width: 1200px) {

    #content {
        width: 100%;
    }

    .igem_2017_menu_wrapper {
        width: 15%;
        right: 0;
    }

    .highlight {
        padding: 10px 0px;
    }

    .igem_2017_menu_wrapper #display_menu_control {
        display: none;
    }

    #menu_content {
        display: block;
    }

    .menu_button.direct_to_page {
        padding-left: 17px;
    }

}

/* IF THE SCREEN IS LESS THAN 800PX */
@media only screen and (max-width: 800px) {

    .igem_2017_menu_wrapper {
        width: 100%;
        height: 15%;
        position: relative;
        left: 0%;
    }

    .igem_2017_content_wrapper {
        width: 100%;
        margin-left: 0px;
    }

    .column.half_size {
        width: 100%;
    }

    .column.full_size img, .column.half_size img {
        width: 100%;
        padding: 10px 0px;
    }

    .highlight {
        padding: 15px 5px;
    }

    .igem_2017_menu_wrapper #display_menu_control {
        display: block;
    }

    #menu_content {
        display: none;
    }

    .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
        width: 5%;
    }

    .menu_bottom_padding {
        display: none;
    }

    .menu_button.direct_to_page {
        padding-left: 36px;
    }
}

/* special class that the system uses to make sure the team wants a page to be evaluated */
.judges-will-not-evaluate {
    width: 96.6%;
    margin: 5px 15px;
    display: block;
    border: 4px solid #3399ff;
    font-weight: bold;
}

.content_wrapper {
    width: 100%;
    height: 100vh;
}