Team:Tsinghua-A/css/main.css

From 2014.igem.org

Revision as of 20:54, 17 October 2014 by Feixia (Talk | contribs)

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

/*

* 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: 650px;
 padding: 0 20px;
 margin-top: 20%;

} .carousel-caption h1 {

 font-family: 'Lato', sans-serif;
 font-weight: 100;
 font-size: 55px;
 font-style: normal;
 text-transform: uppercase;
 padding: 12px 15px;
 color: #fff;
 background-color: #2a2a2a;
 opacity: 0.6;
 text-shadow: 0 1px 1px rgba(0,0,0,.4);

}

.carousel-caption h2 {

 color: #999999;
 font-weight: normal;
 font-style: italic;
 padding: 7px 15px;
 background-color: #2a2a2a;
 opacity: 0.6;
 font-size: 27px;

}

/* ==========================================================================

  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) {

}