Team:Marburg/Template:Header

From 2013.igem.org

(Difference between revisions)
m
Line 286: Line 286:
#####
#####
-
 
-
body { padding-bottom: 20px }
 
-
#main { background: #fff; margin: auto; padding: 20px; max-width: 1200px }
 
-
#main h1 { padding:0; margin-top: 20px }
 
-
#main h2 { text-align: left }
 
-
#header { background-color: #eee; font-weight: normal; margin:0; padding:10px; border-bottom: 1px solid #ddd }
 
-
#logo { display: none }
 
-
 
-
table { margin: auto; border-collapse: separate; border-spacing: 20px }
 
-
td { vertical-align: top; text-align:center; width: 235px }
 
-
hr { margin-top: 20px; }
 
-
 
-
pre { text-align: left; overflow: visible }
 
-
code { background-color: #ffc }
 
pre code { background-color: #eee }
pre code { background-color: #eee }
Line 307: Line 293:
-moz-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; -webkit-border-radius: 10px;
}
}
-
td a { margin: 5px }
+
 
-
.nav { margin: 5px 0 }
+
/* ================================================================
-
#nav a, #s7 strong { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
+
This copyright notice must be kept untouched in the stylesheet at
-
#nav a.activeSlide { background: #ea0 }
+
all times.
-
#nav a:focus { outline: none; }
+
 
-
#output { text-align: left; }
+
The original version of this stylesheet and the associated (x)html
 +
is available at http://www.cssplay.co.uk/menus/cssplay-horizontal-accordian.html
 +
Copyright (c) Stu Nicholls. All rights reserved.
 +
This stylesheet and the associated (x)html may be modified in any
 +
way to fit your requirements.
 +
=================================================================== */
 +
b#p1, b#p2, b#p3, b#p4, b#p5 {display:none;}
 +
#accordian {padding:0; margin:50px auto; list-style:none; width:730px; height:300px; overflow:hidden; position:relative; border:1px solid #682;}
 +
#accordian li {width:50px; height:300px; float:left;
 +
-moz-transition: 0.7s;
 +
-ms-transition: 0.7s;
 +
-o-transition: 0.7s;
 +
-webkit-transition: 0.7s;
 +
transition: 0.7s;
 +
}
 +
#accordian div {width:530px; height:300px; position:relative;}
 +
#accordian div span {display:block; background:url(fade.png); width:460px; height:30px; position:absolute; bottom:300px; right:0; padding:10px; color:#fff; font:normal 13px/30px 'georgia', serif; border-top:1px solid #888;
 +
-moz-transition: 0.5s 0.7s;
 +
-ms-transition: 0.5s 0.7s;
 +
-o-transition: 0.5s 0.7s;
 +
-webkit-transition: 0.5s 0.7s;
 +
transition: 0.5s 0.7s;
 +
}
 +
#accordian div span a {color:#fff;}
 +
#accordian li div > a {display:block; width:49px; height:300px; float:left; position:relative; color:#fff; text-decoration:none;  box-shadow:-10px 0 10px -10px rgba(0,0,0,0.6);}
 +
#accordian li div > a b {display:block; width:280px; padding-left:20px; height:50px; position:absolute; left:50px; bottom:0; font:bold 24px/50px 'georgia', serif; text-shadow:0 0 2px rgba(0, 0, 0, 0.6);
 +
*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 +
transform: rotate(-90deg);
 +
transform-origin:bottom left;
 +
-ms-transform: rotate(-90deg);
 +
-ms-transform-origin:bottom left;
 +
-webkit-transform: rotate(-90deg);
 +
-webkit-transform-origin:bottom left;
 +
-moz-transform: rotate(-90deg);
 +
-moz-transform-origin:bottom left;
 +
-o-transform: rotate(-90deg);
 +
-o-transform-origin:bottom left;
 +
}
 +
#accordian li div > a b {*left:0;}
 +
#accordian li img {display:block; float:left;}
 +
#accordian li.p1 {width:530px;}
 +
#accordian li.p1 div span {bottom:0;}
 +
 
 +
#accordian li a.a1 {background:#460; border-left:1px solid #682;}
 +
#accordian li a.a2 {background:#793; border-left:1px solid #9b5;}
 +
#accordian li a.a3 {background:#ac3; border-left:1px solid #ce5;}
 +
#accordian li a.a4 {background:#cd5; border-left:1px solid #ef7;}
 +
#accordian li a.a5 {background:#069; border-left:1px solid #28b;}
 +
 
 +
#p1:target ~ #accordian li {width:50px;}
 +
#p1:target ~ #accordian li div span {bottom:300px;}
 +
#p1:target ~ #accordian li.p1 {width:530px;}
 +
#p1:target ~ #accordian li.p1 div span {bottom:0;}
 +
 
 +
#p2:target ~ #accordian li {width:50px;}
 +
#p2:target ~ #accordian li div span {bottom:300px;}
 +
#p2:target ~ #accordian li.p2 {width:530px;}
 +
#p2:target ~ #accordian li.p2 div span {bottom:0;}
 +
 
 +
#p3:target ~ #accordian li {width:50px;}
 +
#p3:target ~ #accordian li div span {bottom:300px;}
 +
#p3:target ~ #accordian li.p3 {width:530px;}
 +
#p3:target ~ #accordian li.p3 div span {bottom:0;}
 +
 
 +
#p4:target ~ #accordian li {width:50px;}
 +
#p4:target ~ #accordian li div span {bottom:300px;}
 +
#p4:target ~ #accordian li.p4 {width:530px;}
 +
#p4:target ~ #accordian li.p4 div span {bottom:0;}
 +
 
 +
#p5:target ~ #accordian li {width:50px;}
 +
#p5:target ~ #accordian li div span {bottom:300px;}
 +
#p5:target ~ #accordian li.p5 {width:530px;}
 +
#p5:target ~ #accordian li.p5 div span {bottom:0;}
</style>
</style>
<div id="header">
<div id="header">

Revision as of 21:19, 21 September 2013

Retrieved from "http://2013.igem.org/Team:Marburg/Template:Header"