/* @override
http://dev.dyadcom.com/cha/trunk/css/main.css
http://dev.dyadcom.com/cha/trunk/css/main.css?v=2
http://dev.dyadcom.com/cha/trunk/css/main.css?v=3
http://dev.dyadcom.com/cha/trunk/css/main.css?v=4
*/
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
/* ============================================ */
/* This file has a mobile-to-desktop breakpoint */
/* ============================================ */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.grid-container:before, .clearfix:before,
.grid-container:after,
.clearfix:after {
content: ".";
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.grid-container:after, .clearfix:after {
clear: both;
}
.grid-container, .clearfix {
/* */
*zoom: 1;
/* */
}
.grid-container {
margin-left: auto;
margin-right: auto;
/*max-width: 1200px;*/
/*padding-left: 10px;*/
/*padding-right: 10px;*/
}
.grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
/* */
*padding-left: 0;
*padding-right: 0;
/* */
}
.grid-50 {
padding-left: 0px;
padding-right: 0px;
/* */
*padding-left: 0;
*padding-right: 0;
/* */
}
.grid-5 > *, .mobile-grid-5 > *, .grid-10 > *, .mobile-grid-10 > *, .grid-15 > *, .mobile-grid-15 > *, .grid-20 > *, .mobile-grid-20 > *, .grid-25 > *, .mobile-grid-25 > *, .grid-30 > *, .mobile-grid-30 > *, .grid-35 > *, .mobile-grid-35 > *, .grid-40 > *, .mobile-grid-40 > *, .grid-45 > *, .mobile-grid-45 > *, .grid-50 > *, .mobile-grid-50 > *, .grid-55 > *, .mobile-grid-55 > *, .grid-60 > *, .mobile-grid-60 > *, .grid-65 > *, .mobile-grid-65 > *, .grid-70 > *, .mobile-grid-70 > *, .grid-75 > *, .mobile-grid-75 > *, .grid-80 > *, .mobile-grid-80 > *, .grid-85 > *, .mobile-grid-85 > *, .grid-90 > *, .mobile-grid-90 > *, .grid-95 > *, .mobile-grid-95 > *, .grid-100 > *, .mobile-grid-100 > *, .grid-33 > *, .mobile-grid-33 > *, .grid-66 > *, .mobile-grid-66 > * {
/* */
*margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "10px");
*margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "10px");
/* */
}
.grid-parent {
padding-left: 0;
padding-right: 0;
}
/*@media screen and (min-width: 768px) {*/
.grid-100:before,
.grid-100:after {
content: ".";
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.grid-100:after {
clear: both;
}
.grid-100 {
/* */
*zoom: 1;
/* */
}
.push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 {
position: relative;
}
.hide-on-desktop {
display: none !important;
}
.grid-5 {
float: left;
width: 5%;
/* */
*width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-5 {
margin-left: 5%;
}
.suffix-5 {
margin-right: 5%;
}
.push-5 {
left: 5%;
/* */
*left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-5 {
left: -5%;
/* */
*left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-10 {
float: left;
width: 10%;
/* */
*width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-10 {
margin-left: 10%;
}
.suffix-10 {
margin-right: 10%;
}
.push-10 {
left: 10%;
/* */
*left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-10 {
left: -10%;
/* */
*left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-15 {
float: left;
width: 15%;
/* */
*width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-15 {
margin-left: 15%;
}
.suffix-15 {
margin-right: 15%;
}
.push-15 {
left: 15%;
/* */
*left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-15 {
left: -15%;
/* */
*left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-20 {
float: left;
width: 20%;
/* */
*width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-20 {
margin-left: 20%;
}
.suffix-20 {
margin-right: 20%;
}
.push-20 {
left: 20%;
/* */
*left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-20 {
left: -20%;
/* */
*left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-25 {
float: left;
width: 25%;
/* */
*width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-25 {
margin-left: 25%;
}
.suffix-25 {
margin-right: 25%;
}
.push-25 {
left: 25%;
/* */
*left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-25 {
left: -25%;
/* */
*left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-30 {
float: left;
width: 30%;
/* */
*width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-30 {
margin-left: 30%;
}
.suffix-30 {
margin-right: 30%;
}
.push-30 {
left: 30%;
/* */
*left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-30 {
left: -30%;
/* */
*left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-35 {
float: left;
width: 35%;
/* */
*width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-35 {
margin-left: 35%;
}
.suffix-35 {
margin-right: 35%;
}
.push-35 {
left: 35%;
/* */
*left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-35 {
left: -35%;
/* */
*left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-40 {
float: left;
width: 40%;
/* */
*width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-40 {
margin-left: 40%;
}
.suffix-40 {
margin-right: 40%;
}
.push-40 {
left: 40%;
/* */
*left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-40 {
left: -40%;
/* */
*left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-45 {
float: left;
width: 45%;
/* */
*width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-45 {
margin-left: 45%;
}
.suffix-45 {
margin-right: 45%;
}
.push-45 {
left: 45%;
/* */
*left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-45 {
left: -45%;
/* */
*left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-50 {
float: left;
width: 50%;
/* */
*width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-50 {
margin-left: 50%;
}
.suffix-50 {
margin-right: 50%;
}
.push-50 {
left: 50%;
/* */
*left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-50 {
left: -50%;
/* */
*left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-55 {
float: left;
width: 55%;
/* */
*width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-55 {
margin-left: 55%;
}
.suffix-55 {
margin-right: 55%;
}
.push-55 {
left: 55%;
/* */
*left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-55 {
left: -55%;
/* */
*left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-60 {
float: left;
width: 60%;
/* */
*width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-60 {
margin-left: 60%;
}
.suffix-60 {
margin-right: 60%;
}
.push-60 {
left: 60%;
/* */
*left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-60 {
left: -60%;
/* */
*left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-65 {
float: left;
width: 65%;
/* */
*width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-65 {
margin-left: 65%;
}
.suffix-65 {
margin-right: 65%;
}
.push-65 {
left: 65%;
/* */
*left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-65 {
left: -65%;
/* */
*left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-70 {
float: left;
width: 70%;
/* */
*width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-70 {
margin-left: 70%;
}
.suffix-70 {
margin-right: 70%;
}
.push-70 {
left: 70%;
/* */
*left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-70 {
left: -70%;
/* */
*left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-75 {
float: left;
width: 75%;
/* */
*width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-75 {
margin-left: 75%;
}
.suffix-75 {
margin-right: 75%;
}
.push-75 {
left: 75%;
/* */
*left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-75 {
left: -75%;
/* */
*left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-80 {
float: left;
width: 80%;
/* */
*width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-80 {
margin-left: 80%;
}
.suffix-80 {
margin-right: 80%;
}
.push-80 {
left: 80%;
/* */
*left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-80 {
left: -80%;
/* */
*left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-85 {
float: left;
width: 85%;
/* */
*width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-85 {
margin-left: 85%;
}
.suffix-85 {
margin-right: 85%;
}
.push-85 {
left: 85%;
/* */
*left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-85 {
left: -85%;
/* */
*left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-90 {
float: left;
width: 90%;
/* */
*width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-90 {
margin-left: 90%;
}
.suffix-90 {
margin-right: 90%;
}
.push-90 {
left: 90%;
/* */
*left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-90 {
left: -90%;
/* */
*left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-95 {
float: left;
width: 95%;
/* */
*width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-95 {
margin-left: 95%;
}
.suffix-95 {
margin-right: 95%;
}
.push-95 {
left: 95%;
/* */
*left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-95 {
left: -95%;
/* */
*left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-33 {
float: left;
width: 33.33333%;
/* */
*width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-33 {
margin-left: 33.33333%;
}
.suffix-33 {
margin-right: 33.33333%;
}
.push-33 {
left: 33.33333%;
/* */
*left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-33 {
left: -33.33333%;
/* */
*left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-66 {
float: left;
width: 66.66667%;
/* */
*width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.prefix-66 {
margin-left: 66.66667%;
}
.suffix-66 {
margin-right: 66.66667%;
}
.push-66 {
left: 66.66667%;
/* */
*left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.pull-66 {
left: -66.66667%;
/* */
*left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
/* */
}
.grid-100 {
clear: both;
width: 100%;
}
/*}*/
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets 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, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
img.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale"); /*Firefox 10+*/
filter: gray; /*IE6-9*/
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
html, body{
/*font-family: "garvis-pro", "Centaur", Georgia, serif;*/
font-family: "garvis-pro", "calluna", Georgia, serif;
font-size: 15px;
}
h1, h2{
font-size: 16px;
text-transform: uppercase;
margin: 2px 0;
font-weight: normal;
font-family: "calluna", Georgia, serif;
}
h3{
font-size: 13px;
text-transform: uppercase;
margin: 2px 0;
font-weight: normal;
font-family: "calluna", Georgia, serif;
}
.caption{
font-size: 12px;
vertical-align: middle;
font-style: italic;
color: #555;
display: block;
margin: 5px auto 0;
max-width: 350px;
}
h4, h4 a{
font-size: 13px;
font-weight: normal;
font-style: italic;
color: #888;
}
h4.paginate{
position: absolute;
bottom: -20px;
width:100%;
}
.border{
position: fixed;
width: 10px;
height: 10px;
background-color: white;
z-index: 100;
}
#outer-frame{
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border: 1px solid #ccc;
/*min-height: 892px;*/
z-index:105;
min-width: 910px;
}
#inner-frame{
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
border: 2px solid #ccc;
z-index:105;
min-width: 900px;
}
.lt-ie8 #outer-frame{
min-height: 960px;
}
.lt-ie8 #inner-frame{
min-height: 950px;
}
#top-border, #bottom-border {
width: auto;
left: 10px;
right: 10px;
}
#left-border, #right-border {
top: 10px;
bottom: 10px;
height: auto;
}
#bottom-border {
bottom: 0px;
border-top: 1px solid #ccc;
}
#right-border {
right: 0;
border-left: 1px solid #ccc;
}
#top-border {
border-bottom: 1px solid #ccc;
}
#left-border {
border-right: 1px solid #ccc;
}
#address{
position: absolute;
width: 100%;
bottom: -10px;
text-align: center;
z-index:101;
}
#address p{
background-color: white;
margin: 0;
display: inline-block;
padding: 0 5px 2px;
font-size: 13px;
text-transform: uppercase;
color: #555;
}
#address a{
color: #555;
}
#address a:hover{
color: #000;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #666;
}
img.initial-cap{
float: left;
margin: 0px 10px 0px 0;
}
#main{
padding: 20px 20px 0px 20px;
width: 70%;
min-width: 960px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.tablet #main{
width: 90%;
}
#main.text-page{
min-height:90%;
}
#logo-con{
padding-top: 10px;
}
body.tablet #logo-con{
padding-top: 0px;
}
#logo img{
width: 100%;
height: auto;
}
#logo{
width:180px;
height: 115px;
margin: 0 auto;
}
body.tablet #logo{
width: 150px!important;
height: 100px!important;
}
#logo img#ro{
display: none;
}
#logo:hover img#ro{
display: inline-block;
}
#logo:hover img#default{
display: none;
}
#logo,#nav,#subnav, #proj-controls{
text-align: center;
}
#proj-controls .selected{
color: black;
}
#nav, #subnav{
position: relative;
min-width: 880px;
padding-top: 20px;
font-family: "calluna", Georgia, serif;
}
body.tablet #nav{
padding-top: 5px;
}
#subnav{
padding-top: 5px;
}
#nav-rule, #controls-rule{
height: 11px;
position: absolute;
left: 5px;
right: 8px;
z-index: -1;
color: #ccc;
border-bottom: 1px solid #ccc;
}
.project #nav-rule, .project #controls-rule{
left: 0px;
right: 0px;
}
.rule{
position: relative;
visibility: hidden;
}
.rule span{
padding: 2px;
height: 11px;
position: absolute;
left: 0;
right: 0;
z-index: -1;
border-bottom: 1px solid #ccc;
}
#nav-sub{
padding: 0 2px;
background-color: white;
display: inline;
margin: 0;
}
#nav ul li, #subnav ul li, #proj-controls ul li{
display: inline-block;
text-transform: uppercase;
font-size: 13px;
margin: 0;
list-style-type: none;
}
#subnav ul li a{
text-transform: none;
font-style: italic;
}
#nav ul li a, #subnav ul li a, #proj-controls ul li a{
padding-left: 1px;
padding-right: 3px;
margin: 0;
}
#subnav ul li a:hover, #proj-controls ul li a:hover{
color: black;
}
#nav ul li.cur a,#nav ul li.parent-cur a{
color: #135893;
}
#subnav ul li, #subnav ul li a, #proj-controls ul li a, #proj-controls ul li{
color: #888;
font-size: 12px;
}
#subnav ul li, #subnav ul li a{
font-size: 13px;
}
#subnav ul li.cur a{
color: #000;
}
#nav ul li:after,#subnav ul li:after,#proj-controls ul li:after{
content: " :";
padding-right: 0px;
}
#nav ul li:last-child:after,#subnav ul li:last-child:after,#proj-controls ul li:last-child:after{
content: "";
}
/*@media only screen and (max-width: 1450px) {
#nav ul li a{
padding-left: 0px;
padding-right: 2px;
font-size: 12px;
}
}*/
/*PORTFOLIO*/
#projects-listing, #press-listing{
padding: 10px 0 10px;
}
#projects-listing .grid-33{
padding-bottom: 5px;
text-align: center;
/*min-height: 240px;*/
display:inline-block!important;
}
#projects-listing ul, #press-listing ul {
list-style-type: none;
padding-left: 0;
}
#projects-listing ul li, #press-listing ul li{
display: inline-block;
/*float:left;*/
width: 33%;
padding: 0;
overflow: hidden;
vertical-align:top;
/*opacity: 0;*/
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;
}
#projects-listing a:hover h4{
color: #000;
}
#projects-listing:hover .preview-img{
opacity: .5;
}
#projects-listing a:hover .preview-img{
opacity: 1!important;
}
#projects-listing h4{
width: auto;
display: inline-block;
text-align: center;
margin: 6px auto;
padding: 0px 4px;
visibility: hidden;
background-color: white;
border-left: double 3px #ccc;
border-right: double 3px #ccc;
}
.preview-img{
/*display: inline-block;*/
overflow:hidden;
background-color: #fafafa;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity .5s;
}
#projects-listing .preview-img img{
display: none;
}
.preview-img a{
overflow: hidden;
}
.grid-33 a{
overflow: hidden;
}
#projects-listing .preview-img img{
display: none;
}
#images, #home-bgs{
-webkit-transition: opacity 1s; For Safari 3.1 to 6.0
transition: opacity 1s;
position:relative;
overflow: hidden;
margin-top: 10px;
opacity:0;
margin: 10px 8px 0 5px;
}
#images.frozen img{
pointer-events:none;
}
#images.home-bg{
cursor: default;
}
.transformation #images{
height: 430px!important;
}
.tablet.transformation #images{
height: 400px!important;
}
#proj-titleblock{
position: absolute;
z-index: 1000000000000;
display: block;
width: 100%;
top: 50%;
bottom: 0px;
text-align: center;
vertical-align: middle;
}
#proj-titleblock >div{
background-color: rgba(254,255,255,0.9);
width: 50%;
margin: 0 auto;
padding: 0px 0;
height: 250px;
vertical-align: middle;
margin-top: -125px;
position: relative;
}
#proj-titleblock h2 {
padding: 75px 0 0px;
font-size: 1.75em;
text-transform: none;
font-weight: lighter;
}
#proj-titleblock h3 {
font-size: 12px;
}
#proj-titleblock h4 {
padding: 0px 0 0px;
text-transform: none;
color: black;
margin: 0 0 30px 0;
}
#proj-titleblock > div::before{
content: "";
display: block;
position: absolute;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
outline: solid 1px white;
pointer-events:none;
}
#images .img, #home-bgs img{
overflow: hidden;
position: absolute;
}
#images img{
/*padding: 15px 0 0 0px ;*/
margin: 0 2px;
float: left;
display:none;
cursor: pointer;
}
#images .img img.placeholder{
display: none!important;
}
#images .img div, #images .img svg, #images .img image{
float: left;
}
#thumbnails, #thumbnails #strip{
height: 116px;
overflow: hidden;
border-bottom: 1px solid #ccc;
}
#thumbnails #strip{
min-width: 100%;
}
#thumbnails{
border-bottom: 1px solid #ccc;
margin: 0 8px 0 5px ;
display: none;
}
.non-tablet #thumbnails{
display: none;
}
#thumbnails #strip > div{
padding:5px 0;
height: 100px;
float: left;
/*padding-right: 2px;*/
opacity:.8;
}
#thumbnails #strip > div:hover, #thumbnails #strip > div.current-img{
opacity:1;
}
#thumbnails #strip > div:hover img, #thumbnails #strip > div.current-img img {
filter: none!important;
-webkit-filter: grayscale(0%)!important;
}
#thumbnails #strip >div{
padding-right: 2px;
}
#thumbnails img{
height: 100px;
width: auto;
float: left;
}
#proj-controls{
position: relative;
padding: 10px 5px 5px;
clear: both;
font-family: "calluna", Georgia, serif;
}
.careers #bg{
opacity: .25;
margin-top: -20px;
}
.page-slideshow {
margin-top: 10px;
margin-bottom: 0px;
vertical-align: middle;
min-height: 350px;
cursor: pointer;
opacity: 0;
-webkit-transition: opacity .5s .25s;
transition: opacity .5s .25s;
}
.page-slideshow img{
max-height: 340px;
outline: 1px solid #999;
border: 5px solid transparent;
}
.page-slideshow > div{
text-align: center;
width: 100%;
padding-bottom: 10px;
}
.page-slideshow > a{
/* position: absolute;
bottom:-40px;*/
width: 100%;
text-align: center;
left: 0;
}
.page-slideshow a.prev-slide{
left: 0;
}
.page-slideshow a.next-slide{
right: 0;
}
a.pause-slideshow {
display: none;
}
a.play-slideshow,
a.pause-slideshow {
color: #999!important;
margin-bottom: 10px;
}
a.play-slideshow:hover,
a.pause-slideshow:hover {
color: #333!important;
}
.careers .page-slideshow > div,
.sponsorships .page-slideshow > div{
/*text-align: left;*/
width: 100%;
}
.careers .row-odd .page-slideshow > div,
.sponsorships .row-odd .page-slideshow > div{
/*text-align: right;*/
}
.careers .row-odd .page-slideshow .cycle-slide,
.careers .even-odd .page-slideshow .cycle-slide,
.sponsorships .row-odd .page-slideshow .cycle-slide,
.sponsorships .even-odd .page-slideshow .cycle-slide{
text-align: center;
}
#testimonials-cycle, #testimonials-cycle-data{
margin-top: 20px;
text-align: center;
opacity:0;
}
#testimonials-cycle{
min-height:800px;
}
#testimonials-cycle p{
line-height: 24px;
margin-bottom: 15px!important;
}
.testimonials #proj-controls{
margin-top: 0px;
}
.testimonials #proj-controls a{
background-color: transparent;
text-transform: uppercase;
font-size: 13px;
}
#proj-controls ul{
background-color: white;
display: inline;
padding: 0 4px;
}
#desc .mCS_no_scrollbar{
padding-right: 30px;
}
#desc{
position: absolute;
top: 196px;
line-height:22px;
margin: 0 5px;
z-index: 100;
padding: 0px;
min-height: 380px;
background-color: #eee;
background-color: rgba(255,255,255,.85);
left: 20px;
right: 20px;
text-align: center;
overflow: hidden;
padding-left: 15px;
display: none;
}
.tablet #desc{
top: 156px;
}
#desc #scrollable{
width: 100%;
max-width: 800px;
margin: 50px auto 0;
}
#desc blockquote {
margin: 0;
line-height: 0;
padding-bottom: 8px;
}
#desc #quote {
font-size: 14px;
}
#desc #quote span{
text-transform: uppercase;
font-size: 12px;
}
#desc p, #desc h3, #desc h2{
padding: 10px 70px;
margin: 0 auto;
}
#desc h2{
padding-bottom: 0px;
}
#desc h2 span.num{
font-family: "Times New Roman", Times, serif;
font-size: 1.0em;
}
#desc ul{
list-style: none;
padding-left: 0;
margin: 0;
}
#desc ul li{
margin: 0;
padding: 2px 0;
/*font-size: 14px;*/
}
#desc ul li a,
#desc p a{
color: #135893;
}
#desc ul li a:hover{
color: #000;
}
#desc h4{
color: black;
margin: 0;
padding-bottom: 10px;
}
.credit{
position: absolute;
z-index: 100000;
width: 100%;
text-align: center;
bottom: -2px;
color: white;
display: block;
}
.credit > span{
color: black;
opacity: .75;
padding: 3px 0 5px;
font-size: 14px;
word-spacing: 1px;
color:#555;
text-transform: none;
font-style: italic;
/*text-shadow: 1px 1px 1px #333;*/
font-weight: 300;
display: block;
/*width: 330px;*/
margin: 0 auto;
background-color: white;
}
#social-icons {
display: inline-block;
background-color: white;
margin: 0;
padding: 0 5px 0 5px;
}
#social-icons img{
width: 12px;
margin-top: -4px;
}
/*Press*/
#press-listing ul li{
opacity:0;
}
#press-listing ul, #projects-listing ul{
font-size: 0;
padding-top: 10px;
}
#press-listing ul li{
width: 15%;
padding-right: 2%;
}
#press-listing ul li.col6{
padding-right: 0%;
}
#press-listing h4{
color: black;
font-size: 13px;
margin: 5px 0 15px;
}
#press-listing h4 span{
font-style: normal;
}
#press-listing h4 span.caps{
text-transform: uppercase;
font-size: 11px;
}
#press-listing .preview-img img{
width: 100%;
height: 100%;
/* display: inline;
*/ float: left;
}
#press-listing .preview-img > a{
display: inline;
}
/*Text Pages*/
#content{
padding: 0;
margin: 0;
min-height: 550px;
}
#bg{
width: 100%;
top: 235px;
bottom: 0px;
margin-top: 0px;
position: absolute;
background-position: top center;
background-repeat: no-repeat;
background-size:contain;
z-index: -1;
}
.mission #bg{
background-position: center -100px;
}
.tablet #bg{
top: 150px;
}
.contact #bg{
background-size:1100px auto;
background-position: center 30px;
opacity: .5;
}
/*#bg img{
position:absolute;
width: auto;
height: 100%;
padding: 25px 0;
z-index: -1;
}*/
#text{
width: 650px;
margin: 0px auto;
padding-top: 80px;
padding-bottom: 10px;
}
.careers #text, .sponsorships #text{
width: 955px;
padding: 30px 0 20px;
min-height: 410px;
border-bottom: 1px solid #ccc;
}
.careers #text:last-child,
.sponsorships #text:last-child{
border-bottom: 0px solid #ccc;
}
.careers #text p,
.sponsorships #text p{
text-align:left!important;
}
.sponsorships #content #text div:not(.row) p:first-child{
width:630px;
text-align: center!important;
margin:0 auto 20px;
}
#text .left-col,
#text .right-col{
width: 48%;
display: inline-block;
margin-right: 2%;
vertical-align: top;
}
.careers #text,
.sponsorships #text{
clear: both;
}
#text .row-even .left-col{
margin-right: 0%;
margin-left: 2%;
}
#text .row-odd .left-col{
margin-left: 0%;
margin-right: 2%;
}
.mission #text {
/*width:580px;*/
padding-top: 60px;
}
.mission .text-page #text ul,
.mission .text-page #text p{
text-align:left!important;
font-size: 1.25rem;
line-height: 1.75em;
letter-spacing: 1px;
}
#text ul{
list-style:square;
margin:10px 0;
padding-left:80px;
padding-right:80px;
}
#text ul li{
/*font-style:italic;*/
}
.tablet #text{
padding-top: 80px!important;
}
.tablet.biography #text{
padding-top: 20px!important;
}
#text img{
max-width: 100%;
}
#text .inline-img{
text-align: center;
margin-bottom: 30px;
}
#text a{
color: #346c9b;
}
#text a:hover{
color: #666;
}
.profile #text,
.sponsorships #text {
text-align: center;
}
.profile #text h1,
.sponsorships #text h1{
font-size: 1.5em;
text-align:center;
background-color: rgba(254,255,255,0.95);
position: relative;
display: inline-block;
border-left: double 3px #ccc;
border-right: double 3px #ccc;
margin-bottom: 20px;
padding: 0 10px;
}
.profile #text h2,
.sponsorships #text h2{
text-align:left;
margin-top: 30px;
}
.profile #text h1::before,
.sponsorships #text h1::before{
content: "";
border-top: solid 1px #ccc;
display: block;
margin-top: 16px;
position: absolute;
width: 270px;
left: -270px;
z-index: -1;
}
.testimonials.profile #text h1::before{
width: 228px;
left: -228px;
}
.biography.profile #text h1::before{
width: 248px;
left: -248px;
}
.careers.profile #text h1::before{
width: 416px;
left: -416px;
}
.sponsorships #text h1::before{
width: 380px;
left: -380px;
}
.profile #text h1::after,
.sponsorships #text h1::after{
content: "";
border-top: solid 1px #ccc;
display: block;
margin-top: 16px;
position: absolute;
width: 380px;
left: 0px;
top: 0px;
z-index: -1;
}
.testimonials.profile #text h1::after{
width: 410px;
}
.biography.profile #text h1::after{
width: 400px;
}
.careers.profile #text h1::after{
width: 530px;
}
.sponsorships #text h1::after{
width: 565px;
}
#text p:first-child{
margin-top: 0;
}
.fade-in #text{
display: none;
}
.fade-in #bg{
/*z-index: 2;*/
}
.text-page #text p{
margin: 5px 0;
text-align: center;
text-transform: none;
}
.firm-profile #text p, .biography #text p{
text-align: left;
margin: 0px 0 22px 0;
}
/*.firm-profile #text p{
font-size: 16px;
line-height: 23px;
}*/
.contact #text{
padding-top: 50px;
}
.contact iframe {
border: solid 1px #ccc!important;
}
.biography #text{
padding-top: 30px;
}
.speaking-engagements #text, .news #text {
padding: 50px 0;
}
.events #text {
padding: 10px 0 10px 30px;
width:100%;
}
#events{
text-align:center;
padding-bottom: 30px;
width:960px;
margin:0 auto;
}
#events .event{
padding:10px 0px;
position: relative;
width:430px;
}
#events .event p{
color:#777;
margin:10px 0!important;
}
#events .event h2 span {
color:#aaa;
}
.event-images{
float:left;
margin-bottom:10px;
width:100%;
overflow:hidden;
display:block;
}
.image-holder{
float:left;
outline: 5px solid white;
position:relative;
}
.image-holder span.caption{
position:absolute;
bottom:0px;
left:0;
right:0;
background-color:rgba(255,255,255,.8);
padding:5px 5px 10px;
}
.events #text p{
margin: 0;
padding: 0;
}
.events #text ul, .events #text ol {
margin-top: 0;
}
.events #text ul li, .events #text ol li{
font-style: italic;
list-style: none;
text-align: center;
color: #777;
padding: 2px 0;
font-size: 14px;
}
/*.mCSB_draggerContainer {
padding-bottom:30px;
}*/
#desc .mCSB_scrollTools{
right: -0px;
}
#desc .mCSB_dragger_bar{
background-color: #444!important;
margin: 0 7px!important;
width: 3px!important;
}
#desc .mCSB_scrollTools .mCSB_draggerRail{
background-color: #000!important;
width: 1px;
margin-left: 8px!important;
}
.tablet #thumbnails strip{
padding-bottom: 15px;
}
#thumbnails .mCSB_scrollTools {
padding-top: 0px;
bottom: -2px;
}
#thumbnails .mCSB_dragger_bar{
background-color: #000!important;
/*margin: 0 7px!important;*/
height: 4px!important;
}
#thumbnails .mCSB_scrollTools .mCSB_draggerRail{
background-color: #ccc!important;
height: 2px;
margin-top: 7px!important;
}
#mobile-splash {
text-align: center;
min-width: 0px;
min-height: 100%!important;
position: relative;
}
#mobile-splash #main{
min-width: 0px;
width: 100%;
padding: 2% 0;
font-size: .9em;
line-height: 1.75em;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#mobile-splash #bg{
width:100%;
height:100%;
background-image:url(../images/uploads/portfolio/American_Brick_Georgian/06A.jpg);
background-size:cover;
background-position: left center;
position:fixed;
top: 0;
}
#mobile-splash #text{
padding: 2px;
width: 90%;
border: 1px solid #fff;
height: 98%;
}
#mobile-splash #holder{
width: 100%;
}
#mobile-splash #con{
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.8);
}
#mobile-splash #logo-con{
width: 100%;
padding-top: 20px;
}
#mobile-splash #holder h2{
margin: 0;
padding-top: 10px;
font-size: .95em;
}
#mobile-splash p.dots{
margin: 0;
padding: 0;
line-height: 1;
padding-bottom: 5px;
} ==========================================================================
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.
These 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;
}
}