/* Used with Version 1 of OssippeLakeHouse.com */
/* Has styles for Index.html                   */
/* Has styles for Gallery.html       */

/* Captions for Index.html are two lines and across width of page*/ 
/* styles for jssor sliders */


/* Styles for slider on index.html */		
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div           (normal)
.jssorb01 div:hover     (normal mouseover)
.jssorb01 .av           (active)
.jssorb01 .av:hover     (active mouseover)
.jssorb01 .dn           (mousedown)
*/
.jssorb01 {
	position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
	position: absolute;
	/* size of bullet elment */
	width: 12px;
	height: 12px;
	filter: alpha(opacity=70);
	opacity: .7;
	overflow: hidden;
	cursor: pointer;
	border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l                  (normal)
.jssora05r                  (normal)
.jssora05l:hover            (normal mouseover)
.jssora05r:hover            (normal mouseover)
.jssora05l.jssora05ldn      (mousedown)
.jssora05r.jssora05rdn      (mousedown)
*/
.jssora05l, .jssora05r {
	display: block;
	position: absolute;
	/* size of arrow element */
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: url('../img/a17.png') no-repeat;
	overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }

/* jssor slider thumbnail navigator skin 09 css                                */
/* the next two blocks specifies the text for the bar at the bottom caption.   */
/* for class p:  Usually HEIGHT: is set to the value of "height" used          */
/* below in <div data-u="thumbnavigator" class="jssort09-600-45" style="position:absolute;bottom:0px;left:0px;width:900px;height:80px;"> */
	/* thumbnail navigator skin .jssort09-600-45 added from banner slider */
	
	/* For OssipeeLakeHouse Index.html modified .jssort09-600-45 to have */
	/* width of 900 px and height of 80px so created .jssort09-900-80    */
	
    /* jssor slider thumbnail navigator skin 09 css */
	
	/* starts with the modified .jssort09-900-80 then the original .jssort-09-600-45 */
	/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
	
	
/* the next two blocks specifies the text for the bar at the bottom caption.   */
/* for class p:  Usually HEIGHT: is set to the value of "height" used          */
/* below in div <data-u="thumbnavigator" class="jssort09-900-80" style="position:absolute;bottom:0px;left:0px;width:900px;height:80px;"> */

    /*    Following is the new .jssort09-900-80        */    
        .jssort09-900-80 .p {
            position: absolute;
            top: 0;
            left: 0;
            width: 900px;
            height: 80px;
        }
        
        .jssort09-900-80 .t {
            font-family: verdana;
            font-weight: normal;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            color:#fff;
            line-height: 35px;
            font-size: 30px;
            padding-left: 10px;
}
	/* jssor slider thumbnail navigator skin 09 css */
	/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
    /* Following is the .jssort09-900-140 used with gallery.html   */    
        .jssort09-900-140 .p {
            position: absolute;
            top: 0;
            left: 0;
            width: 900px;
            height: 140px; /*for 4 lines of text in 35px high lines (see .t below) */
        }
        

        .jssort09-900-140 .t {
            font-family: verdana;
            font-weight: normal;
            position: absolute;
            width: 95%;
            height: 100%;
            top: 0;
            left: 0;
            color:#fff;
            line-height: 35px;
            font-size: 30px;
            padding-left: 10px;
}
/*         end of .jssort09-900-140                  */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&  */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&  */
/* Starting is the original .jssort09-600-45        */
  /* jssor slider thumbnail navigator skin 09 css */
        
        .jssort09-600-45 .p {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 45px;
        }
        
        .jssort09-600-45 .t {
            font-family: verdana;
            font-weight: normal;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            color:#fff;
            line-height: 45px;
            font-size: 20px;
            padding-left: 10px;
        }
        
/*              End of .jssort09-600-45             */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* styles for the nested slider used in gallery.html */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/* %%%%%%%%% nested (child) slider bullets %%%%%%%%% */ 
/* -- sliderh bullet style begin  -- */

/* jssor slider bullet navigator skin 03 css */
/*
.jssorb03 div           (normal)
.jssorb03 div:hover     (normal mouseover)
.jssorb03 .av           (active)
.jssorb03 .av:hover     (active mouseover)
.jssorb03 .dn           (mousedown)
*/
.jssorb03 {
	position: absolute;
}
.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
	position: absolute;
	/* size of bullet elment */
	width: 21px;
	height: 21px;
	text-align: center;
	line-height: 21px;
	color: yellow;
	font-size: 12px;
	background: url('../img/b03.png') no-repeat;
	overflow: hidden;
	cursor: pointer;
}
.jssorb03 div { background-position: -5px -4px; }
.jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
.jssorb03 .av { background-position: -65px -4px; }
.jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }

 /*-- sliderh style end -- */
 
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* Styles for the tabs below the big screen of Gallery.html */
/* are modified .jssort16 below                             */	
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* --#region Thumbnail Navigator Skin Begin-- */
/*-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html -- */

	/* jssor slider thumbnail navigator skin 16 css */
	/*
	.jssort16 .p            (normal)
	.jssort16 .p:hover      (normal mouseover)
	.jssort16 .pav          (active)
	.jssort16 .pav:hover    (active mouseover)
	.jssort16 .pdn          (mousedown)
	*/
	.jssort16 {
		position: absolute;
		/* size of thumbnail navigator container */
		width: 900px;
		height: 179px;
	}

		.jssort16 .p {
			position: absolute;
			top: 0;
			left: 0;
			background-color: #989485;
			width: 180px;    /* width of bottom tabs */
			height: 179px;   /* height of bottom tabs, make less than or equal to height of thumbnail navigator container above */
		}

		.jssort16 .t {
			position: absolute;
			top: 0;
			left: 0;
			width: 180px;
			height: 100px;
			border: none;
		}

		.jssort16 .p img {
			filter: alpha(opacity=55);
			opacity: .55;
			transition: opacity .6s;
			-moz-transition: opacity .6s;
			-webkit-transition: opacity .6s;
			-o-transition: opacity .6s;
		}

		.jssort16 .pav img, .jssort16 .pav:hover img, .jssort16 .p:hover img {
			filter: alpha(opacity=100);
			opacity: 1;
			transition: none;
			-moz-transition: none;
			-webkit-transition: none;
			-o-transition: none;
		}

		.jssort16 .pav:hover img, .jssort16 .p:hover img {
			filter: alpha(opacity=70);
			opacity: .7;
		}
		
		/* &&&&&&&&&&&&& below is where set up text in tabs below large screen for Gallery.html */
		/* the style .title and .title_back below sets up the */
		/* text in the tabs with the thumbnail images in Gallery.html*/
		.jssort16 .title, .jssort16 .title_back {
			position: absolute;
			top: 72px;  /* distance that text is below top of tabs with thumbnail images */
			left: 0px;
			width: 180px;   /* width of text in tabs with thumbnail images */
			height: 107px;   /* height of box holding text in tabs with thumbnail images */
			line-height: 32px;  /* height of each line of text */
			text-align: center;
			color: #000;
			font-size:  30px;   /* size of font for text in tabs with thumbnail images */
		}

		.jssort16 .title_back {
			background-color: #fff;
			filter: alpha(opacity=50);
			opacity: .5;
		}

		.jssort16 .pav .title_back {
			background-color: #000;
			filter: alpha(opacity=50);
			opacity: .5;
		}

		.jssort16 .pav .title {
			color: #fff;
		}

		.jssort16 .p.pav:hover .title_back, .jssort16 .p:hover .title_back {
			filter: alpha(opacity=40);
			opacity: .4;
		}

		.jssort16 .p.pdn img {
			filter: alpha(opacity=100);
			opacity: 1;
		}

/* Arrow for Gallery is modified to be yellow by using a different .png file */
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l_b                  (normal)
.jssora05r _b                  (normal)
.jssora05l_b :hover            (normal mouseover)
.jssora05r_b :hover            (normal mouseover)
.jssora05l_b .jssora05ldn      (mousedown)
.jssora05r_b .jssora05rdn      (mousedown)
*/
.jssora05l_b , .jssora05r_b  {
	display: block;
	position: absolute;
	/* size of arrow element */
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: url('../img/a17_b.png') no-repeat;
	overflow: hidden;
}
.jssora05l_b  { background-position: -10px -40px; }
.jssora05r_b  { background-position: -70px -40px; }
.jssora05l_b :hover { background-position: -130px -40px; }
.jssora05r_b :hover { background-position: -190px -40px; }
.jssora05l_b .jssora05ldn { background-position: -250px -40px; }
.jssora05r_b .jssora05rdn { background-position: -310px -40px; }