Team:EPF Lausanne/template/style.css

From 2013.igem.org

(Difference between revisions)
 
(17 intermediate revisions not shown)
Line 15: Line 15:
.footer a {
.footer a {
   color: white;
   color: white;
 +
}
 +
.tiremark {
 +
  position: absolute;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
.checkmark-list li{
 +
    list-style: none;
 +
}
 +
.checkmark-list li:before {
 +
    content: "✔ ";
 +
}
 +
.box {
 +
    background: #ffee90;
 +
    width: 290px;
 +
    height: 290px;
 +
    padding: 25px;
 +
    margin: 25px;
 +
    float: left;
 +
    border: 4px solid black;
 +
    border-radius: 25px;
 +
}
 +
.box:hover {
 +
background: #eed755;
 +
}
 +
.box-1 .box-image {
 +
padding-top: 0px;
 +
padding-left: 25px;
 +
height: 210px;
 +
vertical-align: bottom;
 +
}
 +
.box-2 .box-image {
 +
padding-top: 0px;
 +
padding-left: 15px;
 +
height: 210px;
 +
vertical-align: bottom;
 +
}
 +
.box-3 .box-image {
 +
padding-top: 0px;
 +
padding-left: 15px;
 +
height: 210px;
 +
vertical-align: bottom;
 +
}
 +
.box-4 .box-image {
 +
padding-top: 0px;
 +
padding-left: 15px;
 +
height: 210px;
 +
vertical-align: bottom;
 +
}
 +
.box-text {
 +
font-size: 24px;
 +
text-align: center;
 +
padding: 30px 0 0;
 +
}
 +
.month {
 +
    margin-right: 15px;
 +
    margin-left: 15px;
 +
}
 +
table {
 +
background: transparent !important;
 +
}
 +
table td {
 +
vertical-align: top;
 +
}
 +
.day-empty{ color: red; }
 +
.tiremark-inner {
 +
  background: url("https://static.igem.org/mediawiki/2013/d/dd/Team-EPF-Lausanne_Track.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
 +
  height: 300px;
 +
  width: 140%;
 +
  margin-top: 500px;
 +
  -webkit-transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750); -moz-transform: matrix(0.983,0.184,-0.184,0.983,-100.066px,11.750px); -ms-transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750); -o-transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750); transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750);
 +
  z-index: 0;
}
}
.page {
.page {
Line 21: Line 97:
   background: rgb(230, 230, 230);
   background: rgb(230, 230, 230);
   box-shadow: 0 0 10px black;
   box-shadow: 0 0 10px black;
 +
  position: relative;
 +
  z-index: 10;
}
}
.page-content {
.page-content {
Line 65: Line 143:
   top: 340px;
   top: 340px;
   width: 100%;
   width: 100%;
 +
  z-index: 20;
}
}
Line 105: Line 184:
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ce00', endColorstr='#7f6600',GradientType=0 ); /* IE6-9 */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ce00', endColorstr='#7f6600',GradientType=0 ); /* IE6-9 */
     font-size: 18px;
     font-size: 18px;
 +
}
 +
.menu-item li {
 +
    margin: 0;
}
}
.menu-item a {
.menu-item a {
Line 114: Line 196:
     text-decoration: none;
     text-decoration: none;
}
}
 +
 +
.menu-item ul {
 +
    background: #f5ce00;
 +
    border: 2px solid black;
 +
    border-radius: 5px;
 +
    padding: 0;
 +
    margin: 0;
 +
    margin-top: 5px;
 +
    margin-left: -35px;
 +
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
 +
}
 +
.menu-item ul a {
 +
    border-bottom: 2px solid black;
 +
    background: #f5ce00; /* Old browsers */
 +
    background: -moz-linear-gradient(top, #f5ce00 0%, #f5ce00 75%, #d1aa00 92%, #7f6600 100%); /* FF3.6+ */
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5ce00), color-stop(75%,#f5ce00), color-stop(92%,#d1aa00), color-stop(100%,#7f6600)); /* Chrome,Safari4+ */
 +
    background: -webkit-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* Chrome10+,Safari5.1+ */
 +
    background: -o-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* Opera 11.10+ */
 +
    background: -ms-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* IE10+ */
 +
    background: linear-gradient(to bottom, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* W3C */
 +
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ce00', endColorstr='#7f6600',GradientType=0 ); /* IE6-9 */
 +
    padding: 0 !important;
 +
    margin: 0 !important;
 +
}
 +
.menu-item ul a:last-child {
 +
    border-bottom: none;
 +
}
 +
.menu-item ul a:hover {
 +
    background: #f5ce00; /* Old browsers */
 +
    background: -moz-linear-gradient(top, #7f6600 0%, #d1aa00 8%, #f5ce00 25%, #f5ce00 100%); /* FF3.6+ */
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f6600), color-stop(8%,#d1aa00), color-stop(25%,#f5ce00), color-stop(100%,#f5ce00)); /* Chrome,Safari4+ */
 +
    background: -webkit-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* Chrome10+,Safari5.1+ */
 +
    background: -o-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* Opera 11.10+ */
 +
    background: -ms-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* IE10+ */
 +
    background: linear-gradient(to bottom, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* W3C */
 +
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f6600', endColorstr='#f5ce00',GradientType=0 ); /* IE6-9 */
 +
}
 +
div.menu-item-selected {
div.menu-item-selected {
     background: #f5ce00; /* Old browsers */
     background: #f5ce00; /* Old browsers */

Latest revision as of 13:43, 3 October 2013

  1. top-section{
 display: block !important;
 height: 0px;

}

  1. pt-login {
 visibility: visible !important;

} body {

 margin: -15px 0 -6px 0;
 padding: 0;

} .all {

 background: rgb(180, 180, 180);

} .footer a {

 color: white;

} .tiremark {

 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 margin: 0;
 padding: 0;

} .checkmark-list li{

   list-style: none;

} .checkmark-list li:before {

   content: "✔ ";

} .box {

   background: #ffee90;
   width: 290px;
   height: 290px;
   padding: 25px;
   margin: 25px;
   float: left;
   border: 4px solid black;
   border-radius: 25px;

} .box:hover { background: #eed755; } .box-1 .box-image { padding-top: 0px; padding-left: 25px; height: 210px; vertical-align: bottom; } .box-2 .box-image { padding-top: 0px; padding-left: 15px; height: 210px; vertical-align: bottom; } .box-3 .box-image { padding-top: 0px; padding-left: 15px; height: 210px; vertical-align: bottom; } .box-4 .box-image { padding-top: 0px; padding-left: 15px; height: 210px; vertical-align: bottom; } .box-text { font-size: 24px; text-align: center; padding: 30px 0 0; } .month {

   margin-right: 15px;
   margin-left: 15px;

} table { background: transparent !important; } table td { vertical-align: top; } .day-empty{ color: red; } .tiremark-inner {

 background: url("Team-EPF-Lausanne_Track.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
 height: 300px;
 width: 140%;
 margin-top: 500px;
 -webkit-transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750); -moz-transform: matrix(0.983,0.184,-0.184,0.983,-100.066px,11.750px); -ms-transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750); -o-transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750); transform: matrix(0.983,0.184,-0.184,0.983,-100.066,11.750);
 z-index: 0;

} .page {

 width: 1000px;
 margin: auto;
 background: rgb(230, 230, 230);
 box-shadow: 0 0 10px black;
 position: relative;
 z-index: 10;

} .page-content {

 padding: 150px 100px 40px;

} .footer {

 padding: 15px 100px;

} .title {

 padding: 0 !important;

} .title > div {

 width: 925px;
 margin: auto;
 padding-top: 25px;
 padding-bottom: 25px;

} .title, .footer {

 background: rgb(40, 40, 40);
 padding-top: 20px;
 padding-bottom: 20px;
 color: white;

} nav ul{

   background: white;
   padding: 5px 0;
   width: 200px;
   margin-left: -20px;
   font-size: 16px;

}

nav ul li {

   list-style-type: none !important;
   list-style-image: none;

}

.menu-item-selected ul {

   display: block !important;

}

.menu {

 height: 130px;
 position: absolute;
 top: 340px;
 width: 100%;
 z-index: 20;

}

.menu nav{

 width: 800px;
 margin: auto;

} .taxi-cell {

 width: 100%;

} .taxi-pattern {

 width: 100%;
 height: 20px;
 background: url(/wiki/images/6/60/Team-EPF_Lausanne_pattern.png);
 border-top: 5px solid black;
 border-bottom: 5px solid black;
 box-shadow: 0 0 5px black;

}

  1. taxi {
 position: relative;
 left: 0;
 margin-bottom: 5px;

} .menu-item {

   float: left;
   width: 130px;
   height: 50px;
   background: #F5CE00;
   border: 2px solid black;
   border-right: 0;
   border-top: 0;
   text-align: center;
   background: #f5ce00; /* Old browsers */
   background: -moz-linear-gradient(top, #f5ce00 0%, #f5ce00 75%, #d1aa00 92%, #7f6600 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5ce00), color-stop(75%,#f5ce00), color-stop(92%,#d1aa00), color-stop(100%,#7f6600)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* IE10+ */
   background: linear-gradient(to bottom, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ce00', endColorstr='#7f6600',GradientType=0 ); /* IE6-9 */
   font-size: 18px;

} .menu-item li {

   margin: 0;

} .menu-item a {

   color: black;
   width: 100%;
   height: 100%;
   display: block;
   line-height: 50px;
   text-decoration: none;

}

.menu-item ul {

   background: #f5ce00;
   border: 2px solid black;
   border-radius: 5px;
   padding: 0;
   margin: 0;
   margin-top: 5px;
   margin-left: -35px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);

} .menu-item ul a {

   border-bottom: 2px solid black;
   background: #f5ce00; /* Old browsers */
   background: -moz-linear-gradient(top, #f5ce00 0%, #f5ce00 75%, #d1aa00 92%, #7f6600 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5ce00), color-stop(75%,#f5ce00), color-stop(92%,#d1aa00), color-stop(100%,#7f6600)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* IE10+ */
   background: linear-gradient(to bottom, #f5ce00 0%,#f5ce00 75%,#d1aa00 92%,#7f6600 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ce00', endColorstr='#7f6600',GradientType=0 ); /* IE6-9 */
   padding: 0 !important;
   margin: 0 !important;

} .menu-item ul a:last-child {

   border-bottom: none;

} .menu-item ul a:hover {

   background: #f5ce00; /* Old browsers */
   background: -moz-linear-gradient(top, #7f6600 0%, #d1aa00 8%, #f5ce00 25%, #f5ce00 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f6600), color-stop(8%,#d1aa00), color-stop(25%,#f5ce00), color-stop(100%,#f5ce00)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* IE10+ */
   background: linear-gradient(to bottom, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f6600', endColorstr='#f5ce00',GradientType=0 ); /* IE6-9 */

}

div.menu-item-selected {

   background: #f5ce00; /* Old browsers */
   background: -moz-linear-gradient(top, #7f6600 0%, #d1aa00 8%, #f5ce00 25%, #f5ce00 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f6600), color-stop(8%,#d1aa00), color-stop(25%,#f5ce00), color-stop(100%,#f5ce00)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* IE10+ */
   background: linear-gradient(to bottom, #7f6600 0%,#d1aa00 8%,#f5ce00 25%,#f5ce00 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f6600', endColorstr='#f5ce00',GradientType=0 ); /* IE6-9 */

} .first-menu-item {

   border-radius: 0 0 0 5px;

} .last-menu-item {

   border-right: 2px solid black;
   border-radius: 0 0 5px 0;

} .menu-item ul {

   display: none;

}