/* Geral para quadrados */
.quadrado_link {
	width: 100%;
	height: 100%;
}
.quadrado_link:hover .face {
	visibility: hidden;
}
.quadrado_link:hover .vback, .quadrado_link:hover .infoback {
	visibility: visible;
	display: block;
}
.face {
	position: absolute;
	width: 100%;
	height: 100%;
}
/* ---- */
/* Back dos quadrados horizontais*/
.face.hback {
	display: none;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
	overflow: hidden;
}
/* ---- */
/* Back dos quadrados verticais*/
.face.vback {
	width: 80px;
	height: 80px;
	display: none;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
/* ---- */

/* Quadrado horizontal 2 */
.h2_quadrado {
	position: relative;
	width: 201px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	cursor: pointer;
	overflow: hidden;
}
.h2_quadrado_link {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.h2_quadrado_link:hover .face {
	visibility: hidden;
}
.h2_quadrado_link:hover .hback {
	visibility: visible;
	display: block;
}

.h2_btn {
	width: 181px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
/* ---- */
/* Quadrado horizontal 3 */
.h3_quadrado {
	position: relative;
	width: 302px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	overflow: hidden;
}
.h3_quadrado_link:hover .face {
	visibility: hidden;
}
.h3_quadrado_link:hover .hback {
	visibility: visible;
	display: block;
}

.h3_quadrado_link {
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.h3_btn {
	width: 282px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
/* ---- */
/* Quadrado horizontal 4 */
.h4_quadrado {
	position: relative;
	width: 403px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	cursor: pointer;
	overflow: hidden;
}
.h4_quadrado:hover .liback {
	display: block;
	visibility: visible;
	width: 404px;
}
.h4_quadrado_link {
	width: 100%;
	height: 100%;
}
.h4_btn {
	width: 383px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
/* ---- */

/* Quadrado vertical 1 */
.v1_quadrado {
	position: relative;
	width: 100px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	cursor: pointer;
}
.v1_btn {
	width: 80px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
/* ---- */


/* Quadrado horizontal ARTISTA */
.a_quadrado {
	position: relative;
	width: 201px;
	height: 101px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	cursor: pointer;
}
.a_quadrado_link {
	width: 100%;
	height: 100%;
}
.a_btn {
	width: 181px;
	height: 81px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: none;
}
.face.artistaback {
	display: none;
	padding: 10px;
	background-color: #00FFF8;
	font-size: 18px;
	height: 80px;
	width: 181px;
}
/* Quadrado pequeno ARTISTA */
.a1_quadrado {
	position: relative;
	width: 100px;
	height: 100px;
	z-index: 1;
	float: left;
	cursor: pointer;
	overflow: hidden;
}
.a1_quadrado_link {
	width: 100%;
	height: 100%;
}
.a2_quadrado_link {
	width: 100%;
	height: 100%;
}
.artistas_artista:hover .artistaback, .artistas_artista:hover .a1back, .artistas_artista:hover .a2back {
	visibility: visible;
	display: block;
}
.artistas_artista:hover .a1_btn, .artistas_artista:hover .a_btn {
	display: none;
	visibility: hidden;
}
.a1_btn {
	width: 81px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: none;
}
.face.a1back {
	display: none;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
	width: 100px;
}
.face.a2back {
	display: none;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
	width: 99px;
	margin-left: 1px;
}
/* ---- */

/* LINKS */
.li_quadrado_link {
	width: 100%;
	height: 100%;
}
.li_quadrado_link:hover .liback {
	visibility: visible;
	display: block;
}
.face.liback {
	width: 181px;
	height: 80px;
	display: none;
	padding: 10px;
}
.li_btn {
	width: 181px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
/* ---- */

/* + INFO */
.info_btn {
	width: 80px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
.face.infoback {
	width: 80px;
	height: 80px;
	display: none;
	padding: 10px;
}
/* ---- */