Team:Heidelberg/Templates/style2-css

From 2013.igem.org

(Difference between revisions)
m
m
 
(47 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
 +
#nav {
 +
    height:110px;
 +
}
.navigation{
.navigation{
     margin: 0px auto;
     margin: 0px auto;
Line 8: Line 11:
     letter-spacing: 1.2px;
     letter-spacing: 1.2px;
}
}
 +
.navigation .item{
.navigation .item{
-
     position:absolute;
+
     display:inline-block;
-
}
+
     width: 9.5%;
-
.navigation .item-human{
+
     text-align:center;
-
    position:absolute;
+
     position:relative;
-
}
+
-
.navigation .item-softnote{
+
-
     position:absolute;
+
-
}
+
-
.navigation .item-project{
+
-
    position:absolute;
+
-
}
+
-
.navigation .item-team{
+
-
    position:absolute;
+
-
}
+
-
.team{
+
-
    top:5px;
+
-
    left:11%;
+
-
}
+
-
.project{
+
-
  top:5px;
+
-
  left:23%;
+
-
}
+
-
.notebook{
+
-
     top:5px;
+
-
     left:35%;
+
-
}
+
-
.parts{
+
-
  top:5px;
+
-
  left:47%;
+
-
}
+
-
.software{
+
-
  top:5px;
+
-
  left:59%;
+
-
}
+
-
.safety{
+
-
    top:5px;
+
-
    left:71%;
+
-
}
+
-
.human{
+
-
  top:5px;
+
-
  left:83%;
+
}
}
-
.iconWithCaption {
 
-
    width: 53px;
 
-
}
 
a.icon{
a.icon{
-
    width:53px;
+
    width:57px;
     height:53px;
     height:53px;
-
    position:absolute;
 
-
    top:0px;
 
-
    left:0px;
 
     cursor:pointer;
     cursor:pointer;
 +
    display:inline-block;
}
}
.team a.icon{
.team a.icon{
Line 67: Line 29:
}
}
.project a.icon{
.project a.icon{
-
     background:transparent url("https://static.igem.org/mediawiki/2013/b/b0/Heidelberg_symbol_project3.png") no-repeat 0px 0px;  
+
     background:transparent url("https://static.igem.org/mediawiki/2013/b/b0/Heidelberg_symbol_project3.png") no-repeat 0px 0px;
}
}
.notebook a.icon{
.notebook a.icon{
Line 83: Line 45:
.human a.icon{
.human a.icon{
     background:transparent url("https://static.igem.org/mediawiki/2013/5/5b/Heidelberg_symbol_human.png") no-repeat 0px 0px;
     background:transparent url("https://static.igem.org/mediawiki/2013/5/5b/Heidelberg_symbol_human.png") no-repeat 0px 0px;
 +
}
 +
.model a.icon{
 +
    background:transparent url("https://static.igem.org/mediawiki/2013/7/78/Heidelberg_model.png") no-repeat 0px 0px;
}
}
.navigation .item a.active{
.navigation .item a.active{
Line 88: Line 53:
}
}
.item img.circle{
.item img.circle{
-
    position:absolute;
 
-
    top:0px;
 
-
    left:0px;
 
-
    width:53px;
 
-
    height:53px;
 
-
    opacity:0.3;
 
-
}
 
-
.item h2{
 
-
    text-align:center;
 
     position:relative;
     position:relative;
-
     white-space:nowrap;
+
     border-radius:50%;
 +
    width:52px;
     height:52px;
     height:52px;
-
     color:#222;
+
     opacity:0;
-
    font-size:13px;
+
     top:0;
-
    font-family: Arial, sans-serif;
+
     left:0;
-
     top:14px;
+
-
     left:0px;
+
-
    line-height:52px;
+
-
    text-transform:uppercase;
+
}
}
 +
.item h2{
-
 
-
.item-human h2{
 
-
    position:relative;
 
     white-space:nowrap;
     white-space:nowrap;
-
    height:52px;
 
     color:#222;
     color:#222;
     font-size:13px;
     font-size:13px;
     font-family: Arial, sans-serif;
     font-family: Arial, sans-serif;
-
    top:14px;
 
-
    right:60%;
 
-
    line-height:52px;
 
-
    text-indent: -12%;
 
-
    text-transform:uppercase;
 
-
}
 
-
.item-softnote h2{
 
-
    position:relative;
 
-
    height:52px;
 
-
    color:#222;
 
-
    font-size:13px;
 
-
    font-family: Arial, sans-serif;
 
-
    top:14px;
 
-
    right:60%;
 
-
    white-space: nowrap;
 
-
    line-height:52px;
 
-
    text-indent: 33%;
 
-
    text-transform:uppercase;
 
-
}
 
-
.item-project h2{
 
-
    position:relative;
 
-
    height:52px;
 
-
    color:#222;
 
-
    font-size:13px;
 
-
    font-family: Arial, sans-serif;
 
-
    top:14px;
 
-
    right:60%;
 
-
    white-space: nowrap;
 
-
    line-height:52px;
 
-
    text-indent: 45%;
 
-
    text-transform:uppercase;
 
-
}
 
-
.item-team h2{
 
-
    position:relative;
 
-
    height:52px;
 
-
    color:#222;
 
-
    font-size:13px;
 
-
    font-family: Arial, sans-serif;
 
-
    top:14px;
 
-
    right:38%;
 
-
    white-space: nowrap;
 
-
    line-height:52px;
 
-
    text-indent: 45%;
 
     text-transform:uppercase;
     text-transform:uppercase;
 +
    margin-top:0px;
}
}
.item h2.active{
.item h2.active{
-
     color:#EEDF3E;
+
position:relative;
-
     z-index:3;
+
font-size:20px;
-
     font-size:25px;
+
    font-weight:400;
 +
     color:#ffcc00;
 +
     z-index:2500;
 +
     text-align:left;
}
}
-
 
-
.item.human h2.active{
 
-
  left:-70px;
 
-
}
 
-
 
.item ul{
.item ul{
     list-style:none;
     list-style:none;
     position:absolute;
     position:absolute;
     top:100px;
     top:100px;
-
    left:0px;
 
     display:none;
     display:none;
-
     z-index:8;
+
     z-index:2000;
 +
    margin:0;
}
}
.item ul li a{
.item ul li a{
     font-type: Arial, sans-serif;
     font-type: Arial, sans-serif;
     font-size:17px;
     font-size:17px;
 +
    font-weight:400;
     text-decoration:none;
     text-decoration:none;
     letter-spacing:1.2px;
     letter-spacing:1.2px;
     /*text-transform: uppercase;*/
     /*text-transform: uppercase;*/
     color:#fff;
     color:#fff;
-
     text-shadow: -0.77px 0 black, 0 0.77px black, 0.77px 0 black, 0 -0.77px black;
+
     /*text-shadow: -0.4px 0 black, 0 0.4px black, 0.4px 0 black, 0 -0.4px black;*/
-
     font-border:
+
 +
     padding:3px;
     float:left;
     float:left;
     clear:both;
     clear:both;
-
     width:130px;
+
     width:auto;
-
     z-index:4;
+
     white-space: nowrap;
}
}
.item ul li a:hover{
.item ul li a:hover{
-
     text-shadow: none;
+
     background-color:#fff;
-
     background-color:#eeeeee;
+
     color:#444;
-
     color:#000000;
+
     -moz-border-radius:5px;
-
      
+
    -webkit-border-radius:5px;
 +
    border-radius:5px;
 +
    -moz-box-shadow:1px 1px 4px #666;
 +
     -webkit-box-shadow:1px 1px 4px #666;
 +
    box-shadow:1px 1px 4px #666;
 +
 
}
}
.item-human ul li a:hover{
.item-human ul li a:hover{
-
    background-color:#eeeeee;
+
    background-color:#fff;
-
     color:#000000;
+
     color:#444;
-
      
+
     -moz-border-radius:5px;
 +
    -webkit-border-radius:5px;
 +
    border-radius:5px;
 +
    -moz-box-shadow:1px 1px 4px #666;
 +
    -webkit-box-shadow:1px 1px 4px #666;
 +
    box-shadow:1px 1px 4px #666;
 +
 
}
}
.item-human h2.active{
.item-human h2.active{
 +
font-size:20px;
 +
    font-weight:400;
     color:#EEDF3E;
     color:#EEDF3E;
-
     z-index:3;
+
     z-index:2500;
}
}
.item-human ul{
.item-human ul{
Line 215: Line 136:
     left:-52px;
     left:-52px;
     display:none;
     display:none;
-
     z-index:8;
+
     z-index:2000;
}
}
.item-human ul li a{
.item-human ul li a{
Line 227: Line 148:
     clear:both;
     clear:both;
     width:130px;
     width:130px;
-
     z-index:4;
+
     z-index:1800;
}
}
.item-project ul li a:hover{
.item-project ul li a:hover{
-
    background-color:#eeeeee;
+
  background-color:#fff;
-
     color:#000000;
+
     color:#444;
-
      
+
     -moz-border-radius:5px;
 +
    -webkit-border-radius:5px;
 +
    border-radius:5px;
 +
    -moz-box-shadow:1px 1px 4px #666;
 +
    -webkit-box-shadow:1px 1px 4px #666;
 +
    box-shadow:1px 1px 4px #666;
 +
 
}
}
.item-project h2.active{
.item-project h2.active{
 +
font-size:20px;
 +
    font-weight:400;
     color:#EEDF3E;
     color:#EEDF3E;
-
     z-index:3;
+
     z-index:2500;
}
}
.item-project ul{
.item-project ul{
Line 244: Line 173:
     left:-52px;
     left:-52px;
     display:none;
     display:none;
-
     z-index:8;
+
     z-index:2000;
}
}
.item-project ul li a{
.item-project ul li a{
Line 253: Line 182:
     color:#000;
     color:#000;
     padding:3px;
     padding:3px;
-
    float:left;
+
 
     clear:both;
     clear:both;
     width:130px;
     width:130px;
-
     z-index:4;
+
     z-index:1800;
}
}
.item-team ul li a:hover{
.item-team ul li a:hover{
-
    background-color:#eeeeee;
+
    background-color:#fff;
-
     color:#000000;
+
     color:#444;
-
      
+
     -moz-border-radius:5px;
 +
    -webkit-border-radius:5px;
 +
    border-radius:5px;
 +
    -moz-box-shadow:1px 1px 4px #666;
 +
    -webkit-box-shadow:1px 1px 4px #666;
 +
    box-shadow:1px 1px 4px #666;
 +
 
}
}
.item-team h2.active{
.item-team h2.active{
 +
    font-size:20px;
 +
    font-weight:400;
     color:#EEDF3E;
     color:#EEDF3E;
-
     z-index:3;
+
     z-index:2500;
}
}
.item-team ul{
.item-team ul{
Line 273: Line 210:
     left:-52px;
     left:-52px;
     display:none;
     display:none;
-
     z-index:4;
+
     z-index:1800;
}
}
.item-team ul li a{
.item-team ul li a{
Line 285: Line 222:
     clear:both;
     clear:both;
     width:130px;
     width:130px;
-
     z-index:4;
+
     z-index:1800;
}
}
.item-softnote ul li a:hover{
.item-softnote ul li a:hover{
     background-color:#eeeeee;
     background-color:#eeeeee;
     color:#000000;
     color:#000000;
-
   
+
 
}
}
.item-softnote h2.active{
.item-softnote h2.active{
 +
font-size:20px;
 +
    font-weight:400;
     color:#EEDF3E;
     color:#EEDF3E;
-
     z-index:3;
+
     z-index:2500;
}
}
.item-softnote ul{
.item-softnote ul{
Line 300: Line 239:
     position:absolute;
     position:absolute;
     top:70px;
     top:70px;
-
     left:-52px;
+
     left:0px;
     display:none;
     display:none;
-
     z-index:8;
+
     z-index:2000;
}
}
.item-softnote ul li a{
.item-softnote ul li a{
Line 314: Line 253:
     clear:both;
     clear:both;
     width:130px;
     width:130px;
-
     z-index:4;
+
     z-index:1800;
 +
}
 +
 
 +
.highlight_button {
 +
    background-repeat:no-repeat;
 +
    width:80px;
 +
    height:80px;
 +
    background-size:160px 80px;
 +
    background-position:left;
 +
    display:inline-block;
 +
    margin-left:15%;
 +
}
 +
 
 +
.highlight_button:hover {
 +
    background-position:right;
 +
}
 +
 
 +
.fancybox_p_centered > img {
 +
    margin: 0% 25%;
 +
}
 +
 
 +
 
 +
.fancybox_p_centered > figcaption {
 +
    margin: 0% 10%;
}
}
</style>
</style>
</html>
</html>

Latest revision as of 00:34, 29 October 2013

Retrieved from "http://2013.igem.org/Team:Heidelberg/Templates/style2-css"