www.gusucode.com > 200套html5精品模板76_100 > 089/css/style.css
/* Global style */ html, body { } html { } body { font: 13px Arial; margin: 0; padding: 0; color: #5e5e5e; background:url(../images/bg.jpg) top center; } h1, h2, h3, h4, h5, h6, span, p, input { margin: 0; padding: 0; } table, tr, td { margin: 0; padding: 0; border-collapse: collapse; } ul, li, ol { margin: 0; padding: 0; } img { border: none; } a { color: #542c79; text-decoration: none; } a:hover { text-decoration: underline; } a:focus { outline: 0; } .wrapper { width:1000px; margin:0px auto; position:relative; } .clear-float { clear:both; } .content { width:700px; display:block; background:#fff; } .header { width:700px; height:58px; display:block; background:#542c79; font-size:13px; color:#c2b6cd; } .sidebar { position:fixed; width:300px; height:100%; display:block; background:#f7f7f7 url(../images/px-sidebar.png) repeat-y top left; top:0px; margin-left:700px; } /* Header style */ img.logo { float:left; margin:11px 21px; } h1.logo { float:left; margin:11px 21px; font-size:2em; color:#fff; } /* .header span { width:330px; float:left; margin:10px 0px; line-height:17px; } */ .header .social-icons { float:right; margin:11px 5px; } .header .social-icons a img { margin-right:5px; background:transparent; -moz-transition: background 0.3s; -webkit-transition: background 0.3s; -o-transition: background 0.3s; } .header .social-icons a.social-facebook:hover img { background:#4667a4; } .header .social-icons a.social-twitter:hover img { background:#33b5cd; } .header .social-icons a.social-rss:hover img { background:#f39633; } /* Menu style */ ul.menu { float:left; display:block; padding:10px 0px; list-style:none; } ul.menu > li { float:left; display:block; } ul.menu > li a { display:block; color:#fff; font-size:14px; font-weight:bold; padding:9px 10px; text-decoration:none; -moz-transition: background 0.1s; -webkit-transition: background 0.1s; -o-transition: background 0.1s; } ul.menu > li:hover a { background:#5e3782; } ul.menu > li a span { padding-right:16px; background:url(../images/submenu-icon.png) no-repeat center right; } ul.menu li > ul { width:180px; background:#5e3782; position:absolute; display:none; z-index:100; } ul.menu li:hover > ul { display:block; } ul.menu li > ul li { display:block; } ul.menu li > ul li a { display:block; padding-right:16px; } ul.menu li > ul li:hover a { display:block; background:#6a428f; } ul.menu li > ul li a span { display:block; background:url(../images/subsubmenu-icon.png) no-repeat center right; } ul.menu li ul li > ul { left:180px; margin-top:-34px; width:180px; position:absolute; display:none; z-index:100; } ul.menu li ul li > ul li:hover a { display:block; background:#784f9d; } /* Post style */ .main .article-span { display:block; padding:10px 40px; font-size:11px; color:#5e5e5e; background:#f7f7f7; border-bottom:1px solid #dedede; } .main .article-span a { color:#5e5e5e; text-decoration:none; } .main .article-span .icon-article { padding:0px 20px; } .main .article-span a.icon-article { opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } .main .article-span a.icon-article:hover { padding:0px 20px; opacity:0.6; } .main .article-span .icon-article.article-time { background:url(../images/icon-article-time.png) no-repeat center left; } .main .article-span .icon-article.article-comments { background:url(../images/icon-article-comments.png) no-repeat center left; } .main .article-span .icon-article.article-user { background:url(../images/icon-article-user.png) no-repeat center left; } .main .article-span .share { float:right; } .main .article-span .share a img { margin-left:7px; opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } .main .article-span .share a:hover img { opacity:0.6; } .main h1 { display:block; padding:0px 40px 0px 33px; margin-top:25px; font-size:27px; line-height:28px; font-weight:normal; color:#542c79; border-left:7px solid #542c79; } .main h2 { display:block; padding:0px 40px; font-size:25px; line-height:28px; font-weight:normal; color:#542c79; } .main h3 { display:block; padding:0px 40px; font-size:23px; line-height:28px; font-weight:normal; color:#542c79; } .main h4 { display:block; padding:0px 40px; font-size:21px; line-height:28px; font-weight:normal; color:#542c79; } .main h5 { display:block; padding:0px 40px; font-size:18px; line-height:28px; font-weight:normal; color:#542c79; } .main h6 { display:block; padding:0px 40px; font-size:16px; line-height:28px; font-weight:normal; color:#542c79; } .main ul.list-1, .main ul.list-2, .main ul.list-3 { padding:0px 40px; } .main ul.list-1 li, .main ul.list-2 li, .main ul.list-3 li { font-size:13px; line-height:28px; font-weight:normal; color:#542c79; padding-left:12px; margin-left:38px; } .main ul.list-1 li { list-style:url(../images/list-style-1.png); } .main ul.list-2 li { list-style:url(../images/list-style-2.png); } .main ul.list-3 li { list-style:url(../images/list-style-3.png); } .main > p { display:block; padding:25px 40px; font-size:14px; line-height:20px; } .with-margin { margin:20px 0px; } .spacer-2 { width:100%; height:10px; background:url(../images/spacer-2.png) repeat-x center; } .spacer-3 { width:100%; height:1px; border-bottom:1px dotted #dedede; } .spacer-4 { width:100%; height:1px; border-bottom:1px dashed #dedede; } .centered-image { width:500px; margin:0px auto; } .centered-image img { width:500px; height:300px; } .centered-image .caption-span { display:block; background:#f2f2f2; color:#542c79; padding:9px 13px; font-size:14px; } a.view-img { display:block; background:#542c79 url(../images/loupe.png) no-repeat center; text-decoration:none; } a.view-img img { opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } a.view-img:hover img { opacity:0.3; } /* Photo gallery style */ .photo-galleries { display:block; padding:10px 32px 40px 32px; } .photo-gallery { position:relative; display:inline-block; background:#542c79; width:300px; overflow:hidden; margin:20px 8px 0px 8px; } .photo-gallery ul li { display:block; float:left; } .photo-gallery ul li a { display:block; background:#542c79 url(../images/loupe.png) no-repeat center; text-decoration:none; } .photo-gallery ul li a img { width:88px; height:65px; opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } .photo-gallery ul li.main-photo a img { width:212px; height:130px; } .photo-gallery ul li a:hover img { opacity:0.3; } .photo-gallery p { padding:8px 12px 30px 12px; display:block; color:#fff; font-size:12px; height:60px; overflow:hidden; } .photo-gallery a.gallery-view-all { padding:8px 12px 8px 15px; float:right; color:#fff; font-size:11px; background:url(../images/icon-gallery-pages.png) no-repeat left center; text-decoration:none; position:absolute; right:0px; bottom:0px; opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } .photo-gallery a.gallery-view-all:hover { opacity:0.6; } /* Article gallery style */ .article-gallery { display:block; background:#542c79; } .article-gallery.gallery-view { background:transparent; padding-bottom:40px; } .article-gallery ul li { display:block; float:left; } .article-gallery ul li a { display:block; background:#542c79 url(../images/loupe.png) no-repeat center; text-decoration:none; } .article-gallery ul li a span.blank { display:block; width:175px; height:130px; overflow:hidden; color:#fff; background:#542c79 url(../images/loupe.png) no-repeat center 45px; text-align:center; } .article-gallery ul li a span.blank font { display:block; padding-top:78px; } .article-gallery ul li a img { width:175px; height:130px; opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } .article-gallery ul li a:hover img { opacity:0.3; } .article-gallery p { padding:8px 0px 8px 40px; display:block; width:480px; color:#fff; font-size:12px; } a.gallery-view-all { padding:8px 40px 8px 15px; float:right; color:#fff; font-size:11px; background:url(../images/icon-gallery-pages.png) no-repeat left center; text-decoration:none; opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } a.gallery-view-all:hover { opacity:0.6; } .spacer { display:block; border:0px; height:1px; width:100%; background:#dedede; } /* About author style */ .about-author { display:block; padding:25px 40px; font-size:13px; line-height:19px; } .about-author img { float:left; } .about-author h2 { padding:0px; display:block; margin:0px 0px 3px 124px; font-size:25px; color:#542c79; font-weight:normal; } .about-author p { display:block; margin:0px 0px 10px 124px; } .about-author a.link-www { display:block; margin:0px 0px 10px 124px; color:#9c9c9c; } .about-author a.link-all-posts { display:block; margin:0px 0px 0px 124px; color:#542c79; font-size:12px; } /* Comments style */ .block-comments { display:block; font-size:13px; line-height:19px; } .block-comments ol > li { display:block; border-bottom:1px dotted #dedede; } .block-comments ol li .inline-comment { display:block; padding:25px 40px; } .block-comments ol > li ul.children li { display:block; border-top:1px dotted #dedede; } .block-comments ol > li ul.children li .inline-comment { padding-left:33px; border-left:7px solid #542c79; } .block-comments ol > li ul.children h3 a { display:inline-block; padding-right:20px; background:url(../images/in-reply.png) no-repeat center right; } .block-comments img { float:left; } .block-comments .comments-time { float:right; color:#9c9c9c; display:block; padding-left:20px; background:url(../images/icon-comment-time.png) no-repeat center left; } .block-comments h3 { padding:0px; color:#542c79; text-decoration:none; font-size:16px; font-weight:normal; margin:0px 0px 10px 80px; } .block-comments h3 a { color:#542c79; text-decoration:none; } .block-comments p { margin:0px 0px 10px 80px; } .block-comments a.comment-reply { font-size:12px; } .block-comments a.comment-reply span { margin:0px 0px 0px 80px; background:#f2f2f2 url(../images/icon-comment-reply.png) no-repeat 4px -19px; display:inline-block; padding:1px 10px 1px 26px; color:#542c79; } .block-comments a.comment-reply:hover span { background:#542c79 url(../images/icon-comment-reply.png) no-repeat 4px 2px; color:#fff; } .comment-form { display:block; padding:25px 40px; font-size:13px; line-height:19px; } .comment-form input[type=text] { background:#f2f2f2; border:0px; border-bottom:2px solid #d6c9e1; padding:6px 14px; width:170px; color:#542c79; display:block; float:left; margin-right:8px; } .comment-form textarea { background:#f2f2f2; border:0px; border-bottom:2px solid #d6c9e1; padding:6px 14px; width:582px; margin-top:8px; color:#542c79; height:100px; } .comment-form input[type=submit] { background:#542c79 url(../images/icon-comments-add.png) no-repeat 12px 9px; border:0px; padding:4px 9px 4px 30px; color:#fff; display:block; float:right; margin-top:5px; margin-right:9px; cursor:pointer; } .comment-form input[type=submit]:hover { background:#3c1c5a url(../images/icon-comments-add.png) no-repeat 12px 9px; } div.none-comments { display:block; width:280px; margin:60px auto; padding-left:90px; background:url(../images/no-comments.png) no-repeat top left; } div.none-comments span { display:block; font-size:17px; color:#542c79; padding-top:16px; padding-bottom:3px; } div.none-comments font { display:block; font-size:13px; color:#542c79; padding-bottom:8px; } div.none-comments a.comment-reply span { margin:0px; font-size:12px; } /* Sidebar style */ .sidebar .top { width:100%; position:absolute; border-bottom:7px solid #542c79; background:#542c79; height:57px; } .sidebar .top div { width:100%; background:url(../images/bg.jpg) top center; height:57px; opacity:0.8; } .sidebar .top input[type=text] { padding:8px 12px; margin:12px 14px; border:0px; color:#454545; font-size:12px; width:248px; -moz-border-radius: 2px; border-radius: 2px; opacity:0.7; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } .sidebar .top input[type=submit] { padding:0px; margin:0px; border:0px; position:absolute; width:30px; height:32px; top:12px; right:14px; background:url(../images/search-loupe.png) no-repeat center; cursor:pointer; } .sidebar .top input[type=text]:focus { opacity:1; } .sidebar .bottom { width:100%; position:absolute; bottom:0px; border-top:7px solid #542c79; background:#542c79; height:57px; } .sidebar .bottom div { width:100%; background:url(../images/bg.jpg) top center; height:57px; opacity:0.8; } .sidebar .bottom a { display:inline-block; padding:10px 0px 0px 10px; margin-left:8px; background:url(../images/footer-ball.png) no-repeat 0px 17px; color:#fff; font-size:12px; } .sidebar .bottom a.fist-element { background:transparent; padding:10px 0px 0px 0px; } .sidebar .bottom .copyright { background:transparent; font-size:12px; padding:6px 0px 0px 0px; color:#907ea1; } .sidebar h2 { font-size:15px; font-weight:bold; color:#542c79; padding:9px 16px; } .sidebar .article-list { list-style:none; display:block; border-bottom:2px solid #542c79; } .sidebar .article-list li { list-style:none; display:block; border-top:1px solid #e6e6e6; } .sidebar .article-list li a { display:block; padding:15px 17px; height:60px; text-decoration:none; -moz-transition: background 0.2s; -webkit-transition: background 0.2s; -o-transition: background 0.2s; } .sidebar .article-list li a:hover { background:#e9e4ed; } .sidebar .article-list li.active a { background:#542c79; } .sidebar .article-list li a .imagee { display:block; float:left; width:60px; height:60px; position:relative; } .sidebar .article-list li a img.thumbnail { display:block; float:left; width:60px; height:60px; position:absolute; z-index:9; top:0px; left:0px; } .sidebar .article-list li a img.hover { background:url(../images/overimg-sidebar-article.png) no-repeat center; display:block; position:absolute; width:60px; height:60px; z-index:10; top:0px; left:0px; } .sidebar .article-list li.active a img.hover { background:url(../images/overimg-sidebar-article-white.png) no-repeat center; } .sidebar .article-list li a .title { display:block; font-size:14px; color:#542c79; margin:2px 0px 4px 74px; height:18px; overflow:hidden; width:192px; font-weight:bold; } .sidebar .article-list li.active a .title { color:#fff; } .sidebar .article-list li a .text { display:block; font-size:12px; color:#686868; margin:6px 0px 0px 74px; line-height:15px; height:30px; width:192px; overflow:hidden; } .sidebar .article-list li.active a .text { color:#fff; } .sidebar a.load-more { display:block; color:#542c79; padding:10px 14px; text-align:center; } .sidebar a.load-more span { padding-right:20px; padding-bottom:1px; background:url(../images/read-more.png) no-repeat right bottom; } /* Gallery style */ .gallery-front-image { position:relative; } .gallery-image-selector { display:block; position:absolute; bottom:0px; width:100%; left:0px; height:39px; } .gallery-image-selector > span { display:block; background-color:rgb(0, 0, 0); opacity:0.7; padding:10px 40px; color:#fff; font-size:15px; } .gallery-image-selector > span a.previous { display:block; float:right; color:#fff; font-weight:bold; text-decoration:none; padding-left:14px; padding-bottom:1px; background:url(../images/gallery-image-previous.png) no-repeat left center; opacity:1; -moz-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; } .gallery-image-selector > span a.next { display:block; float:right; color:#fff; font-weight:bold; text-decoration:none; margin-left:24px; padding-right:14px; padding-bottom:1px; background:url(../images/gallery-image-next.png) no-repeat right center; opacity:1; -moz-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; } .gallery-image-selector > span a.next:hover, .gallery-image-selector span > a.previous:hover { opacity:0.7; } /* Latest articles style */ .latest-articles-block { position:relative; display:inline-block; margin:30px 0px; } .latest-articles-block ul li { display:block; float:left; } .latest-articles-block ul li a { display:block; background:#542c79; text-decoration:none; position:relative; overflow:hidden; } .latest-articles-block ul li a span { top:100px; left:0px; position:absolute; width:151px; height:92px; color:#fff; overflow:hidden; padding:14px; font-size:12px; opacity:0; -moz-transition: opacity 0.3s, top 0.3s; -webkit-transition: opacity 0.3s, top 0.3s; -o-transition: opacity 0.3s, top 0.3s; } .latest-articles-block ul li a span b { display:block; padding-bottom:9px; font-size:15px; } .latest-articles-block ul li a:hover span { top:0px; opacity:1; } .latest-articles-block ul li a img { width:175px; height:130px; opacity:1; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; } .latest-articles-block ul li a:hover img { opacity:0.2; } a.view-more-from { font-size:12px; color:#542c79; float:right; padding:4px 10px 4px 24px; background:#f2f2f2 url(../images/read-more.png) no-repeat 2px -19px; margin:20px 40px 0px 0px; text-decoration:none; margin-bottom:-10px; } a.view-more-from:hover { color:#fff; background:#542c79 url(../images/read-more.png) no-repeat 2px 2px; } .photo-galleries a.read-more { margin:20px 0px 0px 8px; } a.read-more.article-list { margin:0px 0px 20px 40px; } a.read-more { display:inline-block; font-size:12px; color:#542c79; padding:4px 10px 4px 24px; background:#f2f2f2 url(../images/read-more.png) no-repeat 2px -19px; margin:20px 0px 0px 0px; text-decoration:none; } a.read-more:hover { color:#fff; background:#542c79 url(../images/read-more.png) no-repeat 2px 2px; } /* Category block style */ .category-block .article-block-space { display:block; height:10px; } .category-block { display:block; float:left; } .category-block > div { width:284px; padding:20px 26px 25px 40px; } .category-block.second > div { border-left:1px dotted #dedede; padding:20px 40px 25px 25px; } .category-block h1 { margin:0px; margin-top:24px; } .category-block.second h1 { margin:0px; border-left:1px dotted #dedede; padding-left:24px; padding-top:24px; } .category-block h2 { padding:0px; } .category-block h2 a { display:block; font-size:19px; font-weight:normal; margin:10px 0px; } .category-block h3 { padding:0px; } .category-block h3 a { display:block; font-size:17px; font-weight:normal; margin:10px 0px; } .category-block p { display:block; font-size:14px; font-weight:normal; color:#5e5e5e; line-height:20px; } div.category-block .more-article-list { margin-top:0px; padding-top:10px; border-top:1px dotted #dedede; } div.category-block .more-article-list .read-more { margin-top:5px; } /* Slider style */ #control a { padding:0 5px; color:#FFFFFF; margin-left:2px; font-weight:bold; text-decoration:none; } #control a.active { background:#542C79; } .sexyslider-title { margin-bottom:39px; padding:10px 40px 10px 40px; font-size:13px; } .sexyslider-title h1 { padding:0px; border:0px; margin:0px; padding-bottom:6px; font-size:18px; font-weight:bold; color:#fff; } .sexyslider-title h1 a { color:#fff; } #navigation { width:190px; float:right; } #navigation a.sexyslider-prev { display:block; float:left; color:#fff; font-weight:bold; text-decoration:none; padding-left:14px; padding-bottom:1px; background:url(../images/gallery-image-previous.png) no-repeat left center; opacity:1; -moz-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; } #navigation a.sexyslider-next { display:block; float:left; color:#fff; font-weight:bold; text-decoration:none; margin-left:24px; padding-right:14px; padding-bottom:1px; background:url(../images/gallery-image-next.png) no-repeat right center; opacity:1; -moz-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; } #navigation a.sexyslider-next:hover, #navigation a.sexyslider-prev:hover { opacity:0.7; } .pager { text-align:center; padding:20px 0px; } .pager a { display:inline-block; padding:2px 7px; font-size:13px; font-weight:bold; text-decoration:none; color:#542c79; -moz-transition: background 0.2s; -webkit-transition: background 0.2s; -o-transition: background 0.2s; } .pager a:hover { background:#f2f2f2; } .pager a.active { color:#fff; background:#542c79; }