/*=============================================*\
 Some styles to show off masonry layout
\*=============================================*/
.picture-item {
  height: 220px;
  margin-top: 24px;
}
.picture-item.shuffle-item {
  margin-left: 0;
  /* shuffle items shouldn't have a left margin*/
}
.picture-item.picture-item--h2 {
  height: 464px;
  /* 2x the height + 1 gutter */
}
.picture-item.span6 .rightcol{
  width: 275px;
  margin-left:15px;
  float:left;

}

.picture-item .picture-item__inner {
  background: #fff;
  height: 100%;
  overflow: hidden;
  border:1px solid #f8d6c9;
  /*Don't add position relative here*/
}

.picture-item  .picture-item__profile{
  position:absolute;
  width:48px;
  height:48px;
  overflow:hidden;
  bottom:5px;
  right:5px;
  background-color:#eee;
  /*Don't add z-index here, will fail in box fade out in ie8*/
}

.picture-item  .picture-item__profile img{margin:0;}

.picture-item .picture-item__username a{
  position:absolute;
  bottom:20px;
  right:70px;
  color:#c0702e;
}

.picture-item .picture-item__blogthumb{width:260px; height:205px; overflow:hidden;margin:6px;}
.picture-item .picture-item__blogthumb img{ width:100%; height:auto;}

.picture-item img {
  display: block;
  /* width: 100%; */
  /*height: auto;*/
}
.picture-item__title{
  width:100%;
  padding-top:10px;
}

.picture-item__title a, .picture-item__title a:link, .picture-item__title a:visited, .picture-item__title a:active{
  color:#c0702e;
  font-size:1.4em;
  font-family: "Microsoft JhengHei","微軟正黑體","Apple LiGothic Medium","蘋果儷中黑";
}

.picture-item .picture-item__details,
.picture-item .picture-item__description {
  padding: 1em;
}
.picture-item .picture-item__description {
  margin: 0;
  padding-top: 0;
  font-size:1.1em;
}
.picture-item .picture-item__tags {
  margin: 0;
}

/*
  Shuffle needs either relative or absolute positioning on the container
  It will set it for you, but it'll cause another style recalculation and layout.
  AKA worse performance - so just set it here
 */
.shuffle--container {
  position: relative;
  overflow: hidden;
}

.shuffle--fluid .shuffle__sizer {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

/* Animate in styles */
.shuffle--animatein {
  overflow: visible;
}

.shuffle--animatein .picture-item__inner {
  opacity: 0;
  -webkit-transform: translate(0, 220px);
  -moz-transform: translate(0, 220px);
  -ms-transform: translate(0, 220px);
  -o-transform: translate(0, 220px);
  transform: translate(0, 220px);
}

.shuffle--animatein .picture-item__inner--transition {
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}

.shuffle--animatein .picture-item.in .picture-item__inner {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}