|
// Avalanche Theme Stylesheet
// ------------------------------------------------
@import "colors.less";
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -222px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 192px; /* .push must be the same height as .footer */
}
.top-container {
margin-top: 85px;
}
.container-bg {
background-color: @bg-ligh-gray;
margin-top: 0px;
padding-bottom: 20px;
}
.top-container.container-bg {
margin-top: 58px;
}
.container-tabs {
margin-top: -38px;
}
.container-pre-tabs {
padding-bottom: 56px;
border-bottom: 1px solid #ddd;
}
.container-last {
margin-bottom: 60px;
}
.page-header {
padding-bottom: 0;
margin: 20px 0 30px;
border-bottom: 2px solid @hr-dark;
}
.page-header h1 {
font-family: 'Helvetica-LightOblique', 'Helvetica Light Oblique', "Helvetica Neue";
font-style: italic;
font-weight: 300;
text-transform: uppercase;
font-size: 64px;
color: #1D1D26;
line-height: 77px;
margin-bottom: 0px;
}
.page-header h2 {
font-family: Helvetica-LightOblique;
font-size: 36px;
color: #1D1D26;
line-height: 43px;
margin-top: 0px;
margin-bottom: 0px;
}
.page-header-type h1 {
font-size: 48px;
line-height: 59px;
margin-top: 0px;
}
.page-header-type small {
font-family: Avenir-MediumOblique;
font-size: 18px;
color: #1D1D26;
line-height: 25px;
text-transform: uppercase;
font-style: italic;
font-weight: 200;
}
.page-header h1 .btn {
margin-bottom: 9px;
}
h2 {
font-family: Avenir-LightOblique;
font-size: 32px;
color: #000000;
line-height: 44px;
font-style: italic;
font-weight: 200;
}
h4 {
font-family: Avenir-MediumOblique;
font-size: 18px;
color: #1D1D26;
line-height: 25px;
text-transform: uppercase;
font-style: italic;
font-weight: 200;
}
.img-circle {
border-radius: 360px;
}
.thumbnail {
display: block;
line-height: 20px;
border: 2px solid #D4D4DE;
border-radius: 4px;
padding: 0px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.box {
border-radius: 4px;
border: 2px solid #D4D4DE;
line-height: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.thumbnail h3 {
font-family: Avenir-HeavyOblique;
font-size: 24px;
color: #000000;
margin-bottom: 0px;
line-height: 28px;
}
.box h3 {
font-family: Avenir-HeavyOblique;
font-size: 24px;
color: #000000;
line-height: 28px;
margin-bottom: 0px;
}
.thumbnail h3 a, .box h3 a {
color: black;
}
.thumbnail h2 {
font-family: Avenir-HeavyOblique;
font-size: 28px;
color: #000000;
line-height: 44px;
margin-top: 0px;
}
.thumbnail h2 a, .box h2 a {
color: black;
}
.thumbnail-content h4 {
font-family: Avenir-MediumOblique;
font-size: 18px;
color: #1D1D26;
line-height: 25px;
text-transform: none;
font-style: italic;
font-weight: 200;
text-align: center;
}
.thumbnail h3 a:hover, .box h3 a:hover {
text-decoration: underline;
}
.thumbnail p, .box p {
font-family: Avenir-Medium;
font-size: 16px;
color: #000000;
line-height: 22px;
}
.thumbnail .thumbnail-content {
padding: 8px;
}
.thumbnail-line-top {
border-top: @theme-border;
}
.box .box-content {
padding-right: 4px;
margin-left: -26px;
}
.thumbnail .mission-director-name, .box .mission-director-name {
margin-bottom: 8px;
/* James Peret: */
font-family: Avenir-Medium;
font-size: 14px;
color: @black;
line-height: 22px;
}
.thumbnail-mission-description { height: 110px;}
.box-mission-description { height:386px;}
.thumbnails.mission-list, .box {
margin-bottom: 60px;
}
// Buttons
.btn.btn-success {
color: @green;
border-color: @green;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
background-color: transparent;
border: 2px solid @black;
border-bottom-color: @black;
border-radius: 4px;
text-shadow: none;
/* Create Mission: */
font-family: Avenir-Book;
font-style: normal;
color: #333333;
text-transform: none;
}
.btn-large {
font-family: Avenir-Black;
font-size: 18px;
color: #333333;
line-height: 20px;
}
.btn:hover {
background: rgba(0, 0, 0, 0.2);
}
.btn-link {
border: none;
}
.btn-link:hover {
border: none;
background-color: transparent;
}
// Progress Bar
.progress-success.progress-striped .bar, .progress-striped .bar-success {
background-color: #92BC64;
}
.bar {
}
.progress {
background-color: white;
border-radius: 5px;
height: 33px;
}
.progress-bar .percentage {
margin-top: -51px;
font-family: Avenir-Medium;
font-size: 24px;
color: #000000;
line-height: 33px;
}
.progress-bar-mission-stats {
width: 70%;
margin-left: auto;
margin-right: auto;
}
// Panel
.panel.panel-default {
margin-top: 15px;
.box-theme;
}
.panel {
.panel-heading {
background-color: @light-gray;
height: 32px;
.theme-box-padding;
}
.panel-heading.panel-divider {
border-top: @theme-border;
border-bottom: @theme-border;
height: 32px;
margin-bottom: -2px;
background-color: @white;
.caret { margin-top: 16px; margin-left: 5px; margin-right: 5px; }
}
.panel-title {
margin-top: 0px;
margin-bottom: 0px;
.task-text {
font-family: Avenir-Medium;
font-size: 18px;
color: #000000;
line-height: 25px;
padding-top: 6px;
font-weight: 200;
}
.caret {
float: left;
margin-top: 14px;
margin-right: 5px;
margin-left: 5px;
}
.task-number { line-height: 36px;}
.task-icon { padding-top: 7px }
.task-icon i { color: @black }
}
.panel-body {
.panel-content {
.panel-text {
font-family: Avenir-Light;
font-size: 18px;
color: #1D1D26;
line-height: 26px;
.theme-box-padding;
}
}
.accordion {
margin-bottom: 0px;
}
}
.panel-body.in { border-top: @theme-border; }
.panel-footer {}
}
// Overrides
.accordion-inner { padding: 0px; }
// Footer
footer {
font-family: "Avenir";
font-weight: 600;
text-align: center;
color: #1D1D26;
margin-top: 30px;
padding-top: 20px;
}
.footer-white {
}
.footer-black {
background-color: @black;
color: white;
}
.footer-white a {
color: @dark-gray;
font-weight: bold;
}
.footer-white a:hover {
color: @blue;
font-weight: bold;
text-transform: underline;
}
.footer-black a {
color: white;
font-weight: bold;
background-color: transparent;
}
.footer-black a:hover {
color: @blue;
font-weight: bold;
text-transform: underline;
background-color: transparent;
}
footer .column .column-inner {
min-height: 90px
}
footer .column .column-inner.centered {
min-height: 75px
}
.column {
width: 20%;
float: left;
}
.column-inner {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
.footer-white .column-inner {
border-right: 2px solid #1D1D26;
}
.footer-black .column-inner {
border-right: 2px solid white;
}
.footer-black .btn {
color: white;
border-color: white;
}
.column-inner.first {
margin-left: 30px;
}
.column-inner.last {
border-right: none;
margin-right: 30px;
}
.column-inner.centered {
padding-top: 25px;
}
footer .column .column-inner i {
margin-right: 15px;
margin-left: 15px;
}
footer .copyright {
margin-top: 10px;
text-transform: uppercase;
}
footer hr {
margin-bottom: 10px;
}
// Hacks
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nav-tabs > .active > a, .nav-tabs > .active.clickable > a:hover, .nav-tabs > .active.clickable > a:focus {
cursor: pointer;
}
|