Template:Toulouse-INSA-UPS/PERSO-CSS

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* CSS for the iGEM 2018 Team : Toulouse INSA-UPS Creator : Yohann CHARREIRE--KIRBACH (Sentiare) Last Update : Tue 04/09/18 @ 15:20

                                                                             */

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/**//*OVERRIDE DEFAULT CSS*//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* This section is for removing the default iGEM CSS

* It should be complete, but i maybe missed something
*/

1. HQ_page, #content {

width:100%; padding:0; margin:0; }

1. mw-content-text p:first-child {

margin:0; padding:0; }

a#top { height:0; }

1. top_title, #top_title div, #top_title h1 #firstHeading {

visibility:hidden !important; height:0 !important; margin:0 !important; padding:0 !important; }

1. globalWrapper {

padding-bottom:0; }

/**//*CSS of the iGEM menu *//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* The iGEM black menu doesn't match his background spacer

* This CSS just increase his size by 2px to make them both match in height.
*/

1. top_menu_14 {

height:18px; /*Now it matches his own spacer height*/ }

/**//*IMAGES*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /**//*Team Logo*//**/ .img_team_logo { height:3.5rem; width:auto; }

/**//*The text of the logo*//**/ a.navbar-brand { font-size:1.5rem; }

/**//*In Page Documents*//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* This section is about the different elements around the document reader in our

* page. Remember : NO IFRAME!!!
*/

/**//*PDF*//**/ .black-pdf-spacer { width:100%; height:1rem; background-color:#3F3F3F;

}

/**//* GENERAL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* This section is mainly about title and text padding, margin and size

*/

body, html { position:relative width:100%; height:auto; }

1. CONTENT h1, .collapse h1 {

margin-top:3rem !important; margin-bottom:0rem !important; }

1. CONTENT h2, .collapse h2 {

margin-top:0rem !important; margin-bottom:0rem !important; padding:0.34rem 0 0.17rem 0; }

1. CONTENT h3, .collapse h3{

margin-top:1rem !important; margin-bottom:0rem !important; }

.heavy {

   font-weight: 600;

}

1. MENU {

top:18px; font-size:1rem; }

a.dropdown-item { color:black !important; }

p { /*General*/ font-size:1rem; }

div.cd-timeline__content p, div.cd-timeline__content a, div.cd-timeline__content span, div.cd-timeline__content { /*Timeline font*/ font-size:1rem; }

1. DISCLAIMER p { /*FOOTER font*/

font-size:0.7rem; }

/**//* BANNER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* #BANNER refers to the picture on the top of the page.

* It uses media queries.
*/

.img_banner { width:100%; height:auto; margin:0; padding:0; z-index:1000; }

1. BANNER {

margin:0; padding:0; overflow: hidden; }

@media screen and (min-width:100px) and (max-width:576px) { #BANNER { height:40px; } }

@media screen and (min-width:577px) and (max-width:768px) { #BANNER { height:80px; } }

@media screen and (min-width:769px) and (max-width:992px) { #BANNER { height:110px; } }

@media screen and (min-width:993px) and (max-width:1200px) { #BANNER { height:140px; } }

@media screen and (min-width:1201px) { #BANNER { height:170px; } }

/**//* HR BANNERS *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Is it a banner, is it a hr ? No it's a picture which acts like a hr.

*/

div.hr_img { width:100%; height:5rem; overflow:hidden; }

img.hr_img { width:100%; }

/**//* HR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* I love hr. So here's their very own section

*/

h1~hr { margin-top:0rem; margin-bottom:3rem; }

h2~hr { margin-top:0rem; margin-bottom:2rem; }

h3~hr { margin-top:0rem; margin-bottom:1rem; }

a.dropdown-item~hr { margin-bottom:0.5rem; margin-top:0.5rem; }

hr { padding:0; }

/**//*NAV ICONS*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Everything related with the ugly little nav icons on the left of the screen

*/

a.ico { padding:0.5rem 0.5rem; }

img.ico { max-width:3rem; height:auto; }

/**//* FOOTER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Everything that is only in the footer and has CSS is in this section

*/

1. FOOTER_CONTENT {

margin:1.6rem }

/**//* Anchors *//**/ a.footer { text-decoration:underline; }

a.footer:link, a.footer:visited { color:#f8f9fa; }

a.footer:hover, a.footer:active { color:#d8d9da; }

/**//* SPONSORS *//**/ p.sponsor { margin-bottom:0; }

/**//* CAROUSEL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* The carousel should soon be removed, remove this section too.

*/

.car_img { height:100%; width:100%; }

@media screen and (min-width:100px) and (max-width:576px) { #PLACEHOLDER { height:60px; } }

@media screen and (min-width:577px) and (max-width:768px) { #PLACEHOLDER { height:324px; } }

@media screen and (min-width:769px) and (max-width:992px) { #PLACEHOLDER { height:432px; } }

@media screen and (min-width:993px) and (max-width:1200px) { #PLACEHOLDER { height:558px; } }

@media screen and (min-width:1201px) { #PLACEHOLDER { height:675px; } }

1. PLACEHOLDER {

overflow:hidden; z-index:1000; position:relative; }

/**//*"EXTENDED" BOOTSTRAP*//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Just some classes that Bootstrap doesn't have but looks like they are bootstrap

* classes.
*/

.corner-bottom { border-bottom-left-radius : 0 !important; border-bottom-right-radius : 0 !important; }

.corner-top { border-top-left-radius : 0 !important; border-top-right-radius : 0 !important; }

.corner-left { border-top-left-radius : 0 !important; border-bottom-left-radius : 0 !important; }

.corner-right { border-top-right-radius : 0 !important; border-bottom-right-radius : 0 !important; }

.corner-all { border-top-right-radius : 0 !important; border-bottom-right-radius : 0 !important; border-top-left-radius : 0 !important; border-bottom-left-radius : 0 !important; }

.picture-of-someone { height:18rem !important; width:18rem !important; }

.card-of-picture { width:18rem !important; }

.sticky-bottom {

   position: -webkit-sticky; /* For compatibility */
   position: sticky;
   bottom: 0;

}

.nav-left-col { display:block; width:16.666667%; max-width:16.666667%; }

/**//*Filters*//**/ .filter-gray { -webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */ filter:grayscale(100%); }

.filter-gray-0 { -webkit-filter: grayscale(0%) !important; /* Safari 6.0-9.0 */ filter:grayscale(0%) !important; }

.filter-gray-25 { -webkit-filter: grayscale(25%); /* Safari 6.0-9.0 */ filter:grayscale(25%); }

.filter-gray-50 { -webkit-filter: grayscale(50%); /* Safari 6.0-9.0 */ filter:grayscale(50%); }

.filter-gray-75 { -webkit-filter: grayscale(75%); /* Safari 6.0-9.0 */ filter:grayscale(75%); }

.filter-gray-90 { -webkit-filter: grayscale(90%); /* Safari 6.0-9.0 */ filter:grayscale(90%); }

.filter-gray-95 { -webkit-filter: grayscale(95%); /* Safari 6.0-9.0 */ filter:grayscale(95%); }

.filter-gray-100 { -webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */ filter:grayscale(100%); }

.filter-reverse { -webkit-filter: invert(100%); /* Safari 6.0-9.0 */ filter: invert(100%); }

.filter-invert { -webkit-filter: invert(100%); /* Safari 6.0-9.0 */ filter: invert(100%); }

.filter-alpha-0 { -webkit-filter : opacity(100%) !important; filter : opacity(100%) !important; }

.filter-alpha-25 { -webkit-filter : opacity(75%); filter : opacity(75%); }

.filter-alpha-50 { -webkit-filter : opacity(50%); filter : opacity(50%); }

.filter-alpha-75 { -webkit-filter : opacity(25%); filter : opacity(25%); }

.filter-alpha-100 { -webkit-filter : opacity(0%); filter : opacity(0%); }

.filter-alpha { -webkit-filter : opacity(50%); filter : opacity(50%); }