/*
* 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 {
}
/*
* 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.
*/
::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 {}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
}
/* ==========================================================================
Tatenda Multimedia Communications Shingie
========================================================================== */
@font-face {
font-family: 'NovecentowideLightRegular';
src: url('Novecentowide-Light-webfont.eot');
src: url('Novecentowide-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Novecentowide-Light-webfont.woff') format('woff'),
url('Novecentowide-Light-webfont.ttf') format('truetype'),
url('Novecentowide-Light-webfont.svg#NovecentowideLightRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'RalewayThin';
src: url('raleway_thin-webfont.eot');
src: url('raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway_thin-webfont.woff') format('woff'),
url('raleway_thin-webfont.ttf') format('truetype'),
url('raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;
}
body { background:url(../images/John-Bajani-Background-Colour.png) repeat; margin:0; padding:0;}
/* IE8/9 */
@media screen\0 {
body { background-color:#fff; background:; margin:0; padding:0;}
}
.orange { color:#ff7f00}
.green { color:#00a651}
.red { color:#f42200}
header { width:100%; height:auto; position:relative; z-index:20;}
.topTagline { width:auto; height:auto; position:absolute; right:30px;top:20px;font:16px/24px 'BebasNeueRegular', Times, serif; color:#999;}
.theForm { width:337px; height:auto; position:absolute; right:0;top:50px;}
.formFields { width:120px; height:24px; float:left; background-color:#3c4141; border:none; margin:0 10px 0 0; font:11px/24px Arial, Helvetica, sans-serif; color:#CCC; padding:0 0 0 10px;border:none;}
.loginSubmit { width:50px; height:24px; float:left;font:11px/24px Arial, Helvetica, sans-serif; color:#333; text-align:center; border:none; margin:0 0 0 -10px;}
.theFormRecording { width:500px; height:auto; float:left;}
.formFieldsRecording { width:230px; height:30px; float:left; background-color:#1f1f1f; border:none; margin:0 10px 10px 0; font:11px/24px Arial, Helvetica, sans-serif; color:#CCC; padding:0 0 0 10px;border:none;}
.loginSubmitRecording { width:100px; height:24px; float:left;font:11px/24px Arial, Helvetica, sans-serif; color:#333; text-align:center; border:none; margin:0 0 0 3px;}
textarea { width:480px; height:150px; float:left; background-color:#1f1f1f; border:none; margin:0 10px 10px 0; font:11px/24px Arial, Helvetica, sans-serif; color:#CCC; padding:0 0 0 10px;border:none;}
.headerStrip { width:100%; height:150px; margin:0 auto; display:block; position:relative; float:left; z-index:99999; background: url(../images/John-Bajani-Top-Nav.png) 0 -33px repeat-x; border-bottom:1px solid #333;} /* header content starts here*/
.sliderStrip { width:100%; height:auto; margin:0 auto; display:block; float:left; z-index:6000} /* header content starts here*/
.sliderWrap {width:950px; height:340px; margin:15px auto 10px auto; background-color:#fff; border:5px solid #2e2d2d; overflow:hidden; -moz-box-shadow:0px 0px 2px 0px #000;
-webkit-box-shadow: 0px 0px 2px 0px #000;box-shadow: 0px 0px 2px 0px #000;}
.sliderWrap img { text-align:center;}
.structureWrap { width:100%; height:auto; float:left;position:relative; z-index:1000}
.mainWrap { width:960px; height:auto; margin:0 auto; position:relative;} /* this is in every section of the website */
.logo { width:230px; height:177px; margin:0 auto; position: absolute; z-index:9999;}
.logo a { width:230px; height:177px; float:left; background:url(../images/John-Bajani-logo.png) no-repeat; margin:-90px 0 0 20px;}
.nav { width:650px; height:auto; float:right;}
.maiNav { width:960px; height:70px; float:right ;margin:95px auto 0 auto;} /*background:url(../images/John-Bajani-MainNavBack.png) no-repeat;*/
.maiNav li { float:left; list-style:none;}
#nav ul li a {font:20px/18px 'BebasNeueRegular'; color:#FFF; text-align:center;}
.maiNav li a { height:60px;font:22px/22px 'BebasNeueRegular'; color:#FFF; text-decoration:none; margin:0 15px; float:left; text-align:center; letter-spacing:1px;
list-style:none; text-shadow:none; background: url(../images/John-Bajani-Hover.png) 0 0; -webkit-transition: all .9s ease-out;-moz-transition: all .9s ease-out;
-ms-transition: all .9s ease-out;-o-transition: all .9s ease-out;transition: all .9s ease-out;}
.linkTag { width:100%; height:; text-align:center; font:12px Arial, Helvetica, sans-serif!important; color:#FFF; letter-spacing:0!important; color:#6f6f6f; text-shadow:none;}
.linkTag:hover { color:#FFF;}
.maiNav li a:hover { background-position:268px 0; color:#d5360b;}
.curent { background-position:268px 0; color:#d5360b;}
.songframeWrap { width:300px; height:auto; float:left; background-color:#000; margin-bottom:5px; padding:5px 0;}
.songtitle { width:96px; height:30px; float:left; padding:0 5px; font:12px/30px 'ColaborateThinRegular', Arial, Helvetica, sans-serif; color:#999; overflow:hidden; text-overflow: ellipsis;}
.songframe-one { width:190px; height:20px; float:left; padding:5px 0; overflow:hidden;}
.songframe-one object { margin:0 0 0 -5px; }
h1 { font:35px/35px 'RalewayThin', Arial, Helvetica, sans-serif; color:#ccc; letter-spacing:-1px; margin:20px 0 0 0;}
h2 { width:100%; height:auto; float:left; border-bottom:3px solid #ab2b00; font:24px/24px 'RalewayThin', Arial, Helvetica, sans-serif; color:#FFF; padding-bottom:10px;}
h4 { width:40%; height:auto; float:left; border-bottom:5px solid #ab2b00; font:24px/28px 'BebasNeueRegular', Arial, Helvetica, sans-serif; text-transform:uppercase;
color:#FFF; margin:26px 10px;}
h5 { width:100%; height:auto; float:left; border-bottom:3px solid #ab2b00; font:16px/16px 'RalewayThin', Arial, Helvetica, sans-serif; color:#FFF; padding-bottom:10px;}
h3 { width:87%; height:auto; float:left; border-bottom:5px solid #333; font:14px/24px 'RalewayThin', Arial, Helvetica, sans-serif; color:#FFF;
background:url(../images/John-Bajani-Small-Box.png) 0 5px no-repeat; padding:0 0 0 20px;}
p { font:12px/20px 'ColaborateThinRegular', Arial, Helvetica, sans-serif; color:#666; font-weight:100;}
.upcommingsection { widows:230px; height:auto; float:left;}
.readmore { width:86px; height:21px; float:left; margin:-5px 0 0 0;}
.readmore a { width:86px; height:21px; float:left; background:url(../images/John-Bajani-Read-More.png) -10px 0 no-repeat;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.readmore a:hover { width:96px; height:21px; background:url(../images/John-Bajani-Read-More.png) 0 0 no-repeat;}
/* ==================================Body structure starts here =================================================== */
.futreSectionSongs { width:900px; height:auto; float:left; background:#181818; margin:0 0 0 -40px; padding:0px 25px 20px 35px;}
.recordedProjectWrap { width:300px; height:auto; float:left;}
.recordedProject {}
.recordedProject img { margin:20px 20px 0 0; float:left; border:5px solid #2e2d2d; -moz-box-shadow:0px 0px 2px 0px #000; -webkit-box-shadow: 0px 0px 2px 0px #000;box-shadow: 0px 0px 2px 0px #000;}
.recordedProjectWrap ul { width:290px; height: auto; float:left;}
.recordedProjectWrap ul li { width:290px; height:24px; float:left; border-bottom:1px solid #2B2B2B; font:12px/24px Arial, Helvetica, sans-serif; color:#999; list-style:none;}
.leftColamn {width:290px; height:auto; float:left; background-color:#baa691; display:block; margin-right:20px;}
.CdWrap { width:100%; height:; float:left; display:block; margin:0 0 10px 0; border-bottom:1px dotted #666;}
.CD {width:130px; height:auto; float:left;}
.contentWrepper {width:170px; height:auto; float:left;}
.eventSmall { width:126px; height:176px; float:left; margin:0 10px 10px 0;}
.eventBig { width:126px; height:176px; float:left; margin:0 0 10px 17px;}
.bodyContainer {width:960px; height:auto; float:left;padding:0; display:block; margin:10px 0 20px 0;}
.newsArtMainPic { width:600px; height:auto; float:left; background-color:#54523e; margin:0px 20px 20px 20px;border:5px solid #54523e;-moz-box-shadow:1px 1px 3px 1px #070B24; -webkit-box-shadow:1px 1px 3px 1px #070B24;box-shadow:1px 1px 3px 1px #070B24; overflow:hidden}
.newsArtMainPic img { width:100%; height:auto; margin-bottom:-5px;}
.videoWrap { width:610px; height:450px; float:left; background-color:#54523e; margin:20px 20px 0 20px; position:relative;}
.sectionHolder { width:530px; height:auto; float:left; padding:20px 40px; position:relative; background:#1f1f1f;margin:0 10px 10px 0;-moz-box-shadow:0px 0px 2px 0px #070B24;
-webkit-box-shadow:0px 0px 2px 0px #070B24;box-shadow:0px 0px 2px 0px #070B24; }
.sectionHolderfullwidth { width:880px; height:auto; float:left; padding:20px 40px; position:relative; background:#1f1f1f;margin:0 10px 10px 0;-moz-box-shadow:0px 0px 2px 0px #070B24;
-webkit-box-shadow:0px 0px 2px 0px #070B24;box-shadow:0px 0px 2px 0px #070B24; }
.RightsectionHolder { width:300px; height:auto; float:left; padding:20px; position:relative; background:url(../images/gray-block.png) repeat-x; margin-bottom:10px; background-color:#1f1f1f;-moz-box-shadow:0px 0px 2px 0px #070B24;
-webkit-box-shadow:0px 0px 2px 0px #070B24;box-shadow:0px 0px 2px 0px #070B24; }
.futreSection { width:490px; height:auto; float:left; background:#181818; margin:0 0 0 -40px; padding:0 40px 20px 40px;}
.upcomingPoster { width:250px; height:140px; float:left; background-color:#CF6; margin:-15px 0 0 0; border:5px solid #938672; overflow:hidden;}
.upcomingPoster img { width:100%; height:auto;}
.socilaFeedsHolders { width:530px; height:auto; float:left; margin:10px 0 0 0;}
.moreUpcoming { width:260px; height:30px; float:left; margin:10px 0 0 0;}
.moreUpcoming a { width:190px; height:30px; float:left; background:url(../img/Hope-Masike-Sprite.png) -20px -62px no-repeat; font:12px/30px Arial, Helvetica, sans-serif; color:#333; text-transform:uppercase; padding-left:70px; text-decoration:none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.moreUpcoming a:hover { background-position:-10px -62px;}
.socialWrap { width:250px; height:36px; float:left; display:block;}
.simple_slider_hover img{ width:166px; height:100px; float:left; padding:4px; border:1px solid #302e1c; margin:20px 0 20px 20px; list-style:none; cursor:pointer;cursor:hand; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.simple_slider_disabled img {opacity : 0.2; filter: alpha(opacity=20);zoom: 1;}
.simple_slider_hover img:hover { opacity : 0.4; filter: alpha(opacity=20);zoom: 3;}
.moveleft { width:10px; height:110px; position:absolute; bottom:20px; left:5px; background:#096; display:block; cursor:pointer;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.moveleft:hover { opacity : 0.2; filter: alpha(opacity=20);zoom: 1;}
.moveright { width:10px; height:110px; position:absolute; bottom:20px; right:5px; background:#096; display:block; cursor:pointer;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.moveright:hover { opacity : 0.2; filter: alpha(opacity=20);zoom: 1;}
.vediobox { width:600px; height:290px; float:left; background-color:#FFF; border:5px solid #54523e;-moz-box-shadow:1px 1px 4px 1px #070B24; -webkit-box-shadow:1px 1px 4px 1px #070B24;box-shadow:1px 1px 4px 1px #070B24;}
.arrow { width:40px; height:20px; float:left; background:url(../img/Hope-Masike-Sprite.png) -25px -38px no-repeat; background-color:#F00; margin:0 10px 2px 0;/* --- Transition --- */-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.arrow:hover { width:40px; height:20px; float:left; background:url(../img/Hope-Masike-Sprite.png) -20px -38px no-repeat; background-color:#F00; margin:0 10px 2px 0;}
.newsArt { width:295px; height:auto; float:left; margin:-10px 0 20px 20px}
.newsArt .header { width:284px; height:30px; float:left; background:url(../img/Hope-Masike-Sprite.png) 0 -92px no-repeat;font:16px/30px 'NovecentowideLightRegular', Arial, Helvetica, sans-serif; text-transform:uppercase; color:#FFF; padding-left:10px; margin-left:1px;}
.newsArt .picFrame { width:287px; height:154px; float:left; background-color:#54523e; padding:3px; border:1px solid #302e1c; overflow:hidden;}
.newsArt .picFrame img { width:100%; height:auto}
.newsArt .infoP { width:295px!important; height:60px!important; float:left;font:12px/18px Arial, Helvetica, sans-serif; color:#938672; margin:10px 0 0 0; padding:0;}
.artDate { float:left;font:14px/30px 'NovecentowideLightRegular', Arial, Helvetica, sans-serif; text-transform:uppercase; color:#FFF;}
.artReadmore { width:118px; height:26px; float:right; display:block;}
.artReadmore a { width:118px; height:26px; float:right; background:url(../img/Hope-Masike-Sprite.png) -25px -131px no-repeat; display:block;/* --- Transition --- */-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.artReadmore a:hover { width:118px; height:26px; float:right; background:url(../img/Hope-Masike-Sprite.png) -41px -131px no-repeat; display:block;}
.videoName { width:159px; height:40px; float:left; background-color:#666; font:14px Arial, Helvetica, sans-serif; color:#FFF; padding:5px 10px;}
#videoLoad {width:600px; height:290px; display:block; float:left; background:#000000}
#videoWithinNewsArticle {width:600px; height:290px; display:block; float:left; margin:10px 0 10px 0px; background:#000000; border:10px solid #333;}
.videoSpace {width:100%; float:left; display:block; }
#videoLoad iframe {width:600px; height:290px; overflow:hidden; border:0; margin:0; padding:0}
.facebook { width:250px; height:auto; float:left; margin:20px 0 20px 0; background-color:#1f1f1f; border:5px solid #2e2d2d;
-moz-box-shadow:0px 0px 2px 0px #000; -webkit-box-shadow: 0px 0px 2px 0px #000;box-shadow: 0px 0px 2px 0px #000;}
.facebook a { width:116px; height:113px; float:left; display:block;background:url(../images/John-Bajani-Socials.png) -116px 0;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.facebook a:hover { background:url(../images/John-Bajani-Socials.png) -116px -116px no-repeat;}
.twitter { width:250px; height:auto; float:left; margin:20px 0 20px 10px; background:#1f1f1f;background-color:#1f1f1f; border:5px solid #2e2d2d;
-moz-box-shadow:0px 0px 2px 0px #000; -webkit-box-shadow: 0px 0px 2px 0px #000;box-shadow: 0px 0px 2px 0px #000;}
.twitter a { width:114px; height:113px; float:left; display:block; background:url(../images/John-Bajani-Socials.png) 0 0;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
.twitter a:hover { background:url(../images/John-Bajani-Socials.png) 0 -116px no-repeat;}
footer { width:100%; height:80px; background:#000; float:left;}
footer ul { width:960px; height:auto; margin:20px auto 0 auto; }
footer ul li { float:left; margin:0 10px 0 0; font:11px/14px Arial, Helvetica, sans-serif; color:#FFF; text-transform:uppercase; list-style:none;border-right:1px solid #FFF;}
footer ul li:nth-child(6) { float:right; border:none;}
footer ul li:nth-child(5) { border-right:none;}
footer ul li a {padding:0 10px 0 0; font:11px/14px Arial, Helvetica, sans-serif; color:#FFF; text-transform:uppercase; text-decoration:none;}
footer ul li a:hover { text-decoration:underline; color:#F60;}
/* =============================================================== */
/*--------- NEWS ARCHIVE Content ---------*/
/*tabMenu*/
#tabMenu {margin:0; padding:0 0 0 0; list-style:none}
#tabMenu li {float:left; height:32px; width:74px; margin:0 1px; cursor:pointer; cursor:hand; background:#bebebe; line-height:32px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center; font-size:14px}
li.december {margin:0 1px 0 0 !important}
li.january {margin:0 0 0 1px !important}
li.mouseover {background:#1d2020 !important}
li.mouseout {background:#bebebe !important}
li.selected {background:#1d2020 !important}
.box {width:910px; margin:14px 15px 0 15px}
.boxTop {height:2px; clear:both; background:#1d2020}
*html .boxTop {margin-bottom:-2px;}
.boxBody { }
.boxBottom {height:2px; clear:both; background:#1d2020}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block;}
.boxBody div ul {margin:0 10px 0 25px; padding:0; width:885px; list-style-image:url(../images/EFC-Africa-readMore-arrow-red.png)}
/* || IE7 Hack || */
.boxBody div ul {*list-style-image:none; *list-style-type:none}
/* || IE8 Hack || */
@media \0screen {.boxBody div ul {list-style-image:none; list-style-type:none}}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0; font-family:Arial, Helvetica, sans-serif; color:#1d2020; font-size:12px}
.boxBody div ul li.first {margin:6px 0 0 0}
.boxBody div ul li.alone {border-bottom:none; margin:6px 0 6px 0}
.boxBody div ul li.last {border-bottom:none; margin:0 0 6px 0}
.boxBody div li span.archiveDate {color:#ac0101; font-weight:bold; width:140px; display:block; float:left}
.boxBody div li span.archiveTitle {color:#ac0101; font-weight:bold; width:610px; display:block; float:left}
.boxBody div li span.archiveTitle a {color:#1d2020; text-decoration:none}
.boxBody div li span.archiveTitle a:hover {color:#ac0101; text-decoration:none}
.boxBody div li span.archiveReadMore {color:#ac0101; font-weight:bold; width:130px; display:block; float:left; text-align:right}
.boxBody div li span.archiveReadMore a {color:#ac0101; text-decoration:none}
.boxBody div li span.archiveReadMore a:hover {color:#1d2020; text-decoration:none}
/* body content starts here*/
/* ==========================================================================
slidder css
========================================================================== */
#iview {width: 100%; height: 400px;display: block;background:#000;position: relative;}
#iview img {width: 50%; height: 50%;overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
#iview .iviewSlider {width: 100%;height:400px;display: block;overflow: hidden;}
.iview-caption {background: url();color: #FFF;padding: 10px 10px;font-family: Verdana;font-size: 12px;}
.iview-caption.caption1 {font-size: 36px;font-weight: bold;height: 45px;}
.iview-caption.caption2 {background: #00b4ff;font-size: 36px;font-weight: bold;text-shadow: none;}
.iview-caption.caption3 {background: #FFF;color: #000;font-size: 26px;text-shadow: none;}
.iview-caption.caption4 {font-size: 22px;font-weight: bold;}
.iview-caption.caption5 {background: #c4302b;box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;font-size: 20px;font-weight: bold;text-shadow: none;}
.iview-caption.caption6 {font-size: 18px;}
.iview-caption.caption7 {font:22px/18px 'AaarghNormal'; color:#FFF;text-align: left; padding:20px 30px 20px 29px;}
.iview-caption.caption7 div {line-height: 200%;}
.iview-caption.caption7 h3 {margin-bottom: 20px;color: #FFF;}
.iview-caption.blackcaption {background: #000;box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 15px 0px;text-shadow: none;}
#iview-preloader {border: #666 1px solid;width: 150px}
#iview-preloader div {background: #666;}
.iview-controlNav div.iview-items ul li {width: 11px;height: 12px;padding: 0px;float: left;margin: 3px;margin-top: 16px;line-height: 0px;}
/* ==========================================================================
slidder css
========================================================================== */
/* ==========================================================================
contact page form
========================================================================== */
/* ==========================================================================
contact page form
========================================================================== */
/* The Nivo Slider styles */
/* ==========================================================================
slidder ends
========================================================================== */
/* ==========================================================================
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: 0;
widows: 0;
}
h2,
h3 {
page-break-after: avoid;
}
}