/*
* HTML5 Boilerplate
*
* 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
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
/*
* 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 #1b3950;
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
Fonts
font-family:'Bauer Bodoni W01 Italic';
font-family:'Bauer Bodoni W01 Bold 795736';
font-family:'BauerBodoniW01-BoldItal 795739';
font-family:'Bauer Bodoni W01 Roman';
========================================================================== */
@font-face {font-family: 'BrandonGrotesque-Regular';src: url('../fonts/220F8E_4_0.eot');src: url('../fonts/220F8E_4_0.eot?#iefix') format('embedded-opentype'),url('../fonts/220F8E_4_0.woff') format('woff'),url('../fonts/220F8E_4_0.ttf') format('truetype');}
@font-face {font-family: 'BrandonGrotesque-Medium';src: url('../fonts/220F8E_5_0.eot');src: url('../fonts/220F8E_5_0.eot?#iefix') format('embedded-opentype'),url('../fonts/220F8E_5_0.woff') format('woff'),url('../fonts/220F8E_5_0.ttf') format('truetype');}
html, body {
height: 100%;
}
body{
background-image: url(../img/bg-marble.jpg);
background-position: top left;
background-repeat: repeat;
}
.alert {
font-size: 15px;
font-family: 'BrandonGrotesque-Regular';
line-height: 1em;
}
body .container{
width: 950px;
}
.span12 {
width: 950px;
}
body #page-wrapper{
background-color: #f9f5f0;
height: auto !important; /* ie6 ignores !important, so this will be overridden below */
min-height: 100%; /* ie6 ignores min-height completely */
height: 100%;
position: relative;
z-index: 8;
overflow: hidden;
-moz-box-shadow: 0px 0px 20px 6px #B8B8B8;
-webkit-box-shadow: 0px 0px 20px 6px #B8B8B8;
box-shadow: 0px 0px 20px 6px #B8B8B8;
padding: 0;
border: 1px solid #000;
}
#page-wrapper .shadow-left{
width: 5px;
height: 100%;
background: url('../img/shadow-left.png') top left repeat-y;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
#page-wrapper .shadow-right{
width: 5px;
height: 100%;
background: url('../img/shadow-right.png') top left repeat-y;
position: absolute;
top: 0px;
right: 0px;
z-index: 10;
}
body #page-wrapper #page{
position: relative;
min-height: 750px;
z-index: 9;
}
body #header-wrapper {
/*background: url('../img/black-bg.jpg') left top repeat;*/
background: #000;
}
body #page-wrapper #page #logo{
width: 260px;
z-index: 99;
position: relative;
margin: 0 auto;
padding-top: 30px;
}
body #page-wrapper #page nav{
width: 950px;
background: #fefdfc;
z-index: 99;
position: relative;
}
nav ul{
list-style: none;
text-align: center;
margin: 30px 0px 0px 0px;
padding: 0;
}
nav ul li{
display: inline-block;
font-family:'Bauer Bodoni W01 Roman';
color: #b6a161;
font-size: 18px;
}
nav ul li a{
display: inline-block;
font-family: 'BrandonGrotesque-Medium';
color: #b6a161;
font-size: 16px;
text-transform: uppercase;
padding: 17px 18px 13px 20px;
background-image: url(../img/nav-dots.gif);
background-position: left center;
background-repeat: no-repeat;
}
nav ul li a.section .underline, nav ul li a.section:hover .underline, nav ul li a.current .underline, nav ul li a.current:hover .underline {
border-bottom: 2px solid #b6a161;
padding-bottom: 0;
}
nav ul li a .underline{
padding-bottom: 2px;
}
nav ul li a:hover{
text-decoration: none;
color: #b6a161;
}
nav ul li a:hover .underline{
border-bottom: 2px solid #b6a161;
padding-bottom: 0px;
}
nav ul li a:active .underline, nav ul li a:focus .underline {
border-bottom: 2px solid #897740;
padding-bottom: 0px;
}
nav ul li a:active, nav ul li a:focus {
color: #897740;
text-decoration: none;
}
nav ul li a.first{
background: none;
padding-left: 18px;
}
nav ul li a.active{
font-family: 'Bauer Bodoni W01 Bold 795736'
}
body #page-wrapper nav#sub-nav{
width: 950px;
background-image: none;
z-index: 99;
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
background: none;
}
body #page-wrapper nav#sub-nav ul{
list-style: none;
text-align: center;
margin: 20px 0px 0px 0px;
padding: 0;
}
body #page-wrapper nav#sub-nav ul li{
display: inline-block;
font-family:'BrandonGrotesque-Medium';
color: #b6a161;
font-size: 18px;
}
body #page-wrapper nav#sub-nav ul li a{
display: inline-block;
font-family:'BrandonGrotesque-Medium';
color: #b6a161;
font-size: 16px;
text-transform: uppercase;
padding: 8px 18px 6px 20px;
background-image: url(../img/nav-dots.gif);
background-position: left center;
background-repeat: no-repeat;
}
body #page-wrapper nav#sub-nav ul li a:active, body #page-wrapper nav#sub-nav ul li a:focus {
color: #897740;
text-decoration: none;
}
body #page-wrapper nav#sub-nav ul li a.first {
background: none;
padding-left: 18px;
}
body #page-wrapper nav#sub-nav ul li a:hover{
text-decoration: none;
}
body #page-wrapper nav#sub-nav ul li a .underline{
padding-bottom: 2px;
}
body #page-wrapper nav#sub-nav ul li a:hover .underline{
border-bottom: 2px solid #b6a161;
padding-bottom: 0;
}
body #page-wrapper nav#sub-nav ul li a:active .underline, body #page-wrapper nav#sub-nav ul li a:focus .underline {
border-bottom: 2px solid #897740;
padding-bottom: 0px;
}
body #page-wrapper nav#sub-nav ul li a.current, body #page-wrapper nav#sub-nav ul li a.current:hover{
text-decoration: none;
}
body #page-wrapper nav#sub-nav ul li a .underline {
padding-bottom: 2px;
}
body #page-wrapper nav#sub-nav ul li a.current .underline, body #page-wrapper nav#sub-nav ul li a.current:hover .underline{
border-bottom: 2px solid #b6a161;
padding-bottom: 0;
}
body #slider-gradient {
display: block;
z-index: 1000;
background: transparent url('../img/slider-gradient.png') left top no-repeat;
width: 950px;
height: 500px;
position: absolute;
}
body #page-wrapper #hp-hero{
position: absolute;
bottom:64px;
z-index: 1;
}
body #page-wrapper #background-image{
position: absolute;
bottom: 254px;
z-index: 1;
margin: 0;
}
body #page-wrapper #background-image .background-overlay{
width: 100%;
height: 389px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: transparent url('../img/bg-hero-fade-top.png') left top no-repeat;
}
body #page-wrapper #classes-hero{
position: absolute;
top: 0px;
z-index: 1;
margin:0;
}
body #page-wrapper #classes-hero .carousel-overlay{
width: 100%;
height: 389px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: transparent url('../img/bg-hero-fade-top.png') left top no-repeat;
}
body #page-wrapper #classes-hero-dots{
position: absolute;
top: 230px;
z-index: 11;
width: 100%;
}
body #page-wrapper #classes-hero-dots ul{
width: 100%;
text-align: center;
padding: 0;
}
body #page-wrapper #classes-hero-dots li{
display: inline-block;
padding: 3px;
}
body #page-wrapper #classes-hero-dots li a{
text-indent: -9999px;
width: 15px;
height: 15px;
display: block;
background: url('../img/dots.png') left top no-repeat;
}
body #page-wrapper #classes-hero-dots li a.active{
background: url('../img/dots.png') left bottom no-repeat;
}
body #page-wrapper #page #full-hero{
position: absolute;
top:0;
z-index: 1;
}
body #page-wrapper #page #page-copy{
z-index: 9;
margin-top: 12px;
}
body #page-wrapper #page #page-copy #page-copy-left{
background: #fff;
padding: 0 12px 0 12px;
margin-bottom: 64px;
margin-top: 18px;
height: 560px;
overflow: hidden;
}
body.classes-page #page-wrapper #page #page-copy #page-copy-left{ margin-bottom: 34px;}
body #page-wrapper #page #page-copy #page-copy-left p{
color: #1b3950;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular'
}
body #page-wrapper #page #page-copy #page-copy-left p{
color: #1b3950;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular'
}
body #page-wrapper #page #products-copy{
margin-top: 12px;
}
body #page-wrapper #page #products-copy #page-copy-left{
margin-bottom: 64px;
}
body #page-wrapper #page #products-copy #page-copy-left .copy{
padding-left: 40px;
}
body #page-wrapper #page #products-copy #page-copy-left p{
color: #1b3950;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular'
}
body #page-wrapper #page #products-copy #page-copy-left p a{
color: #1b3950;
text-decoration: underline;
}
body #page-wrapper #page #products-copy #page-copy-left p a:hover{
text-decoration: none;
}
body #page-wrapper #page #products-copy #page-copy-right{
margin-bottom: 64px;
text-align: right;
}
body #page-wrapper #page #page-copy{
margin-top: 0px;
}
body #page-wrapper #page #page-copy #page-copy-left, body #page-wrapper #page #page-copy #page-copy-full, body #page-wrapper #page #page-copy #BlogContent {
/* margin: 0 0 254px 0px; */
}
body #page-wrapper #page #page-copy #page-copy-left .copy, body #page-wrapper #page #page-copy #page-copy-full .copy, body #page-wrapper #page #page-copy #BlogContent .copy {
padding-left: 40px;
margin-bottom: 40px;
}
body #page-wrapper #page #page-copy #page-copy-left p, body #page-wrapper #page #page-copy #page-copy-full p, body #page-wrapper #page #page-copy #BlogContent p {
color: #000000;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular'
}
body #page-wrapper #page #page-copy #page-copy-left ul li, body #page-wrapper #page #page-copy #page-copy-full ul li, body #page-wrapper #page #page-copy #BlogContent ul li {
color: #000000;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular';
}
body #page-wrapper #page #page-copy #BlogContent ul {
list-style: none;
padding: 0;
text-align: center;
margin: 0;
}
body #page-wrapper #page #media-copy ul {
list-style: none;
padding: 0 20px;
text-align: center;
margin: 0;
}
body #page-wrapper #page #page-copy #BlogContent ul li, body #page-wrapper #page #media-copy ul li {
color: #000000;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular';
display: inline-block;
margin: 0 5px;
}
body #page-wrapper #page #page-copy #BlogContent ul li.prev, body #page-wrapper #page #media-copy ul li.prev {
float: left;
margin: 0;
}
body #page-wrapper #page #page-copy #BlogContent ul li.next, body #page-wrapper #page #media-copy ul li.next {
float: right;
margin: 0;
}
body #page-wrapper #page #page-copy #BlogContent ul li.disabled, body #page-wrapper #page #media-copy ul li.disabled {
display: none;
}
body #page-wrapper #page #page-copy #BlogContent ul li a, body #page-wrapper #page #media-copy ul li a {
color: #b6a161;
text-decoration: none;
}
body #page-wrapper #page #page-copy #BlogContent ul li a.disabled, body #page-wrapper #page #media-copy ul li a.disabled {
color: #000000;
}
body #page-wrapper #page #page-copy #BlogContent ul li a:hover, body #page-wrapper #page #media-copy ul li a:hover {
color: #897740;
text-decoration: none;
}
body #page-wrapper #page #page-copy #BlogContent .pagination {
width: 100%;
margin-bottom: 0;
}
body #page-wrapper #page #media-copy .pagination {
width: 100%;
margin: 0 0 20px 0;
}
body #page-wrapper #page #page-copy #page-copy-left p strong, body #page-wrapper #page #page-copy #page-copy-full p strong, body #page-wrapper #page #page-copy #BlogContent p strong {
font-family: 'BrandonGrotesque-Medium'
}
body #page-wrapper #page #page-copy #page-copy-left p a, body #page-wrapper #page #page-copy #page-copy-full p a, body #page-wrapper #page #page-copy #BlogContent p a {
color: #b6a161;
text-decoration: none;
}
body #page-wrapper #page #page-copy #page-copy-left p a:hover, body #page-wrapper #page #page-copy #page-copy-full p a:hover, body #page-wrapper #page #page-copy #BlogContent p a:hover {
color: #897740;
text-decoration: none;
}
body #page-wrapper #page #page-copy #page-copy-full .copy {
padding: 0 40px;
}
body #page-wrapper #page #page-copy #page-copy-right{
margin-bottom: 64px;
text-align: right;
float: right;
}
body #page-wrapper #page #media-copy{
margin: 0px 20px 20px 20px;
overflow: auto;
}
.media-post {
padding: 20px;
}
.media-post .media-image{
text-align: center;
vertical-align: central;
background-color:#fefdfc;
padding-top: 20px;
}
.media-post .media-image img {
max-height: 100px;
max-width: 220px;
}
.media-post .media-info{
text-align: center;
background-color:#fefdfc;
padding: 10px 0 5px 0;
}
.media-post .media-info p{
color: #1b3950;
font-size: 17px;
font-family: 'BrandonGrotesque-Regular';
margin: 0 0 15px 0;
}
.media-post .media-info p a {
padding: 6px 24px;
font-size: 14px;
color: #fff;
background-color: #b6a161;
border: none;
font-family: 'BrandonGrotesque-Regular';
}
.media-post .media-info p a:hover {
background-color: #897740;
}
.media-post .media-info span{
font-size: 14px;
}
body #gallery-links {
width: 950px;
margin: 0 0 -20px -40px;
}
body #instagram-wrapper #gallery-links .gallery-thumb {
float:left;
}
.gallery-thumb {
overflow: hidden;
display: block;
border: 5px solid #fff;
-moz-box-shadow: 0px 0px 10px 3px #D7D2CD;
-webkit-box-shadow: 0px 0px 10px 3px #D7D2CD;
box-shadow: 0px 0px 10px 3px #D7D2CD;
margin: 20px 0 20px 40px;
width: 142px;
height: 142px;
float: left;
position: relative;
}
.gallery-thumb img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.gallery-thumb a .hover {
display: none;
z-index: 1000;
background: transparent url('../img/insta-hover.png') left top no-repeat;
width: 132px;
height: 132px;
margin-left: 45px;
position: absolute;
top: 35px;
}
.gallery-thumb a:hover .hover {
display:block;
}
body #page-wrapper #page #page-copy .contact {
margin-left: 50px !important;
}
body #page-wrapper #page .contact-content {
padding: 0 0 0 40px;
}
body #page-wrapper #page .contact-content .contact-method {
padding-left: 35px;
background-position: left center;
background-repeat: no-repeat;
}
body #page-wrapper #page .contact-content #contact-hours {
background-image: url(../img/icon-hours.png);
}
body #page-wrapper #page .contact-content #contact-address {
background-image: url(../img/icon-address.png);
}
body #page-wrapper #page .contact-content #contact-email {
background-image: url(../img/icon-email.png);
}
body #page-wrapper #page .contact-content #contact-phone {
background-image: url(../img/icon-phone.png);
}
#page-wrapper #page .mailing-form {
background: #f3ebe3;
padding: 0px 0 10px 0;
margin: 1em 0;
margin-bottom: 20px;
float: left;
width: 100%;
}
#page-wrapper #page .mc-field-group {
float: left;
width: 100%;
}
#page-wrapper #page .mailing-form label {
width: 95px;
float: left;
margin: 0;
padding: 6px 0;
color: #000000;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular';
}
#page-wrapper #page .mailing-form .mc-field-group input {
width: 310px;
float: right;
font-size: 12px;
border: none;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
#page-wrapper #page .mailing-form .Actions input {
width: auto;
float: right;
font-size: 14px;
border: none;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
#page-wrapper #page .mailing-form .Actions {
float: left;
width: 100%;
margin-bottom: 12px;
}
#page-wrapper #page .mailing-form .action {
float: right;
padding: 6px 24px;
font-size: 14px;
color: #fff;
background-color: #b6a161;
border: none;
font-family: 'BrandonGrotesque-Regular';
}
#page-wrapper #page .mailing-form .action:hover {
background-color: #897740;
}
body #page-wrapper #page .contact-form {
background: #f3ebe3;
padding: 0px 0 10px 0;
margin: 1em 0;
margin-bottom: 40px;
float: left;
}
body #page-wrapper #page .contact-form .contact-content, body #page-wrapper #page .mailing-form .contact-content {
padding: 0 20px;
}
body #page-wrapper #page #contact-copy .contact{
background-color: #f9f5f0;
margin-bottom: 64px;
}
body #page-wrapper #page #contact-copy .contact .contact-content{
padding: 24px 68px 24px 60px;
}
body #page-wrapper #page #contact-copy .contact .contact-content p{
color: #1b3950;
font-size: 15px;
font-family: 'Bauer Bodoni W01 Roman';
margin: 0 0 12px 0;
}
body #page-wrapper #page #contact-copy .contact .contact-content p a{
color: #1b3950;
}
body #page-wrapper #page #contact-copy .contact .contact-content hr{
border-top: 1px solid #1b3950;
}
#TotemForm_ContactForm .field{
float: left;
width: 100%;
}
#TotemForm_ContactForm .field label{
width: 95px;
float: left;
margin: 0;
padding: 6px 0;
color: #000000;
font-size: 15px;
font-family: 'BrandonGrotesque-Regular'
}
#TotemForm_ContactForm .field label.long{
float: left;
width: 100%;
}
#TotemForm_ContactForm .field input{
width: 310px;
float: right;
font-size: 12px;
border: none;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
#TotemForm_ContactForm .field select{
margin: 0;
font-size: 12px;
width: 310px;
float: right;
border: none;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
#TotemForm_ContactForm .field textarea{
width: 310px;
float: right;
border: none;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
font-size: 12px;
}
#TotemForm_ContactForm .action {
float: right;
padding: 6px 24px;
font-size:14px;
color: #fff;
background-color: #b6a161;
border: none;
font-family: 'BrandonGrotesque-Regular';
}
#TotemForm_ContactForm .action:hover {
background-color: #897740;
}
#TotemForm_ContactForm .Actions {
float: left;
width: 100%;
margin-bottom: 12px;
}
body #page-wrapper #page #page-copy #BlogContent .copy .blogSummary {
border-bottom: 1px solid #dbc5ad;
}
body #page-wrapper #page #page-copy #BlogContent .blogEntry img {
max-width: 550px;
max-height: 400px;
}
#Breadcrumbs p, #Breadcrumbs {
color: #000000;
font-size: 15px;
font-family: 'BrandonGrotesque-Medium';
}
#Breadcrumbs a {
color: #b6a161;
text-decoration: none;
font-family: 'BrandonGrotesque-Regular';
}
#Breadcrumbs a:hover {
color: #897740;
text-decoration: none;
}
body #page-wrapper #page #page-copy #BlogContent p.postTitle {
margin: 1em 0 0 0;
}
body #page-wrapper #page #page-copy #BlogContent p.authorDate {
margin: 0 0 1em 0;
}
body #page-wrapper #page #page-copy #BlogContent .blog-back {
border-top: 1px solid #dbc5ad;
}
body #Sidebar {
margin: 1em 0;
}
body #Sidebar .previous-articles {
background: #fefdfc;
margin-right: 40px;
}
body #Sidebar .previous-articles {
padding: 20px;
}
body #Sidebar .previous-articles p {
color: #000000;
font-size: 15px;
font-family: 'BrandonGrotesque-Medium';
margin: 0 0 1em 0;
}
body #Sidebar .previous-articles a {
color: #000000;
text-decoration: none;
font-family: 'BrandonGrotesque-Regular';
font-size: 15px;
}
body #Sidebar .previous-articles a:hover {
font-family: 'BrandonGrotesque-Medium';
text-decoration: none;
}
body #instagram-wrapper {
height: 202px;
width: 100%;
background: none;
/* position: fixed; */
margin-bottom: 50px;
z-index: 99;
}
body #instagram-wrapper #instagram {
width: 950px;
height: 202px;
background-color: #e4d2be;
/* margin: 0px auto; */
}
body #instagram-wrapper #instagram ul {
margin: 0;
}
body #instagram-wrapper #instagram ul li {
padding: 30px 40px 30px 0;
}
body #instagram-wrapper #instagram .instagram-post {
float:left;
}
.instagram-post img {
max-width: 142px !important;
display: inline-block;
border: 5px solid #fff;
-moz-box-shadow: 0px 0px 10px 3px #c9b9a8;
-webkit-box-shadow: 0px 0px 10px 3px #c9b9a8;
box-shadow: 0px 0px 10px 3px #c9b9a8;
margin-left: 40px;
}
.instagram-post a .hover {
display: none;
z-index: 1000;
background: transparent url('../img/insta-hover.png') left top no-repeat;
width: 132px;
height: 132px;
margin-left: 45px;
position: absolute;
top: 35px;
}
.instagram-post a:hover .hover {
display:block;
}
body #footer-wrapper{
height: 52px;
width: 100%;
background: none;
position: fixed;
bottom: 0px;
z-index: 99;
}
body #footer-wrapper footer{
width: 950px;
height: 52px;
/*background: url('../img/black-bg.jpg') left top repeat;*/
background: #000;
margin: 0px auto;
}
body #footer-wrapper footer p{
font-family: 'BrandonGrotesque-Regular';
font-size: 14px;
color: #b6a161;
margin-top: 18px;
margin-left: 40px;
}
body #footer-wrapper footer p span{
margin-left: 8px;
margin-right: 8px;
}
body #footer-wrapper footer p a{
color: #b6a161;
text-decoration: none;
}
body #footer-wrapper footer p a:hover, body #footer-wrapper footer p a:hover{
color: #897740;
text-decoration: none;
}
.fb-icon{ margin-right: 40px; margin-top: 14px;}
.twitter-icon{ margin-right: 10px; margin-top: 14px;}
.left{ float: left;}
.right{ float: right;}
.modal-body
{
background-color: #fff;
}
/* ==========================================================================
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;
}
}