@charset "utf-8"; /* Theme Name: BirdTIPS Theme URI: http://www.sysbird.jp/birdtips/ Description: BirdTIPS is a 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. Features include the page navigation. You can also choose the link color, article title color and navigation menu color. Author: Sysbird Author URI: http://www.sysbird.jp/wptips/ Version: 1.06 License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: white, three-columns, right-sidebar, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready */ @import "normalize"; @import "mixin"; // variable $text_color: #555; $link_color: #06a; $navigation_color: #CCC; $article_title_color: #dd6633; $title_color: #d63; $border-color: #CCC; /* Link --------------------------------------------- */ a { color: $link_color; text-decoration: none; &:hover { text-decoration: underline; } } /* Structure --------------------------------------------- */ body { margin:0; padding:0; border:0; width:100%; background-color:#ececec; font-family: Verdana,Arial,"ƒƒCƒŠƒI",Meiryo,"ƒqƒ‰ƒMƒmŠpƒSPro W3","Hiragino Kaku Gothic Pro","‚l‚r ‚oƒSƒVƒbƒN",sans-serif; font-size:0.92em; color: $text_color; } #container { max-width: 1075px; margin: 0 auto; padding:0; background-color:#fff; z-index: 0; } #header { max-width: 100%; margin: 0 auto; position: relative; *z-index: 9999; /* IE7 and below */ } #wrapper { margin:0 0 0; padding:25px 25px 25px 75px; overflow: hidden; } #main { width: 78.59%; float: left; } #content { width: 72.669%; float: left; } #leftcolumn { width: 24.275%; margin-left:2.454%; float: left; } #rightcolumn { width: 19.775%; float: right; overflow: hidden; } #footer { clear: both; padding:25px 25px 25px 75px; overflow: hidden; } /* Container --------------------------------------------- */ #container { -webkit-box-shadow:0 0 5px 0 #DDD; -moz-box-shadow:0 0 5px 0 #DDD; box-shadow:0 0 5px 0 #DDD; } /* Header --------------------------------------------- */ #header { img { width: 100%; height: auto; vertical-align:bottom; } #branding { position: absolute; left: 75px; top: 0; width: 90%; } #site-title { margin: 0; padding: 0.8em 0 0 0; color: $text_color; font-size: 2rem; line-height: 1.2; a { color: $text_color; font-weight: bold; text-decoration: none; } } p#site-description { margin: 3px 0; } &.no-image { #branding { position: static; margin: 0 0 2em 75px; } } } /* Menu -------------------------------------------------------------- */ #menu-wrapper { position: absolute; bottom: 5px; left: 0; z-index: 9999; padding-left: 75px; .menu { #small-menu { display: none; /* hide small menu initially */ } ul { margin: 0 0 0 -0.8em; padding-left: 0; &:after { @include clear-fix(); } li { margin: 0; padding: 0; list-style: none; float: left; position: relative; &:hover > ul { display: block; /* show dropdown on hover */ } a { padding: 0.4em 0.8em; display: block; color: $navigation_color; text-decoration: none; border-right: solid 1px $navigation_color; line-height: 1.2; *white-space: nowrap; /* IE7 and below */ &:hover { text-decoration: underline; } } ul { background: #fff; margin: 0; border: solid 1px $border-color; display: none; /* hide dropdown */ width: 200px; position: absolute; top: 2em; left: 0; z-index: 9999; li { float: none; margin: -1px 0 0 0; padding: 0; a { background: #F8F8F8; color: $text-color; padding: 0.8em; border-right: none; border-top: solid 1px $border-color; white-space: normal; &:hover { background: #EEE; text-decoration: none; } } ul { top: 0; left: 100%; } } } } } .current_page_item > a, .current_page_ancestor > a { font-weight: bold; } } } .no-image { #menu-wrapper { position: relative; } } /* Wrapper --------------------------------------------- */ #wrapper { border-bottom:1px solid #CCC; } /* Posts --------------------------------------------- */ #content{ a { border-bottom: dotted 1px $link_color; &:hover { text-decoration: none; border-bottom: solid 1px $link_color; } &.more-link { width: 100%; text-align: right; } } h1, h2, h3, h4, h5, h6 { margin: 0.7em 0; line-height:1.2; font-weight: normal; } h1 {font-size:2.4rem;} h2 {font-size:2rem;} h3 {font-size:1.8rem;} h4 {font-size:1.6rem;} h5 {font-size:1.4rem;} h6 {font-size:1.2rem;} h2 { border-bottom: dashed 1px #CCC; padding-bottom: 0.4em; } h3 { border-left: solid 7px #CCC; padding-left: 10px; } p { line-height: 1.6; margin: 0 0 1.6em; } blockquote { margin-left: 1em; padding-left: 1em; border-left: 7px solid #EEE; } table { caption { font-weight: bold; font-style: italic; } td, th { border-bottom: solid 1px #CCC; border: 1px solid #CCC; line-height: 20px; padding: 8px; vertical-align: top; a { border-bottom: none; } } th { background: $article_title_color; color: #FFF; font-weight: bold; } } pre { border: dashed 1px #CCC; padding: 10px; } ul, ol { margin: 0 0 0 1em; padding: 0 0 0 1em; line-height: 1.6; } ol { list-style: decimal; ol { list-style:upper-alpha; ol { list-style:lower-roman; ol { list-style:lower-alpha; } } } } dl { line-height: 1.6; dt { font-weight: bold; } dd { margin-bottom: 1em; padding: 0; } } del { color: #C00; } ins { background: #ffc; text-decoration: none; } .hentry { margin-bottom: 3.2em; &:after { @include clear-fix(); } .entry-meta { clear: both; margin-top: 1em; line-height: 1.4; display: block; background: #F6F6F6; font-size: 90%; padding: 0.4em; color: #999; .icon { padding-right: 0.8em; &:before { font-family: 'Genericons'; padding-right: 2px; color: #CCC; } } .postdate { &:before { content: '\f303'; } } .author { &:before { content: '\f304'; } } .category { &:before { content: '\f301'; } } .tag { &:before { content: '\f302'; } } .comment { &:before { font-family: 'Genericons'; content: '\f300'; padding-left: 2px; } } } .entry-header { position: relative; margin: 0; display: block; .entry-title { color: $title_color; font-size: 1.6rem; font-weight: normal; margin: 0 0 1em 0; padding: 0 0 0.8em 0; line-height: 1.2; border-bottom: dotted 2px #CCC; a { color: $title_color; text-decoration:none; border: none; &:hover { text-decoration: underline; } } } .postdate { font-size: 14px; font-style: italic; position: absolute; left: -75px; top: 0; background: $title_color; color: #FFF; padding: 2px 4px 15px 0; text-align: right; width: 56px; span { display: block; } } } &.sticky .entry-header .postdate { background: $link_color; } .page-link { clear: both; color: $link_color; a { padding: 3px 6px; border:solid 1px $link_color; text-decoration:none; &:hover { background: #F4F4F0; } } } } } .home #content .hentry.sticky .entry-header .entry-title .home #content .hentry.sticky .entry-header .entry-title a { color: $link_color; } .single #content #nav-below { margin-top: 2em; line-height: 1.2; &:after { @include clear-fix(); } .nav-previous { display: block; float: right; } } .attachment.single { #main { width: 100%; } #content { width:98%; float: none; } #content .entry-content .attachment { text-align: center; } } /* Link Style */ #content .hentry .entry-meta a, .single #content #nav-below a, #content #comments a.comment-reply-link, #content #comments .navigation a { border: none; &:hover { text-decoration: underline; } } /* Pagenation -------------------------------------------------------------------- */ #content .tablenav { margin: 4em 0 1em 0; a.page-numbers, .current { padding: 3px 6px; border:solid 1px $link_color; text-decoration:none; font-size: 100%; } a.page-numbers { font-weight: bold; &:hover { background: #F4F4F0; } } .current { background: #F4F4F0; } a.next, a.prev { border: none; &:hover { text-decoration: underline; background: none; } } } /* Images -------------------------------------------------------------- */ #content { .hentry { .gallery-item a, .entry-attachment a, .entry-attachment a:hover, .wp-caption a, .wp-caption a:hover, .gallery a:hover { border: none ; } .wp-caption { background: #F6F6F6; padding: 5px 0; text-align: center; max-width: 100%; img { padding: 0; border: none; max-width: 98%; } } .attachment { .wp-caption { background: none; } } img.wp-post-image { margin: 0 0 0.5em 1em; float: right; max-width: 100%; } } } #content .hentry img, .widget img { max-width: 100%; /* Fluid images for posts, comments, and widgets */ height: auto; border: 1px solid #ddd; padding: 1px; } img[class*="align"], img[class*="wp-image-"] { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } .aligncenter { margin-left: auto; margin-right: auto; display: block; } .alignleft { float: left; margin-right: 0.75em; } .alignright { float: right; margin-left: 0.75em; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 0.75em; } /* Image borders */ img[class*="align"], img[class*="attachment"], img[class*="wp-image-"], #content .gallery .gallery-icon img { border: 1px solid #ddd; padding: 1px; } a:focus img[class*="attachment"], a:hover img[class*="attachment"], a:focus img[class*="align"], a:hover img[class*="align"], a:active img[class*="align"], a:focus img[class*="wp-image-"], a:hover img[class*="wp-image-"], a:active img[class*="wp-image-"], #content .gallery .gallery-icon a:focus img, #content .gallery .gallery-icon a:hover img, #content .gallery .gallery-icon a:active img, #content .hentry a:hover img { border-color: #bbb; } .wp-caption-text, .gallery-caption { line-height: 1; font-size: 12px; color: #999; margin: 0 !important; text-align: center; } .gallery-caption { height: 1em; overflow: hidden; } /* Make sure videos and embeds fit their containers -------------------------------------------------------------- */ embed, iframe, object, video { max-width: 100%; } .entry-content .twitter-tweet-rendered { max-width: 100% !important; /* Override the Twitter embed fixed width */ } /* Comments -------------------------------------------------------------- */ #content #comments { margin-top: 20px; display: block; .navigation { position: relative; height: 1em; padding-bottom: 10px; margin-bottom: 1em; .nav-previous a { position: absolute; top: 0; right: 0; padding-left: 1em; } .nav-next a { position: absolute; top: 0; left: 0; padding-right: 1em; } } ol.commentlist { list-style: none; margin: 0; padding-left: 0; li.pingback, li.comment { border-left: 2px solid #DDD; clear: both; margin-bottom: 1em; padding: 0 0 0 10px; position: relative; list-style: none; &:after { @include clear-fix(); } } } li { .comment_meta { .author { font-weight: bold; margin: 0 0 5px 5px; color: #000; } .time { font-size: 85%; margin: 0 0 5px 5px; } img { border: none; margin: 0 5px 5px 0; float: left; } } .comment_text { clear: both; margin: 0 0 0.7em 50px; p { line-height: 1.4; } } em { font-size: 80%; color: #999; } a.comment-reply-link { padding-left: 16px; background: url(images/reply.png) no-repeat left center; } &.bypostauthor .comment_meta .author { color: $title_color; } } } /* Forms -------------------------------------------------------------- */ #content #comments { #respond { margin-bottom: 1em; } .commentlist #respond { margin-left: 60px; } #commentform { label { padding: 3px 0 5px 0; } em { display: block; padding: 5px 0; } label input{ width: 70%; max-width: 300px; padding: 2px; background: #FFF; border: solid 1px #DDD; -webkit-box-shadow:0 30px 20px -30px #EEE inset; -moz-box-shadow:0 30px 20px -30px #EEE inset; box-shadow:0 30px 20px -30px #EEE inset; } textarea{ width: 95%; max-width: 400px; height: 100px; padding: 2px; background: #FFF; border: solid 1px #DDD; -webkit-box-shadow:0 30px 20px -30px #EEE inset; -moz-box-shadow:0 30px 20px -30px #EEE inset; box-shadow:0 30px 20px -30px #EEE inset; } input#submit{ padding: 5px 10px; } .form-allowed-tags { width: 95%; max-width: 400px; font-size: 90%; padding: 0 10px; margin: 0.5em 0; border-left: solid 1px #CCC; color: #999; line-height: 1; } .form-allowed-tags code { display: block; } p { margin: 0; } } } /* Archive -------------------------------------------------------------------- */ .archive #content ul, .error404 #content ul { margin: 0; padding: 0; list-style: none; li { border-bottom: dotted 1px #CCC; &:after { @include clear-fix(); } a { display: block; text-decoration: none; color: $text_color; border: none; width: 100%; height: auto; padding: 0.5em 0; &:hover { background: #F6F6F6; } &:after { @include clear-fix(); } } span { padding: 0 0.5em 0 0; float: left; &:before { font-family: 'Genericons'; content: '\f104'; font-size: 10px; padding-right: 2px; } } em { display: block; float: right; padding-left: 1.5em; } } } .search #content { h2 { font-size: 1.6rem; a { border: none; &:hover { text-decoration: underline; } } } } /* Sidebars --------------------------------------------- */ .widget { margin-bottom: 40px; margin-bottom: 2em; a { text-decoration: none; &:hover { text-decoration: underline; } } .widget_image img { height: auto; max-width: 100%; } h3 { font-size: 120%; font-weight: normal; margin: 0 0 10px 0; padding: 0 0 5px 0; border-bottom: solid 3px #CCC; } ul { list-style: none; margin: 0; padding: 0; li { padding: 2px 0 2px 10px; border-bottom: solid 1px #DDD; line-height: 1.2; padding-left: 1em; text-indent: -1em; &:before { font-family: 'Genericons'; content: '\f104'; font-size: 10px; padding-right: 2px; } ul { margin-left: 5px; } ul li { border-bottom: none; border-top: solid 1px #DDD; padding-bottom: 0; margin-top: 2px } } } table { width: 100%; margin-bottom: 0; padding-bottom: 0; } .textwidget{ line-height: 1.4; a { text-decoration: underline; } } #calendar_wrap { /* Calendar Widget */ tbody a { background: $link_color; color: #FFF; } table caption { padding: 2px 0; } table tfoot { border-top: solid 1px #DDD; } table tfoot td#prev { text-align: left; } table tfoot td#next { text-align: right; } #wp-calendar { width: 95%; text-align: center; caption, td, th { text-align: center; } caption { font-weight: bold; padding: 5px 0 3px 0; text-transform: uppercase; } th { background: #f4f4f4; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-weight: bold; } tfoot td { background: #f4f4f4; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } } } #searchform { &:after { @include clear-fix(); } label { @include text-hide(); } #s { float: left; width: 76%; padding: 5px 2%; font-size: 15px; height: 20px; line-height: 1; border: solid 1px $border_color; } #searchsubmit { background: url("images/icon_search.png") $border_color no-repeat center center; border: 0 none; cursor: pointer; width: 18%; height: 32px; margin: 0; color: #FFF; @include text-hide(); } } } /* Footer --------------------------------------------- */ #footer { background: $article_title_color; color: #FFF; .site-title { padding: 1em 0; a { color: #FFF; } .generator { font-family: Georgia, "Bitstream Charter", serif; font-style: italic; &:before { font-family: 'Genericons'; content: '\f205'; font-style: normal; } } } #back-top { position: fixed; bottom: -80px; right: 0; z-index: 3; a { background: #EEE; text-decoration: none; text-align: center; display: block; @include alpha(0.7); border-radius: 100px; width: 120px; height: 120px; span { @include text-hide(); } &:hover { text-decoration: none; @include alpha(1); } &:before { font-family: 'Genericons'; content: '\f432'; font-size: 50px; display: block; text-align: center; } } } } /* Media queries for responsive design --------------------------------------------- */ /* --- iPad Landscape --- */ @media screen and (max-width: 1000px) { /* --- General --- */ #container { margin: 0 auto; } #wrapper { overflow: hidden; } #main { width: 76.59%; } #content { width:98%; float: left; } #leftcolumn { margin:0; float: none; } #rightcolumn { width: 23.275%; float: right; } /* --- Sidebars --- */ #leftcolumn { width: 92.2%; margin-left:0; padding: 30px 0 0; float: left; .widget ul li { border-bottom: none; display: inline; a { text-decoration: underline; &:hover { color: #999; } } ul li{ border-top: none; } } aside:last-child { margin-bottom: 0; border-bottom: none; } aside, #rightcolumn aside { float: none; overflow: hidden; } } } /* --- iPad Portrait --- */ @media screen and (max-width: 800px) { #header { #site-title { padding: 5px 0 0 0; } _height: 160px; /* IE6 and below */ img { _height: 160px; /* IE6 and below */ } p#site-description { display: none; } } #main { width: 100%; } #content { float: none; } #leftcolumn { width: 100%; } #rightcolumn { width: 100%; float: none; } /* --- Sidebars --- */ #leftcolumn aside:last-child { margin-bottom: 30px; border-bottom: 1px solid #ddd; } #rightcolumn aside:last-child { margin-bottom: 0; border-bottom: none; } } /* --- Smartphones and small Tablet PCs --- */ @media screen and (max-width: 650px) { #wrapper { padding:10px; } #header { #branding { left: 10px; top: 0; width: 84%; #site-title { font-size: 1.2rem; } } &.no-image { #branding { margin-left: 10px; } } } /* small menu */ #menu-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0; &:after { @include clear-fix(); } &.no-image { position: relative; } .menu { border: none; margin: 0; font-size: 1rem; #small-menu { cursor: pointer; display: block; width: 2em; margin: 0 10px 5px 0; color: $navigation_color; float: right; &:after { font-family: 'Genericons'; content: '\f419'; font-size: 30px; } } ul#menu-primary-items { clear: both; position: absolute; top: 38px; background: #f8f8f8; width: 100%; display: none; /* visibility will be toggled with jquery */ border-bottom: 1px solid $navigation_color; box-shadow: 0 5px 5px 0 $navigation_color; z-index: 9999; margin: 0; padding-left: 0; li { clear: both; float: none; a { padding: 0.8em 0 0.8em 1em; border-top: dotted 1px $navigation_color; border-right: none; background: #f8f8f8; white-space: normal; &:hover { background: #EEE; text-decoration: none; } } &:first-child a { border-top: none; } ul { width: auto; margin-left: 0; padding-left: 1em; position: static; display: block; border: none; background: #f8f8f8; li { a { border-top: none; padding: 0.4em 0 0.4em 1em; &:hover { background: none; text-decoration: underline; } } } } } > li { >a { font-weight: bold; color: text_color; &:before { font-family: 'Genericons'; content: '\f104'; font-size: 10px; padding-right: 2px; } } } } } &.current { left: 0; .menu { #small-menu { &:after { content: '\f406'; } } } } } #content .hentry { .entry-header { position: static; .entry-title { margin: 0; } .postdate { position: static; color: $article_title_color; background: none; padding: 0.5em 0 1em 0; width: 100%; text-align: left; background: none !important; display: block; span { display: inline; padding-right: 5px; } } a:hover .postdate { text-decoration: underline; } } } #footer { padding-left:10px; } } @media screen and (min-width: 650px) { ul#menu-primary-items { /* ensure .menu is visible on desktop version */ display: block !important; } }