/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
padding-top:51px;
font-family: 'Benton-Sans', Helvetica, Arial, Verdana, San-serif;
min-width:700px;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
a{color:#3089c2;}
a:hover{text-decoration:none;}
/*a:visited{color:#524770;}*/
h1.title {
color:rgb(53, 53, 53);
margin-bottom:0.09em;
}
h2.subtitle {
font-weight: 400;
font-family: 'Capita', Georgia, Times, Serif;
color:rgb(128,128,128);
margin-bottom:0;
}
nav.primary {
width:100%;
min-width:768px;
background: #f6f6f7;
text-align: center;
position: fixed;
z-index: 100;
top:0;
left:0;
border-bottom:1px solid #dcdfdf;
/*-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);*/
}
nav.primary ul {
list-style-type: none;
margin: 0 0 0 100px;
padding: 0;
}
nav.primary li {
display: inline;
padding: 0;
margin: 0;
}
nav.primary a {
display: block;
float: left;
font-size: 14px;
line-height: 14px;
text-decoration: none;
padding:18px 20px;
color:#848d91;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-right:1px solid #dcdfdf;
}
nav.primary a:hover {
color:#111;
}
nav.primary li:first-child a {
border-left:1px solid #dcdfdf;
}
nav.primary li.active a {
color:#fff;
background:#d00;
}
section.intro {
width:auto;
background: #fff;
text-align: left;
padding:70px 0;
border-bottom:1px solid #dcdfdf;
}
section.intro .container {
margin:0;
padding-left:100px;
}
section.day {
padding:0 0 0 113px;
position: relative;
background: #f6f6f7;
border-bottom:1px dashed #c1c7c9;
}
.container {
margin:0 20px;
padding: 0 0 0 120px;
}
section.day.timeline-start {
padding-top:70px;
}
section.day.timeline-start .container {
padding-top:0;
}
section.day.timeline-start .daystart {
top:0;
margin-top:0;
}
section.day .container {
border-left:6px solid #c1c7c9;
position: relative;
padding-bottom:100px;
padding-top:100px;
}
section#kenn {
padding-top:70px;
padding-right:30px;
padding-bottom:70px;
}
.daystart {
font-family: 'Benton-Sans', helvetica, arial, sans-serif;
color: #fff;
text-align: center;
font-size: 14px;
line-height: 60px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
position: absolute;
width: 60px;
height: 60px;
border: 6px solid #c1c7c9;
border-radius: 50%;
left: 0;
top: 97px;
z-index: 1;
margin-left: -39px;
padding: 0;
background: #d00;
}
.timeline {
margin:50px 0 0 0;
padding:0;
list-style-type:none;
}
.timeline li {
position: relative;
display: block;
padding:20px;
margin:0 100px 100px 0;
max-width:800px;
}
.timeline li:last-child {
margin-bottom:0;
}
.timeline li.multiple {
margin-bottom:20px;
}
.timeline li.event {
background: #fff;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
-moz-border-radius:3px;
border-radius:3px;
}
.timeline li.event time {
text-align: center;
font-size: 16px;
font-weight: bold;
color:#a4abae;
padding: 5px 5px 5px 5px;
width: 85px;
position: absolute;
left: 0;
z-index: 2;
top: 50%;
margin-left: -108px;
margin-top: -15px;
}
.timeline li.event img {
max-width:100%;
height:auto;
display: block;
margin:0 auto 1.5em;
}
.timeline li.event iframe {
border:2px solid rgba(0,0,0,0.3);
}
.triangle-with-shadow {
display: block;
width: 50px;
height: 50px;
position: absolute;
left:-50px;
top:50%;
margin-top:-25px;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
top: 15px;
right:-11px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
-moz-transform: scale(1.0) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.0) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.0) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.0) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1.0) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
html.lt-ie9 .triangle-with-shadow {
display: none;
}
.timeline li.event time:before {
content: '';
border:6px solid #c1c7c9;
width: 14px;
height: 14px;
background: #fff;
position: absolute;
left: -28px;
top: 50%;
margin-top: -14px;
-moz-border-radius:50%;
border-radius:50%;
}
.timeline li.stat {
padding:0;
max-width:840px;
}
.stat {
text-align:center;
}
.stat-item {
float:left;
margin:2% 2% 15% 2%;
display: block;
}
.items-2 {
width:49.9%;
margin:10px 0 5px;
}
body .last {
margin-right:0;
}
.items-4 {
width:22%;
margin:2% 4% 2% 0;
}
.timeline li.alert {
background:#111;
color:rgba(255,255,255,0.7);
}
.timeline li.alert h5 {
color:#ece025;
}
.timeline li.alert p {
color:#a4abae;
}
.timeline li.alert .triangle-with-shadow:after {
background:#111;
}
.timeline li.comments {
background:#e5f0f3;
-webkit-box-shadow: 0px 0px 3px 0px rgba(10, 45, 55, 0.4);
box-shadow: 0px 0px 3px 0px rgba(10, 45, 55, 0.4);
}
.timeline li.comments blockquote {
color:#6B6F71;
}
.timeline li.comments .triangle-with-shadow:after {
background:#e5f0f3;
-webkit-box-shadow: 0px 0px 3px 0px rgba(10, 45, 55, 0.4);
box-shadow: 0px 0px 3px 0px rgba(10, 45, 55, 0.4);
}
.timeline li.comment-level-2 {
margin-left:40px;
max-width:760px;
}
.view-all{
display:inline-block;
float:right;
font-size:13px;
font-weight:400;
color:#a4abae;
}
.timeline li.news {
padding-right:0;
padding-left:0;
max-width:840px;
}
.timeline li.news .stat {
padding:20px;
}
.timeline li.news .source-logo {
float: right;
margin: 10px 25px 0 25px;
width: 100px;
}
.timeline li.news .source-logo img {
height: auto;
width: 100px;
}
.timeline li.news.has-logo h5, .timeline li.news.has-logo p {
padding-right: 133px;
}
.timeline li.small-story img {
width:80px;
margin:20px;
border:1px solid #dcdfdf;
float:left;
clear:left;
}
.timeline li.small-story h4 {
margin:20px 0 0 20px;
}
.timeline li.small-story hr {
clear:both;
margin:0 20px;
border:0;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
.timeline li.facebook {
background: #4c66a4;
}
.timeline li.facebook .triangle-with-shadow:after {
background: #4c66a4;
}
.timeline li.twitter {
background: #00a0d1;
}
.timeline li.twitter .triangle-with-shadow:after {
background: #00a0d1;
}
.timeline li.facebook h5,
.timeline li.twitter h5 {
color: #fff;
}
.timeline li.facebook p{
color:#a3b5e1;
}
.timeline li.twitter p {
color:#b3d4fc;
}
.twitter .stat-item,
.facebook .stat-item {
color:#fff;
float: right;
margin:0 15px 0 25px;
text-align:center;
}
.twitter .stat-item .label,
.facebook .stat-item .label {
color:rgba(255,255,255,0.7);
}
.timeline li.email img {
border-bottom: none;
}
/*******************
Timeline Text Styles
********************/
h2.daytitle {
color: #c00;
margin:0;
padding-top:20px;
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .2em;
font-family: 'Capita', Georgia, Times, Serif;
margin-bottom: 80px;
}
.timeline h5 {
font-size:16px;
margin-bottom:3px;
}
.timeline h5.no-margin {
margin-bottom:0;
}
.timeline p {
color:#6b6f71;
}
.timeline blockquote {
margin:0;
padding:0;
font-style: italic;
font-family: 'Capita', Georgia, Times, Serif;
color:rgb(150, 150, 150);
}
.quotemark {
font-size: 1.2em;
padding:0 3px;
}
.timeline li.news h5,
.timeline li.news p {
margin-right: 20px;
margin-left: 20px;
}
.timeline li.news h5 a {
color: #222;
text-decoration: none;
}
.timeline li.news a.read-more-btn {
display: inline-block;
padding: 8px 10px 6px;
margin-left: 20px;
background-color: #d00;
color: #FFF;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.timeline li.news a.read-more-btn:hover {
background-color: #e80000;
}
.stat h5 {
clear: both;
font-weight:bold;
color:#fff;
text-align: center;
padding:8px 0;
margin-bottom: 26px;
/*background:#c1c7c9;*/
background:#34a876;
border-radius: 3px;
}
.timeline li.news .stat h5, .timeline li.news .stat p{
margin-left:0;
margin-right:0;
}
.stat p{
font-family: 'Capita', Georgia, Times, Serif;
color: #a4abae;
font-style: italic;
clear: both;
padding-top: 20px;
}
.stat p strong{
color:#34a876;
font-family: "Benton-Sans", Helvetica, Arial, Verdana, San-serif;
font-weight: 700;
font-style:normal;
display:inline-block;
margin:0 3px;
}
span.label {
display: block;
color:#a4abae;
font-size:.85em;
margin-bottom:.5em;
}
span.data {
position: relative;
font-size: 2.8em;
line-height: 1.1em;
display: block;
font-family: "BentonSansComp", Helvetica, Arial, Verdana, San-serif;
font-weight: 700;
}
span.data span.plus {
color:#34a876;
font-weight:400;
/*font-family: "Benton-Sans";*/
}
.items-2 span.data {
line-height: 1;
font-size: 80px;
}
.event h5 .butoday{
color:#578ebf;
}
.event h5 .butoday em{
color:#c00;
}
.butoday em{
font-style: normal;
}
.event .stat h5 .butoday,.event .stat h5 .butoday em{
color:#fff;
}
.stat h5 .butoday,.stat h5 .butoday em{
font-style:italic!important;
}
@media (max-width: 900px){
nav.primary a{padding:18px 15px;}
section.day{padding-left:30px;}
section.intro .container{padding-left:50px;}
nav.primary ul{margin:0 30px;}
.timeline li{margin-right:30px;}
}
@media (max-width: 767px){
.stat span.data {font-size:30px;}
.stat .items-2 span.data {font-size:60px;}
}