/* Theme Name: Basically Theme URI: http://satrya.me/ Description: Clean and seo optimized theme with 3 different layouts, 7 fonts and 9 different color schemes. Basically also supports 5 widget areas, it includes styles for print and the visual editor. Has an optional full-width page template and translation ready. Version: 2.1.2 Author: Satrya Author URI: http://satrya.me Tags: blue, black, red, green, gray, purple, brown, pink, orange, one-column, two-columns, right-sidebar, left-sidebar, fixed-width, custom-header, custom-background, threaded-comments, custom-menu, theme-options, full-width-template, sticky-post, microformats, editor-style, featured-images, translation-ready Text Domain: basically License: GNU General Public License v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html Based on Basically CSS Framework & Blueprint CSS Framework Copyright (C) 2012 Satrya Please DO NOT EDIT THIS FILE, if you want to customize the styles, you can create a child theme See: http://codex.wordpress.org/Child_Themes */ /* Table of Contents ============================================================================= - Reset Stylesheet Normalize.css + Eric Meyer Reset - Base Basic and global styles for grid layouts, page templates and link styles - Typography Headings, text element, lists, code, and more - Form Base styles for various input types and form layouts - Table Base styles for all tables - Images Basic and global styles for images, caption, & gallery - Header Styles for header area such as header, custom header, menus etc - Main styles This is our main styles for theme development - Sidebar & Widget Styles for sidebar and all widget areas - Comments Styles for comments area(comment form & comment lists) - Footer Styles for footer area - Utility List of helper classes (eg clearfix, alignment, etc) - WordPress Pagination - Post pages - Post navigation previous_post_link() & next_post_link() - Miscellaneous Miscellaneous styles ============================================================================= */ /* ============================================================================= - Reset Stylesheet Normalize.css + Eric Meyer 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; } audio, canvas, video { *display: inline; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } nav ul, nav ol { list-style: none; list-style-image: none; } img { border: 0; max-width: 100%; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; } input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: text-bottom; } table { border-collapse: collapse; border-spacing: 0; } /* ============================================================================= - Base Basic and global styles for grid layouts, page templates and link styles ============================================================================= */ body { background-color: #f0f0f0; color: #555555; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 87.5%; line-height: 1.5em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html > body { font-size: 14px; } /* SELECTION ----------------- */ ::-moz-selection { background: #337fda; color: white; text-shadow: none; } ::selection { background: #337fda; color: white; text-shadow: none; } /* LINKS ----------------- */ a { color: #337fda; text-decoration: none; } a:hover { color: #0e7cff; text-decoration: underline; } a:visited, a:active { color: #006ff4; } /* GRID LAYOUT - 24 column grid ----------------- */ .container { margin: 0 auto; *zoom: 1; width: 940px; } .container:after { content: ""; display: table; clear: both; } .fixed-1, .fixed-2, .fixed-3, .fixed-4, .fixed-5, .fixed-6, .fixed-7, .fixed-8, .fixed-9, .fixed-10, .fixed-11, .fixed-12, .fixed-13, .fixed-14, .fixed-15, .fixed-16, .fixed-17, .fixed-18, .fixed-19, .fixed-20, .fixed-21, .fixed-22, .fixed-23, .fixed-24 { display: inline; float: left; margin-right: 20px; } * html .fixed-1, * html .fixed-2, * html .fixed-3, * html .fixed-4, * html .fixed-5, * html .fixed-6, * html .fixed-7, * html .fixed-8, * html .fixed-9, * html .fixed-10, * html .fixed-11, * html .fixed-12, * html .fixed-13, * html .fixed-14, * html .fixed-15, * html .fixed-16, * html .fixed-17, * html .fixed-18, * html .fixed-19, * html .fixed-20, * html .fixed-21, * html .fixed-22, * html .fixed-23, * html .fixed-24 { overflow-x: hidden; } .fixed-1 { width: 20px; } .fixed-2 { width: 60px; } .fixed-3 { width: 100px; } .fixed-4 { width: 140px; } .fixed-5 { width: 180px; } .fixed-6 { width: 220px; } .fixed-7 { width: 260px; } .fixed-8 { width: 300px; } .fixed-9 { width: 340px; } .fixed-10 { width: 380px; } .fixed-11 { width: 420px; } .fixed-12 { width: 460px; } .fixed-13 { width: 500px; } .fixed-14 { width: 540px; } .fixed-15 { width: 580px; } .fixed-16 { width: 620px; } .fixed-17 { width: 660px; } .fixed-18 { width: 700px; } .fixed-19 { width: 740px; } .fixed-20 { width: 780px; } .fixed-21 { width: 820px; } .fixed-22 { width: 860px; } .fixed-23 { width: 900px; } .fixed-24 { width: 940px; margin-right: 0; } /* LEFT SIDEBAR ----------------- */ .left-sidebar #content { display: inline; float: right; margin-right: 0; } .left-sidebar #sidebar { display: inline; float: left; } /* ONE COLUMN ----------------- */ .one-column #page, .one-column .main-navigation, .one-column .secondary-navigation, .one-column #custom-header { width: 690px; } .one-column #custom-header img, .one-column .nav, .one-column #main, .one-column #colophon { width: 100%; } .one-column .main-navigation #searchform { display: none; } .one-column .secondary-nav { overflow: hidden; } .one-column #content { margin-top: 30px; padding: 0; width: 100%; } .one-column article { padding: 20px; } .one-column .footer-left { width: 49%; } .one-column .footer-right { width: 45%; } .one-column #footer-sidebar .footer-widget { width: 215px; } .one-column #footer-sidebar .footer-3 { margin-right: 0; } /* ============================================================================= - Typography Headings, text element, lists, code, and more ============================================================================= */ /* HEADING ----------------- */ h1, h2, h3, h4, h5, h6 { font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-weight: bold; } /* TEXT ELEMENT ----------------- */ p { margin: 0 0 1.5em; } em { font-style: italic; } b, strong { font-weight: bold; } small { font-size: 85%; } cite { font-style: normal; } dfn { font-style: italic; font-weight: bold; } sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; vertical-align: sub; } sub { bottom: -0.25em; vertical-align: super; } abbr, acronym { font-size: 90%; text-transform: uppercase; border-bottom: 1px dotted #ddd; cursor: help; } del { color: #666666; text-decoration: line-through; vertical-align: baseline; } pre { background: #ffff99; border-bottom: 1px solid #ff2; border-top: 1px solid #ff2; color: #990; margin: 1.5em 0; padding: 0.75em 0.45em; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } code { background: #ffff99; color: #990; font-size: 0.786em; line-height: 1.909em; padding: 0.3em; } pre, code, tt { font-family: "andale mono", "lucida console", monospace; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* BLOCKQUOTE ----------------- */ blockquote { border-left: 3px solid #eee; color: #666666; font-style: italic; margin: 1em 40px; padding-left: 1.35em; } blockquote em, blockquote i, blockquote cite { font-style: normal; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } address { display: block; margin: 0 0 1.5em; font-style: italic; } /* LISTS ----------------- */ ul, ol { margin: 1em 0; padding: 0 0 0 2.25em; } ul { list-style: disc; } ol { list-style-type: decimal; } ol ol { list-style: upper-alpha; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: lower-alpha; } li ul, li ol { margin: 0; } ul.checks { padding: 0; } ul.checks li { list-style: none; margin: 0; background: url('images/icon-check.png?1331129863') no-repeat 0.15em 0.6em; padding: 0.3em 0 0.3em 1.8em; } dl { margin: 0 1.625em; } dt { font-weight: bold; } dd { margin-bottom: 1.625em; } /* ============================================================================= - Form Base styles for various input types and form layouts ============================================================================= */ /* BASE FORM STYLES ----------------- */ label { font-weight: bold; } fieldset { border: 1px solid #ccc; font-size: 0.857em; line-height: 1.75em; margin: 0 0 1.5em 0; padding: 0 1.4em 1.4em 1.4em; } legend { border: 1px solid #ccc; background: #f5f5f5; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-weight: bold; display: block; left: 0; margin: 0; padding: 0.3em 1.2em; position: relative; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); top: 0; } fieldset, #IE8#HACK { padding-top: 1.4em; } legend, #IE8#HACK { margin-top: 0; margin-bottom: 0; } /* FORMALIZE.CSS - http://formalize.me/ ----------------- */ /* INPUT WIDTH ----------------- */ .input_tiny { width: 50px; } .input_small { width: 100px; } .input_medium { width: 150px; } .input_large { width: 200px; } .input_xlarge { width: 250px; } .input_xxlarge { width: 300px; } .input_xxxlarge { width: 350px; } .input_full { width: 100%; } .input_full_wrap { display: block; padding-right: 8px; } /* UI Consistency ----------------- */ input[type="search"]::-webkit-search-decoration { display: none; } input:invalid, button:invalid, select:invalid, textarea:invalid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } input:focus, button:focus, select:focus, textarea:focus { -webkit-box-shadow: #0066ff 0 0 5px 0; -moz-box-shadow: #0066ff 0 0 5px 0; box-shadow: #0066ff 0 0 5px 0; z-index: 1; } input[type="file"]:focus, input[type="file"]:active, input[type="radio"]:focus, input[type="radio"]:active, input[type="checkbox"]:focus, input[type="checkbox"]:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } button, input[type="reset"], input[type="submit"], input[type="button"] { -webkit-appearance: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; background: #dddddd; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFDDDDDD'); background: url('images/button.png?1331603458') repeat-x, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background: url('images/button.png?1331603458') repeat-x, -webkit-linear-gradient(#ffffff, #dddddd); background: url('images/button.png?1331603458') repeat-x, -moz-linear-gradient(#ffffff, #dddddd); background: url('images/button.png?1331603458') repeat-x, -o-linear-gradient(#ffffff, #dddddd); background: url('images/button.png?1331603458') repeat-x, -ms-linear-gradient(#ffffff, #dddddd); background: url('images/button.png?1331603458') repeat-x, linear-gradient(#ffffff, #dddddd); border: 1px solid; border-color: #dddddd #bbbbbb #999999; cursor: pointer; color: #333333; font: bold 12px/1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; outline: 0; overflow: visible; margin: 0; padding: 3px 10px; *padding-top: 2px; *padding-bottom: 0; text-shadow: white 0 1px 1px; vertical-align: top; width: auto; } button:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover { background: #eee; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(1px, #eeeeee), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(#ffffff, #eeeeee 1px, #cccccc); background-image: -moz-linear-gradient(#ffffff, #eeeeee 1px, #cccccc); background-image: -o-linear-gradient(#ffffff, #eeeeee 1px, #cccccc); background-image: -ms-linear-gradient(#ffffff, #eeeeee 1px, #cccccc); background-image: linear-gradient(#ffffff, #eeeeee 1px, #cccccc); } button:active, input[type="reset"]:active, input[type="submit"]:active, input[type="button"]:active { background: #ddd; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFDDDDDD'); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(1px, #dddddd), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(#ffffff, #dddddd 1px, #eeeeee); background-image: -moz-linear-gradient(#ffffff, #dddddd 1px, #eeeeee); background-image: -o-linear-gradient(#ffffff, #dddddd 1px, #eeeeee); background-image: -ms-linear-gradient(#ffffff, #dddddd 1px, #eeeeee); background-image: linear-gradient(#ffffff, #dddddd 1px, #eeeeee); -webkit-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0; -moz-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0; box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0; border-color: #999999 #bbbbbb #dddddd; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border: 0; padding: 0; } button { *padding-top: 1px; *padding-bottom: 1px; } textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-appearance: none; background-color: white; border: 1px solid; border-color: #ddd; color: black; outline: 0; margin: 0; padding: 3px 4px; text-align: left; font-size: 13px; font-family: Arial, "Liberation Sans", FreeSans, sans-serif; height: 2em; vertical-align: top; *padding-top: 2px; *padding-bottom: 1px; *height: auto; } textarea[disabled], select[disabled], input[type="date"][disabled], input[type="datetime"][disabled], input[type="datetime-local"][disabled], input[type="email"][disabled], input[type="month"][disabled], input[type="number"][disabled], input[type="password"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="text"][disabled], input[type="time"][disabled], input[type="url"][disabled], input[type="week"][disabled] { background-color: #eeeeee; } button[disabled], input[disabled], select[disabled], select[disabled] option, select[disabled] optgroup, textarea[disabled] { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; color: #888888; cursor: default; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #888888; } input:-moz-placeholder, textarea:-moz-placeholder { color: #888888; } input.placeholder_text, textarea.placeholder_text { color: #888888; } textarea, select[size], select[multiple] { height: auto; } select[size="0"], select[size="1"] { height: 1.8em; *height: auto; } @media (-webkit-min-device-pixel-ratio: 0) { select[size], select[multiple], select[multiple][size] { background-image: none; padding-right: 3px; } select, select[size="0"], select[size="1"] { background-image: url('images/select_arrow.gif?1331603458'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; } ::-webkit-validation-bubble-message { -webkit-box-shadow: none; box-shadow: none; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black)); border: 1px solid; border-color: #747474 #5e5e5e #4f4f4f; color: white; font: 13px/17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif; overflow: hidden; padding: 15px 15px 17px; text-shadow: black 0 0 1px; height: 16px; } ::-webkit-validation-bubble-arrow, ::-webkit-validation-bubble-top-outer-arrow, ::-webkit-validation-bubble-top-inner-arrow { -webkit-box-shadow: none; box-shadow: none; background: #666666; border: 0; } } textarea { min-height: 40px; overflow: auto; resize: vertical; width: 100%; } optgroup { color: black; font-style: normal; font-weight: normal; font-family: Arial, "Liberation Sans", FreeSans, sans-serif; } optgroup::-moz-focus-inner { border: 0; padding: 0; } /* ============================================================================= - Table Base styles for all tables ============================================================================= */ /* STANDARD TABLE ----------------- */ table { width: 100%; font-size: 0.857em; line-height: 1.75em; } table, td { border: 1px solid #e8e8e8; border-collapse: collapse; margin: 1.5em 0; padding: 5px 10px; } th { background-color: #e8e8e8; border-right: 1px solid #e0e0e0; color: #666; margin: 5px 0 10px; padding: 5px 10px; text-transform: uppercase; text-align: left; } table button, table input { *overflow: auto; } /* STRIPE TABLE ----------------- */ table.striped tr:nth-child(odd) { background-color: #f9f9f9; } /* ============================================================================= - Images Basic and global styles for images, caption, & gallery ============================================================================= */ /* BASE IMAGES STYLES ----------------- */ .entry-content img, .comment-content img, .widget img, img.photo { 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 */ } img.size-full, img.size-large { max-width: 97.5%; height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } img.alignleft, img.alignright, img.aligncenter { margin-top: 0.6em; } /* CAPTION ----------------- */ p img, .wp-caption { margin-top: 0.6em; } .wp-caption { background: #000; margin-bottom: 1.625em; max-width: 96%; padding: 15px 10px 10px; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .wp-caption img { display: block; margin: 0 auto; max-width: 98%; } .wp-caption:hover { background: #eee; } .wp-caption:hover .wp-caption-text { color: #333; } .wp-caption:hover .wp-caption-text:before { color: #333; } .wp-caption .wp-caption-text { color: #fff; font-size: 0.923em; line-height: 1.75em; margin: 0; padding: 15px 0 5px 40px; position: relative; } .wp-caption .wp-caption-text:before { color: #fff; content: '\2014'; font-size: 1em; line-height: 1.5em; font-style: normal; font-weight: bold; margin-right: 5px; position: absolute; left: 10px; top: 17px; } .gallery-caption { color: #666666; font-size: 0.857em; line-height: 1.75em; } /* GALLERY ----------------- */ .gallery { margin: auto; overflow: hidden; width: 100%; } .gallery .gallery-item { display: inline; float: left; margin-bottom: 0.6em; text-align: center; } .gallery .gallery-caption { background: #f7f7f7; border: 1px solid #e6e6e6; clear: both; color: #888; display: block; font-size: 0.857em; line-height: 1.75em; margin: 10px 0; padding: 5px 3px; text-align: center; width: 100%; } .gallery dl { margin: 0; } .gallery img { border: 1px solid #e0e0e0; } .gallery a:hover img { border-color: #ccc; } .gallery br { clear: both; } .gallery br + br { display: none; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.333%; } .gallery-columns-4 .gallery-item { width: 23%; margin-right: 2%; } .gallery-columns-5 .gallery-item { width: 18%; margin-right: 2%; } .gallery-columns-6 .gallery-item { width: 14.666%; margin-right: 2%; } .gallery-columns-7 .gallery-item { width: 12.285%; margin-right: 2%; } .gallery-columns-8 .gallery-item { width: 10.5%; margin-right: 2%; } .gallery-columns-9 .gallery-item { width: 9.111%; margin-right: 2%; } /* Make sure embeds and iframes fit their containers ----------------- */ embed, iframe, object { max-width: 100%; width: 100%; } /* ============================================================================= - Header Styles for header area such as header, custom header, menus etc. ============================================================================= */ #site-branding { margin-bottom: 1.5em; } #site-branding .site-title { font-size: 2.143em; line-height: 1.4em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-weight: bold; display: inline; float: left; } #site-branding .site-title a { color: #555555; } #site-branding .site-title a:hover { color: #337fda; text-decoration: none; } #site-branding .site-description { display: inline; float: right; padding-top: 0.75em; } #site-branding .site-logo { overflow: hidden; } #custom-header { background-color: #337FDA; height: 200px; width: 940px; } #custom-header a, #custom-header img { display: block; } /* MAIN NAVIGATION ----------------- */ .main-navigation { background-color: #f0f0f0; border-bottom: 1px solid #e6e6e6; margin: 0 0 1px; position: relative; } .main-navigation ul { list-style: none; margin: 0 20px 0 0; padding: 0; } .main-navigation ul li { display: inline; float: left; position: relative; } .main-navigation ul li:hover { background-color: #eaeaea; } .main-navigation ul li a { display: block; color: #555555; padding: 0.45em 1.05em; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 1px white; word-wrap: break-word; } .main-navigation ul ul { border-color: #f0f0f0 #e6e6e6; border-style: solid; border-width: 1px 1px; display: none; position: absolute; top: 100%; width: 200px; z-index: 9; } .main-navigation ul ul li { border-bottom: 1px solid #e0e0e0; border-top: 1px solid #f6f6f6; width: 100%; } .main-navigation ul ul li:first-child { border-top: none; } .main-navigation ul ul li a { background-color: #f0f0f0; display: block; font-size: 0.857em; line-height: 1.75em; text-transform: capitalize; } .main-navigation ul ul li a:hover { background-color: #eaeaea; } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation #searchform input[type="submit"] { background: url('images/icon_search.png?1333732886') no-repeat right center; border: none; position: absolute; right: 10px; text-indent: -9999em; top: 7px; z-index: 9; } .main-navigation #searchform input[type="text"] { border: 1px solid #ddd; height: 2.2em; margin: 3px 0 0; padding: 5px; position: relative; width: 215px; } /* SECONDARY NAVIGATION ----------------- */ .secondary-navigation { background-color: white; border-bottom: 3px solid #f0f0f0; border-top: 1px solid #E6E6E6; } .secondary-navigation ul { list-style: none; margin: 0; padding: 0; } .secondary-navigation ul li { display: inline; float: left; position: relative; } .secondary-navigation ul li:hover { background-color: #f0f0f0; } .secondary-navigation ul li a { border-right: 1px solid #E6E6E6; display: block; color: #555555; padding: 0.45em 1.05em; text-decoration: none; word-wrap: break-word; } .secondary-navigation ul li a:hover { text-shadow: 0 1px 1px white; } .secondary-navigation ul ul { display: none; margin-left: -1px; position: absolute; top: 100%; width: 200px; z-index: 9; } .secondary-navigation ul ul li { border-bottom: 1px solid #e0e0e0; border-top: 1px solid #f6f6f6; width: 100%; } .secondary-navigation ul ul li:first-child { border-top: none; } .secondary-navigation ul ul li a { background-color: #f0f0f0; border-left: 1px solid #E6E6E6; display: block; font-size: 0.857em; line-height: 1.75em; text-transform: capitalize; } .secondary-navigation ul ul li a:hover { background-color: #eaeaea; } .secondary-navigation ul ul ul { left: 100%; top: 0; } /* ============================================================================= - Main styles This is our main styles for theme development ============================================================================= */ #page { background-color: white; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); margin-bottom: 1.5em; padding: 1.5em; } #main { margin-bottom: 1.5em; } #content.fixed-16 { padding-top: 1.5em; } #content .sticky { background: #f0f0f0; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); border-bottom: 0; padding: 1.5em; } #content article { border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 0.071em; padding-bottom: 1.429em; margin-bottom: 2.25em; overflow: hidden; } #content article.attachment { border: 0; } #content h1 { font-size: 1.714em; line-height: 1.138em; } #content h2 { font-size: 1.5em; line-height: 1.3em; } #content h3 { font-size: 1.286em; line-height: 1.517em; } #content h4 { font-size: 1.143em; line-height: 1.313em; } #content h5 { font-size: 1em; line-height: 1.5em; } #content h6 { font-size: 1em; line-height: 1.5em; } .entry-header .entry-title { font-size: 1.786em; line-height: 1.68em; } .entry-header .entry-title a:hover { color: #0e7cff; text-decoration: none; } .entry-meta { color: #999999; font-size: 0.786em; line-height: 1.909em; } .entry-thumbnail { margin-top: 0.75em; } .entry-thumbnail a, .entry-thumbnail img { display: block; } .entry-content { margin-top: 0.75em; } .entry-content .widget { margin-left: 0; } .entry-content .widget_archive select { margin-top: 0; } .post-edit-link { clear: both; } .error404 #content #searchform { display: inline; float: left; margin: 0 0 20px; width: 100%; } .error404 #content #searchform input[type="text"] { width: 85%; } .page-title { margin-bottom: 0.75em; } /* AUTHOR PAGE ----------------- */ .author-info .author-wrap { background: #eeeeee; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-bottom: 30px; } .author-info .author-wrap .inner-author-wrap { padding: 10px 5px; } .author-info .author-wrap .author-photo { display: inline; float: left; margin-right: 20px; } .author-info .author-wrap .author-photo img { background: white; padding: 3px; border: 1px solid #ddd; } .author-info .author-wrap .author-desc { overflow: hidden; } /* Attachment Page */ .attachment img { display: block; max-width: 650px; } .attachment-navigation img { display: inline; float: left; margin: 0 20px 10px 0; } p.download-image { text-align: center; } #image-navigation { font-size: 0.857em; line-height: 1.75em; } /* ============================================================================= - Sidebar & Widget Styles for sidebar and all widget areas ============================================================================= */ #sidebar { font-size: 0.857em; line-height: 1.75em; padding-top: 1.75em; } .widget { margin-bottom: 1.75em; margin-left: 20px; color: #777; } .widget:first-child { margin-top: 0; } .widget .widget-title { color: #aaa; font-size: 0.917em; line-height: 1.909em; text-transform: uppercase; } .widget ul { margin: 0; padding: 0 0 0 1.5em; } /* ARCHIVES WIDGET ----------------- */ .widget_archive select { margin-top: 1.2em; width: 100%; } /* CALENDAR WIDGET ----------------- */ .widget_calendar { border: none; } #calendar_wrap th { border: none; } #calendar_wrap td { color: #aaa; } #wp-calendar tr td { background: #f5f5f5; border: 1px solid white; padding: 3px 0 2px; text-align: center; } #wp-calendar caption { color: #222222; font-weight: bold; padding-bottom: 4px; text-align: left; } #wp-calendar #prev { text-align: left; } #wp-calendar #next { text-align: right; } /* CATEGORY WIDGET ----------------- */ .widget_categories ul ul.children { padding-left: 1.5em; } .widget_categories select { margin-top: 1.2em; width: 100%; } /* SEARCH WIDGET ----------------- */ .widget_search { overflow: hidden; } .widget_search input[type="text"] { background: #fafafa; border: 1px solid #eeeeee; display: inline; float: left; margin-right: 5px; padding: 5px 10px; width: 150px; } .widget_search input[type="text"]:focus { background: #fff; } .screen-reader-text { display: none; } /* CUSTOM TWITTER WIDGET ----------------- */ .widget_rumputhijau_twitter_widget ul li { border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 8px; } .widget_rumputhijau_twitter_widget ul li a { display: inline; } .follow-me { display: block; margin-top: 10px; } /* ============================================================================= - Comments Styles for comments area(comment form & comment lists) ============================================================================= */ .comments-title { margin-bottom: 1.5em; } /* COMMENT LISTS ----------------- */ .commentlist { list-style: none; margin: 0; padding: 0; font-size: 0.857em; line-height: 1.75em; } .commentlist li article { margin-bottom: 3em; } .commentlist li .children { list-style: none; margin-bottom: 3em; } .commentlist li .children article { margin-bottom: 1.5em; } .commentlist li .children article:last-child { margin-bottom: 0; } .commentlist li.pingback { border-bottom: 1px solid #eeeeee; margin-bottom: 1.5em; padding-bottom: 0.75em; } .commentlist li.pingback p { margin: 0; } .commentlist li.comment #respond .comment-notes, .commentlist li.comment #respond .logged-in-as { font-size: 0.917em; line-height: 1.909em; } .commentlist li.comment #respond label { font-size: 1em; line-height: 1.75em; } .commentlist li.comment #respond .form-allowed-tags { font-size: 1em; line-height: 1.75em; } .commentlist li.comment #respond .form-allowed-tags code { font-size: 0.917em; line-height: 1.909em; } .commentlist li.bypostauthor { display: block; } .comment-meta { display: block; font-size: 0.917em; line-height: 1.909em; margin-bottom: 1.05em; overflow: hidden; } .comment-meta img.avatar { border: 1px solid #eeeeee; display: inline; float: left; margin-right: 0.75em; padding: 0.15em; } .comment-meta .fn { font-size: 1.091em; line-height: 1.75em; display: block; } .comment-meta .comment-awaiting-moderation { background: #fbe3e4; border: 1px solid #fbc2c4; color: #8a1f11; clear: both; display: block; margin-top: 1.2em; padding: 0.225em; } .comment-content { /* RESET TYPOGRAPHY ON COMMENT CONTENT ----------------- */ } .comment-content h1 { font-size: 2em; line-height: 1.313em; } .comment-content h2 { font-size: 1.75em; line-height: 1.5em; } .comment-content h3 { font-size: 1.5em; line-height: 1.75em; } .comment-content h4 { font-size: 1.333em; line-height: 1.969em; } .comment-content h5 { font-size: 1.167em; line-height: 2.25em; } .comment-content h6 { font-size: 1.167em; line-height: 2.25em; } .comment-content code { font-size: 0.917em; line-height: 1.909em; } .comment-navigation { font-size: 0.786em; line-height: 1.909em; margin: 3em 0; overflow: hidden; } /* COMMENT FORMS ----------------- */ .comment-notes, .logged-in-as { font-size: 0.786em; line-height: 1.909em; } .form-allowed-tags { font-size: 0.857em; line-height: 1.75em; } .form-allowed-tags code { font-size: 0.917em; line-height: 1.909em; } #respond { margin: 0; } #respond label { font-size: 0.857em; line-height: 1.75em; } #respond input[type="text"], #respond textarea { border: 1px solid #ddd; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset; } #respond input[type="text"]:focus, #respond textarea:focus { -webkit-box-shadow: 0 0 5px 0 #0066ff; -moz-box-shadow: 0 0 5px 0 #0066ff; box-shadow: 0 0 5px 0 #0066ff; } #respond input[type="text"] { display: inline; float: left; margin: 0 5px 10px 0; width: 100%; } #respond textarea { font-size: 1.143em; line-height: 1.313em; padding: 7px; } #respond input[type="submit"] { padding: 10px 15px; } #respond .required { color: #f00; } /* ============================================================================= - Footer Styles for footer area ============================================================================= */ #colophon { border-top: 5px solid #f0f0f0; color: #fff; } #colophon #footer-sidebar { border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 0.071em; padding-bottom: 1.429em; font-size: 0.857em; line-height: 1.75em; margin-bottom: 1.5em; padding-top: 1.5em; } #colophon .widget { margin-left: 0; } .credits { background: #337fda; } .credits a { color: white; } .footer-left { text-align: left; } .footer-left p { padding: 10px 0 10px 20px; margin: 0; } .footer-right { text-align: right; } .footer-right p { padding: 10px 20px 10px 0; margin: 0; } /* ============================================================================= - Utility List of helper classes (eg clearfix, alignment, etc) ============================================================================= */ /* CLEARFIX http://nicolasgallagher.com/micro-clearfix-hack/ ----------------- */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* IMAGE REPLACEMENT ----------------- */ .ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } /* HIDE/SHOW ELEMENT ----------------- */ .hide { display: none; visibility: hidden; } .show { display: block; visibility: visible; } .invisible { 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; } /* FLOATING ALIGNMENT ----------------- */ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .alignnone { display: block; } /* TEXT ALIGNMENT ----------------- */ .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } /* HR/STANDALONE BORDER ----------------- */ hr { border-top: 1px solid #ccc; border-bottom: 0; border-right: 0; border-left: 0; clear: both; height: 1px; margin: 1.5em 0; min-height: 0; } hr.dotted { border-style: dotted; } hr.dashed { border-style: dashed; } hr.darkborder { border-color: black; } hr.lightborder { border-color: white; } /* MISC CLASSES ----------------- */ .first { margin-left: 0; padding-left: 0; } .last { margin-right: 0; padding-right: 0; } .top { margin-top: 0; padding-top: 0; } .bottom { margin-bottom: 0; padding-bottom: 0; } /* Text meant only for screen readers */ .assistive-text { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } /* ============================================================================= - WordPress Pagination - Post pages - Post navigation previous_post_link() & next_post_link() ============================================================================= */ /* PAGING NAVIGATION - Wp-pagenavi ----------------- */ .paging-navigation { display: block; margin: 20px 0; } .paging-navigation .wp-pagenavi { margin: 0 0 15px; padding: 5px 0 4px; } .paging-navigation .wp-pagenavi a, .paging-navigation .wp-pagenavi a:visited { background: white; border: 1px solid #ddd; margin: 0 0 0 2px; padding: 7px 10px 6px; text-decoration: none; } .paging-navigation .wp-pagenavi .on, .paging-navigation .wp-pagenavi .current { border: 1px solid #ddd; margin: 0 0 0 2px; padding: 7px 10px 6px; } .paging-navigation .wp-pagenavi .extend, .paging-navigation .wp-pagenavi .pages { background: white; padding: 7px 10px 6px; } .paging-navigation .wp-pagenavi .current, .paging-navigation .wp-pagenavi a:hover { background: #337fda; color: white; text-decoration: none; } /* POST PAGES ----------------- */ .post-pages { clear: both; padding: 1.5em 0; } .post-pages span, .post-pages a span { cursor: pointer; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; *display: inline; *zoom: 1; } .post-pages span, .post-pages a span { *display: inline; } .post-pages a span { background: #f5f5f5; border: 1px solid #e7e7e7; color: #666; padding: 2px 8px; } .post-pages a:hover span { color: #666; text-decoration: none; border-color: #c1c1c1; } /* POST NAVIGATION ----------------- */ .post-navigation { margin: 1.5em 0; } /* ============================================================================= - Miscellaneous Miscellaneous styles ============================================================================= */ /* BREADCRUMBS ----------------- */ #breadcrumbs { border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; font-size: 0.786em; line-height: 1.909em; margin-bottom: 1.65em; padding: 5px 0; } /* CONTACT FORM 7 ----------------- */ .entry-content .wpcf7 { background: #eee; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; margin: 0 0 1.5em 0; padding: 1.4em; } .entry-content .wpcf7 input[type="text"], .entry-content .wpcf7 input[type="email"], .entry-content .wpcf7 textarea { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 0 1px rgba(0, 0, 0, 0.2) inset; } .entry-content .wpcf7 input[type="text"]:focus, .entry-content .wpcf7 input[type="email"]:focus, .entry-content .wpcf7 textarea:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .entry-content .wpcf7 input[type="text"], .entry-content .wpcf7 input[type="email"] { height: 2.5em; } .entry-content div.wpcf7-validation-errors, .entry-content div.wpcf7-mail-sent-ng { background: #f00; border: 2px solid #f00; color: #fff; } .entry-content span.wpcf7-not-valid-tip { background: #f00; border: 1px solid #f00; color: #fff; left: 105%; padding: 0.2em 0.75em; top: -21%; width: 18em; } .entry-content div.wpcf7 img.ajax-loader { margin-left: 1em; }