/*
* 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 #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
========================================================================== */
html , body {
margin: 0 ;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
ul{
margin: 0;
padding: 0;
}
body{
/* background-image: url(../img/bg5.jpg);
background-size: cover*/
}
a{
transition: .4s;
text-decoration: none;
color: #000;
}
#header{
width: 100%;
height: 260px;
background-color: #b29459;
background-image: url(../img/tx_header.jpg);
background-size: cover;
/* background-image: url(../img/logo.png);
background-position: center 12px;
background-repeat: no-repeat;*/
/*border-bottom: 5px solid #E7B948;*/
/*box-shadow: 13px 2px 86px 2px;*/
}
/*Google Translator*/
#google_translate_element{
position: absolute;
right: 7px;
top: 49px;
}
/*Header Flag*/
#flag-russian{
display: block;
width: 40px;
height: 29px;
text-align: right;
background-size: cover;
background-image: url(../img/russian_flag.jpg);
position: absolute;
top: 8px;
right: 8px;
}
/*Google Serch*/
.gsc-control-cse , .gsc-control-cse-en{
border: none !important;
background-color: transparent !important;
margin: auto;
margin-top: -49px;
max-width: 750px;
}
#header_title , #header_subtitle{
display: block;
text-align: center;
}
#header_title{
padding-top: 38px;
font-size: 42px;
height: 100px
}
#header_subtitle{
font-size: 21px;
height: 60px;
}
#header_logo{
display: block;
height: 200px;
background-image: url(../img/logo.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
#nav_bar ul{
text-align: center
}
#nav_bar li{
display: inline-block;
border: 1px solid #000;
list-style: none;
}
#nav_bar a{
display: block;
padding: 5px 6px;
}
#nav_bar a:hover{
color: #fff;
background-color: #333
}
#hot-deals{
background-color: #EA2E2E;
}
#hot-deals a:hover{
background-color: red;
}
#hot-deals li{
border: 10px solid #fff;
transition: .4s;
}
#hot-deals a:hover{
border: none !important;
}
#hot-deals a:hover i{
color: #fff
}
#hot-deals i{
color: #123;
}
#hot-deals a{
color: #fff ;
}
/*#nav_bar li:nth-child(1){
background-color: #fe5b54;
}
#nav_bar li:nth-child(2){
background-color: #fe9e54;
}
#nav_bar li:nth-child(3){
background-color: #34929c;
}
#nav_bar li:nth-child(4){
background-color: #8385AD;
}
#nav_bar li:nth-child(5){
background-color: #34929c;
}
#nav_bar li:nth-child(6){
background: #fe5b54;
}
#nav_bar li:nth-child(7){
background-color: #fe9e54;
}
#nav_bar li:nth-child(8){
background-color: #8385AD;
}*/
#body-content{
height: 100%;
width: 100%;
/*background-color: #fff*/
}
#body-content-inner{
/*padding: 80px 10%;*/
}
#body-content p{
margin: 0;
margin-bottom: 1em;
}
.empty_box{
z-index: -999;
height: 350px;
background-color: transparent;
width: 100%;
background-size: cover
}
.empty_box span{
display: block;
background-color: rgba(0, 0, 0, 0.67);
color: #fff;
text-align: center;
/*line-height: 350px;*/
font-size: 2.2em;
text-transform: uppercase;
text-shadow: 2px 3px 1px #000000;
font-weight: 300;
height: 100%;
padding-top: 10%
}
.two-rows {
display: inline-block;
width: 47%;
/*text-align: justify;*/
vertical-align: top;
margin: 0 1%;
}
.left-row-list{
text-align: right
}
.right-row-list{
text-align: left
}
.two-rows a {
color: blue;
text-decoration: underline;
}
#taxi_bg{
background-image: url(../img/bg6-s.jpg);
}
#taxi_bg span{
font-size: 1.6em;
padding-top: 2.5%
}
#query_bg{
background-image: url(../img/bg7-s.jpg);
}
#four_0_four{
background-image: url(../img/404.jpg);
}
#forum p{
font-weight: 500;
font-size: 17px;
}
/*#forum span{
background-color: #C3C3C3;
padding: 5px 10px;
}*/
#forum span{
display: block;
font-weight: 400;
}
.forum-reply{
margin-left: 20px;
}
#post-c{
display: none;
}
#post-q{
border: 1px solid #ccc;
background-color: #333;
color: #fff;
width: 160px;
padding: 10px;
margin : 11px 0;
display: inline-block;
}
.post-reply{
width: 48px !important;
padding: 6px 14px !important;
font-size: 13px !important;
}
.self-box{
overflow-x: auto;
max-height: 500px;
border: 1px solid #FFF;
max-width: 1000px;
margin: 45px auto;
padding: 5%;
/*background-color: #EFEFEF !important;*/
}
.err-success{
background-color: #FFF;
padding: 10px 16px;
/*border: 1px solid #fff;*/
display: inline-block !important;
text-align: center
}
#contact_bg{
background-image: url(../img/bg5-s.jpg);
}
.white_bg{
z-index: -999;
padding: 80px 10%;
background-color: #fff;
/* border-bottom: 1px solid #D5D5D5;*/
border-bottom: 1px solid #fff;
background-image: url(../img/pattern2.png);
background-size: cover;
}
.white_bg img{
text-align: center
}
#contact-p{
font-weight: 500
}
/*Testimonails*/
.testimonails-p-author{
display: block;
margin-bottom: 15px;
border-bottom: 1px solid #FFF;
padding-bottom: 16px;
text-align: right
}
.testimonails-p-author:before{
content: "-"
}
.testimonails_round_outer{
display: inline-block;
margin: 2.6%;
}
.ts_round{
/* background-color: #333;
width: 150px;
height: 150px;
display: block;
border-radius: 75px;*/
background-color: #FFF;
width: 150px;
height: 150px;
border-radius: 75px;
background-size: contain;
opacity: 0.9;
}
.testimonails_round_outer span{
text-align: center;
display: block;
text-shadow: 1px 2px 2px #000000;
}
.ts_count{
font-weight: bold;
margin-top: 13px;
}
#testimonials_round{
text-align: center;
background-image: url(../img/taxi_blur.jpg);
color: #fff;
background-size: cover
}
#testimonials_round a{
color: #fff !important;
}
#icon_satisfaction{
background-image: url(../img/icon_thumb_200.png);
}
#icon_late{
background-image: url(../img/icon_late_200.png);
}
#icon_peoples{
background-image: url(../img/icon_peoples_200.png);
}
#icon_thumb_down{
background-image: url(../img/icon_thumb_down_200.png);
}
/*FORM*/
.my-form input , .my-form select , .my-form textarea{
display: inline-block;
padding: 10px;
width: 30%;
margin-top: 10px;
box-sizing: content-box;
border-radius: 10px;
border: 1px solid #bbb;
}
.my-form textarea{
width: 100%;
height: 130px;
box-sizing: content-box;
}
.my-form input[type="button"] , .my-form input[type="submit"]{
border: 1px solid #ccc;
background-color: #333;
color: #fff;
width: 160px;
}
.my-form label{
display: block;
}
/*Rates*/
/*#rates a{
text-decoration: none;
color: #000;
background-color: #eee;
padding: 10px;
display: inline-block;
margin: 5px;
transition: .4s;
border: 1px solid #ccc
}
#rates a:hover{
background-color: #333;
color: #fff;
}
#rates a:last-child{
background-color: #333;
color: #fff
}*/
#rates-per-page table{
width: 100%;
margin-bottom: 50px;
}
#rates-per-page th{
/*background-color: #EFEFEF*/
background-color: #F6C862
}
#rates-per-page th , #rates-per-page td{
padding: 10px;
text-align: justify;
border: 1px solid #000;
}
#rates-per-page h4{
background-color: #eee;
padding: 10px;
text-align: center;
margin: 0 10px 10px 0;
}
.rates-two-col .two-rows:last-child{
padding-top: 68px;
}
/*Vehicles*/
#vehicles{
text-align: center;
}
#vehicles span{
display: block;
}
#vehicles h2{
text-align: left
}
#vehicles span:first-child{
/*margin-top: 204px;*/
}
.vehicle-text{
padding: 4px 13px;
}
.vehicle-outer{
display: inline-block;
width: 32%;
}
.vehicle_bg{
height: 300px;
background-size: contain;
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
border-bottom: 1px solid #eee;
}
#new-sedan-bg{
background-image: url(../img/new_sedan.png);
}
#normal-sedan-bg{
background-image: url(../img/normal_sedan.png);
}
#pax-van-1-5-bg{
background-image: url(../img/1_5_pax_van.png);
}
#pax-van-1-7-bg{
background-image: url(../img/1_7_pax_van.png);
}
#pax-van-1-16-bg{
background-image: url(../img/1_16_pax_van.png);
}
/*Popup*/
.fsp-close{
top: 0 !important;
font-size: 2em;
color: #fff;
}
.fsp-content{
top: 10px !important;
margin-top: 0 !important;
}
.popup-data{
display: none;
color: #fff;
}
.popup-data h2 , .popup-data p{
color: #000
}
#contact_bg span{
padding-top: 5%;
}
/*Footer*/
.contact-icons{
cursor: pointer;
background-color: #fff;
display: inline-block !important;
height: 85px !important ;
width: 85px !important ;
padding-top: 0 !important ;
background-color: rgba(0, 0, 0, 0.611765);
border-radius: 50px;
margin-top: 11px;
background-size: cover;
background-position: center center;
}
.contact-icons:nth-of-type(1){
background-image: url(../img/icon_email_100.png) !important;
}
.contact-icons:nth-of-type(2){
background-image: url(../img/icon_whats_app_100.png) !important;
}
.contact-icons:nth-of-type(3){
background-image: url(../img/icon_we_chat_100.png) !important;
}
.contact-icons label{
font-size: 0.25em;
text-transform: none;
position: relative;
top: 18px;
}
#footer{
display: block;
width: 100%;
background-color: #b29459;
text-align: center;
/*background-image: url(../img/logo_footer.png);*/
background-image: url(../img/tx_header.jpg);
background-size: cover;
/*background-repeat: no-repeat;*/
/*background-position: bottom 55px right 358px;*/
/*background-position: bottom 50px center;*/
}
#footer ul{
display: inline-block;
vertical-align: top
}
#footer li{
text-align: justify;
padding: 5px;
list-style: none;
margin: 0 49px;
font-weight: 500
}
#footer-inner{
padding: 20px
}
#footer-c_text{
margin-top: 15px;
font-weight: bold;
font-size: 12px;
padding-top: 23px;
border-top: 1px solid #333;
}
/*Validation*/
.formErrorContent{
padding: 10px !important;
background-color: #333 !important;
border: none !important;
}
.formError .formErrorArrow div {
border: none !important;
background-color: #333 !important;
}
/*UI Accordian*/
.color-1{
border: 1px solid #d3d3d3;
color: #fff;
background: rgb(255,168,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
}
.color-1:hover{
background: rgb(255,140,25); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,140,25,1) 1%, rgba(252,75,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,140,25,1)), color-stop(100%,rgba(252,75,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,140,25,1) 1%,rgba(252,75,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,140,25,1) 1%,rgba(252,75,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,140,25,1) 1%,rgba(252,75,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,140,25,1) 1%,rgba(252,75,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8c19', endColorstr='#fc4b00',GradientType=0 ); /* IE6-9 */
}
.color-2{
border: 1px solid #d3d3d3;
color: #fff;
background: rgb(73,155,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,155,234,1)), color-stop(100%,rgba(32,124,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
}
.color-2:hover{
background: rgb(34,138,229); /* Old browsers */
background: -moz-linear-gradient(top, rgba(34,138,229,1) 0%, rgba(0,114,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34,138,229,1)), color-stop(100%,rgba(0,114,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(34,138,229,1) 0%,rgba(0,114,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(34,138,229,1) 0%,rgba(0,114,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(34,138,229,1) 0%,rgba(0,114,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(34,138,229,1) 0%,rgba(0,114,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#228ae5', endColorstr='#0072ed',GradientType=0 ); /* IE6-9 */
}
/*.ui-state-hover{
color: #fff;
background: rgb(125,126,125); Old browsers
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); Chrome,Safari4+
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); Chrome10+,Safari5.1+
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); Opera 11.10+
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); IE10+
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); IE6-9
}*/
.ui-widget-content{
background-image: url(http://localhost/cmbtaxi/public_html/img/pattern2.png);
background-size: cover;
}
/*Popup*/
#contact_popup{
border-radius: 17px;
max-width: 500px;
margin: auto
}
/*Custom Media Queries*/
#contact-logos{
text-align: right
}
#whats-app-logo{
display: block;
width: 100%;
height: 100px;
background-image: url(../img/whats_app_logo.png);
background-repeat: no-repeat;
background-position: right;
}
#we-chat-logo{
display: block;
width: 100%;
height: 100px;
background-image: url(../img/we_chat_logo.png);
background-repeat: no-repeat;
background-position: right;
}
/*Gradients*/
#vehicles , .my-form {
background: rgb(178,148,89); /* Old browsers */
background: -moz-linear-gradient(left, rgba(178,148,89,1) 0%, rgba(254,252,234,1) 26%, rgba(254,252,234,1) 72%, rgba(178,148,89,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(178,148,89,1)), color-stop(26%,rgba(254,252,234,1)), color-stop(72%,rgba(254,252,234,1)), color-stop(100%,rgba(178,148,89,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(178,148,89,1) 0%,rgba(254,252,234,1) 26%,rgba(254,252,234,1) 72%,rgba(178,148,89,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(178,148,89,1) 0%,rgba(254,252,234,1) 26%,rgba(254,252,234,1) 72%,rgba(178,148,89,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(178,148,89,1) 0%,rgba(254,252,234,1) 26%,rgba(254,252,234,1) 72%,rgba(178,148,89,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(178,148,89,1) 0%,rgba(254,252,234,1) 26%,rgba(254,252,234,1) 72%,rgba(178,148,89,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b29459', endColorstr='#b29459',GradientType=1 ); /* IE6-9 */
}
/*Map*/
iframe{
width: 100%
}
@media screen and (max-width: 1000px) {
#header{
height: 565px
}
.empty_box span{
/*padding: 15%;*/
line-height: initial;
height: 100%
}
.contact-icons {
/*padding: 5% !important;*/
}
#nav_bar{
}
#nav_bar li{
display: block;
margin: 3px 30px;
text-align: left;
}
.two-rows {
display: block;
width: 100%
}
.left-row-list , .right-row-list{
text-align: justify;
}
.my-form input , .my-form[type="button"] , .my-form select{
width: 100%
}
.my-form select{
background-color: #fff;
}
/*Rates*/
#rates a{
/*display: block;*/
}
/*Vehicles*/
.vehicle-outer{
display: inline-block;
width: 100%;
}
/*Contact*/
#contact-logos{
text-align: justify
}
#whats-app-logo , #we-chat-logo{
background-repeat: no-repeat;
background-position: left;
}
.testimonails_round_outer{
margin: 7.6%;
}
#footer ul{
display: initial;
}
#footer li{
text-align: center;
}
/*Unique Styles*/
#taxi_bg span{
font-size: 1.3em;
padding-top: 7.5%;
}
.formError{
left: 10% !important
}
/*Popup*/
#contact_popup{
width: 80%;
}
}
/*Table Responsive Code*/
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
#rates-per-page table, #rates-per-page thead, #rates-per-page tbody, #rates-per-page th, #rates-per-page td, #rates-per-page tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#rates-per-page thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#rates-per-page tr {
margin-bottom: 15px;
}
#rates-per-page td {
/* Behave like a "row" */
border: none;
/*border-bottom: 1px solid #eee;*/
position: relative;
/*padding-left: 50%;*/
}
#rates-per-page td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
#rates-per-page td:nth-of-type(1){
/*background-color: #EFEFEF*/
background-color: #F6C862
}
#rates-per-page td:nth-of-type(1):after { content: ""; }
#rates-per-page td:nth-of-type(2):after{ content: " - From CMB"; }
#rates-per-page td:nth-of-type(3):after { content: " - To CMB"; }
#rates-per-page td:nth-of-type(4):after { content: " - Both"; }
#rates-per-page th , #rates-per-page td{
border: none;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
}
/* ==========================================================================
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: 100%;
}
/*
* 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 only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/* 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;
}
}