Team:Tsinghua-A/css/main.css
From 2014.igem.org
/*
* Breakroom v1.1 * * Copyright 2013 Theme Armada * Visit us for more Bootstrap themes at: * http://www.themearmada.com * * Hand crafted with love in Atlanta! */
/* ==========================================================================
Global styles ========================================================================== */
p {
color: #999999; font-size: 15px; line-height: 23px;
}
.lead {
color: #84CCD3;
}
h2, h3 {
font-family: 'Lato', sans-serif;
}
h2 {
color: #5D5D5D; font-weight: 300; font-size: 31px; line-height: 34px; padding-bottom: 15px;
}
h3 {
color: #5D5D5D; font-weight: normal; font-size: 23px; line-height: 30px; letter-spacing: -0.7px;
}
h3 span {
color: #999999;
}
a {
color: #2a2a2a; text-decoration: none;
}
a:hover {
transition: all 0.35s ease-in-out; text-decoration: none; color: #525252;
}
.btn-main {
background: #84CCD3 repeat scroll 0 0; font-family: 'Lato', sans-serif; border-bottom: 5px solid #69ACAF; border-radius: 2px; box-shadow: none; color: #FFFFFF; text-decoration: none; text-shadow: none; padding: 15px 30px; text-transform: uppercase; letter-spacing: 0px; text-align: center;
}
.btn-main:hover { background: #76bdc3; color: #FFFFFF; text-decoration: none; transition: all 0.35s ease 0s; }
.btn-main-small {
background: #84CCD3 repeat scroll 0 0; font-family: 'Lato', sans-serif; border-bottom: 5px solid #69ACAF; border-radius: 2px; box-shadow: none; color: #FFFFFF; font-size: 13px; text-decoration: none; text-shadow: none; padding: 8px 18px; text-transform: uppercase; letter-spacing: 0px;
}
.btn-main-small:hover { background: #76bdc3; color: #FFFFFF; text-decoration: none; transition: all 0.35s ease 0s; }
[class^="icon-"], [class*=" icon-"] {
vertical-align: middle;
}
- selection {
background: #84CCD3; /* Safari */ color: #FFFFFF; }
- -moz-selection {
background: #84CCD3; /* Firefox */ color: #FFFFFF; }
iframe {
background-color: transparent; border: medium none; height: inherit; overflow: hidden; width: 100%;
}
.dropdown-backdrop {
position: static;
}
/*------colors--------------------*/ .white {
color: #FFFFFF;
}
.black {
color: #2A2A2A;
}
.blue {
color: #84CCD3;
}
.dark-gray {
color: #5D5D5D;
}
.light-gray {
color: #999999;
}
/* ==========================================================================
Navigation styles ========================================================================== */
.navbar-inverse .navbar-inner {
background-image: url(../img/menu-bg.jpg); background-color: #2A2A2A; background-repeat: repeat-x; border-color: #2F3030; border-bottom: 7px solid;
}
.nav-collapse, .nav-collapse.collapse {
background: none repeat scroll 0 0 #2A2A2A; height: 0; overflow: hidden;
}
.navbar-inverse .brand, .navbar-inverse .nav > li > a {
color: #FFFFFF; font-family: 'Lato', sans-serif; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); font-weight: normal; letter-spacing:0.5px; text-transform: uppercase; font-size: 14px;
}
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: transparent; color: #84CCD3;
}
.brand {
margin-top: 5px;
}
.navbar .nav > li > a {
color: #FFFFFF; float: none; padding: 35px 7px; text-decoration: none; text-shadow: 0 1px 0 #111111; letter-spacing: -0.5px;
}
.navbar .nav > li > a:hover {
color: #84CCD3;
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
border-bottom-color: #84CCD3; border-top-color: #84CCD3;
}
.navbar-inverse .nav li.dropdown > a:hover .caret, .navbar-inverse .nav li.dropdown > a:focus .caret {
border-bottom-color: #84CCD3; border-top-color: #84CCD3;
}
.navbar-fixed-top {
margin-bottom: 0px;
}
a.login {
color: #999999;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
}
.navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .nav > li > a:focus, .navbar-inverse .nav-collapse .dropdown-menu a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:focus {
background-color: transparent;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
box-shadow: none;
}
.navbar .btn, .navbar .btn-group {
margin-top: 20px;
}
.dropdown-menu {
background-clip: padding-box; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px 2px 2px 2px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); display: none; float: left; left: 0; list-style: none outside none; margin: 2px 0 0; min-width: 160px; padding: 5px 0; position: absolute; top: 100%; z-index: 1000;
}
.nav-collapse .dropdown-menu a {
font-weight: normal;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
background-color: transparent; background-image: none; background-image: -webkit-linear-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(transparent)); background-repeat: no-repeat; color: #84CCD3; text-decoration: none;
}
.dropdown-menu > li > a {
clear: both; color: #5d5d5d; display: block; font-weight: normal; line-height: 20px; padding: 3px 20px; white-space: nowrap;
}
.menu-button {
background: #84CCD3 repeat scroll 0 0; font-family: 'Lato', sans-serif; border-bottom: none; border-radius: 2px; box-shadow: none; color: #FFFFFF; text-decoration: none; text-shadow: none; padding: 7px 12px; text-transform: uppercase; letter-spacing: 0px;
}
.menu-button:hover { background: #76bdc3; color: #FFFFFF; text-decoration: none; transition: all 0.35s ease 0s; }
/* ==========================================================================
Header and Carousel styles ========================================================================== */
.carousel {
margin-bottom: 0px; background: #2A2A2A;
}
.carousel .container {
position: relative; z-index: 9;
}
.carousel-control {
background: none repeat scroll 0 0 rgba(15, 15, 15, 0.16); border: 3px solid; font-size: 27px; font-weight: bold; height: 40px; margin-top: 50px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); z-index: 10;
}
.carousel .item {
height: 600px;
}
/*------Header Image One---------*/ .one {
background: url() no-repeat center center; background-size: cover;
}
/*------Header Image Two---------*/
.two {
background: url() no-repeat center center; background-size: cover;
}
/*------Header Image Three---------*/
.three {
background: url() no-repeat center center; background-size: cover;
}
.carousel-caption {
background-color: transparent; position: static; max-width: 900px; padding: 0 20px; margin-top: 20%;
} .carousel-caption h1 i {
font-family: 'Lato', sans-serif; font-weight: 100; font-size: 55px; line-height: 65px; font-style: normal; text-transform: uppercase; padding: 12px 15px; color: #fff; background-color: #2a2a2a; text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption h2 i {
color: #999999; font-weight: normal; font-style: italic; padding: 7px 15px; background-color: #ffffff; font-size: 27px; line-height: 65px;
}
/* ==========================================================================
Home Page styles ========================================================================== */
- services {
padding-top: 110px; padding-bottom: 120px;
}
.service-box {
border-bottom: 7px solid rgba(134,205,212,0.15); text-decoration: none; padding: 35px 10px 25px 10px;
}
.service-box h2 {
margin-top: 25px;
}
.service-box a, .service-box a:hover {
text-decoration: none;
}
.service-box:hover {
border-bottom: 7px solid #84CCD3; text-decoration: none; transition: all 0.35s ease-in-out;
}
- message {
background: #84CCD3; padding-bottom: 120px; padding-top: 120px;
}
- message h2 {
color: #FFFFFF; font-size: 43px; line-height: 53px; font-weight: 300;
}
- clients {
padding-top: 0px; padding-bottom: 120px;
}
.image-break {
background: url(../img/paper-texture.jpg) repeat-x; height: 45px; opacity: 0.5; margin-bottom: 60px;
}
.clients img {
padding-bottom: 20px; opacity: 0.6;
}
.clients img:hover {
opacity: 1; transition: all 0.35s ease-in-out;
}
/* ==========================================================================
Main Content Section styles ========================================================================== */
- content {
padding-top: 120px; padding-bottom: 120px;
}
.breadcrumb {
background-color: #F2F2F2; border-radius: 2px 2px 2px 2px; list-style: none outside none; margin: 0 0 20px; padding: 8px 15px;
}
.service-icon {
font-size: 60px; padding-top: 45px; padding-bottom: 30px; padding-right: 10px;
}
.service-grid {
margin-top: 25px;
}
/* ==========================================================================
About Page styles ========================================================================== */
.progress {
background-color: #D6D6D6; background-image: linear-gradient(to bottom, #D6D6D6, #D6D6D6); background-repeat: repeat-x; border-radius: 0 0 0 0; box-shadow: 0 1px 2px transparent inset; height: 50px; margin-bottom: 20px; overflow: hidden; position: relative; margin: 0; margin-top: 12px;
}
.progress .bar {
-moz-box-sizing: border-box; background-color: #84CCD3; background-image: none; background-repeat: repeat-x; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05) inset; color: #FFFFFF; float: left; font-size: 12px; height: 100%; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); transition: width 0.6s ease 0s; width: 0; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;
}
.progress .bar:after {
content: ""; position: absolute; top: 17px; right: -8px; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent #84CCD3; display: block; width: 0; z-index: 1;
}
.progress .field {
color: #FFFFFF; left: 20px; line-height: 44px; position: absolute; z-index: 100; font-family: 'Lato', sans-serif; font-weight: bold; font-size: 16px;
}
.progress .field-value {
color: #2a2a2a; right: 20px; line-height: 44px; position: absolute; z-index: 100; text-align: right; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 19px; -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; animation-delay: 1.3s;
}
/* Animated Progress Bar onload */ .bar-one { width:100%; -moz-animation:bar-one 1.0s ease-out; -webkit-animation:bar-one 1.0s ease-out; } .bar-two { width:100%; -moz-animation:bar-two 1.7s ease-out; -webkit-animation:bar-two 1.7s ease-out; } .bar-three { width:100%; -moz-animation:bar-three 2.3s ease-out; -webkit-animation:bar-three 2.3s ease-out; }
@-moz-keyframes bar-one { 0% { width:0px;} 100%{ width:100%;} } @-moz-keyframes bar-two { 0% { width:0px;} 100%{ width::100%;} } @-moz-keyframes bar-three { 0% { width:0px;} 100%{ width::100%;} }
@-webkit-keyframes bar-one { 0% { width:0px;} 100%{ width:100%;} } @-webkit-keyframes bar-two { 0% { width:0px;} 100%{ width::100%;} } @-webkit-keyframes bar-three { 0% { width:0px;} 100%{ width::100%;} }
/* Animated Fade in for Field Values */ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;
}
- team {
padding-top: 0px; padding-bottom: 120px;
}
- team img {
width: 100%;
}
.title-box {
background: #84CCD3; padding: 6px; background-size: contain; position: relative;
}
.title-box:after { content: ""; position: absolute; bottom: -15px; left: 44%; border-style: solid; border-width: 15px 15px 0; border-color: #84CCD3 transparent; display: block; width: 0; z-index: 1; }
.title-box p {
color: #FFFFFF;
}
/* ----------------Team Social Icons------------------- */
ul.team-social-icons { list-style: none; margin-left: 0px; font-size: 14px; margin-top: 15px; padding-bottom: 15px; }
ul.team-social-icons li { display: inline; line-height: 30px; }
ul.team-social-icons li a { color: #84CCD3; text-decoration: none; }
ul.team-social-icons li a:hover { color: #76bdc3; text-decoration: none; }
/* ==========================================================================
Portfolio Page styles ========================================================================== */
.thumbs { padding: 0px; margin-left: 0px; margin-right: 0px; float: left;
overflow: hidden; position: relative; margin-bottom: 30px;
}
.thumbs a { background-color: rgba(134,205,212,0.95);
bottom: -200px; color: white; left: 0; opacity: 0; position: absolute; right: 0; text-align: center; text-transform: uppercase; top: 0; z-index: 100;
}
.thumbs a span.title { display: table; width: 100%; height: 90%; }
.thumbs a span.title span { font-family: 'Lato', sans-serif; font-size: 14.5px; line-height: 17px; font-weight: bold; color: #FFFFFF; text-transform: uppercase; vertical-align: middle; display: table-cell;
}
.thumbs a:hover { bottom: 0;
opacity: 1; transition: opacity 0.30s ease-in-out 0s, bottom 0.4s cubic-bezier(0.25, 0.500, 0, 1) 0s;
}
- work .item {
height: inherit;
}
/* ==========================================================================
Blog Page styles ========================================================================== */
- blog {
padding-top: 120px; padding-bottom: 120px;
}
.blog-links li {
padding: 5px 0 5px 0;
}
.blog-links a {
color: #84CCD3;
text-decoration: none; }
.blog-links a:hover {
color: #76bdc3;
text-decoration: none; }
.article-container {
padding-top: 40px; padding-right: 50px;
}
.blog-article {
padding-bottom: 80px;
}
.news-date {
background: none repeat scroll 0 0 #2a2a2a; max-height: 65px; max-width: 55px; padding: 10px; margin-bottom: 30px; border-bottom: 5px solid #5D5D5D;
}
.news-date h2 {
color: #84CCD3; font-family: 'Lato', sans-serif; font-size: 40px; font-weight: 300; letter-spacing: -3px; line-height: 20px; padding-bottom: 0;
}
.news-date h3 {
color: #FFFFFF; font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 800; line-height: 20px; padding-bottom: 0;
}
.sidebar-container {
padding-top: 40px;
}
/* ==========================================================================
Contact Page styles ========================================================================== */
- map {
height: 265px; padding-bottom: 0;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: #EEEEEE; border: 0 solid #CCCCCC; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border-radius: 2px 2px 2px 2px; color: #555555; display: inline-block; height: 37px; font-size: 14px; line-height: 15px; margin-bottom: 0px; padding: 2px 6px; vertical-align: middle;
}
.m-btn {
position: relative; display: inline-block; overflow: visible; margin: 0; padding: 10px 14px; margin-top: 8px; cursor: pointer; outline: none; border: none; background-color: #2a2a2a; background-image: -moz-linear-gradient(top, #2a2a2a, #2a2a2a); background-image: -ms-linear-gradient(top, #2a2a2a, #2a2a2a); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2a2a2a), to(#2a2a2a)); background-image: -webkit-linear-gradient(top, #2a2a2a, #2a2a2a); background-image: -o-linear-gradient(top, #2a2a2a, #2a2a2a); background-image: linear-gradient(top, #2a2a2a, #2a2a2a); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2a2a', endColorstr='#2a2a2a', GradientType=0); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding; /* IE hacks */
zoom: 1; z-index: 1; *display: inline; font-size: 14px; line-height: 14px; color: #ffffff; min-width: 42px; text-shadow: #ffffff 0 0px 0; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: inherit;
} .m-btn:hover, .m-btn:focus, .m-btn:active {
color: #ffffff; text-decoration: none; background-color: #525252; background-image: -moz-linear-gradient(top, #525252, #525252); background-image: -ms-linear-gradient(top, #525252, #525252); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#525252)); background-image: -webkit-linear-gradient(top, #525252, #525252); background-image: -o-linear-gradient(top, #525252, #525252); background-image: linear-gradient(top, #525252, #525252); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#525252', endColorstr='#525252', GradientType=0); z-index: 100; outline: none;
}
/* ==========================================================================
Sign Up Page styles ========================================================================== */
.sign-up-page {
background-color: #e7e7e7;
}
.sign-up {
margin-top: 22px;
}
.input-append .add-on, .input-prepend .add-on {
background-color: #d4d4d4; border: 0px solid #CCCCCC; display: inline-block; font-size: 14px; font-weight: normal; height: 29px; line-height: 25px; min-width: 16px; padding: 5px 5px 4px 5px; text-align: center; text-shadow: 0 1px 0 #FFFFFF; width: auto;
}
.form-horizontal .controls {
margin-left: 0px;
}
.input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
-moz-box-sizing: border-box; display: block;
}
.btn-info {
background-color: #84CCD3; background-image: none; background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-radius: 2px 2px 2px 2px;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
background-color: #76bdc3; color: #FFFFFF;
}
/* ==========================================================================
Feature styles ========================================================================== */
ul.icons {
display: inline; list-style: none;
}
ul.icons li {
padding: 10px 0 4px 30px;
}
- content .menu-button {
line-height: 40px;
}
.feature-span {
padding-bottom: 50px;
}
/*------pricing tables--------------------*/
.pricing-table {
width: 100%; border: 1px solid #f1f1f1; border-bottom: 7px solid #e6e6e6; margin-top: 20px; margin-bottom: 45px;
}
.pricing-table.active {
box-shadow: 1px 1px 16px #919191; border: 0px solid #f1f1f1; border-bottom: 7px solid #e6e6e6;
}
.pricing-table.active .headline {
background: #333333;
}
.pricing-table.active .headline:after {
border-color: #333333 transparent;
}
.pricing-table li {
padding-left: 20px; padding-right: 20px;
}
.headline {
background: #84CCD3; padding: 6px 6px 0px 6px; background-size: contain; position: relative;
}
.headline h2 {
color: #FFFFFF;
}
.headline:after { content: ""; position: absolute; bottom: -15px; left: 44%; border-style: solid; border-width: 15px 15px 0; border-color: #84CCD3 transparent; display: block; z-index: 1; }
.price {
font-weight: bold; font-size: 26px; border-bottom: 1px dotted #d9d9d9; padding-top: 17px; padding-bottom: 20px; color: #333333; margin-top: 0;
}
.price small {
font-weight: 300; color: #999999;
}
.info {
padding-top: 20px; padding-bottom: 20px; font-weight: 300; font-size: 13px; color: #999999;
}
.features {
color: #333333; font-weight: bold; padding-top: 12px; padding-bottom: 15px; border-bottom: 1px dotted #d9d9d9;
}
.features.first {
border-top: 1px dotted #d9d9d9;
}
.features.last {
padding-top: 17px; padding-bottom: 20px;
}
/*------Tables--------------------*/
.table thead {
background: #84CCD3; color: #fff;
}
/*------Tabs--------------------*/
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
border-color: #84CCD3 #84CCD3 #DDDDDD;
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: #84CCD3; text-decoration: none; color: #FFFFFF;
}
/*------Collapse--------------------*/
.accordion-heading {
background: none repeat scroll 0 0 #84CCD3; border-bottom: 0 none; color: #FFFFFF;
}
.accordion-heading a, .accordion-heading a:hover {
color: #ffffff; text-decoration: none; font-weight: bold;
}
/*------Boxed Content--------------------*/
.boxed {
padding: 35px; background: #f2f2f2; border-radius: 2px; border: 1px solid #e0e0e0;
}
/* ==========================================================================
Bottom Section styles ========================================================================== */
- bottom {
background: #5f5f5f; padding-top: 120px; padding-bottom: 120px;
}
- bottom h2 {
color: #84CCD3;
}
- bottom p {
color: #FFFFFF;
}
a.more {
color: #84CCD3; font-weight: bold;
}
a:hover.more {
color: #76bdc3; text-decoration: none;
}
/* ----------------Twitter Feed------------------- */
ul#twitter_update_list { list-style: none; margin-left: 0px; } ul#twitter_update_list li { display: none; /* Prevents the entire feed list from showing momentarily on page load */ }
.twitter-feed span { color: #FFFFFF; display: block; }
.twitter-feed span a { color: #84CCD3; text-decoration: none;
}
.twitter-feed span a:hover{ color: #76bdc3; text-decoration: none; }
.twitter-feed a { color: #ffffff; text-decoration: none; }
.twitter-feed a:hover { color: #f1f1f1; text-decoration: none; }
/* ----------------Social Icons------------------- */
ul.social-icons { list-style: none; margin-left: 0px; font-size: 18px; }
ul.social-icons li { display: inline; line-height: 30px; }
ul.social-icons li a { color: #FFFFFF; text-decoration: none; }
ul.social-icons li a:hover { color: #84CCD3; text-decoration: none; }
- footer {
background: #2A2A2A; padding-top: 20px; padding-bottom: 60px;
}
- footer p {
color: #999999; font-size: 12px;
}
.copyright a, .copyright a:hover {
color: #FFFFFF; text-decoration: none;
}
ul.footer-links {
list-style: none;
}
ul.footer-links li {
display: inline; padding-right: 20px
}
ul.footer-links li a {
color: #FFFFFF; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase;
}
ul.footer-links li a:hover {
color: #84CCD3; text-decoration: none;
}
/* ==========================================================================
Mobile styles ========================================================================== */
/* Landscape phones and down */
@media (max-width: 480px) {
body {
padding-left: 0px; padding-right: 0px;
}
.container {
margin-left: 20px; margin-right: 20px;
}
.navbar .container {
margin-left: 0px; margin-right: 0px;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0px; margin-right: 0px;
}
.navbar .nav > li > a {
padding: 8px 7px;
}
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
color: #FFFFFF;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
background-image: none;
}
- content, #blog {
padding-top: 20px;
}
h3 {
font-size: 18px; line-height: 25px;
}
- message h2 {
color: #FFFFFF; font-size: 30px; line-height: 36px; font-weight: 300;
}
.carousel .item {
height: 400px; text-align: center;
}
.carousel-caption h1 i {
font-size: 28px; line-height: 40px;
}
.carousel-caption h2 i {
font-style: italic; padding: 7px 15px; font-size: 15px; line-height: 50px;
}
.article-container {
padding-top: 40px; padding-right: 0px;
}
.news-date {
background: none repeat scroll 0 0 #2a2a2a; max-height: 40px; max-width: 30px; padding: 8px; margin-bottom: 20px; border-bottom: 3px solid #5D5D5D;
}
.news-date h2 {
color: #84CCD3; font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 300; letter-spacing: -2px; line-height: 7px; padding-bottom: 0;
}
.news-date h3 {
color: #FFFFFF; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 800; line-height: 10px; padding-bottom: 0;
}
}
/* Landscape phone to portrait tablet */ @media (min-width: 481px) and (max-width: 767px) {
body {
padding-left: 0px; padding-right: 0px;
}
.container {
margin-left: 20px; margin-right: 20px;
}
.navbar .container {
margin-left: 0px; margin-right: 0px;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0px; margin-right: 0px;
}
.navbar .nav > li > a {
padding: 8px 7px;
}
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
color: #FFFFFF;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
background-image: none;
}
- content {
padding-top: 20px;
}
.carousel .item {
height: 400px;
}
.carousel-caption h1 i {
font-size: 35px; line-height: 50px;
}
.carousel-caption h2 i {
font-style: italic; padding: 7px 15px; font-size: 17px; line-height: 55px;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
body {
padding-left: 0px; padding-right: 0px;
}
.container {
margin-left: 20px; margin-right: 20px;
}
.navbar .container {
margin-left: 0px; margin-right: 0px;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0px; margin-right: 0px;
}
.navbar .nav > li > a {
padding: 8px 7px;
}
.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
color: #FFFFFF;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
background-image: none;
}
- content {
padding-top: 20px;
}
.carousel .item {
height: 500px;
}
.carousel-caption h1 i {
font-size: 45px; line-height: 60px;
}
.carousel-caption h2 i {
font-style: italic; padding: 7px 15px; font-size: 22px; line-height: 60px;
}
}
/* Desktops and laptops ----------- */
@media (min-width: 980px) and (max-width: 1699px) {
}
/* Large screens ----------- */ @media (min-width: 1700px) and (max-width: 2200px) {
}