public/css/blog.css
body {
background: #f5f3f1 url('/image/yellow-texture.gif');
color: #2c2c29;
font: 18px Cambria, Georgia, 'New Century Schoolbook', 'Century Schoolbook L', 'Times New Roman', serif;
margin: 0;}
a {
border-bottom: 1px dotted #bbb;
color: #21759b;
text-decoration: none;}
a:active,
a:focus,
a:hover {
border-bottom: 1px dotted #999;
color: #14485F;}
#container .inner {
margin: 0 auto;
width: 960px;}
#header {}
#header .logo {
float: left;
width: 500px;}
#header .logo h3 {
font-size: 2.3em;
font-weight: normal;
margin: 17px 0 0;}
#header .logo h3 a {}
#header .logo p {
color: #c2c2c9;
font: .55em Verdana, Arial, Tahoma, sans-serif;
margin: 0;
text-transform: uppercase;}
#header a {
border: none;
color: #14485F;}
#header a:hover {
color: #21759b;}
#header ul {
margin: 0;
padding: 39px 0 18px 500px;
text-align: right;}
#header li {
display: inline;
list-style: none;
margin-left: 20px;}
#introduction {
background: #f1efea url('/image/dark-yellow-texture.gif');
margin: 50px 0 30px;
padding: 10px 0 20px;}
#introduction .inner {
position: relative;
width: 950px;}
#introduction .content {
padding-right: 275px;}
#introduction h1 {
font-size: 2.5em;
font-weight: normal;
margin: 0;
padding: 15px 0 5px;}
#introduction p {
font-size: .9em;
line-height: 1.5em;
margin: 0;
padding: 5px 0;}
#introduction a.read-more {
border-bottom-style: none;
white-space: nowrap;}
#introduction a.read-more:active,
#introduction a.read-more:focus,
#introduction a.read-more:hover {
border-bottom-style: solid;}
#introduction a.read-more:after {
content: ' >';}
#introduction #photo-container {
border: 1px solid #ccc;
height: 225px;
margin-top: -108px;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 225px;}
#introduction #photo-container img {
display: block;
height: 225px;
left: 50%;
margin-left: -180px;
position: relative;
width: auto;}
.navigation {
border: 1px solid #bbb;
font-size: .8em;
height: 13px;
padding: 7px 10px;}
.navigation p {
float: left;
margin: 0;}
.navigation span {
display: inline;
float: right;
height: 10px;
width: 50px;}
.navigation span.next a:before {
content: '< ';}
.navigation span.prev a:after {
content: ' >';}
.navigation a {
border-bottom-style: none;}
.navigation a:active,
.navigation a:focus,
.navigation a:hover {
border-bottom-style: solid;}
#content-wrap {}
#content {
float: left;
width: 73%;}
#content .post {
border-top: 1px solid #bbb;
padding: 10px 0 40px;}
#content .post:first-child {
border-top: none;}
#content .post h1,
#content .post h2 {
font-size: 1.8em;
font-weight: normal;
margin-bottom: 10px;}
#content .post-content h1 {
font-size: 2.5em;}
#content .post h1 a,
#content .post h2 a {
border: none;
color: #14485F;}
#content .post h1 a:hover,
#content .post h2 a:hover {
color: #21759b;}
#content .post h5.author {
font-style: italic;
font-weight: normal;
margin: 0 0 .75em;
text-align: right;}
#content .post .photo-container {
border: 1px solid #ccc;
float: left;
margin: 0 10px 10px 0;
*width: 240px;}
#content .post .photo-container img {
display: block;
height: auto;
min-height: 135px;
width: 100%;}
#content .post h4 {
font-size: 1.3em;
font-weight: normal;
margin: 1em 0 0;}
#content .post pre {
background-color: #f3f3f3;
border: 1px solid #ddd;
display: inline-block;
font-family: 'Courier New', Courier, monospace;
font-size: .7em;
line-height: 15px;
margin: 5px 3% 15px;
overflow-x: auto;
tab-size: 2;
-moz-tab-size: 2;
-o-tab-size: 2;
white-space: nowrap;
width: 92%;}
#content .post table {
border: 1px solid #868673;
font: .8em Verdana, Arial, Tahoma, sans-serif;
line-height: 2em;
margin: 5px 0 8px;
width: 100%;
}
#content .post table tr {
border-top: 1px solid #c1c1ad;
}
#content .post table tr:first-child {
border-top: none;
}
#content .post table tr:hover {
background: rgba(100, 100, 200, .1);
color: black;
}
#content .post table tr.subtotal {
font-weight: bold;
}
#content .post table td {
padding: 0 5px;
}
#content .post table td.weight {
text-align: right;
}
#content .post p,
#content .post li {
color: #555;
line-height: 1.5em;
margin: 5px 0 10px;}
#content .post .photo-holder {
background: #f1efea url('/image/dark-yellow-texture.gif');
margin: 25px auto;
padding: 4px;
width: auto;}
#content .post .photo-holder img {
height: auto;
min-height: 390px;
width: 100%;}
#content .post .photo-caption {
color: #666;
font-size: .9em;
margin: 10px 0 5px;
text-align: center;}
#content .meta {
clear: both;
font: .5em Verdana, Arial, Tahoma, sans-serif;
margin: 0;
padding: 0;
position: relative;
text-align: left;}
#content .meta li {
color: #c2c2c9;
display: inline;
list-style: none;
margin: 0 10px 0 0;
text-transform: uppercase;
white-space: nowrap;}
#content .meta li.read-more {
position: absolute;
right: 0;
top: -5px;}
#content .meta li.read-more,
#content .meta li span {
color: #666;
font-size: 1.2em;
text-transform: none;}
#content .meta li a {
color: inherit;}
#content .meta li.read-more a {
background: #21759b;
border-bottom-style: none;
color: white;
display: block;
padding: 5px 7px;}
#content .meta li.read-more a:active,
#content .meta li.read-more a:focus,
#content .meta li.read-more a:hover {
background-color: #14485f;}
#content .meta li.read-more a:after {
content: ' >';}
#content .entry-content {
margin-top: 25px;}
#content .tags {
height: 40px;
margin-top: 20px;}
#content .tags li {
display: inline-block;
float: left;}
#content .tags li:first-child {
font-style: italic;
margin-right: 10px;
text-transform: lowercase;}
#read-more h3 {
font-size: 1.5em;
font-weight: normal;
margin: 1em 0 0;}
#read-more ul {
padding: 0;}
#read-more ul:after {
clear: both;
content: ' ';
display: block;}
#content #read-more li {
background: #f1efea url('/image/dark-yellow-texture.gif');
display: block;
float: left;
font-size: .8em;
list-style: none;
margin: 0 5px 5px 0;
padding: 5px 1%;
text-align: left;
width: 46%;
vertical-align: top;}
#read-more li:after {
clear: both;
content: ' ';
display: block;}
#read-more li:nth-child(odd) {
clear: left;}
#read-more img {
border: 1px solid #ccc;
float: left;
margin-right: 10px;}
#read-more h6 {
font-size: 1.2em;
font-weight: normal;
margin: 0;}
#read-more h6 a {
border-bottom-style: none;
color: #14485f;}
#read-more h6 a:hover {
color: #21759b;}
#read-more p {
line-height: 1.2em;
margin: 1em 0 0;}
#read-more a.read-more {
float: right;}
#read-more a.read-more:hover {
border-bottom-style: solid;}
#series {
background: #f1efea url('/image/dark-yellow-texture.gif');
border: 1px solid #999;
font-size: .8em;
margin: 10px 0 5px;
padding: 7px 8px 0;}
#series h3 {
font-size: 1.3em;
font-weight: normal;
margin: 0;}
#series ul {
margin: 0;
padding: 0;
text-align: justify;}
.post #series li {
display: inline-block;
list-style: none;
margin: 0;}
#series ul:after {
content: '';
display: inline-block;
width: 100%;}
#series li.previous {
text-align: left;}
#series li.next {
text-align: right;}
#comments {
clear: both;}
#comments h3 {
font-size: 1.5em;
font-weight: normal;
margin: 1em 0 0;}
#comments a {
border-bottom-style: none;}
#comments .faux-link {
background: #21759b;
color: white;
cursor: pointer;
display: inline-block;
padding: 5px 7px;}
#comments .faux-link:active,
#comments .faux-link:focus,
#comments .faux-link:hover {
background-color: #14485f;}
#comments li {
clear: both;
list-style: none;
padding: 10px 0 0;}
#comments .comment-listing {
font-size: .9em;
margin: 0;
padding: 0;
word-wrap: break-word;}
#comments .comment-listing > li {
margin: 15px 0 25px;}
#comments li.reply {
margin-left: 50px;}
#comments .comment-meta {
display: inline-block;
float: left;
margin-top: 5px;
min-height: 43px;
width: 100px;}
#comments .comment-date {
display: block;
font-style: italic;}
#comments .comment-body {
display: block;
line-height: 1.4em;
margin: 0 0 10px 140px;}
#comments .comment-body.pending {
font-style: italic;}
#comments .comment-replies {
border-left: 1px solid #ccc;
clear: both;
margin: 0;}
#comments pre {
background: #fafafa;
border: 1px solid #ddd;
font-size: .8em;
overflow: hidden;
padding: 5px 8px;}
#comments .comment-new,
#comments .comment-reply,
#comments .comment-hide {
display: block;
text-align: right;}
#comments .comment-form {
background: #f1efea url('/image/dark-yellow-texture.gif');
display: none;
margin: 10px 0 15px 25px;
padding: 10px 0 10px;}
#comments .comment-form.active {
display: block;}
#comments .comment-form ul {
margin: 0;
padding: 0;}
#comments .comment-form ul.errors {
font-weight: bold;}
#comments .comment-form li {
margin: 0 20px 15px;
padding: 0;}
#comments .comment-form li.catcher {
display: none;}
#comments .comment-form li.text label {
display: block;
padding: 2px 0 4px;}
#comments .comment-form li.text input {
display: block;
padding: 3px 5px;
width: 240px;}
#comments .comment-form textarea {
height: 120px;
width: 95%;}
#comments .comment-form input[type="submit"] {
background: #21759b;
border: none;
color: white;
font-size: 1.1em;
padding: 7px 15px;
margin-right: 7px;}
#comments .comment-form input[type="reset"] {
margin-left: 5px;}
#comments .comment-form input[type="submit"]:active,
#comments .comment-form input[type="submit"]:focus,
#comments .comment-form input[type="submit"]:hover {
background-color: #14485f;}
#comments .comment-form .mini {
font-size: .8em;}
#comments .comment-form .mini p {
margin-top: 0;}
#search-form {
margin-bottom: 20px;
vertical-align: top;}
#search-form input {
border-radius: 0;
margin: 0;}
#search-form input[type="text"] {
background: white;
border: 1px solid #ccc;
font-size: .8em;
height: 20px;
padding: 2px 5px;
width: 73%;}
#search-form input[type="submit"] {
background: #21759b url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExQkY5QkVGNzlENzk4QzI0MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNUFDOEE3RTMxRTgxMUUyQjY2QUJCMEFEQ0QyREY3QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNUFDOEE3RDMxRTgxMUUyQjY2QUJCMEFEQ0QyREY3QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDU4MDExNzQwNzIwNjgxMTg3MUY4ODdGMTlCNUExNTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMUJGOUJFRjc5RDc5OEMyNDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Mj6+TAAAAy0lEQVR42qSTDRHDIAxG6RQgAQlIYA4qYQ5mAQeVgIRK6E3B5gAJlcCyO9r7liX0Z7l7dy2ljwBJV0oxf8dHAlgiErl8x0gENncFX7zwM4+hJbEgmGs2rn7riQlEUZNEEHgl7QQiJ0mytgojS9taHsQVBJaMp5bEbBAkyYXdeL9REaFVJ6O0glBDzTMJsKWkCPB2vFZsA0zK9RCDUsHPKv6R4OnviVXUCQ3oiDvhYexFPIhEWDZ+NTuulffXzDM6KhFF5iTY8be3AAMAJjskUTmsUdcAAAAASUVORK5CYII=') 4px 3px no-repeat;
border: none;
height: 25px;
overflow: hidden;
padding: 0;
text-indent: -500px;
width: 25px;}
#right-side {
padding: 85px 0 0 77%;}
#right-side form {
position: relative;}
#right-side h4 {
color: #c2c2c9;
font: .8em Verdana, Arial, Tahoma, sans-serif;
margin: 0;
text-transform: uppercase;}
#right-side .tag-cloud {
font-size: .8em;
margin: 5px 0 25px;
padding: 0;}
#right-side .tag-cloud li {
display: inline-block;
*display: inline;
line-height: 1.4em;
*line-height: 1.2em;
margin-right: .4em;
white-space: nowrap;
*white-space: normal;}
#right-side .tag-cloud li a {
border-bottom-style: none;}
#right-side .tag-cloud li a:active,
#right-side .tag-cloud li a:focus,
#right-side .tag-cloud li a:hover {
border-bottom-style: solid;}
#right-side .tag-cloud li.size0 {
font-size: .8em;}
#right-side .tag-cloud li.size1 {
font-size: .9em;}
#right-side .tag-cloud li.size2 {
font-size: .9em;}
#right-side .tag-cloud li.size3 {
font-size: 1em;}
#right-side .tag-cloud li.size4 {
font-size: 1.1em;}
#right-side .tag-cloud li.size5 {
font-size: 1.2em;}
#right-side .tag-cloud li.size6 {
font-size: 1.3em;}
#right-side .tag-cloud li.size7 {
font-size: 1.4em;}
#right-side .tag-cloud li.size8 {
font-size: 1.4em;}
#right-side .tag-cloud li.size9 {
font-size: 1.4em;}
#right-side .comment-list {
font-size: .9em;
margin: 5px 0 25px;
padding: 0;}
#right-side .comment-list li {
line-height: 1.2em;
list-style: none;
margin: 2px 0 10px;
padding-left: 5px;
text-indent: -5px;}
#right-side .comment-list a {
border-bottom-style: none;}
#right-side .comment-list a:active,
#right-side .comment-list a:focus,
#right-side .comment-list a:hover {
border-bottom-style: solid;}
#right-side .comment-list .commenter {
font-weight: bold;}
#bottom {
background: #f1efea url('/image/dark-yellow-texture.gif');
font-size: .7em;
margin-top: 40px;
padding: 20px 0 30px;}
#site-links {
float: left;
width: 45%;}
#activity-feed {
margin-left: 55%;}
#site-links h4,
#activity-feed h4 {
font-size: 1.6em;
font-weight: normal;
margin: 0 0 10px;}
#site-links ul,
#activity-feed ul {
padding-left: 20px;}
#site-links ul {
font-size: 1.2em;}
#activity-feed ul {
padding-right: 5px;}
#site-links li,
#activity-feed li {
margin-bottom: 6px;}
#site-links a {
border-bottom-style: none;}
#site-links a:hover {
border-bottom-style: solid;}
#site-links a .title {
border-bottom: 1px dotted;}
#site-links a:hover .title {
border-bottom-style: none;}
#site-links a .description {
font-size: .9em;
font-style: italic;
padding-left: 3px;}
#activity-feed .meta {
display: block;
font-style: italic;
margin-right: 10px;
text-align: right;}
#activity-feed .read-more {
float: right;}
.clear {
clear: both;}
#footer {
background: #f1efea url('/image/dark-yellow-texture.gif');
font-size: .9em;
padding: 30px 0 50px;}
#footer #interior {
text-align: center;}
#footer #interior p {
margin: .5em 0;}
@media all and (max-width: 960px) {
#container .inner {
margin: 0 1%;
width: 98%;}
#header .logo {
width: 450px;}
#header .logo h3 {
font-size: 2em;}
#header .logo p {
font-size: .5em;}
#header ul {
padding-left: 450px;}
#introduction h1 {
font-size: 2.3em;}
#content .post-content h1 {
font-size: 2.3em;}
#content .post .photo-holder img {
min-height: 340px;
}
}
@media all and (max-width: 880px) {
#header .logo {
float: none;
width: auto;}
#header .logo h3 {
font-size: 1.8em}
#header .logo p {
font-size: .45em;}
#header ul {
padding: 15px 0 0;
text-align: left;}
#header li {
margin: 0 20px 0 0;}
#introduction {
margin-top: 30px;}
#introduction h1 {
font-size: 2em;}
#right-side {
font-size: .9em;}
#content .post-content h1 {
font-size: 2em;}
#content .post .photo-holder img {
min-height: 320px;
}
}
@media all and (max-width: 820px) {
#header .logo h3 {
font-size: 1.4em}
#introduction {
padding: 5px 0 10px;}
#introduction .content {
padding-right: 200px;}
#introduction h1 {
font-size: 1.7em;
padding: 5px 0 2px;}
#introduction .content p {
font-size: .8em;}
#introduction #photo-container {
height: 175px;
margin-top: -85px;
width: 175px;}
#content .post-content h1 {
font-size: 1.7em;}
#content .post h2 {
font-size: 1.5em;
margin: 10px 0 6px;}
#content .post .photo-container {
width: 180px;}
#content .post .photo-container img {
min-height: 100px;
}
#content .post h4 {
font-size: 1.3em;
font-weight: normal;
margin: 1em 0 0;}
#content .post p,
#content .post li {
font-size: .9em;}
#content .post table {
font-size: .7em;
}
#content .post .photo-holder img {
min-height: 270px;
}
#content .post pre {
font-size: .6em;}
#comments .comment-listing {
font-size: .8em;}
#comments .comment-replies {
padding-left: 20px;}
#bottom {
font-size: .6em;}
}
@media all and (max-width: 700px) {
#header ul {
font-size: .8em;
padding: 10px 0 0;}
#introduction {
margin-top: 20px;}
#introduction h1 {
font-size: 1.5em;}
#content {
float: none;
width: 100%;}
#content .post {
padding: 0 0 20px;}
#content .post-content h1 {
font-size: 1.5em;}
#content .post .photo-holder img {
min-height: 315px;
}
#content .post .photo-caption {
font-size: .8em;
margin: 5px 0;}
#read-more h3,
#comments h3 {
font-size: 1.2em;}
#right-side {
display: none;}
#site-links {
float: none;
width: auto;}
#activity-feed {
margin: 30px 0 0 0;}
}
@media all and (max-width: 600px) {
#container .inner {
margin: 0 2%;
width: 96%;}
#introduction .content {
padding-right: 0;}
#introduction #photo-container {
display: none;}
#content .post-content h1 {
font-size: 1.4em;}
#content .post h2 {
font-size: 1.4em;
margin: 6px 0 4px;}
#content .post h4 {
font-size: 1.2em;}
#content .post p,
#content .post li {
font-size: .8em;}
#content .post table {
font-size: .6em;
}
#content .post .photo-container {
width: 140px;}
#content .post .photo-holder img {
min-height: 200px;
}
#content .post .photo-caption {
font-size: .7em;
margin: 3px 0;}
#content .post pre {
font-size: 1em;}
#content .meta {
padding-bottom: 20px;}
#content .hentry .meta {
padding-bottom: 0;}
#content .meta li.read-more {
top: 20px;}
#content .entry-content {
margin-top: 15px;}
#series ul {
text-align: left;}
.post #series li {
display: block;}
#series ul:after {
display: none;}
#series li.next {
text-align: left;}
#read-more ul {
text-align: left;}
#content #read-more li {
float: none;
width: 95%;}
#read-more h3,
#comments h3 {
font-size: 1em;}
#comments .comment-listing {
font-size: .7em;}
#comments .comment-replies {
padding-left: 10px;}
#comments .comment-meta {
display: block;
float: none;
margin-top: 0;}
#content .meta li {
margin-right: 5px;}
#comments .comment-body {
margin-left: 0;}
#comments pre {
font-size: 1em;}
#comments .comment-form {
margin-left: 0;
padding: 5px 0 10px;}
#comments .comment-form li {
margin: 5px 10px 15px;}
#comments .comment-form li.text input,
#comments .comment-form li.text textarea {
font-size: 1.1em;}
}
@media all and (max-width: 400px) {
#introduction h1 {
font-size: 1.3em;}
.navigation {
font-size: .7em;
height: 11px;
padding: 5px 7px;}
#content .post table {
font-size: .5em;
}
#content .post .photo-holder img {
min-height: 100px;
}
#comments .comment-form li.text input {
width: 90%;}
}