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; }