
/**
* ul/li list: common styles and list view
*/
.ul-li-common-styles-and-list-view-mixin(){

    .ul-li-list{
        background: #fff;
        padding-top: 20px;
        padding-bottom: 20px;
		margin: 20px 0;

        .list-item{
            float: left;
            width: 100%;
        }

        .list-box{
            width: 100%;
            float: right;
        }

        .img{
            float: left;
            margin-right: 20px;
			width: 15%;
			
			img{
				max-width:90%;
				border-radius: 3px;
			}
        }

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

        .desc{
            text-align: justify;
        }

        p{
            margin:0;
            padding:0 25px 5px 0;
        }
    }
	
	@media only screen and (max-width: 800px){
		
		.ul-li-list{
			
			list-style: none;
			padding: 0;
			margin: 20px 0;
			
			.block,
			.img{
				width: 90%;
				margin: 0 5%;
			}
			
			.img{
				border-radius: 3px;
				font-size: 0;
				line-height: 0;
				padding: 15px 0;
				margin-bottom: 10px;
				text-align: center;
				
				img{
					max-width: 100%;
				}
			}
		}
	}
}

/**
* ul li: grid view
*/
.ul-li-grid-mixin(){
	
	.jplist-grid-view{
		.ul-li-list{
			
			padding: 0;
			margin: 20px 0;
			list-style: none;
			
			.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{
			.ul-li-list{
				.list-item{
					.img{
						width: 90%;
						margin: 0 5%;
					}
				}
			}
		}
	}
	
	@media only screen and (max-width: 600px){
		
		.jplist-grid-view{
			.ul-li-list{				
				
				.list-item{
					width: 100%;
					
					.img{
						width: 90%;
						margin: 0 5%;
					}
				}
			}
		}
	}
}

/**
* ul li thumbs view
*/
.ul-li-thumbs-mixin(){

	.jplist-thumbs-view{
		
		.ul-li-list{
			list-style: none;
			padding: 0;
			margin: 20px 0;
		}
		
		.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{
			.ul-li-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{
			.ul-li-list{			
				
				.date,
				.like{
					display: none;
				}
			}
		}
	}
}

.ul-li-common-styles-and-list-view-mixin();
.ul-li-grid-mixin();
.ul-li-thumbs-mixin();