gallery3-contrib/css/pear.css

body {
  overflow: hidden;
  font-size: 10px;
  color: #999 !important;
  text-align: left;
}

#loading {
  background: #000 url(../icons/load.gif) no-repeat fixed 50%;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99998
}

.g-hover-item {
  border: 0 solid #000;
  position: relative !important;
  z-index: 11 !important;
  display: block;
}

#g-place-holder {
  position: absolute;
  display: none;
}
.gallery-thumb {
  float: left;
  padding: 3px 5px 7px;
  position: relative;
  text-align: center;
  cursor: pointer;
}

.gallery-album {
  display: block;
  height: 400px;
  overflow: auto;
  padding-bottom: 10px;
  padding-top: 10px;
}

th, td {
  padding: 0;
  border-width: 0;
}

.giInfo {
  color: #888;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  height: 11px;
  margin-bottom: 0;
  margin-left: 12px;
  margin-right: 0;
  text-align: left;
}
.giTitle {
  font-size: 1.1em;
  font-weight: 700;
  margin: .3em 3px !important;
  padding: 0;
  text-align: left;
  height: 1.2em;
  overflow: hidden;
}

#gsNavBar div {
  font-weight: 700;
}

h2 {
  font-size: 1.1em;
  font-weight: bold;
}

.center {
  text-align: center !important;
}

#g-header {
  margin-top: -2px;
  position: fixed;
  top: 44px;
  width: 100%;
  z-index: 50;
}
/*Menu*/
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: none repeat scroll 0 0 #333;
  outline: 0 none;
}
.sf-menu li {
  background: none repeat scroll 0 0 #000;
  float: left;
  position: relative;
}
.sf-menu li li, .sf-menu li li ul li {
  background-color: #000;
}
.sf-menu ul {
  background: none repeat scroll 0 0 #000;
}
.sf-menu, .sf-menu * {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
a, .g-menu a, #g-dialog a, .g-button, .g-button:hover, .g-button:active, a.ui-state-hover, input.ui-state-hover, button.ui-state-hover {
  color: #777 !important;
  cursor: pointer !important;
  text-decoration: none;
}
.sf-menu a, .sf-menu a:visited {
  color: #555;
}
.sf-menu a {
  border-left: 1px solid #333;
  border-top: 1px solid #222;
  padding: .75em 1em;
  text-decoration: none;
  display: block;
  position: relative;
}
/*
.ui-state-default, .ui-widget-content .ui-state-default {
background: #ccc;
border: 1px solid #C5DBEC;
color: #555
font-weight: bold;
outline: medium none;
}
*/
#g-banner {
  background-color: #555;
  border-bottom: 1px solid #333;
  min-height: 5em;
  padding: 1em 20px;
  position: relative;
}

.g-paginator {
  padding: 6px 15px 5px;
  position: relative;
  z-index: 20;
}

.g-thumbnail {
  border-radius: 5%;
  /*
  -webkit-box-reflect: below 0
  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(white)); 
   */
}

.hovering > *{
    color: #2E8AE6 !important;
}

#mosaicTable {
    position: fixed;
    top: 45px;
    bottom: 40px;
    overflow: hidden;
    left: 0;
    right: 0;
    margin-top: 5px;
}

#mosaicDetail {
    position: absolute;
    left: 0;
    width: 65%;
    height: 100%;
    text-align: center;
}

#mosaicDetailContainer {
    margin: 0 auto;
    width: 100%;
    position: absolute;
}

#mosaicImg {
  cursor: pointer;
}

#imgMenu {
    position: absolute !important;
    left: 10px;
    right: 10px;
    text-align: left;
}

#gridContainer {
    position: absolute;
    right: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 35%;
}

#sidebarContainer {
    width: 221px;
    position: fixed;
    right: 0;
    overflow: none;
    top: 45px;
    bottom: 40px;
}
#toggleSidebar {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: -18px;
}

#sidebar {
  border-left: 1px darkGrey solid;
  padding: 0;
  height: 100%;
  overflow-y: auto;
}
#pearFlow {
    width: 100%;
    height: 100%;
    z-index: 47;
    display: none;
    position: fixed;
}

#pearFlow .imageflow {
    position: absolute;
}

.gallery-thumb-round {
	background: url('../icons/rounded.png') no-repeat scroll left top;
	position: absolute;
	height: 200px;
	width: 200px;
}

.p-video{
	background: url('../icons/movie.png') no-repeat center;
	position: absolute;
	width: 200px;
	height: 200px;
	left: 0;
	top: 0;
}

.skimm_div {
	position: absolute;
}

.skimm_small {
	position: absolute;
}

.rNavBar{
	position: relative;
	float: right;
	top: -22px;
    padding: 0 5px;
}

.lNavBar{
	position: relative;
	float: left;
    padding: 0 5px;
}

.pearTitle {
color: #ddd;
margin: auto;
position: relative;
text-align: center;
width: 50%;
font-variant: small-caps;
font-size: 1.7em !important;
}

.count {
color: #666;
font-size: .7em !important;
}

#gsNavBar {
background:transparent url('../icons/top_bar_bg.png') repeat-x 100% -12px;
position: relative;
height: 37px;
padding: 10px 0 0;
overflow: hidden;
text-shadow: 0 -1px 2px #111;
font-weight: bold;
z-index: 100;
}

#footerWrapper {
min-width: 800px; 
width: 100%;
background:transparent url('../icons/footer_bg.png') top center;
height:40px;
clear:both; 
z-index: 100;
position: fixed;
left: 0;
bottom: 0;
}

#logoButton {
display: block;
z-index: 100;
background: transparent no-repeat center center;
width: 40px;
height: 40px;
border: 0;
margin-left: -20px;
position: absolute;
left: 50%;
cursor: pointer; /* hand-shaped cursor */
}


/************************ COLOR PICKER **************************/


#colorPicker {
	position: relative;
	color: #FFF;
	height: 17px;
	padding: 0 0 0 25px;
	width: 136px;
	float: right;
	z-index: 100;
	font-size: 12px;
	top: 11px;
}




#colorPicker div.label {
	margin-top: 2px;
	margin-right: 6px;
	float: left;
	background-color: transparent ! important;
	width: auto ! important;
	height: 20px;
	color: #666;
	display: block;
	font-size: 12px;
	text-shadow: #111 0 -1px 1px;
}

#colorPicker.disabled  div.label{
	text-shadow: #242424 0 -1px 1px;
	color: #3f3f3f;
}

#colorPicker .swatch {
	float: left;
	background-color: #fff;
	height: 15px;
	width: 14px;
	display: block;
	margin-right: 6px;
	margin-top: 2px;
	cursor: pointer;
/*	background-position: 0px -58px;
*/	background-color: transparent;
	background-repeat: no-repeat;
}
/*
#colorPicker .hover-with-swatch, #colorPicker .swatch:hover {
	background-position:  -1px  -37px !important;
}
*/


#colorPicker .sel-with-swatch, #colorPicker .hover-with-sel-with-swatch {
	cursor: default ! important;
}

#colorPicker .disabled-with-swatch, #colorPicker.disabled-with-sel-with-swatch, #colorPicker .disabled-with-hover-with-swatch  
{
/*	background-position: 0px 0px ! important; */
	cursor: default ! important;
}

#colorPicker #black {
	background-image: url('../icons/color_picker.png') ;
	background-position: -1px 0;
}

#colorPicker #black:hover {
	background-position: -1px -40px;
}

.black-with-sel-with-swatch{
	background-position: -1px -20px ! important;
}

#colorPicker #dkgrey {
	background-image: url('../icons/color_picker.png') ;
	background-position: -23px 0;
}

#colorPicker #dkgrey:hover {
	background-position: -23px -40px;
}

.dkgrey-with-sel-with-swatch{
	background-position: -23px -20px ! important;
}

#colorPicker #ltgrey {
	background-image: url('../icons/color_picker.png');
	background-position: -43px 0px;
}

#colorPicker #ltgrey:hover {
	background-position: -43px -40px;
}

.ltgrey-with-sel-with-swatch{
	background-position: -43px -20px ! important;
}

#colorPicker #white {
	background-image: url('../icons/color_picker.png');
	background-position: -63px 0px;
	margin-right: 16px;
}

#colorPicker #white:hover {
	background-position: -63px -40px;
}

.white-with-sel-with-swatch{
	background-position: -63px -20px ! important;
}

/************************ SLIDER VIEW **************************/

.sliderView {
padding: 7px 37px 7px 3%;
position: relative;
color: #FFFFFF;
top: 10px;
height: 3px;
width: 154px;
float: right;
z-index: 100;
}

.sliderView .smaller {	
height: 14px;
width: 14px;
float: left;
position: relative;
left: -24px;
top: -4px;
cursor: pointer; /* hand-shaped cursor */
background: url('../icons/sliderView.png') -16px 0 no-repeat;
}

.sliderView .larger {
height: 16px;
width: 16px;
float: left;
position: relative;
top: -4px;
left: 133px;
cursor: pointer; /* hand-shaped cursor */
background: url('../icons/sliderView.png') 0 0 no-repeat;
}

/*.sliderView .sliderLeftCap {
height: 15px;
width: 5px;
float: left;
position: relative;
left: 0px;
background: url(view_control/track_left.png) top center repeat-x;
}*/

.sliderView .sliderRightCap {
height: 15px;
width: 3px;
float: left;
position: relative;
left: 137px;
background: transparent url('../icons/track_fill_right.png') scroll top right no-repeat;
}

.sliderView .track {
width: 137px;
height: 15px;
background: transparent url('../icons/track_fill_left.png') scroll top left no-repeat;
position: relative;
border: 0;
}

.sliderView .ui-slider-handle {
background: transparent url('../icons/knob.png') top left no-repeat;
position: absolute;
top: -5px;
width: 16px;
height: 16px;
cursor: pointer; /* hand-shaped cursor */
margin-left: -7px;
border: 0;
}

.disabled-with-sliderView {

}

.disabled-with-sliderView .smaller, .disabled-with-sliderView .larger, .disabled-with-sliderView .handle{
cursor: default;
}

.disabled-with-sliderView .smaller {
	background-image: url('../icons/view_control/smaller_dim.png');
}

.disabled-with-sliderView .larger {
	background-image: url('../icons/view_control/larger_dim.png');
}

.disabled-with-sliderView .handle {
	background-image: url('../icons/view_control/knob_dim.png');
}

.disabled-with-sliderView .sliderRightCap {
	background-image: url('../icons/view_control/track_right_dim.png')
}

.disabled-with-sliderView .track {
	background-image: url('../icons/view_control/track_fill_left_dim.png')
}


/************************ VIEW CONTROLS **************************/
#viewControls {
    position: relative;
    color: #616161;
    float: left;
    padding-left: 30px;
    padding-top: 13px;
    z-index: 800;
    font-size: 12px;
    text-shadow:  #111 0 -1px 1px;
}

#viewControls .label {
	margin-top:-1px;
}

#viewControls .viewSwitcher {
height: 14px;
margin-right: 17px;
float: left;
cursor: pointer; /* hand-shaped cursor */
font-weight: bold;
}
.vs-icon {
    background-image: url('../icons/viewMode.png');
    background-repeat: no-repeat;
    width: 20px;
    height: 15px;
    display: block;
    float: left;
}

.vs-icon-grid { background-position: 0 0; } 
.hover-with-viewSwitcher .vs-icon-grid, .sel-with-viewSwitcher .vs-icon-grid { background-position: 0 -15px; }
.vs-icon-mosaic { background-position: -20px 0; }
.hover-with-viewSwitcher .vs-icon-mosaic, .sel-with-viewSwitcher .vs-icon-mosaic { background-position: -20px -15px; }
.vs-icon-carousel { background-position: -40px 0; }
.hover-with-viewSwitcher .vs-icon-carousel, .sel-with-viewSwitcher .vs-icon-carousel { background-position: -40px -15px; }
.vs-icon-slideshow { background-position: -60px 0; }
.hover-with-viewSwitcher .vs-icon-slideshow, .sel-with-viewSwitcher .vs-icon-slideshow { background-position: -60px -15px; }

#viewControls .sel-with-viewSwitcher, #viewControls .hover-with-viewSwitcher {
color: #fff;
}
#viewControls .sel-with-viewSwitcher, #viewControls .disabled {
    cursor: default !important;
}

/************************ DETAIL VIEW **************************/

#detailView {
	margin: 0 auto;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: #000;
	display: none;
}

#detailView .iMovieVideo {
	background-color: #000 ! important;
}

.titleLabel {	
	color:#AAA;
	font-size:13px;
	font-weight:bold;
/*	overflow:hidden;
*/	position:relative;
  	margin:10px auto;
	text-align:center;
	text-shadow: #000 0 0 1px;
	white-space:nowrap;
	height:21px;
	text-overflow: ellipsis;
}

.japanese .titleLabel {
	font-size: 12px;
}

.titleLabel:hover  {
/*	color: #fff;*/
}

#detailView .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
;

/*	filter

: alpha(opacity=95);
	opacity: 0.95;
	-moz-opacity:0.95;	 */
}

#detailView .content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#detailView .iMovieVideo
{
	overflow-y: auto;
	overflow-x: hidden;
}

.under-panel #detailView .content {
	overflow: hidden;
}

#detailView .imageContainer {
	text-align: center;
/*	margin: 69px 69px 0px 69px;*/
	margin-top: 40px;
	cursor: pointer;
}


#slideshowView .imageContainer {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#slideshowView .reflectionContainer {
	position: absolute;
	max-height:50px;
	overflow: hidden;
}

#slideshowView .reflection {
	vertical-align: top;
/*	height: 20%;*/
	width: 100%;
	left:0;
	position: absolute;

}

#slideshowView .reflectionMask {
	background: transparent url('../icons/reflection-black.png') repeat-x  0px bottom;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: block;
	z-index: 100;
	position: absolute;
	vertical-align: top;
	left:0;
	padding-bottom: 2px ;
}


.bg_white #slideshowView .reflectionMask {
	background-image: url('../icons/reflection-white.png');
}

.bg_ltgrey #slideshowView .reflectionMask {
	background-image: url('../icons/reflection-lightgrey.png');
}


.bg_dkgrey #slideshowView .reflectionMask {
	background-image: url('../icons/reflections-darkgrey.png');
}


#slideshowView #slideshowHoverView {
	height:58px;
}


/************************ HOVER VIEW **************************/
#hoverView, #hoverViewTop {
  text-align:center;
  width:100%;
  position: absolute;
  bottom: 20px;
}

#hoverViewMenu, .hoverViewTopMenu {
  background-color:#444;
  border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  padding:0 5px;
  background-image:url('../icons/footer_bg.png');
  padding:4px 15px;
  z-index: 40;
}

#mosaicHover {
    z-index: 30;
}
.hoverViewTopMenu {
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

#hoverViewMenu > .controller, .hoverViewTopMenu > .controller {
  background-image:url('../icons/controller.png');
  background-repeat:no-repeat;
  height:41px;
  width:40px;
  display:inline-block;
  margin:5px 1px 0;
  cursor: pointer;
}
.controller.disabled, .controller.disable {
  cursor: default !important;
}

#close { background-position: 0 0;}
#close:hover { background-position: 0 -41px;}
#close.disabled { background-position: 0 -82px;}

#download { background-position:-40px 0; }
#download:hover { background-position:-40px -41px; }
#download.disabled { background-position:-40px -82px; }

#prev { background-position:-80px 0; }
#prev:hover { background-position:-80px -41px; }
#prev.disabled { background-position:-80px -82px; }

#pause_detail { background-position:-120px 0; }
#pause_detail:hover { background-position:-120px -41px; }
#pause_detail.disabled { background-position:-120px -82px; }

#play_detail { background-position:-160px 0; }
#play_detail:hover { background-position:-160px -41px; }
#play_detail.disabled { background-position:-160px -82px; }

#next { background-position:-200px 0; }
#next:hover { background-position:-200px -41px; }
#next.disabled { background-position:-200px -82px; }

#info { background-position:-240px 0; }
#info:hover { background-position:-240px -41px; }
#info.disabled { background-position:-240px -82px; }

#comment { background-position:-280px 0; }
#comment:hover { background-position:-280px -41px; }
#comment.disabled { background-position:-280px -82px; }

.controller.hidden, .controller.hidden:hover { display:none !important}

#hoverviewmenu > .controller.half, .hoverViewTopMenu > .controller.half {
  background-size: 160px;
  -moz-background-size: 160px;
  height:20px;
  width:20px;
  margin: 2px 1px 0;
}

#close .half { background-position: 0 0;}
#close.half:hover { background-position: 0 -20px;}
#close.half.disable { background-position: 0 -41px;}

#download.half { background-position:-20px 0; }
#download.half:hover { background-position:-20px -20px; }
#download.half.disable { background-position:-20px -41px; }

#prev.half { background-position:-40px 0; }
#prev.half:hover { background-position:-40px -20px; }
#prev.half.disable { background-position:-40px -41px; }

#pause.half { background-position:-60px 0; }
#pause.half:hover { background-position:-60px -20px; }
#pause.half.disable { background-position:-60px -41px; }

#play.half { background-position:-80px 0; }
#play.half:hover { background-position:-80px -20px; }
#play.half.disable { background-position:-80px -41px; }

#next.half { background-position:-100px 0; }
#next.half:hover { background-position:-100px -20px; }
#next.half.disable { background-position:-100px -41px; }

#info.half { background-position:-120px 0; }
#info.half:hover { background-position:-120px -20px; }
#info.half.disable { background-position:-120px -41px; }

#comment.half { background-position:-140px 0; }
#comment.half:hover { background-position:-140px -20px; }
#comment.half.disable { background-position:-140px -41px; }

#detail_close .half { background-position: 0 0;}
#detail_close.half:hover { background-position: 0 -20px;}
#detail_close.half.disable { background-position: 0 -41px;}

#detail_download.half { background-position:-20px 0; }
#detail_download.half:hover { background-position:-20px -20px; }
#detail_download.half.disable { background-position:-20px -41px; }

#detail_prev.half { background-position:-40px 0; }
#detail_prev.half:hover { background-position:-40px -20px; }
#detail_prev.half.disable { background-position:-40px -41px; }

#detail_pause.half { background-position:-60px 0; }
#detail_pause.half:hover { background-position:-60px -20px; }
#detail_pause.half.disable { background-position:-60px -41px; }

#detail_play.half { background-position:-80px 0; }
#detail_play.half:hover { background-position:-80px -20px; }
#detail_play.half.disable { background-position:-80px -41px; }

#detail_next.half { background-position:-100px 0; }
#detail_next.half:hover { background-position:-100px -20px; }
#detail_next.half.disable { background-position:-100px -41px; }

#detail_info.half { background-position:-120px 0; }
#detail_info.half:hover { background-position:-120px -20px; }
#detail_info.half.disable { background-position:-120px -41px; }

#detail_comment.half { background-position:-140px 0; }
#detail_comment.half:hover { background-position:-140px -20px; }
#detail_comment.half.disable { background-position:-140px -41px; }