jacobemerick/web

View on GitHub
public/css/waterfalls.css

Summary

Maintainability
Test Coverage
body {
    background: #f9f9f9;
    color: #525252;
    font: 16px 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
    margin: 0;
    position: relative;
    z-index: 1;
}
a {
    border-bottom: 1px dotted;
    color: #cd2b3a;
    text-decoration: none;
}
a:active,
a:focus,
a:hover {
    border-bottom-style: solid;
    color: #7f000c;
}

.inner {
    margin: 0 auto;
    position: relative;
    width: 980px;
}
.clear::after {
    clear: both;
    content: ' ';
    display: block;
}
.photo {
    background: #eaeaea;
    border: #eaeaea 5px solid;
}
a:hover .photo,
a.photo:hover {
    border-color: #dadada;
}

#header {
    background: white;
    border-bottom: 1px solid #e0e0e0;
}
#header .inner {
    padding: 8px 0 4px;
}
#logo {
    float: left;
    margin-left: 10px;
}
#logo h3 {
    font-family: Cambria, Georgia, 'New Century Schoolbook', 'Century Schoolbook L', 'Times New Roman', serif;
    margin: 0;
}
#logo a {
    border-bottom-style: none;
    color: #333;
}
#logo span {
    display: block;
    line-height: .8em;
}
#logo span.title {
    font-size: 2.3em;
}
#logo span.description {
    font-size: 1em;
    padding-left: 5px;
}
#navigation {
    height: 28px;
    margin: 0;
    padding: 22px 5px 0 250px;
    text-align: right;
}
#navigation li {
    display: inline;
    list-style: none;
    padding: 0 25px 0;
}
#navigation a {
    border-bottom-style: none;
    color: black;
    display: inline-block;
    font-size: .9em;
    padding-bottom: 2px;
    text-align: left;
    text-transform: uppercase;
}
#navigation a.active,
#navigation a:hover {
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

#container {
    margin-top: 20px;
    padding: 0 0 20px;
}

#home-layout .top-banner {
    position: relative;
}
#home-layout .photo-holder {
    overflow: hidden;
    width: 100%;
    z-index: 1;
}
#home-layout .photo-holder img {
    height: auto;
    margin: -15% 0;
    min-height: 745px;
    width: 100%;
}
#home-layout .welcome {
    background: #eaeaea;
    bottom: 5%;
    padding: 10px 10px 10px 20px;
    position: absolute;
    right: 0;
    width: 35%;
    z-index: 2;
}
#home-layout .welcome h1 {
    color: black;
    font-size: 1.6em;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
}
#home-layout .welcome p {
    font-size: 1em;
    margin: .5em 0;
}
#home-layout .welcome .action:after {
    content: ' >';
}

#container .home-column {
    border: 0 solid #e0e0e0;
    width: 45%;
}
#container .home-column h2 {
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
}
#container .home-column p {
    font-size: .8em;
    margin: 0;
}

#container .site-updates {
    float: left;
}
#container .site-updates dl {
    padding: 0;
}
#container .site-updates dt {
    float: left;
    width: 100px;
}
#container .site-updates dd {
    margin-left: 100px;
}
#container .site-updates ul {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
#container .site-updates li {
    margin-bottom: 10px;
}
#container .site-updates li a {
    border-bottom: 0;
    color: #525252;
}
#container .site-updates li a .comment-meta:before {
    clear: left;
    content: ' ';
    display: block;
}
#container .site-updates li a .comment-meta {
    font-size: .8em;
}
#container .site-updates li a .comment-meta .link {
    border-bottom: 1px dotted;
    color: #cd2b3a;
}
#container .site-updates li a .comment-meta .link:hover {
    border-bottom-solid: solid;
    color: #7f000c;
}

#container .log-updates {
    border-width: 0 0 0 1px;
    margin-left: 50%;
    padding-left: 5%;
}
#container .log-updates ul {
    list-style: none;
    padding: 0;
}
#container .log-updates li {}
#container .log-updates li a {
    border-bottom: none;
    display: block;
    position: relative;
}
#container .log-updates li a span {
    display: block;
}
#container .log-updates li a .image {}
#container .log-updates li a img {
    border: #eaeaea 3px solid;
}
#container .log-updates li a:hover img {
    border-color: #dadada;
}
#container .log-updates li a .log-content {
    bottom: 10px;
    left: 120px;
    position: absolute;
}
#container .log-updates li a .log-content .title {
    font-size: 1.2em;
    text-transform: uppercase;
}
#container .log-updates li a .log-content .published {
    color: #525252;
    font-size: .8em;
}

.introduction {
    background: white;
    margin-bottom: 15px;
    padding: 10px 15px;
}
.introduction.grand {
    text-align: center;
}
.introduction.callout .panel {
    float: left;
    width: 63%;
}
.introduction h1 {
    color: black;
    font-size: 2em;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
}
.introduction.grand h1 .join {
    font-size: .8em;
    font-style: italic;
    text-transform: none;
}
.introduction h2 {
    font-size: 1.1em;
    font-style: italic;
    font-weight: normal;
    margin: .1em 0 .5em;
}
.introduction a {
    border-bottom-style: none;
    color: black;
}
.introduction p {
    font-size: .9em;
    line-height: 1.5em;
    margin: 0;
}
.introduction .meta {
    font-size: .9em;
    font-style: italic;
}
.introduction .photo {
    margin-top: 0;
    float: right;
    overflow: hidden;
    width: 31%;
}
.introduction .photo img {
    height: 230px;
    margin: -50px 0;
    width: auto;
}

.content {
    float: left;
    width: 74%;
}

.sidebar {
    margin-left: 76%;
    margin: 80px 0 0 76%;
}
.sidebar h4 {
    color: #bbb;
    font-weight: normal;
    margin: 20px 0 0;
    text-transform: uppercase;
}
.sidebar ul {
    font-size: .9em;
    margin: 0;
    padding: 0;
}
.sidebar li {
    list-style: none;
    margin: 2px 0;
}
.sidebar .journal-list li {
    margin-bottom: 5px;
}
.sidebar .journal-list li a:hover {
    border-bottom-style: none;
}
.sidebar .journal-list span {
    display: inline-block;
}
.sidebar .journal-list .title {
    margin-bottom: 1px;
}
.sidebar .journal-list a:hover .title {
    border-bottom: 1px solid;
    margin-bottom: 0;
}
.sidebar .journal-list .date {
    display: block;
    font-style: italic;
    margin-left: 10px;
}
.sidebar dl {
    font-size: .8em;
    margin: 0 0 10px;
    padding: 0;
}
.sidebar dt {
    color: #999;
    float: left;
    padding: 1px 0;
    width: 34%;
}
.sidebar dd {
    margin-left: 40%;
    padding: 1px 0;
}
.sidebar .rating {
    background: url('/image/stars.png') no-repeat;
    height: 18px;
}
.sidebar .rating span {
    display: none;
}
.sidebar .rating.rate-0 {
    background-position: 0 -1px;
}
.sidebar .rating.rate-1 {
    background-position: 0 -21px;
}
.sidebar .rating.rate-2 {
    background-position: 0 -41px;
}
.sidebar .rating.rate-3 {
    background-position: 0 -61px;
}
.sidebar .rating.rate-4 {
    background-position: 0 -81px;
}
.sidebar .rating.rate-5 {
    background-position: 0 -101px;
}
.sidebar .rating.rate-6 {
    background-position: 0 -121px;
}
.sidebar .rating.rate-7 {
    background-position: 0 -141px;
}
.sidebar .rating.rate-8 {
    background-position: 0 -161px;
}
.sidebar .rating.rate-9 {
    background-position: 0 -181px;
}
.sidebar .rating.rate-10 {
    background-position: 0 -201px;
}
.sidebar a {
    border-bottom-style: none;
    color: #777;
}
.sidebar a:hover {
    border-bottom-style: solid;
}
.sidebar dd a {
    border-bottom-style: dotted;
}
.sidebar dd a:hover {
    border-bottom-style: solid;
}
.sidebar .map {
    border: 5px solid #eaeaea;
    display: block;
    margin: 0 auto;
    width: 98%;
}
.sidebar .map:hover {
    border-color: #dadada;
}
.sidebar .map img {
    display: block;
    height: auto;
    width: 100%;
}
.sidebar .count {
    color: #999;
    font-style: italic;
}
.sidebar .distance {
    font-style: italic;
}
.sidebar .count:before,
.sidebar .distance:before {
    content: '(';
}
.sidebar .count:after,
.sidebar .distance:after {
    content: ')';
}

.map-view,
.map-view body {
    height: 100%;
    position: relative;
    z-index: 1;
}
.map-view #header {
    z-index: 2;
}
#map {
    bottom: 0;
    height: auto;
    position: absolute;
    top: 63px;
    width: 100%;
}
#map .waterfall-pane .title {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
}
#map .waterfall-pane .title h2 {
    font-size: 18px;
}
#map .waterfall-pane .title h4 {
    font-size: 13px;
}
#legend {
    background: white;
    display: none;
    height: 300px;
    left: 100px;
    overflow-y: auto;
    position: absolute;
    top: 100px;
    width: 200px;
}

.pagination {
    clear: both;
    font-size: .8em;
    padding: 5px 10px;
    text-align: right;
}
.pagination p {
    font-style: italic;
    margin: 0;
}
.pagination ul {
    margin: 0;
    padding: 2px 0;
}
.pagination li {
    display: inline-block;
    margin: 3px 1px;
}
.pagination li a {
    border-bottom-style: none;
    color: #1d4472;
}
.pagination li span {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 1px 7px;
}
.pagination li a span {
    border-color: #1d4472;
    font-weight: bold;
}
.pagination li.current span,
.pagination li a:hover span {
    background: #1d4472;
    border-color: #1d4472;
    color: white;
    font-weight: bold;
}

.waterfall-pane {
    height: 265px;
    position: relative;
    width: 350px;
}
.waterfall-pane a {
    border-bottom-style: none;
    color: #727272;
    display: block;
}
.waterfall-pane .photo img {
    display: block;
    height: auto;
    min-height: 254px;
    width: 100%;
}
.waterfall-pane .title {
    background: #eaeaea;
    bottom: 20px;
    padding: 3px 7px;
    position: absolute;
    right: 5px;
    width: 73%;
}
.waterfall-pane a:hover .title {
    background: #dadada;
}
.waterfall-pane .title h2 {
    color: #cd2b3a;
    font-size: 1.1em;
    margin: 0;
    text-transform: uppercase;
}
.waterfall-pane a:hover .title h2 {
    color: #7f000c;
}
.waterfall-pane .title h4 {
    font-size: .8em;
    font-weight: normal;
    margin: 0;
}

#falls-listing .item {
    float: left;
    margin: 4px 5px;
}
#falls-listing .waterfall-pane {
    height: auto;
    width: 48%;
}

.log-pane a {
    border-bottom-style: none;
}
.log-pane .photo {
    border-bottom-style: solid;
    display: inline-block;
    float: left;
    width: 200px;
}
.log-pane .photo img {
    display: block;
    height: auto;
    min-height: 150px;
    width: 100%;
}
.log-pane .title {
    margin-left: 220px;
    padding: 10px 5px;
}
.log-pane a:hover .title {
    background: #dadada;
}
.log-pane .title h2 {
    color: #cd2b3a;
    font-size: 1.3em;
    margin: 0;
    text-transform: uppercase;
}
.log-pain a:hover .title h2 {
    color: #7f000c;
}
.log-pane .title h4 {
    font-size: .8em;
    font-weight: normal;
    margin: 0;
}
.log-pane .title h4 time {
    font-weight: bold;
}
.log-pane .title p {
    font-size: .8em;
}
.log-pane ul.falls {
    font-size: .7em;
    padding: 0;
}
.log-pane ul.falls li {
    display: inline;
    font-style: italic;
    list-style: none;
    white-space: nowrap;
}
.log-pane ul.falls li:after {
    content: ',';
}
.log-pane ul.falls li:last-child:after {
    content: '';
}

#journal-listing .item {
    margin-bottom: 10px;
}

#waterfall .entry-content {
    font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
    font-size: 1.2em;
    margin: 0 15px;
}
#waterfall .entry-content h3 {
    color: black;
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
    font-size: 1.4em;
    font-weight: normal;
    margin: 1em 0 .5em;
    text-transform: uppercase;
}
#waterfall .entry-content p {
    line-height: 1.6em;
}
#waterfall .waterfall-content {
    float: left;
}
#waterfall .photo-container {
    margin: 0 auto 1em;
    min-height: 350px;
    width: 95%;
}
#waterfall .photo-container img {
    display: block;
    height: auto;
    width: 100%;
}

#log .entry-content {
    font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
    font-size: 1.2em;
}
#log .entry-content p {
    line-height: 1.6em;
    margin: 10px 0 20px;
}
#log .photo-holder {
    background: #eaeaea;
    margin: 0 auto 1em;
    padding: 5px;
    width: 90%;
}
#log .photo-holder img {
    height: auto;
    min-height: 480px;
    width: 100%;
}
#log .photo-holder .photo-caption {
    font-size: .8em;
    font-style: italic;
    margin: 0;
    text-align: center;
}
#log .content h4 {
    color: black;
    font-size: 1.3em;
    font-weight: normal;
    margin-bottom: 0;
    text-transform: uppercase;
}
#log .series {
    font-size: .9em;
    margin-top: 50px;
}
#log .series ul {
    margin: 0;
    padding: 0;
    text-align: justify;
}
#log .series li {
    display: inline-block;
    list-style: none;
    margin: 0;
}
#log .series ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#log .series li.previous {
    text-align: left;
}
#log .series li.next {
    text-align: right;
}

.album {
    margin: 0 20px;
}
.album ul {
    margin: 10px 0 30px;
    padding: 0;
    text-align: center;
}
.album li {
    display: inline-block;
    height: 75px;
    list-style: none;
    margin: 5px;
    text-align: center;
    width: 100px;
}
.album li a {
    display: inline-block;
}
.album .photo {
    border-width: 3px;
}
.album li img {
    display: block;
    height: 75px;
    margin: 0 auto;
    width: auto;
}

#imagelightbox {
    border: #eaeaea 5px solid;
    cursor: pointer;
    position: fixed;
    z-index: 5;
}
#imagelightbox-overlay {
    background-color: #f9f9f9;
    background-color: rgba(249, 249, 249, .7);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 4;
}
#imagelightbox-caption {
    background-color: #f9f9f9;
    border-top: 1px solid #eaeaea;
    bottom: 0;
    color: black;
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
    font-size: 1.4em;
    left: 0;
    padding: .5em 0;
    position: fixed;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    z-index: 6;
}
#imagelightbox-close {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    color: black;
    display: block;
    font-size: 2em;
    line-height: .4em;
    padding: .4em .4em .5em;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 7;
}

#comments {
    clear: both;
    padding-top: 70px;
}
#comments h3 {
    color: black;
    font-size: 1.4em;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
}
#comments a {
    border-bottom-style: none;
}
#comments .faux-link {
    background-color: #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: 1em;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}
#comments .comment-listing > li {
    margin: 15px 0 25px;
}
#comments li.reply {
    margin-left: 7%;
}
#comments .comment-meta {
    display: inline-block;
    float: left;
    margin-top: 5px;
    min-height: 43px;
    width: 20%;
}
#comments .comment-date {
    display: block;
    font-style: italic;
}
#comments .comment-body {
    display: block;
    line-height: 1.4em;
    margin: 0 0 10px 25%;
}
#comments .comment-body.pending {
    font-style: italic;
}
#comments .comment-replies {
    border-left: 1px solid #aaa;
    clear: both;
    margin: 0;
}
#comments .comment-new,
#comments .comment-reply,
#comments .comment-hide {
    display: block;
    text-align: right;
}
#comments .comment-form {
    background: #f3f3f3;
    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: 50%;
}
#comments .comment-form textarea {
    height: 120px;
    padding: 3px 5px;
    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;
}

#contact-form dl {
    padding: 0;
}
#contact-form dt {
    margin-top: 20px;
    padding-left: 10px;
}
#contact-form dd {
    margin: 0;
}

.bottom {
    background: white;
    border-top: 1px solid #e0e0e0;
    font-size: .8em;
    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.2em;
    font-weight: normal;
    margin: 0 0 10px;
    text-transform: uppercase;
}
#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: 8px;
}
#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;
}

#footer {
    background: white;
    font-size: .9em;
    padding: 30px 0 50px;
}
#footer #interior {
    text-align: center;
}
#footer #interior p {
    margin: .5em 0;
}

@media all and (min-width: 1600px) {
#home-layout .top-banner {
    margin: 0 auto;
    width: 1600px;
}
}

@media all and (max-width: 1000px) {
.inner {
    width: 98%;
}

#home-layout .photo-holder img {
    min-height: 514px;
}
#home-layout .welcome {
    font-size: .9em;
}

#container .home-column {
    font-size: .9em;
}

.introduction h1 {
    font-size: 1.6em;
}

.content {
    width: 80%;
}
.sidebar {
    margin-left: 82%;
}
.sidebar dt {
    float: none;
    width: auto;
}
.sidebar dd {
    margin: 0 0 5px 10px;
}

.waterfall-pane .photo img {
    min-height: 185px;
}

#waterfall .photo-container {
    min-height: 380px;
}

#log .photo-holder img {
    min-height: 360px;
}
}

@media all and (max-width: 700px) {
.inner {
    width: 95%;
}

#logo {
    float: none;
}
#logo span.title {
    font-size: 2em;
}
#logo span.description {
    font-size: .8em;
}
#navigation {
    height: auto;
    padding: 10px 5px 0;
    text-align: left;
}
#navigation li {
    margin-right: 10px;
    padding: 0 10px;
}
#navigation a {
    padding-bottom: 4px;
}
#navigation a.active,
#navigation a:hover {
    border-bottom-width: 3px;
    padding-bottom: 1px;
}

#home-layout .welcome {
    bottom: 0;
    padding: 10px 5px 5px;
    position: relative;
    right: 0;
    width: auto;
    z-index: 1;
}
#home-layout .welcome .action {
    float: right;
    margin-right: 20px;
}
#home-layout .welcome:after {
    clear: both;
    content: ' ';
    display: block;
}

#container .home-column {
    width: 100%;
}
#container .site-updates {
    float: none;
}
#container .site-updates dt {
    width: 80px;
}
#container .side-updates dd {
    margin-left: 80px;
}
#container .log-updates {
    border-width: 1px 0 0;
    margin: 20px 0 0;
    padding: 10px 0 0;
}

.introduction.callout .panel {
    float: none;
    width: auto;
}
.introduction.callout .photo {
    display: none;
}
.introduction h1 {
    font-size: 1.6em;
}
.introduction p {
    font-size: .8em;
}

.content {
    float: none;
    width: auto;
}

.sidebar {
    margin: 20px 0 0;
}
.sidebar dt {
    float: left;
    width: 80px;
}
.sidebar dd {
    margin: 0 0 0 100px;
}
.sidebar .map {
    margin: 0;
    width: 230px;
}

#map {
    top: 85px;
}

.waterfall-pane .photo img {
    min-height: 160px;
}

.log-pane ul.falls {
    display: none;
}

#log .entry-content {
    font-size: 1.1em;
}

#imagelightbox-caption {
    font-size: 1.2em;
}

#site-links {
    float: none;
    width: auto;
}
#activity-feed {
    margin: 30px 0 0 0;
}
}

@media all and (max-width: 600px) {
#home-layout .photo-holder img {
    min-height: 0;
}
.waterfall-pane .title h2 {
    font-size: 1em;
}
.waterfall-pane .title h4 {
    font-size: .7em;
}

#falls-listing .waterfall-pane {
    width: 47%;
}

#waterfall .photo-container {
    min-height: 320px;
}

#log .photo-holder img {
    min-height: 300px;
}
}

@media all and (max-width: 500px) {
#logo {
    text-align: center;
}
#navigation {
    text-align: center;
}
#navigation li {
    display: inline-block;
    margin-right: 0;
}

#home-layout .welcome {
    font-size: .8em;
}

.introduction h1 {
    font-size: 1.4em;
    text-align: center;
}
.introduction h2 {
    font-size: 1.1em;
    text-align: center;
}
.introduction p {
    display: none;
}

.waterfall-pane .title h2 {
    font-size: 1.1em;
}
.waterfall-pane .title h4 {
    font-size: .8em;
}

#waterfall .photo-container {
    min-height: 220px;
}

#falls-listing .item {
    float: none;
    margin: 4px auto;
}
#falls-listing .waterfall-pane {
    width: 90%;
}

.log-pane .photo {
    width: 42%;
}
.log-pane .photo img {
    min-height: 100px;
}
.log-pane .title {
    float: right;
    margin-left: 0;
    width: 50%;
}
.log-pane .title p {
    display: none;
}

#log .photo-holder img {
    min-height: 200px;
}

#comments .comment-listing {
    font-size: .9em;
}
#comments .comment-replies {
    padding-left: 10px;
}
#comments .comment-meta {
    display: block;
    float: none;
    margin-top: 0;
    width: auto;
}
#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;
}
#comments .comment-form li.text input {
    width: 95%;
}

#imagelightbox-caption {
    font-size: 1em;
}
}

@media all and (max-width: 350px) {
#journal-listing .item {
    margin-bottom: 20px;
}

.sidebar dt {
    float: none;
    width: 100%;
}
.sidebar dd {
    margin: 0 0 5px 10px;
}
.sidebar .map {
    margin: 0 auto;
    width: 90%;
}

.waterfall-pane .title h2 {
    font-size: .9em;
}
.waterfall-pane .title h4 {
    font-size: .6em;
}

#waterfall .photo-container {
    min-height: 150px;
}

.log-pane {
    text-align: center;
}
.log-pane .photo {
    float: none;
    width: 90%;
}
.log-pane .photo img {
    min-height: 150px;
}
.log-pane .title {
    float: none;
    text-align: left;
    width: 90%;
}

#log .photo-holder img {
    min-height: 170px;
}
}