/*------------------------------------------------------ CSS overview: 1. RESET 2. WIDGET 3. POST 4. POST CONTENT 6. POST INFO 7. SHARE 8. COMMENTS 9. COMMENT FORM 10. WP-PAGINATION ---------------------------------------------------------*/ /*-------------------------------------------------- RESET ---------------------------------------------------*/ #inner-content { width: 700px; float: left; } #sidebar { width: 220px; float: right; font: normal 12px/17px Helvetica, Arial, sans-serif; background: #294553; padding: 8px 10px; margin-bottom:10px; } /*-------------------------------------------------- WIDGET ---------------------------------------------------*/ .widget { margin-bottom: 10px; float: left; width: 100%; } .widget h3.title { font-size:15px; line-height: 20px; font-weight: 700; text-transform: uppercase; display: block; padding: 0 0 5px 0; margin: 0 0 5px 0; } .widget ul { padding: 0; margin: 0; list-style-type:none; color: #aaa; } .widget ul li { padding: 0; margin: 0 0 15px 0; float: left; width: 100%; } .widget ul li a { color: #676767; font-weight: bold; } .widget a:hover { } .widget ul li span.date { color: #aaa; display: block; font-size: 11px; text-transform: uppercase; } .widget img.alignleft { margin: 5px 15px 0 0; padding: 6px; background-color: #f4f4f4; position: relative; -moz-border-radius: 2px; -webkit-border-radius:2px; border-radius:2px; } .widget.widget_archive li { float: left; margin-bottom: 5px; } .widget ul#recentcomments a { font-size: 12px; text-transform: none; font-weight: bold; } .widget ul#recentcomments a.url:hover { color: #f96e5b; } .widget ul#recentcomments, .widget ul#recentcomments li a.url { color: #aaa; font-size: 11px; text-transform: uppercase; font-weight: normal; } .tagcloud a { color: #fff; font-size: 11px !important; text-transform: uppercase; font-weight: normal; line-height: 16px; float: left; padding: 2px 6px; margin: 0 4px 4px 0; background-color: #444; display: inline; -moz-border-radius: 2px; -webkit-border-radius:2px; border-radius:2px; } .tagcloud a:hover { color: #fff!important; } ul#recentcomments li, ul.bra_recent_entries li { margin: 0 0 15px 0; } .widget .photostream a, .widget .photostream img { height: 50px; width: 50px; } #searchform label { display: none; } /*-------------------------------------------------- POST ---------------------------------------------------*/ .post { margin: 0 0 15px 0; padding: 0 0 20px 0; overflow: hidden; } .post:last-child { border-bottom: none; margin: 0; padding: 0; } /*-------------------------------------------------- POST CONTENT ---------------------------------------------------*/ .blog1 .post-content { width: 600px; float: left; } .blog3 .post-media { width: 270px; float: left; margin-right: 30px; margin-bottom: 0; display:none !important; } .blog3 .post-content { width:600px; float: left; margin-bottom:12px; } .blog5 .post-content, .blog6 .post-content { width: 600px; float: right; margin-bottom:20px; } .blog5 .post-info { margin-top: 0px; position: relative; } .blog5 .post-title, .blog5 .post-meta, .blog6 .post-title, .blog6 .post-meta { width: 600px; float: right; } .post-media, .post-title, .post-meta { display: block; } .post-title h2.title{ margin: 0; } .post-title h2.title, .post-title h2.title a { color: #676767; font-size:18px; line-height: 28px; font-weight: 700; text-transform: uppercase; word-spacing: 5px; } .post-title h2.title a:hover { color: #43c7f4; } .post h3.title{ margin-bottom: 0; line-height: 27px; } .post-media { margin-bottom: 20px; display:none !important; } .post-meta ul { margin: 5px 0 15px 0; padding: 0; list-style: none; font-size: 11px; text-transform: uppercase; } .post-meta li { margin: 0; display: inline; } .post-meta span { color: #aaa; } .post-meta a { color: #676767; display: inline-block; font-weight: bold; } .post-meta a:hover { } /*-------------------------------------------------- POST INFO ---------------------------------------------------*/ .post-info { float: left; width: 100px; } .post-info div { width: 65px; z-index: 9; text-align: center; } .post-info div.date { color: #FFFFFF; padding: 5px 0px 5px 0; } .post-info div.date span { display: block; } .post-info div.date span.day { font-size: 27px; letter-spacing: 0px; margin-top: 2px; line-height: 33px; } .post-info div.date span.month { font-size: 13px; line-height: 10px; } .post-info div.comments { height: 30px; } .post-info div.comments a { color: #bbb; display: block; cursor:pointer; background-color: #444; font-size: 8px; padding: 6px; } .post-info div.comments a:hover { color: #fff; } .post-info div.comments a span { font-size: 22px; letter-spacing: 0px; margin-top: 2px; line-height: 27px; } /*-------------------------------------------------- SHARE ---------------------------------------------------*/ ul.share { border-top: 1px solid #eee; list-style-type: none; margin: 0; padding: 25px 0 0; } ul.share li { float: left; width: 90px; } ul.share li.twitter { width: 110px; } /*-------------------------------------------------- COMMENTS ---------------------------------------------------*/ .comment-list { overflow: hidden; margin: 0; padding: 15px 0 0 0; } .comment { list-style-type: none; margin: 15px 0 0 0; } .comment:first-child { border-top: none; margin-top: 0; } .comment div { margin: 0; overflow: hidden; background-color: #f8f8f8; padding: 25px; position: relative; } .comment div .item-mask { background: url(../images/mask-avatar.png) no-repeat 0 0 transparent; position: absolute; left: 0; top: 0; z-index: 99; } .comment .avatar { margin: 0 20px 5px 0; padding: 0; width: 44px; height: 48px; float: left; z-index: 1; } .comment .comment-wrap, .comment .comment-meta { width: 90%; padding: 0; } .comment .comment-meta { font-size: 11px; text-transform: uppercase; } .comment .comment-meta .comment-reply-link { font-size:9px; line-height: 16px; font-weight: bold; padding:2px 4px; -moz-border-radius: 2px; -webkit-border-radius:2px; border-radius:2px; background-color: #444; color: #ccc; } .comment .comment-meta .comment-reply-link:hover { color: #fff; } .comment .author, .comment .author a { color: #676767; margin: 0; font-weight: bold; } .comment .date { color: #aaa; margin: 0 0 5px 0; } .comment .comment-wrap { margin-top: 5px; } .comment .children { /* position: relative;*/ padding: 0 0 0 35px; margin: 15px 0 0 25px; border-left: 1px solid #eee; background: url(../images/sprite.png) no-repeat 0 -379px transparent; } .comment .children .comment { list-style-type: none; } .comment div { margin: 0; overflow: hidden; background-color: #f8f8f8; padding: 25px; } .comment .children .comment { margin: 15px 0 0 0; padding: 0 0 0 0; position: relative; } .comment .children .comment:first-child { margin-top: 0; } .comment .children .comment-wrap, .comment .children .comment-meta { width: 89%; } .comment .children .children .comment-wrap, .comment .children .children .comment-meta { width: 87.5%; } .comment .children .children .children .comment-wrap, .comment .children .children .children .comment-meta { width: 86%; } .comment .children .children .children .children .comment-wrap, .comment .children .children .children .children .comment-meta { width: 84%; } .comment .children .children .children .children .children .comment-wrap, .comment .children .children .children .children .children .comment-meta { width: 81%; } /*-------------------------------------------------- COMMENT FORM ---------------------------------------------------*/ #comment-form { width: 90%; } #comment-form.form input { width: 60%; } #comment-form.form textarea { width: 97%; height: 150px; } #comment-form.form input.submit { width: 130px; float: right; } #comment-form p label { font-weight:bold; } #comment-form p span { } #comment-form p input { display:block; } /*-------------------------------------------------- WP-PAGINATION ---------------------------------------------------*/ .wp-pagenavi { float: right; position:relative; } .wp-pagenavi span.pages { margin: 7px 30px 0 0; padding: 0; background-color: transparent; } .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi span { background-color: #f8f8f8; display: inline-block; float: left; color: #676767; font-size: 11px; text-decoration: none; font-weight: bold; margin: 0 0 0 4px; padding: 7px 12px; text-transform: uppercase; } .wp-pagenavi a:hover { color: #fff; background-color: #444; } .wp-pagenavi span.current { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 959px) { #inner-content { width: 490px; } #sidebar { width: 190px; } .blog1 .post-content, .blog5 .post-content, .blog6 .post-content, .blog5 .post-title, .blog5 .post-meta, .blog6 .post-title, .blog6 .post-meta { width: 390px; } .blog3 .post-media { width: 150px; display:none; } .blog3 .post-content { width: 210px; } .comment .comment-wrap, .comment .comment-meta { width: 85.4%; } .comment .children .comment-wrap, .comment .children .comment-meta { width: 83%; } .comment .children .children .comment-wrap, .comment .children .children .comment-meta { width: 79.8%; } .comment .children .children .children .comment-wrap, .comment .children .children .children .comment-meta { width: 75%; } .comment .children .children .children .children .comment-wrap, .comment .children .children .children .children .comment-meta { width: 100%; } .comment .children .children .children .children .children .comment-wrap, .comment .children .children .children .children .children .comment-meta { width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { #inner-content, #sidebar { width: 420px; } #inner-content { border-bottom: 1px solid #eee; margin: 0 0 40px 0; padding: 0 0 40px 0; } .blog1 .post-content, .blog5 .post-content, .blog6 .post-content, .blog5 .post-title, .blog5 .post-meta, .blog6 .post-title, .blog6 .post-meta { width: 320px; } .blog6 .post-content, .blog6 .post-title, .blog6 .post-meta { width: 320px; } .comment .comment-wrap, .comment .comment-meta { width: 100%; } .comment .children .comment-wrap, .comment .children .comment-meta { width: 100%; } .comment .children .children .comment-wrap, .comment .children .children .comment-meta { width: 100%; } .comment .children .children .children .comment-wrap, .comment .children .children .children .comment-meta { width: 100%; } .comment .children .children .children .children .comment-wrap, .comment .children .children .children .children .comment-meta { width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { #inner-content, #sidebar { width: 300px !important; } #inner-content { border-bottom: 1px solid #eee; margin: 0 0 40px 0; padding: 0 0 40px 0; } .blog1 .post-content, .blog5 .post-content, .blog6 .post-content, .blog5 .post-title, .blog5 .post-meta, .blog6 .post-title, .blog6 .post-meta { width: 300px; } .blog6 .post-content, .blog6 .post-title, .blog6 .post-meta { width: 300px; } .comment .comment-wrap, .comment .comment-meta { width: 100%; } .comment .children .comment-wrap, .comment .children .comment-meta { width: 100%; } .comment .children .children .comment-wrap, .comment .children .children .comment-meta { width: 100%; } .comment .children .children .children .comment-wrap, .comment .children .children .children .comment-meta { width: 100%; } .comment .children .children .children .children .comment-wrap, .comment .children .children .children .children .comment-meta { width: 100%; } .blog5 .post-info { width: 100%; margin: -57px 0 0 0; } .post-info { width: 100%; margin: 0 0 20px 0; } .post-info div { width: auto; float: left; } .post-info div.date { padding: 8px; } .post-info div.date span { display: inline; margin: 0 2px; } .post-info div.date span.day, .post-info div.date span.month, .post-info div.comments a span { font-size: 11px; line-height: 11px; } .post-info div.comments { height: auto; } .post-info div.comments a { font-size: 11px; padding: 8px; } .post-info div.comments a span { display: inline; margin: 0 2px; } .blog3 .post-content { width: 100%;} }