/* Theme Name: belajar Theme URI: http://belajar-wordpress.com/2013/01/belajar-responsive-wordpress-theme/ Author: Zifana Safira Author URI: http://belajar-wordpress.com/ Description: belajar is clean theme that build based on HTML5, css3 and responsive design that ready to view in various screen resolution and device. Version: 0.0.3 License: GNU General Public License License URI: license.txt Tags: white, black, gray, light, custom-menu, custom-header, custom-background, one-column, two-columns, left-sidebar, right-sidebar, flexible-width, theme-options, threaded-comments, full-width-template, sticky-post, translation-ready, flexible-width, rtl-language-support */ /* Let's default this puppy out -------------------------------------------------------------------------------*/ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, hgroup, nav, section {display: block;} /* Responsive images and other embedded objects Note: keeping IMG here will cause problems if you're using foreground images as sprites. If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */ img, object, embed {max-width: 100%;} /* force a vertical scrollbar to prevent a jumpy page */ html {overflow-y: scroll;} /* we use a lot of ULs that aren't bulleted. don't forget to restore the bullets within content. */ ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} /* tables still need cellspacing="0" in the markup */ table {border-collapse: collapse; border-spacing: 0;} th {font-weight: bold; vertical-align: bottom;} td {font-weight: normal; vertical-align: top;} hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} input, select {vertical-align: middle;} pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } input[type="radio"] {vertical-align: text-bottom;} input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;} .ie6 input {vertical-align: text-bottom;} select, input, textarea {font: 99% sans-serif;} table {font-size: inherit; font: 100%;} /* Accessible focus treatment people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active {outline: none;} small {font-size: 85%;} strong, th {font-weight: bold;} td, td img {vertical-align: top;} /* Make sure sup and sub don't screw with your line-heights gist.github.com/413930 */ sub, sup {font-size: 75%; line-height: 0; position: relative;} sup {top: -0.5em;} sub {bottom: -0.25em;} /* standardize any monospaced elements */ pre, code, kbd, samp {font-family: monospace, sans-serif;} /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], button {cursor: pointer;} /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea {margin: 0;} /* make buttons play nice in IE */ button {width: auto; overflow: visible;} /* scale images in IE7 more attractively */ .ie7 img {-ms-interpolation-mode: bicubic;} /* prevent BG image flicker upon hover */ .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} /* let's clear some floats */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* Ok, this is where the fun starts. -------------------------------------------------------------------------------*/ /* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */ body {font: 13px Helmet, Freesans, sans-serif;} /* using local fonts? make sure to read up on Paul Irish's Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */ /* we like off-black for text */ body, select, input, textarea {color: #333;} a { color: #E05522; text-decoration:none; } a:hover, a:focus, a:active { text-decoration: underline; } /* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */ ::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;} ::selection {background: #fcd700; color: #fff; text-shadow: none;} /* j.mp/webkit-tap-highlight-color */ a:link {-webkit-tap-highlight-color: #fcd700;} ins {background-color: #fcd700; color: #000; text-decoration: none;} mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;} /* ============================================================================= Typography ========================================================================== */ /* * Addresses font sizes and margins set differently in IE6/7. * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. */ h1 { font-size: 1.8em; margin: 0.67em 0; font-family: Impact, Charcoal, sans-serif; font-weight: normal; text-transform:uppercase; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } h1, h2, h3, h4, h5, h6 { text-shadow:#aaa 1px 1px 2px; } /* Text elements */ p { line-height: 25px; text-align: justify; } ul, ol { margin: 0 0 1.4em 2em; } ul { list-style: square; } ol { list-style-type: decimal; } ol ol { list-style: upper-alpha; } ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; } dl { margin: 0 1.4em; } dt { font-weight: bold; } dd { margin-bottom: 1.4em; } strong { font-weight: bold; } cite, em, i { font-style: italic; } blockquote { font-family: Georgia, "Bitstream Charter", serif; font-style: italic; font-weight: normal; margin: 0 2em; } 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: #f4f4f4; font: 13px "Courier 10 Pitch", Courier, monospace; line-height: 1.5; margin-bottom: 1.4em; padding: 0.75em 1.4em; } 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.4em; } 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; } input[type=text], textarea { background: #fafafa; -moz-box-shadow: 0 2px 5px rgba(100,100,100,0.1); -webkit-box-shadow: 0 2px 5px rgba(100,100,100,0.1); box-shadow: 0 2px 5px rgba(100,100,100,0.1); border: 1px solid #ddd; color: #888; } input[type=text]:focus, textarea:focus { color: #333; } textarea { padding-left: 3px; width: 98%; } input[type=text] { padding: 3px; } .assistive-text { display:none; } /* ============================================================================= Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } table { border: 1px solid #EEEEEE; margin: 0 0 1.625em; text-align: left; width: 100%; } tr th, thead th { background: none repeat scroll 0 0 #EEEEEE; font-weight: bold; padding: 5px 10px; } tr td { border: 1px solid #EEEEEE; padding: 5px 10px; } tr:nth-child(2n+1) td { background: none repeat scroll 0 0 #F3F3F7; } tr th, thead th { background: none repeat scroll 0 0 #24454C; color: #1AD3F1; } tr td { background: none repeat scroll 0 0 #D6D0D0; } tr:nth-child(2n+1) td { background: none repeat scroll 0 0 #FFFFFF; } table, tr td { border-color: #999999; color: #24454C; } /* Text meant only for screen readers */ .screen-reader-text, .assistive-text { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Alignment */ .alignleft { display: inline; float: left; } .alignright { display: inline; float: right; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /* =Responsive Structure ----------------------------------------------- */ @media (min-width: 1060px) { .select-menu { display: none; } .single .entry-header .entry-meta { display:none; } .post-date { border:1px solid #e6e6e6; border-bottom:1px solid #e3e3e3; padding:10px 0; text-align:center; letter-spacing: 1px; box-shadow: inset 0 8px 30px 8px rgba(255, 255, 255, 0.25); margin-bottom:20px; } .post-date span { display:block; } .post-date .sep { display:none; } .post-date .month { font-size:18px; } .post-date .day { font-size:40px; line-height:48px; } .post-date .year { font-size:18px; } .tags, .categories { margin-bottom:10px; } .tags span, .categories span { text-transform:uppercase; display:block; border-bottom:1px solid #ddd; border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:8px; } .single #comments { clear:both; float:right; width:78%; margin-right:1.5%; } .page #comments { float:left; margin-left:1.5%; width:98.5%; } } @media (max-width: 1060px) { .select-menu { display: none; } .single .hentry { width:auto; float:none; } .single footer.entry-meta { display:none; } } @media (max-width: 880px) { /* Simplify the basic layout */ .menu { display: none; } .select-menu { display: inline-block; width:100%; } #main { margin-right:0; } .layout-2cl #main { margin-left:0; } #page { margin: 0; padding: 0 ; } #content { display:block; width:100%; margin: 0; padding: 0; } #secondary { display:none; } #branding { height:auto border-bottom: none; } .header-right img{ width:100%; } .attachment #content { width:auto; } /* Make sure embeds fit their containers */ embed, object { max-width: 100%; } } @media (max-width: 660px) { .item {height:auto;} /* Talking avatars take up too much room at this size */ .commentlist { padding-left:0; } .commentlist > li:before, .commentlist > li.bypostauthor:before { content: ''; left:0; } .commentlist > li.comment, .commentlist > li.pingback { margin-left: 0 !important; } .commentlist .avatar { background: transparent; display: block; padding: 0; position: static; } .commentlist .children .avatar { background: none; left: 2em; padding: 0; position: absolute; top: 2em; } .one-column #respond { margin-left:0; } } @media (max-width: 480px) { .post-thumbnail { float: none; width: auto; background:none; border:none; } .post-thumbnail img { border:1px solid #ddd; margin:0; } .post-wrap { float: none; width: auto; } } /* =Structure -------------------------------------------------------------- */ #page { display: block; margin: 1em auto; max-width:980px; } #primary { float: left; margin: 0 -290px 0 0; width: 100%; } #content { margin: 0 290px 0 0; } #main .widget-area { float: right; overflow: hidden; width: 275px; } #colophon { clear: both; display: block; width: 100%; } /* Increase the size of the content area for templates without sidebars */ .full-width #content, .image-attachment #content, .error404 #content { margin: 0; } /* sitemap */ .sitemap{ -moz-column-width:20em; -webkit-column-width:20em; column-width:20em; -moz-column-gap:2em; -webkit-column-gap:2em; column-gap:2em; padding: 5px; } .sitemap h4 { -webkit-column-span: all; column-span: all; background: silver } /* =Header -------------------------------------------------------------- */ hgroup { background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE) repeat scroll 0 0 #EEEEEE; border: 1px solid #DDDDDD; -o-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; box-shadow: 0 1px 0 #9A9A9A; margin: 0 0 1px; position: relative; text-align:center; z-index: 0; } hgroup:before { border: 1px dashed #CCCCCC; bottom: 3px; box-shadow: 0 0 0 1px #FFFFFF; content: ""; left: 3px; position: absolute; right: 3px; top: 3px; z-index: -1; } h1.site-title a:link, h1#site-title a:visited { margin:0; color:#616161; font-size: 2.5em; text-shadow: 0 1px 1px #bbb, 0 2px 0 #999, 0 3px 0 #888, 0 4px 0 #777, 0 5px 0 #666, 0 6px 0 #555, 0 7px 0 #444, 0 8px 0 #333, 0 9px 7px #302314; } h1.site-title a:hover, h1#site-title a:active { text-decoration: none; text-shadow: 0 1px 1px #ddd, 0 2px 0 #c5bba4, 0 3px 0 #c5bba5, 0 4px 0 #b7ae98, 0 5px 0 #a39a87, 0 6px 0 #8b8472, 0 7px 0 #726c5c, 0 8px 0 #5b5547, 0 9px 7px #474136; } .site-description { font-size: 1.4em; font-weight: 400; text-align:center; color: #999; margin-bottom: 10px; text-shadow: 0px 2px 3px #666; } /* =Menu -------------------------------------------------------------- */ .menu { position: relative; width: 100%; background: #ddd; color: rgba(0,0,0, .8); border-bottom: 4px solid black; height: 56px; } .menu:before, .menu:after { z-index: -1; position: absolute; content: ''; bottom: 10px; left: 10px; width: 100%; top: 10%; max-width:500px; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .menu:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } .menu ul { padding:0; margin:0; list-style:none; font-family: 'arial', sans-serif; font-size:14px; text-shadow: 0 1px 1px #FFFFFF; font-weight: bold; } .menu > ul { line-height:25px; } .menu > ul > li { float:left; position:relative; white-space:nowrap; } .menu > ul > li > a { line-height:25px; height:25px; background:#C4C4C4; display:block; box-shadow: 0 2px 2px #999999 inset, 0 1px 0 #FFFFFF; -webkit-box-shadow: 0 2px 2px #999999 inset, 0 1px 0 #FFFFFF; -moz-box-shadow: 0 2px 2px #999999 inset, 0 1px 0 #FFFFFF; margin:14px 6px 0 0; padding:0 10px; color:#999; text-decoration:none; border: 1px solid #999; margin-bottom:1px; -o-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .menu ul ul { position:absolute; left:-9999px; top:60px; margin-top:40px; -webkit-transition: 0s 0.75s; -moz-transition: 0s 0.75s; -ms-transition: 0s 0.75s; -o-transition: 0s 0.75s; transition: 0s 0.75s; } .menu ul ul li a { display:block; float:left; height:30px; width:160px; line-height:30px; background:#ddd; padding:0 10px; color:#999; text-decoration:none; margin-top:50px; margin-bottom:1px; -o-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; box-shadow:0 10px 10px -10px rgba(0,0,0,0.7); -webkit-transition: 0s 0.75s; -moz-transition: 0s 0.75s; -ms-transition: 0s 0.75s; -o-transition: 0s 0.75s; transition: 0s 0.75s; } .menu ul.menu > li:first-child a { background: url(images/home.png) no-repeat scroll 15px 15px transparent !important; height: 54px !important; overflow: hidden; -o-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; margin:0 3px; padding-left: 15px; padding-right: 15px; text-indent: 555px; width: 29px !important; } .menu ul li:hover {z-index:100;} .menu > ul > li:hover > a { background:#ddd; margin-top:0; height:57px; -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.4), 0 20px 20px -10px #fff inset; -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.4), 0 20px 20px -10px #fff inset; box-shadow:0 1px rgba(255, 255, 255, 0.4), 0 20px 20px -10px #fff inset; line-height:58px; } .menu ul li:hover ul {left:0; width:180px; margin-top:0; -webkit-transition: margin 0.25s; -moz-transition: margin 0.25s; -ms-transition: margin 0.25s; -o-transition: margin 0.25s; transition: margin 0.25s; } .menu ul ul li {display:block; opacity:0; -webkit-transition: 0.5s 0.25s; -moz-transition: 0.5s 0.25s; -ms-transition: 0.5s 0.25s; -o-transition: 0.5s 0.25s; transition: 0.5s 0.25s; } .menu ul li:hover ul li {opacity:1; -webkit-transition:0.75s; -moz-transition:0.75s; -ms-transition:0.75s; -o-transition:0.75s; transition:0.75s; } .menu ul li:hover ul li a {margin-top:0; -webkit-transition:0.75s; -moz-transition:0.75s; -ms-transition:0.75s; -o-transition:0.75s; transition:0.75s; } .menu ul li:hover ul li a:hover {background:#555;} .menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;} .menu ul:hover + img {width:100%; height:100%;} /* =Content -------------------------------------------------------------- */ article { padding:5px 10px 5px; } article, .full-width #content{ margin:20px 0 20px 0; background:#f8f8f8; border:1px solid #ddd; display:block; box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 3px #F4F4F4 inset, 0 0 5px rgba(0, 0, 0, 0.1); } .sticky { } .entry-meta { clear: both; display: block; } .single-author .entry-meta .byline { display: none; } .entry-title { clear: both; color: #616161; line-height: 1.1em; margin-bottom: 5px; padding: 0; display:block; } .entry-title a { color: #616161; text-decoration: none; } .entry-title a:hover { color: #FF8238; } .entry-header .entry-meta { border-top: 1px dotted #A5A5A5; color: #747474; display: block; font-size: 11px; margin-bottom: 15px; padding: 10px 0; } #content nav, .page_nav { display: block; overflow: hidden; background: none repeat scroll 0 0 #F1F5F6; border: 1px solid #DFDFDF; width: 100%; height: 50px; } #content nav .nav-previous { float:right; text-align: right; line-height: 50px; margin-right:3%; width: 50%; } #content nav .nav-next { float: left; line-height: 50px; margin-left:3%; width: 50%; } #content #nav-above, #content #nav-above, .paged #content #nav-above, .single #content #nav-above { padding-bottom: 5px; padding-left: 0; padding-right: 0; padding-top: 5px; } .page_nav .page-numbers { border:1px solid gray; color:#900; background-color:#ffffff; margin:0 4px; padding:4px 8px; line-height: 50px; } .page_nav .current { border:1px solid #fff; background-color:#000; color:#fff; } .page_nav .prev,.page_nav .next { border-bottom:1px solid #D05D2A; color:#900; } #nav-below { display:block; } .paged #content #nav-above, .single #content #nav-above { display: block; } #nav-below { margin: 1em 0 0; } .page-link { clear: both; margin: 0 0 1em; } .page .edit-link { clear: both; display: block; } /* 404 page */ .error404 .widget { float: left; width: 33%; } .error404 .widget .widgettitle, .error404 .widget ul { margin-right: 1em; } .error404 .widget_tag_cloud { clear: both; float: none; width: 100%; } /* Notices */ .post .notice, .error404 #searchform { background: #eee; display: block; padding: 1em; } /* Image Attachments */ .image-attachment div.entry-meta { float: left; } .image-attachment nav { float: right; margin: 0 0 1em 0; } .image-attachment .entry-content { clear: both; } .image-attachment .entry-content .entry-attachment { background: #eee; margin: 0 0 1em; padding: 1em; text-align: center; } .image-attachment .entry-content .attachment { display: block; margin: 0 auto; text-align: center; } /* Aside Posts */ .format-aside .entry-header { display: none; } .single .format-aside .entry-header { display: block; } .format-aside .entry-content, .format-aside .entry-summary { padding-top: 1em; } .single .format-aside .entry-content, .single .format-aside .entry-summary { padding-top: 0; } /* Gallery Posts */ .format-gallery .gallery-thumb { float: left; margin: 0 1em 0 0; } /* Image Posts */ .format-image .entry-header { display: none; } .single .format-image .entry-header { display: block; } .format-image .entry-content, .format-image .entry-summary { padding-top: 1em; } .single .format-image .entry-content, .single .format-image .entry-summary { padding-top: 0; } /* =Images -------------------------------------------------------------- */ a img { border: none; } p img { margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */ } /* Resize images to fit the main content area. - Applies only to images uploaded via WordPress by targeting size-* classes. - Other images will be left alone. Use "size-auto" class to apply to other images. */ img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img, .wp-caption { max-width: 100%; /* When images are too wide for containing element, force them to fit. */ height: auto; /* Override height to match resized width for correct aspect ratio. */ } img.alignleft { margin-right: 1em; } img.alignright { margin-left: 1em; } .wp-caption { padding: .5em; text-align: center; } .wp-caption img { margin: .25em; } .wp-caption .wp-caption-text { margin: .5em; } .gallery-caption { } .wp-smiley { margin: 0; } /* =Forms -------------------------------------------------------------- */ #searchform { text-align: center; padding: 14px 0 10px 0; } #searchform label, #searchform input#searchsubmit{ display: none; } #searchform input#s { -o-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 1px solid #bbb; height: 26px; width: 90%; color: #ccc; -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; text-indent: 30px; background: url(images/icn_search.png) no-repeat left,#fff; background-position: 10px 8px; } input[type=text], input#s { outline: none; color: #666666; border: 1px solid #77BACE; -webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; -moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; } textarea { width: 80%; } /* Class for labelling required form items */ .required { color: #cc0033; } /* =Comments -------------------------------------------------------------- */ #respond { margin: 1px; padding: 5px 10px !important; } article.comment { display: block; } #respond input[type=text] { display: block; width: 60%; } #respond textarea { display: block; margin: 0 0 1em; width: 60%; } #respond .form-allowed-tags { border-color: #aaaaaa; border-style: dashed; border-width: 1px 0; font-size: 10px; margin: 0 -10px 10px; padding: 5px 10px; } #respond .form-allowed-tags code { display: block; } #comments-list { margin: 0; overflow: hidden; padding: 0; width: 100%; } li.comment { list-style-type: none; margin-bottom: 12px; overflow: hidden; width: 100%; } li.depth-2, li.depth-3 { margin: 12px 0 0; } li.depth-2 .comment-wrap { width: 78%; } li.depth-3 .comment-wrap { width: 76%; } .comment-wrap { float: left; width: 80%; } .children { float: right; width: 94%; } .comment-meta { color: #7C6245; font: italic 13px/13px Georgia,serif; } .comment-author { font: 16px/16px 'Abril Fatface',Georgia,serif; } .avatar { box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.5); float: left; margin: 3px 24px 24px 3px; } .comment-content { color: #423F3A; font: 12px/18px 'Lucida Grande','Lucida Sans Unicode',Helvetica,sans-serif; padding: 2px 14px; } /* =Widgets -------------------------------------------------------------- */ #secondary { margin-top:20px } #secondary .widget { background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE) repeat scroll 0 0 #EEEEEE; border: 1px solid #DDDDDD; -o-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0 1px 0 #9A9A9A; margin: 0 0 10px; padding: 10px; position: relative; text-shadow: 0 1px 0 #FFFFFF; z-index: 0; } #secondary .widget:before { border: 1px dashed #CCCCCC; bottom: 3px; box-shadow: 0 0 0 1px #FFFFFF; content: ""; left: 3px; position: absolute; right: 3px; top: 3px; z-index: -1; } #secondary ul { margin-left:0; padding: 0 10px 10px 10px ; list-style: none; } #secondary ul li { padding:8px 0; border-bottom:1px dotted grey; } #secondary ul li a{ font-size: 14px; color: #999; } .widget-title { text-transform:uppercase; font-size:14px; background: #ddd; -webkit-box-shadow: inset 0 2px 2px #999999, 0 1px 0 #fff; -moz-box-shadow: inset 0 2px 2px #999999, 0 1px 0 #fff; box-shadow: inset 0 2px 2px #999999, 0 1px 0 #fff; padding:10px 0 10px 10px; -o-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-weight:bold; font-style:normal; font-family:Arial, Helvetica, sans-serif; color : #fff; } #secondary ul li a:hover, #secondary ul li a:focus, #secondary ul li a:active { text-decoration: underline; } /* =Footer -------------------------------------------------------------- */ #colophon { border-top: 1px solid #999; padding: 1em 0 0; } #site-generator .copyright { clear: both; margin-left: 3%; float: left; text-align: left; } #site-generator .powered { margin-right: 3%; float: right; text-align: right; } #site-generator a:link { font-style: italic; font-weight: bold; color: #999; }