"
Team:Alberta/Test
From 2013.igem.org
| (5 intermediate revisions not shown) | |||
| Line 9: | Line 9: | ||
background:url('/wiki/images/thumb/2/26/Background.png/541px-Background.png'); | background:url('/wiki/images/thumb/2/26/Background.png/541px-Background.png'); | ||
background-size:100% auto; | background-size:100% auto; | ||
| + | padding-top:20px; | ||
} | } | ||
.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 26: | Line 27: | ||
border-radius:5px; | border-radius:5px; | ||
box-shadow: 0px 0px 30px #444444; | box-shadow: 0px 0px 30px #444444; | ||
| + | } | ||
| + | .titlebar { | ||
| + | position:fixed; | ||
| + | top:0px; | ||
| + | height:130px; | ||
| + | margin-left:-5px; | ||
| + | width:975px; | ||
| + | z-index:2; | ||
| + | background-color:#FFF; | ||
} | } | ||
.titlebar h3, h4 { | .titlebar h3, h4 { | ||
| Line 31: | 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 52: | Line 65: | ||
position:relative; | position:relative; | ||
left:50%; | left:50%; | ||
| - | margin-left: | + | margin-left:420px; |
margin-top:-90px; | margin-top:-90px; | ||
width: 150px; | width: 150px; | ||
| Line 65: | 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 77: | Line 155: | ||
width:963px; | width:963px; | ||
margin:60px auto; | margin:60px auto; | ||
| + | position:fixed; | ||
| + | top:70px; | ||
| + | z-index:4; | ||
border: 1px solid #DDD; | border: 1px solid #DDD; | ||
background-color:#FFF; | background-color:#FFF; | ||
| Line 229: | Line 310: | ||
</head> | </head> | ||
<body> | <body> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
<div class="titlebar"> | <div class="titlebar"> | ||
<h3>The Littlest Mapmaker</h1> | <h3>The Littlest Mapmaker</h1> | ||
| Line 273: | 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
The Littlest Mapmaker
"Exploration into the world of DNA Computing"
Team Alberta: University of Alberta
Team Alberta: University of Alberta
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.
