/* style.css contains a reset, font normalization and some base styles. credit is left where credit is due. additionally, much inspiration was taken from these projects: yui.yahooapis.com/2.8.1/build/base/base.css camendesign.com/design/ praegnanz.de/weblog/htmlcssjs-kickstart */ /* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #dcdcdc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */ /* fonts.css from the YUI Library: developer.yahoo.com/yui/ Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages There are three custom edits: * remove arial, helvetica from explicit font stack * make the line-height relative and unit-less * remove the pre, code styles */ body { font:13px Tahoma, Geneva, sans-serif; *font-size:small; *font:x-small; line-height:1.22; } table { font-size:inherit; font:100%; } select, input, textarea { font:99% sans-serif; } /* normalize monospace sizing * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* * minimal base styles */ /* #333 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ body, select, input, textarea { color:#333; } /* Headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */ /* www.aestheticallyloyal.com/public/optimize-legibility/ */ h1,h2,h3,h4,h5,h6 { font-weight: normal; text-rendering: optimizeLegibility; } /* maxvoltar.com/archive/-webkit-font-smoothing */ html { -webkit-font-smoothing: antialiased; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; } a, a:active, a:link{ color:#06f; } a:visited { color:#800080;} a:hover, a:focus { color:#C36100; } ul { margin-left:30px; } ol { margin-left:30px; list-style-type: decimal; } small { font-size:85%; } strong, th { font-weight: bold; } td, td img { vertical-align:top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } /* These selection declarations have to be separate. No text-shadow: twitter.com/miketaylr/status/12228805301 Also: hot pink. */ ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } ::selection { background:#FF5E99; color:#fff; text-shadow: none; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: #FF5E99; } /* always force a scrollbar in non-IE */ html { overflow-y: scroll; } /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible; } /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* * Non-semantic helper classes */ /* for image replacement */ .ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display:none; visibility:hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */ .visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* >> The Magnificent CLEARFIX << */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } /* Hides from IE-mac \*/ .clearfix { display: block; } .float-right{display:block; float:right;} .float-left{display:block; float:left;} /*960 Grid to control layout */ body{min-width:960px}.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12,.push_13,.pull_13,.push_14,.pull_14,.push_15,.pull_15{position:relative}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1} /* Primary Styles Author: Andrew Fleming - Department of Climate Change and Energy Efficiency */ p{padding:0.5em 0;} ul{padding: 0 0 0.5em 0;} li{padding: .25em 0;} h1{color: #036; font-size:2em; padding:0em 0 0.5em;} h2{color: #036; font-size:1.8em; padding:0.65em 0 0.5em;} h3{color: #036; font-size:1.6em; padding:0.5em 0;} h4{font-size:1.4em; padding:0.5em 0} h5{font-size:1.2em; padding:0.5em 0;} h6{} table{border:1px solid #88c3ff; margin:1em 0; text-align:left;} caption{font-weight: bold; color:#036; margin:0 0 0.2em 0;} th{background:none no-repeat #BBDDFF; border-right:1px solid #cce5ff; border-bottom:1px solid #cce5ff; color:#003366;} th, td{padding:0.5em 1em;} td{ border-right:1px dotted #dcdcdc; border-bottom:1px dotted #dcdcdc;} tfoot{background-color:#ececec;} blockquote{padding:1em 2em;} #container{padding-top:10px; -moz-box-shadow: 0px 0px 8px #dcdcdc; -webkit-box-shadow: 0px 0px 8px #dcdcdc; box-shadow: 0px 0px 8px #dcdcdc; border-right: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; } header img{padding:10px;} a#logo{background:url(../img/sprite-garnaut-logo-update-2011.png) no-repeat 0 0; width:154px; height:110px; display:block;} a#logo:hover, a#logo:focus, a#hover:active{background-position:0 -143px;} header div.banner{background:url(../img/banner-bg.jpg) no-repeat top right; position:relative;} div.banner span{font-size:2.25em; position: absolute; top:40%; left:-1.5em; background-color:rgba(255, 255, 255, 0.6); padding:0.2em 0.5em 0.2em 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-color:transparent; background-color: rgba(255, 255, 255, 0.6); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99ffffff',EndColorStr='#99ffffff'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99ffffff',EndColorStr='#99ffffff')"; } header div{height:130px;} header form{text-align:right;} nav ul{border-top:1px solid #ccc; margin-left:0; margin:10px 0;} nav ul li{border-bottom:1px solid #ccc; padding:0;} nav a, nav a:visited, nav a:hover, nav a:link{color:#333; text-decoration:none; padding:8px 10px 8px 13px; background:url(../img/nav-arrow-bullet.gif) no-repeat 0 1em; display:block;} nav a:hover{background-color:#e5f5f9;} #reviews{margin-top: 4em;} #reviews a{border-top:1px solid #ccc;} nav ul ul{border-top:none; margin:0 0 0 1em; padding-bottom:0;} nav li ul li{border-bottom:none;} nav ul .parent li a{background-image:url(../img/nav-level-2-arrow-bullet.gif);} #reviews strong{ display:block; padding:13px 0 0 13px; } header section{background:url(../img/section-bg.JPG) no-repeat top left #036; padding:10px 0; margin:10px 0 20px;} header section h1{color:#fff; padding-left:10px; padding-top:10px; font-weight:normal;} header form{padding-top:1.25em;} header input[type="submit"]{margin-right:10px;} a[href^="http"]{background:url(../img/ico-external.gif) no-repeat top right; padding-right:12px;} a[href$=".pdf"]{background:url(../img/ico-pdf.gif) no-repeat top right; padding-right:15px;} a[href$=".mp3"]{background:url(../img/icon-headphones.png) no-repeat top right; padding-right:21px;} a[href^="mailto"]{background:url(../img/icon-email.png) no-repeat top right; padding-right:21px;} .action-wrapper a[href^="mailto"]{padding-right: 5px; background-image: -moz-linear-gradient(top, #0055aa, #004488); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0055aa),color-stop(1, #004488)); background:none no-repeat #048; } /* Icon breaks in IE when link breaks over two lines. This forces link not to break across two lines */ .ie6 a[href$=".pdf"], .ie7 a[href$=".pdf"], .ie8 a[href$=".pdf"], .ie9 a[href$=".pdf"], .ie6 a[href^="http"], .ie7 a[href^="http"], .ie8 a[href^="http"], .ie9 a[href^="http"], .ie6 a[href$=".mp3"], .ie7 a[href$=".mp3"], .ie8 a[href$=".mp3"], .ie9 a[href$=".mp3"] .ie6 a[href^="mailto"], .ie7 a[href^="mailto"], .ie8 a[href^="mailto"], .ie9 a[href^="mailto"] {display:inline-block;} a.visuallyhidden:focus, a.visuallyhidden:active{clip:rect(auto, auto, auto, auto);} #main img{position:relative; z-index:10; padding:10px; background:#fff; border:1px solid #dcdcdc;} #main img.math{padding:0; border:none; vertical-align:bottom;} figure{background-color:#fefefe; padding:1.5em 0.5em; border: 1px solid #dcdcdc; margin:2em 0;} #main figure img{padding:0; border:none; margin:0; display:block; margin:0 auto; max-width:100%;} figure h1, #main section figure h1{font-size:1.1em; text-align:center; padding:0 0 1em; background-color:transparent; margin:none;} figure h2{font-size:1em; text-align:center;} figcaption{font-style:italic; padding:1em 0 0;} figure cite{font-size:0.8em;} dl.index{padding-left:2em;} dl.index dt:first-child{border-top:none; margin-top:0; padding-top:0;} .index dt{font-size:1.3em; color:#036; margin:1.183em 0 0.75em; padding:0.5em 0 0; border-top:1px solid #dcdcdc;} .index dt a:hover{text-decoration:underline;} .index dd{margin:1em 0;} .index dt a{text-decoration:none; color:#036;} .index dd:last-child{margin-bottom:1.5em;} ol.index{margin-bottom:1em;} ol.index li{margin:0.5em 0;} .index span.meta{display:block; float:right;padding-top:2px;} /*.meta{color:#555; display:inline; font-size:0.8em; margin-top:0;}*/ .meta{color:#555; margin-top:0;} .calendar{ background:url(../img/icon-calendar.png) no-repeat 0 0; padding-left:25px;} #profile-pic{float:left; margin:1.5em 1.5em 1.5em 0;} .call-to-action{background:none no-repeat #ff7029; border:1px solid #e56525; padding:10px; color:#fff; text-decoration:none; /*background-image: -moz-linear-gradient(top, #f55, #ff0000); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f55),color-stop(1, #ff0000));*/ background-image: -moz-linear-gradient(top, #ff7029, #e65005); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff7029),color-stop(1, #e65005)); background-image: -webkit-linear-gradient(#ff7029, #e65005); background-image: linear-gradient(top, #ff7029, #e65005); } a.call-to-action, a.promo{color:#fff;} aside .call-to-action{display:block; margin:0 0 30px; text-align:center;} .call-to-action:hover, .call-to-action:active, .call-to-action:focus{ text-decoration:underline; background-image: -moz-linear-gradient(top, #e65005, #ff7029); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e65005),color-stop(1, #ff7029)); background-image: -webkit-linear-gradient(#e65005, #ff7029); background-image: linear-gradient(top, #e65005, #ff7029); } .call-to-action, .action, .promo{-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .action, a[href^="http"].action{padding:5px; background:none no-repeat #048; border:1px solid #036; color:#fff; text-decoration:none; background-image: -moz-linear-gradient(top, #0055aa, #004488); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0055aa),color-stop(1, #004488)); } .ie6 a.action{background-color:#048; padding:5px; border:1px solid #036;} a.action:link, a.action:visited{color:#fff;} a.action:hover, a.action:active, a.action:focus{text-decoration:underline; background-image: -moz-linear-gradient(top, #048, #05a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #048),color-stop(1, #05a)); } input[type="submit"].action:hover, input[type="submit"].action:active, input[type="submit"].action:focus{text-decoration:underline;} .action-wrapper, .index .action-wrapper{margin:1em 0 2em;} aside h1{font-size:1.2em; font-weight:bold;} aside ul{margin:0 10px 0 13px; list-style:none;} aside li{list-style-image:url(../img/nav-arrow-bullet.gif);} .promo{ display:block; padding:10px; background-color: #27a0c4; background-image: -moz-linear-gradient(top, #2ebde8, #27a0c4); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2ebde8),color-stop(1, #27a0c4)); /* Saf4+, Chrome */ background-image: linear-gradient(top, #2ebde8, #27a0c4); border:1px solid #007ca3; text-decoration:none; } .promo span{ padding-top:48px; display:block; background:url(../img/promo-play.png) no-repeat scroll center 8px; } #main section{padding:10px 20px; background-color:#def; border:1px solid #88C3FF; margin:1.5em 0;} #main section h1{background-color:#bdf; font-size:1em; font-weight:bold; padding:10px 20px; margin:-10px -20px 0 -20px;} #main section figure h1{margin: 0;} #main section h2{font-size:1.2em;} #transcript{margin-top:1em;} #transcript blockquote{padding:0;} #transcript cite{padding-top:0.5em;} .ie7 #slider{width:100%; overflow:hidden;} #slider ul{margin:0; padding:0; list-style:none;} ol.alpha-list{list-style-type:lower-alpha;} .audio-player{display:inline-block;} #twtr-widget-1 a{background:none; padding:0;} footer{background:none repeat scroll 0 0 #D9EDF7; margin:10px; padding:7px 0;} footer ul{margin-left:0; padding:0;} footer li{list-style-type:none; display:inline;} footer li a{border-right:1px solid #333; color:#333; padding:0 5px;} footer li:last-child a{border:none;} #mc_embed_signup form{border:1px solid #dcdcdc; padding:0 2em 2em;} #mc_embed_signup .indicate-required{text-align:right;} #mc_embed_signup .note-required{color:#f00;} #mc_embed_signup .mc-field-group{position:relative;} #mc_embed_signup label{display:block;} #mc_embed_signup input[type="email"], #mc_embed_signup input[type="text"]{font-size: 2em;} #mc_embed_signup input[type="submit"]{font-size:1.5em;} #mc_embed_signup div{padding:0.5em 0;} #mc_embed_signup div.mce_inline_error{position:absolute; left:23em; top:2em; color:#f00;} #mce-success-response{color:#f00;} :invalid{background: url(../img/icon-error.gif) no-repeat 95% 50%;} #twitter_alert {margin-bottom:40px} #twitter_alert h3 {font-size:13px; margin-bottom:0; color:#000; background: url("../img/alert_24.png"); background-repeat:no-repeat; padding-left:26px } #twitter_alert p {font-size:11px; margin-top:-10px} /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: #333 !important; text-shadow: none; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } nav ul, aside *, footer ul, header section h1, form, .call-to-action { display: none !important; } a img:after {content: "" !important;} } /* * Media queries for responsive design */ @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } /* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) { /* Prevent iOS, WinMobile from adjusting font size */ html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } }