@charset "utf-8";
/*::::: generic rules ::::::::*/
ul,li{
list-style-type:none;
margin:0;
padding:0;
}
img{
border:none;
margin:0;
padding:0;
}
h2{
	font-size:18px;
	width:90%;
	font-weight:normal;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
h3{
	color: #696;
	font-size: 18px;
	font-weight: bold;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #D2C8B0;
	padding-top: 5px;
	padding-bottom: 3px;
	background-color: #FFFFEC;
	padding-left: 5px;
}
.advertise{
margin:0;
padding:5px;
margin-top:10px;
margin-left:30px;
color:red;
font-weight:700;
font-size:11px;
border:1px solid #ccc;	
}
.title{ font-size:10px;}
.expl{
margin:0;
padding:5px;
margin-top:10px;
margin-left:30px;
color:black;
font-weight:300;
font-size:11px;
border:1px solid #ccc;
}
/*:::: DEMO PAGE, LIST IMAGES rules (REMOVE OR CHANGE) ::::*/

.gallery, .gallery_in{
	float:left;
	padding:0;
	margin:0;
}
.thumbs_all{
	width: 700px;
	height: 350px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
.thumbs_all img{
	padding:1px;
	float: left;
}
.thumbs_all li{
	float:left;
}
span.thumbs_all {
	float:left;
	margin-left:40px;
}
.thumbs_all  a{float:left; border:1px solid #fff;height:102px;width:102px; cursor:url(http://www.pirolab.it/pirobox/css_pirobox/cursor/open.cur), pointer;}
.thumbs_all  a:hover{
	float:left;
	border:1px solid #696;
}
.highlite{color:#000; font-weight:700;}

/*::::: PIROBOX RULES::::::::*/

.bg_thumbs{
background:#fff;/*::::: you can change overlay background-color here ::::::::*/
position:fixed!important;
position:absolute;
top:0;
left:0!important;
left:-17px;
width:100%;
margin:0;
padding:0;
visibility:hidden;
z-index:1001;
display:none;
}

.thumbs_all2{
	width: 800px;
	height: 120px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
	padding-left: 20px;
}
.thumbs_all2 img{padding:1px;}
.thumbs_all2 li{
	float:left;
	margin-left:2px!important;
	margin-left:20px;
}
span.thumbs_all2 {
	float:left;
	margin-left:5px!important;
	margin-left:40px;
}
.thumbs_all2  a{float:left; border:1px solid #fff;height:102px;width:102px; cursor:url(http://www.pirolab.it/pirobox/css_pirobox/cursor/open.cur), pointer;}
.thumbs_all2  a:hover{ float:left;border:1px solid #ccc;}
.highlite{color:#000; font-weight:700;}

/*::::: PIROBOX RULES::::::::*/

.bg_thumbs2{
background:#fff;/*::::: you can change overlay background-color here ::::::::*/
position:fixed!important;
position:absolute;
top:0;
left:0!important;
left:-17px;
width:100%;
margin:0;
padding:0;
visibility:hidden;
z-index:1001;
display:none;
}




.unloader, .img_box,.middle_l, .middle_r{
background:#000;/*::::: you can change img_box background-color here ::::::::*/
}

/*:::: YOU DON'T NEED TO CHANGE NOTHING ELSE IN THE CSS :::*/

/*:::: PREV/NEXT inside rules ::::*/
.box_next_in{position:absolute;top:2px!important;top:2px;height:90%;width:74px;right:2px!important;right:0px;overflow:hidden;z-index:1010;background:none;display:none;}
a.next_in{position:absolute;z-index:1011;height:100%;width:74px;right:-74px;text-indent:-999em;display:block;background:url(next_in_b.png) top right no-repeat!important;background:url(next_in_b.gif) top right no-repeat;}
.box_previous_in{position:absolute;top:2px!important;top:2px;z-index:100012;height:90%;left:2px!important;left:2px;width:74px;overflow:hidden;background:none;display:none;}
a.previous_in{position:absolute;z-index:100013;left:-74px;height:100%;width:74px;text-indent:-999em;display:block;background:url(prev_in_b.png) top left no-repeat!important;background:url(prev_in_b.gif) top left no-repeat;}

/*:::: PREV/NEXT outside rules ::::*/

.box_next{position:fixed!important;position:absolute;top:0;height:100%;width:81px;right:0px!important;right:16px;overflow:hidden;z-index:1006; visibility:hidden}
a.next{position:fixed!important;position:absolute;text-indent:-999em;display:block;top:0;height:100%;width:81px;right:-81px;z-index:1007;background:url(next_o_b.gif) center right no-repeat;}
a:hover.next{background:url(next_o_b_h.gif) center right no-repeat;}
.box_previous{position:fixed!important;position:absolute;top:0;height:100%;left:0;width:81px;overflow:hidden;z-index:1008;visibility:hidden}
a.previous{z-index:1009;position:fixed!important;position:absolute;top:0;height:100%;width:81px;left:-81px;text-indent:-999em;display:block;background:url(prev_o_b.gif) center left no-repeat;}
a:hover.previous{background:url(prev_o_b_h.gif) center left no-repeat;}

/*:::: END PREV/NEXT rules ::::*/


/*:::: IMG_BOX rules ::::*/

.img_box{position:absolute;margin-top:-2px;margin-left:-2px;width:50px;height:50px;visibility:hidden; overflow:hidden;z-index:1002;}
.img_box img{float:left;position:relative; z-index:1100;border:none;padding:0;z-index:1003; cursor:url(http://www.pirolab.it/pirobox/css_pirobox/cursor/close.cur), pointer;}

/*:::: END IMG_BOX rules ::::*/

/*:::: CLOSE, LOADING rules ::::*/

.thumbs_close{position:absolute;bottom:0;right:0;height:18px;width:81px;color:#fff;cursor:pointer;margin:0 10px 10px 0!important;margin:0 12px 10px 0;z-index:100014;background:url(close_b.gif) center right no-repeat;visibility:hidden;}
.loader{position:fixed!important;position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-33px;width:80px;height:80px;display:block;z-index:1007; background:url(bg_loader_b.png) center no-repeat!important; background:url(bg_loader_b.gif) center no-repeat;}
.loader span{position:absolute;width:80px;height:80px;}
.unloader{visibility:visible;}
.thumbs{visibility:hidden;}

.caption{position:absolute;bottom:0;left:0;margin:0 0 8px 5px!important;margin:0 0 8px 5px; color:#fff;visibility:hidden;display:block; padding:3px; z-index:100013; cursor:text;}
.caption p{ display:block; margin:0;padding:0; margin-right:88px;}
.pre{visibility:hidden;display:none;}
.end{display:none;}
.begin{display:none;}

/*::::, ROUNDED CORNERS ::::*/

.all{position:fixed!important;position:absolute;top:50%;left:50%;margin-top:-40px;margin-left:-45px;width:80px;height:80px;padding:10px;z-index:1002;}
.t_l{position:absolute; height:30%; width:90%;padding:0!important;padding:10px; top:0; left:0; background: url(bg_b.png) top left no-repeat!important;background: url(bg_b.gif) top left no-repeat;}
.t_r{position:absolute; height:30%; width:30%; top:0; right:0; background: url(bg_b.png) top right no-repeat!important;background: url(bg_b.gif) top right no-repeat;}
.middle_l{ position:absolute;width:50%;height:80%;left:0; top:10px;z-index:998;}
.middle_r{ position:absolute;width:50%;height:80%;right:0; top:10px;z-index:999;}
.t_l_b{position:absolute; height:80%; width:91%;padding:0!important;padding:10px; bottom:0; left:0; background: url(bg_b.png) bottom left no-repeat!important;background: url(bg_b.gif) bottom left no-repeat;}
.t_r_b{position:absolute; height:90%; width:40%; bottom:0; right:0; background: url(bg_b.png) bottom right no-repeat!important;background: url(bg_b.gif) bottom right no-repeat;}

.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 10px 0;
	position: relative;
	width: 100%;
	height: auto;
		}

		/* These 2 lines specify style applied while slider is loading */
.csw {
	width: 100%;
	height: auto;
	background: #fff;
	overflow: scroll
}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position:relative;
	overflow: hidden; /* this is the border. should have the same value for the links */
	margin: auto;
	width:800px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height:auto;
	clear: both;
	background: #fff;
}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}
		
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height:auto;
			position: relative;
			width:800px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px;
}






.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
}
		
.stripNav ul { /* The auto-generated set of links */
			list-style: none;
}
		
.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}
		
.stripNav a { /* The nav links */
	font-size: 12px;
	font-weight:normal;
	text-align: center;
	line-height: 32px;
	background:#693;
	color:#666;
	text-decoration: none;
	display: block;
	padding: 0 16px;
}
		
.stripNav li.tab1 a {background: #E6E6E6;}
.stripNav li.tab2 a { background: #E6E6E6; }
.stripNav li.tab3 a { background: #E6E6E6;}
.stripNav li.tab4 a { background: #E6E6E6;}
.stripNav li.tab5 a { background: #E6E6E6;}
.stripNav li.tab6 a { background: #E6E6E6; }
.stripNav li.tab7 a { background: #E6E6E6; }
.stripNav li.tab8 a { background: #E6E6E6;}
.stripNav li.tab9 a { background: #E6E6E6;}
.stripNav li.tab10 a { background: #E6E6E6; }
.stripNav li.tab11 a { background: #E6E6E6;}
.stripNav li.tab12 a { background: #E6E6E6;}
.stripNav li.tab13 a { background: #E6E6E6;}
.stripNav li.tab14 a { background: #E6E6E6;}
.stripNav li.tab15 a { background: #E6E6E6;}
.stripNav li.tab16 a { background: #E6E6E6;}
.stripNav li.tab17 a { background: #E6E6E6;}
.stripNav li a:hover {
	background: #960;
	color: #FFF;
}
		
.stripNav li a.current {
			background: #693;
			color:#FFF;
}
		
.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
}
		
.stripNavL a, .stripNavR a {
			display: block;
			height: 70px;
			width: 40px;
}
		
.stripNavL {
			left: 0;
}
		
.stripNavR {
			right: 0;
}
		
.stripNavL {
			background: url("images/arrow-left.gif") no-repeat center;
}
		
.stripNavR {
			background: url("images/arrow-right.gif") no-repeat center;
}
p.intro { 
border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% ;
}
		
p#cross-links { 
text-align: center 
}
		
p#cross-links {
	border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px;
	}
		
noscript p, noscript ol { 
color: #a00; font-size: 13px; line-height: 1.4em; text-align: left; 
}
noscript a { 
color: #a00; text-decoration: underline;
}
noscript ol { 
margin-left: 25px; 
}
a:focus { outline:none }

