Team:UCL/Template:HeaderMain.css

From 2014.igem.org

Latest revision as of 16:37, 16 October 2014

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html, button, input, select, textarea {

   color: #222;

}

html {

   font-size: 1em;
   line-height: 1.4;

}

-moz-selection {

   background: #b3d4fc;
   text-shadow: none;

}

selection {

   background: #b3d4fc;
   text-shadow: none;

}

hr {

   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;

}

audio, canvas, img, video {

   vertical-align: middle;

}

fieldset {

   border: 0;
   margin: 0;
   padding: 0;

}

textarea {

   resize: vertical;

}

.browsehappy {

   margin: 0.2em 0;
   background: #ccc;
   color: #000;
   padding: 0.2em 0;

}

/* ==========================================================================

  Content
  ========================================================================== */

body {

   font: 16px/1.5;
   font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background-color: lightgrey;

-webkit-font-smoothing: antialiased; }

.wrapper {

   width: 90%;
   margin: 0 auto;
   max-width: 1140px;

}

/*This is to override the native wiki style sheet*/

1. content {

width: 100%; padding: 0px; }

1. menubar ul {

margin: -.7em 0; }

/* =Footer */ footer {

   background-color: #ffffff;

width: 100%;

   text-align: center;

position: relative; z-index: 9999; }

/* ==========================================================================

  Media Queries
  ========================================================================== */

@media only screen and (max-width: 1140px) {

   /* =Actual Header */

#nav-container { display:none; } #nav-main { display:none; }

body {

   color: #777;

}

/* Add transition to containers so they can push in and out.

• /

1. layout,
2. menu,

.menu-link {

   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;

}

/*

   padding-left: 150px; /* left col width "#menu" */
   left: 0;

   margin: 0 auto;
   padding: 0 2em;
   max-width: 800px;
   margin-bottom: 50px;
   line-height: 1.6em;

    margin: 0;
    color: #333;
    text-align: center;
    padding: 2.5em 2em 0;
    border-bottom: 1px solid #eee;
}
   .header h1 {
       margin: 0.2em 0;
       font-size: 3em;
       font-weight: 300;
   }
    .header h2 {
       font-weight: 300;
       color: #ccc;
       padding: 0;
       margin-top: 0;
   }

   margin: 50px 0 20px 0;
   font-weight: 300;
   color: #888;

   margin-left: -150px; /* this should be "#menu" width */
   width: 150px;
   position: fixed;
   top: 0;
   left: 150px; /* this should be "#menu" width */
   bottom: 0;
   z-index: 999; /* so the menu or its navicon stays above all content */
   background: #191818;
   overflow-y: auto;
   -webkit-overflow-scroll: touch; /* for smooth scrolling on mobile */

   /*
   All anchors inside the menu should be styled like this.
   */
   #menu a {
       color: #999;
       border: none;
       padding: 0.6em 0 0.6em 0.6em;
   }

   /*
   Remove all background/borders, since we are applying them to #menu.
   */
    #menu .pure-menu,
    #menu .pure-menu ul {
       border: none;
       background: transparent;
   }

   /*
   Add that light border to separate items into groups.
   */
   #menu .pure-menu ul,
   #menu .pure-menu .menu-item-divided {
       border-top: 1px solid #333;
   }
       /*
       Change color of the anchor links on hover/focus.
       */
       #menu .pure-menu li a:hover,
       #menu .pure-menu li a:focus {
           background: #333;
       }

   /*