Template:CSS/foundation

From 2014.igem.org

(Difference between revisions)
 
(18 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<style type='text/css'>
+
<style rel='stylesheet' type='text/css'>
-
 
+
-
 
+
html, body {
html, body {
   height: 100%; }
   height: 100%; }
-
*
+
*,
*:before,
*:before,
*:after {
*:after {
Line 79: Line 77:
.contain-to-grid {
.contain-to-grid {
   width: 100%;
   width: 100%;
-
   background: #333333; }
+
   background: #222222; }
   .contain-to-grid .top-bar {
   .contain-to-grid .top-bar {
     margin-bottom: 0; }
     margin-bottom: 0; }
Line 85: Line 83:
.top-bar {
.top-bar {
   overflow: hidden;
   overflow: hidden;
-
   height: 45px;
+
   height: 67px;
-
   line-height: 45px;
+
   line-height: 67px;
   position: relative;
   position: relative;
-
   background: #333333;
+
   background: #222222;
   margin-bottom: 0; }
   margin-bottom: 0; }
   .top-bar ul {
   .top-bar ul {
Line 112: Line 110:
     margin: 0; }
     margin: 0; }
   .top-bar .name {
   .top-bar .name {
-
     height: 45px;
+
     height: 67px;
     margin: 0;
     margin: 0;
-
     font-size: 16px; }
+
     font-size: 32px; }
     .top-bar .name h1 {
     .top-bar .name h1 {
-
       line-height: 45px;
+
       line-height: 67px;
       font-size: 1.0625rem;
       font-size: 1.0625rem;
       margin: 0; }
       margin: 0; }
Line 137: Line 135:
       display: block;
       display: block;
       padding: 0 15px;
       padding: 0 15px;
-
       height: 45px;
+
       height: 67px;
-
       line-height: 45px; }
+
       line-height: 67px; }
     .top-bar .toggle-topbar.menu-icon {
     .top-bar .toggle-topbar.menu-icon {
       right: 15px;
       right: 15px;
Line 164: Line 162:
     background: transparent; }
     background: transparent; }
     .top-bar.expanded .title-area {
     .top-bar.expanded .title-area {
-
       background: #333333; }
+
       background: #222222; }
     .top-bar.expanded .toggle-topbar a {
     .top-bar.expanded .toggle-topbar a {
       color: #888888; }
       color: #888888; }
Line 171: Line 169:
.top-bar-section {
.top-bar-section {
 +
  text-shadow: 0px 0px 1px #000;
   left: 0;
   left: 0;
   position: relative;
   position: relative;
   width: auto;
   width: auto;
   transition: left 300ms ease-out; }
   transition: left 300ms ease-out; }
-
  .top-bar-section ul {
+
.top-bar-section ul {
     width: 100%;
     width: 100%;
     height: auto;
     height: auto;
     display: block;
     display: block;
-
     background: #333333;
+
     background: #222222;
     font-size: 16px;
     font-size: 16px;
-
     margin: 0; }
+
     margin-left: -20px; }
   .top-bar-section .divider,
   .top-bar-section .divider,
   .top-bar-section [role="separator"] {
   .top-bar-section [role="separator"] {
Line 195: Line 194:
     padding-left: 15px;
     padding-left: 15px;
     font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
     font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
-
     font-size: 0.8125rem;
+
     font-size: 17px;
     font-weight: normal;
     font-weight: normal;
     text-transform: none;
     text-transform: none;
-
     background: #333333; }
+
     background: #222222; }
     .top-bar-section ul li > a.button {
     .top-bar-section ul li > a.button {
       font-size: 0.8125rem;
       font-size: 0.8125rem;
Line 213: Line 212:
       background-color: #e9e9e9;
       background-color: #e9e9e9;
       border-color: #bababa;
       border-color: #bababa;
-
       color: #333333; }
+
       color: #222222; }
       .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
       .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
         background-color: #bababa; }
         background-color: #bababa; }
       .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
       .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
-
         color: #333333; }
+
         color: #222222; }
     .top-bar-section ul li > a.button.success {
     .top-bar-section ul li > a.button.success {
       background-color: #5da423;
       background-color: #5da423;
Line 248: Line 247:
       background-color: #e9e9e9;
       background-color: #e9e9e9;
       border-color: #bababa;
       border-color: #bababa;
-
       color: #333333; }
+
       color: #222222; }
       .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
       .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
         background-color: #bababa; }
         background-color: #bababa; }
       .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
       .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
-
         color: #333333; }
+
         color: #222222; }
     .top-bar-section ul li > button.success {
     .top-bar-section ul li > button.success {
       background-color: #5da423;
       background-color: #5da423;
Line 351: Line 350:
   .top-bar {
   .top-bar {
-
     background: #333333;
+
     background: #222222;
     *zoom: 1;
     *zoom: 1;
     overflow: visible; }
     overflow: visible; }
Line 372: Line 371:
       top: 7px; }
       top: 7px; }
     .top-bar.expanded {
     .top-bar.expanded {
-
       background: #333333; }
+
       background: #222222; }
   .contain-to-grid .top-bar {
   .contain-to-grid .top-bar {
Line 396: Line 395:
     .top-bar-section li:not(.has-form) a:not(.button) {
     .top-bar-section li:not(.has-form) a:not(.button) {
       padding: 0 15px;
       padding: 0 15px;
-
       line-height: 45px;
+
       line-height: 67px;
-
       background: #333333; }
+
       background: #222222; }
       .top-bar-section li:not(.has-form) a:not(.button):hover {
       .top-bar-section li:not(.has-form) a:not(.button):hover {
         background: #005d82;
         background: #005d82;
Line 403: Line 402:
     .top-bar-section li.active:not(.has-form) a:not(.button) {
     .top-bar-section li.active:not(.has-form) a:not(.button) {
       padding: 0 15px;
       padding: 0 15px;
-
       line-height: 45px;
+
       line-height: 67px;
       color: white;
       color: white;
       background: #de3831; }
       background: #de3831; }
Line 454: Line 453:
         white-space: nowrap;
         white-space: nowrap;
         padding: 12px 15px;
         padding: 12px 15px;
-
         background: #333333; }
+
         background: #222222; }
       .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
       .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
         color: white;
         color: white;
-
         background: #333333; }
+
         background: #222222; }
       .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
       .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
         color: white;
         color: white;
Line 464: Line 463:
       .top-bar-section .dropdown li label {
       .top-bar-section .dropdown li label {
         white-space: nowrap;
         white-space: nowrap;
-
         background: #333333; }
+
         background: #222222; }
       .top-bar-section .dropdown li .dropdown {
       .top-bar-section .dropdown li .dropdown {
         left: 100%;
         left: 100%;
Line 473: Line 472:
       border-right: solid 1px #4e4e4e;
       border-right: solid 1px #4e4e4e;
       clear: none;
       clear: none;
-
       height: 45px;
+
       height: 67px;
       width: 0; }
       width: 0; }
     .top-bar-section .has-form {
     .top-bar-section .has-form {
-
       background: #333333;
+
       background: #222222;
       padding: 0 15px;
       padding: 0 15px;
-
       height: 45px; }
+
       height: 67px; }
     .top-bar-section .right li .dropdown {
     .top-bar-section .right li .dropdown {
       left: auto;
       left: auto;
Line 509: Line 508:
-
</style
+
</style>
-
</html
+
</html>

Latest revision as of 14:14, 26 June 2014

Retrieved from "http://2014.igem.org/Template:CSS/foundation"