/* Theme Name: canvas Description: Canvas wordpress theme designed to enable the manufacture of child theme. If you are looking for a theme that is simple, clean and minimalist canvas is a real theme to it. Very minimal but it has many functions. Theme URI: Author: Hendro Prayitno Author URI: http://amdhas.com Version: 1.0.3 License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: white, light, gray, two-columns */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, meter, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight: normal; vertical-align:baseline; background:transparent; } /* Global tag ------------------------------ */ body { max-width:1140px; margin:0 auto; word-wrap:break-word; } a { text-decoration:none; outline: none; color: #21799b; } a:hover { text-decoration:underline; color: #047; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } p{ font-family:"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; line-height:1.4em; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h4 { font-size: 1em; } h5 { font-size: 0.83em; } h6 { font-size: 0.75em; } h1, h2, h3, h4, h5, h6 { font-weight:bold } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote{ font-family: Georgia, "Bitstream Charter", serif; font-style: italic; font-weight: normal; margin: 2em 2.2em; line-height:1.4em; } blockquote cite { color: #666; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; } blockquote:before, q:before { content:'"'; font-size:4em; margin-right:5px; float:left; text-align:right; } blockquote, q { quotes: "" ""; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } p, pre { margin: 1em 0; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { background: #f4f4f4; font: 13px "Courier 10 Pitch", Courier, monospace; line-height: 1.5; margin-bottom: 1.625em; overflow: auto; padding: 0.75em 1.625em; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ''; content: none; } small { font-size: 75%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } dl, menu, ol, ul { margin: 12px 0; } dd { line-height: 1.714285714; margin: 0 0 0 40px; } dl{ margin: 0 24px; } dt{ font-weight: bold; line-height: 1.714285714; } menu, ol, ul { padding: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; } img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } 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; } input[type="password"], select, input[type="text"], textarea{ padding:5px 5px 6px; background:#ffffff !important; border:1px solid #eeeeee;} input[type="submit"],a.button,a:visited.button,a:link.button{ font-weight:bold; padding:5px; text-decoration:none; } input[type="submit"]:hover,a:hover.button{ font-weight:bold; padding:5px; text-decoration:none;} textarea { height:auto; overflow:auto; margin:0; outline:none; padding:8px 10px; width:90%; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; border-bottom: 1px solid #ededed; color: #777; font-size: 12px; line-height: 2; margin: 0 0 24px; width: 100%; } th { border: 1px solid #ccc; border-bottom: 1px solid #ccc; } td { padding-left:15px; vertical-align:top; border: 1px solid #ccc; } img, embed, iframe, object, video { max-width: 100%; } /* Fotter credit and clearing float ------------------------------------- */ .credit{ border-top:1px solid #eee; padding-left:15px; font-size:14px; *padding-bottom:10px;} .clear { clear:both; display:block; overflow:hidden; margin-bottom:20px; } .clearfix { clear:both; display:block; overflow:hidden; } .centering{ text-align:center; margin:0 auto; } .eror404{ width:68%; } /* Title ------------------------------ */ .site-title{font-family:Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif; font-size:2.7em;font-weight:bold;} .entry-title{ font-size:1.98888em; font-family:Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif; line-height:1.2em; padding-top:8px; } #masthead{ border-bottom:2px solid #eee; padding-top:15px; padding-bottom:15px; } .site-description{ font-size:1.1em; font-weight:normal; line-height:1; } /* Navigation ------------------------------ */ #nav-primary { border-bottom:1px solid #eee; margin:0 auto; } #nav-primary, #nav-primary ul { display:block; list-style-type:none; margin:0; padding:0; } #nav-primary li { border:0; display:block; float:left; margin:0; padding:0; position:relative; z-index:5; } #nav-primary li:hover { white-space:normal; z-index:999; } #nav-primary li li { float:none; } #nav-primary ul { left:0; position:absolute; top:0; visibility:hidden; z-index:10; } #nav-primary li:hover > ul { top:100%; visibility:visible; } #nav-primary li li:hover > ul { left:100%; top:0; } #nav-primary:after, #nav-primary ul:after { clear:both; content:"."; display:block; height:0; overflow:hidden; visibility:hidden; } #nav-primary, #nav-primary ul { min-height:0; } #nav-primary ul { margin:-10px 0 0 -30px; padding:10px 30px 30px; } #nav-primary ul ul { margin:-30px 0 0 -10px; padding:30px 30px 30px 10px; } #nav-primary ul li a:hover, #nav-primary li li a:hover { color:#222222; text-decoration:none; } #nav-primary ul { width:auto; } #nav-primary a { font-family:Lucida sans unicode; *float:left; *border-left:1px solid #eee; border-left:1px solid #eee; display:block; font-size:14px; height:50px; color:#444; line-height:50px; margin:0; padding:0 0.9em; position:relative; text-decoration:none; } #nav-primary a:hover, #nav-primary .current_page_item a { background-color:#f1f1f1; color:#222222; } #nav-primary li li { background:#fff; background-image:none; border:1px solid #b2b2b2; border-top:none; color:#444; filter:none; width:auto; } #nav-primary li li a { background:transparent !important; border:none; color:#444; font-size:12px; font-weight:400; height:auto; height:20px; line-height:20px; padding:5px 10px; text-shadow:none; white-space:nowrap; } #nav-primary li li a:hover { background:#f5f5f5 !important; background-image:none; border:none; color:#444; filter:none; } #nav-primary ul > li + li { border-top:0; } #nav-primary li li:hover > ul { left:100%; top:0; } #nav-primary > li:first-child > a { border-left:none; } #nav-primary > li:first-child > a, #nav-primary li + li + li li:first-child > a { } /* sidebar data */ .sidebar{ background:#f9f9f9; padding:15px; margin-bottom:15px;} .sidebar ul, .sidebar ol{ padding-left:13px;} .sidebar li{ margin-bottom:5px; font-size:12px;} .sidebar select{ width:100%; margin-top:10px; } .entry-meta{clear: both;} footer.entry-meta { margin-top: 24px; font-size: 13px; line-height: 1.846153846; color: #777; background:#f5f5f5; padding:6px; border:1px solid #eee; } .breadcrumb {margin:0; font-size:13px; background:#f1f1f1; color:; padding:5px; } /* ============================================================== Simple grid responsive css 12 coloumn by Hendro Prayitno = me ================================================================= */ .row { width: 100%; margin: 0 auto; } .one { width:6.25%; } .two { width:14.583333333333334%; } .thre { width:22.916666666666664%; } .four { width:31.25%; } .five { width:39.58333333333333%; } .six { width:47.91666666666667%; } .seven { width:56.25%; } .eight { width:64.58333333333334%; } .nine { width:72.91666666666666%; } .ten { width:81.25%; } .eleven { width:89.58333333333334%; } .tweleve { width:97.91666666666666%; } .one, .two, .thre, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve { display:inline; float:left; margin:0 1.0416666666666665%; } /* ================================================= Standarts with wordpress tag ================================================= */ .sticky{ background:#f0f0f0; padding:15px; margin-top:22px; margin-bottom:15px; border:3px solid #999;} .sticky:before{ content:"Featured"; position:relative; font-size:1.2em; float:right;top:-23px; right:-23px; background:#123; padding:8px;color:#fff;} /* Author profiles */ .author .archive-header { margin-bottom: 24px; } .author-info { border-top: 1px solid #ededed; margin: 24px 0; padding-top: 24px; overflow: hidden; } .author-description p { color: #777; font-size: 13px; line-height: 1.846153846; } .author.archive .author-info { border-top: 0; margin: 0 0 48px; } .author.archive .author-avatar { margin-top: 0; } .widget img { max-width: 100%; } img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; } img.size-full, img.size-large, img.header-image, img.wp-post-image, { max-width: 100%; height: auto; } .widget img, img.header-image, .author-avatar img, img.wp-post-image { border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .wp-post-image { padding: 5px; } img.thumbnail{ margin-right:15px; margin-top:24px; } dl.gallery-item { margin: 0; } .wp-caption {margin-top: 0.4em; background: #eee; margin-bottom: 1.625em; max-width: 96%; padding: 9px; } .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: 0.6em; padding: 10px 0 5px 40px; position: relative; } .wp-caption .wp-caption-text:before { color: #666; content: '\2014'; font-size: 14px; font-style: normal; font-weight: bold; margin-right: 5px; position: absolute; left: 10px; top: 7px; } #content .gallery { margin: 0 auto 1.625em; } #content .gallery a img { border: none; } img#wpstats { display: block; margin: 0 auto 1.625em; } #content .gallery-columns-4 .gallery-item { width: 23%; padding-right:2%; } #content .gallery-columns-4 .gallery-item img { width: 100%; height: auto; } img.wp-smiley, .rsswidget img { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; margin-top: 0; padding: 0; } .alignnone { clear: both; margin: .5em; } .aligncenter { clear: both; margin: .5em auto; } .alignright { float: right; margin: .5em; } .alignleft { float: left; margin: .5em; } .nav-page { padding-bottom:25px; padding-top:22px; } .page-numbers li { float:left; display:inline; list-style:none; padding:4px 8px; margin-left:2px; line-height: 1em; color: #444; border:1px solid #444; } .page-numbers { padding: 6px 8px; } .page-numbers .current{ color: #900; } #wp-calendar{ width:100%; } #wp-calendar caption{ font-weight:bold; text-align:left; font-size:14px; padding-bottom:4px;} #wp-calendar thead{ font-size:11px; } #wp-calendar tbody td{ padding:3px 0 2px; text-align:center;} #wp-calendar tfoot #next{ text-align:right;} /* ================================================= Comment settings ================================================= */ ol.commentlist, ol.children{ list-style:none} #comments ol.commentlist{ width:95%; margin:0 auto; padding-left:0;} #comments-title { color: #600; font-size: 1.1em; font-weight: 500; line-height: 2.6em; padding:0 0 0 1em; text-transform: uppercase; } .nopassword, .nocomments { color: #aaa; font-size: 24px; font-weight: 100; margin: 26px 0; text-align: center; } .commentlist > li.comment { border: 1px solid #ddd; margin:1.625em 0; padding: 1.1em 1em 1.1em 1em; } .pingback, .trackback { margin: 0 0 1.625em; padding: 0 1.625em; } .commentlist .children { list-style: none; margin: 0; } .commentlist .children li.comment { border-left: 5px solid #777; margin: 1.625em 0 1em 0; padding: 1.625em; position: relative; color:#222; } .commentlist .children li.comment .fn { display: block; } .comment-meta .fn { font-size:20px; } .comment-meta { color: #666; font-size: 12px; line-height:1.1em; } .commentlist .children li.comment .comment-meta { line-height: 1.625em; } .commentlist .children li.comment .comment-content { margin:0; } .comment-meta a { font-weight: bold; } .comment-meta a:focus, .comment-meta a:active, .comment-meta a:hover { } .avatar { float:left; border:1px solid #ccc; margin-bottom:10px; margin-right:8px; } .commentlist > li:before { } .commentlist > li.pingback:before { content: ''; } .commentlist .children .avatar { top: 2em; } a.comment-reply-link { background:#298cba; color: #eee; font-size:.90em; padding:6px; text-decoration: none; } a.comment-reply-link:hover, a.comment-reply-link:focus, a.comment-reply-link:active { background: #f00; color: #fff; } a.comment-reply-link > span { display: inline-block; position: relative; top: -1px; } .commentlist > li.bypostauthor { } .commentlist > li.bypostauthor .comment-meta { color: #575757; } .commentlist > li.bypostauthor .comment-meta a:focus, .commentlist > li.bypostauthor .comment-meta a:active, .commentlist > li.bypostauthor .comment-meta a:hover { } .commentlist .children > li.bypostauthor { background:; } #respond { border:1px solid #eee; background: #fff; margin: 0 auto; padding: 1.2em; position: relative; width: 91%; } #respond input[type="text"], #respond textarea { background: #fff; border: 1px solid #eee; position: relative; padding: 10px; } #respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment { position: relative; } #respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label { background: #eee; color: #555; display: inline-block; font-size: 13px; left:0; min-width: 30px; padding: 0 10px; position: relative; top: 0; z-index: 1; } #respond input[type="text"]:focus, #respond textarea:focus { text-indent: 0; z-index: 1; } #respond textarea { resize: vertical; width: 95%; } #respond .comment-notes, #respond .logged-in-as { font-size: 13px; } #respond p { margin: 10px 0; } #respond .form-submit { float: right; margin: -20px 0 10px; } #respond input#submit { background: #123; border: none; color: #eee; cursor: pointer; font-size: 15px; margin:20px 2px; padding: 5px 22px 8px 22px; float:left; } #respond input#submit :hover { background: #123; color: #fff; } #respond #cancel-comment-reply-link { color: #666; margin-left: 10px; text-decoration: none; } #respond .logged-in-as a:hover, #respond #cancel-comment-reply-link:hover { text-decoration: underline; } #reply-title { color: #373737; font-size: 24px; font-weight: bold; line-height: 30px; } #cancel-comment-reply-link { color: #888; display: block; font-size: 11px; font-weight: normal; line-height: 2.2em; letter-spacing: 0.05em; position: absolute; right: 1.625em; text-decoration: none; text-transform: uppercase; top: 1.1em; } #cancel-comment-reply-link:focus, #cancel-comment-reply-link:active, #cancel-comment-reply-link:hover { color: #ff4b33; } #respond label { line-height: 2.2em; } #respond input[type=text] { display: block; height: 24px; width: 75%; } #respond p { font-size: 12px; } p.comment-form-comment { margin: 0; } .form-allowed-tags { display: none; } .says { margin-left:5px; margin-right:5px; } .required{display:none} /* ========================================================================== 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 */ } @media screen and (max-width:420px) { #nav-primary, #nav-primary ul { float: left; } #nav-primary {margin-top:10px;} #nav-primary ul { float: left; } #nav-primary li { float: left; width:100%; font-size: 1.5em; border:1px solid #999; } .sticky:before{ display:none; } } @media screen and (max-width:620px) { .one, .two, .thre, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve { margin:0 1.0416666666666665%; width:97.91666666666666%; } #respond{ width:72.91666666666666%; } .commentlist>li ul.children { clear: both; margin-left: 0px; padding: 0;} .commentlist>li ul.children li { margin: 0 0 -1px; padding: 0px 0px 0px; } .commentlist li.comment ul.children li.depth-2, .commentlist li.comment ul.children li.depth-3, .commentlist li.comment ul.children li.depth-4 { margin:0 0 0 0; clear: both;} body{ padding:0 8px;} }