Team:York/newCSS.css

From 2014.igem.org

Revision as of 21:49, 12 October 2014 by Rcdp501 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/*** 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: absolute; height: 100%; }

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 }

.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-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; height: 100%; }

bodyContent {

width:auto; margin-top:-20px; }

.firstHeading { height:0px; padding:0px; margin:0px; border:0px; }

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 */

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: 0;
   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 --------------- */

h2 { 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; }

hr { width: 300px; margin: -15px 0 60px;

border-color: #222;

}

.row { margin-right: auto; margin-left: auto; max-width: 900px; }

.col-lg-8 { width: 100%; }

/* --------------- 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: #222; z-index: 20; background: transparent; }

.home { color: #fff; top: 50%; margin-top: -400px; width: 100%; position: absolute; }

.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; }

.home hr {

border-color: #fff;

width: 350px; margin: 0 auto 50px; }

.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: 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;

}

.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: right; }

bodyContent a[href ^="https://"], .link-https,
bodyContent a[href ^="mailto:"], .link-mailto {

background: none; padding: 0; }