1057 lines
19 KiB
CSS
1057 lines
19 KiB
CSS
|
/*
|
||
|
|
-----------------------------------------------
|
||
|
|
Photo Gallery Templates: Main Style Sheet
|
||
|
|
Author: Douglas Bowman
|
||
|
|
Version: 1.1 - 10 May 2006
|
||
|
|
The design and Movable Type templates that
|
||
|
|
build these pages are available for anyone to
|
||
|
|
download and use:
|
||
|
|
http://stopdesign.com/templates/photos/
|
||
|
|
----------------------------------------------- */
|
||
|
|
|
||
|
|
body {
|
||
|
|
background:#ddd url("../img/bg_page.jpg") repeat-x 0 0;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
font:small Verdana,Sans-serif;
|
||
|
|
color:#333;
|
||
|
|
}
|
||
|
|
.title, .index {
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
#content {
|
||
|
|
position:relative;
|
||
|
|
margin:1.6em 0 0;
|
||
|
|
padding:26px 15px 15px;
|
||
|
|
font-size:85%;
|
||
|
|
line-height:1.6;
|
||
|
|
}
|
||
|
|
.photosolo #content {
|
||
|
|
padding:25px 0 15px;
|
||
|
|
}
|
||
|
|
.index #content, .archive #content, .recentcomments #content, .comments-entry #content {
|
||
|
|
width:720px;
|
||
|
|
margin-left:auto;
|
||
|
|
margin-right:auto;
|
||
|
|
}
|
||
|
|
.title #content {
|
||
|
|
width:733px;
|
||
|
|
margin-left:auto;
|
||
|
|
margin-right:auto;
|
||
|
|
padding:40px 20px 0;
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
.comments-entry #content {
|
||
|
|
margin-top:1em;
|
||
|
|
padding-top:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Links
|
||
|
|
----------------------------------------------- */
|
||
|
|
a, a:visited {
|
||
|
|
color:#258;
|
||
|
|
text-decoration:none;
|
||
|
|
border-bottom:1px solid #469;
|
||
|
|
outline:none;
|
||
|
|
}
|
||
|
|
html>body a, html>body a:visited {
|
||
|
|
border-bottom-style:dotted;
|
||
|
|
}
|
||
|
|
a:hover, a:active {
|
||
|
|
color:#933;
|
||
|
|
border-color:#b55;
|
||
|
|
border-bottom-style:solid;
|
||
|
|
}
|
||
|
|
a img, a.btn, a.btn:visited, a.i, a.i:visited, a.i:hover {
|
||
|
|
border-width:0;
|
||
|
|
}
|
||
|
|
a.btn img, a.i>img {
|
||
|
|
position:relative;
|
||
|
|
top:2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Headings
|
||
|
|
----------------------------------------------- */
|
||
|
|
h2 {
|
||
|
|
margin:.5em 0 .75em;
|
||
|
|
font:145% "Trebuchet MS",Verdana,Sans-serif;
|
||
|
|
color:#974;
|
||
|
|
}
|
||
|
|
h2 .btn {
|
||
|
|
margin-left:.25em;
|
||
|
|
font-weight:normal;
|
||
|
|
color:#666;
|
||
|
|
}
|
||
|
|
.index h2, .archive h2, .recentcomments h2 {
|
||
|
|
background:url("../img/slide_minis.gif") no-repeat 50% 0;
|
||
|
|
margin:0 0 8px;
|
||
|
|
padding:24px 0 0;
|
||
|
|
font-size:100%;
|
||
|
|
line-height:1.4em;
|
||
|
|
font-family:"Gill Sans","Trebuchet MS",Verdana,Sans-serif;
|
||
|
|
font-weight:normal;
|
||
|
|
text-transform:uppercase;
|
||
|
|
letter-spacing:.2em;
|
||
|
|
text-align:center;
|
||
|
|
color:#333;
|
||
|
|
}
|
||
|
|
.galleries h2 {
|
||
|
|
position:relative;
|
||
|
|
top:-10px;
|
||
|
|
margin-bottom:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Lists
|
||
|
|
----------------------------------------------- */
|
||
|
|
ul {
|
||
|
|
margin:.5em 0 1.5em;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
background:url("../img/bullet_white.gif") no-repeat 5px .55em;
|
||
|
|
margin:0;
|
||
|
|
padding:0 0 0 15px;
|
||
|
|
list-style:none;
|
||
|
|
}
|
||
|
|
dl {
|
||
|
|
margin:.5em 0 1em;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
dt {
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
dd {
|
||
|
|
margin:0 0 1em;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Forms
|
||
|
|
----------------------------------------------- */
|
||
|
|
form {
|
||
|
|
margin:0 0 .75em;
|
||
|
|
}
|
||
|
|
input.text, textarea {
|
||
|
|
border:1px solid;
|
||
|
|
border-color:#999 #fff #fff #999;
|
||
|
|
}
|
||
|
|
input.text:focus, textarea:focus {
|
||
|
|
background:#ffc;
|
||
|
|
}
|
||
|
|
#btn-preview, #btn-post {
|
||
|
|
background:#888;
|
||
|
|
padding:2px 5px;
|
||
|
|
border:2px solid;
|
||
|
|
border-color:#aaa #666 #666 #aaa;
|
||
|
|
font:100% Verdana,Sans-serif;
|
||
|
|
text-transform:uppercase;
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
#btn-post {
|
||
|
|
background:#354;
|
||
|
|
border-color:#576 #243 #243 #576;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Misc
|
||
|
|
----------------------------------------------- */
|
||
|
|
p {
|
||
|
|
margin:0 0 .75em;
|
||
|
|
}
|
||
|
|
.buttons p {
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
.note, .error {
|
||
|
|
color:#c33;
|
||
|
|
}
|
||
|
|
.inset, .inset2 {
|
||
|
|
float:left;
|
||
|
|
margin:3px 10px 5px 0;
|
||
|
|
}
|
||
|
|
.inset2 {
|
||
|
|
float:right;
|
||
|
|
margin:3px 0 5px 10px;
|
||
|
|
}
|
||
|
|
img.inset, img.inset2 {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.reset {
|
||
|
|
clear:both;
|
||
|
|
display:block;
|
||
|
|
height:1px;
|
||
|
|
font-size:1px;
|
||
|
|
line-height:1px;
|
||
|
|
}
|
||
|
|
hr.reset {
|
||
|
|
overflow:hidden;
|
||
|
|
visibility:hidden;
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
text-align:left;
|
||
|
|
vertical-align:top;
|
||
|
|
}
|
||
|
|
input, textarea, select, code {
|
||
|
|
margin:1px 0;
|
||
|
|
font:117%/1.2em Monaco,Monospace;
|
||
|
|
}
|
||
|
|
.mainbutton {
|
||
|
|
margin:0;
|
||
|
|
padding:5px 0 10px;
|
||
|
|
font-size:100%;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
.galleries .mainbutton {
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
#commentblock .mainbutton {
|
||
|
|
padding-top:0;
|
||
|
|
}
|
||
|
|
em.date {
|
||
|
|
font-style:normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Path
|
||
|
|
Breadcrumb navigation that gets positioned to
|
||
|
|
the top of the page.
|
||
|
|
----------------------------------------------- */
|
||
|
|
#path {
|
||
|
|
background:#000 url("../img/bg_path.gif");
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
width:100%;
|
||
|
|
margin:0;
|
||
|
|
padding:4px 0 6px;
|
||
|
|
border-bottom:3px solid #555;
|
||
|
|
font-size:85%;
|
||
|
|
line-height:1.6em;
|
||
|
|
color:#777;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
#path a {
|
||
|
|
font-weight:normal;
|
||
|
|
border-color:#777;
|
||
|
|
color:#888;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Header
|
||
|
|
----------------------------------------------- */
|
||
|
|
h1 {
|
||
|
|
margin:0 0 3px;
|
||
|
|
padding:0 0 .35em;
|
||
|
|
border-bottom:1px solid #ddd;
|
||
|
|
font:200% "Gill Sans","Trebuchet MS",Verdana,Sans-serif;
|
||
|
|
line-height:1.2em;
|
||
|
|
text-align:center;
|
||
|
|
text-transform:uppercase;
|
||
|
|
letter-spacing:.15em;
|
||
|
|
}
|
||
|
|
.title h1 {
|
||
|
|
margin:0;
|
||
|
|
padding:0 0 10px;
|
||
|
|
border-width:0;
|
||
|
|
}
|
||
|
|
.title h1 a, .title h1 a:visited {
|
||
|
|
border-bottom-width:0;
|
||
|
|
border-style:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 a, h1 a:hover, .auto #titleimg a {
|
||
|
|
border-style:none;
|
||
|
|
}
|
||
|
|
h1 em {
|
||
|
|
margin-left:.25em;
|
||
|
|
padding-left:.5em;
|
||
|
|
border-left:1px solid #aaa;
|
||
|
|
font:66% Verdana,Sans-serif;
|
||
|
|
color:#666;
|
||
|
|
}
|
||
|
|
h1 img {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Auto-generated title images
|
||
|
|
----------------------------------------------- */
|
||
|
|
.auto h1 {
|
||
|
|
margin:10px 0 .5em;
|
||
|
|
padding:0;
|
||
|
|
border-width:0;
|
||
|
|
font-size:170%;
|
||
|
|
line-height:1.2em;
|
||
|
|
color:#333;
|
||
|
|
text-align:left;
|
||
|
|
text-transform:none;
|
||
|
|
letter-spacing:0;
|
||
|
|
}
|
||
|
|
.auto #titleimg {
|
||
|
|
background:#bbb;
|
||
|
|
position:relative;
|
||
|
|
top:3px;
|
||
|
|
left:3px;
|
||
|
|
float:left;
|
||
|
|
margin:0 0 10px 0;
|
||
|
|
padding:0;
|
||
|
|
border-width:0;
|
||
|
|
}
|
||
|
|
html>body .auto #titleimg {
|
||
|
|
background:url("../img/bg_shadow.png");
|
||
|
|
}
|
||
|
|
.auto #titleimg img {
|
||
|
|
display:block;
|
||
|
|
position:relative;
|
||
|
|
top:-3px;
|
||
|
|
left:-3px;
|
||
|
|
border:10px solid #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Gallery Description
|
||
|
|
Text block appearing on Gallery Title page
|
||
|
|
----------------------------------------------- */
|
||
|
|
#gallerydesc {
|
||
|
|
position:relative;
|
||
|
|
margin:-110px 29px 0 405px;
|
||
|
|
font-size:100%;
|
||
|
|
}
|
||
|
|
.auto #gallerydesc, .v #gallerydesc {
|
||
|
|
float:right;
|
||
|
|
width:218px;
|
||
|
|
position:static;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
.v #gallerydesc {
|
||
|
|
width:338px;
|
||
|
|
}
|
||
|
|
#gallerydesc p {
|
||
|
|
margin:0 0 .75em;
|
||
|
|
}
|
||
|
|
#gallerydesc .date {
|
||
|
|
display:block;
|
||
|
|
margin-bottom:.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Gallery Listing
|
||
|
|
Module showing all galleries in system
|
||
|
|
----------------------------------------------- */
|
||
|
|
#secondary {
|
||
|
|
float:left;
|
||
|
|
width:705px;
|
||
|
|
padding:10px 0 0 15px;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
.index .module {
|
||
|
|
float:left;
|
||
|
|
width:210px;
|
||
|
|
margin:0 17px 0 0;
|
||
|
|
padding:0 4px;
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.galleries {
|
||
|
|
background:#eee;
|
||
|
|
float:left;
|
||
|
|
width:100%;
|
||
|
|
margin:0 0 15px;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.index .galleries {
|
||
|
|
margin-bottom:5px;
|
||
|
|
}
|
||
|
|
.galleries ul {
|
||
|
|
float:left;
|
||
|
|
margin-left:0;
|
||
|
|
margin-bottom:0;
|
||
|
|
list-style:none;
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
.galleries li {
|
||
|
|
background-image:none;
|
||
|
|
float:left;
|
||
|
|
position:relative;
|
||
|
|
width:220px;
|
||
|
|
height:6.4em;
|
||
|
|
overflow:hidden;
|
||
|
|
margin-bottom:0;
|
||
|
|
padding:75px 0 1.6em 15px;
|
||
|
|
}
|
||
|
|
.archive .galleries li {
|
||
|
|
height:10.5em;
|
||
|
|
}
|
||
|
|
.galleries h3 {
|
||
|
|
margin:0 10px 0 4px;
|
||
|
|
font-size:100%;
|
||
|
|
}
|
||
|
|
.galleries h3 a, .galleries a.img, .galleries h3 a:visited {
|
||
|
|
border-width:0;
|
||
|
|
}
|
||
|
|
.galleries .img {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:15px;
|
||
|
|
}
|
||
|
|
.galleries .img img {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.galleries p {
|
||
|
|
margin:0 10px 0 4px;
|
||
|
|
}
|
||
|
|
.galleries div {
|
||
|
|
margin:0 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Auto-generated Gallery Index
|
||
|
|
Slide-formatted list of all galleries
|
||
|
|
----------------------------------------------- */
|
||
|
|
.useslides ul {
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
.useslides li {
|
||
|
|
padding-top:128px;
|
||
|
|
}
|
||
|
|
.useslides .thumb {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:62px;
|
||
|
|
}
|
||
|
|
.useslides p {
|
||
|
|
margin-right:4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Feed links
|
||
|
|
Links to feeds appearing at bottom of Gallery Archive
|
||
|
|
----------------------------------------------- */
|
||
|
|
#feeds {
|
||
|
|
float:left;
|
||
|
|
width:100%;
|
||
|
|
margin:0 0 10px;
|
||
|
|
}
|
||
|
|
#feeds ul {
|
||
|
|
margin:15px 0 0;
|
||
|
|
padding:9px 0;
|
||
|
|
list-style:none;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
#feeds li {
|
||
|
|
background-color:transparent;
|
||
|
|
background-image:none;
|
||
|
|
float:none;
|
||
|
|
width:auto;
|
||
|
|
display:inline;
|
||
|
|
margin:0 2px;
|
||
|
|
padding:0;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
#feeds li a {
|
||
|
|
background-color:#eee;
|
||
|
|
padding:8px 5px;
|
||
|
|
border:1px solid #fff;
|
||
|
|
}
|
||
|
|
#feeds li a:hover {
|
||
|
|
background-color:#ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =GalleryData
|
||
|
|
Table of stats appearing on Gallery Index
|
||
|
|
----------------------------------------------- */
|
||
|
|
.gallerydata {
|
||
|
|
width:100%;
|
||
|
|
border-top:1px solid #ccc;
|
||
|
|
font-size:100%;
|
||
|
|
}
|
||
|
|
.gallerydata th, .gallerydata td {
|
||
|
|
padding:5px;
|
||
|
|
border-bottom:1px solid #ccc;
|
||
|
|
font-weight:normal;
|
||
|
|
vertical-align:middle;
|
||
|
|
}
|
||
|
|
.gallerydata td {
|
||
|
|
text-align:right;
|
||
|
|
white-space:nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =FavList
|
||
|
|
Module on Index page displaying tiny thumbnails
|
||
|
|
of most recent favorite photos
|
||
|
|
----------------------------------------------- */
|
||
|
|
#favlist {
|
||
|
|
float:left;
|
||
|
|
width:204px;
|
||
|
|
margin:0 -3px 0 0;
|
||
|
|
padding:0 0 0 6px;
|
||
|
|
list-style:none;
|
||
|
|
}
|
||
|
|
#favlist li {
|
||
|
|
background:url("../img/bg_slide_sm.gif") 0 0 no-repeat;
|
||
|
|
float:left;
|
||
|
|
width:62px;
|
||
|
|
margin:0 6px 6px 0;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
html>body #favlist li {
|
||
|
|
background-image:url("../img/bg_slide_sm.png");
|
||
|
|
}
|
||
|
|
#favlist table {
|
||
|
|
width:62px;
|
||
|
|
height:62px;
|
||
|
|
margin:0;
|
||
|
|
border-collapse:collapse;
|
||
|
|
font-size:1px;
|
||
|
|
}
|
||
|
|
#favlist td {
|
||
|
|
padding:0 2px 2px 0;
|
||
|
|
text-align:center;
|
||
|
|
vertical-align:middle;
|
||
|
|
}
|
||
|
|
#favlist li a {
|
||
|
|
border-width:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Gallery Info
|
||
|
|
Title, description, & prefs on Photo Gallery page
|
||
|
|
----------------------------------------------- */
|
||
|
|
.galleryinfo {
|
||
|
|
clear:left;
|
||
|
|
float:left;
|
||
|
|
width:22%;
|
||
|
|
margin:0;
|
||
|
|
line-height:1.4em;
|
||
|
|
}
|
||
|
|
.galleryinfo h1 {
|
||
|
|
margin:0 0 .5em;
|
||
|
|
text-align:left;
|
||
|
|
text-transform:none;
|
||
|
|
letter-spacing:0;
|
||
|
|
}
|
||
|
|
.galleryinfo .desc {
|
||
|
|
line-height:1.6em;
|
||
|
|
margin-bottom:1em;
|
||
|
|
}
|
||
|
|
.galleryinfo form {
|
||
|
|
margin:0 0 .5em;
|
||
|
|
padding:5px 0;
|
||
|
|
}
|
||
|
|
.galleryinfo fieldset {
|
||
|
|
margin:0 0 .75em;
|
||
|
|
padding:.25em 0 .5em;
|
||
|
|
border-width:0;
|
||
|
|
border-bottom:1px dotted #ccc;
|
||
|
|
}
|
||
|
|
.galleryinfo form strong {
|
||
|
|
display:block;
|
||
|
|
margin:0;
|
||
|
|
padding:0 0 .25em;
|
||
|
|
color:#222;
|
||
|
|
}
|
||
|
|
.galleryinfo fieldset div {
|
||
|
|
margin:0 0 .25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Thumbs
|
||
|
|
Reusable style for thumbnail photos as slides
|
||
|
|
----------------------------------------------- */
|
||
|
|
.thumb {
|
||
|
|
background:url("../img/bg_slide.gif") 0 0 no-repeat;
|
||
|
|
display:block;
|
||
|
|
float:left;
|
||
|
|
margin:0;
|
||
|
|
padding:0 3px 3px 0;
|
||
|
|
}
|
||
|
|
html>body .thumb {
|
||
|
|
background-image:url("../img/bg_slide.png");
|
||
|
|
}
|
||
|
|
.thumb span {
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position:50% 104px;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.thumbv span {
|
||
|
|
background-position:9px 50%;
|
||
|
|
}
|
||
|
|
.thumb em {
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position:50% 50%;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.thumb a, .thumb a:link, .thumb a:visited {
|
||
|
|
background:none !important;
|
||
|
|
display:block;
|
||
|
|
width:120px;
|
||
|
|
height:120px;
|
||
|
|
border:none;
|
||
|
|
text-indent:-9999px;
|
||
|
|
font-size:1px;
|
||
|
|
line-height:1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Slideset
|
||
|
|
Normal group of slide-like thumbnails
|
||
|
|
----------------------------------------------- */
|
||
|
|
.slideset {
|
||
|
|
float:right;
|
||
|
|
position:relative;
|
||
|
|
width:75%;
|
||
|
|
margin:0 0 15px;
|
||
|
|
padding:0;
|
||
|
|
list-style:none;
|
||
|
|
line-height:1.4em;
|
||
|
|
}
|
||
|
|
.slideset .thumb {
|
||
|
|
float:left;
|
||
|
|
margin:0 10px 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Individual Photo
|
||
|
|
----------------------------------------------- */
|
||
|
|
/* NOTE:
|
||
|
|
See [custom.css] to customize your own
|
||
|
|
photo dimensions with override values. */
|
||
|
|
.main {
|
||
|
|
width:500px;
|
||
|
|
margin:0 auto;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
#photo {
|
||
|
|
margin:0 0 10px;
|
||
|
|
}
|
||
|
|
#photo strong {
|
||
|
|
background:#bbb;
|
||
|
|
position:relative;
|
||
|
|
display:block;
|
||
|
|
top:3px;
|
||
|
|
left:3px;
|
||
|
|
margin:0 0 10px 0;
|
||
|
|
border-width:0;
|
||
|
|
}
|
||
|
|
html>body #photo strong {
|
||
|
|
background:url("../img/bg_shadow.png");
|
||
|
|
}
|
||
|
|
#photo img {
|
||
|
|
display:block;
|
||
|
|
position:relative;
|
||
|
|
top:-3px;
|
||
|
|
left:-3px;
|
||
|
|
border:10px solid #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =PrevNext Nav (Individual Photo template)
|
||
|
|
Thumbnails used for prev/next photo navigation
|
||
|
|
----------------------------------------------- */
|
||
|
|
#prevnext {
|
||
|
|
position:absolute;
|
||
|
|
top:25px;
|
||
|
|
left:50%;
|
||
|
|
}
|
||
|
|
#prev, #next {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
width:123px;
|
||
|
|
margin:0;
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
#prev {
|
||
|
|
right:262px;
|
||
|
|
}
|
||
|
|
#next {
|
||
|
|
left:265px;
|
||
|
|
}
|
||
|
|
#prev a, #next a {
|
||
|
|
width:120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =PrevNextHovers (Individual Photo template)
|
||
|
|
The two hoverable regions overlaying the main photo
|
||
|
|
----------------------------------------------- */
|
||
|
|
/* Note:
|
||
|
|
Width and height for the following
|
||
|
|
strong element is set inline using the style
|
||
|
|
attribute. Both values are automatically
|
||
|
|
determined by taking the width/height of the
|
||
|
|
main photo.
|
||
|
|
Width is ((width of main photo + 20) / 2).
|
||
|
|
Height is (height of main photo + 20). */
|
||
|
|
#prevnext a strong {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
#prev a strong {
|
||
|
|
background:url("../img/photonav_prev.gif") no-repeat 50% -100px;
|
||
|
|
right:-262px;
|
||
|
|
}
|
||
|
|
#next a strong {
|
||
|
|
background:url("../img/photonav_next.gif") no-repeat 50% -100px;
|
||
|
|
left:-265px;
|
||
|
|
}
|
||
|
|
html>body #prev a strong {
|
||
|
|
background-image:url("../img/photonav_prev.png");
|
||
|
|
}
|
||
|
|
html>body #next a strong {
|
||
|
|
background-image:url("../img/photonav_next.png");
|
||
|
|
}
|
||
|
|
#prev a:hover strong, #next a:hover strong, #prev a:active strong, #next a:active strong {
|
||
|
|
background-position:50% 10px;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Description (Individual Photo template)
|
||
|
|
Title and description of photo
|
||
|
|
----------------------------------------------- */
|
||
|
|
#desc {
|
||
|
|
position:absolute;
|
||
|
|
top:170px;
|
||
|
|
right:0;
|
||
|
|
width:50%;
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
#desc h1 {
|
||
|
|
background:url("../img/divider_r.gif") no-repeat 265px 0;
|
||
|
|
max-width:30em;
|
||
|
|
margin:0;
|
||
|
|
padding:10px 15px 5px 265px;
|
||
|
|
border-width:0;
|
||
|
|
font:bold 100% Verdana,Sans-serif;
|
||
|
|
line-height:1.6em;
|
||
|
|
letter-spacing:0;
|
||
|
|
text-transform:none;
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
html>body #desc h1 {
|
||
|
|
background-image:url("../img/divider_r.png");
|
||
|
|
}
|
||
|
|
#desc p {
|
||
|
|
max-width:30em;
|
||
|
|
margin:0 0 .75em;
|
||
|
|
padding:0 15px 0 0;
|
||
|
|
}
|
||
|
|
#desc p.posted {
|
||
|
|
margin-top:1.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Meta info (Individual Photo template)
|
||
|
|
Photo x of y, date, and keywords
|
||
|
|
----------------------------------------------- */
|
||
|
|
#meta {
|
||
|
|
position:absolute;
|
||
|
|
top:170px;
|
||
|
|
left:0;
|
||
|
|
width:50%;
|
||
|
|
}
|
||
|
|
#meta ul {
|
||
|
|
margin:0;
|
||
|
|
padding:0 265px 0 15px;
|
||
|
|
list-style:none;
|
||
|
|
}
|
||
|
|
#meta li {
|
||
|
|
background:none;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
text-align:right;
|
||
|
|
}
|
||
|
|
#meta li.count {
|
||
|
|
background:url("../img/divider_l.gif") no-repeat 100% 0;
|
||
|
|
padding-top:10px;
|
||
|
|
padding-bottom:5px;
|
||
|
|
}
|
||
|
|
html>body #meta li.count {
|
||
|
|
background-image:url("../img/divider_l.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Count
|
||
|
|
Miscellaneous portions of the UI that display
|
||
|
|
a total count of photos for each gallery
|
||
|
|
----------------------------------------------- */
|
||
|
|
.count {
|
||
|
|
font-style:italic;
|
||
|
|
}
|
||
|
|
.galleryinfo .count {
|
||
|
|
background:#ccc;
|
||
|
|
display:block;
|
||
|
|
margin:0 0 .5em;
|
||
|
|
padding:2px 5px;
|
||
|
|
font-style:normal;
|
||
|
|
}
|
||
|
|
#info p.count {
|
||
|
|
margin:3em 0 1.5em;
|
||
|
|
padding:5px 0;
|
||
|
|
border:solid #bbb;
|
||
|
|
border-width:1px 0;
|
||
|
|
font-size:100%;
|
||
|
|
line-height:1.6em;
|
||
|
|
}
|
||
|
|
input.btn, .header form select {
|
||
|
|
vertical-align:middle;
|
||
|
|
font-size:100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Comments
|
||
|
|
General div IDs and headings that surround the
|
||
|
|
comment listing for an entry. These are the divs
|
||
|
|
the JavaScript uses to hide/show comments
|
||
|
|
----------------------------------------------- */
|
||
|
|
#commentblock {
|
||
|
|
display:block;
|
||
|
|
width:480px;
|
||
|
|
margin:0 auto;
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
#commentblock h2, #commentblock p.sub {
|
||
|
|
text-align:center;
|
||
|
|
font-weight:normal;
|
||
|
|
}
|
||
|
|
#commentblock h2 {
|
||
|
|
margin-top:0;
|
||
|
|
font:100% Verdana,Sans-serif;
|
||
|
|
color:#333;
|
||
|
|
}
|
||
|
|
#commentblock h2 a {
|
||
|
|
margin-left:.25em;
|
||
|
|
font-weight:normal;
|
||
|
|
border-width:0;
|
||
|
|
color:#666;
|
||
|
|
}
|
||
|
|
#commentblock h2 a img {
|
||
|
|
position:relative;
|
||
|
|
top:2px;
|
||
|
|
}
|
||
|
|
#showcomments, #hidecomments, #addcommentbutton {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
#addcomment h2 {
|
||
|
|
margin-top:.5em;
|
||
|
|
text-align:left;
|
||
|
|
font:140% "Trebuchet MS",Verdana,Sans-serif;
|
||
|
|
color:#974;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Comment photo
|
||
|
|
Region on comment preview/error pages that displays
|
||
|
|
the thumbnail image, photo name, date, & keywords
|
||
|
|
----------------------------------------------- */
|
||
|
|
#comment-photo {
|
||
|
|
float:left;
|
||
|
|
width:100%;
|
||
|
|
padding:35px 0 12px;
|
||
|
|
}
|
||
|
|
#comment-photo #desc {
|
||
|
|
position:static;
|
||
|
|
width:auto;
|
||
|
|
margin-left:133px;
|
||
|
|
padding:22px 0 2px;
|
||
|
|
}
|
||
|
|
#comment-photo #desc h1 {
|
||
|
|
background:none;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
#comment-photo #desc p {
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =CommentList
|
||
|
|
List of existing comments for an entry
|
||
|
|
----------------------------------------------- */
|
||
|
|
dl.commentlist, ul.commentlist {
|
||
|
|
margin-bottom:1.5em;
|
||
|
|
}
|
||
|
|
#commentblock .commentlist {
|
||
|
|
margin-bottom:1em;
|
||
|
|
}
|
||
|
|
.commentlist dt, .commentlist li p.commenter {
|
||
|
|
padding:8px 0 .25em;
|
||
|
|
font-weight:normal;
|
||
|
|
}
|
||
|
|
.commentlist dd, .commentlist li {
|
||
|
|
background-image:none;
|
||
|
|
padding:2px 18px 4px;
|
||
|
|
margin:0 0 .5em;
|
||
|
|
border-bottom:1px dotted #bbb;
|
||
|
|
}
|
||
|
|
.commentlist .postno {
|
||
|
|
background:url("../img/icon_pushpin.gif") no-repeat 0 50%;
|
||
|
|
border-width:0;
|
||
|
|
padding:0 0 0 18px;
|
||
|
|
margin-right:2px;
|
||
|
|
font:150% "Gill Sans","Trebuchet MS",Georgia,Serif;
|
||
|
|
color:#567;
|
||
|
|
}
|
||
|
|
.commentlist a.postno {
|
||
|
|
border-bottom-width:0;
|
||
|
|
border-style:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
p.comment-error {
|
||
|
|
margin:0 0 1.5em;
|
||
|
|
color:#c33;
|
||
|
|
}
|
||
|
|
#comment-notes {
|
||
|
|
margin-top:2em;
|
||
|
|
}
|
||
|
|
#comment-notes p {
|
||
|
|
color:#554;
|
||
|
|
}
|
||
|
|
|
||
|
|
.commentlink, .commentlink:visited {
|
||
|
|
background:url("../img/icon_pushpin.gif") no-repeat 0 50%;
|
||
|
|
border-width:0;
|
||
|
|
padding-left:17px;
|
||
|
|
white-space:nowrap;
|
||
|
|
}
|
||
|
|
a.commentlink, a.commentlink:visited {
|
||
|
|
color:#359;
|
||
|
|
font-weight:normal;
|
||
|
|
}
|
||
|
|
a.commentlink:hover {
|
||
|
|
color:#933;
|
||
|
|
border-color:#ccb;
|
||
|
|
text-decoration:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Recent Comments
|
||
|
|
Only used on recent comments listing page
|
||
|
|
----------------------------------------------- */
|
||
|
|
.recentcomments .commentlist {
|
||
|
|
float:left;
|
||
|
|
width:100%;
|
||
|
|
margin:0 0 15px;
|
||
|
|
padding:0;
|
||
|
|
list-style:none;
|
||
|
|
}
|
||
|
|
.recentcomments .commentlist li {
|
||
|
|
background-color:#eee;
|
||
|
|
float:left;
|
||
|
|
width:100%;
|
||
|
|
min-height:138px;
|
||
|
|
margin:0 0 15px;
|
||
|
|
padding:0 0 15px;
|
||
|
|
border-bottom-width:0;
|
||
|
|
}
|
||
|
|
.recentcomments li p {
|
||
|
|
margin-left:148px;
|
||
|
|
margin-right:15px;
|
||
|
|
}
|
||
|
|
.recentcomments li p.commenter {
|
||
|
|
margin-left:0;
|
||
|
|
padding-top:20px;
|
||
|
|
padding-left:148px;
|
||
|
|
font-style:italic;
|
||
|
|
}
|
||
|
|
.recentcomments p.thumb {
|
||
|
|
float:left;
|
||
|
|
background-position:15px 0;
|
||
|
|
height:123px;
|
||
|
|
margin:15px 10px 0 0;
|
||
|
|
padding-left:15px;
|
||
|
|
}
|
||
|
|
.commenton {
|
||
|
|
margin-bottom:5px;
|
||
|
|
padding-top:.5em;
|
||
|
|
border-top:1px solid #ccc;
|
||
|
|
color:#888;
|
||
|
|
}
|
||
|
|
.commenton a {
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Comment Form
|
||
|
|
Comment Submission form
|
||
|
|
----------------------------------------------- */
|
||
|
|
#comments-form table {
|
||
|
|
width:100%;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
border-width:0;
|
||
|
|
font-size:100%;
|
||
|
|
color:#333;
|
||
|
|
}
|
||
|
|
#comments-form td {
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
#comments-form td, #comments-form th {
|
||
|
|
padding:5px 10px 5px 0;
|
||
|
|
border-bottom:1px dotted #bbb;
|
||
|
|
font-weight:normal;
|
||
|
|
}
|
||
|
|
#comments-form th {
|
||
|
|
text-transform:lowercase;
|
||
|
|
white-space:nowrap;
|
||
|
|
}
|
||
|
|
#comments-form td.buttons, #comments-form th.buttons {
|
||
|
|
border-width:0;
|
||
|
|
text-align:right;
|
||
|
|
}
|
||
|
|
#comments-form label {
|
||
|
|
text-transform:lowercase;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
#comments-form label:hover {
|
||
|
|
color:#963;
|
||
|
|
}
|
||
|
|
#comments-form textarea {
|
||
|
|
background:#fff;
|
||
|
|
display:block;
|
||
|
|
width:97%;
|
||
|
|
color:#000;
|
||
|
|
}
|
||
|
|
#comments-form textarea:focus {
|
||
|
|
background:#ffc;
|
||
|
|
}
|
||
|
|
#comments-form form p {
|
||
|
|
margin:.5em 0;
|
||
|
|
}
|
||
|
|
#comments-form .text {
|
||
|
|
width:65%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =Footer
|
||
|
|
----------------------------------------------- */
|
||
|
|
#footer {
|
||
|
|
clear:both;
|
||
|
|
width:100%;
|
||
|
|
padding:15px 0;
|
||
|
|
font-size:85%;
|
||
|
|
line-height:1.8em;
|
||
|
|
text-align:center;
|
||
|
|
color:#888;
|
||
|
|
}
|
||
|
|
#footer p {
|
||
|
|
margin:0 15px;
|
||
|
|
padding:5px 0;
|
||
|
|
border-top:1px solid #eee;
|
||
|
|
}
|
||
|
|
#footer hr {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
#footer a {
|
||
|
|
font-weight:normal;
|
||
|
|
color:#678;
|
||
|
|
}
|
||
|
|
#footer a:hover, #footer a:active {
|
||
|
|
color:#933;
|
||
|
|
border-bottom-width:1px;
|
||
|
|
}
|