/*
 * Combined style sheet for the index pages and the slide pages, with classes that are common to all styles
 */
html {
	overflow-x: hidden; /* added to counter vertical & horizontal 'jiggle' issues with script */
}
body {
	font-family: Verdana, Arial, sans-serif; /* this controls album title and album description */
	margin: auto;
	background-color : #666; /* no effect on album. this or color is picked up on individual style sheet (light, dark, etc), not here */
	color : #000;
}

.container {
	height: 100%; /* this holds most of the index page elements */
}

#demo2 {
width: 450px; /* interesting, but not useable, effect if change #demo2 to .demo2 */
height: 400px; /* 100 allows space for comment below thumb, change 100 to 0 to eliminate comment, see line 122 */
background-color: #996666; /* this has NO effect, here only to prove that point */
}

a:link, a:visited, a:active {
	text-decoration: none; /* controls links in comment-caption area, description, credits and home page */
}

a:hover {
	color:#FF00FF;
}

.sh-albumtitle {
	font-size: 16px; /* album title appearing at top of both index and slide pages */
	font-weight: normal;
	text-align: center;	
	margin: 15px auto 0px;
}

.sh-thumbs {
	text-align : center; /* the thumb AND navigation icon area (prev, next, etc) on the index page */
	margin: 15px auto;
}

.sh-navicons {
	margin : 25px auto 0px; /* the navigation icon element area for BOTH index AND slide pages */
	text-align : center;
}
.sh-navicons img {
	border: 0;
}
.sh-description {
	margin : 15px auto 0px; /* from Album settings > General > Album description, does NOT include optional slide page button */
	max-width: 550px; /* so description can be wider than thumb */
	font-size: 14px;
	text-align : center;
}

.slidebutton {
	font-size: 12px; /* if Album settings > Pages > Make slide pages is checked, 'button' link to first slide page is displayed */
	text-align : center;
	margin: 15px auto 0px;
}

.homepagelink {
	font-size: 12px; /* if entered into jAlbum, appears on both index AND slide pages */
	text-align : center;
	margin : 15px auto 0px;
}

.bottominfotxt {
	margin : 15px auto 0px; /* this is for an optional footer.inc file stored in image directory, not recognized in this version */
	max-width: 550px; /* so description can be wider than thumb */
	font-size: 16px;
	text-align : left;	
}

.creditlink {
	font-size: 10px; /* if selected by jAlbum license holders, only appears on index page. Will appear for non-license holders */
	text-align : center;
	margin : 15px auto 0px;
}

.ie-alert {
	margin : 15px auto 0px; /* this section only applies when index page viewed using Internet Explorer */
	max-width: 485px; /* warns user experience with skin degraded when using IE, but does NOT prevent basic functioning */
	font-size: 13px;
	text-align : center;
	color: red;
	border: 1px solid red
}

.filler {
	height: 1000px; /* this is a hack to prevent vertical/horizontal scroll bar jiggle */
}

	/* the next three elements apply to slide pages */
	
.thumbnav {
	margin : 15px auto 0px; /* thumbnail navigation if selected, between slides, slide page only. See slide.htt to change size if needed */
	text-align : center;
}

.slideimage {
	text-align : center;
	margin: 15px auto 0px;
}

.slidecomment {
	text-align: center;
	width: 720px; /* controls any comment so that it does not extend beyond width of slide */
	margin:15px auto;
}



	/* the stuff below here is taken directly from Dyamic Drive's code with maybe a comment or two added */
	/* default class to style each Card Deck Slideshow in general. Change name as desired. */

div.stackcontainer{
width: 250px; /* default width, this has now effect */
height: 200px; /* default height, this has no effect. See line 20 #demo2 details */
border: 10px; /* border outline around index page thumbnail and comment */
border-style:solid;
border-color:#FFF; /* see around line 135 below, this is balance of border around index pageThumb not including caption-comment */
margin: auto;
overflow: hidden;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

	/* Do NOT change ".inner" class name itself, as it's used by script to identify each content */

div.stackcontainer > div.inner{
background: #FFF;  /* background: #FFFFFF;  background color of index page Thumb caption-comment - do NOT delete */
overflow: hidden; /* keep this property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: auto;
}

	/* Add padding to child DIV of each ".inner" container */

div.stackcontainer > div.inner > div{ 
padding: 8px; /* not seeing any effect when changed */
}

	/* Get rid of border in IE when image is a link */
	
div.stackcontainer > div.inner img {
border: 0;
}

	/* hinge class that gets added to unveiling DIV (then removed) */

div.stackcontainer > div.hinge{
	box-shadow: 0 0 10px gray;
}

 /* CSS3 keyframes animation for unhinge effect */

@-moz-keyframes hingetopleft {
	0% { -moz-transform: rotate(0);}
	20% { -moz-transform: rotate(100deg);}
	40% { -moz-transform: rotate(65deg);}
	60% { -moz-transform: rotate(90deg);}
	80% { -moz-transform: rotate(80deg) translateY(0);}
	95% { -moz-transform: rotate (90deg) translate(120%, 0); opacity: 1;}	
	100% { -moz-transform: rotate(91deg) translate(150%, 0); opacity: 0; }
}


@-webkit-keyframes hingetopleft {
	0% { -webkit-transform: rotate(0);}
	20% { -webkit-transform: rotate(100deg);}
	40% { -webkit-transform: rotate(65deg);}
	60% { -webkit-transform: rotate(90deg);}
	80% { -webkit-transform: rotate(80deg) translateY(0);}
	95% { -webkit-transform: rotate (90deg) translate(120%, 0); opacity: 1;}	
	100% { -webkit-transform: rotate(91deg) translate(150%, 0); opacity: 0; }
}

@keyframes hingetopleft {
	0% { transform: rotate(0);}
	20% { transform: rotate(100deg);}
	40% { transform: rotate(65deg);}
	60% { transform: rotate(90deg);}
	80% { transform: rotate(80deg) translateY(0);}
	95% { transform: rotate (90deg) translate(120%, 0); opacity: 1;}	
	100% { transform: rotate(91deg) translate(150%, 0); opacity: 0; }
}


@-moz-keyframes hingetopright {
	0% { -moz-transform: rotate(0);}
	20% { -moz-transform: rotate(-100deg);}
	40% { -moz-transform: rotate(-65deg);}
	60% { -moz-transform: rotate(-90deg);}
	80% { -moz-transform: rotate(-80deg) translateY(0);}
	95% { -moz-transform: rotate (-90deg) translate(-120%, 0); opacity: 1;}	
	100% { -moz-transform: rotate(-91deg) translate(-150%, 0); opacity: 0; }
}


@-webkit-keyframes hingetopright {
	0% { -webkit-transform: rotate(0);}
	20% { -webkit-transform: rotate(-100deg);}
	40% { -webkit-transform: rotate(-65deg);}
	60% { -webkit-transform: rotate(-90deg);}
	80% { -webkit-transform: rotate(-80deg) translateY(0);}
	95% { -webkit-transform: rotate (-90deg) translate(-120%, 0); opacity: 1;}	
	100% { -webkit-transform: rotate(-91deg) translate(-150%, 0); opacity: 0; }
}


@keyframes hingetopright {
	0% { transform: rotate(0);}
	20% { transform: rotate(-100deg);}
	40% { transform: rotate(-65deg);}
	60% { transform: rotate(-90deg);}
	80% { transform: rotate(-80deg) translateY(0);}
	95% { transform: rotate (-90deg) translate(-120%, 0); opacity: 1;}	
	100% { transform: rotate(-91deg) translate(-150%, 0); opacity: 0; }
}