|
|
Line 1: |
Line 1: |
- | /* General Blueprint Style */
| + | html, body{ |
- | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
| + | background-color:white; |
- | @font-face {
| + | |
- | font-family: 'fontawesome';
| + | |
- | src:url('../fonts/fontawesome.eot');
| + | |
- | src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
| + | |
- | url('../fonts/fontawesome.svg#fontawesome') format('svg'),
| + | |
- | url('../fonts/fontawesome.woff') format('woff'),
| + | |
- | url('../fonts/fontawesome.ttf') format('truetype');
| + | |
- | font-weight: normal;
| + | |
- | font-style: normal;
| + | |
| } | | } |
| | | |
- | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } | + | /* Headers */ |
- | body, html { font-size: 100%; padding: 0; margin: 0;}
| + | h1, h2, h3, h4, h5 {font-family:Verdana} |
| | | |
- | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ | + | /* Full page formats */ |
- | .clearfix:before, .clearfix:after { content: " "; display: table; }
| + | |
- | .clearfix:after { clear: both; }
| + | |
| | | |
- | body { | + | body#space{ |
- | font-family: 'Lato', Calibri, Arial, sans-serif;
| + | background-image: url('http://st.gdefon.com/wallpapers_original/wallpapers/34746_los-andzheles_vechernie-ogni_panorama_2831x1080_(www.GdeFon.ru).jpg'); |
- | color: #fff;
| + | background-attachment: fixed; |
| + | background-repeat: repeat; |
| + | background-size: 100%; |
| + | height: 1000px; |
| + | width: 2000px; |
| } | | } |
| | | |
- | a {
| + | #top-section{ |
- | color: #f0f0f0;
| + | position: relative; |
- | text-decoration: none;
| + | height: 150px; |
| + | width: 975px; |
| } | | } |
| | | |
- | a:hover {
| + | #contentSub, #search-controls, .firstHeading, #catlinks, #p-logo{ |
- | color: #000;
| + | display:none; |
| } | | } |
| | | |
- | .container > header {
| + | #container{ |
- | padding: 2.875em 1.875em 1.875em;
| + | margin: 15px 0px auto auto; |
- | position: fixed;
| + | width: 975px; |
- | z-index: 1000;
| + | |
- | width: 60%;
| + | |
- | left: 20%;
| + | |
| } | | } |
| | | |
- | .container > header h1 {
| + | #globalwrapper{ |
- | font-size: 2.125em;
| + | margin: 0px 0px auto auto; |
- | line-height: 1.3;
| + | |
- | margin: 0;
| + | |
- | float: left;
| + | |
- | font-weight: 400;
| + | |
| } | | } |
| | | |
- | .container > header span {
| + | p{ |
- | display: block;
| + | margin: 5px; |
- | font-weight: 700;
| + | font-family: Verdana; |
- | text-transform: uppercase;
| + | |
- | letter-spacing: 0.5em;
| + | |
- | padding: 0 0 0.6em 0.1em;
| + | |
| } | | } |
- | | + | |
- | .container > header nav {
| + | h4{ |
- | float: right;
| + | margin: 5px; |
- | }
| + | |
- | | + | |
- | .container > header nav a {
| + | |
- | display: block;
| + | |
- | float: left;
| + | |
- | position: relative;
| + | |
- | width: 2.5em;
| + | |
- | height: 2.5em;
| + | |
- | background: #fff;
| + | |
- | border-radius: 50%;
| + | |
- | color: transparent;
| + | |
- | margin: 0 0.1em;
| + | |
- | border: 4px solid #fff;
| + | |
- | text-indent: -8000px;
| + | |
- | }
| + | |
- | | + | |
- | .container > header nav a:after {
| + | |
- | content: attr(data-info);
| + | |
- | color: #fff;
| + | |
- | position: absolute;
| + | |
- | width: 600%;
| + | |
- | top: 120%;
| + | |
- | text-align: right;
| + | |
- | right: 0;
| + | |
- | opacity: 0;
| + | |
- | pointer-events: none;
| + | |
- | }
| + | |
- | | + | |
- | .container > header nav a:hover:after {
| + | |
- | opacity: 1;
| + | |
- | }
| + | |
- | | + | |
- | .container > header nav a:hover {
| + | |
- | background: #47a3da;
| + | |
- | }
| + | |
- | | + | |
- | .icon-drop:before,
| + | |
- | .icon-arrow-left:before {
| + | |
- | font-family: 'fontawesome';
| + | |
- | position: absolute;
| + | |
- | top: 0;
| + | |
- | width: 100%;
| + | |
- | height: 100%;
| + | |
- | speak: none;
| + | |
- | font-style: normal;
| + | |
- | font-weight: normal;
| + | |
- | line-height: 2;
| + | |
- | text-align: center;
| + | |
- | color: #47a3da;
| + | |
- | -webkit-font-smoothing: antialiased;
| + | |
- | text-indent: 8000px;
| + | |
- | padding-left: 8px;
| + | |
- | }
| + | |
- | | + | |
- | .container > header nav a:hover:before {
| + | |
- | color: #fff;
| + | |
- | }
| + | |
- | | + | |
- | .icon-drop:before {
| + | |
- | content: "\e000";
| + | |
- | }
| + | |
- | | + | |
- | .icon-arrow-left:before {
| + | |
- | content: "\f060";
| + | |
- | }
| + | |
- | | + | |
- | @import url(http://fonts.googleapis.com/css?family=Raleway);
| + | |
- | /* Set all parents to full height */
| + | |
- | html, body,
| + | |
- | .container,
| + | |
- | .cbp-fbscroller,
| + | |
- | .cbp-fbscroller section {
| + | |
- | height: 100%;
| + | |
- | }
| + | |
- | | + | |
- | /* The nav is fixed on the right side and we center it by translating it 50%
| + | |
- | (we don't know it's height so we can't use the negative margin trick) */
| + | |
- | .cbp-fbscroller > nav {
| + | |
- | position: fixed;
| + | |
- | z-index: 9999;
| + | |
- | right: 100px;
| + | |
- | top: 50%;
| + | |
- | width: 26px;
| + | |
- | -webkit-transform: translateY(-50%);
| + | |
- | -moz-transform: translateY(-50%);
| + | |
- | -ms-transform: translateY(-50%);
| + | |
- | transform: translateY(-50%);
| + | |
- | }
| + | |
- | | + | |
- | .cbp-fbscroller > nav a {
| + | |
- | display: block;
| + | |
- | position: relative;
| + | |
- | z-index: 9999;
| + | |
- | color: transparent;
| + | |
- | width: 26px;
| + | |
- | height: 26px;
| + | |
- | outline: none;
| + | |
- | margin: 25px 0;
| + | |
- | border-radius: 50%;
| + | |
- | border: 4px solid #fff;
| + | |
- | }
| + | |
- | | + | |
- | .no-touch .cbp-fbscroller > nav a:hover {
| + | |
- | background: rgba(255,255,255,0.6);
| + | |
- | }
| + | |
- | | + | |
- | .cbp-fbscroller > nav a.cbp-fbcurrent {
| + | |
- | background: #fff;
| + | |
- | }
| + | |
- | | + | |
- | /* background-attachment does the trick */
| + | |
- | .cbp-fbscroller section {
| + | |
- | position: relative;
| + | |
- | background-position: top center;
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-size: cover;
| + | |
- | }
| + | |
- | | + | |
- | .no-touch .cbp-fbscroller section {
| + | |
- | background-attachment: fixed;
| + | |
- | }
| + | |
- | | + | |
- | #fbsection1 {
| + | |
- | background-image: url("https://static.igem.org/mediawiki/2013/c/ce/Ucla_bg1.png");
| + | |
- | }
| + | |
- | | + | |
- | #infb1 {
| + | |
- | font-family: 'Raleway', sans-serif;
| + | |
- | position: relative;
| + | |
- | height: 600px;
| + | |
- | width: 800px;
| + | |
- | margin: 18px auto 0;
| + | |
- | }
| + | |
- | | + | |
- | #fbsection2 {
| + | |
- | background-image: url("https://static.igem.org/mediawiki/2013/f/f9/Ucla_bg2.png");
| + | |
- | }
| + | |
- | | + | |
- | #fbsection3 {
| + | |
- | background-image: url(../images/3.jpg);
| + | |
- | }
| + | |
- | | + | |
- | #fbsection4 {
| + | |
- | background-image: url(../images/4.jpg);
| + | |
- | }
| + | |
- | | + | |
- | #fbsection5 {
| + | |
- | background-image: url(../images/5.jpg);
| + | |
| } | | } |