/* Theme Name: BubbleDream Author: ZHAO Xudong Theme URI: http://html5beta.com/wordpress/wordpress-theme-bubbleDream/ Author URI:http://html5beta.com Description:a pure css theme without images at all and with a canvas bubbles animated background; in a perfect world,there is no ie5,ie6,ie7, or ie8!!!do not work in ie5.6.7.8.!!! Version: 1.2 Tags: black,blue,white,two-columns,fixed-width License: GNU General Public License, v2 (or newer) License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html */ /*reset css*/ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section,div, p, a, em, span, ul, ol, li, img, input, form, body, h3, h2, h1, h4, h5 { margin: 0; padding: 0; border:none; outline: 0; } /*html5 def*/ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } body { font-size: 14px; font-family:Arial, Helvetica, sans-serif; color: #333; position:relative; background:#ccc; } .comment-content p, .post-content p { margin-bottom: 15px; } .post-content { line-height:22px; } a { color:#273541; text-decoration: none; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15px; } input { font-family:Arial, Helvetica, sans-serif; } input.email, input.text, input.password { line-height:30px; border:2px solid #999; border-radius:3px; height:30px; } ul { list-style:none; } article ul { list-style:disc; } article ol, article ul { padding-left:20px; } .fixWidth { width:960px; margin:0 auto; position:relative; z-index:2; } blockquote { font-size: .9em; border-left: 3px solid #ddd; clear: both; margin: .5em; padding: 5px; } pre { border-left: 3px solid #ddd; margin: .5em; padding: 5px; } #content .hide { display: none; } .clear { clear: both; } .center { text-align: center; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.625em; } .alignright { display: inline; float: right; margin-left: 1.625em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .alignnone { display: block; margin-left: auto; margin-right: auto; text-align: center; } h1, h2, h3, h4, h5, h6 { clear: both; } .left { float: left; } .right { float: right; } .sticky { color:#273541; } .wp-caption { border-radius:4px; border:2px solid #999; padding:5px; } .wp-caption img { max-width: 550px; } .wp-caption-dd { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .wp-caption-text { padding-top: 5px; } .gallery-caption { padding: 4px; } .bypostauthor { color: #000; } /* search form */ .search-form { width:150px; height:30px; position:relative; border:2px solid #999; border-radius:4px; z-index:2; } .search-form.focus { border-color:#08c; } .search-form .s { position:absolute; left:0; top:0; height:28px; line-height:30px; vertical-align:top; text-align:center; background:#fff; width:113px; background:transparent; padding:0 5px 0 5px; color:#fff; z-index:3; } .search-icon:after { -moz-transform: rotate(-55deg); -o-transform: rotate(-55deg); -webkit-transform: rotate(-55deg); -ms-transform: rotate(-55deg); background:#999; content: ""; height: 7px; margin-top: 0; position: absolute; right: -20px; top: 12px; width: 3px; } .search-icon:before { background:transparent; border: 3px solid #999; border-radius: 12px 12px 12px 12px; content: ""; height: 12px; left: 0; position: absolute; top: 50%; width: 12px; } .search-icon { display: block; position: absolute; right: 26px; top: 5px; z-index:3; } .search-form .search-submit { opacity:0; position:absolute; right:0; top:0; width:30px; height:30px; display:block; z-index:4; cursor:pointer; } .search-form .search-submit:hover { color:#fff; background:#45612b; background:-webkit-gradient(linear, left top, left bottom, from(#138210), to(#45612b)); background:-moz-linear-gradient(top, #138210, #45612b); background:-o-linear-gradient(top, #138210, #45612b); } /* bg */ #bg { position:absolute; width:100%; height:100%; left:0; top:0; z-index:1; } #bg #cbg { width:100%; height:100%; } /* wrapper */ #wrapper { position:relative; z-index:2; } /* header **/ #header { background:#273541; background:rgba(39,53,65,.95); position:relative; z-index:2; } #header .site-title { margin:0 200px 0 0; } #header .h1 { line-height:30px; font-size:24px; font-weight:bold; padding:20px 0; } #header .h1 a { color:#ddd; } #header .site-desc { color:#ddd; padding:0 0 15px 0; font-size:16px; font-weight:normal; } #header .rssWrap { position:absolute; top:10px; right:20px; width:220px; } #header .rssWrap .search-form { margin-top:10px; position:absolute; right:60px; } #header .rssWrap .rss { float:none; position:absolute; right:0; top:0; } /* nav */ #nav { padding:0 0 20px 0; position:relative; z-index:4; } #nav ul { text-align:right; } #nav .page_item, #nav .menu-item { font-weight: bold; display:inline-block; position: relative; border-radius:0 0 5px 5px; } #nav .current_page_item, #nav .current_page_ancestor, #nav .page_item:hover , #nav .current-menu-item, #nav .current-menu-ancestor, #nav .menu-item:hover { background: rgba(39,53,65,.95); } #nav .menu-item.hover, #nav .page_item.hover { border-radius:0; z-index:3; box-shadow:1px 0 1px #999; } #nav .menu-item.hover ul, #nav .page_item.hover ul { box-shadow:1px 1px 2px #999; } #nav ul li a:hover { color: #fff; } #nav ul li a { text-decoration: none; color: #333; display: block; padding: 5px 10px; } #nav .menu-item.hover a, #nav .page_item.hover a { color:#eee; } #nav .current_page_item a, #nav .current_page_ancestor a, #nav .current-menu-item a, #nav .current-menu-ancestor a { color: #fff; } #nav .current_page_item a:hover, #nav .current_page_ancestor a:hover, #nav .current-menu-item a:hover, #nav .current-page-item a:hover { color: #fff; } #nav li ul { display: none; position: absolute; right:0; top:100%; width: auto; } #nav .children, #nav .sub-menu { width: auto; text-align:left; } #nav .children .page_item, #nav .sub-menu .menu-item { border-radius: 0; width: auto; display:block; background: rgba(39,53,65,.95); opacity: 0.90; } #nav .children .page_item:hover, #nav .sub-menu .menu-item:hover { background: #333; } #nav .children .page_item a, #nav .sub-menu .menu-item a { color: #ddd; } #nav .children .children, #nav .sub-menu .sub-menu { right: 100%; top: 0; } /* container */ #container { position:relative; z-index:2; } /* #content */ #content { width:70%; display:inline-block; } #container .pad { padding:20px; } #container .text { overflow:hidden; background:#fff; background:rgba(255,255,255,.95); vertical-align:top; border-radius:5px; border:1px solid #666; margin-bottom:20px; position:relative; } #content .thumb { width:70px; height:70px; padding:5px; border-radius:4px; border:2px solid #999; position:absolute; right:20px; top:20px; } #content .thumb:after { border-color: transparent #FFFFFF; border-style: solid; border-width: 6px 9px 6px 0; content: ""; text-indent:600px; display: block; left: -9px; position: absolute; top: 10px; width: 0; } #content .thumb:before { border-color: transparent #999999; border-style: solid; border-width: 8px 11px 8px 0; content: ""; display: block; left: -11px; position: absolute; top: 8px; width: 0; } #content .thumb.empty { text-align:center; line-height:70px; } #content .titleWrap { min-height:90px; width:530px; } .post-meta, .post-date { line-height:26px; } .post-meta { padding-bottom:20px; } h1.post-title { font-size:24px; line-height:30px; text-shadow:1px 1px 2px #999; word-wrap : break-word; } .tags { position:relative; padding:10px 0; } .tags .tagTxt { position:absolute; right:0; top:20px; font-weight:bold; } .tags .tagWrap { position:relative; margin-right:50px; padding:10px; border-radius:5px; border:2px solid #999; } .tags .tagWrap:after { border-color: transparent #FFFFFF; border-style: solid; border-width: 6px 0 6px 9px; content: ""; text-indent:600px; display: block; right: -9px; position: absolute; top: 10px; width: 0; } .tags .tagWrap:before { border-color: transparent #999999; border-style: solid; border-width: 8px 0 8px 11px; content: ""; display: block; right: -11px; position: absolute; top: 8px; width: 0; } .tags a { color:#08c; } /* post-footer */ .post-footer { position:relative; height:26px; } .post-footer .inner { position:absolute; left:-21px; top:11px; bottom:-21px; right:-21px; background:#273541; background:-webkit-gradient(linear, left top, left bottom, from(#273541), to(#1b252e)); background:-moz-linear-gradient(top, #273541, #1b252e); background:-o-linear-gradient(top, #273541, #1b252e); color:#e36443; border-radius:0 0 5px 5px; line-height:36px; padding:0 20px; } .post-footer a { color:#bbb; } /* post share */ .post-share { height:58px; position:relative; } .post-share .shareto { position:absolute; left:0; top:0; } .post-share .btns { margin:0 0 0 124px; position:relative; border-radius:5px; border:2px solid #999; height:58px; padding:0 20px; width:150px; } /* commets */ #comments { padding:20px 0; } #comments li.comment { position:relative; padding:0 0 20px 68px; } #comments li.comment .children { padding-top:10px; } #comments li.comment.depth-2, #comments li.comment.depth-1 { padding-left:98px; } #comments article.comment { position:relative; padding:10px; border-radius:5px; border:2px solid #999; } #comments .comment-author-admin > article.comment, #comments .bypostauthor > article.comment { border-color:#08c; } .post-share .btns:after, #comments article.comment:after { border-color: transparent #FFFFFF; border-style: solid; border-width: 13px 18px 13px 0; content: ""; text-indent:600px; display: block; left: -18px; position: absolute; top: 16px; width: 0; } .post-share .btns:before, #comments article.comment:before { border-color: transparent #999999; border-style: solid; border-width: 15px 20px 15px 0; content: ""; display: block; left: -20px; position: absolute; top: 14px; width: 0; } #comments .comment-author-admin > article.comment:before, #comments .bypostauthor > article.comment:before { border-color: transparent #08c; } #comments h2 { line-height:40px; } #comments .avatar { position:absolute; left:-98px; top:0; } #comments .children .avatar { left:-68px; } #comments .comment-author { line-height:30px; font-weight:bold; } #comments .bypostauthor article.comment .avatar { border:2px solid #08c; } #comments .edit-link { float:right; font-weight:normal; background:#eee; padding:2px; line-height:14px; border-radius:3px; } #comments .comment .reply a { border-radius:3px; padding:2px; background:#eee; } #comments .comment .fn a, #comments .comment .fn { color:#08c; } /* reply */ #reply-title { padding:8px 0; font-size:24px; } #commentform p { padding:0 0 20px 0; line-height:30px; } #commentform p input { float:left; line-height:30px; border:2px solid #999; border-radius:3px; height:30px; width:450px; margin-right:20px; } #commentform #comment { border:2px solid #999; width:450px; display:block; border-radius:3px; } #commentform #comment:focus, #commentform p input:focus { border-color:#08c; } #commentform .required { color:red; } #commentform .comment-form-comment label { display:block; border-radius:3px; } #commentform .form-allowed-tags { line-height:20px; } input.submit, #commentform #submit { width:120px; cursor:pointer; background:#138210; background:-webkit-gradient(linear, left top, left bottom, from(#45612b), to(#138210)); background:-moz-linear-gradient(top, #45612b, #138210); background:-o-linear-gradient(top, #45612b, #138210); border-radius:5px; color:#fff; font-weight:bold; border:none; height: 30px; line-height: 30px; margin-top:10px; } input.submit:hover, #commentform #submit:hover { background:#45612b; background:-webkit-gradient(linear, left top, left bottom, from(#138210), to(#45612b)); background:-moz-linear-gradient(top, #138210, #45612b); background:-o-linear-gradient(top, #138210, #45612b); } .page-nav { padding:20px 0; } /* sidebar */ #sidebar { width:29%; vertical-align:top; display:inline-block; } #sidebar .widget-container { padding:0 0 20px 15px; } .widget-container ul { padding-left:10px; } .widget-container li { line-height:20px; } #sidebar .widget-container h3 { line-height:24px; } /* footer widgets */ #footer-widgets { background:#273541; background:rgba(39,53,65,.95); border-bottom:4px solid rgba(27,27,27,.5); padding:20px 0; color:#eee; } #footer-widgets a { color:#08c; } #footer-widgets .widget-container { width:300px; padding:0 10px 0 9px; border-right:1px solid rgba(27,27,27,.5); display:inline-block; vertical-align:top; } /* footer */ #footer { padding:20px 0; background:#666; background:rgba(40,40,40,.95); color:#eee; } #footer a { color:#08c; } #footer .center { line-height:30px; } #footer .center .icon { display:inline-block; position:relative; padding:0 10px 0 20px; } .addBubble:after { background: none repeat scroll 0 0 #C55500; height: 3px; left: 1px; margin-top: -2px; width: 13px; content: ""; position: absolute; top: 50%; } .addBubble:before { background: none repeat scroll 0 0 #C55500; height: 13px; left: 6px; margin-top: -7px; width: 3px; content: ""; position: absolute; top: 50%; } .faster:after { content: ""; left: 0; position: absolute; top: 50%; background: none repeat scroll 0 0 transparent; border-color: transparent transparent transparent #C55500; border-style: solid; border-width: 5px 7px; left: 7px; margin-top: -4px; } .faster:before { content: ""; left: 0; position: absolute; top: 50%; background: none repeat scroll 0 0 transparent; border-color: transparent transparent transparent #C55500; border-style: solid; border-width: 5px 7px; left: 1px; margin-top: -4px; } #footer .center a:hover { color:#fff; } /* css icons */ .social { width:40px; float:left; padding:10px 10px 0 0; cursor:pointer; } .shareto { float:left; line-height:58px; font-weight:bold; font-size:16px; margin:0 25px; } .social:hover { } .social a { font:bold 30px/1 Tahoma, sans-serif; display:block; width:32px; height:32px; overflow:hidden; border:1px solid transparent; line-height:32px; text-decoration:none; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; position:relative; } .social:hover a { border:1px solid #08c; } .social.twitter a { position:relative; border-color:#a8eaec; text-transform:lowercase; text-indent:10px; letter-spacing:15px; font:bold 30px/1 Tahoma, sans-serif; line-height:30px; color:#76DDF8; background:#daf6f7; text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff; -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.4); -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.4); box-shadow:0 0 4px rgba(0, 0, 0, 0.4); /* standards version last */ background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6)); background:-moz-linear-gradient(top, #dbf7f8, #88e1e6); } .social.rss a { width:29px; height:30px; padding:0 2px; border-color:#999; border-width:2px; text-transform:lowercase; text-indent:-186em; font-size:32px; font-weight:bold; color:#fff; background:transparent; } .social.rss a:before { content:"\00a0"; position:absolute; bottom:5px; left:5px; width:6px; height:6px; background:#999; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } .social.rss a:after { content:"\00a0"; position:absolute; bottom:5px; left:5px; width:11px; height:11px; border-style:double; border-width:10px 10px 0 0; border-color:#999; -moz-border-radius:0 50px 0 0; -webkit-border-top-right-radius:50px; border-radius:0 50px 0 0; } .social.facebook a { position:relative; border-color:#3c5a98; text-transform:lowercase; text-indent:17px; letter-spacing:10px; font-weight:bold; font-size:32px; line-height:32px; color:#fff; background:#3c5a98; -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.4); -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.4); box-shadow:0 0 4px rgba(0, 0, 0, 0.4); } .social.addthis a { position:relative; border-color:#0c5f0c; text-align:center; text-indent:-9000px; font-size: 32px; font-weight:bold; color:#fff; background:#138210; -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.4); -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.4); box-shadow:0 0 4px rgba(0, 0, 0, 0.4); background:-webkit-gradient(linear, left top, left bottom, from(#68db21), to(#138210)); background:-moz-linear-gradient(top, #68db21, #138210); } .social.addthis a:after { content:"+"; position:absolute; left:0; top:0; width:32px; text-indent:0; text-align:center; font-size:32px; color:#fff; } .social a:hover, .social a:focus, .social a:active { border-color:#08c; } #wrapper a:hover { color:#e36443; } /* page nav */ .page-nav{ padding:10px 10px 10px 20px; } .page-nav a{ color:#333; } .wp-pagenavi{ padding:5px 15px 5px 15px; } .wp-pagenavi .pages{ margin:0 5px; } .wp-pagenavi .page{ padding:0 3px 0 3px; } .wp-pagenavi .current{ position:reletive; border:1px solid #ddd; padding:0 10px 0 10px; }