/*
-----------------------------------------------
Slideshow Pro NoFlash - Config stylesheet
author: dan rubin
edited: 2010-03-25
----------------------------------------------- */

/*
###############################

Calculated or Configured Styles
(border-color, background-color, border-width, width, height, etc.)

###############################
*/

#ssp-noflash-container {
	/*width:720px;*/ /* configured width minus (border width x 2) */
	/*height:442px;*/ /* configured height minus (border width x 2) */
	/*border-width:1px;*/
}

#nav-wrapper {
	/*height:32px;*/ /* 5px space above and below the thumbnail height + 2px for the thumbnail borders + thumbnail height (e.g. 5 + 5 + 2 + 20px = 32px) */
	
	/* need to set a minimum height somehow, for the disabled version; these are placeholders for now */
	/*min-height:23px;
	height:23px;*/
}


/* thumbnail and number navigation */
#thumbnail-wrapper {
	/*width:512px;*/ /* calculated: maximum number of thumbnails to display based on the width of #ssp-noflash-container...
	for the template example: [16] x (20px thumbnail width + [1px thumbnail border x 2]) + (number of thumbnails to display [16] x 10px margin right) */
}
#thumbnails {
	/*width:384px;*/ /* calculated: actual number of thumbnails to display [12] x (20px thumbnail width + [1px thumbnail border x 2]) + (number of thumbnails to display [12] x 10px margin right) */
}
#number-wrapper {
	width:352px; /* approximately calculated: maximum number of numbers to display based on the width of #ssp-noflash-container...
	for the template example: ... */
}
#numbers {
	width:352px; /* approximately calculated: actual number of numbers to display [16] x (approximate rendered width of each 2-digit number [16px at the default size in Safari]) + (number of numbers to display [16] x 6px margin right) [approximation due to variations in font rendering] */
}


/* thumbnail images */
#thumbnails li span {
/*	width:20px;
	height:20px;
	border-width:1px;*/
}


/* gallery display

Width/Columns: width of each item should be based on: (width of container) ÷ (number of columns set in the config) - (right margin [9px]) = 228px

Height/Rows: height of each item should be based on: ([height of container] - [gallery nav] - [slideshow nav]) ÷ (number of columns set in the config) - (bottom margin [9px]) = 176px

*/
#galleries li {
	width:212px; /* calculated width minus left/right padding and (border width x 2) (both set below) */
	height:160px; /* calculated height minus top/bottom padding and (border width x 2) (both set below) */
	padding:7px; /* careful when making this a user-set measurement: SSP doesn't accurately display the entered padding; the default in SSP is 10px, but the rendered size is 7px */
	border-width:1px;
}
#galleries li img {
	border-width:1px;
}


/* image display area (once video support is added, we'll add another wrapper specifically for videos) */
#image-wrapper {
	height:409px; /* height of container minus (container border x 2) minus slideshow navigation bar
	
	NOTE: height of the slideshow navbar is variable, and depends on the size of thumbnails used, or if numbers are used instead, or if nothing is shown other than the controls, or if the navbar is hidden entirely. this affects the height of #image-wrapper and #gallery-wrapper */
}

#image-wrapper img {
/*
How to center images
*/

/* images must have a height and width set, either in the CSS or the HTML */
/*width:720px;
height:409px;*/

/* margins left and top must be half of the height and width of the image */
margin-left:-360px;
margin-top:-204px;

/* position the image 50% from the top and left edges of #image-wrapper */
left:50%;
top:50%;
}

/*

Cropping ("Scale"):
crop to fit
crop to fit all
downscale only
proportional

Alignment ("Align"):
center
top left
top center
top right
center right
bottom right
bottom center
bottom left
center left

*/