/* Theme Name: Ari Theme URI: http://www.elmastudio.de/wordpress-themes/ari/ Description: Ari is a minimalistic, flexible three-column blog theme. The theme uses CSS3 media queries for its responsive layout and is therefore optimized for tablet pcs and smart phones (the theme switches to a two-column layout when viewed on a horizontal iPad screen, and to a one-column layout on iPhones). You can also choose a dark color scheme and the backgound-, text- and link-colors can be customized in the theme options page. Author: Elmastudio Author URI: http://www.elmastudio.de/wordpress-themes/ Version: 1.2 Tags: white, dark, three-columns, left-sidebar, right-sidebar, fluid-layout, custom-colors, custom-menu, theme-options, threaded-comments, sticky-post, translation-ready License: GNU/GPL Version 2 or later License URI: http://www.gnu.org/licenses/gpl.html */ /* Google Fonts Import --------------------------------------------- */ @import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,italic,bold,bolditalic&subset=latin); /* Reset --------------------------------------------- */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; background: transparent; } ol, ul { list-style: none; } blockquote, q { quotes: none; } table { border-collapse: collapse; border-spacing: 0; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* General Structure and Styles --------------------------------------------- */ body { font-family:'Droid Sans', arial, sans-serif; color: #4C4C4C; background-color:#fff; } #wrap { max-width: 960px; margin: 20px auto 0 auto; padding: 0px 30px 0px 30px; z-index: 0; } #sidebar-primary { width:240px; margin:0px 0px 60px 0px; float:left; position: fixed; } #main { width:75%; margin-top:85px; float:right; } #content { width: 62.5%; margin:0px 0px 60px 0px; padding:0px 0px 0px 60px; float:left; font-size: 14px; } #sidebar-secondary { width:20.8%; margin:0px 0px 60px 0px; float:right; } #footer { width:70%; float:right; padding: 0px 0px 30px 0px; clear: both; font-size: 12px; overflow:hidden; } /* Alignment --------------------------------------------- */ .alignleft { display: inline; float:left; margin-right: 10px; } .alignright { display: inline; float: right; margin-left: 10px; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 10px; } /* Headings --------------------------------------------- */ #content .post h1 { padding:0px 0px 20px 0px; font-size: 22px; line-height:28px; } #content h2 { padding:0px 0px 20px 0px; font-size: 18px; line-height:26px; } #content h3 { padding:20px 0px 12px 0px; font-size: 16px; line-height:24px; } #content h4 { padding:20px 0px 10px 0px; font-size: 15px; line-height:21px; } #content h5 { padding:16px 0px 8px 0px; font-size: 14px; line-height:20px; } #content h6 { padding:10px 0px 5px 0px; font-size: 13px; line-height:19px; } /* Links --------------------------------------------- */ #content h2 a { color:#4C4C4C; } a, #content h2 a:hover{ text-decoration:none; } a:hover { text-decoration:underline; } /* --- Link Colors --- */ a, ul.sidebar li.widget_text a { color:#88C34B; } ul.sidebar a, p.meta a, .comment-meta a, p.logged-in-as a, a.post-edit-link, #footer a { color:#999; } #content h2 a:hover, ul.sidebar a:hover, .comment-meta a:hover, p.logged-in-as a:hover, p.meta a:hover, a.post-edit-link:hover, #footer a:hover { color:#88C34B; } #searchsubmit:hover, form#commentform p.form-submit input#submit:hover, input.wpcf7-submit:hover { background:#88C34B; } /* Lists --------------------------------------------- */ #content #page ul, #content .post ul { padding:20px 0px 0px 25px; } #content #page ul li, #content .post ul li { padding:0px 0px 20px 0px; line-height:21px; list-style: square !important; } #content #page ol, #content .post ol { padding:20px 0px 0px 30px; } #content #page ol li, #content .post ol li { padding:0px 0px 20px 0px; line-height:21px; list-style: decimal; } #content #page ol ol li, #content .post ol li ol li { list-style: upper-alpha !important; } #content #page ol ol ol li, #content .post ol li ol ol li{ list-style: lower-roman !important; } /* Sidebars --------------------------------------------- */ ul.sidebar { font-size: 12px; line-height:18px; } ul.sidebar li.widget-container, ul.sidebar li.pagenav, ul.sidebar li.categories { margin:0px 0px 30px 0px; padding:0px 0px 10px 0px; border-bottom:1px dotted #4C4C4C; overflow:hidden; line-height:23px; } ul.sidebar h3.widget-title { padding:0px 0px 5px 0px; font-size: 12px; font-weight:bold; text-transform:uppercase; } /* Sidebar Primary --------------------------------------------- */ /* --- Theme Logo --- */ #sidebar-primary .logo { margin:0px 0px 30px 0px; overflow:hidden; } #sidebar-primary .logo h1 { padding:5px 0px 0px 0px; font-size:30px; line-height:35px; } #sidebar-primary .logo h1 a:hover { text-decoration:none; } #sidebar-primary .logo p { font-family:'Droid Serif', Times, serif; font-style:italic; font-size:13px; } #sidebar-primary .logo img { max-width: 240px; margin:0; padding:0; } /* --- Text Widget --- */ ul.sidebar li.widget_text p { line-height:1.6 !important; } #sidebar-primary ul.sidebar li.widget_text img { margin:3px 10px 0px 0px; float:left; } /* Sidebar Secondary --------------------------------------------- */ #sidebar-secondary img { max-width: 100%; display: block; margin:0px; padding: 0; } #sidebar-secondary img.banner { max-width: 100%; display: block; margin:0px 0px 10px 0px; padding: 0; } /* Sidebar Widgets (can be used for both Sidebars) --------------------------------------------- */ ul.sidebar li.widget_archive ul li, ul.sidebar li.widget_pages ul li.page_item, ul.sidebar li.widget_categories ul li.cat-item, ul.sidebar li.widget_links ul.blogroll li, ul.sidebar li.widget_nav_menu ul#menu-navigation li.menu-item, ul.sidebar li.widget_meta ul li { line-height:23px; } /* --- Text Widget --- */ ul.sidebar li.widget_text img { margin:3px 10px 0px 0px; float:left; } /* --- Custom Menu Widget --- */ ul.sub-menu { margin: 0px 0px 0px 15px; } ul.sidebar li.widget_categories ul li.cat-item ul.children { margin:0px 0px 0px 15px; } /* --- Pages Widget --- */ ul.sidebar li.widget_pages ul li.page_item ul.children { margin:0px 0px 0px 15px; } /* --- Search Widget --- */ .search-input { max-width: 100%; width: 95%; margin:0px 0px 4px 0px; font-size:12px; float:left; } #searchsubmit { margin:0px 4px 0px 0px; padding:4px 7px 4px 7px; float:right; background:#4C4C4C; border:none; font-family:'Droid Sans', arial, sans-serif; font-size:12px; color:#fff; cursor:pointer; } /* --- Recent Post Widget --- */ ul.sidebar li.widget_recent_entries ul li { padding: 0px 0px 12px 0px; line-height:16px; } ul.sidebar li.widget_recent_entries ul li a { line-height:16px; } /* --- Recent Comments --- */ ul.sidebar li.widget_recent_comments ul#recentcomments li.recentcomments { padding: 0px 0px 12px 0px; line-height:16px; } ul.sidebar li.widget_recent_comments ul#recentcomments li.recentcomments a { padding: 0px 0px 12px 0px; } /* --- Calendar Widget --- */ table#wp-calendar caption { font-family:'Droid Serif', Times, serif; font-size:12px; line-height:18px; font-style:italic; text-align:left; padding:0px 0px 3px 0px; } table#wp-calendar td { padding:3px; } /* --- Social Links Custom Widget --- */ ul.sidebar li.widget_sociallinks a { padding:0px 20px 0px 20px; line-height:23px; } ul.sidebar li.widget_sociallinks a.rss { background:url(images/rss-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.twitter { background:url(images/twitter-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.facebook { background:url(images/fb-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.googleplus { background:url(images/googleplus-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.flickr { background:url(images/flickr-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.vimeo { background:url(images/vimeo-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.xing { background:url(images/xing-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.linkedin { background:url(images/linkedin-icon.png) 0 0 no-repeat; } ul.sidebar li.widget_sociallinks a.delicious { background:url(images/delicious-icon.png) 0 0 no-repeat; } /* Posts --------------------------------------------- */ #content .post, #content .page { padding:0px 0px 1px 0px; margin:0px 0px 50px 0px; border-bottom:1px dotted #4C4C4C; } #content .post p, #content .page p { padding:0px 0px 15px 0px; font-size: 14px; line-height:23px; } #content .post p small { font-size:13px; } #content blockquote { margin:10px 0px 30px 0px; padding:0px 0px 0px 16px; background:url(images/blockquote-border.jpg) 0 0 repeat-y; font-family:'Droid Serif', Times, serif; line-height:21px; font-style:italic; } #content blockquote p { padding:0 !important; } #content blockquote p cite { padding:5px 0px 0px 0px; font-size:12px; font-weight:bold; } #content address { padding:0px 0px 20px 0px; line-height:20px; } #content pre { padding:0px 0px 20px 0px; overflow: scroll; } #content table { margin:10px 0px 30px 0px; } #content table tr { border-bottom:1px solid #4C4C4C; } #content table tr th { padding: 10px 20px 10px 20px; border-top:1px solid #4C4C4C; border-left:1px solid #4C4C4C; border-right:1px solid #4C4C4C; } #content table tr td { padding: 10px 20px 10px 20px; border-left:1px solid #4C4C4C; border-right:1px solid #4C4C4C; } #content img { max-width: 100%; width: auto; height: auto; } #content img.wp-post-image { margin: 5px 15px 5px 0 !important; padding: 0; float: left; } #content img.wp-smiley { display: inline; } #content img.alignleft { margin: 5px 10px 10px 0px; } #content img.alignright { margin: 5px 0px 5px 10px; } #content img.alignnone { margin: 10px 0px 10px 0px; } #content .wp-caption { max-width: 100%; display: block; } #content p.wp-caption-text { font-family:'Droid Serif', Times, serif; font-size:12px; font-style:italic; line-height:18px; padding:7px 0px 10px 0px; } #content object, #content embed, #content iframe { display: block; max-width: 100%; margin: 3px 0 10px 0; } #content .post p.meta, #content .page p.meta { margin:15px 0px 0px 0px; padding:10px 0px 5px 0px; background:url(images/meta-border.jpg) 0 0 no-repeat; font-size:12px; line-height:19px; clear:both; } #content .post p.meta span, #content .page p.meta span { padding:0px 0px 0px 0px; font-family:'Droid Serif', Times, serif; font-size:12px; line-height:19px; font-style:italic; } a.post-edit-link { font-family:'Droid Serif', Times, serif; font-size:12px; font-style:italic; } #content p.previous { float:left; font-size:14px; } #content p.next { float:right; font-size:14px; } #content .sticky h3.sticky-label { font-size:10.5px; font-weight:normal; padding:0; text-transform:uppercase; letter-spacing:2px; } /* Single Post --------------------------------------------- */ #content .post #author-info { margin:20px 0px 30px 0px; padding:10px 0px 0px 0px; border-top:1px dotted #4C4C4C; border-bottom:1px dotted #4C4C4C; overflow:hidden; } #content .post #author-avatar { margin:5px 15px 0px 0px; float:left; } #content .post #author-description { overflow:hidden; } #content .post #author-description h2 { padding:0px; font-family:'Droid Serif', Times, serif; font-size:12px; font-weight:normal; } #content .post #author-description h2 span { font-weight:bold; text-transform:uppercase; letter-spacing:0.1em; } #content .post #author-description p, .page-link { font-family:'Droid Serif', Times, serif; font-size:13px; line-height:18px; font-style:italic; } /* --- Comments --- */ .post .comments-content { margin:6px 0px 0px 0px; border-top:1px dotted #4C4C4C; } #content .post #comments-content h3#comments { padding:80px 0px 8px 0px; border-bottom:1px dotted #4C4C4C; font-size:16px; } #comments-content .comment-body p { padding:0px 0px 10px 0px; font-size:13px; line-height:19px; } #comments-content p.moderation { font-family:'Droid Serif', Times, serif; font-size:12px; font-style:italic; color:#999; } #content .post #comments-content ol, #content #page #comments-content ol { padding:0px; } #content .post #comments-content ol li ul.children, #content #page #comments-content ol li ul.children { padding:0px; } #content .post #comments-content ol li.depth-1 { padding:25px 0px 10px 0px; border-bottom:1px dotted #4C4C4C; overflow:hidden; } #comments-content ol li.depth-2, #content #page #comments-content ol li.depth-2, #comments-content ol li.depth-3, #content #page #comments-content ol li.depth-3, #comments-content ol li.depth-4, #content #page #comments-content ol li.depth-4, #comments-content ol li.depth-5, #content #page #comments-content ol li.depth-5 { margin:10px 0px 0px 30px; padding:25px 0px 0px 0px; border-top:1px dotted #4C4C4C; border-bottom:none; overflow:hidden; } .comment-meta { padding:0px 0px 10px 0px; font-family:'Droid Serif', Times, serif; font-size:12px; font-style:italic; } .comment-gravatar { margin:1px 15px 0px 0px; float:left; } #comments-content .comment-body { padding:0px; overflow:hidden; } .reply { margin:10px 0px 0px 0px; float:right; } a.comment-reply-link { font-size:12px; font-weight:bold; } p.logged-in-as { font-family:'Droid Serif', Times, serif; font-size:12px; font-style:italic; } #comments-content ol li.post.pingback { margin:0px; padding: 20px 0px 10px 20px; list-style:none; } #content #comments-content .comment-body ol { padding:6px 0 6px 30px; line-height: 1.3; } #content #comments-content .comment-body ol li { list-style: decimal !important; } #content #comments-content .comment-body ol li ol li { list-style: upper-alpha !important; } #content #comments-content .comment-body ol li ol ol li{ list-style: lower-roman !important; } .bypostauthor { } /* --- Comment Reply --- */ a#cancel-comment-reply-link { padding:3px 0px 0px 0px; float:right; font-size:12px; } #content .post #comments-content #respond h3#reply-title { padding:80px 0px 6px 0px; border-bottom:1px dotted #4C4C4C; font-size:16px; } #content .post form#commentform p { font-size:13px; } form#commentform p.comment-notes { padding:5px 0px 15px 0px; font-family:'Droid Serif', Times, serif; font-size:12px; font-style:italic; } form#commentform input#author, form#commentform input#email, form#commentform input#url { font-family:'Droid Sans', arial, sans-serif; height:22px; display: block; } form#commentform textarea#comment { width:90%; padding:3px; font-family:'Droid Sans', arial, sans-serif; } form#commentform p.comment-form-author, form#commentform p.comment-form-email, form#commentform p.comment-form-url, form#commentform p.comment-form-comment { padding:10px 0px 0px 0px; } form#commentform p.form-submit input#submit { margin:8px 0px 10px 1px; padding:6px 8px 6px 8px; background:#4C4C4C; border:none; font-family:'Droid Sans', arial, sans-serif; font-size:12px; color:#fff; cursor:pointer; } /* --- Comments Navigation --- */ .nav-previous { float:left; margin:20px 0 0 0; } .nav-next { float:right; margin:20px 0 0 0; } /* WordPress Image Gallery --------------------------------------------- */ .gallery { margin: auto; padding:5px 0px 5px 0px; } .gallery .gallery-item { float: left; margin: 10px 5px 0px 5px; text-align: center; width: 30%; vertical-align: top; } .gallery img { border: 1px solid #cfcfcf; } .gallery .gallery-caption { margin-left: 0; padding: 5px 0px 8px 0px; font-family:'Droid Serif', Times, serif; font-size: 12px; font-style: italic; line-height: 18px; } /* Footer --------------------------------------------- */ #footer p { line-height:19px; } /* Archives --------------------------------------------- */ h1.archive { margin:0px 0px 25px 0px; padding: 0px 0px 10px 0px; border-bottom:1px dotted #4C4C4C; font-family:'Droid Serif', Times, serif; font-size:12px; font-weight:normal; font-style:italic; letter-spacing:0.1em; } h1.archive strong { font-style:normal; text-transform:uppercase; } /* Pages --------------------------------------------- */ #page { margin-bottom:50px; padding:0px 0px 6px 0px; border-bottom:1px dotted #4C4C4C; } #page h1 { padding:0px 0px 20px 0px; font-size: 20px; line-height:26px; } #page h2 { font-size: 16px; line-height:23px; } #page p { padding:0px 0px 15px 0px; font-size: 14px; line-height:23px; } #page p small { font-size: 13px; } /* Plugin Styles --------------------------------------------- */ /* --- Contact Form 7 --- */ #content .wpcf7 { padding:20px 0px 20px 0px; } #content #page .wpcf7 p { padding:0px 0px 10px 0px; font-size:13px; } input.wpcf7-text { height:22px; } .wpcf7 textarea { font-family:'Droid Sans', arial, sans-serif; font-size:14px; } input.wpcf7-submit { margin:0px; padding:6px 8px 6px 8px; background:#4C4C4C; border:none; font-family:'Droid Sans', arial, sans-serif; font-size:12px; color:#fff; cursor:pointer; } .wpcf7-response-output, .wpcf7-not-valid-tip { margin:0px; font-family:'Droid Serif', Times, serif; font-size:12px; line-height:18px; font-style:italic; } /* --- jQuery Thickbox --- */ #TB_window img#TB_Image { border-bottom:none ! important; border-left:none ! important; border-right: none ! important; border-top: none ! important; margin: 15px 0px 0px 15px; } #TB_caption { height: 30px ! important; padding: 7px 15px 15px 15px ! important; } #TB_secondLine { padding: 4px 0px 0px 0px; } #TB_closeWindow { height: 30px ! important; padding: 11px 15px 10px 0px ! important; } #TB_window a { color: #4C4C4C ! important; } /* Responsiveness --------------------------------------------- */ @media screen and (max-width: 870px) { #wrap { max-width: 870px; margin: 25px auto 0 auto; padding: 0px 15px 0px 15px; overflow:hidden; } #sidebar-primary { width:240px; position: fixed; } #main { width: 72%; float:right; overflow:hidden; } #content { width: 87.2%; margin:0px 0px 50px 0px; padding:0px 0px 0px 80px; float:none; } #sidebar-secondary { width: 87.2%; margin:0px 0px 50px 0px; padding:50px 0px 0px 80px; float:none; overflow:hidden; } /* --- Secondary Sidebar Widgets --- */ #sidebar-secondary img.banner { max-width: 100%; display: block; margin:0px 10px 10px 0px; } #sidebar-secondary ul.sidebar li.widget-container { width:100%; margin:0px 20px 30px 0px; padding:0px 0px 10px 0px; float:left; border-bottom:1px dotted #4C4C4C; overflow:hidden; } #sidebar-secondary ul li.widget_sociallinks ul li, #sidebar-secondary ul.sidebar li.widget_pages ul li, #sidebar-secondary ul.sidebar li.widget_archive ul li, #sidebar-secondary ul.sidebar li.widget_categories ul li, #sidebar-secondary ul.sidebar li.widget_links ul li { float:left; margin:0px 22px 5px 0px; } #sidebar-secondary ul .search-input { width:50%; margin:0px 0px 4px 0px; padding:2px 3px 3px 3px; border:1px solid #999; font-size:12px; } #searchsubmit { margin:0px 0px 0px 5px; padding:4px 7px 4px 7px; float:none; background:#4C4C4C; border:none; font-family:'Droid Sans', arial, sans-serif; font-size:12px; color:#fff; cursor:pointer; } /* --- Footer --- */ #footer { width: 62.5%; float:right; overflow:hidden; } } @media screen and (max-width: 770px) { #wrap { max-width: 770px; margin: 25px auto 0 auto; padding: 0px 15px 0px 15px; overflow:hidden; } #sidebar-primary { width:240px; position: fixed; } #main { width: 68.8%; float:right; overflow:hidden; } #content { width: 88.5%; margin:0px 0px 50px 0px; padding:0px 0px 0px 60px; float:none; } #sidebar-secondary { width: 88.5%; margin:0px 0px 50px 0px; padding:50px 0px 0px 60px; float:none; overflow:hidden; } } @media screen and (max-width: 620px) { #wrap { max-width: 620px; margin: 25px auto 0 auto; padding: 0px 10px 0px 10px; overflow:hidden; position:relative; } #sidebar-primary { width: auto; position:relative; float: none; clear: both; } #sidebar-primary ul li.widget_social_links ul li { float:left; } #main { width: auto; margin: 0; padding: 0; float: none; clear: both; } #content { width: auto; margin:0px 0px 50px 0px; padding:0; float: none; clear: both; } #sidebar-secondary { width: auto; padding:50px 0px 0px 0px; margin:0px 0px 50px 0px; float: none; clear: both; } #content img.wp-post-image { width: 100px; margin: 3px 10px 5px 0 !important; } /* --- Secondary Sidebar Widgets --- */ #sidebar-secondary ul.sidebar li.widget-container { width:100%; margin:0px 20px 30px 0px; padding:0px 0px 10px 0px; float:left; border-bottom:1px dotted #4C4C4C; overflow:hidden; } form#searchform { width:99%; } #sidebar-secondary ul .search-input { width:60%; margin:0px 0px 4px 0px; padding:2px 3px 3px 3px; border:1px solid #999; font-size:12px; } #content h2 { padding:0px 0px 20px 0px; font-size: 17px; line-height:24px; } #content .post p { padding:0px 0px 15px 0px; font-size: 13px; line-height:22px; } #content p.previous { float:left; font-size:13px; } #content p.next { float:right; font-size:13px; } /* --- Comments Reply --- */ #content .post #comments-content #respond h3#reply-title { padding:80px 0px 3px 0px; border-bottom:1px dotted #4C4C4C; font-size:16px; clear:both; } a#cancel-comment-reply-link { display:block; padding:0; float:none; font-size:12px; } /* --- Footer --- */ #footer { width: 100%; float:none; } } /* FLOATS CLEARING --------------------------------------------- */ .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } .clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0 }