Team:York/newCSS.css
From 2014.igem.org
Line 229: | Line 229: | ||
} | } | ||
- | /* --------------- HOME | + | /* --------------- HOME SLIDESHOW --------------- */ |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
.cb-slideshow, | .cb-slideshow, | ||
Line 319: | Line 237: | ||
height: 100%; | height: 100%; | ||
top: 0px; | top: 0px; | ||
- | left: | + | left: -21px; |
z-index: 0; | z-index: 0; | ||
list-style-type: none; | list-style-type: none; | ||
Line 507: | Line 425: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
+ | |||
+ | |||
+ | /* --------------- HOME --------------- */ | ||
+ | |||
+ | .filter { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #000; | ||
+ | opacity: 0.5; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 10; | ||
+ | position: fixed; | ||
+ | } | ||
+ | |||
+ | .inner { | ||
+ | max-width: 700px; | ||
+ | margin: 0 auto; | ||
+ | height: 50%; | ||
+ | } | ||
+ | |||
+ | .jumbotron { | ||
+ | color: #fff; | ||
+ | top: 100px; | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | z-index: 20; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | .inner h2 { | ||
+ | font-family:"Lato",Helvetica,sans-serif; | ||
+ | font-variant: normal; | ||
+ | font-weight: 200; | ||
+ | font-size: 34px; | ||
+ | text-align:left; | ||
+ | margin-left: 105px; | ||
+ | margin-bottom: -45px !important; | ||
+ | } | ||
+ | |||
+ | .inner hr { | ||
+ | width: 350px; | ||
+ | margin: 0 auto 50px; | ||
+ | border-color: #fff; | ||
+ | } | ||
+ | |||
+ | .inner p { | ||
+ | margin-bottom: 50px; | ||
+ | font-size: 17px; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | .logo-round { | ||
+ | margin: 0 auto 30px; | ||
+ | width: 130px; | ||
+ | height: 130px; | ||
+ | background: #fff; | ||
+ | border-radius: 999px; | ||
+ | } | ||
+ | |||
+ | .logo-round img { | ||
+ | margin: auto; | ||
+ | padding: 27px 0 0 10px; | ||
+ | width: 100px; | ||
+ | } | ||
+ | |||
+ | button.btn.btn-primary { | ||
+ | background: transparent; | ||
+ | border-radius: 0; | ||
+ | border: 1px solid #fff; | ||
+ | padding: 15px 30px; | ||
+ | text-transform: uppercase; | ||
+ | -webkit-transition: all ease-in-out 0.15s; | ||
+ | -moz-transition: all ease-in-out 0.15s; | ||
+ | -o-transition: all ease-in-out 0.15s; | ||
+ | -ms-transition: all ease-in-out 0.15s; | ||
+ | transition: all ease-in-out 0.15s; | ||
+ | } | ||
+ | |||
+ | .btn-primary:hover, .btn-primary:focus { | ||
+ | background-color: #fff !important; | ||
+ | color: #222; | ||
+ | } | ||
+ | |||
+ | .home-footer { |
Revision as of 14:26, 11 October 2014
/*** Minimal header: removes the search bar and header image and readjusts font colours in the menus.
Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code! Check out their wikis at: https://2011.igem.org/Team:Brown-Stanford,https://2012.igem.org/Team:Lethbridge
- /
- globalWrapper {
background-color: #42A7EA;
}
- content {
background-color: #42A7EA;
}
- content h1.firstHeading {
visibility:hidden; }
- content{
border-left: 0px solid rgb(68, 68, 68); border-right: 0px solid rgb(68, 68, 68);
width: 1000px;
}
- bodyContent{
margin: 0 auto;
margin-top: 0px;
width: 1000px; font-size: 14px; -webkit-font-smoothing: antialiased !important;
}
- p-logo {
display: none; }
- searchform {
display: none;
}
.left-menu { background-color: #555;
} .left-menu a {
color: #000;
}
- top-section{ /*the div containing the entire top bar*/
height: 16px; margin-bottom: 0px !important; border: none;
width: 1277px; background: orange;
}
- container{
margin-top: 0px;
height: inherit;
}
- search-controls {
overflow:hidden; display:none; background: none; position: absolute; top: 170px; right: 40px; }
- header {
width: 1277px; text-align: left; margin-left: auto; margin-right: auto;
margin-top: 5px;
margin-bottom: 0px !important; }
- global-banner {
margin-bottom: 1px; }
- menubar {
position: absolute; background: none; color: black; }
.left-menu, .right-menu{ position: absolute; background: none; color: black; }
.left-menu li a, .right-menu li a { color: #000 !important; }
.left-menu ul li, .right-menu ul li a{
background: none;
color: #000 !important;
}
.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
color: #000 !important;
}
- catlinks{
display:none; }
/*important for background colours*/ .mediawiki{ background: #ffffff; }
- footer-box {
width: inherit; margin-top: 20px; border-color: lightgrey;
}
- footer-box a {
color: lightgrey; }
- footer-box img {
opacity: 0.6; }
/* END MINIMAL HEADER */ .navbar-fixed-top { margin-top: 16px; }
.collapse.in { margin-top: 80px; } .collapsing.in { margin-top: 80px; }
h1 { font-family:Helvetica,Arial,sans-serif; border-bottom:3px solid orange; text-align:center; font-size:50px; }
h2 { font-family:Helvetica,Arial,sans-serif; font-variant:small-caps; font-size:40px; text-align:left; border-bottom:0px; }
.jumbotron p { font-size: 16px; }
body { font-family:"Palatino",Palatino,Georgia,serif; }
- content {
width:auto; padding:0px; }
- bodyContent {
width:auto; margin-top:-20px; }
.firstHeading { height:0px; padding:0px; margin:0px; border:0px; }
- top-section {
width: inherit; position: fixed; z-index: 1030; }
- topyorklogo {
margin-top:-15px; }
- yorkfooter {
min-height:80px; }
- bottomyorklogo {
margin:15px; height:50px; width:300px; }
.contacticon { margin: 15px; height:50px; width:50px; }
- footer-box {
width: inherit; }
/* Victor */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic);
body { font-family: "Lato", Helvetica, sans-serif; }
.container { width: 100%; height: 100%; padding: 0; }
/* --------------- HOME SLIDESHOW --------------- */
.cb-slideshow, .cb-slideshow:after {
position: fixed; width: 100%; height: 100%; top: 0px; left: -21px; z-index: 0; list-style-type: none;
}
.cb-slideshow li span {
width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s;
} .cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px;
} .cb-slideshow li:nth-child(1) span {
background-image: url()
} .cb-slideshow li:nth-child(2) span {
background-image: url(); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s;
} .cb-slideshow li:nth-child(3) span {
background-image: url(); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s;
} .cb-slideshow li:nth-child(4) span {
background-image: url(); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s;
} .cb-slideshow li:nth-child(5) span {
background-image: url(); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s;
} .cb-slideshow li:nth-child(6) span {
background-image: url(); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s;
} .cb-slideshow li:nth-child(7) span {
background-image: url(); -webkit-animation-delay: 36s; -moz-animation-delay: 36s; -o-animation-delay: 36s; -ms-animation-delay: 36s; animation-delay: 36s;
} .cb-slideshow li:nth-child(8) span {
background-image: url(); -webkit-animation-delay: 42s; -moz-animation-delay: 42s; -o-animation-delay: 42s; -ms-animation-delay: 42s; animation-delay: 42s;
} .cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s;
} .cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s;
} .cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s;
} .cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s;
} .cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s;
} .cb-slideshow li:nth-child(7) div {
-webkit-animation-delay: 36s; -moz-animation-delay: 36s; -o-animation-delay: 36s; -ms-animation-delay: 36s; animation-delay: 36s;
} .cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 42s; -moz-animation-delay: 42s; -o-animation-delay: 42s; -ms-animation-delay: 42s; animation-delay: 42s;
} /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }
} @-moz-keyframes imageAnimation {
0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }
} @-o-keyframes imageAnimation {
0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }
} @-ms-keyframes imageAnimation {
0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }
} @keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }
} /* Show at least something when animations not supported */ .no-cssanimations .cb-slideshow li span{ opacity: 1; }
/* --------------- HOME --------------- */
.filter { width: 100%; height: 100%; background-color: #000; opacity: 0.5; top: 0; left: 0; z-index: 10; position: fixed; }
.inner {
max-width: 700px;
margin: 0 auto; height: 50%; }
.jumbotron { color: #fff; top: 100px; width: 100%; position: absolute; z-index: 20; background: transparent; }
.inner h2 { font-family:"Lato",Helvetica,sans-serif; font-variant: normal; font-weight: 200; font-size: 34px; text-align:left; margin-left: 105px; margin-bottom: -45px !important; }
.inner hr {
width: 350px;
margin: 0 auto 50px;
border-color: #fff;
}
.inner p {
margin-bottom: 50px;
font-size: 17px; font-weight: 400; }
.logo-round {
margin: 0 auto 30px;
width: 130px; height: 130px; background: #fff; border-radius: 999px; }
.logo-round img { margin: auto; padding: 27px 0 0 10px; width: 100px; }
button.btn.btn-primary { background: transparent; border-radius: 0; border: 1px solid #fff; padding: 15px 30px; text-transform: uppercase; -webkit-transition: all ease-in-out 0.15s;
-moz-transition: all ease-in-out 0.15s; -o-transition: all ease-in-out 0.15s; -ms-transition: all ease-in-out 0.15s; transition: all ease-in-out 0.15s;
}
.btn-primary:hover, .btn-primary:focus {
background-color: #fff !important; color: #222;
}
.home-footer {