@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 and breadcrumb 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.1 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; $menu-color: #CCC; $title-color: #d63; /* Index --------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight:normal; margin:0; line-height:1em; color: #000; } h1 {font-size:2em;margin-bottom:.5em;} h2 {font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;} h3 {font-size:1.5em;margin-bottom:.7em;padding-top:.3em;} h4 {font-size:1.25em;margin-bottom:.6em;} h5 {font-size:1.1em;margin-bottom:.5em;font-weight:bold;} h6 {font-size:1em;margin-bottom:.5em;font-weight:bold;} /* 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.054%; 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 { _height: 200px; /* IE6 and below */ img { width: 100%; height: auto; _height: 200px; /* IE6 and below */ vertical-align:bottom; } #hgroup { position: absolute; left: 75px; top: 0; width: 90%; } #site-title { margin: 0; padding: 0.8em 0 0 0; color: $text-color; font-size: 200%; line-height: 1; a { color: $text-color; font-weight: bold; text-decoration: none; } } p#site-description { margin: 3px 0; font-size: 12px; } &.no-image { height: 150px; background: url(images/header.jpg) repeat-x left bottom; #hgroup { position: static; margin-left: 75px; } } } /* Menu -------------------------------------------------------------- */ #menu-wrapper { position: absolute; bottom: 5px; left: 0; z-index: 9999; padding-left: 75px; #small-menu { display: none; /* hide small menu initially */ } .menu { ul { margin: 0 0 0 -0.8em; padding-left: 0; li { margin: 0; padding: 0; list-style: none; float: left; position: relative; &:hover > ul { display: block; /* show dropdown on hover */ } a { padding: 0.5em 0.8em; display: block; color: $menu-color; border-right: solid 1px $menu-color; text-decoration: none; line-height: 1; *white-space: nowrap; /* IE7 and below */ &:hover { text-decoration: underline; } } ul { background: #fff; margin-left: 0.8em; border: solid 1px $menu-color; display: none; /* hide dropdown */ width: 200px; position: absolute; top: 2em; left: 0; z-index: 9999; li { float: none; margin: 0; padding: 0; a { background: #F8F8F8; padding: 0.8em; color: $text-color; border-right: none; border-top: dotted 1px $menu-color; &:hover { background: #EEE; text-decoration: none; } } &:first-child a { border-top: none; } ul { top: 2.6em; } } } } } .current_page_item > a, .current_page_ancestor > a { font-weight: bold; } } } /* 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; } } 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; color: #333; font-style: italic; } th { background: #EFEFEF; border-bottom: solid 1px #CCC; font-weight: bold; padding: 5px; } td { border-bottom: solid 1px #CCC; padding: 5px; a { border-bottom: none; } } } 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 { margin:0 0 1em 0; 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: 2.6em; .entry-meta { clear: both; margin-top: 1em; line-height: 1.4; display: block; background: #F6F6F6; font-size: 90%; padding: 0.4em; color: #999; span.author { background: url(images/mark_dark.png) no-repeat left center; padding-left: 10px; padding-right: 5px; border: none; } span.category, span.tag, span.comments { border-left: solid 1px #AAA; padding-left: 5px; padding-right: 5px; } } .entry-header { position: relative; margin: 0; display: block; .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 .entry-header h2, h1.entry-title { color: $title-color; font-size: 150%; font-weight: normal; margin: 0 0 1em 0; padding: 0 0 0.5em 0; line-height: 1.2; border-bottom: dotted 2px #CCC; a { color: $title-color; text-decoration:none; border: none; &:hover { text-decoration: underline; } } } .home #content .hentry.sticky .entry-header h2, .home #content .hentry.sticky .entry-header h2 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; } } /* pankuzu -------------------------------------------------------------------- */ ul#pankuzu { clear: both; font-size: 12px; line-height: 1.2; list-style-type:none; padding: 6px 0 6px 75px; margin: 0; border-bottom: solid 1px #CCC; background: #F4F4F4; li { display:inline; color: #999; } a { padding-right: 0.5em; text-align: left; text-decoration: none; color: #333; &:hover { text-decoration: underline; } } } /* Pagenation -------------------------------------------------------------------- */ #content .tablenav { margin: 4em 0 1em 0; color: $link-color; a.page-numbers, .current { color: $link-color; padding: 3px 6px; border:solid 1px $link-color; text-decoration:none; font-size: 100%; } a.page-numbers { font-weight: bold; color: $link-color; &:hover { background: #F4F4F0; } } .current { color: #333; background: #F4F4F0; border-color: $link-color; } a.next, a.prev { border: none; &:hover { text-decoration: underline; background: none; } } } /* Images -------------------------------------------------------------- */ #content .hentry img.wp-post-image { margin: 0 0 0.5em 1em; float: right; max-width: 300px; } #content .hentry img, .widget img { max-width: 97.5%; /* Fluid images for posts, comments, and widgets */ height: auto; border: 1px solid #ddd; padding: 1px; } #content .hentry { .wp-caption, .gallery-caption { font-size: 12px; line-height: 1.2; color: #AAA; max-width: 97.5%; text-align: center; } } 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.5em; } .alignright { float: right; margin-left: 0.5em; } 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 {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */ 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; } #content .hentry .gallery-item a, #content .hentry .entry-attachment a, #content .hentry .entry-attachment a:hover, #content .hentry .wp-caption a, #content .hentry .wp-caption a:hover, #content .hentry .gallery a:hover { border: none ; } #content .hentry .gallery-thumb { float: right; display: block; margin: 0 0 10px 10px; } #content .hentry .gallery { margin: 0 auto; clear: both; .gallery-item { float: left; text-align: center; margin: 0 0 10px 0; width: 33%; } } /* 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; #comments-title { font-size: 130%; font-weight: bold; margin: 1em 0; } #reply-title { font-size: 110%; font-weight: bold; margin: 1em 0; } .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, .search #content ul, .error404 #content ul { margin: 0; padding: 0; list-style: none; li { padding: 2px 0; border-bottom: dotted 1px #CCC; &:after { @include clear-fix(); } a { text-decoration: none; color: $text-color; border: none; &:hover { text-decoration: underline; } } span { padding: 0 0.5em 0 0; float: left; } em { display: block; float: right; padding-left: 1.5em; } } } /* 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; a { color: $text-color; } 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 { text-decoration: underline; } 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 { color: $text-color; 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; } } } form#searchform { /* Search Widget */ &:after { @include clear-fix(); } #qsearch { padding: 0; margin: 0; border: none; width: 99%; height: 31px; margin: 0 0 25px 0; 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 { float: left; border: none; background: transparent; margin: 0; } input#s { width: 80%; padding: 5px 0 5px 2px; font-size: 14px; } .btn{ float: right; margin: 6px 5px 0 0; } } } } #leftcolumn .widget ul li { background: url(images/mark_light.png) no-repeat left 0.5em; } #rightcolumn .widget ul li { background: url(images/mark_dark.png) no-repeat left 0.5em; } /* Footer --------------------------------------------- */ #footer { font-size: 0.8em; border-top:1px solid #FFF; -webkit-box-shadow:0 30px 20px -30px #DDD inset; -moz-box-shadow:0 30px 20px -30px #DDD inset; box-shadow:0 30px 20px -30px #DDD inset; p { line-height: 1.5; } .home { font-weight: bold; padding-right: 5px; } .generator { background: url(images/wordpress.png) no-repeat center left; padding-left: 20px; } } /* 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; font-size: 150%; } _height: 160px; /* IE6 and below */ img { _height: 160px; /* IE6 and below */ } } #main { width: 100%; } #content { float: none; } #leftcolumn { width: 100%; } #rightcolumn { width: 100%; float: none; } /* --- Main Nav --- */ #header #menu { max-width: 100%; a { line-height: 1.5em; } } /* --- 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 { #hgroup { left: 10px; top: 0; } &.no-image { height: 100px; #hgroup { margin-left: 10px; } } p#site-description { display: none; } } /* small menu */ #menu-wrapper { padding-left: 0; bottom: 0; width: 100%; #small-menu { cursor: pointer; display: block; position: absolute; bottom: 5px; right: 5px; padding: 5px 10px 10px; border: solid 1px $menu-color; border-radius: 4px; .icon-bar { display: block; margin-top: 5px; width: 22px; height: 3px; background-color: $menu-color; } } .menu { clear: both; position: absolute; background: #f8f8f8; border: solid 1px $menu-color; width: 100%; display: none; /* visibility will be toggled with jquery */ border-bottom: 1px solid $menu-color; box-shadow: 0 5px 5px 0 $menu-color; z-index: 9999; ul { margin: 0; padding-left: 0; li { clear: both; float: none; a { padding: 0.8em 0 0.8em 1em; border-top: dotted 1px $menu-color; background: #f8f8f8; color: $text-color !important; 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; } } } } } } } #content .hentry { .entry-header { position: static; .postdate { position: static; color: #000 !important; background: none; padding: 0 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; } } .wp-caption .wp-caption-text, .gallery-caption { line-height: 1; } .gallery { margin: 0 10%; .gallery-item { width: 31%; padding-right: 2%; margin: 0; img { width: 100%; height: auto; } } } } .home #content .hentry .entry-header h2, h1.entry-title { margin: 0; } #footer { padding:10px; } ul#pankuzu { padding: 2px 0 2px 10px; } } @media screen and (min-width: 650px) { .menu { /* ensure .menu is visible on desktop version */ display: block !important; } }