Team:York/newCSS.css
From 2014.igem.org
/*** 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
- /
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic);
- globalWrapper {
background-color: #fff;
padding: 0; position: relative; }
- content {
background-color: #fff;
}
- 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;
}
- top-section{ /*the div containing the entire top bar*/
position: fixed; z-index: 1030; border: none;
width: 100%;
color: #fff !important; height: 25px; background: rgba(255,255,255,0.2); }
- 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; }
- menubar {
position: relative; background: none; padding: 5px 10px; font-size: 11px; text-transform: uppercase; top: 0; width: auto; }
- menubar ul {
color: #fff; list-style: none; margin: 0; padding: 0; }
- menubar li {
font-size: 11px; }
.left-menu { float: left; }
.right-menu { float: right; }
.left-menu li a { padding: 0px 10px 0px 0px; color: #fff; text-transform: uppercase; background-color: transparent; }
.right-menu li a { padding: 0px 0px 0px 10px; color: #fff; text-transform: uppercase; background-color: transparent; }
.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
color: #fff !important;
text-decoration: none !important; }
li#pt-userpage a { text-transform: none !important; }
- catlinks{
display:none; }
/*important for background colours*/ .mediawiki{ background: #ffffff; }
- footer-box {
width: inherit; margin-top: 20px; border-top: lightgrey 1px solid;
border: none; }
- footer-box a {
color: lightgrey; }
- footer-box img {
opacity: 0.6; }
/* END MINIMAL HEADER */
.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:40px !important; }
h2 { font-family:Helvetica,Arial,sans-serif; font-variant:small-caps; font-size:30px !important; text-align:left; border-bottom:0px; }
.jumbotron p { font-size: 16px; color: #222; }
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; }
- yorkfooter {
min-height:80px; }
- bottomyorklogo {
width:300px; }
.contacticon { margin: 15px; height:50px; width:50px; }
- footer-box {
width: inherit; }
/* Victor */
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: 0; left: 0; z-index: -200; list-style-type: none;
list-style-image: none; margin: 0; background-color: #222; }
.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 48s linear infinite 0s; -moz-animation: imageAnimation 48s linear infinite 0s; -o-animation: imageAnimation 48s linear infinite 0s; -ms-animation: imageAnimation 48s linear infinite 0s; animation: imageAnimation 48s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url();
background-position: 40% 50%; } .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; }
/* --------------- GENERAL --------------- */
h1 { font-family:"Lato",Helvetica,Arial,sans-serif; font-variant:normal; font-size:40px; border-bottom:0px; font-weight: 200; text-align: left; padding: 10px 0; color: #222; }
h2 { font-variant:normal; font-size:30px; }
a, a:visited { color: #0480e0; }
a:hover, a:focus { color: #499ffd; text-decoration: none; }
hr { width: 300px; margin: -15px 0 40px;
border-color: #222;
}
.row { margin-right: auto; margin-left: auto; max-width: 900px; }
.col-lg-8 { width: 100%; }
.navbar>.container { padding-top: 25px; max-width: 900px; }
.navbar-right { text-transform: uppercase; font-size: 12px; }
.navbar-inverse { background-image: none; background-color: rgba(8,8,8,0.8); border: none !important; }
.navbar-inverse .navbar-nav>li>a { color: #fff; }
.navbar-inverse .navbar-nav>.active>a { background-image: none; background-color: #222 !important; box-shadow: none; }
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color:#4596ef !important; }
.dropdown-menu { background-color:rgba(69, 150, 239,0.9); border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; font-size: 12px; padding: 0; }
.dropdown-menu>li>a { padding: 10px 20px; color: #fff; }
.dropdown-menu>.active>a { color: #fff; background:rgba(69, 150, 239, 1); }
.dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background:rgba(69, 150, 239, 1); color: #fff; }
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color:#4596ef; }
.container>.navbar-collapse { margin-right: 15px; margin-left: 15px; }
img#topyorklogo { margin: 10px 15px 0 !important; width: 80px !important; }
.navbar-fixed-top>.container>.navbar-brand { background-color: #fff; height: 80px !important; width: 100px; position: absolute; margin-top: 0px; margin-left: 15px !important; padding: 0; }
.nav>li, .dropdown-menu>li { font-size: 12px; font-weight: 400; }
.nav>li>a>.fa-lg { padding: 15px; line-height: 20px; }
.nav>li>a>.fa-lg:hover { background-color: #4596ef !important; }
.jumbotron { color: #222; z-index: 20; background: transparent; padding-top: 120px; }
ul { list-style-image: none; list-style-type: disc; }
ol, ul { margin: 0 0 1.5em 1.5em; font-weight: 200; padding-left: 20px; }
li { margin-bottom: 0; font-size: 16px; }
- yorkfooter {
min-height:80px; background: #f8f8f8; -webkit-box-shadow: none; box-shadow: none; border: none; border-top: 1px solid #ededed; margin: 0; border-radius: 0; }
- yorkfooter p {
font-size: 12px; text-align: center; font-weight: 200; color: #aaa; text-transform: uppercase; }
- footer ul {
margin: 0; padding: 0; }
- footer li {
margin: 0 0.6em; }
- footer-box {
margin-top: -10px; border-top: 1px solid #ededed; background: #f8f8f8; padding: 20px 0; }
- footer-box a {
color: #aaa; text-transform: uppercase; font-size: 10px; }
- footer {
color: #000000; text-align: center; font-size: 90%; max-width: 900px; margin: 0 auto; padding: 0 15px; }
- f-poweredbyico,
- f-copyrightico {
margin-top: 10px; }
.navbar-brand { height: auto; }
- yorkfooter>.container {
padding-top: 0; }
- yorkfooter>.container a {
float: none; text-align: center; }
- bottomyorklogo {
margin: 20px 0; }
small, .small { line-height: 1.5em; }
- hover, :focus, :active {
-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;
}
/* --------------- HOME --------------- */
.filter { width: 100%; height: 100%; background-color: #000; opacity: 0.5; top: 0; left: 0; z-index: -100; position: fixed; }
.inner {
max-width: 700px;
margin: 0 auto; height: 50%; }
.home { color: #fff; width: 100%; position: relative; }
.inner h1 { font-family:"Lato",Helvetica,sans-serif; font-variant: normal; font-weight: 200; font-size: 30px !important; text-align:center; margin-bottom: -50px !important; }
.home hr {
border-color: #fff;
width: 350px; margin: 0 auto 50px; }
.inner p {
margin-bottom: 50px;
font-size: 17px; font-weight: 400; color:#fff; }
.logo-round {
margin: 0 auto 30px;
width: 130px; height: 130px; background: #fff; border-radius: 999px; }
.logo-round img { margin: auto; padding: 31px 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 !important;
}
.home i { float: none; color: #fff; }
.home-row { margin: 80px auto 100px; padding: 0 10px; }
.home-panel { padding:0; }
.home-panel { background-color: transparent; border: #fff 1px solid; padding: 0 30px; text-align: center; margin-left: -1px; height: 410px; }
.home-panel h3 { margin-top: .2em; margin-bottom: .8em !important; text-transform: uppercase; font-size: 22px; color: #fff; }
.home-panel p { margin-top: 1em; margin-bottom: 5em; text-transform: none; white-space: normal; color: #fff; }
.home-panel:hover h3, .home-panel:hover p { color: #222 !important; }
.home-panel img { background-color: #fff; max-width: 300px; width: 100%; margin: 0 auto; }
.home-footer { position: absolute; bottom: 0; z-index: 30; width: 100%; }
.social { max-width: 70px; margin: 30px auto; color: #fff !important; }
.social a, .social a:hover { color: #fff !important; }
.fa-twtitter { float: left; }
.fa-envelope { float: left; }
- bodyContent a[href ^="https://"], .link-https,
- bodyContent a[href ^="mailto:"], .link-mailto {
background: none; padding: 0; }
/* --------------- CONSTRUCTS --------------- */
.img-max-650 { margin: 0 auto; width: 100%; max-width: 650px; }
.nav-tabs { margin: 0 auto 30px; text-align: center; border: none; }
.nav-tabs>li { display: block; float: left; width: 100%; text-align: left; }
.nav-tabs>li>a { border: none; border-radius: 0; margin: 0 -4px 0 0; padding: 15px 20px; color: #222; width: 100%; text-transform: uppercase; }
.nav-tabs>li>a:hover, .nav-tabs>li>a:focus { border-color: #499ffd; background-color: #499ffd; color: #fff; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { background-color: #f8f8f8; border:none; color: #222; }
.tab-content>.tab-pane { background-color: #f8f8f8; padding: 5px 40px 30px; }
/* --------------- TEAM --------------- */
.team { margin-left: -15px; margin-right: -15px; }
/* --------------- PROTOCOLS --------------- */
.col-md-3, .col-md-9 { padding: 0; }
/* --------------- RESPONSIVE --------------- */
@media (max-width: 991px) {
.home-panel { height: 100%; width: 100%; margin-top: 0; margin-left: 0; }
.home-panel p { font-size: 16px; margin-bottom: 1.5em; }
.home-row { padding: 0 70px; }
}
@media (max-width: 622px) {
- top-section {
height: 50px; }
.navbar>.container { padding-top: 50px; }
.left-menu, .right-menu { float: left; text-align: left; width: 100% !important; }
li#pt-userpage, li#pt-anonuserpage, li#pt-login { padding-left: 0; }
.right-menu li a { padding: 0 10px 0 0; }
.jumbotron { padding-top: 102px; }
}