public/css/waterfalls.css
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;
}
}