/* Theme Name: Big Blank Responsive Theme Theme URI: http://bigemployee.com/projects/big-blank-responsive-wordpress-theme/ Description: A responsive blank theme based on WordPress Twenty Eleven. A semantic HTML5 code with very minimal css styling. This is not a naked or barebone theme, but a clean starting block for more complex theme development. Author: Arian Khosravi, Norik Davtian Author URI: http://bigemployee.com Version: 1.0 Tags: flexible-width, custom-menu, microformats, sticky-post, theme-options, translation-ready, one-column, two-columns, right-sidebar, left-sidebar, light, white License: GPL3 License URI: http://www.gnu.org/licenses/gpl.html */ /* Reset based on HTML5 Boilerplate -IE7 hacks ============================================================================ */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block;} audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: Cambria, Georgia, Times, serif; color: #222; } body { margin: 0; font-size: 15px; line-height: 1.5;} ::-moz-selection { background: #ffe26e; color: #000; text-shadow: none; } ::selection { background: #ffe26e; color: #000; text-shadow: none; } a {color: #b00;} a:visited { color: #700; } a:hover { color: #ed1c24;} a:focus { outline: none; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } /*blockquote { margin: 1em 20px; }*/ dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { font-style: italic; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 0; padding: 0; } dd { margin: 0; } nav ul, nav ol { list-style: none; list-style-image: none;} img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline;} button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button;} button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0;} input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } /*input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; }*/ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* Fonts ============================================================================ */ @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 400; src: local('Droid Serif'), local('DroidSerif'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } /* Main Skeleton ============================================================================ */ html{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; } body{ margin: 0 auto; width: 100%; max-width: 960px; height: 100%; } /* Headings & Paragraphs ============================================================================ */ h1,h2,h3,h4,h5, h6{ text-align: left; margin: 5px 0 0; font-family: 'Droid Serif', Helvetica, Arial, Tahoma, serif; font-smooth:always; -webkit-font-smoothing:antialiased; } h1{ font-weight: normal; font-size: 2.4em; } h2{ font-weight: normal; font-size: 1.9em; } h3{ font-size: 1.5em; } h4{ font-size: 1.4em; } h5, h6{ font-size: 1.2em; } p{ font-size: 1.2em; text-shadow: none; margin: 0 0 10px; } /* Form Styles ============================================================================ */ form li{ list-style: none;} input[type="text"],input[type="email"],input[type="tel"], input[type="url"], select, textarea{ margin-bottom: 5px; padding: 2px 5px; height: 30px; color: #666; border: 1px solid #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus { outline: none; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(236, 212, 82, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(236, 212, 82, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(236, 212, 82, 0.6); } textarea{ height: 200px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } label{ display: block; } .placeholder{ color: #aaa; } input[type="submit"], .button, .button:link, .button:visited{ text-decoration: none; padding: 7px 20px; background: #ffd46e; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffd46e), color-stop(1, #ffee9c)); background: -moz-linear-gradient(center bottom, #ffd46e 0%, #ffee9c 100%); background: -ms-linear-gradient(top, #ffee9c, #ffd46e); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffee9c', EndColorStr='#ffd46e'); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0 none; border-bottom: solid 1px #f5e383; -webkit-box-shadow: #be9144 0 2px 0; -moz-box-shadow: #be9144 0 2px 0; box-shadow: #be9144 0 2px 0; text-shadow: #fff0ac 0 1px 0; font-size: 1.2em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #333; } input[type="submit"]:hover, .button:hover { background: #fffda5; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fae67f), color-stop(1, #fdffba)); background: -moz-linear-gradient(center bottom, #fae67f 0%, #fdffba 100%); background: -ms-linear-gradient(top, #fdffba,#fae67f); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fdffba', EndColorStr='#fae67f'); border-bottom: solid 1px #fff9b6; -webkit-box-shadow: #dcb759 0 2px 0; -moz-box-shadow: #dcb759 0 2px 0; box-shadow: #dcb759 0 2px 0; } input[type="submit"]:active, .button:active { position: relative; top: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); } #main .button-full{ float: left; width: 96%; padding: 10px 2%; text-align: center; margin: 10px 0; } #main .button-small{ width: 100px; } #main .button-medium{ width: 170px; } #main .button-big{ width: 260px; } .error{ border: 1px solid #c00 !important; background: #ffd !important; } .required{} /* Header ============================================================================ */ #header{ float: left; width: 100%; clear: both; margin: 10px 0; border-bottom: 1px dotted #ccc; text-align: center; } #logo { float: left; position: relative; margin: 15px 0 15px 15px; z-index: 100; } #site-title{ margin: 0 auto; font: normal 4em/1.2 Georgia, Times, serif; text-decoration: none; clear: both; color: #800; } #site-description{ float: left; width: 100%; font: normal 2em/1 Georgia, Times, serif; clear: both; } /* Main Menu ============================================================================ */ #nav{ float: left; width: 100%; clear: both; margin:15px auto; font-size: 1.2em; line-height: 2.2em; text-align: center; position: relative; } #nav ul{ float: left; margin: 0 auto; text-align: left; list-style: none; position: relative; left: 50%; z-index: 5; } #nav li{ margin: 5px; float: left; position: relative; right: 50%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #nav li a, #nav li a:visited{ padding: 0 12px; text-decoration: none; color: #b00; } #nav li a:hover{} #nav li:hover{ background: rgba(238,238,238,0.9); -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } #nav li:hover a{} #nav li ul{ display: none; position: absolute; left: 0; z-index: 10; -webkit-border-radius: 3px; -webkit-border-top-left-radius: 0; -moz-border-radius: 3px; -moz-border-radius-topleft: 0; border-radius: 3px; border-top-left-radius: 0; } #nav li:hover ul{ display: block; background: rgba(238,238,238,0.9); } #nav li li{ right: 0; margin: 0; padding: 0; min-width: 150px; } #nav li li a, #nav li li a:visited{ float: left; width: 100%; padding: 0 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -box-sizing: border-box; } #nav li li a:hover{ color: #fff; background: rgba(204,0,0,1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #nav .current-menu-item, #nav .current-menu-parent{ background: rgba(230,230,230,1); } /* Content Wrapper ============================================================================ */ .content-wrap{ position:relative; clear:both; float:left; width:100%; } /* General Column Settings ============================================================================ */ #main{ width: 75%; /* lower this value if you would like some kind of margin between the sidebar and content */ } #sidebar{ width: 25%; } #sidebar li{ list-style: none; } #main article, #sidebar .widget{ padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 2 Column content=sidebar ============================================================================ */ .content-sidebar{} .content-sidebar #main{ float: left; } .content-sidebar #sidebar{ float: right; } /* 2 Column sidebar-content ============================================================================ */ .sidebar-content{} .sidebar-content #main{ float: right; } .sidebar-content #sidebar{ float: left; } /* fullpage ============================================================================ */ .content, .content #main{ float: left; width: 100%; } /* Main Content ============================================================================ */ #main h1, #main h1 a, #main h1 a:hover{ display: block; text-decoration: none; /*margin: 0 0 5px;*/ /* uncomment this line if you would like to flush the heading to the top; */ line-height: 1.1; } #main ul, #main ol{ list-style-position: inside; } #main header{ float: left; width: 100%; padding: 0; margin: 0; } /* Blog ============================================================================ */ .attachment-post-thumbnail, .wp-post-image, img.size-full, img.size-large { max-width: 100%; height: auto; } blockquote { display: block; margin: 10px 5px 10px 10px; background: #f9f9f9; color: #777; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } blockquote p{ margin: 5px; text-indent: 10px; text-align: justify; font-family: Georgia, Times, serif; font-style: italic; padding: 15px 10px 5px; } blockquote:before{ content: "“ "; float: left; font: bold 3.6em/0.9 Georgia, Times, serif; color: #ccc; height: 20px; width: 20px; text-indent: 0; margin: 10px 0 0 10px; } blockquote cite{ font-size: inherit; font-weight: normal; font-style: italic; margin: 0; padding: 0; } table{ margin-bottom: 10px; } td, th{ padding: 2px 8px; border: 1px solid #999; } th{ background: #f9f9f9; } article ul, article ol{ margin-left: 15px; } dl{ float: left; clear: both; } dt{ float: left; min-width: 150px; font-weight: bold; margin-bottom: 10px; clear: left; } dd{ border-left: 1px solid #000; padding: 0 0 5px 10px; margin: 0 0 10px 150px; } pre, address{ float: left; width: 100%; padding: 5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #efefef; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } pre, code{ background-color: #555; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } code{ padding: 0 3px; } .post{ float: left; width: 100%; margin-bottom: 40px; text-align: justify; } .post-body{ float: left; width: 100%; padding-top: 10px; } article.page a:hover, article.post a:hover{} .post h1 a:hover{} /*.post h1 a:hover:after{ content: " »"; color: #ed1c24; }*/ .sticky{ background: #e4f5ff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .meta, .tags{ font-size: 85%; float: left; width: 100%; clear: both; } .page-link{ float: left; width: 100%; margin: 10px 0; clear: both; } .page-link span{ padding: 0 15px; font-weight: bold; color: #333; background-color: #ffee99; border: 1px solid #dfdfdf; box-shadow: 0 1px 1px rgba(0,0,0,0.2); } .page-link a span{ background-color: #efefef; } .page-link a{ text-decoration: none; background-color: #efefef; color: #333; } .page-link a:hover{ color: #700; background: #fefefe; } dl.gallery-item{ float: left; margin: 0; clear: none; width: 33%; text-align: center; } .gallery-item dt { float: none; margin: 0 auto; min-width: 0; font-weight: normal; clear: both; } .gallery-item dt img{ border: 1px solid #000; } .gallery-item dd{ float: left; width: 100%; text-align: center; clear: both; border: 0 none; padding: 0; margin: 0; } /* Images */ .entry-content img, .comment-content img, .widget img { max-width: 100%; /* Fluid images for posts, comments, and widgets */ } img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* Alignment */ img.alignleft{ margin: 0.4em 1.0em 0.6em 0; } img.alignright{ margin: 0.4em 0 0.6em 1.0em; } img.aligncenter{ margin: 0.4em auto 0.6em; } img.alignnone{ margin: 0.4em 0 0.6em; } p img{ margin-top: 0.4em; } img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .wp-caption { background: #f1f1f1; margin: 0.4em 1.0em 0.6em; max-width: 96%; padding: 10px 5px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wp-caption img { display: block; margin: 0 auto; max-width: 98%; } .wp-caption .wp-caption-text, .gallery-caption { color: #666; font-family: Georgia, serif; font-size: 12px; } .wp-caption .wp-caption-text { margin-bottom: 5px; margin: 10px; position: relative; } #content .gallery{ margin: 0 auto 1.625em; } #content .gallery a img { border: none; } #content .gallery-columns-4 .gallery-item { width: 23%; padding-right: 2%; } #content .gallery-columns-4 .gallery-item img { width: 100%; height: auto; } /* Image borders */ img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {/* Add border radius to all WordPress-added images but not things like badges and icons and the like */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wp-caption img{ border-color: #eee; } a:focus img[class*="align"], a:hover img[class*="align"], a:active img[class*="align"], a:focus img[class*="wp-image-"], a:hover img[class*="wp-image-"], a:active img[class*="wp-image-"], #content .gallery .gallery-icon a:focus img, #content .gallery .gallery-icon a:hover img, #content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images ... */ background: #eee; border-color: #bbb; } .wp-caption a:focus img, .wp-caption a:active img, .wp-caption a:hover img {/* ... including captioned images! */ background: #fff; border-color: #ddd; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } .prev-next-links, .prev-next-links ul, #comment-nav, #nav-below{ float: left; width: 100%; clear: both; margin: 0; padding: 0; } #comment-nav a, #nav-below a{ margin-left: 20px; } #comment-nav li:first-child, .prev-next-links li:first-child{ float: left; } #comment-nav li:last-child, .prev-next-links li:last-child{ float: right; } /* Comments */ #commentlist{ float: left; width: 100%; margin: 0 0 20px; } #commentlist li, #commentform li{ list-style: none; } #commentlist ul, #commentlist ol{ margin-left: 25px; } #commentlist .comment_content ul li, #commentlist .comment_content ol li{ list-style-type: inherit; } #commentlist .avatar{ background-color: #fff; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } #commentlist cite{ margin: 0 10px; font: 700 1.6em/1.8 Cambria, Georgia, Times, serif; color: #333; } #commentlist cite a{ color: #333; text-decoration: none; } #commentlist cite a:hover{ color: #b40000; background: none; } #commentlist time{ font: 300 1em/1.8 Cambria, Georgia, Times, serif; } #commentlist time a{ color: #999; text-decoration: none; } #commentlist time a:hover{ color: #999; background: none; } #commentlist .comment-reply-link, #commentlist .comment-reply-login{ float: right; margin-top: -35px; padding: 5px 10px; background: #f4f4f4; color: #999; display: none; } #commentlist .comment-reply-link:hover, #commentlist .comment-reply-logino:hover{ color: #333; } #commentlist article:hover > .comment-reply-link, #commentlist article:hover > .comment-reply-login{ display: block; } #commentlist .trackback, #commentlist .pingback, #commentlist .comment{ float: left; clear: both; margin-top: 50px; width: 100%; } #commentlist .trackback cite, #commentlist .pingback cite{ font-size: 1.1em; margin: 0; text-decoration: underline; font-weight: normal; } #commentlist .comment-author{ margin-top: -35px; } #commentlist .comment_content{ float: none; background-color: #f4f4f4; padding: 20px 15px 15px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #commentlist .comment_content:after { content: ""; display: block; clear: both; } #commentlist .moderation{ background-color: #cff0ff; color: #069; margin-top: -15px; padding: 5px 0 10px; text-align: center; border-radius: 5px; } #commentlist blockquote { display: block; margin: 10px 5px 0 10px; padding-bottom: 10px; background: #f9f9f9; color: #777; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #commentlist blockquote p{ margin: 5px; text-indent: 10px; text-align: justify; font-family: Georgia, Times, serif; font-style: italic; padding: 15px 10px 5px; } #commentlist blockquote:before{ content: "“ "; float: left; font: bold 3.6em/0.9 Georgia, Times, serif; color: #ccc; height: 20px; width: 20px; text-indent: 0; margin: 10px 0 0 10px; } #commentlist blockquote > p:first-child:before, #commentlist blockquote > p:last-child:before { content: ""; height: 0; width: 0; text-indent: 0; margin: 0; } #commentlist .comment_content cite, #commentlist .comment_content blockquote cite{ font-size: inherit; font-weight: normal; font-style: italic; margin: 0; padding: 0; } #commentlist blockquote cite i{ font-size: 80%; color: #999; } #commentlist .bypostauthor .comment_content{ background: #e4f5ff; } #allowed_tags{ font-size: 80%; } #allowed_tags code{ color: #333; background: none; } #commentform{ margin: 5px; } #commentform ul{ margin: 0; } #commentform input{ width: 45%; } #commentform textarea{ margin: 5px 0; padding: 7px 5px; } #commentform .button{ width: auto; } /* Footer ============================================================================ */ #footer{ float: left; width: 100%; margin: 30px 0 0 0; } #footer a, #footer a:visited{ color: #333; text-decoration: underline; } #footer a:hover, #footer a:focus{ color: #ed1c24; } #footer-nav{ float: left; clear: both; margin: 0 15px 5px 5px; font-size: 1.0em; line-height: 2em; } #footer-nav ul{ float: left; list-style: none; } #footer-nav li{ float: left; margin: 5px 10px 5px 0; } #footer-nav a{ padding: 5px; } #footer-nav a:hover{} #copyright{ float: right; font:normal .8em/.8 Georgia, Times, serif; margin: 0 5px 20px 0; text-align: right; } /* Multi Purpose Styles ============================================================================ */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr;} .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .aligncenter { display:block; margin:0 auto } .left {float:left; } .right {float:right; } .block { float: left; width: 100%; clear: both;} .alignleft { display: inline; float: left; margin-left: 0; } .alignright { display: inline; float: right; margin-right: 0; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .alignnone{ margin-left: 0; margin-right: 0; } .no-border{ border: 0 none !important;} .no-shadow{ -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important;} /* Devicification ============================================================================ */ @media only screen and (max-width : 768px) { #main{ width: 100%; } #sidebar{ width: 100%; } #sidebar .widget{ float: left; width: 50%; min-width: 250px; } } @media only screen and (max-width : 640px){ h1{ font-weight: bold; font-size: 2.0em; } h2{ font-weight: bold; font-size: 1.65em; } h3{ font-size: 1.35em; } h4{ font-size: 1.2em; } h5, h6, p{ font-size: 1.1em; } #site-title{ font-size: 3.6em; } #site-description{ font-size: 1.7em; } #nav{ font-size: 1.1em; } #footer-nav{ width: 90%; margin: 0 5%; } #footer-nav ul{ width: 100%; background: #f1f1f1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -box-sizing: border-box; text-align: center; border: 1px solid #ccc; } #footer-nav li{ float: left; margin: 0; width: 100%; clear: both; border-top: 1px dotted #ccc; } #footer-nav li:first-child{ border: 0 none; } #footer-nav a{ float: left; width: 100%; padding: 10px 0; text-decoration: none; } #copyright{ width: 100%; clear: both; margin: 20px auto; text-align: center; } } @media only screen and (max-width : 480px){ html{ min-width: 320px; } h1{ font-size: 1.65em; } h2{ font-weight: bold; font-size: 1.4em; } h3{ font-size: 1.2em; } h4{ font-size: 1.1em; } h5, h6, p{ font-size: 1.0em; } #site-title{ font-size: 3.0em; } #site-description{ font-size: 1.4em; } #nav{ font-size: 1.0em; } #sidebar .widget{ float: none; display: block; margin-left: auto; margin-right: auto; min-width: 250px; } } /* Print Styles ============================================================================ */ @media print { * {background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited {text-decoration: underline;} a[href]:after {content: " (" attr(href) ")";} header a[href]:after, footer a[href]:after { content: "";} abbr[title]:after {content: " (" attr(title) ")";} .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;} tr, img {page-break-inside: avoid;} img {max-width: 100% !important;} @page {margin: 0.5cm;} h1, h2, h3, h4, h5 {font-family: Georgia, 'Times New Roman', Times, serif;} p, h2, h3 {orphans: 3; widows: 3;} h2, h3 {page-break-after: avoid;} .link-print, .button-close{ display: none;} #header{ float: left; width: 100%; clear: both; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-bottom: 1px dashed #000; margin: 0.25cm; } #nav, nav, #sidebar, .sidebar, .pagination-links{display: none;} #main{margin:0; width: 100%;} #footer{text-align: center; border-top: 1px dashed #000;} #logo, #footer a{text-decoration: none;} #footer a[href]:after {content: "";} } /* Stylish Debug ============================================================================ */ .debug{ border:1px solid red; } /*.content-wrap{ background: yellowgreen; } #main{ background: yellow; } #sidebar{ background: lightblue; } #sidebar .widget{ background: lightcyan; } article{ background: pink; } .content, .content #main{ background: lightsalmon; }*/ /* Transofrm with small touches ============================================================================ */ html{ background: url(images/bg_paper.png) repeat 0 0; } #header{ border: 0 none; } #nav{ margin: 15px auto 0; } .content-wrap{ background: #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding: 20px 0 30px; } #main article, #sidebar .widget{ padding: 0 25px; } #nav > ul > li:hover{ background: rgba(250,250,250,1); box-shadow: 0 1px 2px rgba(0,0,0,0.4); } #nav > ul > li:focus{ } #nav li:hover ul{ background: rgba(250,250,250,1); box-shadow: 0 2px 2px rgba(0,0,0,0.4); }