Team:Heidelberg/Templates/achievements-css

From 2013.igem.org

(Difference between revisions)
m
m
 
(9 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
-
 
-
h3 {
 
-
    top:70px;
 
-
    position:center;
 
-
}
 
-
 
-
h8 {
 
-
    position:center;
 
-
}
 
-
 
.popover {
.popover {
-
background-clip: padding-box;
+
    background-clip: padding-box;
     background-color: #FFFFFF;
     background-color: #FFFFFF;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.2);
Line 29: Line 19:
.popover-content {
.popover-content {
-
width:500px;
+
    width:500px;
     text-align:justify;
     text-align:justify;
  }
  }
Line 41: Line 31:
.check {
.check {
     background-image: url('https://static.igem.org/mediawiki/2013/3/31/Check-bold.png');
     background-image: url('https://static.igem.org/mediawiki/2013/3/31/Check-bold.png');
-
background-repeat:no-repeat;
+
    background-repeat:no-repeat;
-
width:30px;
+
    width:30px;
-
height:30px;
+
    height:30px;
-
background-size:30px 30px;
+
    background-size:30px 30px;
-
background-position:left;
+
    background-position:left;
-
    margin-left:50px;
+
     display:inline-block;
     display:inline-block;
 +
    margin-top: 5px;
 +
    margin-bottom:5px;
 +
}
 +
div.requirement {
 +
    display:table-row;
 +
}
 +
div.requirement span {
 +
    vertical-align:middle;
 +
}
 +
span.requirement {
 +
    display:table-cell;
 +
    width:100%;
}
}
-
.btn {
+
.requirement .btn {
-
     float:right;
+
     display:inline-block;
}
}
-
 
+
.medal {
-
 
+
    display:table-cell;
-
.bronzebox {
+
-
      background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.7) 100%), url('https://static.igem.org/mediawiki/2013/7/7f/Bronze_medal.png') repeat 0 0;
+
     background-repeat: no-repeat;
     background-repeat: no-repeat;
-
     background-size: 200px;
+
     background-size: contain;
-
     padding:6px;
+
     background-position: center;
-
    margin:0px;
+
-
    padding:6px;
+
-
    margin:0px;
+
-
    width:auto;
+
-
    height:auto;
+
}
}
-
 
+
.medal > div {
-
.silverbox {
+
-
  background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.7) 100%), url('https://static.igem.org/mediawiki/2013/9/94/Silver_medal.png') repeat 0 0;
+
-
    background-repeat: no-repeat;
+
-
    background-size: 270px;
+
     padding:6px;
     padding:6px;
     margin:0px;
     margin:0px;
-
     padding:6px;
+
     display:table;
-
    margin:0px;
+
     width:100%;
-
     width:auto;
+
-
    height:250px;
+
-
}
+
-
 
+
-
.goldbox {
+
-
  background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.7) 100%), url('https://static.igem.org/mediawiki/2013/7/76/Gold_medal.png') repeat 0 0;
+
-
    background-repeat: no-repeat;
+
-
    background-size: 160px;
+
-
    padding:6px;
+
-
    margin:0px;
+
-
    padding:6px;
+
-
    margin:0px;
+
-
    width:auto;
+
-
    height:auto;
+
-
}
+
-
 
+
-
div.arrow:after {
+
-
    top:-10px;
+
}
}
-
 
+
.medal > h8 {
-
.button-RFC {
+
     text-align:center;
-
     background-repeat:no-repeat;
+
-
    width:80px;
+
-
    height:80px;
+
-
    background-size:160px 80px;
+
-
    background-position:left;
+
-
    display:inline-block;
+
-
    margin-left:15%;
+
}
}
-
#button-RFC99 {
+
#bronzemedal {
-
     background-image: url('https://static.igem.org/mediawiki/2013/f/fa/Heidelberg_button_RFC99.png');
+
     background-image: url('https://static.igem.org/mediawiki/2013/7/7f/Bronze_medal.png');
}
}
 +
#silvermedal {
 +
background-image: url('https://static.igem.org/mediawiki/2013/9/94/Silver_medal.png');
 +
}
-
#button-RFC99:hover {
+
#goldmedal {
-
    background-position:right;
+
background-image: url('https://static.igem.org/mediawiki/2013/7/76/Gold_medal.png');
-
}
+
}
-
 
+
div.arrow:after {
-
#button-RFC100 {
+
     top:auto;
-
     background-image: url('https://static.igem.org/mediawiki/2013/2/29/Heidelberg_button_RFC100.png');
+
    z-index:0;
 +
    opacity: 1;
 +
    bottom:auto;
 +
    left:auto;
 +
    right:auto;
}
}
-
 
-
 
-
#button-RFC100:hover {
 
-
    background-position:right;
 
-
}
 
-
 
</style>
</style>
</html>
</html>

Latest revision as of 03:01, 29 October 2013