|
|
| Line 11: |
Line 11: |
| | <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"> | | <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"> |
| | <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> | | <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> |
| - | <style> | + | <link href="https://2014.igem.org/Team:CarnegieMellon/CSS/?action=raw&ctype=text/css" rel="stylesheet"> |
| | | | |
| - | /* GLOBAL STYLES
| |
| - | -------------------------------------------------- */
| |
| - | /* Padding below the footer and lighter body text */
| |
| - |
| |
| - |
| |
| - |
| |
| - | body {
| |
| - | padding-bottom: 40px;
| |
| - | background: #008AE6;
| |
| - | color: #5a5a5a;
| |
| - | font-size: 12px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* CUSTOMIZE THE NAVBAR
| |
| - | -------------------------------------------------- */
| |
| - |
| |
| - | /* Special class on .container surrounding .navbar, used for positioning it into place. */
| |
| - | .navbar-wrapper {
| |
| - | position: absolute;
| |
| - | top: 50;
| |
| - | left: 0;
| |
| - | right: 0;
| |
| - | z-index: 100;
| |
| - | margin-top: -69px;
| |
| - | margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
| |
| - | }
| |
| - | .navbar-wrapper .navbar {
| |
| - |
| |
| - | }
| |
| - |
| |
| - | /* Remove border and change up box shadow for more contrast */
| |
| - | .navbar .navbar-inner {
| |
| - | width:80%;
| |
| - | border: 0;
| |
| - | -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
| |
| - | -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
| |
| - | box-shadow: 0 2px 10px rgba(0,0,0,.25);
| |
| - | }
| |
| - |
| |
| - | /* Downsize the brand/project name a bit */
| |
| - | .navbar .brand {
| |
| - | padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
| |
| - | font-size: 16px;
| |
| - | font-weight: bold;
| |
| - | text-shadow: 0 -1px 0 rgba(0,0,0,.5);
| |
| - | }
| |
| - |
| |
| - | /* Navbar links: increase padding for taller navbar */
| |
| - | .navbar .nav > li > a {
| |
| - | padding: 15px 20px;
| |
| - | }
| |
| - |
| |
| - | /* Offset the responsive button for proper vertical alignment */
| |
| - | .navbar .btn-navbar {
| |
| - | margin-top: 5px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | /* CUSTOMIZE THE CAROUSEL
| |
| - | -------------------------------------------------- */
| |
| - |
| |
| - | /* Carousel base class */
| |
| - | .carousel {
| |
| - | margin-bottom: 60px;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .carousel .container {
| |
| - | position: relative;
| |
| - | z-index: 9;
| |
| - | }
| |
| - |
| |
| - | .carousel-control {
| |
| - | height: 80px;
| |
| - | margin-top: 0;
| |
| - | font-size: 120px;
| |
| - | text-shadow: 0 1px 1px rgba(0,0,0,.4);
| |
| - | background-color: transparent;
| |
| - | border: 0;
| |
| - | z-index: 10;
| |
| - | }
| |
| - |
| |
| - | .carousel .item {
| |
| - | height: 500px;
| |
| - | }
| |
| - | .carousel img {
| |
| - | position: relative;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | min-width: 100%;
| |
| - | height: 500px;
| |
| - | }
| |
| - |
| |
| - | .carousel-caption {
| |
| - | background-color: transparent;
| |
| - |
| |
| - | position: static;
| |
| - | max-width: 550px;
| |
| - | padding: 0 20px;
| |
| - | margin-top: 500px;
| |
| - | }
| |
| - | .carousel-caption h1,
| |
| - | .carousel-caption .lead {
| |
| - | margin: 0;
| |
| - | line-height: 1.25;
| |
| - | color: #000000;
| |
| - | text-shadow: 0 1px 1px rgba(0,0,0,.4);
| |
| - | }
| |
| - | .carousel-caption .btn {
| |
| - | margin-top: 10px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | /* Square Images
| |
| - | -------------------------------------------------- */
| |
| - |
| |
| - | .sqimg {
| |
| - | display: inline-block;
| |
| - | margin-left: auto;
| |
| - | margin-right: auto;
| |
| - | height: 300px;
| |
| - | width: 400px;
| |
| - | opacity: 0.8;
| |
| - | filter: alpha(opacity=40);
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .sqimg:hover {
| |
| - | opacity: 1;
| |
| - | filter: alpha(opacity=100);}
| |
| - |
| |
| - | #images{
| |
| - | text-align:center;
| |
| - | position: absolute;
| |
| - |
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* RESPONSIVE CSS
| |
| - | -------------------------------------------------- */
| |
| - |
| |
| - | @media (max-width: 979px) {
| |
| - |
| |
| - | .container.navbar-wrapper {
| |
| - | margin-bottom: 0;
| |
| - | width: auto;
| |
| - | }
| |
| - | .navbar-inner {
| |
| - | border-radius: 0;
| |
| - | margin: -20px 0;
| |
| - | }
| |
| - |
| |
| - | .carousel .item {
| |
| - | height: 500px;
| |
| - | }
| |
| - | .carousel img {
| |
| - | width: auto;
| |
| - | height: 500px;
| |
| - | }
| |
| - |
| |
| - | .featurette {
| |
| - | height: auto;
| |
| - | padding: 0;
| |
| - | }
| |
| - | .featurette-image.pull-left,
| |
| - | .featurette-image.pull-right {
| |
| - | display: block;
| |
| - | float: none;
| |
| - | max-width: 20%;
| |
| - | margin: 0 auto 20px;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - |
| |
| - | @media (max-width: 767px) {
| |
| - |
| |
| - | .navbar-inner {
| |
| - | margin: -20px;
| |
| - | }
| |
| - |
| |
| - | .carousel {
| |
| - | margin-left: -20px;
| |
| - | margin-right: -20px;
| |
| - | }
| |
| - | .carousel .container {
| |
| - |
| |
| - | }
| |
| - | .carousel .item {
| |
| - | height: 300px;
| |
| - | }
| |
| - | .carousel img {
| |
| - | height: 300px;
| |
| - | }
| |
| - | .carousel-caption {
| |
| - | width: 65%;
| |
| - | padding: 0 70px;
| |
| - | margin-top: 100px;
| |
| - | }
| |
| - | .carousel-caption h1 {
| |
| - | font-size: 30px;
| |
| - | }
| |
| - | .carousel-caption .lead,
| |
| - | .carousel-caption .btn {
| |
| - | font-size: 18px;
| |
| - | }
| |
| - |
| |
| - | .marketing .span4 + .span4 {
| |
| - | margin-top: 40px;
| |
| - | }
| |
| - |
| |
| - | .featurette-heading {
| |
| - | font-size: 30px;
| |
| - | }
| |
| - | .featurette .lead {
| |
| - | font-size: 18px;
| |
| - | line-height: 1.5;
| |
| - | }
| |
| - |
| |
| - | }
| |
| - | </style>
| |
| | | | |
| | <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> | | <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> |
"
