Team:Tec-Monterrey/ITESM14 main.css

From 2014.igem.org

(Difference between revisions)
 
(75 intermediate revisions not shown)
Line 1: Line 1:
-
/* Special thanks to the TU-Munich team for their stylesheet */
+
#globalWrapper {
-
 
+
     font-family: 'Yanone Kaffeesatz';
-
 
+
     background: url(https://static.igem.org/mediawiki/2014/4/44/ITESM14_background.png);
-
/* Reset the wiki style by overriding with a reset stylesheet (written by Florian Albrecht)
+
-
  the relevant wiki css rules are reset by using rules with higher priority */
+
-
 
+
-
 
+
-
/* Start general reset ================================================== */
+
-
 
+
-
html body {
+
-
    font-size: inherit;
+
-
     font-family: inherit;
+
-
     background-color: transparent;
+
-
    color: inherit;
+
-
    padding: 0;
+
}
}
-
div#globalWrapper {
+
a {
-
    font-size: inherit;
+
  color:#46008b;
-
    margin: 0;
+
-
    padding: 0;
+
-
    position: static;
+
-
    width: auto;
+
}
}
-
 
+
a:hover{
-
 
+
text-decoration: none;
-
/* Start top-section reset ============================================== */
+
font-weight:400;
-
 
+
color:#36d8c5;
-
div#top-section {
+
-
    border: 0;
+
-
    height: auto;
+
-
    margin: 0;
+
-
    position: static;
+
-
    width: auto;
+
}
}
-
div#p-logo {
+
/*Accordion*/
-
    height: auto;
+
.panel .panel-heading{
-
    position: static;
+
  background-color: #ff0070;
-
    width: auto;
+
  color: #ffffff;
-
    z-index: auto;
+
}
}
-
 
+
.panel-title{
-
div#p-logo a, div#p-logo a:hover {
+
  font-size: 1.5vw;
-
    text-decoration: none;
+
  font-weight: 400;
}
}
-
 
+
.panel-body {
-
div#menubar {
+
  font-size: 1.2vw;
-
    font-family: inherit;
+
-
    font-size: inherit;
+
-
    line-height: inherit;
+
-
    position: static;
+
-
    top: 0px;
+
-
    white-space: normal;
+
-
    width: auto;
+
-
    z-index: auto;
+
}
}
-
div.left-menu, div.left-menu a {
+
/* end accordion */
-
    color: inherit;
+
-
    left: 0;
+
-
    text-align: left;
+
-
    text-transform: none;
+
-
}
+
-
div#menubar ul {
+
body {
-
    color: inherit;
+
  font-family: 'Yanone Kaffeesatz';
-
    list-style: disc outside none;
+
  background: url(https://static.igem.org/mediawiki/2014/4/44/ITESM14_background.png);
-
    margin: 0;
+
-
    padding: 0;
+
}
}
-
div#menubar li {
+
/*Change selection color*/
-
    cursor: auto;
+
p::selection, h1::selection, em::selection, strong::selection, figcaption::selection, a::selection, tr::selection, td::selection, li::selection, th::selection, u::selection, sub::selection, i::selection{
-
    display: list-item;
+
     background:#ff0070;
-
    padding: 0;
+
     color:#ffffff;
-
     margin: 0;
+
-
     position: static;
+
}
}
-
 
+
p::-moz-selection, h1::-moz-selection, em::-moz-selection, strong::-moz-selection, figcaption::-moz-selection, a::-moz-selection,tr::-moz-selection, td::-moz-selection, li::-moz-selection, th::-moz-selection, u::-moz-selection, sub::-moz-selection, i::-moz-selection{
-
div.left-menu li a {
+
     background:#ff0070;
-
     padding: 0;
+
    color:#ffffff;
}
}
-
 
-
div.left-menu:hover {
 
-
    color: inherit;
 
-
    background-color: transparent;
 
-
}
 
-
 
-
div.left-menu:hover a {
 
-
    color: inherit;
 
-
}
 
-
 
-
div.right-menu, div.right-menu a {
 
-
    color: inherit;
 
-
    right: 0;
 
-
    text-align: left;
 
-
}
 
-
 
-
div.right-menu li a {
 
-
    background-color: transparent;
 
-
    color: inherit;
 
-
    padding: 0;
 
-
}
 
-
 
-
div.right-menu li a:hover {
 
-
    color: inherit;
 
-
    text-decoration: none;
 
-
}
 
-
 
-
div#search-controls {
 
-
    background-color: transparent;
 
-
    height: auto;
 
-
    position: static;
 
-
    right: 0;
 
-
    text-align: left;
 
-
    top: 0;
 
-
    width: auto;
 
-
    z-index: auto;
 
-
}
 
-
 
-
 
-
/* Start content reset ================================================== */
 
-
 
-
div#content {
 
-
    background: transparent;
 
-
    border: 0;
 
-
    color: inherit;
 
-
    line-height: inherit;
 
-
    margin: 0;
 
-
    padding: 0;
 
-
    position: static;
 
-
    width: auto;
 
-
    z-index: auto;
 
-
}
 
-
 
-
body li {
 
-
    margin: 0;
 
-
}
 
-
 
-
body h1, body h2, body h3, body h4, body h5, body h6 {
 
-
    background: transparent;
 
-
    border: 0;
 
-
    color: inherit;
 
-
    padding: 0;
 
-
}
 
-
 
-
body .firstHeading {
 
-
    margin: 0;
 
-
}
 
-
 
-
div#contentSub {
 
-
    color: inherit;
 
-
    font-size: inherit;
 
-
    line-height: inherit;
 
-
    margin: 0;
 
-
    width: auto;
 
-
}
 
-
 
-
div#catlinks {
 
-
    background-color: transparent;
 
-
    border: 0;
 
-
    clear: both;
 
-
    margin: 0;
 
-
    padding: 0;
 
-
}
 
-
 
-
 
-
/* Start footer reset =================================================== */
 
-
 
-
div#footer-box {
 
-
    background-color: transparent;
 
-
    border: 0;
 
-
    margin: 0;
 
-
    padding: 0;
 
-
    width: auto;
 
-
}
 
-
 
-
div#footer {
 
-
    color: inherit;
 
-
    font-size: inherit;
 
-
    text-align: left;
 
-
}
 
-
 
-
div#f-poweredbyico, div#f-copyrightico {
 
-
    float: none;
 
-
}
 
-
 
-
div#footer li {
 
-
    margin: 0;
 
-
    display: list-item;
 
-
}
 
-
 
-
 
-
 
/* Remove logo and search */
/* Remove logo and search */
Line 203: Line 51:
div#top-section {
div#top-section {
     margin: 0px auto;
     margin: 0px auto;
-
     width: 930px;
+
     width: auto;
     height: 20px;
     height: 20px;
     color: #d4c6b6;
     color: #d4c6b6;
-
     background: #411c03 url('https://static.igem.org/mediawiki/2013/b/b3/TUM13_brown-top-bg.png') repeat-x 50% 0%;
+
     background: transparent;
 +
    margin-top: 50px;
}
}
/* Set font and positions */
/* Set font and positions */
div#menubar {
div#menubar {
-
    font-weight: bold;
 
     font-size: 13px;
     font-size: 13px;
     line-height: 20px;
     line-height: 20px;
Line 217: Line 65:
div#menubar.right-menu {
div#menubar.right-menu {
 +
    margin-right: 134px;
     float: right;
     float: right;
 +
    display: none;
}
}
div#menubar.left-menu {
div#menubar.left-menu {
     float: left;
     float: left;
-
}
+
    margin-left: 360px;
-
 
+
     display: none;
-
/* Fix text */
+
-
div#menubar.left-menu a, div#menubar.left-menu li {
+
-
     text-transform: capitalize;
+
}
}
div#menubar li {
div#menubar li {
     padding: 0px 5px;
     padding: 0px 5px;
 +
    color: #FFFFFF;
     display: inline;
     display: inline;
}
}
Line 236: Line 84:
/* White on hover */
/* White on hover */
div#menubar a:hover {
div#menubar a:hover {
-
     color: #FFFFFF;
+
     color: ##f4ff3b;
     text-decoration: none;
     text-decoration: none;
}
}
-
 
-
div#menubar li[style="color:white;cursor:default"] {
 
-
    display: none;
 
-
}
 
-
 
-
/* End top-section style ================================================ */
 
Line 254: Line 96:
}
}
 +
#wiki-body p {
 +
    font-size: 20px;
 +
    font-weight: lighter;
 +
text-align:justify;
 +
}
 +
#wiki-content ul > li {
 +
    font-size: 20px;
 +
    font-weight: lighter;
 +
    line-height: 2em;
 +
}
-
body {
+
#column{
-
    font-family: 'Yanone Kaffeesatz';
+
-webkit-column-count:2;/*Chrome & Safari*/
-
    background: url('background.svg');
+
-moz-column-count:2;/*Firefox*/
 +
column-count:2;
 +
-webkit-column-gap:3em;
 +
-moz-column-gap:3em;
 +
column-gap: 3em;
}
}
-
h1 {
+
#primers{
-
    color: ff0060;
+
list-style-type: none;
 +
font-size: 13.5px;
 +
font-weight: lighter;
 +
padding-left: 0px;
}
}
 +
 +
#list{
 +
padding-left:0px;
 +
list-style-type:none;
 +
text-align:center;
 +
}
 +
 +
#other-table th{
 +
  background-color: #ff0070;
 +
  color: #ffffff;
 +
  text-align:center;
 +
  border-left: 5px double white;
 +
  border-right: 5px double white;
 +
  border-bottom: 5px double white;
 +
  border-top: 5px double white;
 +
  font-size: 1.5vw;
 +
  font-weight: 400;
 +
 +
  }
 +
 +
#other-table td{
 +
vertical-align:top;
 +
border-bottom: 2px dotted;
 +
text-align:left;
 +
padding-left: 15px;
 +
font-size: 1.2vw;
 +
  font-weight: lighter;
 +
}
-
p {
+
table,td{
-
    font-size: 20px;
+
  border-collapse:collapse;
-
    font-weight: lighter;
+
  padding-bottom: 3.5px;
 +
  padding-top: 5px;
 +
  padding-left: 10px;
 +
  padding-right: 10px;
 +
  font-size: 1.2vw;
 +
  font-weight: lighter;
 +
  vertical-align:top;
 +
}
 +
td>strong{
 +
  font-weight: 400;
 +
  font-size: 1.3vw;
 +
}
 +
th {
 +
  padding: 0.5%;
 +
  background: #ffffff;
 +
  color:#ff0070;
 +
  font-size: 1.5vw;
 +
  font-weight: 400;
 +
}
 +
#ttitle{
 +
text-align:center;
 +
font-size:2.3vw;
 +
  font-weight: 700;
 +
}
 +
#tsubtitletd{
 +
border-bottom: 1px dotted black;
 +
}
 +
#tsubtitle2{
 +
border-top: 1px dotted black;
 +
border-bottom: 1px dotted black;
}
}
-
.navbar-default {
+
.mypic {
-
     background-color: #451d8e;
+
     z-index: 2000;
-
    border-color: #ff0060;
+
}
}
-
.navbar-default .navbar-brand {
+
 
-
     color: f4ff3b;
+
.main-content {
 +
     z-index: -4;
}
}
-
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
+
 
-
     color: f4ff3b;
+
.well {
 +
    z-index: -6;
 +
    background-color: #ffffff;
 +
     border: 0px;
 +
    border-radius: 0px;
}
}
-
.navbar-default .navbar-text {
+
 
-
     color: f4ff3b;
+
h1 {
 +
     color: #ff0060;
}
}
-
.navbar-default .navbar-nav > li > a {
+
 
-
     color: f4ff3b;
+
/*================ Hacer video resposivo ================*/
 +
 
 +
.video-container {
 +
    position: relative;
 +
    padding-bottom: 56.25%;
 +
    padding-top: 30px;
 +
    margin-bottom: 5%;
 +
    height: 0;
 +
}
 +
 +
.video-container iframe,
 +
.video-container object,
 +
.video-container embed {
 +
     position: absolute;
 +
    top: 30px;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
}
}
-
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
+
 
-
    color: f4ff3b;
+
/*============= Fin video responsivo ==============*/
 +
 
 +
/*============= Modulos pagina de inicio ==========*/
 +
 
 +
#modulos h1 {
 +
  position: absolute;
 +
  top: 0;
 +
  color: #f4ff3b;
 +
  font-weight: 700;
 +
  font-size: 2.2vw;
 +
  border-bottom: 3px solid;
 +
  margin-top: 0px;
}
}
-
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+
#modulos .texto-modulos p {
-
    color: f4ff3b;
+
  color: #ffffff;
-
    background-color: #ff0060;
+
  font-weight:300;
 +
  font-size:1.6vw;
 +
  text-align: center;
 +
  padding-top: 100px;
}
}
-
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
+
#modulos .texto-modulos{
-
    color: f4ff3b;
+
  height: 100%;
-
    background-color: #ff0060;
+
  position: absolute;
 +
  top: 0;
 +
  background-color: rgba(0,0,0,0.3);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 500ms;
 +
  -moz-transition: opacity 500ms;
 +
  -o-transition: opacity 500ms;
 +
  transition: opacity 500ms;
}
}
-
.navbar-default .navbar-toggle {
+
#modulos .texto-modulos:hover {
-
    border-color: #ff0060;
+
  opacity: 1;
}
}
-
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+
 
-
     background-color: #ff0060;
+
 
 +
 
 +
/*=================== Footer ===================*/
 +
 
 +
 
 +
div#footer {
 +
    width: 920px;
 +
    margin: 0px auto;
 +
     padding: 0px 20px;
 +
    text-align: center;
}
}
-
.navbar-default .navbar-toggle .icon-bar {
+
 
-
    background-color: f4ff3b;
+
div#footer ul {
 +
  margin: 0;
 +
  padding: 0;
}
}
-
.navbar-default .navbar-collapse,
+
 
-
.navbar-default .navbar-form {
+
div#footer li {
-
     border-color: f4ff3b;
+
     padding: 0px 5px;
 +
    display: inline;
}
}
-
.navbar-default .navbar-link {
+
 
-
     color: f4ff3b;
+
 
 +
footer{
 +
     height: 245px;
 +
    position:relative;
 +
    z-index:20;
 +
    background-color:#451d8e;
}
}
-
.navbar-default .navbar-link:hover {
+
 
-
     color: f4ff3b;
+
div#footer-box {
 +
     background-color: #451d8e;
}
}
-
@media (max-width: 767px) {
+
div#footer {
-
     .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+
     width: auto;
-
        color: f4ff3b;
+
     margin: 0px auto;
-
     }
+
     padding: 0px 20px;
-
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+
    text-align: center;
-
        color: f4ff3b;
+
-
     }
+
-
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+
-
        color: f4ff3b;
+
-
        background-color: #ff0060;
+
-
    }
+
}
}
-
.mypic {
+
div#footer ul {
-
    z-index: 2000;
+
  margin: 0;
 +
  padding: 0;
}
}
-
.main-content {
+
div#footer li {
-
     z-index: -4;
+
     padding: 0px 5px;
-
     margin-top: 220;
+
     display: inline;
}
}
-
.well {
+
div#footer li#t-recentchangeslinked {
-
     z-index: -6;
+
     display: none;
-
     background-color: #ffffff;
+
}
-
     border: 0px;
+
 
-
     border-radius: 0px;
+
div#footer-box a {
-
     opacity: 0.9;
+
    color: #FFFFFF;
 +
    font-size: 12px;
 +
}
 +
 
 +
div#footer-box a:hover {
 +
     text-decoration: underline;
 +
}
 +
 
 +
div#footer div#f-poweredbyico {
 +
    margin-top: 3px;
 +
     float: right;
 +
}
 +
 
 +
div#footer div#f-copyrightico {
 +
     margin-top: 3px;
 +
     float: left;
}
}

Latest revision as of 02:27, 18 October 2014

  1. globalWrapper {
   font-family: 'Yanone Kaffeesatz';
   background: url(ITESM14_background.png);

}

a {

  color:#46008b;

} a:hover{

text-decoration: none;
font-weight:400;
color:#36d8c5;

}

/*Accordion*/ .panel .panel-heading{

 background-color: #ff0070;
 color: #ffffff;

} .panel-title{

 font-size: 1.5vw;
 font-weight: 400;

} .panel-body {

 font-size: 1.2vw;

}

/* end accordion */

body {

 font-family: 'Yanone Kaffeesatz';
 background: url(ITESM14_background.png);

}

/*Change selection color*/ p::selection, h1::selection, em::selection, strong::selection, figcaption::selection, a::selection, tr::selection, td::selection, li::selection, th::selection, u::selection, sub::selection, i::selection{

   background:#ff0070;
   color:#ffffff;

} p::-moz-selection, h1::-moz-selection, em::-moz-selection, strong::-moz-selection, figcaption::-moz-selection, a::-moz-selection,tr::-moz-selection, td::-moz-selection, li::-moz-selection, th::-moz-selection, u::-moz-selection, sub::-moz-selection, i::-moz-selection{

   background:#ff0070;
   color:#ffffff;

}

/* Remove logo and search */ div#p-logo, div#search-controls {

   display: none;

}

/* Center wiki-menu; set font & bg (as fallback) color */ div#top-section {

   margin: 0px auto;
   width: auto;
   height: 20px;
   color: #d4c6b6;
   background: transparent;
   margin-top: 50px;

}

/* Set font and positions */ div#menubar {

   font-size: 13px;
   line-height: 20px;

}

div#menubar.right-menu {

   margin-right: 134px;
   float: right;
   display: none;

}

div#menubar.left-menu {

   float: left;
   margin-left: 360px;
   display: none;

}

div#menubar li {

   padding: 0px 5px;
   color: #FFFFFF;
   display: inline;

}

/* White on hover */ div#menubar a:hover {

   color: ##f4ff3b;
   text-decoration: none;

}


/* Start header style =================================================== */

/* Hide page title (it would appear before the header) */ h1.firstHeading {

   display: none;

}

  1. wiki-body p {
   font-size: 20px;
   font-weight: lighter;

text-align:justify; }

  1. wiki-content ul > li {
   font-size: 20px;
   font-weight: lighter;
   line-height: 2em;

}

  1. column{

-webkit-column-count:2;/*Chrome & Safari*/ -moz-column-count:2;/*Firefox*/ column-count:2; -webkit-column-gap:3em; -moz-column-gap:3em; column-gap: 3em; }

  1. primers{

list-style-type: none; font-size: 13.5px; font-weight: lighter; padding-left: 0px; }

  1. list{

padding-left:0px; list-style-type:none; text-align:center; }

  1. other-table th{
 background-color: #ff0070;
 color: #ffffff;
 text-align:center;
 border-left: 5px double white;
 border-right: 5px double white;
 border-bottom: 5px double white;
 border-top: 5px double white;
 font-size: 1.5vw;
 font-weight: 400;

 }

#other-table td{
vertical-align:top;
border-bottom: 2px dotted;
text-align:left;
padding-left: 15px;
font-size: 1.2vw;
  font-weight: lighter;
}

table,td{

  border-collapse:collapse;
  padding-bottom: 3.5px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.2vw;
  font-weight: lighter;
  vertical-align:top;

} td>strong{

 font-weight: 400;
 font-size: 1.3vw;

} th {

  padding: 0.5%;
  background: #ffffff;
  color:#ff0070;
  font-size: 1.5vw;
  font-weight: 400;

}

  1. ttitle{

text-align:center; font-size:2.3vw;

 font-weight: 700;

}

  1. tsubtitletd{

border-bottom: 1px dotted black; }

  1. tsubtitle2{

border-top: 1px dotted black; border-bottom: 1px dotted black; }

.mypic {

   z-index: 2000;

}

.main-content {

   z-index: -4;

}

.well {

   z-index: -6;
   background-color: #ffffff;
   border: 0px;
   border-radius: 0px;

}

h1 {

   color: #ff0060;

}

/*================ Hacer video resposivo ================*/

.video-container {

   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   margin-bottom: 5%; 
   height: 0; 
}

.video-container iframe, .video-container object, .video-container embed {

   position: absolute;
   top: 30px;
   left: 0;
   width: 100%;
   height: 100%;

}

/*============= Fin video responsivo ==============*/

/*============= Modulos pagina de inicio ==========*/

  1. modulos h1 {
 position: absolute;
 top: 0;
 color: #f4ff3b;
 font-weight: 700;
 font-size: 2.2vw;
 border-bottom: 3px solid;
 margin-top: 0px;

}

  1. modulos .texto-modulos p {
 color: #ffffff;
 font-weight:300; 
 font-size:1.6vw; 
 text-align: center;
 padding-top: 100px;

}

  1. modulos .texto-modulos{
 height: 100%;
 position: absolute;
 top: 0;
 background-color: rgba(0,0,0,0.3);
 opacity: 0;
 -webkit-transition: opacity 500ms;
 -moz-transition: opacity 500ms;
 -o-transition: opacity 500ms;
 transition: opacity 500ms;

}

  1. modulos .texto-modulos:hover {
 opacity: 1;

}


/*=================== Footer ===================*/


div#footer {

   width: 920px;
   margin: 0px auto;
   padding: 0px 20px;
   text-align: center;

}

div#footer ul {

  margin: 0;
  padding: 0;

}

div#footer li {

   padding: 0px 5px;
   display: inline;

}


footer{

   height: 245px;
   position:relative;
   z-index:20;
   background-color:#451d8e;

}

div#footer-box {

   background-color: #451d8e;

}

div#footer {

   width: auto;
   margin: 0px auto;
   padding: 0px 20px;
   text-align: center;

}

div#footer ul {

  margin: 0;
  padding: 0;

}

div#footer li {

   padding: 0px 5px;
   display: inline;

}

div#footer li#t-recentchangeslinked {

   display: none;

}

div#footer-box a {

   color: #FFFFFF;
   font-size: 12px;

}

div#footer-box a:hover {

   text-decoration: underline;

}

div#footer div#f-poweredbyico {

   margin-top: 3px;
   float: right;

}

div#footer div#f-copyrightico {

   margin-top: 3px;
   float: left;

}