Team:Northwestern/Templates/Escape

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <style type="text/css"> - →Escape Velocity 2.5 by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license): ...")
 
(27 intermediate revisions not shown)
Line 7: Line 7:
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
*/
 +
* {
 +
 +
font-family: "Source Sans Pro";
 +
}
 +
#top-section {
 +
    height: 1px;
 +
font: "Source Sans Pro", 12px, #000;}
 +
 +
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
 +
background-color: transparent;
 +
border: 0 none;
 +
height: 14px;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 975px;
 +
left: 50%;
 +
margin-left: -487px;
 +
}
 +
 +
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
 +
background-color: transparent;
 +
height: 14px;
 +
display: block;
 +
z-index: 10;
 +
position: fixed;
 +
width: 100%;
 +
top: 0;
 +
}
/*********************************************************************************/
/*********************************************************************************/
/* Basic                                                                        */
/* Basic                                                                        */
/*********************************************************************************/
/*********************************************************************************/
 +
#nulogo {
 +
 
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
  height: auto;
 +
  width: auto;
 +
  position: relative;
 +
  padding-top: 300px;
 +
 +
}
#igemlogo {
#igemlogo {
     float: left;
     float: left;
Line 51: Line 91:
header.style1 h2
header.style1 h2
{
{
-
font-size: 2em;
+
font-family: "Source Sans Pro";
 +
                        font-size: 1em;
letter-spacing: 0.075em;
letter-spacing: 0.075em;
line-height: 1.5em;
line-height: 1.5em;
Line 63: Line 104:
letter-spacing: 0.075em;
letter-spacing: 0.075em;
line-height: 1.5em;
line-height: 1.5em;
 +
                        font-family: "Source Sans Pro";
}
}
Line 191: Line 233:
.is
.is
{
{
 +
              margin-left: 10px;
}
}
Line 196: Line 239:
{
{
margin: 0 0 1.5em 0;
margin: 0 0 1.5em 0;
 +
                        margin-bottom: 2px;
 +
                        margin-left: 10px;
}
}
.is header.style1
.is header.style1
{
{
-
position: relative;
+
font-family: "Source Sans Pro";
 +
                                position: relative;
margin: -0.5em 0 0 0;
margin: -0.5em 0 0 0;
padding-top: 0;
padding-top: 0;
Line 209: Line 255:
margin: 0 0 0.75em 0;
margin: 0 0 0.75em 0;
font-size: 1.15em;
font-size: 1.15em;
 +
                        font-family: "Source Sans Pro";
letter-spacing: 0.05em;
letter-spacing: 0.05em;
}
}
Line 287: Line 334:
{
{
padding: 0;
padding: 0;
-
height: 400px;
+
height:750px;
}
}
.homepage #header-wrapper
.homepage #header-wrapper
{
{
-
height: 573px;
+
height: 750px;
}
}
Line 307: Line 354:
{
{
position: relative;
position: relative;
-
height: 400px;
+
height: 600px;
}
}
.homepage #header
.homepage #header
{
{
-
height: 573px;
+
height: 600px;
}
}
Line 323: Line 370:
position: absolute;
position: absolute;
height: 5em;
height: 5em;
-
top: 50%;
+
top: 35%;
left: 0;
left: 0;
width: 100%;
width: 100%;
Line 337: Line 384:
#logo h1
#logo h1
{
{
-
font-size: 2em;
+
font-size: 48px;
-
letter-spacing: 0.25em;
+
            font-family: "Source Sans Pro", Arial, serif; font-weight: 700;
 +
 
 +
            text-transform: none;
}
}
Line 357: Line 406:
position: absolute;
position: absolute;
display: block;
display: block;
-
top: 2.5em;
+
top: 10px;
left: 0;
left: 0;
width: 100%;
width: 100%;
Line 373: Line 422:
display: inline-block;
display: inline-block;
border-radius: 0.35em;
border-radius: 0.35em;
-
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25);
+
box-shadow: inset 0px 0px 1px 1px #5B676B;
 +
            background-color: transparent;
padding: 0 1.5em 0 1.5em;
padding: 0 1.5em 0 1.5em;
 +
         
}
}
Line 388: Line 439:
{
{
display: block;
display: block;
-
color: #eee;
+
color: #5B676B;
-
color: rgba(255,255,255,0.75);
+
text-transform: uppercase;
text-transform: uppercase;
text-decoration: none;
text-decoration: none;
Line 396: Line 446:
height: 5em;
height: 5em;
line-height: 5em;
line-height: 5em;
-
-moz-transition: all .25s ease-in-out;
+
-moz-transition: all .15s ease-in-out;
-
-webkit-transition: all .25s ease-in-out;
+
-webkit-transition: all .15s ease-in-out;
-
-o-transition: all .25s ease-in-out;
+
-o-transition: all .15s ease-in-out;
-
-ms-transition: all .25s ease-in-out;
+
-ms-transition: all .15s ease-in-out;
-
transition: all .25s ease-in-out;
+
transition: all .15s ease-in-out;
outline: 0;
outline: 0;
}
}
Line 408: Line 458:
#nav > ul > li.active > span
#nav > ul > li.active > span
{
{
-
color: #fff;
+
color: black;
 +
                border-bottom: solid 5px black;
 +
               
}
}
.dropotron
.dropotron
{
{
-
background: #222835 url('images/overlay.png');
+
color: #eee;
-
background-color: rgba(44,50,63,0.925);
+
background-color: rgba(255,255,255,0.15);
padding: 1.25em 1em 1.25em 1em;
padding: 1.25em 1em 1.25em 1em;
border-radius: 0.35em;
border-radius: 0.35em;
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25);
min-width: 12em;
min-width: 12em;
-
text-align: left;
+
text-align: center;
}
}
Line 433: Line 485:
{
{
display: block;
display: block;
-
color: #eee;
+
color: #5B676B;
-
color: rgba(255,255,255,0.75);
+
 +
            background-color: rgba(255,255,255,0.15);
text-transform: uppercase;
text-transform: uppercase;
text-decoration: none;
text-decoration: none;
Line 457: Line 510:
.dropotron li:hover > span
.dropotron li:hover > span
{
{
-
color: #fff;
+
color: black;
 +
            background-color: rgba(255,255,255,0.15);
 +
            border-bottom: solid 5px black;
}
}
Line 471: Line 526:
#intro .style1
#intro .style1
{
{
-
font-size: 1.5em;
+
font-size: 1em;
letter-spacing: 0.075em;
letter-spacing: 0.075em;
}
}
Line 477: Line 532:
#intro .style2
#intro .style2
{
{
-
font-size: 2.75em;
+
font-size: 2em;
letter-spacing: 0.075em;
letter-spacing: 0.075em;
line-height: 1.35em;
line-height: 1.35em;
Line 487: Line 542:
{
{
font-size: 1.1em;
font-size: 1.1em;
-
width: 48em;
+
width: 40em;
margin: 0 auto;
margin: 0 auto;
}
}
Line 503: Line 558:
{
{
padding-bottom: 5em;
padding-bottom: 5em;
 +
font-family: "Source Sans Pro";
}
}
Line 515: Line 571:
#highlights
#highlights
-
{
+
{ font-family: "Source Sans Pro";
}
}
Line 532: Line 588:
{
{
padding-right: 2em;
padding-right: 2em;
 +
            padding-bottom: 2em;
}
}
Line 550: Line 607:
#main
#main
{
{
-
margin: 1em 0 1em 0;
+
margin: 0 0 0 0;
}
}
Line 557: Line 614:
margin: 0;
margin: 0;
}
}
 +
.main66
 +
{
 +
margin-left: 32%;
 +
float: left;
 +
width: 600px;
 +
padding: 0 20px 0 20px;
 +
border-left: dashed 1px rgb(153, 153, 153);
 +
border-right: dashed 1px rgb(153, 153, 153);
 +
 +
}
/*********************************************************************************/
/*********************************************************************************/
Line 572: Line 639:
#sidebar
#sidebar
{
{
 +
float: left;
 +
width:20%;
 +
padding: 0 20px 0 10px;
}
}
Line 627: Line 697:
font-size: 0.8em;
font-size: 0.8em;
}
}
 +
 +
 +
figure {
 +
  display: block;
 +
  position: relative;
 +
  overflow: hidden;
 +
}
 +
 +
 +
figcaption {
 +
  position: absolute;
 +
background-color:#f3f3f3;
 +
  color: black;
 +
  padding: 10px 20px;
 +
    width: 322px;
 +
height: 100px;
 +
  opacity: 0;
 +
  bottom: 0;
 +
    text-align: center;
 +
 +
  -webkit-transition: all 0.6s ease;
 +
  -moz-transition:    all 0.6s ease;
 +
  -o-transition:      all 0.6s ease;
 +
}
 +
 +
figure:hover figcaption {
 +
  opacity: 0.75;
 +
background-color:#f3f3f3;
 +
  left: 0;
 +
    transform: translateY(-23px);
 +
   
 +
}
 +
 +
 +
.profile {
 +
    width:33%;
 +
    height: 600px;
 +
 +
}
 +
 +
#biography {
 +
   
 +
    width: 100%;
 +
    width: 322px;
 +
 +
}
 +
/* http://www.menucool.com */
 +
 +
/*slider frame*/
 +
#sliderFrame {
 +
    width:1200px;
 +
    margin: 0 auto; /*center-aligned*/
 +
    background-color:none;
 +
    padding-top:23%;
 +
    border-radius: 6px 6px 0 0;
 +
}
 +
 +
#slider, #slider div.sliderInner {
 +
    width:1200px;height:400px;/* Must be the same size as the slider images */
 +
}
 +
 +
#slider {
 +
background:transparent url(loading.gif) no-repeat 50% 50%;
 +
position:relative;
 +
margin:0 auto; /*center-aligned*/
 +
    transform: translate3d(0,0,0);
 +
}
 +
 +
/* the link style (if slide image is wrapped in a link) */
 +
#slider a.imgLink, #slider .video {
 +
z-index:2;
 +
position:absolute;
 +
top:0px;left:0px;border:0;padding:0;margin:0;
 +
width:100%;height:100%;
 +
}
 +
#slider .video {
 +
background:transparent url(video.png) no-repeat 50% 50%;
 +
}
 +
 +
/* Caption styles */
 +
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
 +
position:absolute;
 +
width:1100px;
 +
height:auto;
 +
padding:20px;
 +
right:30px; /* or left: ??px; */
 +
bottom:30px;/* or top: ??px; */
 +
z-index:3;
 +
overflow:hidden;
 +
font-size:0;
 +
    text-align: center;
 +
}
 +
#slider div.mc-caption-bg {
 +
    /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
 +
background:none;/* or any other colors such as Black, or: background:none; */
 +
border-radius: 5px;
 +
}
 +
#slider div.mc-caption-bg2 {
 +
    background:none;
 +
}
 +
#slider div.mc-caption {
 +
font:bold 15px/20px Arial;
 +
color:#000000;
 +
z-index:4;
 +
padding:0px;
 +
text-align:center;
 +
    background:none;
 +
}
 +
#slider div.mc-caption a {
 +
color:#66FFFF;
 +
}
 +
 +
 +
/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
 +
#slider div.navBulletsWrapper  {
 +
display:none;
 +
}
 +
 +
/* --------- Others ------- */
 +
 +
#slider div.loading
 +
{
 +
    width:100%; height:100%;
 +
    background:transparent url(loading.gif) no-repeat 50% 50%;
 +
    filter: alpha(opacity=60);
 +
    opacity:0.6;
 +
    position:absolute;
 +
    left:0;
 +
    top:0;
 +
    z-index:9;
 +
}
 +
 +
#slider img, #slider>b, #slider a>b {
 +
position:absolute; border:none; display:none;
 +
}
 +
 +
#slider div.sliderInner {
 +
overflow:hidden;
 +
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
 +
position:absolute; top:0; left:0;
 +
}
 +
 +
#slider>a, #slider video, #slider audio {display:none;}
 +
 +
 +
 +
/* -- thumbnails -- */
 +
#thumbs
 +
{
 +
background:white url(imageslider/thumbs-bar.gif) repeat-x 0 0;
 +
border:1px solid white; text-align:center;
 +
font-size:0px;
 +
line-height:45px;
 +
}
 +
#thumbs .thumb
 +
{
 +
    width:60px;height:45px;
 +
    cursor:pointer;
 +
    text-align:center;
 +
    border-left:1px solid #FFF; border-right:1px solid #DDD;
 +
   
 +
    display:inline-block;
 +
    *display:inline;zoom:1; /*IE Hack*/
 +
}
 +
#thumbs .thumb-on {background-image: url(active-bg.png);}
 +
#thumbs .thumb img {vertical-align:middle;}
 +
 +
 +
</style>
</style>
</html>
</html>

Latest revision as of 15:41, 15 August 2014

Retrieved from "http://2014.igem.org/Team:Northwestern/Templates/Escape"