/* ----------------------------------------------- Slideshow Pro NoFlash - Default stylesheet author: dan rubin edited: 2010-03-25 ----------------------------------------------- */ /* remember to remove any resets not needed for this design */ @import url("reset.css"); /* ############################### Default Layout Styles (border-style, padding, margins, etc.) ############################### */ body { font-family:"Lucida Grande", "Helvetica Neue", Helvetica, Arial; } img { display:block; } #ssp-noflash-container { border-style:solid; } #nav-wrapper { position:relative; padding:2px 0 1px; background-repeat:repeat-x; background-position:0 50%; /*border-top-width:1px; border-style:solid;*/ text-align:center; } /* the element will need to have an ID added (id="gallery-view") when in gallery mode, and removed again when in image or video mode */ body#gallery-view #nav-wrapper { /*border-top:none; border-bottom-width:1px;*/ padding:1px 0 2px; } /* navigation icons */ #buttons li { position:absolute; /* vertical centering trick */ top:50%; margin-top:-8px; /* override dimensions in theme if needed... margin-top is half the height set below */ height:16px; width:16px; text-indent:-9999px; background-repeat:no-repeat; background-position:50%; opacity:.85; } #buttons.disabled { height:23px; /* make sure this works if the buttons are disabled but thumbnails are still visible */ } #buttons.disabled li, #buttons li.disabled { opacity:.35; } #buttons li a { display:block; } #buttons li a:hover { background-color:rgba(255,255,255,.15); -moz-border-radius:3px; -webkit-border-radius:3px; } /* individual nav button styles */ li#button-gallery { left:10px; } li#button-prev-group { left:40px; } li#button-prev { left:60px; } li#button-next { right:60px; } li#button-next-group { right:40px; } li#button-play-pause { right:10px; } /* thumbnail and number navigation */ #thumbnail-wrapper, #number-wrapper { margin:0 auto; padding:4px 1px 4px 11px; /* right padding accounts for 10px right margin on last thumbnail */ -moz-border-radius:5px; -webkit-border-radius:5px; } #number-wrapper { padding:4px 5px 5px 11px; /* right padding accounts for 6px right margin on last number */ } #thumbnails, #numbers { margin:0 auto; } #thumbnails li, #numbers li { float:left; margin-right:10px; } #numbers li { margin-right:6px; } /* thumbnail images */ #thumbnails li { background:url(images/anim-thumbnail-loading.gif) no-repeat center; } #thumbnails li span { display:block; background-repeat:no-repeat; background-position:center; border-style:solid; } /* no thumbnails (numbers only) */ #numbers li, #numbers li a { padding:2px; font-size:9px; } #numbers li a { display:block; margin:-2px; /* accounts for the 2px positive padding on the parent

above */ text-decoration:none; } #gallery-wrapper { padding:10px 0 9px 9px; } /* gallery display */ #galleries li { float:left; margin-right:9px; margin-bottom:9px; border-style:solid; } /*#galleries li:hover { cursor:pointer; }*/ #galleries li img { border-style:solid; } #galleries li h1 { margin:4px 0 3px; font-size:11px; } #galleries li p { font-size:9px; line-height:13px; } #galleries li p.hide-with-js { margin-top:3px; } #galleries li.disabled{ cursor:default; } /* gallery navigation */ #gallery-nav { position:relative; height:20px; padding-right:9px; font-size:9px; text-align:center; } #gallery-nav li { width:32.5%; line-height:20px; } #gallery-nav li a { display:block; height:18px; text-decoration:none; border-width:1px; border-style:solid; } #gallery-nav li#current-screen { margin:0 auto; -moz-border-radius:5px; -webkit-border-radius:5px; } #gallery-nav li#button-prev-screen { float:left; } #gallery-nav li#button-next-screen { float:right; } /* image display area (once video support is added, we'll add another wrapper specifically for videos) */ #image-wrapper { position:relative; /* required for positioning images */ overflow:hidden; /* account for odd image dimensions */ } #image-wrapper a { text-decoration:none; } #image-wrapper img { /* set position to absolute */ position:absolute; } /* image and caption display */ #image-number, #image-caption { visibility:hidden; opacity:0; position:absolute; display:block; left:0; right:0; padding-left:7px; font-size:9px; -moz-transition-property:all; -moz-transition-duration:300ms; -webkit-transition-property:all; -webkit-transition-duration:300ms; } #image-number { top:0; height:23px; font-weight:bold; line-height:23px; background-color:rgba(0,0,0,.9); } #image-caption { top:23px; height:24px; line-height:24px; background-color:rgba(0,0,0,.7); } #image-wrapper:hover #image-number, #image-wrapper:hover #image-caption { visibility:visible; opacity:1; }