WordPress/wp-content/themes/twentyeleven/style.css

1933 lines
37 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: Twenty Eleven is a sophisticated theme designed and developed by the WordPress team, offering a unique page template to turn your blog into a showcase of different kinds of posts - Featured with an image, Asides, Link posts, and more. It also supports customization options like custom backgrounds, headers, menus, and widgets.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: light, white, two-columns, left-sidebar, right-sidebar, flexible-width, fixed-width, custom-background, custom-header, featured-images, featured-image-header, sticky-post, custom-menu, sticky-post, microformats, rtl-language-support, translation-ready
*/
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus { /* remember to define focus styles! */
outline: 0;
}
body {
background: #fff;
line-height: 1;
}
ol, ul {
list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: 0;
}
header, hgroup, footer, section, article, nav, aside {
display: block;
}
/* =Structure
----------------------------------------------- */
body {
padding: 0 2em;
}
#page {
margin: 2em auto;
max-width: 1000px;
}
#branding hgroup {
margin: 0 7.6%;
}
#access div {
margin: 0 7.6%;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}
/* Singular */
.singular #primary {
margin: 0;
}
.singular #content {
margin: 0 7.6%;
position: relative;
width: auto;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 68.9%;
}
/* Attachments */
.singular .image-attachment .entry-content {
margin: 0 auto;
width: auto;
}
.singular .image-attachment .entry-description {
margin: 0 auto;
width: 68.9%;
}
/* Showcase */
.page-template-showcase-php #primary {
margin: 0;
}
.page-template-showcase-php #content {
margin: 0 7.6%;
width: auto;
}
.page-template-showcase-php section.recent-posts {
float: right;
margin: 0 0 0 31.1%;
width: 69%;
}
.page-template-showcase-php #main .widget-area {
float: left;
margin: 0 -22.15% 0 0;
width: 22.15%;
}
/* error404 */
.error404 #primary {
margin: 0;
}
.error404 #content {
margin: 0 7.6%;
}
/* 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;
}
/* =Global
----------------------------------------------- */
body, input, textarea {
color: #333;
font: 15px "Helvetica Neue", Helvetica, Arial, serif;
font-weight: 300;
line-height: 1.625;
}
body {
background: #e2e2e2;
}
#page {
background: #fff;
}
/* Headings */
h1,h2,h3,h4,h5,h6 {
clear: both;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.625em;
}
/* Text elements */
p {
margin-bottom: 1.625em;
}
ul, ol {
margin: 0 0 1.625em 2.5em;
}
ul {
list-style: square;
}
ol {
list-style-type: decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}
dl {
margin: 0 1.625em;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1.625em;
}
strong {
font-weight: bold;
}
cite, em, i {
font-style: italic;
}
blockquote {
font-family: Georgia, "Bitstream Charter", serif;
font-style: italic;
font-weight: normal;
margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite {
font-style: normal;
}
blockquote cite {
color: #666;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
}
pre {
background: #f4f4f4;
font: 13px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
margin-bottom: 1.625em;
padding: 0.75em 1.625em;
}
code, kbd {
font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn {
border-bottom: 1px dotted #666;
cursor: help;
}
address {
display: block;
margin: 0 0 1.625em;
}
ins {
background: #fff9c0;
text-decoration: none;
}
sup,
sub {
font-size: 10px;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
input[type=text],
textarea {
background: #fafafa;
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
border: 1px solid #ddd;
color: #888;
}
input[type=text]:focus,
textarea:focus {
color: #333;
}
textarea {
padding-left: 3px;
width: 98%;
}
input[type=text] {
padding: 3px;
}
/* Links */
a {
color: #444;
}
a:visited {
color: #444;
}
a:focus,
a:active,
a:hover {
color: #1b8be0;
}
/* Assitive text */
.section-heading,
.screen-reader-text {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
/* =Header
----------------------------------------------- */
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 1;
}
#site-title {
padding: 4em 0 0;
}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 0 4em;
}
#branding img {
height: auto;
margin-bottom: -6px;
width: 100%;
}
/* =Menu
-------------------------------------------------------------- */
#access {
background: #222;
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a));
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #efefef;
}
#access li:hover > a {
background: #f9f9f9;
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5));
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #333;
}
#access ul li:hover > ul {
display: block;
}
#access .current_page_item a {
font-weight: bold;
}
/* Search Form */
#branding #searchform {
position: absolute;
text-align: right;
top: 4.3em;
right: 7.6%;
}
#branding #searchform div {
margin: 0;
}
#branding #s {
background: url(images/search.png) no-repeat 5px 6px;
float: right;
font-size: 14px;
height: 22px;
padding: 4px 10px 4px 28px;
width: 26%;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
}
#branding #s:focus {
background-color: #f9f9f9;
width: 114%;
}
#branding #searchsubmit {
display: none;
}
#branding .only-search #searchform {
top: 5px;
z-index: 1;
}
#branding .with-image #searchform {
bottom: -27px;
top: auto;
}
#branding .only-search #s {
background-color: #666;
border-color: #000;
color: #222;
}
#branding .only-search #s:focus {
background-color: #bbb;
}
/* =Content
----------------------------------------------- */
#main {
border-top: 2px solid #eee;
-webkit-box-shadow: 0 -1px 0 #dee7b1;
-moz-box-shadow: 0 -1px 0 #dee7b1;
box-shadow: 0 -1px 0 #dee7b1;
clear: both;
padding: 1.625em 0 0;
}
.page-title {
color: #333;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
margin: 0 0 2.6em;
text-transform: uppercase;
}
.page-title a {
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
text-decoration: none;
text-transform: none;
}
.hentry {
border-bottom: 1px solid #ddd;
margin: 0 0 1.625em;
padding: 0 0 1.625em;
position: relative;
}
.blog .sticky .entry-header .entry-meta {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.entry-title,
.entry-header .entry-meta {
padding-right: 76px;
}
.entry-title {
clear: both;
color: #222;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
padding-bottom: .3em;
}
.entry-title,
.entry-title a {
color: #222;
text-decoration: none;
}
.entry-title a:hover {
color: #1b8be0;
}
.entry-meta {
color: #666;
clear: both;
font-size: 12px;
line-height: 18px;
}
.entry-meta a {
color: #222;
font-weight: bold;
text-decoration: none;
}
.entry-meta a:focus,
.entry-meta a:active,
.entry-meta a:hover {
color: #1b8be0;
}
.entry-content,
.entry-summary {
padding: 1.625em 0 0;
}
.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
color: #000;
font-weight: bold;
margin: 0 0 .8125em;
}
.entry-content h3,
.comment-content h3 {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
.entry-content a {
color: #1b8be0;
}
.entry-content a:hover {
color: #ff4b33;
}
.entry-content table,
.comment-content table {
border-bottom: 1px solid #ddd;
margin: 0 0 1.625em;
width: 100%;
}
.entry-content th,
.comment-content th {
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
.entry-content td,
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
.comment-content ul,
.comment-content ol {
margin-bottom: 1.625em;
}
.comment-content ul ul,
.comment-content ol ol,
.comment-content ul ol,
.comment-content ol ul {
margin-bottom: 0;
}
dl.gallery-item {
margin: 0;
}
.page-link {
background: #f1f1f1;
border-top: 1px solid #ddd;
clear: both;
color: #888;
display: block;
font-size: 13px;
margin: 1.625em -30px;
padding: 4px 30px;
text-decoration: none;
}
.page-link a {
background: #d8d8d8;
color: #444;
margin: 0;
padding: 2px 3px;
text-decoration: none;
}
.page-link a:hover {
background: #1b8be0;
color: #bfddf3;
font-weight: bold;
}
.page-link span {
margin-right: 6px;
}
.entry-meta .edit-link a {
background: #aaa;
color: #fff;
-moz-border-radius: 3px;
border-radius: 3px;
float: right;
font-size: 12px;
font-weight: 300;
text-decoration: none;
padding: 0px 8px;
}
.entry-meta .edit-link a:hover {
background: #777;
}
.entry-content .edit-link {
clear: both;
display: block;
}
/* Author Info */
#author-info {
font-size: 12px;
overflow: hidden;
}
.singular #author-info {
background: #f9f9f9;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 2.2em -35.6% 0 -35.4%;
padding: 20px 35.4%;
}
.archive #author-info {
border-bottom: 1px solid #ddd;
margin: 0 0 2.2em;
padding: 0 0 2.2em;
}
#author-avatar {
float: left;
margin-right: -78px;
}
#author-avatar img {
background: #fff;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px;
-webkit-box-shadow: 0 1px 2px #bbb;
-moz-box-shadow: 0 1px 2px #bbb;
box-shadow: 0 1px 2px #bbb;
}
#author-description {
float: left;
margin-left: 108px;
}
#author-description h2 {
color: #000;
font-size: 15px;
font-weight: bold;
margin: 5px 0 10px;
}
/* Comments link */
.entry-header .comments-link a {
background: #eee;
border: 1px solid #ddd;
-moz-border-radius: 24px;
border-radius: 24px;
color: #777;
font-size: 18px;
height: 48px;
position: absolute;
top: 0;
right: 0;
text-align: center;
text-decoration: none;
width: 48px;
font-weight: 300;
line-height: 46px;
}
.entry-header .comments-link a:hover {
background: #1b8be0;
border-color: #0861a5;
color: #bfddf3;
}
.entry-header .comments-link .leave-reply {
font-size: 14px;
font-weight: bold;
text-transform: lowercase;
}
/* Singular content styles for Posts and Pages */
.singular .hentry {
border-bottom: none;
padding: 4.875em 0 0;
position: relative;
}
.singular.page .hentry {
padding: 3.5em 0 0;
}
.singular .entry-title {
color: #000;
font-size: 36px;
font-weight: bold;
line-height: 48px;
}
.singular .entry-title,
.singular .entry-header .entry-meta {
padding-right: 0;
}
.singular .entry-header .entry-meta {
position: absolute;
top: 0;
left: 0;
}
.singular .entry-header a {
color: #1b8be0;
}
.singular .entry-header a:hover {
color: #ff4b33;
}
.singular footer.entry-meta {
}
.singular blockquote.pull {
font-size: 21px;
font-weight: bold;
line-height: 1.6125em;
margin: 0 -22.25% 1.625em;
}
.singular .pull.alignleft {
margin: 0 1.625em 0 -22.25%;
}
.singular .pull.alignright {
margin: 0 -22.25% 0 1.625em;
}
.singular blockquote.pull.alignleft,
.singular blockquote.pull.alignright {
width: 33%;
}
.singular .entry-meta .edit-link a {
position: absolute;
bottom: auto;
left: 50px;
right: auto;
top: 80px;
}
/* Aside */
.format-aside .entry-title,
.format-aside .entry-header .comments-link {
display: none;
}
.singular .format-aside .entry-title {
display: block;
}
.format-aside .entry-content {
padding: 0;
}
.singular .format-aside .entry-content {
padding: 1.625em 0 0;
}
/* Link */
.format-link .entry-title,
.format-link .entry-header .comments-link {
display: none;
}
.singular .format-link .entry-title {
display: block;
}
.format-link .entry-content {
padding: 0;
}
.singular .format-link .entry-content {
padding: 1.625em 0 0;
}
/* Gallery */
.format-gallery .gallery-thumb {
float: left;
display: block;
margin-right: 1.625em;
}
/* error404 */
.error404 #main #searchform {
background: #f9f9f9;
border: 1px solid #ddd;
border-width: 1px 0;
margin: 0 -8.9% 1.625em;
padding: 1.625em 8.9%;
overflow: hidden;
}
.error404 #main #s {
width: 80%;
}
.error404 #main .widget {
float: left;
margin-right: 3.7%;
width: 30.85%;
}
.error404 #main .widget_archive {
margin-right: 0;
}
.error404 #main .widget_tag_cloud {
float: none;
margin-right: 0;
width: 100%;
}
.error404 .widgettitle {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
/* =Showcase
----------------------------------------------- */
h1.showcase-heading {
color: #333;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
/* Intro */
article.intro {
background: #f9f9f9;
border-bottom: none;
border-top: 5px solid #6F98A8;
-webkit-box-shadow: 0 -5px 0 #305A7A;
-moz-box-shadow: 0 -5px 0 #305A7A;
box-shadow: 0 -5px 0 #305A7A;
margin: -1.855em -8.9% 1.625em;
padding: 0 8.9%;
/* border-top: 5px solid #94BB32;
-webkit-box-shadow: 0 -5px 0 #506815; */
}
article.intro .entry-title {
display: none;
}
article.intro .entry-content {
color: #111;
font-size: 16px;
padding: 1.625em 0px 0.625em;
}
article.intro .edit-link a {
position: absolute;
background: #aaa;
color: #fff;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0px 8px;
font-size: 12px;
right: 20px;
text-decoration: none;
top: 30px;
}
article.intro .edit-link a:hover {
background: #777;
}
/* Featured post */
section.featured-post {
border-bottom: 1px solid #e8e8e8;
float: left;
margin: -1.625em -8.9% 1.625em;
padding: 1.625em 8.9% 0;
position: relative;
width: 100%;
}
section.featured-post .hentry {
border: none;
color: #666;
font-size: 13px;
margin: 0;
}
section.featured-post .entry-meta {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
/* Small featured post */
section.featured-post .attachment-small-feature {
border-right: 20px solid #bbb;
float: right;
height: auto;
margin: -10px -8.9% 1.625em 0;
max-width: 59%;
position: relative;
right: -20px;
}
section.featured-post .attachment-small-feature:hover {
border-color: #888;
}
article.feature-image.small {
float: left;
margin: 0 0 1.625em;
width: 45%;
}
article.feature-image.small .entry-summary p a {
background: #222;
color: #eee;
display: block;
left: -19.8%;
padding: 4px 26px 4px 75px;
position: relative;
text-decoration: none;
top: 20px;
width: 120px;
}
article.feature-image.small .entry-summary p a:hover {
background: #1b8be0;
color: #bfddf3;
}
/* Large featured post */
section.feature-image.large {
border: none;
max-height: 500px;
padding: 0 0 0.8125em;
width: 100%;
}
section.feature-image.large .showcase-heading {
display: none;
}
section.feature-image.large .hentry {
border-bottom: none;
margin: 1.625em 9% 0 0;
position: absolute;
top: 0;
left: 9%;
}
article.feature-image.large .entry-title a {
background: #222;
background: rgba(0,0,0,0.8);
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-weight: 300;
display: inline-block;
padding: .2em 20px;
}
section.feature-image.large:hover .entry-title a,
section.feature-image.large .entry-title:hover a {
background: #1b8be0;
background: rgba(0,145,255,0.8);
color: #bfddF3;
}
article.feature-image.large .entry-summary {
display: none;
}
section.feature-image.large img {
border-bottom: 1px solid #ddd;
display: block;
height: auto;
padding: 0 0 6px;
max-width: 117.9%;
}
/* Recent Posts */
section.recent-posts {
padding: 0 0 1.625em;
}
section.recent-posts .hentry {
border: none;
margin: 0;
}
section.recent-posts .other-recent-posts {
border-bottom: 1px solid #ddd;
list-style: none;
margin: 0;
}
section.recent-posts .other-recent-posts li {
padding: 0.3125em 0;
position: relative;
}
section.recent-posts .other-recent-posts .entry-title {
border-top: 1px solid #ddd;
font-size: 17px;
}
section.recent-posts .other-recent-posts a[rel="bookmark"] {
color: #333;
float: left;
max-width: 84%;
}
section.recent-posts .other-recent-posts a[rel="bookmark"]:after {
content: '-';
color: transparent;
font-size: 11px;
}
section.recent-posts .other-recent-posts a[rel="bookmark"]:hover {
color: #1b8be0;
}
section.recent-posts .other-recent-posts .comments-link a,
section.recent-posts .other-recent-posts .comments-link > span {
border-bottom: 2px solid #999;
display: block;
color: #444;
text-align: right;
font-size: 10px;
font-weight: 500;
line-height: 2.76333em;
padding: 0.3125em 0 0.3125em 1em;
position: absolute;
bottom: -2px;
right: 0;
text-transform: uppercase;
z-index: 1;
}
section.recent-posts .other-recent-posts .comments-link > span {
border-color: #bbb;
color: #888;
}
section.recent-posts .other-recent-posts .comments-link a:hover {
color: #1b8be0;
border-color: #1b8be0;
}
section.recent-posts .other-recent-posts li:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
/* =Attachments
----------------------------------------------- */
.image-attachment div.attachment {
background: #f9f9f9;
border: 1px solid #ddd;
border-width: 1px 0;
margin: 0 -8.9% 1.625em;
padding: 1.625em 1.625em 0;
text-align: center;
overflow: hidden;
}
.image-attachment div.attachment img {
display: block;
margin: 0 auto 1.625em;
}
.image-attachment .entry-caption p {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 2.6em;
margin: 0 0 2.6em;
text-transform: uppercase;
}
/* =Images
----------------------------------------------- */
img.size-auto,
img.size-large,
img.size-full,
img.size-medium,
img.size-thumbnail {
max-width: 100%;
height: auto;
}
img.wp-smiley {
margin-bottom: 0;
margin-top: 0;
}
p img,
.wp-caption {
margin-top: 0.4em;
}
.wp-caption {
background: #f4f2ed;
max-width: 96%;
margin-bottom: 1.625em;
padding: 12px;
}
.wp-caption img {
display: block;
margin: 5px auto 0;
max-width: 98%;
}
.wp-caption .wp-caption-text {
color: #666;
font-family: Georgia, serif;
font-size: 12px;
margin-bottom: 0.6em;
padding: 10px 0px 5px 40px;
position: relative;
}
.wp-caption .wp-caption-text:before {
color: #9b8a62;
content: '⎯';
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-right: 5px;
position: absolute;
left: 10px;
top: 7px;
}
.gallery-caption {
}
/* =Navigation
-------------------------------------------------------------- */
#content nav {
clear: both;
overflow: hidden;
padding: 0 0 1.625em;
}
#content nav a {
color: #1b8be0;
font-size: 12px;
font-weight: bold;
line-height: 2.2em;
text-decoration: none;
}
#content nav a:focus,
#content nav a:active,
#content nav a:hover {
color: #ff4b33;
}
#nav-above {
padding: 0 0 1.625em;
}
.nav-previous {
float: left;
width: 50%;
}
.nav-next {
float: right;
text-align: right;
width: 50%;
}
/* Singular navigation */
#nav-single {
display: inline-block;
overflow: visible !important;
position: absolute;
top: -4px;
right: 0;
z-index: 1000;
}
#nav-single .nav-previous,
#nav-single .nav-next {
float: none;
width: auto;
}
#nav-single .nav-next {
padding-left: .5em;
}
/* =Widgets
----------------------------------------------- */
#secondary {
}
.widget-area {
font-size: 12px;
}
.widget {
margin: 0 0 2.2em;
}
.widget-title {
color: #333;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
.widget ul {
font-size: 15px;
margin: 0;
}
.widget ul ul {
margin-left: 1.5em;
}
.widget ul li {
color: #777;
font-size: 13px;
}
.widget a {
color: #1b8be0;
font-weight: bold;
text-decoration: none;
}
.widget a:hover {
color: #ff4b33;
}
/* Search Widget */
.widget_search form {
margin: 0 0 1.625em;
}
.widget_search #s {
width: 58%;
}
.widget_search #searchsubmit {
-webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px -1px 1px inset;
background: #DDD;
border: 1px solid #CCC;
color: #888;
font-size: 13px;
line-height: 25px;
position: relative;
top: -2px;
}
.widget_search #searchsubmit:active {
background: #1b8be0;
color: #BFDDF3;
border-color: #0861A5;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px inset;
}
/* Ephemera Widget */
section.ephemera ol,
.widget_twentyeleven_ephemera ol {
list-style: square;
margin: 5px 0 0;
}
section.ephemera .entry-title,
.widget_twentyeleven_ephemera .entry-title {
font-size: 15px;
font-weight: bold;
padding: 0;
}
section.ephemera .entry-title a,
.widget_twentyeleven_ephemera .entry-title a {
color: #1b8be0;
}
section.ephemera .entry-title a:hover,
.widget_twentyeleven_ephemera .entry-title a:hover {
color: #ff4b33;
}
section.ephemera .entry-title .comments-link a,
.widget_twentyeleven_ephemera .entry-title .comments-link a,
.widget_twentyeleven_ephemera .entry-title .comments-link {
color: #666;
display: block;
font-size: 10px;
font-weight: 500;
line-height: 2.76333em;
text-transform: uppercase;
}
section.ephemera .entry-title .comments-link a:hover,
.widget_twentyeleven_ephemera .entry-title .comments-link a:hover {
color: #1b8be0;
}
section.ephemera .entry-title a span {
color: #29628d;
}
/* Twitter */
.widget_twitter li {
list-style-type: none;
margin-bottom: 14px;
}
.widget_twitter .timesince {
display: block;
font-size: 11px;
margin-right: -10px;
text-align: right;
}
/* Widget Image */
.widget_image img {
height: auto;
max-width: 100%;
}
/* Calendar Widget */
.widget_calendar #wp-calendar {
color: #555;
width: 95%;
text-align: center;
}
.widget_calendar #wp-calendar caption,
.widget_calendar #wp-calendar td,
.widget_calendar #wp-calendar th {
text-align: center;
}
.widget_calendar #wp-calendar caption {
font-size: 11px;
font-weight: 500;
padding: 5px 0 3px 0;
text-transform: uppercase;
}
.widget_calendar #wp-calendar th {
background: #f4f4f4;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-weight: bold;
}
.widget_calendar #wp-calendar tfoot td {
background: #f4f4f4;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
/* =Comments
----------------------------------------------- */
#comments-title {
color: #444;
font-size: 10px;
font-weight: 500;
line-height: 2.6em;
padding: 0 0 2.6em;
text-transform: uppercase;
}
.nocomments {
color: #aaa;
font-size: 24px;
font-weight: 100;
margin: 26px 0;
text-align: center;
}
.commentlist {
list-style: none;
margin: 0;
}
.commentlist > li.comment {
background: #f6f6f6;
border: 1px solid #ddd;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 auto 1.625em;
padding: 1.625em;
position: relative;
width: 68.9%;
}
.commentlist .children {
list-style: none;
margin: 0;
}
.commentlist .children li.comment {
background: #fff;
border-left: 1px solid #ddd;
margin: 1.625em 0 0;
padding: 1.625em;
position: relative;
}
.commentlist .children li.comment .fn {
display: block;
}
.comment-meta .fn {
font-style: normal;
}
.comment-meta {
color: #666;
font-size: 12px;
line-height: 2.2em;
}
.commentlist .children li.comment .comment-meta {
line-height: 1.625em;
margin-left: 50px;
}
.commentlist .children li.comment .comment-content {
margin: 1.625em 0 0;
}
.comment-meta a {
color: #1b8be0;
text-decoration: none;
font-weight: bold;
}
.comment-meta a:focus,
.comment-meta a:active,
.comment-meta a:hover {
color: #ff4b33;
}
.commentlist .avatar {
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0;
position: absolute;
top: 0;
left: -102px;
-webkit-box-shadow: 0 1px 2px #ccc;
-moz-box-shadow: 0 1px 2px #ccc;
box-shadow: 0 1px 2px #ccc;
}
.commentlist > li:before {
content: url(images/comment-arrow.png) no-repeat;
position: absolute;
left: -21px;
}
.commentlist > li.pingback:before {
content: '';
}
.commentlist .children .avatar {
background: none;
padding: 0;
top: 2.2em;
left: 2.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.commentlist .children .bypostauthor > article .comment-meta .vcard .avatar {
}
.comment-reply-link {
color: #1778c2;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.comment-reply-link:hover {
}
/* Post author highlighting */
.commentlist > li.bypostauthor {
background: #222;
border-color: #000;
color: #ccc;
}
.commentlist > li.bypostauthor .comment-meta {
color: #ccc;
}
.commentlist > li.bypostauthor .comment-meta a {
color: #ccc;
text-decoration: none;
font-weight: bold;
}
.commentlist > li.bypostauthor .comment-meta a:focus,
.commentlist > li.bypostauthor .comment-meta a:active,
.commentlist > li.bypostauthor .comment-meta a:hover {
color: #ff4b33;
}
.commentlist > li.bypostauthor:before {
content: url(images/comment-arrow-bypostauthor.png);
}
.commentlist > li.bypostauthor .comment-content a {
color: #1b8be0;
}
.commentlist > li.bypostauthor .comment-content a:focus,
.commentlist > li.bypostauthor .comment-content a:active,
.commentlist > li.bypostauthor .comment-content a:hover {
color: #ff4b33;
}
.commentlist > li.bypostauthor .comment-reply-link {
color: #ccc;
}
.commentlist > li.bypostauthor .comment-reply-link:focus,
.commentlist > li.bypostauthor .comment-reply-link:active,
.commentlist > li.bypostauthor .comment-reply-link:hover {
color: #ff4b33;
}
/* Post Author threaded comments */
.commentlist > li.bypostauthor .children,
.commentlist > li.bypostauthor .children .comment-meta,
.commentlist > li.bypostauthor .children .comment-meta a,
.commentlist > li.bypostauthor .children .comment-reply-link {
color: #333;
}
.commentlist > li.bypostauthor .children .comment-meta a:focus,
.commentlist > li.bypostauthor .children .comment-meta a:active,
.commentlist > li.bypostauthor .children .comment-meta a:hover {
color: #ff4b33;
}
.commentlist .children > li.bypostauthor {
background: #222;
border-color: #000;
}
.commentlist .children > li.bypostauthor > article,
.commentlist .children > li.bypostauthor > article .comment-meta {
color: #ccc;
}
.commentlist .children > li.bypostauthor > article .comment-meta a {
color: #ccc;
text-decoration: none;
font-weight: bold;
}
.commentlist .children > li.bypostauthor > article .comment-reply-link {
color: #ccc;
}
.commentlist .children > li.bypostauthor > article .comment-meta a:focus,
.commentlist .children > li.bypostauthor > article .comment-meta a:active,
.commentlist .children > li.bypostauthor > article .comment-meta a:hover,
.commentlist .children > li.bypostauthor > article .comment-reply-link:focus,
.commentlist .children > li.bypostauthor > article .comment-reply-link:active,
.commentlist .children > li.bypostauthor > article .comment-reply-link:hover {
color: #ff4b33;
}
.commentlist .children > li.bypostauthor > article .comment-content a {
color: #1b8be0;
}
.commentlist .children > li.bypostauthor > article .comment-content a:focus,
.commentlist .children > li.bypostauthor > article .comment-content a:active,
.commentlist .children > li.bypostauthor > article .comment-content a:hover {
color: #ff4b33;
}
/* Comment Form */
#respond {
background: #ddd;
border: 1px solid #d3d3d3;
-moz-border-radius: 3px;
border-radius: 3px;
color: #444;
margin: 0 auto 1.625em;
padding: 1.625em;
position: relative;
width: 68.9%;
}
#respond a {
color: #ccc;
}
#respond a:focus,
#respond a:active,
#respond a:hover {
color: #ff4b33;
}
#respond input[type="text"],
#respond textarea {
background: #fff;
border: 4px solid #eee;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 3px #ccc;
-moz-box-shadow: inset 0 1px 3px #ccc;
box-shadow: inset 0 1px 3px #ccc;
position: relative;
padding: 10px;
text-indent: 80px;
}
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
position: relative;
}
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
background: #eee;
-webkit-box-shadow: 1px 1px 2px #ccc;
-moz-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #ccc;
color: #555;
display: inline-block;
font-size: 13px;
padding: 4px 10px;
position: relative;
top: 41px;
left: 4px;
width: 60px;
z-index: 1;
/* text-shadow: 1px 1px 1px #fff; */
}
#respond input[type="text"]:focus,
#respond textarea:focus {
text-indent: 0;
z-index: 1;
}
#respond textarea {
width: 95%;
}
#respond .comment-form-author .required,
#respond .comment-form-email .required {
color: #bd3500;
font-size: 22px;
font-weight: bold;
position: absolute;
top: 52px;
left: 68%;
z-index: 1;
}
#respond .comment-notes,
#respond .logged-in-as {
font-size: 13px;
}
#respond .logged-in-as a {
color: #478fa2;
font-weight: bold;
text-decoration: none;
}
#respond p {
margin: 10px 0;
}
#respond .form-submit {
float: right;
margin: -20px 0 10px;
}
#respond input#submit {
background: #222;
border: none;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
color: #eee;
cursor: pointer;
font-size: 15px;
margin: 20px 0;
padding: 5px 42px 5px 22px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
position: relative;
left: 30px;
}
#respond input#submit:active {
background: #1b8be0;
color: #bfddf3;
}
#respond #cancel-comment-reply-link {
color: #666;
margin-left: 10px;
text-decoration: none;
}
#respond .logged-in-as a:hover,
#respond #cancel-comment-reply-link:hover {
text-decoration: underline;
}
.commentlist #respond {
margin: 1.625em 0 0;
width: auto;
}
#reply-title {
color: #333;
font-size: 24px;
font-weight: bold;
line-height: 30px;
}
#cancel-comment-reply-link {
color: #888;
display: block;
font-size: 10px;
font-weight: normal;
line-height: 2.2em;
letter-spacing: 0.05em;
position: absolute;
top: 1.1em;
right: 1.625em;
text-decoration: none;
text-transform: uppercase;
}
#cancel-comment-reply-link:focus,
#cancel-comment-reply-link:active,
#cancel-comment-reply-link:hover {
color: #ff4b33;
}
#respond label {
line-height: 2.2em;
}
#respond input[type=text] {
display: block;
width: 75%;
}
#respond p {
font-size: 12px;
}
p.comment-form-comment {
margin: 0;
}
.form-allowed-tags {
display: none;
}
/* =Footer
----------------------------------------------- */
#colophon {
clear: both;
}
#supplementary {
border-top: 1px solid #ddd;
padding: 1.625em 7.6%;
overflow: hidden;
}
/* Two Footer Widget Areas */
#supplementary.two .widget-area {
float: left;
margin-right: 3.7%;
width: 48.1%;
}
#supplementary.two .widget-area + .widget-area {
margin-right: 0;
}
/* Three Footer Widget Areas */
#supplementary.three .widget-area {
float: left;
margin-right: 3.7%;
width: 30.85%;
}
#supplementary.three .widget-area + .widget-area + .widget-area {
margin-right: 0;
}
/* Site Generator Line */
#site-generator {
background: #f9f9f9;
border-top: 1px solid #ddd;
color: #666;
font-size: 12px;
line-height: 2.2em;
padding: 2.2em 0;
text-align: center;
}
#site-generator a {
text-decoration: none;
font-weight: bold;
}
#site-generator a:focus,
#site-generator a:active,
#site-generator a:hover {
}
/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
/* Simplify the basic layout */
#content {
margin: 0 7.6%;
width: auto;
}
#nav-below {
border-bottom: 1px solid #ddd;
margin-bottom: 1.625em;
}
#secondary {
float: none;
margin: 0 7.6%;
width: auto;
}
/* Simplify the showcase template */
.page-template-showcase-php section.recent-posts {
float: none;
margin: 0;
width: 100%;
}
.page-template-showcase-php #main .widget-area {
float: none;
margin: 0;
width: auto;
}
.page-template-showcase-php .other-recent-posts {
border-bottom: 1px solid #ddd;
}
/* Simplify the showcase template when small feature */
section.featured-post .attachment-small-feature {
border: none;
display: block;
float: none;
margin: 0.625em auto 1.025em;
max-width: 100%;
height: auto;
position: static;
}
article.feature-image.small {
float: none;
margin: 0 0 1.625em;
width: auto;
}
article.feature-image.small .entry-summary a {
left: -9%;
}
/* Remove the margin on singular articles */
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
width: 100%;
}
/* Simplify the pullquotes and pull styles */
.singular blockquote.pull {
margin: 0 0 1.625em;
}
.singular .pull.alignleft {
margin: 0 1.625em 0 0;
}
.singular .pull.alignright {
margin: 0 0 0 1.625em;
}
.singular .entry-meta .edit-link a {
position: absolute;
left: 0px;
top: 40px;
}
.singular #author-info {
margin: 2.2em -8.8% 0px;
padding: 20px 8.8%;
}
/* Make sure we have room for our comment avatars */
.commentlist > li.comment {
margin-left: 102px;
width: auto;
}
/* And a full-width comment form */
#respond {
width: auto;
}
/* No need to float footer widgets at this size */
#supplementary .widget-area {
float: none !important;
margin-right: 0 !important;
width: auto !important;
}
/* No need to float 404 widgets at this size */
.error404 #main .widget {
float: none;
margin-right: 0;
width: auto;
}
/* Make sure embeds fit their containers */
embed,
object {
max-width: 100%;
}
}
@media (max-width: 650px) {
/* Make sure the logo and search form don't collide */
#branding #searchform {
right: 1px;
top: 0;
}
/* Make sure the post-post navigation doesn't collide with anything */
#nav-single {
display: block;
position: static;
}
/* Talking avatars take up too much room at this size */
.commentlist > li.comment {
margin-left: 0;
}
.commentlist .avatar {
background: transparent;
display: block;
padding: 0;
position: static;
}
.commentlist .children .avatar {
position: absolute;
background: none;
padding: 0;
top: 2.2em;
left: 2.2em;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
padding: 0 .5em;
}
}
/* IE 7 */
#ie7 article.intro {
margin-left: -7.6%;
margin-right: -7.6%;
padding-left: -7.6%;
padding-right: -7.6%;
max-width: 1000px;
}
#ie7 section.featured-post {
margin-left: -7.6%;
margin-right: -7.6%;
max-width: 850px;
}
#ie7 section.recent-posts {
margin-right: 7.6%;
}
#ie7 .page-template-showcase-php {
}