/* Theme Name: Art Blogazine Description: Simple and minimalist theme with HTML5 markup. You can create unique post like a magazine style, this theme also responsive design. But the blogazine could be unlike other trends for a few special reasons. Designing a creative layout for each new blog post, based on the content itself, requires skill, patience, dedication to the content and, most of all, effort on the part of the designer! Anyone can have a blog up and running in minutes. While this is great, and we now have a wealth of blogs on countless topics, perhaps it’s too easy? Just thinking about the endless hours of effort that a print designer puts into creating the custom layout of a magazine article makes one respect the finished product so much more.A few individuals out there, though, are really breaking the mold of the blogosphere. Theme URI: http://amdhas.tk/project/artblogazine.html Author: Hendro Prayitno Author URI: http://amdhas.tk Version: 1.0.0 License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: white, one-column, flexible-width, threaded-comments, custom-menu, translation-ready */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; } body:before,body:after{ content:""; display:table} body:after{ clear:both} img, object, embed{max-width:100%} img{height:auto} #container{ width:100%; margin:0; overflow:hidden } body{ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; width:100%; } /* ================================================= Need Style for table layout ================================================= */ table th {color: #222;} table td, table th { padding: 3px 6px; font-size: 12px; } table { border-collapse: collapse; border-spacing: 0; margin-bottom: 10px; border: 1px solid #333; } /* ================================================= CSS font face ================================================= */ @font-face { font-family: 'Chunkfive'; src: url('font/Chunkfive.eot'); src: local('☺'), url('font/Chunkfive.woff') format('woff'), url('font/Chunkfive.ttf') format('truetype'), url('font/Chunkfive.svg#webfontB9LMdHvb') format('svg'); font-weight: normal; font-style: normal; } /* ================================================= Global settings ================================================= */ #s{width:65%;} #searchform{margin-bottom:20px;} .submit {width:23%;} #searchsubmit{ cursor:pointer; color:#222; } #searchsubmit:hover{background:#ccf111;} ol{margin-left:20px} ul{margin-left:10px} ol,ul{margin-bottom:7px;} dl {margin: 0 1.625em;} dt {font-weight: bold;} dd {margin-bottom: 1.625em;} strong {font-weight: bold;} cite, em, i {font-style: italic;} blockquote {font-family: Georgia, "Bitstream Charter", serif;font-style: italic; font-weight: normal;margin: 2em 2.2em;line-height:1.4em;} blockquote em, blockquote i, blockquote cite {font-style: normal;} blockquote cite { color: #666;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 300;letter-spacing: 0.05em;text-transform: uppercase;} pre {background:#ffffe0; font: 13px "Courier 10 Pitch", Courier, monospace;line-height: 1.5;margin-bottom: 1.625em;overflow: auto;padding: 0.75em 1.625em;border-left:5px solid #298cba;} code, kbd {font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;} abbr, acronym, dfn {border-bottom: 1px dotted #666;cursor: help;} address {display: block;margin: 0 0 1.625em;} ins {background: #fff9c0;text-decoration: none;} sup, sub {font-size: 10px;height: 0;line-height: 1;position: relative;vertical-align: baseline;} sup {bottom: 1ex;} sub {top: .5ex;} .alignleft {display: inline;float: left;margin-right: 1.625em;} .alignright {display: inline;float: right;margin-left: 1.625em;} .aligncenter {clear: both;display:inline-block;margin-left: auto; margin-right: auto; margin-bottom:0; } caption, th, td {font-weight: normal;text-align: left;} blockquote:before, q:before{content:'"';font-size:4em;float:left;text-align:right;} blockquote, q {quotes: "" "";} a img {border: 0;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} .sumary ol, .sumary ul{margin-left:1.0888em} p{ margin-bottom:15px; } a{ color:#a00; text-decoration:none} a:visited{color:#456;text-decoration:none} a:hover{text-decoration:none;color:#f00} .info-blog{text-align:left; background:rgba(82%,82%,82%,.4); padding:5px; } .ekserp{color:#333;border-top:2px solid #999; padding-top:8px; margin-top:4px; font-size:82%; } .content-post{ color:#222; font-size:82%; } .content-post ul, .content-post ol{margin-left:30px;} .sumary{line-height:1.3em; width:65%; padding-left:20px; padding-right:20px; margin-top:20px; float:left; display:inline; } .home-content{line-height:1.3em; width:78%; padding-left:20px; padding-right:20px; margin-top:20px; margin-left:auto; margin-right:auto; } .sticky{ color:red;} .form-allowed-tags{font-size:70%;} .tag-links{margin-bottom:10px;font-size:90%;} .tagged{overflow:auto; padding:10px;} /* ================================================= Need Style for widget calendar ================================================= */ #calendar_wrap {background: #f6f6f6; color:black;padding:10px;border-radius:5px;} #wp-calendar{width:100%; clear:both;} #wp-calendar a {} #wp-calendar #today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {} #wp-calendar {} #wp-calendar caption{text-align:left; font-size:1.3em;font-weight:bold; margin-left:5px;} #wp-calendar td, #wp-calendar th {text-align: center;} #wp-calendar caption { font-size: 11px;font-weight: 500; padding: 5px 0 3px 0; text-transform: uppercase; } #wp-calendar th { background: #f4f4f4; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;font-weight: bold; } #wp-calendar td { background: #f4f4f4; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } /* ================================================= Navigation top menu or primary menu ================================================= */ #navmenu{font-family: 'Chunkfive'; background:#FFBE5D; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; clear: both; display: block; float: left; margin: 0 auto; width: 100%; } #navmenu ul { font-size: 13px; list-style: none; margin: 0 0 0 -0.8125em; padding-left: 0; } #navmenu li { float: left; position: relative; } #navmenu a { border-right:1px solid #999; text-transform:uppercase; color: #777; display: block; line-height: 3.333em; padding: 0 1.4125em; text-decoration: none; } #navmenu ul ul { -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); box-shadow: 0 3px 3px rgba(0,0,0,0.2); display:none; float: left; margin: 0; position: absolute; top: 3.333em; left: 0; width: 188px; z-index: 99999; } #navmenu ul ul ul { left: 100%; top: 0; } #navmenu ul ul a {border-right:none; background: #f9f9f9; border-bottom: 1px dotted #ddd; color: #999; font-size: 13px; font-weight: normal; height: auto; line-height: 1.4em; padding: 10px 15px; width: 168px; } #navmenu li:hover > a, #navmenu ul ul :hover > a, #navmenua:focus { background: #efefef; } #navmenu li:hover > a, #navmenu a:focus { background: #f9f9f9; background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737; } #navmenu ul li:hover > ul { display: block; } #navmenu.current_page_item > a, #navmenu.current_page_ancestor > a { font-weight: bold; } /* ================================================= Author setting ================================================= */ #authorarea{display:inline;float:left; width:29%; background: #f0f0f0; padding: 10px; overflow:hidden; color: #333; margin-bottom:15px; box-shadow:1px 1px 3px #999;} #authorarea h3{font-size: 18px;color:#333;margin:0;padding:10px 10px 5px 15px;} #authorarea h3 a{text-decoration:none;color: #333;font-weight: bold;} #authorarea img{margin-top:12px;padding:10px;float:left;border: 1px solid #ddd;width: 100px;height: 100px;max-width:100%;} #authorarea p{font-size:82%;color:#333;margin:0;padding:0px 10px 10px 15px;word-wrap:break-word} #authorarea p a:link{color:#f00;} #authorarea p a:hover{color:#900;} .authorinfo{padding-left:120px;} /* ================================================= Caption and image ================================================= */ .wp-caption {margin-top: 0.4em;} .wp-caption { background: #f4f4f4; 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 0; position: relative; } .wp-caption .wp-caption-text:before { color: #666; content: ''; font-size: 14px; font-style: normal; font-weight: bold; margin-right: 5px; position: absolute; } .format-gallery .gallery-thumb {float: left;display: block;margin: .375em 1.625em 0 0;} .gallery { margin: 0 auto 18px; } .gallery .gallery-item {float: left;margin-top: 0;text-align: center;width: 33%;} .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery img {box-shadow: 0px 0px 4px #999;border: 1px solid white;padding: 8px;background: #f2f2f2; } .gallery img:hover {background: white;} .gallery-columns-2 .attachment-medium {max-width: 92%;height: auto;} .gallery-columns-4 .attachment-thumbnail {max-width: 84%;height: auto;} .gallery .gallery-caption {color: #888;font-size: 12px;margin: 0 0 12px;} .gallery dl, .gallery dt { margin: 0; } .gallery br+br { display: none; } /* ================================================= Comment settings ================================================= */ #comm{width:100%;background:#f9f9f9;} .komentar{ color: #222; padding-bottom:15px; *width:68%; width:98%; margin-left:auto; margin-right:auto; padding-top:15px; } #respond{width:62%; margin-left:auto; margin-right:auto;} #respond input[type=text] {float: left;margin-right:10px;} #respond .comment-form-comment {margin: 0;} input, select, textarea {font-size: 100%;margin: 0;vertical-align: baseline; *vertical-align: middle;background: #f3f3f3;border: 1px solid #dcdcdc; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);padding:6px; } input:focus, select:focus, textarea:focus {background:#fff;} button, input {line-height: normal;*overflow: visible;} button, html input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid #ccc;border-color: #ccc #ccc #bbb #ccc;border-radius: 3px; background: #fafafa; background: -moz-linear-gradient(top, #fafafa 60%, #e6e6e6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); background: -webkit-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); background: -o-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); background: -ms-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); background: linear-gradient(top, #fafafa 60%,#e6e6e6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 );box-shadow: inset 0 2px 1px #fff;color: rgba(0,0,0,.8);cursor: pointer;-webkit-appearance: button;font-size:1em;line-height:2;padding:5px;text-shadow: 0 1px 0 rgba(255,255,255,.5); } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {background: #f5f5f5;background: -moz-linear-gradient(top, #f5f5f5 60%, #dcdcdc 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc));background: -webkit-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%);background: -o-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%);background: -ms-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%);background: linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 );border-color: #bbb #bbb #aaa #bbb; } button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {border-color: #aaa #bbb #bbb #bbb;box-shadow: inset 0 2px 3px rgba(0,0,0,.15);box-shadow: inset 0 2px 2px rgba(0,0,0,.15); } 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 { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0;padding: 0; } input[type=text], textarea {color: #666;border: 1px solid #ccc;border-radius: 3px; } input[type=text]:focus, textarea:focus {color: #111; } input[type=text] {padding: 3px; } textarea {overflow: auto;padding-left: 3px;vertical-align: top; width: 95%; } .comments {padding: 0;} .comments .respond {padding: 30px;} .comments h3 { margin-top: 30px; margin-right:30px; margin-bottom: 15px; margin-left:15px; color: #b80f07; font: normal 1.571em/1em "Georgia",sans-serif; text-transform: uppercase;} .commentlist > li.bypostauthor .comment-meta {} .commentlist > li.bypostauthor .comment-meta a:focus, .commentlist > li.bypostauthor .comment-meta a:active, .commentlist > li.bypostauthor .comment-meta a:hover {} .commentlist > li.bypostauthor:before {} .commentlist .children > li.bypostauthor {background:;} .commentlist {list-style: none; margin: 0;} .commentlist>li {overflow: hidden; margin: 0; padding-top: 30px; padding-right: 30px; padding-left:15px; border-bottom: 1px solid #e5e5e5; } .commentlist>li img.avatar {float: left; margin-right: 30px; border: none;} .commentlist>li .comment-author cite {font-style: normal; font-size: 1.286em;} .commentlist>li .says {color: #444; font-style: italic;} .commentlist>li .comment-meta { font-size: 0.714em; font-family: "Georgia",sans-serif;} .commentlist>li .comment-meta a {font-family: "Georgia",sans-serif;} .commentlist>li p { margin-top: 1em; margin-right: 0; margin-bottom: 1em; margin-left: 60px; font-size: 0.929em; font-family: Arial,sans-serif;} .commentlist>li ul.children {clear: both; margin-left: 60px; padding: 0;} .commentlist>li ul.children li {overflow: hidden; margin: 0 0 -1px; padding-top: 30px; padding-right:30px; padding-bottom: 15px; padding-left:15px; border: 1px solid #e5e5e5;} .reply {float: right;clear:both;margin-bottom:.98em;} .reply a {font-size: 0.714em; font-family: "Georgia",sans-serif;padding:5px; border: 1px solid #e5e5e5; } li.pingback, li.trackback { position:relative; border-left:1px solid #aaa; margin:.75em 0 3.5em 7.5em; padding-left:1.25em; min-height:3.75em; list-style:none; } .nocomments{text-align:center;font-style:italic;font-size:1.5em;padding-top:15px} /* ================================================= Navigation page ================================================= */ .navigation{ background: #fff; overflow:hidden; width:100%; margin-bottom:-2px; border-top:solid 2px #ddd; border-bottom:2px solid #ddd; margin:0; padding:0; } .navigation a{ padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; color:#777; display:inline-block; text-decoration:none;} .navigation a:hover{color:#f00;} #nav-below{margin-top:0;} .nav-previous{ font-size:1.1em; float:left; margin-right:20px; border-right:2px solid #ddd;} .nav-next{font-size:1.1em; float:right;border-left:2px solid #ddd;} .meta-prev{font-size:.80em;float:left; margin-right:20px; border-right:2px solid #ddd; } .meta-next{font-size:.80em;float:right;border-left:2px solid #ddd;} /* ================================================= Header settings and Title ================================================= */ h1 { font: 170% sans-serif} h2 { font: 140% sans-serif} h3 { font: 120% sans-serif} h4 { font: bold 100% sans-serif} h5 { font: italic 100% sans-serif} h6 { font: small-caps 100% sans-serif} .header{ padding-top:15px; margin:0; border-bottom: 1px solid #ddd; } .title-blog h1{ padding-left:15px; font-size:2.5em; font-family: 'Chunkfive'; text-transform:uppercase; color:#888; } .title-blog-single h2{ padding-right:15px; margin:0; font-size:1em; font-family: 'Chunkfive'; text-transform:uppercase; color:#999; float:right; display:inline; } .header a:hover{color:#f00;} .description{ font-size:14px; padding-left:15px; margin-top:-5px; color:;} .eror{text-align:center;margin-top:5%;padding-bottom:15px;} .eror h1{color:#000;font-size:36px;} .eror h2{color:#000;font-size:21px;} .title-post a{ color:#999; font-family: 'Chunkfive'; margin:0; font-size:1.3em; text-transform:uppercase; float:left; display:inline; padding-left:15px;} .title-post a:hover {color:#ffbe5d;} .font-small{font-size:11px;margin-bottom:0; margin-left:auto; margin-right:auto; height:30px; overflow:auto; width:60.25% } .post-info{font-size:11px;margin:0;} .post-info-single{font-size:11px;margin:0; padding-left:15px;} .title a{color:#999; font-size:1.1em; text-transform:uppercase;font-family: 'Chunkfive';} .title a:hover {color:#900;} .published{font-size:10px;} h1.page-title{font-size:3em;font-style:italic;} /* ================================================= Clear your grid element ================================================= */ .clear{ clear:both; display:block; overflow:hidden; margin-bottom:20px; } .clearfix{ clear:both; display:block; overflow:hidden; } /* ================================================= Footer and sidebar settings ================================================= */ .side-footer{ display:inline; float:left; margin:0 1.0416666666666665%; width:31.25%} .footer{ text-align:right; font-size:12px; color:#fff; padding:18px 20px 15px 8px;margin:0; } .footer a{color:#fff} .sidebar ul{margin-bottom:10px;} .sidebar ul li{ padding-left:10px; padding-bottom:5px; padding-top:5px; list-style:none; font-size:1em; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#c0c0c0;} .sidebar ul li:hover{color:#fff} .sidebar ul li p{font-size:0.8em;} .sidebar ul li a{font-size:0.8em;color:#999} .sidebar ul li a:hover{color:#f4f4f4; text-decoration:none; } .sidebar ul:last-child{border-style:none} .sidebar h3{ font-family: 'Chunkfive'; margin-top:15px; color:#ffbe5d; font-size:130%; text-transform:uppercase;padding:8px 0 8px 10px; } .below{padding-top:15px; padding-bottom:15px; background: #234; } .social{ padding-top:10px; background: #234; border-top:solid 1px #c0c0c0; } .icons { list-style:none; line-height:normal; margin:12px 0 12px 15px; text-align:left; } .twitter, .youtube, .facebook, .linkedin, .rss, .google, .stumble, .blogger, .deviantart, .delicious { display: inline; float:left; margin: 2px; padding-left: 3px; } /* ================================================= CSS media query on 800px ================================================= */ @media screen and (max-width:767px) { body{background:white;color:black} #authorarea, .side-footer, .sumary, .title-blog, .form-comment, .home-content { display:inline; float:left; width:97.91666666666666%; margin:0 auto; } .commentlist>li ul.children {clear: both; margin-left: 0px; padding: 0;} .commentlist>li ul.children li { overflow: hidden; margin: 0 0 -1px; padding: 0px 0px 0px; border: 1px solid #e5e5e5;} .commentlist>li {overflow: hidden; margin: 0; padding: 0px 0px 0px; border-bottom: 1px solid #e5e5e5; } .commentlist>li img.avatar{display:none;} .ekserp{ padding-left:1em; padding-right:1em; padding-top:8px; } .title-blog h1{ padding-left:0;text-align:center; font-size:2em; word-wrap:break-word;} .description{padding-left:5px;text-align:center;} .sumary{padding-left:0; padding-right:0;} .title a, .header h1 a{font-size:1.1em;margin-bottom:5px; text-align:center} .header{position:relative;border-bottom:none; box-shadow:none;} }