/* tabby_style.css =============================================================== v0.05 12/29/15 Cm
stylesheet for tabbyglass.com slide show
..................
0.01 created from maryhornig.com																			12/07/15 Cm
0.02 A basic functional layout																			12/11/15 Cm
0.03 Modified to be resizable.																			12/12/15 Cm
0.04 A functional resizable version, sized for 16:9 format, with working captions 
		and css screen mapping.																				12/13/15 Cm
0.05 Interim save  - content-related adds & changes.												12/29/15 Cm
==================================================================================================*/
html	{
	font-family:		times, serif;
	font-size:			19.2px;	
	margin:				0;
	background-color:	#fff7e1;
	width: 				100%;			/*1360px*/
	padding-bottom:	45%;			/* aspect ratio for main window */
}
#content {
	position: 			absolute;
	top: 					0px;
	left: 				0px;
	width: 				100%;			/*1300px*/
	height:				100%;			/*720px*/
	margin: 				0;
	border: 				0;
	padding:				0;
	z-index:				1;
}
#logo {
	position: 			absolute;
	bottom: 				10px;
	right: 				0px;
	width: 				19%;			/*300px*/
	margin: 				0;
	border: 				0;
	padding:				0;
}
#instructions {
	position: 			absolute;
	bottom:				0px;
	width: 				100%;
	border: 				0;
	color:				#aaa; 
	font-size:			80%;	
	font-style:			italic;
	text-align:			center;
}
/* jssor slideshow container ------------------------------*/
.slider_container  {
	position: absolute;
	width: 1240px;						/*1240px*/
	height: 720px;						/*720px*/
	overflow: hidden;
	top: 10px;
	left: 10px;
 }
.slides  {	/* $options['$SlideWidth'] and ['$SlideHeight'] need to be the same as this */
	position: absolute;
	width: 1220px;						/*1220px*/
	height: 620px;						/*620px*/
	top: 0px;
	left: 0px;
	overflow: hidden;
 }
/* jssor load screen --------------------------------------*/
.load  {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
 }
#load1  {
	background: url(loading.gif) no-repeat center center;
 }
#load2  {
	filter: alpha(opacity=70);
	opacity: 0.7;
	background-color: #000;
 }
/*- thumbnail navigator ----------------------------------------------*/
.jssort01 {														/* container */								
	position:	absolute;
	left:			0px; 						/* origin */
	bottom:		10px;		
	width:		100%;					/* container size */
	height:		80px;
	}
.jssort01 .p {													/* the slider instance */
	position:	absolute;
	top: 			0;
	left:			0;
	width:		80px;
	height:		80px;
}
.jssort01 .t {													/* the thumbnail */
	position:	absolute;
	top:			0;
	left:			0;
	width:		100%;
	height:		100%;
	border:		none;
}
.jssort01 .c {													/* select indicator */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 76px;
	height: 76px;
	border: #000 2px solid;
	box-sizing: content-box;
	background: url(t01.png) -800px -800px no-repeat;
}
	.jssort01 .pav .c {										/* active */
	top: 2px;
	left: 2px;
	width: 72px;
	height: 72px;
	border: #000 0px solid;
	background-position: 50% 50%;
}
.jssort01 .p:hover .c {										/* hover */
	top: 0px;
	left: 0px;
	width: 78px;
	height: 78px;
	border: #f00 1px solid;
	background-position: 50% 50%;
}
.jssort01 .p.pdn .c {										/* select */
	background-position: 50% 50%;
	width: 72px;
	height: 72px;
	border: #000 2px solid;
}
* html .jssort01 .c, 						/* quirks mode adjust */
* html .jssort01 .pdn .c, 
* html .jssort01 .pav .c {
	width /**/: 80px;
	height /**/: 80px;
}
/* thumb nav arrows ------------------------------------------------  */
.arrowl, 
.arrowr {
	display:					block;
	position:				absolute;
	width:					50px;					/* size of arrow element */
	height:					50px;
	cursor:					pointer;
	background:				url(a11.png) no-repeat;
	overflow:				hidden;
	z-index:					3;
}
.arrowl {
	background-position:	-11px -41px;
	top:						20px; 
	left:						30px;
}
.arrowr {
	background-position:	-71px -41px;
	bottom:					20px; 
	right:					50px;
}
.arrowl:hover {background-position:		-131px -41px;
					}
.arrowr:hover {background-position:		-191px -41px;
					}
.arrowl.arrowldn {background-position:	-251px -41px;
						}
.arrowr.arrowrdn {background-position:	-311px -41px;
						}
/* Captions ----------------------------------------------------------*/
.caption,
.scroll	{
	position:			absolute; 
	height:				31px;					/* 20 lines */
}
.caption	{
	width:				20%; 					/* 5 columns */
}
.scroll	{
	width:				40%; 
}
.image {
	position:			absolute; 
}
.back	{
	position:			absolute; 
	width:				100%; 
	height: 				inherit;
	background-color:	#fff7e1;				/* fff1cc */
	margin-right:		0;
}
.text	{
	position:			absolute; 
	top:					8px; 					/**/
	width:				100%; 
	height: 				inherit;
	font-style:			italic;
	font-size:			19.2px; 
	font-weight:		bold; 
	text-align:			center;
}
.scroll .text {
	color:				#934906; 
}
.caption .text {
	color:				#934906; 			/* ac5507 */
}
.right .text	{
	text-align:			right;
	width:				90%; 
}
.left .text	{
	text-align:			left;
	left:					10%;
	width:				90%; 
}
.bold .text	{
	font-size:			120%;		
	font-weight:		bold;
}
.bold .back	{
	height: 				110%;
}
/* rows  -----------------*/
.row1		{ top:		 0%; }		/* same as top */
.row2		{ top:		 5%; }
.row3		{ top:		10%; }
.row4		{ top:		15%; }
.row5		{ top:		20%; }
.row6		{ top:		25%; }
.row7		{ top:		30%; }
.row8		{ top:		35%; }
.row9		{ top:		40%; }
.row10	{ top:		45%; }
.row11	{ top:		50%; }		/* same as middle */
.row12	{ top:		55%; }
.row13	{ top:		60%; }
.row14	{ top:		65%; }
.row15	{ top:		70%; }
.row16	{ top:		75%; }
.row17	{ top:		80%; }
.row18	{ top:		85%; }
.row19	{ top:		90%; }
.row20	{ top:		95%; }		/* same as bottom */

.top		{ top:		0%; }
.middle	{ top:		50%;}
.bottom	{ bottom:	0%; }
/* columns -----------------*/
.col0		{ left:		0;}
.col5		{ left:		5%;}
.col10	{ left:		10%;}
.col15	{ left:		15%;}
.col20	{ left:		20%;}
.col30	{ left:		30%;}
.col40	{ left:		40%;}
.col50	{ left:		50%;}
.col60	{ left:		60%;}
.col65	{ left:		65%;}
.col70	{ left:		70%;}
.col75	{ left:		75%;}
.col80	{ left:		80%;}
.col90	{ left:		90%;}
/* widths ------------------*/
.w10		{ width:		10%;}
.w20		{ width:		20%;}
.w25		{ width:		25%;}
.w30		{ width:		30%;}
.w40		{ width:		40%;}
.w50		{ width:		50%;}
.w60		{ width:		60%;}
.w65		{ width:		65%;}
.w70		{ width:		70%;}
.w80		{ width:		80%;}
.w90		{ width:		90%;}
.w100		{ width:		100%;}
/* image specific caption defs ---------------------------------------*/
/*--------------------------------------------------------------------*/
#beaut {
	width:				70%; 
	height: 				70%;
}
/*--------------------------------------------------------------------
# {

}
*/