Difference between revisions of "Template:Freiburg/CSS"

Revision as of 21:00, 30 August 2015

/* ============= Resetting css coming from wiki itself ============= */ body {

   font: sans-serif;
   color: #000;
   margin: 0px;
   padding: 0px;
   background-color: #AAA;

line-height: 1.8; }

a {

   color: #002BB8;
   text-decoration: none;
   background: transparent none repeat scroll 0% 0%;

}

p {

   margin: 0.4em 0px 0.5em;
   line-height: 1.5em;

}

globalWrapper {

   position: absolute;
   font-size: 150%;
   width: 100%;
   margin: 0px;
   padding: 0px 0px 0px;

}

mainContainer {

   margin: 0;
   width: 100%;

}

top_menu_under {

   position: relative;
   width: 100%;
   height: 16px;
   border-bottom: 2px solid #000;

}

top_menu_14 {

   position: fixed;
   width: 100%;
   top: 0px;
   left: 0px;
   height: 16px;
   background-color: #383838;
   border-bottom: 2px solid #000;
   z-index: 9999;

}

top_menu_inside {

   display: block;
   position: relative;
   width: 900px;
   height: 100%;
   margin: 0px auto;
   padding: 0px 10px;
   border-left: 1px solid #C8C8C8;
   border-right: 1px solid #C8C8C8;
   font-family: "arial",sans-serif;
   font-size: 12px;
   font-weight: 400;
   color: #FFF;

}

content {

   position: relative;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #FFF none repeat scroll 0% 0%;
   color: #000;
   border-left: 0;
   border-right: 0;
  /* line-height: 0; */
   z-index: 2;

}

.visualClear {

   clear: both;

}

/* ============= END: Resetting css coming from wiki itself ============= */

/* ============= Declare Fonts for non-Windows machines ============= */

@font-face {

   font-family: Candara;
   src: url(https://static.igem.org/mediawiki/2015/6/6c/Freiburg_Candara.ttf) format('truetype');

}

@font-face {

   font-family: Candara;
   src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Candarab.ttf)  format('truetype');
   font-weight: bold;
   font-style: normal;

} @font-face {

   font-family: Candara;
   src: url(https://static.igem.org/mediawiki/2015/3/3e/Freiburg_Candarai.ttf)  format('truetype');
   font-weight: normal;
   font-style: italic;

}

@font-face {

   font-family: Roboto;
   src: url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype');

} @font-face {

 font-family: Roboto;
 src: url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf)  format('truetype');
 font-style: normal;
 font-weight: 300;

} @font-face {

   font-family: Roboto;
   src: url(https://static.igem.org/mediawiki/2015/b/b9/Freiburg_Roboto-Bold.ttf)  format('truetype');
   font-weight: bold;
   font-style: normal;

} @font-face {

   font-family: Roboto;
   src: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Roboto-Italic.ttf)  format('truetype');
   font-weight: normal;
   font-style: italic;

} @font-face {

   font-family: Roboto;
   src: url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf)  format('truetype');
   font-weight: bold;
   font-style: italic;

}

/* ============= END: Declare Fonts for non-Windows machines ============= */

/* ============= CSS for Menubar ============= */

menubar {

   font-size: 16px;
   background-color: #5781bd;
   display: table;
   width: 100%;
   height: 70px;   
   border-collapse: collapse;
   border: none;

}

/*The sub (and subsubs) items of the menu*/

menubar ul li ul li{

   width: 200px;
   height: 30px;
   margin-top: 2px;

} /*The first (horizontal) line of menu items*/

menubar > ul{

   position: relative;
   margin-top: 25;
   left: 50%;
   display: block;
   transform: translate(-50%,0%);

}

menubar ul ul {

   background-color: #5781bd;
   display: none;
   position: absolute;
   margin-left: 0px;
   float: left;
   margin-top:0px;

}

menubar ul ul li{

   display: block;
   margin-left: 0px;

}

menubar ul li {

   width: 100px;
   display: table-cell;
   font-family: "Roboto",sans-serif;

}

menubar ul a{

   text-decoration: none;
   color: #FFFFFF;
   font-style: bold;
   text-align: left;

}

menubar ul a:visited{

   display: block;
   text-decoration: none;
   color: #FFFFFF;
   font-style: bold;

}

menubar ul li:hover > ul{

   color: #EEEE00;
   display: block;
   padding-top: 0px;
   padding-left: 20px;

}

menubar ul li:hover{

   color: #EEEE00;

}

/* ============= END: CSS for Menubar ============= */

/* ============= Important Site setup ============= */

/* changed tiles background to scaling full-size image --jb */ /*.content_background_wrapper{

position: relative; background-image: url(""); background-attachment: fixed; overflow:hidden; }*/ /* .content_background_wrapper{

  background: url("") no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 overflow: hidden;
  REMOVE WITH NEW NAVIGATION BAR!!! AVOIDS CONTENT SHIFTING AFTER MENU-WRAP
  clear: both;

}

/

.content_background_wrapper{

   background: #F9F9F9;
   overflow: hidden;
   box-sizing: border-box;

}

.central_position_wrap{

   position: relative;

}

.background_image_left, .background_image_right{

   width: 150px;
   position: absolute;

}

.background_image_left{

   top: 20%

}

.background_image_right{

   bottom: 0;
   right: 0;

}

.background_image_right img{

   float: right;

}

@media only screen and (max-width: 1320px){

   .background_image_left,
   .background_image_right{
       display: none;
   }

}

/* was removed in favour of fit-content --jb */ /* old version: float: left; max-width: 1000px;

   float: left;
   position: relative;
   left: 50%;

/

/* .page_content{

   display:block;
   float: left;
   position: relative;
   left: -50%;

}

/

/* responsive desgin: adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/ .page_content{

   margin: 20px 5px;

}

@media only screen and (min-width: 1021px){

   /* style for browsers wider than 1000px */
   .page_content{
       width: 1000px;
       margin-left: auto;
       margin-right: auto;
   }

} @media only screen and (max-width: 1020px){

   /* style for browsers smaller than 1000px */
   .page_content{
       width: intrinsic;
       width: moz-fit-content;
       width: -webkit-fit-content;
       width: fit-content;     
   }

}

/* ============= END: Important Site setup ============= */

/* ============= Text Styling ============= */

.page_content{ color: #666666; font-family: 'Roboto',sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 1.8; }

/* ============= END: Headline Styling ============= */ h1, h2, h3{

   font-family: "Roboto", sans-serif;
   color: #c1002a;
   font-size: 25px;
   clear: both;
   font-weight: 400;
   line-height: 1.2;

}

/* ============= Full Width Banners ============= */

banner_home{

   margin:0;
   padding: 0px;
   background-image: url("../wiki/images/8/89/Freiburg_frontpage_banner.jpg");
   background-repeat: no-repeat;
   background-size:   cover;
   width: 100%;
   height: 400px;

}

banner_team{

   margin:0;
   padding: 0px;
   background-image: url("../wiki/images/e/e7/FreiburgTeam2015.jpg");
   background-repeat: no-repeat;
   background-size:   cover;
   width: 100%;
   height: 400px;

}

banner_labjournal{

   margin:0;
   padding: 0px;
   background-image: url("");
   background-repeat: no-repeat;
   background-size:   cover;
   width: 100%;
   height: 400px;

}

/* ============= END: Full Width Banners ============= */ /*

Our Team Flipcards css ----------------

/

.flippanel {

   width: 227px;
   height: 341px;
   margin: auto;
   position: relative;

}

.card {

   width: 227px;
   height: 341px;
   -o-transition: all .5s;
   -ms-transition: all .5s;
   -moz-transition: all .5s;
   -webkit-transition: all .5s;
   transition: all .5s;
   -webkit-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;
   position: absolute;
   top: 0px;
   left: 0px;

}

.front {

   z-index: 2;

}

.back { overflow: auto;

   z-index: 1;
   -webkit-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);  
   transform: rotateY(180deg);

}

.flippanel:hover .front {

   z-index: 1;
   -webkit-transform: rotateY(-180deg);
   -ms-transform: rotateY(-180deg);
   -moz-transform: rotateY(-180deg);
   transform: rotateY(-180deg);

}

.flippanel:hover .back {

   z-index: 2;   
   -webkit-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   transform: rotateX(0deg);

} .memberPicture{

   width: 227px;
   height: 341px;

}

.profile-name {

   font-size: 120%;
   color: #c1012a;
   font-style: bold;

} .profile-question{

   color: #004c97;

}

.flippanel_row{

   margin-top: 25px;
   display: flex;

} /*

END Our Team Flipcards css ----------------

/

/* ======================= content boxes =================== */ .content_box{

   border: 3px solid #5781BD;
   border-radius: 30px 60px;
   overflow: hidden;
   padding: 2em;
   margin: 2em 0;
   background-color: #F9F9F9;
   text-align: justify;

}

/* ====================== image boxes =================== */ .image_box{

   overflow: hidden;

}

/* =================== END of image box =================== */

.tags{ /* remove tags from bottom */

   font-size: 0;

}

acronym{ /* remove text-decoration from acronyms*/

   border-bottom: none;
   text-decoration: none;
   cursor: auto;

}

/* allow placing of several images including caption in one row */

.flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/

   font-size: 70%;
   padding: 0 10px;
   text-align: justify;

}

.flexbox{

   display: flex;
   margin: 5% 0;

}