﻿/*

	Zen Photo Default (Dark) 1.0
	Modified by Stuart Peacock 5th March 2009
		linda (black) 1.0
	Modified by Stuart Peacock 18th August 2009
		linda (white) 1.0
	
*/

/* Basics
------------------------------ */
html {
	/* Moz */
	height: 100%;
}

/* Main Layout
------------------------------ */
a {
	font-family: "Century Gothic", Arial, Helvetica, Sans-Serif, "MS Sans Serif", "Microsoft Sans Serif";
	padding: 0px;
	margin: 0px;
}

body {
	background: #FFFFFF;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#main {
	padding: 0px;
	margin: 0px;
	text-align: left;
	width: 1030px;
	background: #FFFFFF;
}
/* credit and sort IDs control the ZenPHOTO credits at the foot of the gallery, but not the words 'powered by' or the separator bars */ 
#credit, #sort {
	width: 1030px;
	text-align: right;
	clear: both;
	top: 570px;
	position: fixed;
}
#credit a, #sort a {
	/*color: #808080;*/
	/*font-size: 12pt;*/
}
#credit a:hover, #sort a:hover {
	/*color: #808080;*/
	text-decoration: underline;
}
/* controls the thin bar between the title and the body */
#gallerytitle {
	margin: 0px 0px 15px 0px;
	height: 26px;
}
/* controls the style of the title */
#gallerytitle h2 {
/* for reasons unclear, any width > 848 causes the gallery/album title to wrap onto the next line and sit on top of the gallery name */
	width: 848px;
	margin: 0px 0px 15px 0px;
	height:26px;
}

/* Link Styles
------------------------------ */
a:link {
	text-decoration: none;
	color: #808080;
}
a:visited {
	text-decoration: none;
	color: #C0C0C0;
}
a:hover, a:focus {
	color: #808080;
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
	color: #000000;
}

/* Text Styles
------------------------------ */
body {
	color: #000000;
	font-family: "Century Gothic", Arial, Helvetica, Sans-Serif, "MS Sans Serif", "Microsoft Sans Serif";
}
/* h2 used mainly for gallery names/breadcrumbs at top */
h2 {
	padding: 0px;
	margin: 0px;
	font-family: "Century Gothic", Arial, Helvetica, Sans-Serif, "MS Sans Serif", "Microsoft Sans Serif";
	color: #000000;
	font-weight: normal;
	font-size: 12pt;
}
h2 a:link {
	color: #808080;
	text-decoration: none;
}
h2 a:visited {
	color: #C0C0C0;
	text-decoration: none;
}
/* span seems to affect only the separator bars at the top and the current image name when at individual image display */
h2 span {
	color: #C0C0C0;
}
h2 a:hover {
	color: #808080;
	text-decoration: underline;
}
/* Used for the album names */
h3 {
	font-weight: normal;
	color: #000000;
	font-size: 12pt;
	font-family: "Century Gothic", Arial, Helvetica, Sans-Serif, "MS Sans Serif", "Microsoft Sans Serif";
}
h3 a:link {
	color: #808080;
	text-decoration: none;
}
h3 a:visited {
	color: #C0C0C0;
	text-decoration: none;
}
h3 a:hover {
	color: #808080;
	text-decoration: underline;
}

/* Miscellaneous
------------------------------ */
/* can't see what this does */
hr {
	clear: both;
	height: 0;
	border: 0;
	border-top: 1px solid #444;
	margin: 0 0 12px 0;
	padding: 0;
}
/* use img tag with care, affects most images but not all, best left alone, also affects the RSS logo */
/* forcibly specified as a 0 width black border otherwide you end up with a purple border - where from? */
img {
	border: 0px solid #000000;
}
/* can't see what this does */
blockquote {
	border-left: 1px dotted #96967E;
	margin-left: 20px;
	padding-left: 20px;
	color: #363630;
}
/* displays the image metadata permanently (no need to click the image info link) */
#imagemetadata {
	text-align: right;
	/*position: relative;
	display:none;*/
}
#imagemetadata table {
	text-align: left;
	line-height: 1em;
	border: 1px solid #ccc;
	/*position: absolute;*/
	top: 2em;
	right: 0px;
	background-color: #fafafa;
}
#imagemetadata table td {
	border-bottom: 1px solid #f0f0f0;
	background-color: #f8f8f8;
	padding: 2px 5px;
}
/* Page Navigation
------------------------------ */
/* show a page number and <<prev next>> navigators at the bottom of the image thumbs page */
ul.pagelist {
	clear: both;
	padding: 0;
	margin: 20px 0 0 0;
	list-style-type: none;
	font-size: 12pt;
}
ul.pagelist li {
	display: inline;
}
ul.pagelist li a, ul.pagelist span.disabledlink {
	padding: 4px;
}
ul.pagelist li.current a {
	font-weight: bold;
	text-decoration: none;
	cursor: default;
	color: #C0C0C0;
}
ul.pagelist li.prev {
	margin-right: 10px;
}
ul.pagelist li.next {
	margin-left: 10px;
}
.disabledlink {
	color: #808080;
	cursor: default;
}
.pagenav {
	clear: both;
}
.disabled_nav {
	visibility: hidden;
}
/* AJAX
------------------------------ */
/* this section only seems to take effect in admin mode */
#albumDescEditable, #albumTagsEditable {
	margin-bottom: 12px;
}
#imageDescEditable, #albumTagsEditable {
	margin-top: 24px;
}
#imageDesc {
	margin-bottom: 0px;
}
/* this seems to control the text 'Image Info' at the bottom of the screen when an image is displayed
// however some elements are being overridden elsewhere and I can't tell what by
// for instance, this can control font, but not font-color or font-size. font size seems to come from
// #narrow, while font-color seems to come from a, h2, h3 or one of the other styles. However,
// #narrow affects the tags text at the left. Have added .thickbox class to overcome this if desired.
// border, block, box and layout seem to work, others don't.
// Added margin-top of -52px to drag the 'Image Info' link up */

#exif_link {
	float: right;
	margin-top: -52px;
	font-size: 12pt;
}
/* Tags
------------------------------ */
/* tags_title added by Stuart Peacock 11th March 2009 to make the tags bit work properly */
.tags_title {
	position: relative;
	top: -29px;
	font-size: 12pt;
	font-weight: bold;
}

/* seems to have no effect */
.taglist ul {
	display: inline;
	float: left;
	list-style-type: none;
	border-bottom: 0px solid #E6E6E6;
}
/* controls the list of tags and displays the little pencil icon next to them */
.taglist li {
	font-size: 10pt;
	/*display: inline;*/
	background: url(../images/tag.png) no-repeat left center;
	list-style-type: none;
	padding-left: 18px;
	float: left;
	padding-right: 12px;
	top: -40px;
	position: relative;
}
/* seems to have no effect */
/* Stuart Peacock 2011/08/14 - affects the tag cloud on the image display, but doesn't seem very reliable, so left alone*/
.taglist .tags_title {
	padding-right: 12px;
	border-bottom: 0px none #E6E6E6;
	color: #C0C0C0;
	font-weight: normal;
	display: inline;
}

/* Image Thumbnails
------------------------------ */
.imagethumb a, .imagethumb a:hover {
	border: 2px solid #FFFFFF;
	display: block;
	margin: 2px 10px 8px 0px;
	line-height: 0px;
}
.imagethumb a:visited {
	margin: 2px 10px 8px 0px;
	border: 2px solid #808080;
}
.imagethumb a:hover {
	border: 2px solid #000000;
	text-decoration: underline;
	margin: 2px 10px 8px 0px;
}
.imagethumb {
	float: left;
}
/* can't see what this class does */
.albumdesc2 {
	/* line-height: 18px; */
}

/* Album Thumbnails
------------------------------ */
#albums {
	float: left;
}
/* controls outer area of each album */
.album {
	float: left;
	width: 305px;
	border: 0px solid #000000;
	background: #FFFFFF;
	line-height: 100%; /* was 8px*/;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 5px;
}
.album a img {
	border: 2px solid #FFFFFF;
}
/* Stuart Peacock - hover style added */
.album a img:hover {
	border: 2px solid #000000;
}
/* controls the album thumbnail */
.album .thumb {
	float: left;
	margin-right: 8px;
}
/* used by album names */
.album h3 {
	padding: 0;
	margin: 0;
}
/* appears to be unused */
.album p {
	line-height: 12px;
	font-size: 12pt;
	padding: 0px 0px 0px 0px;
	margin: 0px;
}
/* controls the display of the time/date stamp next to the album */
.albumdesc small {
	display: none;
	color: #000000;
	font-size: 12pt;
}

/* Individual Image
------------------------------ */
/* seems to apply to all images including thumbs */
.image {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 24pt;
}
/* applies only to the individual large image */
#image {
	text-align: center;
	line-height: 0px;
	font-size: 24pt;
	margin-top: 15px;
	margin-bottom: 15px;
}
/* imagenav class controls <<prev and next>> buttons, difficult to see what's going on though */
.imgnav {
	float: right;
	width: 140px;
	text-align: center;
	/*background: #282828;*/
	background: #C0C0C0;
	margin-top: -10px;
}
.imgnav .imgprevious a, .imgnav .imgnext a {
	display: block;
	width: 50%;
	height: 100%;
	float: left;
	padding: 8px 0px 0px 0px;
	font-size: 12pt;
	text-decoration: none;
	line-height: 180%;
	color: #666;
}
.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
	background-color: #333;
	text-decoration: none;
	color: #C0C0C0;
}
.imgnav .imgprevious a {
	float: left;
}
.imgnav .imgnext a {
	float: right;
}
/* controls the width of the narrow bar at the bottom and the position of the tags data beneath it */
/* also seems to control the text of the image desc, tags and 'Image Info' link */
#narrow {
	padding: 0px;
	width: 1030px;
	height: 100px;
}
/* use this to control size/placement/border of 'Image Info' link. */
.thickbox {
}
/* Comments
------------------------------ */
#comments {
	clear: both;
}
.error {
	color: #C33;
	font-weight: bold;
}
.comment {
	padding: 10px;
	border: 1px solid #444;
	background: #333;
	margin-bottom: 12px;
}
.commentmeta {
	margin-bottom: 12px;
}
.commentauthor {
	font-weight: bold;
}
.commentdate {
	margin-top: 12px;
	color: #555;
	font-size: 12pt;
}
/* Forms
------------------------------ */
/* SP added from ZenPhoto 1.3.1 version 6/1/2011 */
.captchainputbox {
	width: 6.5em;
	padding: 2px;
}
.inputbox {
	width: 250px;
	padding: 2px;
}
textarea {
	padding: 4px;
	width: 100%;
	color: #888;
	font: 100%/200% "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.checkbox {
	cursor: pointer;
}
.pushbutton {
	cursor: pointer;
	padding: 5px 10px;
}
label {
	cursor: pointer;
}
label:hover {
	color: #999;
}
#map {
	margin-left: -77px;
}
#rating {
	margin-top: 10px;
}
/* Admin Toolbox
------------------------------ */
#admin, #admin_data {
	position: absolute;
	left: 927px;
	top: 26px;
	width: 100px;
	border-bottom: 1px solid #444;
	border-left: 1px solid #444;
	background: #222;
	z-index: 3;
	text-indent: -40px;
	text-align: right;
	padding-right: 2px;
}
#admin_data {
	top: 42px;
	font-weight: normal;
	font-size: 10pt;
	padding-top: 0px;
	text-align: right;
}
#admin h3 {
	font-weight: normal;
	color: #aaa;
	font-size: 10pt;
	margin: 0;
	padding: 0 2 0 0;
	text-align: right;
}
#admin h3:hover {
	color: #86a1b6;
}
/* Search Box
------------------------------ */
/* controls the search input box */
#search {
	float: right;
	text-align: left;
}
#search input.pushbutton {
	border: 1px solid #C0C0C0;
	padding: 0px;
	margin: 0px;
	font-size: 10pt;
	background-color: #808080;
	color: #FFFFFF;
}
#search input.pushbutton:hover {
	border: 1px solid #FFFFFF;
	padding: 0px;
	margin: 0px;
	font-size: 10pt;
	color: #000000;
	background-color: #C0C0C0;
}
#search a {
	text-decoration: none;
}
/* controls the search dropdown */
#search ul {
	position: absolute;
	text-align: left;
	text-indent: -40px;
	list-style: none;
	height: 180px;
	width: 160px;
	overflow: auto;
	background-color: #222222;
	font-size: 10pt;
	left: 830px;
	color: #FFFFFF;
	top: 29px;
	z-index: 2;
}
#searchfields_icon {
	position: relative;
	top: 3px;
}
.clear {
	clear: both;
	height: 10px;
}
/* Archive View
---------------------------- */
#archive {
	width: 300px;
	margin: 0 auto;
	text-align: center;
}
ul.archive * {
	padding: 0;
	margin: 0;
	list-style: none;
}
ul.archive .year {
	margin-top: 10px;
	text-align: center;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 12pt;
}
ul.archive .month {
	font-size: 12pt;
	list-style: none;
	border-top: 2px solid #666;
	padding-top: 5px;
}
/* Tag Cloud
---------------------------- */
#tag_cloud {
	text-align: center;
	background: #FFFFFF;
}
#tag_cloud ul li {
	display: inline;
	list-style-type: none;
}
#tag_cloud p {
	padding: 10px 0;
	margin: 20px 0;
	background: #222;
	border-top: 3px solid #666;
	border-bottom: 3px solid #666;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
}
/* Error Messages
------------------------------ */
.errorbox {
	padding: 20px;
	background-color: #FDD;
	border-top: 1px solid #FAA;
	border-left: 1px solid #FAA;
	border-right: 1px solid #FAA;
	border-bottom: 5px solid #FAA;
	margin-bottom: 10px;
	font-size: 100%;
	color: #DD6666;
}
.errorbox h2 {
	color: #DD6666;
	font-size: 100%;
	font-weight: bold;
	margin: 0px;
}
/* Zenphoto link
------------------------------ */
#zen-part {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	font-weight: normal;
}
#photo-part {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
}
/* SP added from ZenPhoto 1.3.1 version 6/1/2011 */
/* centering flowplayer 3 on image.php */
#image .flowplayer {
	margin: 0 auto;
}
/* SP added custom style 01/08/2011 */
/* used in password.php to force the prompt text to be smaller */
.lwRegister {
	font-size: 12pt;
	color: #000000;
	text-align: left;
}

/* login form */
table.password td.userlabel{
	text-align:right;
}
table.password td.userinput{
	text-align:left;
}

table.password td.userinput input, td.passwordinput input {
	width: 15em;
}

/* login form */
table.password td.passwordlabel{
	text-align:right;
}

table.password td.passwordinput{
	text-align:left;
}

table.password td.submit{
	text-align: center;
}

table.password td.hint{
	text-align:left;
}

/* New styles for user registration and logon */
/* Stuart Peacock 2011.08.29 */

/* Used in password.php to control placement of the 'Click here to register' and 'Click here to reset password' links */
.lwRegisterLink {
	text-align: left;
	color: #000000;
	position: fixed;
	top: 220px;
}
.lwRegisterLink a{
	text-align: left;
	color: #000000;
}

/* Used in register_user_form.php and comment_form.php to control placement of the field names and fields on the registration page */
.lwRegisterFieldname {
	font-size: 12pt;
	text-align: right;
	vertical-align: top;
}
.lwRegisterField {
	font-size: 12pt;
	text-align: left;
	vertical-align: top;
}
.lwSubmit {
	font-size: 12pt;
	text-align: center;
	left: 250px;
	top: 500px;
	position: absolute;
	height: 24px;
}

