www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/019/css/style.css
/* ------------------------------------------------------------------------
Template Name : Jungleland
Template Code : S-0030
Version : 1.2
Author : Erwin Aligam
Author URI : http://www.styleshout.com/
Last Date Modified : December 23, 2011
-------------------------------------------------------------------------- */
/* =============================================================================
R E S E T
================================================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* =============================================================================
G E N E R A L
================================================================================ */
html { overflow-y: scroll; }
body { background: #1C130E url(../images/bg.png); }
/* Links */
a:link, a:visited {
text-decoration: none;
color: #c67114;
outline: 0;
}
a:hover, a:focus, a:active {
color: #fff;
}
/* Lists */
ul, ol {
margin: 0 0 24px 0;
padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }
dt {
font-weight: bold;
color: #549207;
}
dd {
padding-left: 20px;
}
dl { margin: 0 0 24px 0; }
/* Images */
img {
background: #130D0A;
border: 1px solid #261a14;
padding: 12px;
}
img.align-right { margin: 6px 0px 6px 12px; }
img.align-left { margin: 6px 12px 6px 0px; }
/* Button */
a:link.more,
a:visited.more,
form input.button,
.commentlist li .comment-text .reply a,
.navigation a:link,
.navigation a:visited {
font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', Sans-serif;
float: left;
margin-right: 8px;
padding: 6px 10px;
border: 1px solid #9c4003;
background: #DA6503 url(../images/button-bg.png);
color: #130d0a;
font-size: 11px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(250,250,250,0.4);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #eb961a;
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #eb961a;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #eb961a;
}
a:hover.more,
.commentlist li .comment-text .reply a:hover,
.navigation a:hover {
background: #4EA41F url(../images/button-bg-hover.png);
border: 1px solid #366004;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #9DC13E;
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #9DC13E;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #9DC13E;
}
/* Table */
table {
border-collapse: collapse;
margin: 12px 0 24px 0;
}
tr { background: #130D0A; }
th, td {
text-align: left;
border-width: 1px;
border-style: solid;
}
th {
padding: .8em 1em;
background: #45561B;
border-color: #647C28 #586A22 #43511A #5A6F23;
color: #fff;
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
font-weight: bold;
}
td {
border-color: #271D14;
padding: .7em 1em;
}
/* Form */
form {
width: 506px;
margin: 24px 0;
padding: 32px 40px;
background-color: #130D0A;
border: 1px solid #261a14;
}
input, select {
vertical-align: middle;
}
form div {
border-bottom: 1px solid #1D1410;
padding: 12px 0 5px 0;
margin: 0;
}
form p {
color: #fff;
}
form label {
display: block;
font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, Sans-Serif;
font-weight: bold;
line-height: 24px;
font-size: 13px;
margin: 0 0 5px 0;
}
form label span {
color: #549207;
}
form input,
form select,
form textarea {
margin-bottom: 24px;
padding: 10px;
color: #3d322c;
background: #0E0A07;
border: 1px solid #1D1410;
font: 11px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;
}
form textarea {
height: 325px;
}
form input:focus,
form select:focus,
form textarea:focus {
background: #988175;
color: #0E0A07;
border: 1px solid #0E0A07;
}
form input.button {
height: 38px;
float: none;
cursor: pointer;
}
.ie7 form input.button {
padding: 0 2px;
}
#name, #email, #message, #website {
width: 482px;
}
/* Clearing and other stuff */
.no-border { border: none; }
.align-left { float: left; }
.align-right { float: right; }
.fix {
clear: both;
height: 1px;
margin: -1px 0 0;
overflow: hidden;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.ie7 .clearfix { zoom: 1; } /* IE7 */
/* =============================================================================
S T R U C T U R E
================================================================================ */
#header-wrap {
width: 100%;
background: url(../images/header-bg.png) repeat-x left top;
height: 170px;
}
header {
position: relative;
margin: 0 auto;
height: 170px;
width: 940px;
background: url(../images/header-div.png) no-repeat center bottom;
}
#featured-wrap {
width: 940px;
margin: 0 auto;
padding: 30px 0;
background: transparent url(../images/content-div.png) no-repeat center bottom;
}
#content-wrap, #content-wrap-home {
width: 940px;
margin: 0 auto;
padding: 15px 0 35px 0;
background: url(../images/content-div.png) no-repeat center bottom;
overflow: hidden;
}
#main {
width: 598px;
float: left;
margin-top: 15px;
margin-left: 10px;
}
#sidebar {
float: right;
width: 276px;
margin-top: 25px;
margin-right: 10px;
}
#content-wrap-home #main {
margin-top: 0;
}
#content-wrap-home #sidebar {
margin-top: 5px;
}
#extra-wrap {
clear: both;
padding: 30px 0 10px 0;
background: transparent url(../images/extra-bg.png) repeat-x;
position: relative;
top: -2px;
}
#extra {
width: 930px;
margin: 0 auto;
font-size: 12px;
line-height: 1.7em;
padding-left: 10px;
}
footer {
width: 920px;
margin: 0 auto;
padding-top: 12px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;
font-size: 11px;
}
/* =============================================================================
T Y P O G R A P H Y
================================================================================ */
body {
font: 15px/24px Georgia, Serif;
color: #988175;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}
/* Paragraph */
p {
margin-bottom: 24px;
}
#main .col .top p {
font-size: 11px;
color: #b5b5b5;
margin: 5px 0;
}
#featured-wrap .text-block .post-meta,
.post .post-info {
font-family: 'Lucida Sans Unicode', Arial, Helvetica, Sans-Serif;
font-size: 12px;
line-height: 1.3em;
margin-bottom: 16px;
}
#extra p {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;
}
#extra strong, #extra em, #extra b, #extra i {
font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, sans-serif;
}
/* Headers */
h1, h2, h3, h4 {
font: bold 1em/1.5em Arial, Helvetica, Sans-Serif;
margin-bottom: 24px;
color: #E2DBD8;
}
h1 {
font-size: 38px;
line-height: 42px;
margin-top: 2px;
margin-bottom: 4px;
letter-spacing: -2px;
}
/* ----------------------------------------------------------------------------- */
h2 {
font-size: 32px;
line-height: 38px;
margin-top: 5px;
margin-bottom: 5px;
}
#featured-wrap .text-block h2 {
margin-right: 20px;
margin-bottom: 0;
}
/* ----------------------------------------------------------------------------- */
h3 {
font-size: 22px;
line-height: 24px;
letter-spacing: 0.2px;
margin-top: 12px;
margin-bottom: 12px;
}
#extra h3 {
font: bold 18px Arial, Helvetica, Sans-Serif;
margin-bottom: 15px;
color: #C8BAB5;
}
/* ----------------------------------------------------------------------------- */
h4 {
font-size: 18px;
}
#main .col .top h4 {
line-height: 1.3em;
margin-bottom: 0;
}
/* ----------------------------------------------------------------------------- */
blockquote {
margin: 12px 0;
padding: 20px 30px 0 45px;
background: url(../images/quote.png) no-repeat 0 22px;
font-size: 18px;
line-height: 28px;
font-style: italic;
font-family: Georgia, 'Times New Roman', Times, Serif;
overflow: hidden;
}
blockquote .author {
text-transform: uppercase;
font-style: normal;
letter-spacing: 1.5px;
text-align: right;
font-size: 12px;
}
code {
font-family: Consolas, 'Lucida Console', Monaco, Monospace;
font-size: 14px;
line-height: 1.5em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0 0 24px 0;
padding: 0 25px;
display: block;
background: #130D0A;
border: 1px solid #261a14;
clear: both;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
mark {
background-color: #c67114;
text-shadow: none;
color: #110C09;
}
strong, b {
font-weight: bold;
}
/* =============================================================================
H E A D E R
================================================================================ */
/* Logo */
header hgroup {
position: absolute;
background: url(../images/logo.png) no-repeat;
height: 60px;
width: 218px;
display: block;
top: 85px;
left: 10px;
}
header hgroup h1 {
margin: 0;
padding: 0;
}
header hgroup h1 a {
text-indent: -9999em;
display: block;
height: 48px;
width: 218px;
}
header hgroup h3 {
text-indent: -9999em;
height: 0;
}
/* Main Navigation */
header nav {
position: absolute;
left: 0;
top: 0;
width: 650px;
height: 59px;
}
header nav ul {
list-style: none;
margin-left: 10px;
padding: 0;
height: 59px;
}
header nav ul li {
float: left;
}
header nav ul a:link,
header nav ul a:visited {
font-family: Verdana, Sans-Serif;
font-size: 11px;
font-weight: bold;
text-transform: lowercase;
display: block;
margin: 0;
padding: 0 15px;
height: 59px;
color: #867474;
text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);
line-height: 70px;
}
header nav ul li a:hover,
header nav ul li a:active {
border: none;
color: #D67630;
}
header nav ul li#current {
background: url(../images/tab-right.png) no-repeat right top;
color: #D67630;
}
header nav ul li#current a {
background: url(../images/tab-left.png) no-repeat left top;
color: #f0e8e8;
}
/* Subscribe */
header div.subscribe {
position: absolute;
font-family: Verdana, Sans-Serif;
text-transform: lowercase;
font-size: 11px;
font-weight: bold;
line-height: 30px;
width: 170px;
height: 30px;
color: #867474;
text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);
background: url(../images/rss32.png) no-repeat 0 center;
padding-left: 28px;
right: 5px;
top: 18px;
}
header div.subscribe a {
padding-right: 3px;
padding-left: 3px;
color: #fff;
}
header div.subscribe a:hover,
header div.subscribe a:active {
color: #D67630;
}
/* Quick Search */
header form#quick-search {
position: absolute;
background: transparent;
border: none;
margin: 0;
padding: 0;
width: 222px;
top: 92px;
right: 10px;
}
header fieldset.search {
border: none;
width: 222px;
height: 37px;
padding: 0;
margin: 0;
background: url(../images/search-bg.png) no-repeat;
}
header .search input {
border: none;
float: left;
padding: 0;
margin: 0;
}
header .search input:focus {
color: #777;
}
header .search button {
border: none;
float: right;
padding: 0; margin: 0;
}
header .search label { display: none; }
header .search input.tbox {
font-weight: normal;
margin: 12px 0 10px 10px;
background: transparent;
width: 150px;
}
header .search button.btn {
width: 37px;
height: 37px;
cursor: pointer;
text-indent: -9999px;
background: url(../images/search.png) no-repeat center center;
}
/* =============================================================================
F E A T U R E D
================================================================================ */
#featured {
position: relative;
width: 918px;
margin: 0 auto;
background: #130D0A;
border: 1px solid #261a14;
}
#featured-wrap #featured-ribbon {
position: absolute;
background: url(../images/ribbon.png) no-repeat;
width: 110px;
height: 110px;
top: -7px;
right: -7px;
z-index: 99999;
}
#featured-wrap .image-block {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
float: left;
width: 339px;
}
#featured-wrap .image-block img {
padding: 0;
border: none;
}
#featured-wrap .text-block h2 a {
color: #E2DBD8;
}
#featured-wrap .text-block {
margin-top: 20px;
margin-bottom: 30px;
margin-right: 30px;
float: right;
width: 493px;
}
#featured-wrap .text-block .post-meta a {
color: #549207;
}
/* =============================================================================
C O N T E N T
================================================================================ */
#main .col {
width: 276px;
float: left;
margin-top: 10px;
margin-bottom: 25px;
}
#main .col img {
margin: 0 0 20px 0;
padding: 14px;
background: #130D0A;
display: block;
}
#main h2 a {
color: #E2DBD8;
}
#main .col .top {
margin-bottom: 10px;
padding-bottom: 2px;
border-bottom: 1px solid #29201c;
}
#main .col .top h4 a {
color: #6f892c;
}
#main .col .top p a:link,
#main .col .top p a:visited {
color: #b5b5b5;
}
#main .col .top p .comment {
margin-left: 5px;
padding: 0 0 5px 20px;
background: url(../images/comment.png) no-repeat 0 2px;
}
#main .col .top p .datetime {
padding: 0 0 5px 20px;
background: url(../images/clock.png) no-repeat 0 0;
}
#main .col .content {
margin: 0 5px
}
#main .even { margin-left: 45px; }
/* =============================================================================
S I D E B A R
================================================================================ */
/* Sidemenu */
#sidebar .sidemenu ul {
margin: 20px 0 30px 0;
padding: 0;
border-top: 1px solid #231C18;
text-align: left;
}
#sidebar .sidemenu ul li {
list-style: none;
font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, Sans-Serif;
margin: 0;
padding: 9px 5px 9px 19px;
border-bottom: 1px solid #231C18;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
background: url(../images/bullet.png) no-repeat 0 14px;
}
#sidebar .sidemenu ul li a:link,
#sidebar .sidemenu ul li a:visited {
padding-left: 0;
font-weight: bold;
color: #E2DBD8;
}
#sidebar .sidemenu ul li span {
display: block;
color: #9a8377;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;
font-weight: normal;
text-transform: none;
}
#sidebar .sidemenu ul li a:hover { color: #fff; border: none; }
#sidebar .sidemenu ul ul { margin: 0 0 0 5px; padding: 0; border: none; }
#sidebar .sidemenu ul ul li { border: none; }
/* Photostream */
#sidebar ul.photostream {
list-style: none;
margin: 20px 0 25px 0;
padding: 0;
}
#sidebar ul.photostream li {
float: left;
margin: 0 12px 6px 0;
padding: 0;
}
#sidebar ul.photostream li img {
background-color: #120c09;
border: 1px solid #261a14;
padding: 12px;
}
/* =============================================================================
E X T R A
================================================================================ */
#extra img {
background: #120c09;
padding: 10px;
}
#extra .xcol {
float: left;
width: 200px;
margin-right: 43px;
}
#extra .xcol.last {
margin-right: 0;
}
/* Footer List */
.footer-list ul {
border-top: 1px solid #231C18;
list-style: none;
padding: 0;
margin-left: 0;
}
.footer-list ul li {
border-bottom: 1px solid #231C18;
}
.footer-list ul li a:link,
.footer-list ul li a:visited {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;
display: block;
padding: 7px 0 7px 5px;
margin-left: 0;
color: #988175;
}
.footer-list ul li a:hover { color: #fff; }
/* Social */
.social ul li a:link,
.social ul li a:visited {
padding-left: 25px;
}
.footer-list ul li.facebook a {
background: url(../images/social/facebook.png) no-repeat 1px 9px;
}
.footer-list ul li.twitter a {
background: url(../images/social/twitter-2.png) no-repeat 1px 9px;
}
.footer-list ul li.googleplus a {
background: url(../images/social/google-plus-black.png) no-repeat 1px 9px;
}
.footer-list ul li.rss a {
background: url(../images/social/feed.png) no-repeat 1px 9px;
}
.footer-list ul li.email a {
background: url(../images/social/email.png) no-repeat 1px 9px;
}
/* =============================================================================
F O O T E R
================================================================================ */
footer a:hover {
color: #fff;
}
footer a.back-to-top {
background: url(../images/back-to-top.png) no-repeat right 3px;
font-weight: bold;
padding-right: 17px;
}
footer p.footer-left {
float: left;
margin: 0 0 40px 0;
padding: 0;
width: 600px;
text-align: left;
}
footer p.footer-right {
float: right;
margin: 0 -10px 40px 0;
padding: 0;
width: 320px;
text-align: right;
}
/* =============================================================================
P O S T
================================================================================ */
.post {
margin-bottom: 15px;
padding-bottom: 15px;
}
.post h2 a {
color: #E2DBD8;
}
.post .image-section {
clear: both;
display: block;
margin: 20px 0 15px 0;
padding: 0;
}
.post .image-section img {
padding: 14px;
}
.post .postmeta {
padding: 8px 15px; margin: 20px 10px 15px 0;
background: #130D0A;
border: 1px solid #261a14;
}
.post .postmeta a.comments { margin: 0 10px 0 5px; }
.post .postmeta a.readmore { margin: 0 10px 0 5px; }
.post .postmeta .date { margin: 0 10px 0 5px; }
.post .post-info a {
color: #549207;
}
.post .tags {
padding: 8px 15px; margin: 20px 12px 15px 0;
border-top: 1px solid #231C18;
border-bottom: 1px solid #231C18;
}
.post .tags span { color: #6f892c; }
/* Comments List */
ol.commentlist {
margin: 15px 10px 35px 0;
padding: 0;
background-color: #130D0A;
border-style: solid;
border-color: #261a14;
border-width: 1px 1px 0 1px;
}
.commentlist li {
list-style: none;
margin: 0;
padding: 15px 0 0 0;
border-bottom: 1px solid #261a14;
}
.commentlist li .comment-info {
width: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
.commentlist li .comment-info img {
float: right;
margin: 5px 25px 0 0;
}
.commentlist li .comment-info cite {
display: block;
margin: 0; padding: 5px 65px 5px 25px;
font-style: normal;
}
.commentlist li .comment-info cite .comment-data {
font-size: .8em;
font-weight: normal;
}
.commentlist li .comment-text {
clear: both;
margin: 0; padding: 0 20px 25px 25px;
}
.commentlist li .comment-text p {
margin: 10px 0 20px 0;
padding: 0;
}
.commentlist li .comment-text .reply a {
float: none;
}
.commentlist li ul.children { margin:0; padding: 0; }
.commentlist li ul.children li.depth-2,
.commentlist li ul.children li.depth-3 {
margin-left: 40px;
border-style: solid;
border-color: #281D15;
border-width: 1px 0 0 1px;
}
.commentlist li.thread-alt {
background: #100C0A;
}
/* =============================================================================
A R C H I V E S
================================================================================ */
ul.archive {
margin: 10px 0;
padding: 0;
border-top: 1px solid #231C18;
}
ul.archive li {
margin: 0;
padding: 14px 5px;
border-bottom: 1px solid #231C18;
list-style: none;
}
ul.archive li .post-title {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 18px;
}
ul.archive li .post-title a:link,
ul.archive li .post-title a:visited {
color: #E2DBD8;
}
ul.archive li .post-title a:hover {
border: none;
color: #fff;
}
ul.archive li .post-details {
margin-left: 0;
margin-top: 0;
font-size: .9em;
}
ul.archive li .post-details span {
padding-left: 5px;
padding-right: 5px;
}
/* Page Navigation */
.navigation {
margin: 20px 0 20px 5px;
padding: 0;
}