"

From 2014.igem.org

/* http://meyerweb.com/eric/tools/css/reset/

  v2.0 | 20110126
  License: none (public domain)

• /

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/* CSS RESET DONE */

body {

 color: #fff;
 margin: 0 auto;
 font: 1em/1.3em Montserrat, Helvetica, sans-serif;

} .clearfix {

 clear: both;

} .container {

 width: 80%;
 height: 100%;
 padding: 20px 10%;
 text-align: center;
 background-color: #36a7f3;

} h1 {

 margin: 40px 0;
 font-size: 40px;
 line-height: 40px;
 font-weight: bold;
 text-shadow: 0px 1px 1px #888;
 -webkit-font-smoothing: antialiased;

} h2 {

 font-size: 28px;
 color: #fff;
 font-weight: normal;
 text-align: left;
 margin-bottom: 20px;
 text-shadow: 1px 1px 0 #1e88ce;

} a {

 text-align: left;
 text-decoration: none;
 color: #fff;  
 margin: 0 10px;

}

p {

 line-height: 32px;
 padding: 0 0 40px 0;
 text-align: left;

}

/* Button styles */ .btn {

 box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
 
 position: relative;
 display: inline-block;
 overflow: hidden;
 height: 50px;
 
 border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
   
 line-height: 50px;
 padding: 0 30px;  
 font-size: 14px;
 font-weight: bold;

 -webkit-box-shadow: 0 3px 0 0 #1275b7;
 box-shadow: 0 3px 0 0 #1275b7;
 background-color: #1e88ce;

}

 .btn:active,
 .btn.active {
   top: 2px;
   -webkit-box-shadow: 0 1px 0 0 #1275b7;
   box-shadow: 0 1px 0 0 #1275b7;
 }

/* Progress Bar */

.content {

 width: 60%;
 float: left;
 margin: 45px 0;
 padding: 0 3% 0 0;
 border-right: 1px solid rgba(255,255,255,.4);

}

.progress {

 position: relative;
 float: left;
 text-align: left;
 width: 330px;
 padding: 45px 0 0 2%;

}

 .progress .wrapper {
   position: absolute;
   width: inherit;
 }
   .progress .wrapper.affix {
     position: fixed;
     top: 10px;

   }
 .progress .bar {
   position: relative;
   display: block;
   width: 100%;
   height: 40px;
   margin-bottom: 10px;
   background-color: #1c92db;
 }
 .progress .bar span {
   position: absolute;
   display: block;
   top: 0;
   width: 0;
   height: 40px;
   z-index: 0;
   background-color: #1275b7;
 }
 .progress .bar a {
   line-height: 40px;
   position: relative;
   z-index: 1;
 }
 .progress .bar i {
   position: absolute;
   right: -30px;
   height: 40px;
   line-height: 40px;
   color: #36a7f3;

   -webkit-transition: color .3s;
   transition: color .3s;
 }

.footer {

 height: 470px;
 font-size: 28px;
 text-align: center;
 line-height: 470px;
 background-color: #444;

}