Line 49: | Line 49: | ||
+ | |||
+ | /* Global Styles */ | ||
+ | |||
+ | * { | ||
+ | font-family: 'Open Sans', sans-serif, 'Helvetica Neue', Arial, sans-serif; | ||
+ | } | ||
+ | |||
+ | html, | ||
+ | body { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | body { | ||
+ | font-family: 'Open Sans', sans-serif, "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | .text-vertical-center { | ||
+ | display: table-cell; | ||
+ | text-align: center; | ||
+ | padding-top: 30px; | ||
+ | } | ||
+ | |||
+ | .text-vertical-center h1 { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-size: 4.5em; | ||
+ | font-weight: 700; | ||
+ | font-color: white; | ||
+ | } | ||
+ | |||
+ | /* Custom Button Styles */ | ||
+ | |||
+ | |||
+ | .btn-light { | ||
+ | border-radius: 0; | ||
+ | color: #333; | ||
+ | background-color: rgb(255,255,255); | ||
+ | } | ||
+ | |||
+ | .btn-light:hover, | ||
+ | .btn-light:focus, | ||
+ | .btn-light:active { | ||
+ | color: #333; | ||
+ | background-color: rgba(255,255,255,0.8); | ||
+ | } | ||
+ | |||
+ | /* Custom Horizontal Rule */ | ||
+ | |||
+ | hr.small { | ||
+ | max-width: 100px; | ||
+ | margin: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | hr.medium { | ||
+ | max-width: 245px; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Header */ | ||
+ | |||
+ | .header { | ||
+ | display: table; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 900px; | ||
+ | background: url('https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png') no-repeat center center scroll; | ||
+ | background-size: 100% 100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Services -- aka Our Tool */ | ||
+ | |||
+ | .services { | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | |||
+ | .service-item { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Portfolio */ | ||
+ | |||
+ | .portfolio { | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | |||
+ | .portfolio-item { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | .img-portfolio { | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .img-portfolio:hover { | ||
+ | opacity: 0.8; | ||
+ | } | ||
+ | |||
+ | /* Call to Action */ | ||
+ | |||
+ | .call-to-action { | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | |||
+ | .call-to-action .btn { | ||
+ | margin: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Footer */ | ||
+ | |||
+ | footer { | ||
+ | padding: 100px 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* Header Navbar */ | ||
+ | |||
+ | .navbar-default { | ||
+ | background-color: white; | ||
+ | border-color: rgba(34, 34, 34, 0.05); | ||
+ | font-family: OpenSans, 'Helvetica Neue', Arial, sans-serif; | ||
+ | -webkit-transition: all 0.35s; | ||
+ | -moz-transition: all 0.35s; | ||
+ | transition: all 0.35s; | ||
+ | } | ||
+ | |||
+ | .navbar-default .navbar-header .navbar-brand { | ||
+ | color:#222222; | ||
+ | font-family: 'Open Sans', sans-serif, 'Helvetica Neue', Arial, sans-serif; | ||
+ | font-weight: 700; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | .navbar-default .navbar-header .navbar-brand:hover, | ||
+ | .navbar-default .navbar-header .navbar-brand:focus { | ||
+ | color: #222222; | ||
+ | } | ||
+ | |||
+ | .navbar-default .nav > li > a, | ||
+ | .navbar-default .nav > li > a:focus { | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 700; | ||
+ | font-size: 13px; | ||
+ | color: #222222; | ||
+ | } | ||
+ | |||
+ | .navbar-default .nav > li > a:hover, | ||
+ | .navbar-default .nav > li > a:focus:hover { | ||
+ | color: #c0392b; | ||
+ | } | ||
+ | |||
+ | .navbar-default .nav > li.active > a, | ||
+ | .navbar-default .nav > li.active > a:focus { | ||
+ | color: #222222 !important; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | .navbar-default .nav > li.active > a:hover, | ||
+ | .navbar-default .nav > li.active > a:focus:hover { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) { | ||
+ | .navbar-default { | ||
+ | background-color: transparent; | ||
+ | border-color: rgba(255, 255, 255, 0.3); | ||
+ | } | ||
+ | .navbar-default .navbar-header .navbar-brand { | ||
+ | color: rgba(255, 255, 255, 0.7); | ||
+ | } | ||
+ | .navbar-default .navbar-header .navbar-brand:hover, | ||
+ | .navbar-default .navbar-header .navbar-brand:focus { | ||
+ | color: white; | ||
+ | } | ||
+ | .navbar-default .nav > li > a, | ||
+ | .navbar-default .nav > li > a:focus { | ||
+ | color: rgba(255, 255, 255, 0.7); | ||
+ | } | ||
+ | .navbar-default .nav > li > a:hover, | ||
+ | .navbar-default .nav > li > a:focus:hover { | ||
+ | color: white; | ||
+ | } | ||
+ | .navbar-default.affix { | ||
+ | background-color: white; | ||
+ | border-color: rgba(34, 34, 34, 0.05); | ||
+ | } | ||
+ | .navbar-default.affix .navbar-header .navbar-brand { | ||
+ | color: #222222; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | .navbar-default.affix .navbar-header .navbar-brand:hover, | ||
+ | .navbar-default.affix .navbar-header .navbar-brand:focus { | ||
+ | color: #222222; | ||
+ | } | ||
+ | .navbar-default.affix .nav > li > a, | ||
+ | .navbar-default.affix .nav > li > a:focus { | ||
+ | color: #222222; | ||
+ | } | ||
+ | .navbar-default.affix .nav > li > a:hover, | ||
+ | .navbar-default.affix .nav > li > a:focus:hover { | ||
+ | color: #222222; | ||
+ | } | ||
+ | } | ||
+ | #mainNav { | ||
+ | margin-top:30px; | ||
+ | transition:background-color .52s ease | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.nav li.dropdown:hover > ul.dropdown-menu { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
Revision as of 19:49, 6 July 2016