Team:Kent/menu bar
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | <html> | |
- | + | <style type="text/css"> | |
+ | /* | ||
+ | 960 Grid System ~ Core CSS. | ||
+ | Learn more ~ http://960.gs/ | ||
- | {{ | + | Licensed under GPL and MIT. |
+ | */ | ||
+ | |||
+ | /* | ||
+ | Forces backgrounds to span full width, | ||
+ | even if there is horizontal scrolling. | ||
+ | Increase this if your layout is wider. | ||
+ | |||
+ | Note: IE6 works fine without this fix. | ||
+ | */ | ||
+ | |||
+ | body { | ||
+ | min-width: 960px; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | /* `Container | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .container_12 { | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 960px; | ||
+ | } | ||
+ | |||
+ | /* `Grid >> Global | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .grid_1, | ||
+ | .grid_2, | ||
+ | .grid_3, | ||
+ | .grid_4, | ||
+ | .grid_5, | ||
+ | .grid_6, | ||
+ | .grid_7, | ||
+ | .grid_8, | ||
+ | .grid_9, | ||
+ | .grid_10, | ||
+ | .grid_11, | ||
+ | .grid_12 { | ||
+ | display: inline; | ||
+ | float: left; | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | |||
+ | .push_1, .pull_1, | ||
+ | .push_2, .pull_2, | ||
+ | .push_3, .pull_3, | ||
+ | .push_4, .pull_4, | ||
+ | .push_5, .pull_5, | ||
+ | .push_6, .pull_6, | ||
+ | .push_7, .pull_7, | ||
+ | .push_8, .pull_8, | ||
+ | .push_9, .pull_9, | ||
+ | .push_10, .pull_10, | ||
+ | .push_11, .pull_11 { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | /* `Grid >> Children (Alpha ~ First, Omega ~ Last) | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .alpha { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | |||
+ | .omega { | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | |||
+ | /* `Grid >> 12 Columns | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .container_12 .grid_1 { | ||
+ | width: 60px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_2 { | ||
+ | width: 140px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_3 { | ||
+ | width: 220px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_4 { | ||
+ | width: 300px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_5 { | ||
+ | width: 380px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_6 { | ||
+ | width: 460px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_7 { | ||
+ | width: 540px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_8 { | ||
+ | width: 620px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_9 { | ||
+ | width: 700px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_10 { | ||
+ | width: 780px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_11 { | ||
+ | width: 860px; | ||
+ | } | ||
+ | |||
+ | .container_12 .grid_12 { | ||
+ | width: 940px; | ||
+ | } | ||
+ | |||
+ | /* `Prefix Extra Space >> 12 Columns | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .container_12 .prefix_1 { | ||
+ | padding-left: 80px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_2 { | ||
+ | padding-left: 160px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_3 { | ||
+ | padding-left: 240px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_4 { | ||
+ | padding-left: 320px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_5 { | ||
+ | padding-left: 400px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_6 { | ||
+ | padding-left: 480px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_7 { | ||
+ | padding-left: 560px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_8 { | ||
+ | padding-left: 640px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_9 { | ||
+ | padding-left: 720px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_10 { | ||
+ | padding-left: 800px; | ||
+ | } | ||
+ | |||
+ | .container_12 .prefix_11 { | ||
+ | padding-left: 880px; | ||
+ | } | ||
+ | |||
+ | /* `Suffix Extra Space >> 12 Columns | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .container_12 .suffix_1 { | ||
+ | padding-right: 80px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_2 { | ||
+ | padding-right: 160px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_3 { | ||
+ | padding-right: 240px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_4 { | ||
+ | padding-right: 320px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_5 { | ||
+ | padding-right: 400px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_6 { | ||
+ | padding-right: 480px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_7 { | ||
+ | padding-right: 560px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_8 { | ||
+ | padding-right: 640px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_9 { | ||
+ | padding-right: 720px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_10 { | ||
+ | padding-right: 800px; | ||
+ | } | ||
+ | |||
+ | .container_12 .suffix_11 { | ||
+ | padding-right: 880px; | ||
+ | } | ||
+ | |||
+ | /* `Push Space >> 12 Columns | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .container_12 .push_1 { | ||
+ | left: 80px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_2 { | ||
+ | left: 160px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_3 { | ||
+ | left: 240px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_4 { | ||
+ | left: 320px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_5 { | ||
+ | left: 400px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_6 { | ||
+ | left: 480px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_7 { | ||
+ | left: 560px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_8 { | ||
+ | left: 640px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_9 { | ||
+ | left: 720px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_10 { | ||
+ | left: 800px; | ||
+ | } | ||
+ | |||
+ | .container_12 .push_11 { | ||
+ | left: 880px; | ||
+ | } | ||
+ | |||
+ | /* `Pull Space >> 12 Columns | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | .container_12 .pull_1 { | ||
+ | left: -80px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_2 { | ||
+ | left: -160px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_3 { | ||
+ | left: -240px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_4 { | ||
+ | left: -320px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_5 { | ||
+ | left: -400px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_6 { | ||
+ | left: -480px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_7 { | ||
+ | left: -560px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_8 { | ||
+ | left: -640px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_9 { | ||
+ | left: -720px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_10 { | ||
+ | left: -800px; | ||
+ | } | ||
+ | |||
+ | .container_12 .pull_11 { | ||
+ | left: -880px; | ||
+ | } | ||
+ | |||
+ | /* `Clear Floated Elements | ||
+ | ----------------------------------------------------------------------------------------------------*/ | ||
+ | |||
+ | /* http://sonspring.com/journal/clearing-floats */ | ||
+ | |||
+ | .clear { | ||
+ | clear: both; | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | visibility: hidden; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ | ||
+ | |||
+ | .clearfix:before, | ||
+ | .clearfix:after, | ||
+ | .container_12:before, | ||
+ | .container_12:after { | ||
+ | content: '.'; | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | visibility: hidden; | ||
+ | font-size: 0; | ||
+ | line-height: 0; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | .clearfix:after, | ||
+ | .container_12:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | The following zoom:1 rule is specifically for IE6 + IE7. | ||
+ | Move to separate stylesheet if invalid CSS is a problem. | ||
+ | */ | ||
+ | |||
+ | .clearfix, | ||
+ | .container_12 { | ||
+ | zoom: 1; | ||
+ | } | ||
+ | </style> | ||
+ | </html> |
Revision as of 22:15, 10 August 2014