/* CSS Document */

/* CONTAINER-THUMBNAIL-USERS */
.container-thumbnail-discs { padding-bottom:2px !important;  }
.container-thumbnail-discs .discs { padding:10px 3px 3px 3px !important;  }
.container-thumbnail-discs .discs .photo { position: relative; width:33.333333%; float:left; }
.container-thumbnail-discs .discs .photo:before { content: ""; display: block; padding-top: 100%; }
.container-thumbnail-discs .discs .photo img { position:  absolute; top: 0; left: 0; bottom: 0; right: 0; width:100%; height:100%; }


.container-thumbnail-stores { padding-bottom:2px !important;  }
.container-thumbnail-stores .stores { padding:10px 3px 3px 3px !important;  }
.container-thumbnail-stores .stores .photo { position: relative; width:25%; float:left; }
.container-thumbnail-stores .stores .photo:before { content: ""; display: block; padding-top: 100%; }
.container-thumbnail-stores .stores .photo img { position:  absolute; top: 0; left: 0; bottom: 0; right: 0; width:100%; height:100%; }


.container-thumbnail-users { padding-bottom:2px !important;  }
.container-thumbnail-users .users { padding:10px 3px 3px 3px !important;  }
.container-thumbnail-users { padding:10px 0 0 0 !important; }
.container-thumbnail-users .users .photo { position: relative; width:20%; float:left; }
.container-thumbnail-users .users .photo:before { content: ""; display: block; padding-top: 100%; }
.container-thumbnail-users .users .photo img { position:  absolute; top: 0; left: 0; bottom: 0; right: 0; width:100%; height:100%; }


/*.box{
	position: relative;
	width: 50%;		 desired width 
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	 initial ratio of 1:1
}*/


@media(max-width:479px) {
	.container-thumbnail-discs .discs .photo { position: relative; width:50%; float:left; }
	
	.container-thumbnail-stores .stores .photo { position: relative; width:33.333333%; float:left; }
	
	.container-thumbnail-users .users .photo { position: relative; width:20%; float:left; }
}

@media(max-width:767px) and (min-width: 480px){
	.container-thumbnail-discs .discs .photo { position: relative; width:25%; float:left; }
	
	.container-thumbnail-stores .stores .photo { position: relative; width:20%; float:left; }
	
	.container-thumbnail-users .users .photo { position: relative; width:12.5%; float:left; }
}

@media(max-width:991px) and (min-width: 768px){
	.container-thumbnail-discs .discs .photo { position: relative; width:50%; float:left; }
	
	.container-thumbnail-stores .stores .photo { position: relative; width:50%; float:left; }
	
	.container-thumbnail-users .users .photo { position: relative; width:33.333333%; float:left; }
}

@media(max-width:1199px) and (min-width: 992px) {
	.container-thumbnail-discs .discs .photo { position: relative; width:50%; float:left; }
	
	.container-thumbnail-stores .stores .photo { position: relative; width:33.333333%; float:left; }
	
	.container-thumbnail-users .users .photo { position: relative; width:25%; float:left; }
}



/* CONTAINER-COMMENTS */
.container-comments .input-comment { padding:20px 15px; }
.container-comments .input-comment textarea { width:100%; height:100px; border:1px solid #999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; resize:none; } 
.container-comments .input-comment .button { margin:20px 0 10px 0; }

.container-comments .comment-list { padding:0 10px; }
.container-comments .comment-list .comment-user { padding:20px 0 20px 0; border-bottom:1px solid #CCC;}
.container-comments .comment-list .comment-user:first-child { padding:40px 0 20px 0; }
.container-comments .comment-list .comment-user:last-child { border:none; }
.container-comments .comment-list .comment-user .photo img{ width:100%; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
.container-comments .comment-list .comment-user .user-comment .user { font-size:16px; padding-bottom:10px; }
.container-comments .comment-list .comment-user .user-comment .comment { font-size:14px; }
.container-comments .comment-list .comment-user .footer { margin-top:20px; }
.container-comments .comment-list .comment-user .footer .date { font-size:14px; color:#58b0ed; font-style:italic; }
.container-comments .comment-list .comment-user .footer .like{ font-size:16px; font-weight:lighter;}


/* CONTAINER-TRACKLIST */
.container-tracklist .tracks p { line-height:14px; }
.container-tracklist .tracks p:first-child{ padding:20px 0 0 0;}


/* CONTAINER-STORE-MAP */
.container-store-map .map { padding:20px 15px; }
.container-store-map .map iframe { width:100%; height:300px; }