Team:Alberta/Test
From 2013.igem.org
(2 intermediate revisions not shown) | |||
Line 12: | Line 12: | ||
} | } | ||
.nav-icon { | .nav-icon { | ||
- | background-image:url(' | + | background-image:url('/wiki/images/6/69/Nav-icon.png'); |
display:inline-block; | display:inline-block; | ||
position:fixed; | position:fixed; | ||
Line 41: | Line 41: | ||
} | } | ||
.sidebar { | .sidebar { | ||
+ | position:fixed; | ||
+ | top:190px; | ||
float:left; | float:left; | ||
+ | z-index:3; | ||
padding: 0 0px 0px 40px; | padding: 0 0px 0px 40px; | ||
} | } | ||
Line 75: | Line 78: | ||
.igem-bar img { | .igem-bar img { | ||
height:38px; | height:38px; | ||
+ | } | ||
+ | .tooltip { | ||
+ | width:100%; | ||
+ | } | ||
+ | .tooltip .saying { | ||
+ | background: #EEE; | ||
+ | color: #444; | ||
+ | left: 100px; | ||
+ | margin-bottom: 15px; | ||
+ | opacity: 0; | ||
+ | padding: 20px; | ||
+ | position: absolute; | ||
+ | visibility: hidden; | ||
+ | min-width:200px; | ||
+ | max-width:500px; | ||
+ | -webkit-transform: translateX(10px); | ||
+ | -moz-transform: translateX(10px); | ||
+ | -ms-transform: translateX(10px); | ||
+ | -o-transform: translateX(10px); | ||
+ | transform: translateX(10px); | ||
+ | -webkit-transition: all .25s ease-out; | ||
+ | -moz-transition: all .25s ease-out; | ||
+ | -ms-transition: all .25s ease-out; | ||
+ | -o-transition: all .25s ease-out; | ||
+ | transition: all .25s ease-out; | ||
+ | -webkit-border-radius:6px; | ||
+ | -moz-border-radius:6px; | ||
+ | -ms-border-radius:6px; | ||
+ | -o-border-radius:6px; | ||
+ | border-radius:6px; | ||
+ | -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | ||
+ | } | ||
+ | .tooltip .saying { | ||
+ | content: " "; | ||
+ | top:100px; | ||
+ | display:block; | ||
+ | left: 200px; | ||
+ | max-height:1000px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | .tooltip .saying:after { | ||
+ | border-bottom: solid transparent 10px; | ||
+ | border-top: solid transparent 10px; | ||
+ | border-right: solid #EEE 10px; | ||
+ | left: 10px; | ||
+ | top:10px; | ||
+ | content: ""; | ||
+ | margin-left:-16px; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | max-height:1000px; | ||
+ | display:block; | ||
+ | } | ||
+ | .tooltip:hover .saying { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | -webkit-transform: translateX(0px); | ||
+ | -moz-transform: translateX(0px); | ||
+ | -ms-transform: translateX(0px); | ||
+ | -o-transform: translateX(0px); | ||
+ | transform: translateX(0px); | ||
} | } | ||
.active { | .active { | ||
Line 89: | Line 157: | ||
position:fixed; | position:fixed; | ||
top:70px; | top:70px; | ||
- | z-index: | + | z-index:4; |
border: 1px solid #DDD; | border: 1px solid #DDD; | ||
background-color:#FFF; | background-color:#FFF; | ||
Line 281: | Line 349: | ||
</ul> | </ul> | ||
<div class="sidebar"> | <div class="sidebar"> | ||
- | + | <div href class="tooltip"><img src="/wiki/images/7/7d/SideChar.png"></img> | |
- | + | <span class="saying">Welcome to the Team Alberta Wiki!</span> | |
- | + | </div> | |
- | + | ||
- | + | ||
- | ></ | + | |
- | + | ||
</div> | </div> | ||
<div class="main"> | <div class="main"> |
Latest revision as of 05:41, 29 August 2013
Project abstract here - stating the nature of the project as simply and succinctly as possible. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Twitter Feed Widget - @iGEMAlberta
Project abstract here - stating the nature of the project as simply and succinctly as possible. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.