"
Team:EPF-Lausanne/Template/style.css
From 2012.igem.org
/* Common css */ @import url(http://fonts.googleapis.com/css?family=Merriweather:700); @import url(http://fonts.googleapis.com/css?family=Happy+Monkey);
body{
background: url("
");
background-repeat: repeat;
background-position: top left;
margin: 0;
color: #333;
}
.span2{
pointer-events:none;
}
legend{
background: none !important;
}
.paper-arrow{
display: block;
width: 30px;
height: 42px;
background: url("
");
position: relative;
top: -30px;
margin-bottom: -42px; margin-top: -32px; z-index: 70;
pointer-events:none;
}
@-moz-document url-prefix() {
.paper-arrow{
top: 0;
}
}
.objects{ margin-top: -100px; } .protocol-inner-box{ border-left: 1px solid rgb(150, 150, 130); padding-left: 10px; }
.day-empty{ color: rgb(240, 190, 180); }
.simple-navi li a{ text-decoration: none !important; }
.banner{
background: url("
");
height: 197px;
width: 800px;
margin: 40px auto 30px;
}
.footer{
background: url("
");
background-color: white;
border: 1px solid #999;
border-bottom: 0;
/* width: 1100px; */
/* margin: 60px auto -20px; */
margin: 60px auto -20px;
/*border-radius: 3px 3px 0 0;*/
box-shadow: 0px 0px 8px #555, 0 0 3px #AAA inset;
color: black;
max-width: 1000px;
}
.footer-inner{
width: 100%;
/*background: url("
"), url("
"), url("
");
background-repeat: repeat-x, repeat-y, repeat-y;
background-position: top left, top left, top right;
border-radius: 2px 2px 0 0;*/
}
.footer-inner-inner{ padding: 20px 170px; }
.footer h2{ font-size: 0.9em; }
.paper{
background: url("");
background-color: white;
border: 1px solid #999;
/* width: 1100px; */
margin: auto;
/*border-radius: 3px;*/
box-shadow: 0px 0px 8px #555, 0 0 3px #AAA inset;
text-align: justify;
max-width: 1000px;
min-width: 660px;
}
.paper-inner{
/*background: url(""), url("
"), url(""), url("");
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
border-radius: 2px;*/
width: 100%;
}
.page-content{
padding: 0 0 20px 0;
margin-top: -70px;
}
- content{
font-family: verdana, sans-serif; font-size: 11pt; } h1, h2, h3{ font-family: 'Merriweather', serif; } .menu{ float:left; width:100%; overflow:hidden; position:relative; top:-60px;
} @-moz-document url-prefix() {
.menu{
top: -80px;
}
}
.clear{
clear: both;
}
.spacer{
padding: 10px;
}
.menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
margin-top: 70px;
}
.menu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
background-image: url("
");
background-repeat: repeat-x;
}
.no-display{ display: none; }
.menu{
min-width: 660px;
}
.menu ul li.left {
background-image: url("
");
background-repeat: no-repeat;
background-position: top right !important;
width: 30px;
}
.menu ul li.right {
background-image: url("
");
background-repeat: no-repeat;
background-position: top left !important;
width: 30px;
}
.menu ul li:nth-child(5n+1){
background-position: 0px 0;
}
.menu ul li:nth-child(5n+2){
background-position: -60px 0;
}
.menu ul li:nth-child(5n+3){
background-position: -120px 0;
}
.menu ul li:nth-child(5n+4){
background-position: -180px 0;
}
.menu ul li:nth-child(5n){
background-position: -240px 0;
}
.menu ul li span{
display: block;
background-repeat: no-repeat;
padding: 0px 10px 15px;
margin: 10px 4px;
height: 5px;
font-family: 'Happy Monkey', sans-serif;
font-size: 12pt;
color: white;
}
.sub-menu{
float:left;
width:100%;
min-width: 660px;
height: 40px;
overflow:hidden;
position:relative;
top: -80px; pointer-events:none;
}
@-moz-document url-prefix() {
.sub-menu{
top:-98px;
}
}
.sub-menu .simple-navi {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
margin-top: 10px;
}
.sub-menu .simple-navi ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
background-image: url("
");
background-repeat: repeat-x;
pointer-events: all;
}
.sub-menu .simple-navi ul li.left {
background-image: url("
");
background-repeat: no-repeat;
background-position: top right !important;
width: 23px;
}
.sub-menu .simple-navi ul li.right {
background-image: url("
");
background-repeat: no-repeat;
background-position: top left !important;
width: 23px;
}
.sub-menu .simple-navi ul li:nth-child(5n+1){
background-position: 0px 0;
}
.sub-menu .simple-navi ul li:nth-child(5n+2){
background-position: -40px 0;
}
.sub-menu .simple-navi ul li:nth-child(5n+3){
background-position: -80px 0;
}
.sub-menu .simple-navi ul li:nth-child(5n+4){
background-position: -120px 0;
}
.sub-menu .simple-navi ul li:nth-child(5n){
background-position: -160px 0;
}
.sub-menu .simple-navi ul li span{
display: block;
background-repeat: no-repeat;
padding: 0px 20px 15px;
margin: 3px 10px 10px;
height: 0px;
font-family: 'Happy Monkey', sans-serif;
font-size: 14px;
color: white;
}
.caption-right{ float: right; padding: 5px; border: 1px solid #888; margin: 5px; margin-left: 15px; margin-right: 0; background: rgba(255, 255, 255, 0.3); color: #444; width: 200px; }
.caption-left{ float: left; padding: 5px; border: 1px solid #888; margin: 5px; margin-left: 0; margin-right: 15px; background: rgba(255, 255, 255, 0.3); color: #444; width: 200px; }
- toc{
display: none; width: 300px; float: right; margin-left: 20px; margin-top: -60px; margin-right: -180px; padding-left: 10px; }
.toclevel-1{ margin-bottom: 5px; }
.toclevel-2{ margin-bottom: 4px; }
.toclevel-3{ margin-bottom: 2px; }
.toc h2{ font-size: 0.8em; margin-bottom: -10px; }
.toc ul{ margin-left: -20px; }
.tocnumber{ display: none; }
.toctext:before{ content: "- "; }
.caption-right img{ margin-bottom: 5px; }
.menu-2{
width: 180px;
background: url("");
box-shadow: 0px 0px 8px #555;
text-align: justify;
border-radius: 3px;
border: 1px solid #999;
float: right;
margin-top: 50px;
margin-right: -200px;
}
.menu-2-inner{
padding: 30px;
width: 100%;
background: url(""), url(""), url(""), url("");
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, 160px -25px;
border-radius: 2px;
}
.menu-2 ul{ padding: 0; margin: 0; list-style-type: none; }
.menu-2 ul li{ padding: 0; margin: 0; list-style-type: none; }
/* Planning */
.planning-finished{ background-color: rgba(0, 255, 0, 0.3); padding: 2px; }
.planning-taken{ background-color: rgba(255, 255, 0, 0.3); padding: 2px; }
.planning-todo{ background-color: rgba(255, 0, 0, 0.3); padding: 2px; }
.doodle-bar{ width: 120px; margin-left: auto; margin-right: auto; }
.left{ float: left; } .right{ float: right; }
.gallery .left{ margin-right: 20px; }
.gallery .right{ margin-left: 20px; } /* dd:before{ content: ""; display: block; }
dt{ float: left; margin-left: 5px; display: block; }*/
@media (max-width: 799px) {
.banner{
background: url("
") !important;
height: 148px;
width: 600px;
margin: 40px auto 30px;
}
}
@media (max-width: 767px) { .page-content{ padding: 0 30px 20px 15px; } .doodle-bar{ display: none; } .footer-inner-inner{ padding: 20px 15px; } .footer-inner-inner .row-fluid .span4{ float: left; margin-right: 20px; } }
/* Simple calendar CSS */ table.calendar { margin: 0; padding: 10px; margin-left: auto; margin-right: auto; } table.calendar td { margin: 0; padding: 2px; vertical-align: top; } table.month .heading td { padding:2px; background-color:#d4d4d4; color:#aaa; text-align:center; font-size:120%; font-weight:bold; } table.month .dow td { color:#aaa; text-align:center; font-size:110%; } table.month td.today { background-color:#ddd; } table.month td {
border: none; margin: 0; padding: 1pt 1.5pt; font-weight: bold; font-size: 8pt; text-align: right; background-color: #eee; }
- bodyContent table.month a { background:none; padding:0 }
.day-active { color:#0000cc } .day-empty { color:#cc0000 }
