/* Sample 1*/
#box1{
	position:absolute;
}
#box1 span{
	display:block;
	float:left;
}

/* Sample 2*/
#box2{
	position:absolute;
}
#box2 span{
	display:block;
	float:left;
}

/* Sample 3*/
#box3{
	position:absolute;
}
#box3 span{
	display:block;
	float:left;
}

/* Sample 4*/
#box4{
	position:absolute;
}
#box4 div{
	width:480px;
	height:240px;
	float:left;
	/*background:#eee;*/
}

#box4 h3, #box4 p, #box4 ul{
	padding:5px 10px;
}
#box4 p{
	text-indent:16px;
}
#box4 img{
	/*width:200px;
	width:150px;*/
	float:left;
	margin:0 4px 0 0; /* 0 10px 10px 15px */
}
#info4{	
	color:#fff;
	cursor:default;
}

h4{
	visibility:hidden;
}

/* Sample 5*/
#box5{
	position:absolute;
	width:240px;
}
#box5 span{
	display:block;
}
#info5{
	bottom:0;
}

/* Sample 6 bloques galeria imagenes portfolio */
#box6a{
	position:absolute;
	width:240px;
}
#box6a span{
	display:block;
}
#handles6_1a{
	float:left;
	margin-top:230px;
	margin-left:-2px;
}
#handles6_2a{
	float:left;margin-left:262px;margin-top:-49px;
}

#box6b{
	position:absolute;
	width:240px;
}
#box6b span{
	display:block;
}
#handles6_1b{
	float:left;
	margin-top:230px;
	margin-left:-2px;
}
#handles6_2b{
	float:left;margin-left:262px;margin-top:-49px;
}

#box6c{
	position:absolute;
	width:240px;
}
#box6c span{
	display:block;
}
#handles6_1c{
	float:left;
	margin-top:230px;
	margin-left:-2px;
}
#handles6_2c{
	float:left;margin-left:262px;margin-top:-49px;
}

#box6d{
	position:absolute;
	width:240px;
}
#box6d span{
	display:block;
}
#handles6_1d{
	float:left;
	margin-top:230px;
	margin-left:-2px;
}
#handles6_2d{
	float:left;margin-left:262px;margin-top:-49px;
}

#box6e{
	position:absolute;
	width:240px;
}
#box6e span{
	display:block;
}
#handles6_1e{
	float:left;
	margin-top:230px;
	margin-left:-2px;
}
#handles6_2e{
	float:left;margin-left:262px;margin-top:-49px;
}

#box6f{
	position:absolute;
	width:240px;
}
#box6f span{
	display:block;
}
#handles6_1f{
	float:left;
	margin-top:230px;
	margin-left:-2px;
}
#handles6_2f{
	float:left;margin-left:262px;margin-top:-49px;
}

#box6g{
	position:absolute;
	width:240px;
}
#box6g span{
	display:block;
}
#handles6_1g{
	float:left;
	margin-top:230px;
	margin-left:-2px;
}
#handles6_2g{
	float:left;margin-left:262px;margin-top:-49px;
}


.mask6{
	position:absolute;
	margin-left:-271px;
	margin-top:0px;
	width:390px;
	height:225px;
	overflow:hidden;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .mask6 { margin-left:0px; }
}

body:nth-of-type(1) span.caja {
       margin-left:0px;
} 

.sample6 .buttons{
	clear:both;
	text-align:center;
}

/* Sample 7*/
#box7{
	position:absolute;
}
#box7 span{
	display:block;
	float:left;
}

#thumbs7{
	position:relative;
	width:486px;
	clear:both;
	height:41px;
	overflow:hidden;
	margin-top:200px;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
	position:absolute;
	top:0;
	width:100%;
	height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
	display:block;
	width:60px;
	height:41px;
	margin:0;
	float:left;
	cursor:pointer;
}
#thumbs7 .thumbs div img{
	width:54px;
	float:right;
}
#thumbs_handles7 span{
	background:url(thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
	width:1200px;
	background:url(thumbs_mask.gif) no-repeat center top;
}

/* Sample 8*/
#box8{
	position:absolute;
}
#box8 div{
	width:480px;
	float:left;
}
#box8 .buttons{
	text-align:left
}
#box8 .next{
	float:right
}
.sample8 .buttons{
	text-align:center;
	clear:both;
}
.sample8 .mask1{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

/* ********************************** */

.thumbs{
	width:272px;
}
.thumbs span{
	width:54px;
	height:41px;
	margin:3px 0;
	cursor:pointer;
}

.thumbs span img{
	display:block;
	width:54px;
	height:41px;
	border:none;
	border:4px solid;
}

.info{
	width:240px;
	height:50px;
	background:#000;
	position:absolute;
}
.info p, .info h4{
	color:#fff;
	padding:3px 8px;
	font-family:Arial;
}

.info h4{
	font-size:14px;	
}
.info h4 a{
	float:right;
	background:#fff;
	color:#000;
	font-size:10px;
	padding:0 3px;
	text-decoration:none
}

.mask1{
	position:relative;
	width:480px;
	height:180px;
	overflow:hidden;
}
.mask2{
	position:relative;
	width:240px;
	height:180px;
	overflow:hidden;
}
.mask3{
	position:relative;
	width:868px;
	height:315px; /* 240px */
	overflow:hidden;
	margin-bottom:-5px;
}

span img{
	display:block;
	border:none;
}

pre{background:#666; color:#fff; padding:10px; margin:10px; height:auto; overflow:auto; font:12px Verdana,Courier,sans-serif}
* html pre {width:100%}

.description{padding:16px;margin:10px 0;background:#eee}

.sample{padding:5px; margin:4px 0 10px 0; border:1px solid #e1e1e1}
h4.stitle{color:#666;margin:0 0 5px 0}

.links {padding:10px;margin-top:20px}
.links a{font-size:14px;color:#0080FF;text-decoration:none}
.links a:hover{font-weight:bold}

#cont{width:550px;margin:0 auto;background:#fff;text-align:left;padding:20px}

.buttons{padding:5px;}
.buttons span{color:#0080FF;padding:4px 9px;cursor:pointer;font:10px Verdana} /* 0 5px */
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}




a.f img.min {border:4px solid #fff;width:54px;height:41px}
		a.f span {visibility:hidden;color:white;text-align:center;position:absolute; top:10px;left:3px;visibility:hidden;z-index:10;}

		a.f:hover img.min {z-index:100}
		a.f:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
		a.f:hover span {visibility:visible;z-index:100;}
		a.f:hover span img {visibility:visible;z-index:100;}

		a.f:focus span , a:active span  {visibility:visible;z-index:10;}
		a.f img.fotos {width:390px;height:225px;}
		a.f{text-decoration:none;display:inline}
		
		
		a.f2 img.min2 {border:4px solid #fff;width:54px;height:41px}
		a.f2 span {visibility:hidden;color:white;text-align:center;position:absolute; top:10px;left:874px;visibility:hidden;z-index:10;}

		a.f2:hover img.min2 {z-index:100}
		a.f2:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
		a.f2:hover span {visibility:visible;z-index:100;}
		a.f2:hover span img {visibility:visible;z-index:100;}

		a.f2:focus span , a.f2:active span  {visibility:visible;z-index:10;}
		a.f2 img.fotos2 {width:390px;height:225px;}
		a.f2{text-decoration:none;display:inline}
		
		
		a.f3 img.min3 {border:4px solid #fff;width:54px;height:41px}
		a.f3 span {visibility:hidden;color:white;text-align:center;position:absolute; top:10px;left:1743px;visibility:hidden;z-index:10;}

		a.f3:hover img.min3 {z-index:100}
		a.f3:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
		a.f3:hover span {visibility:visible;z-index:100;}
		a.f3:hover span img {visibility:visible;z-index:100;}

		a.f3:focus span , a.f3:active span  {visibility:visible;z-index:10;}
		a.f3 img.fotos3 {width:390px;height:225px;}
		a.f3{text-decoration:none;display:inline}
		
		
		a.f4 img.min4 {border:4px solid #fff;width:54px;height:41px}
		a.f4 span {visibility:hidden;color:white;text-align:center;position:absolute; top:10px;left:2613px;visibility:hidden;z-index:10;}

		a.f4:hover img.min4 {z-index:100}
		a.f4:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
		a.f4:hover span {visibility:visible;z-index:100;}
		a.f4:hover span img {visibility:visible;z-index:100;}

		a.f4:focus span , a.f4:active span  {visibility:visible;z-index:10;}
		a.f4 img.fotos4 {width:390px;height:225px;}
		a.f4{text-decoration:none;display:inline}
		
		
		a.f5 img.min5 {border:4px solid #fff;width:54px;height:41px}
		a.f5 span {visibility:hidden;color:white;text-align:center;position:absolute; top:10px;left:3482px;visibility:hidden;z-index:10;}

		a.f5:hover img.min5 {z-index:100}
		a.f5:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
		a.f5:hover span {visibility:visible;z-index:100;}
		a.f5:hover span img {visibility:visible;z-index:100;}

		a.f5:focus span , a.f5:active span  {visibility:visible;z-index:10;}
		a.f5 img.fotos5 {width:390px;height:225px;}
		a.f5{text-decoration:none;display:inline}
		
		
		a.f6 img.min6 {border:4px solid #fff;width:54px;height:41px}
		a.f6 span {visibility:hidden;color:white;text-align:center;position:absolute; top:10px;left:4354px;visibility:hidden;z-index:10;}

		a.f6:hover img.min6 {z-index:100}
		a.f6:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
		a.f6:hover span {visibility:visible;z-index:100;}
		a.f6:hover span img {visibility:visible;z-index:100;}

		a.f6:focus span , a.f6:active span  {visibility:visible;z-index:10;}
		a.f6 img.fotos6 {width:390px;height:225px;}
		a.f6{text-decoration:none;display:inline}
		
		
		a.f7 img.min7 {border:4px solid #fff;width:54px;height:41px}
		a.f7 span {visibility:hidden;color:white;text-align:center;position:absolute; top:10px;left:5223px;visibility:hidden;z-index:10;}

		a.f7:hover img.min7 {z-index:100}
		a.f7:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
		a.f7:hover span {visibility:visible;z-index:100;}
		a.f7:hover span img {visibility:visible;z-index:100;}

		a.f7:focus span , a.f7:active span  {visibility:visible;z-index:10;}
		a.f7 img.fotos7 {width:390px;height:225px;}
		a.f7{text-decoration:none;display:inline}