piwigo-elegant/theme.css

/* colors & backgrounds */

html, body {background-color:#111;}

body {margin: 5px 0;}

a:hover {border-bottom:none;}

#menuswitcher {
	display:block;
	font-size:200%;
	text-align:center;
	float:left;
	height:33px;
	cursor:pointer;
	margin: 28px 0 0 -35px;
}

#menubar,
#menuswitcher.menuhidden {
	border-radius : 0 10px 10px 0;
	background-color: #222;
	border: solid 1px #333;
	border-width: 2px 2px 2px 0;
}

#menuswitcher.menuhidden {
	width:25px;
	margin-left:0;
}

/* content */

#content.menushown, #the_page > .content.menushown { margin-left:240px;}
#content.menuhidden, #the_page > .content.menuhidden { margin-left:35px;}
#content, #the_page > .content { margin-right:0;}

#content,.content {
	background-color: #222;
	border-bottom: 2px solid #444;
	margin-bottom: 4px;
	padding-bottom: 4px;
}

#thePicturePage #content {padding-bottom:0;}

.content .titrePage {
	background-color: #111;
	border-bottom: 2px solid #444;
	padding:0;
	margin-bottom:4px;
}

.content .titrePage H2 {
	line-height: 20px;
	margin: 0;
	padding: 8px 0 0 2px;
}


body { color: #999;}
a { color: #ccc;}
a:hover { color: #fff;}



/* menubar */

#menubar {
	float: left;
	margin: 28px 13px 10px 0;
	padding: 0;
	display: inline;
	width: 225px;
}

#menubar DT { color: #999; text-align:left;}
#menubar DT a { color: #ccc;}
#menubar DT a:hover { color: #fff;}
#menubar dd { padding: 0 0 1em 1em;}

/* text color */
BODY, H1, H3,
INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
	color:#d0d0d0;
}

#menubar .pwg-icon-filter {display:none;}




/* backgrounds */


#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
	background-color: #505050;
}

#imageHeaderBar H2 {
	background-image: none;
}

#imageHeaderBar {
	border-top: 1px solid #000;
}

/* borders */
#derivativeSwitchBox, #sortOrderBox {
	border: 2px solid #444;
}

.switchBoxTitle {
  border-bottom:2px solid #444;
}

.derivativeSizeDetails {display:none}

FIELDSET, INPUT, SELECT, TEXTAREA {
	border: 1px solid gray;
}


.thumbnails IMG {margin-bottom:0; vertical-align:middle;}
.thumbnailCategory DIV.illustration {margin: 2px; text-align:center;}

/* picture page */
#thePicturePage {background-color:#111;}
#imageHeaderBar { border: solid 0 #444; padding:0 0 0 10px;}
.contentWithMenu #imageHeaderBar {padding:0;}
#copyright {border-top-width:2px;}
#imageHeaderBar {border-bottom-width:2px; width:auto; background:#111}
#imageToolBar 	{background:none;}
#imageToolBar {margin-top: -28px; margin-bottom:0;}
#theImage {padding-top:10px;}
#imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;}
#imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;}
#imageHeaderBar .imageNumber:before {content:'['}
#imageHeaderBar .imageNumber:after {content:']'}
#imageHeaderBar h2 {font-size:100%;}
#thePicturePage .pwg-button {width:26px;}
#thePicturePage .actionButtons {margin-right: 26px;}
#imageToolBar {float:right;}

#thePicturePage #comments {padding-top:12px; padding-bottom:12px;}
#thePicturePage #comments h3 {margin-top:10px; margin-bottom:10px;}
#thePicturePage #comments form { margin-bottom:10px;}
#thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;}
.noCommentText {display:block;}
#copyright {padding:4px 4px 0 0; text-align:right;}

#thePicturePage .comments_toggle_on:before {content:'(+) '}
#thePicturePage .comments_toggle_off:before {content:'(-) '}

.comments_hidden ul, .comments_hidden form {display:none;}
.thumbnailCategory {background-color: #333;}
.comments_toggle {cursor: pointer;}
.comments_toggle:hover {color:#fff;}

#the_page .content .stuffs {margin:0!important}

#thumbnails  {padding-top: 5px;}

INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {background-color:#999;}
INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#ccc;}

/* links */
INPUT.rateButton {
	color: #fff;
}

.pwg-icon {
	background-image: url(../default/s26/outline_808080.png);
}

A:hover .pwg-icon {
	background-image: url(../default/s26/outline_ffffff.png);
}

.message {
  color:white;
  background-color:#666;
}