/* 
  35mm Photo Viewer V3
  --------------------
  Lots of style.
*/

.comment {
 color:#999;
}

/* collection */

#photoSelector {
 margin-top:50px;
 width:256px;
 color:#eee;
}

#photoSelector a {
 color:#996600;
}

#photoSelector a:hover {
 color:#6699FF;
}

#header {
 color:#666;
 background:transparent url(../image/inverted/collection_top_bg.png) 0px 0px no-repeat;
}

#photoSelector .dark {
 /* dark collection variant */
 background-color:#dedede;
}

#photoSelector div.collection hr {
 background:#ddd;
}

#photoSelector h2 {
 color:#33ccff;
}

#photoSelector div.collection h2,
#photoSelector ul li.page div.collection ul,
#photoSelector div.item h2.png,
#photoSelector div.item .content {
 background:transparent url(../image/inverted/collection_top_bg.png) 0px 0px no-repeat;
}

#photoSelector div.item .content {
 w\idth:241px !important;
 color:#999;
}

#photoSelector ul li.page div.collection ul,
#photoSelector div.item .content {
 background:transparent url(../image/inverted/photo_collection_bg.png) 0px 0px repeat-y;
}

#photoSelector ul li.page div.collection div.clear,
#photoSelector div.item div.clear {
 /* bottom */
 background:transparent url(../image/inverted/collection_bottom_bg.png) 0px 0px no-repeat;
}

#photoSelector .pages {
 background:#e9e9e9 url(../image/inverted/page_bg.gif) 0px 0px repeat-x;
}

#photoSelector .pages ul li a {
 color:#666;
 background:#ccc url(../image/inverted/page.gif) 50% 50% no-repeat;
}

#photoSelector .pages ul li a:hover,
#photoSelector .pages ul li a.active {
 background:#ddd url(../image/inverted/page_1.gif) 50% 50% no-repeat;
 color:#555;
 border:1px solid #999;
 border-bottom:1px solid #aaa;
}

#photoSelector .pages ul li a.active,
#photoSelector .pages ul li a.active:hover {
 background:#eee url(../image/inverted/page_1.gif) 50% 50% no-repeat;
 border-bottom:1px solid #eee;
}

#photoSelector ul li.page div.title a {
 border-left:1px solid #aaa;
 border-right:1px solid #fff;
}

#photoSelector ul li.page div.collection ul li a,
a.related {
 background:transparent url(../image/inverted/picture.gif) 0px 0px no-repeat;
 width:16px;
 height:15px;
}

#photoSelector ul li.page div.collection ul li a:hover {
 background-image:url(../image/inverted/picture_1.gif);
}

#photoSelector ul li.page div.collection ul li a.selected {
 background-image:url(../image/inverted/picture_1.gif);
}

/* icon-specific variants */

#photoSelector ul li.page div.collection ul li a.related {
 background-image:url(../image/inverted/related.gif);
}

#photoSelector ul li.page div.collection ul li a.video {
 background-image:url(../image/inverted/video.gif);
}

#photoSelector ul li.page div.collection ul li a.related:hover {
 background-image:url(../image/inverted/related_1.gif);
}

#photoSelector ul li.page div.collection ul li a.video:hover {
 background-image:url(../image/inverted/video_1.gif);
}

/* #container > #controls */

#controls .tab.photos {
 background-image:url(../image/inverted/tab_photos.png) !important;
}

#controls .tab.photosIE {
 background-image:url(../image/inverted/tab_photos.gif);
}

#controls .tab.photos:hover,
#controls .tab.photos.active {
 background-image:url(../image/inverted/tab_photos_active.png) !important;
}

#controls .tab.search {
 background-image:url(../image/inverted/tab_search.png) !important;
}

#controls .tab.searchIE {
 background-image:url(../image/inverted/tab_search.gif);
}

#controls .tab.search:hover,
#controls .tab.search.searchHover,
#controls .tab.search.active {
 background-image:url(../image/inverted/tab_search_active.png) !important;
}

#controls .tab.about {
 background-image:url(../image/inverted/tab_about.png) !important; 
}

#controls .tab.aboutIE {
 background-image:url(../image/inverted/tab_about.gif); 
}

#controls .tab.about:hover,
#controls .tab.about.aboutHover,
#controls .tab.about.active {
 background-image:url(../image/inverted/tab_about_active.png) !important;
}

#controls .bar {
 background:transparent url(../image/inverted/search_bar_bg.png) 0px 0px no-repeat;
}

/* page controls */

#controls a.pageLink {
 background:transparent url(../image/inverted/page.gif) 0px 2px no-repeat;
}

#controls a.pageLink:hover,
#controls a.pageLink:focus {
 background:transparent url(../image/inverted/page_1.gif) 0px 2px no-repeat;
}

#controls a.pageLink:focus,
#controls a.pageLink.selected {
 background:transparent url(../image/inverted/page_1.gif) 0px 2px no-repeat;
}

/* Search form - #controls>#search */

#controls form,
#controls div.photoControls {
 color:#ddd;
 background:transparent url(../image/inverted/search_bar_faceplate.gif) 0px 0px no-repeat;
}

#controls form input {
 background:transparent url(../image/inverted/search_bar_input_bg.gif) 0px 1px repeat-x;
 font:9px small fonts;
 font-weight:bold;
 color:#999;
}

#controls form input:focus,
#controls form input.focus {
 background:transparent url(../image/inverted/search_bar_input_bg_active.gif) 0px 1px no-repeat;
 color:#DA721A;
}

#controls form a.go {
 background:transparent url(../image/inverted/search_bar_go_disabled.gif) 0px 1px no-repeat;
}

#controls form a.go.enabled {
 background:transparent url(../image/inverted/search_bar_go_enabled.gif) 0px 1px no-repeat;
}

#controls form a.go.enabled:hover,
#controls form a.go.enabled.hover {
 background:transparent url(../image/inverted/search_bar_go_enabled_hover.gif) 0px 1px no-repeat;
}

#controls a.minimize {
 background:transparent url(../image/inverted/search_bar_minimize.gif) 0px 1px no-repeat;
}

#controls a.minimize:hover,
#controls a.minimize.active,
#controls a.minimize.minActive {
 background:transparent url(../image/inverted/search_bar_minimize_hover.gif) 0px 1px no-repeat;
}

/* photo controls */

#controls div.photoControls {
 background-color:#ccc;
}

#search b.error {
 color:#666;
}

#search .results .result {
 background:transparent url(../image/inverted/search_result_bg.png) 0px 0px no-repeat;
}

#search .results .result:hover .details,
#search .results .result.hover .details {
 background:transparent url(../image/inverted/search_result_faceplate_active.gif) 6px 5px no-repeat !important;
}

#search .results .result:hover .details .description,
#search .results .result.hover .details .description {
 color:#fff;
}

#search .results .result .details {
 background:transparent url(../image/inverted/search_result_faceplate.gif) 6px 5px no-repeat;
}

#search .results .result .details .description {
 font:9px small fonts;
 color:#ccc;
}

#debug {
 background-color:#eee;
 border:1px solid #fff;
 color:#666;
}

#about-descriptor {
 color:#eee;
}