Team:NTU Taiwan/stylesheets/style.css

From 2013.igem.org

(Difference between revisions)
Ddmail2009 (Talk | contribs)
(Created page with "html { overflow: auto; } body { padding: 0; font-family: 'Open Sans', sans-serif; color: #fff; overflow: hidden; -webkit-backface-visibility: hidden; } ::selection { bac...")
Newer edit →

Revision as of 01:23, 28 July 2013

html { overflow: auto; }

body { padding: 0; font-family: 'Open Sans', sans-serif; color: #fff; overflow: hidden; -webkit-backface-visibility: hidden; }

selection {

background: #c53727; color:#fff; }

-moz-selection {

background: #c53727; color:#fff; }

/* ==== Spacing ==== */

.margin25 { margin-top: 25%; }

.divide { margin-top: 5%; margin-bottom: 5%; }

.divider { border-bottom: 1px dashed #0c0c0c; }

/* ==== Typography ==== */

h1 { font-size: 56px; text-align: center; margin-bottom: 35px; line-height: 1; letter-spacing: -3px; }

@media (max-width: 767px) { h1 { font-size: 32px; } }

p { margin-bottom: 35px; color: #dad8d4; }

p.center { text-align: center; }

h4 { font-size: 13px; font-weight: 100; color: #888; text-transform: uppercase; text-align: center; letter-spacing: 1px; margin: 35px 0; }

a { font-size: 14px; color: #dad8d4; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -o-transition: 0.2s; }

a:hover { color: #fff; text-decoration: none; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -o-transition: 0.2s; }

.icon-emphasize{ font-size: 170px; color: #c53727; line-height: 1.2 !important; }

/*#igem i, #basic i{ font-size: 170px; color: #c53727; line-height: 1.2 !important; }*/

textarea:focus, input:focus, a:focus, *:focus { outline: none; }

.navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus { background-color: transparent !important; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; }

/* ==== Intro ==== */

  1. intro {

background-color: black; /*background: #222 url(../img/biology_bg.png);*/ /*background-size: cover;*/

/*padding-right: 20px;*/ /*padding-left: 20px;*/ min-height: 460px; }

  1. intro h2 {

font-size: 56px; text-align: center; font-weight: 700; color: #fff; letter-spacing: -3px; line-height: 1; }

@media (max-width: 570px) { #intro h2 { font-size: 42px; letter-spacing: -1px; padding-top: 25%; } }

/* ==== Page Header ==== */

h1.header { font-size: 90px; color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); text-align: center; line-height: 1; margin-bottom: 15px; letter-spacing: -2px; }

@media (max-width: 767px) { h1.header { font-size: 42px; } }

p.header { font-size: 26px; color: #fff; font-weight: 100; text-align: center; line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }

@media (max-width: 767px) { p.header { font-size: 18px; } }

/* ==== Section Headers ==== */

  1. igem-top-desktop {

background: #222 url(../img/igem_bg.jpg) fixed no-repeat center; background-size: cover; }

  1. igem-top-mobile {

background: #222 url(../img/igem_bg.jpg) no-repeat center; }

  1. basic-top-desktop {

background: #222 url(../img/basic_bg.jpg) fixed no-repeat center; background-size: cover; }

  1. basic-top-mobile {

background: #222 url(../img/basic_bg.jpg) no-repeat center; }

  1. works-top-desktop {

background: #222 url(../img/works_bg.jpg) fixed no-repeat center; background-size: cover; }

  1. works-top-mobile {

background: #222 url(../img/works_bg.jpg) no-repeat center; }

  1. gallery-top-desktop {

background: #222 url(../img/gallery_bg.jpg) fixed no-repeat center; background-size: cover; }

  1. gallery-top-mobile {

background: #222 url(../img/gallery_bg.jpg) no-repeat center; }

  1. team-top-desktop {

background: #222 url(../img/team_bg.jpg) fixed no-repeat center; background-size: cover; }

  1. team-top-mobile {

background: #222 url(../img/team_bg.jpg) no-repeat center; }

  1. calendar-top-desktop {

background: #222 url(../img/calendar_bg.jpg) fixed no-repeat center; background-size: cover; }

  1. calendar-top-mobile {

background: #222 url(../img/calendar_bg.jpg) no-repeat center; }

  1. contact-top-desktop {

background: #222 url(../img/contact_bg.jpg) fixed no-repeat center; background-size: cover; }

  1. contact-top-mobile {

background: #222 url(../img/contact_bg.jpg) no-repeat center; }

  1. igem-top-desktop,
  2. basic-top-desktop,
  3. works-top-desktop,
  4. gallery-top-desktop,
  5. team-top-desktop,
  6. calendar-top-desktop,
  7. contact-top-desktop,
  1. igem-top-mobile,
  2. basic-top-mobile,
  3. works-top-mobile,
  4. gallery-top-mobile,
  5. team-top-mobile,
  6. calendar-top-mobile,
  7. contact-top-mobile {

padding: 75px 0; }

@media (max-width: 1024px) { #igem-top-desktop, #basic-top-desktop, #works-top-desktop, #gallery-top-desktop, #team-top-desktop, #calendar-top-desktop, #contact-top-desktop { background-size: auto; } }

/* ==== Sections ==== */

  1. igem,
  2. basic,
  3. works,
  4. gallery,
  5. team,
  6. calendar {

padding-right: 20px; padding-left: 20px; background: #222; }

  1. contact {

padding-right: 20px; padding-left: 20px; background: #222; }

  1. hint1 {

padding-right: 20px; padding-left: 20px; background: #c53727; padding: 15px; text-align: center; }

  1. hint2 {

padding-right: 20px; padding-left: 20px; background: #c53727; padding: 15px; text-align: center; }

  1. hint3 {

padding-right: 20px; padding-left: 20px; background: #c53727; padding: 15px; text-align: center; }

  1. hint1 a, #hint2 a, #hint3 a {

color: #fff; }

/* ==== Contact ==== */

input[type="text"], select, textarea { border: 1px solid #0c0c0c; background: #111; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; }

  1. address {

text-align: center; }

.honeypot { display: none; }

.message { display: none; }

.alert { padding: 5px 15px 5px 15px; margin: 8px 0 0 0; }

/* ==== Footer ==== */

  1. footer {

padding-right: 20px; padding-left: 20px; background-color: #111; border-top: 1px solid #0c0c0c; }

  1. footer .span2 {

border-bottom: 1px solid #0c0c0c; padding-bottom: 15px; }

  1. footer ul {

list-style: none; margin:0; }

  1. footer li {

padding-bottom: 5px; text-align: right; }

@media (max-width: 767px) { #footer li { padding-bottom: 5px; text-align: center; } }

  1. footer h5 {

color: #dad8d4; border-bottom: 1px solid #131519; padding-bottom: 15px; margin-top: 15px; }

/* ==== Navigation ==== */

  1. navigation {

padding-right: 20px; padding-left: 20px; background: #222; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -ms-box-shadow: none !important; -o-box-shadow: none !important; }

/* fix for small android devices */ @media (max-width: 240px) { .navbar .brand { margin-left: -12px; } }

.navbar-fixed-top { position: fixed; }

.nav a { color: #fff !important; }

.nav a:hover { color: #888 !important; }

.nav .active a { color: #888 !important; }

.navbar .nav .active a, .navbar .nav .active a:hover { background: transparent; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; }

.navbar .nav li a { text-shadow: none; text-align: center; padding: 20px 15px 20px 15px; }

.navbar-inner { background: transparent; border: none; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -ms-box-shadow: none !important; -o-box-shadow: none !important; filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; }

.navbar-fixed-top .navbar-inner { padding: 0; }

.navbar-fixed-top { margin: auto; }

.navbar .btn-navbar { float: right; padding: 12px 12px; margin: 12px 0; }

.nav-collapse .nav li a:hover, .nav-collapse .dropdown-menu a:hover { background-color: transparent; }

.nav-collapse .nav li a { font-weight: 400; text-transform: uppercase; font-size: 13px; }

@media (max-width: 979px) { .navbar { padding: 0 20px; margin-bottom: 0; } }

@media (max-width: 979px) { .nav-collapse .nav li a, .nav-collapse .dropdown-menu a { padding: 9px 15px; } }

/* ==== Carousel ==== */

.carousel-control.m-btn { position: absolute; height: auto; width: auto; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }

.carousel-inner .item img { display: inline-block !important; /*width: 554px;*/ height: 300px; }

.carousel-inner .item { text-align: center !important; }

@media (max-width: 570px) { .carousel-control.left { left: 0; } .carousel-control.right { right: 0; } }

.carousel-control { background: none; border: none; opacity: 0.3; }

.carousel-control:hover { background: none; border: none; opacity: 0.8; }

.carousel.horizontal .next { left: 100%; }

.carousel.horizontal .prev { left: -100%; }

.carousel.horizontal .active.left { left: 100%; }

.carousel.horizontal .active.right { left: -100%; }

.carousel.carousel-fade .item { -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; opacity:0; }

.carousel.carousel-fade .active.item { opacity:1; }

.carousel.carousel-fade .active.left, .carousel.carousel-fade .active.right { left: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); }

.carousel.carousel-fade .next, .carousel.carousel-fade .prev { left: 0; z-index: 1; }

.carousel.carousel-fade .carousel-control { z-index: 3; }

.vertical .carousel-inner { height: 100%; }

.carousel.vertical .item { -webkit-transition: 0.6s ease-in-out top; -moz-transition: 0.6s ease-in-out top; -ms-transition: 0.6s ease-in-out top; -o-transition: 0.6s ease-in-out top; transition: 0.6s ease-in-out top; }

.carousel.vertical .active { top: 0; }

.carousel.vertical .next { top: 100%; }

.carousel.vertical .prev { top: -100%; }

.carousel.vertical .next.left, .carousel.vertical .prev.right { -webkit-transition: ease-in-out top; -moz-transition: ease-in-out top; -ms-transition: ease-in-out top; -o-transition: ease-in-out top; transition: ease-in-out top; }

.carousel.vertical .active.left { top: 100%; }

.carousel.vertical .active.right { top: -100%; }

.carousel.vertical .item { left: 0; }

.carousel .inactive { position: absolute; display: block; z-index: -1; }

.carousel .inactive.active { position: relative !important; z-index: 0; }

/* ==== Thumbs ==== */

.thumbnail { border: 0; padding: 0; text-align: center; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; }

.thumbnail h4 { color: #fff; padding: 20px; margin: 0; font-size: 20px; font-weight: 700; text-transform: none; letter-spacing: -1px; }

.thumbnail span { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 100; }

.thumbnail p { padding: 20px; margin: 0; }

/* ==== Team ==== */

  1. team .thumbnail {

background-color: #333; border: 0; padding: 0; margin-bottom: 35px; text-align: center; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

  1. team.thumbnail h4 {

color: #c53727; padding: 20px; margin: 0; font-size: 20px; font-weight: 300; text-transform: none; letter-spacing: -1px; }

  1. team.thumbnail span {

font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 100; }

  1. team.thumbnail p {

padding: 20px; margin: 0; }

/* ==== Footer Social ==== */

  1. footer .facebook {

color: #3B5998; }

  1. footer .twitter {

color: #09C; }

  1. footer .google {

color: #dd4b38; }

  1. footer .instagram {

color: #3F729B; }

  1. footer .pinterest {

color: #CB2027; }

  1. footer .facebook:hover,
  2. footer .twitter:hover,
  3. footer .pinterest:hover,
  4. footer .instagram:hover,
  5. footer .google:hover {

opacity: 0.6; }

/* ==== Preloader ==== */

  1. preloader {

position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 9999; }

  1. status {

width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background-image: url(../img/preload.gif); background-repeat: no-repeat; background-position: center; margin: -100px 0 0 -100px; }

/* ==== Intro more button ==== */

  1. more {

text-align: center; position: absolute; right: 0; left: 0; bottom: -5px; }

.delay { animation-delay: 2s; -moz-animation-delay: 2s; -webkit-animation-delay: 2s; -o-animation-delay: 2s; }

.animated { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }

@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); }

100% { opacity: 1; -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); }

100% { opacity: 1; -moz-transform: translateY(0); } }

@-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); }

100% { opacity: 1; -o-transform: translateY(0); } }

@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); }

100% { opacity: 1; transform: translateY(0); } }

.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; }


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.thanks img{ width: 50px; } /* .dropdown-submenu:hover>a{ background-image: none; background-color: inherit; }


.dropdown-menu li>a:hover{ background-image: none; }

.dropdown-menu{ padding: inherit; background-color: grey; color: white; }


.dropdown-submenu>.dropdown-menu{ top: inherit; margin-top: inherit; min-width: inherit; }

.dropdown-submenu>a:after{ content: none; }*/

p{ text-align: justify; margin-bottom: inherit; }

ul{ list-style-image: none; }

h1, h2, h3, h4, h5, h6{ padding-top: 0; padding-bottom: 0; border-bottom: none; color: #dad8d4; }

  1. footer li{

display: inherit; }

abbr, acronym{ color: inherit; }

.center{ width: inherit; }

Retrieved from "http://2013.igem.org/Team:NTU_Taiwan/stylesheets/style.css"