
/**
* list: common styles and list view
*/
.list-common-styles-and-list-view-mixin(){
	
	.jplist{
		.block {
			width: 840px;
		}

		.title {
			font-size: 16px;
			color: red;
		}

		.date {
			float: right;
			color: @brown1;
		}

		.like,
		.keywords{
			color: @brown1;
		}

		.price{
			color: @blue2;
		}
		
		.list {
			background: #fff;
			margin: 30px 0;

			.img {
				width: 15%;
				margin: 0 1%;
				float:left;
				font-size:0;
				text-align:center;

				img {
					max-width:90%;
					border-radius: 3px;
				}
			}

			.block {
				float:right;
				width:82%;
				margin-right: 1%;

				p {
					margin:0;
					padding:0 15px 5px 0;
				}
			}

			.list-item {
				margin-top:15px;
				float: left;
			}
			
			.list-item-link{
				font-weight: normal;
				color: @dark-grey;
				
				.list-item{
					transition: all 0.25s ease 0s;
					margin-top: 0;
					padding-top: 15px;
				}
			}
			
			.list-item-link:hover{
				.list-item{
					background: @light-grey6;
				}
			}
		}
		
		.box-header{
			background:@yellow1;
			border-bottom: 1px solid @yellow2;
			border-radius: 3px 3px 0;
			margin-top: 20px;
			padding: 5px 0;
		}
		
		@media only screen and (max-width: 800px){
			
			.list {			
				.block,
				.img{
					width: 90%;
					margin: 0 5%;
				}
				
				.img{
					border-radius: 3px;
					font-size: 0;
					line-height: 0;
					padding: 15px 0;
					margin-bottom: 10px;
					
					img{
						max-width: 100%;
						border-radius: 3px;
						border: 1px solid @black1;
					}
				}
			}
			
		}
	}
}

/**
* grid view
*/
.list-grid-view-mixin(){
	
	.jplist-grid-view{

       .list-item {

           width: 20%;
           overflow: hidden;
           margin: 20px 0;

          .img{
              width: 100%;
              text-align: center;
			  margin: 0;
          }

          .desc{
              display: none;
          }

          .block{

              width: 100%;
              text-align: center;

              p{
                  padding: 0.3em 0 0 0;
              }

              .title{
                  line-height: 1.5em;
                  font-size: 1em;
              }
          }

          .date{
              float: none;
          }
       }
    }
	
	@media only screen and (min-width: 600px) and (max-width: 800px){
		
		.jplist-grid-view{
			.list-item{				
				.img{
					width: 90%;
					margin: 0 5%;
				}
			}
		}
	}
	
	@media only screen and (max-width: 600px){
		
		.jplist-grid-view{
			.list-item{
				width: 100%;
				
				.img{
					width: 90%;
					margin: 0 5%;
				}
			}
		}
	}
}

/**
* list thumbs view
*/
.views-thumbs-view-mixin(){

	.jplist-thumbs-view{
		
		.list-item {

           width: 50%;
           overflow: hidden;
           margin: 20px 0;
		   position: relative;

          .img{
              width: 100%;
              text-align: center;
			  vertical-align: bottom;
			  
			  img{
					min-width: 90%;
					vertical-align: bottom;
			  }
          }

          .desc{
              display: none;
          }

          .block{

              width: 100%;
              text-align: center;
			  position: absolute;
			  background: #fff;
			  opacity: 0.6;
			  bottom: 0;

              p{
                  padding: 0.3em 0 0 0;
				  font-weight: bold;
              }

              .title{
                  line-height: 1.5em;
                  font-size: 1em;
              }
          }

          .date{
              float: none;
          }
       }
	}
	
	
	@media only screen and (max-width: 800px){
		
		.jplist-thumbs-view{
			.list {			
				
				.img{
					background: #fff;
					border: 0;
					padding: 0;
					margin: 0 5%;					
					width: 90%;
					overflow: hidden;
										
					img{
						border-radius: 0;
						border: 0;						
					}
				}
				
				.block{
					margin: 0 5%;					
					width: 90%;
					
					p{
						padding: 0;
						text-align: center;
					}
				}
			}
		}
		
	}
	
	@media only screen and (max-width: 600px){
		
		.jplist-thumbs-view{
			.list {			
				
				.date,
				.like{
					display: none;
				}
			}
		}
	}
}

/**
* mixin calls
*/
.list-common-styles-and-list-view-mixin();
.list-grid-view-mixin();
.views-thumbs-view-mixin();