Светлый вид материалов для uCoz от Dimanik

<article class="post">  
  <div class="visual">  
  <a href="$ENTRY_URL$" title="$TITLE$" itemprop="url"><img itemprop="image" src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a>  
  <div class="v-panel"><a href="$COMMENTS_URL$" class="v-count" title="Комментарии к $TITLE$">$COMMENTS_NUM$</a>  
  <div class="p-description">  
  <em class="date">$DATE$</em>  
  <span class="autor"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span><span class="v-count1" title="Количество просмотров"></span>  
  </div>  
  </div>  
  </div>  
  <div class="description">  
  <h1 class="list-post-title"><a rel="bookmark" href="$ENTRY_URL$" title="$TITLE$" itemprop="name">$TITLE$</a></h1>  
  <div itemprop="description"><p style="text-align: justify;">$MESSAGE$</p></div>  
  <span class="bg-shadow"> </span>  
  </div>  
  <div class="more-box">  
<a href="$ENTRY_URL$" class="btn-more">далее</a>  
  </div>  
</article>

.post{height: 1%;background: #fff;border: 1px solid #ccc;margin: 0 -1px 24px -1px;padding: 0 24px 0 0;position: relative;z-index: 7}  
.post:after{content: "";clear: both;display: block}  
.post .visual{float: left;width: 400px;height: 300px;position: relative;border-right: 1px solid #e0e0e0;margin: 0 24px 0 0}  
.post .visual img{float: left;width: 100%;width: 400px;height: 300px}  
.post .v-panel{position: absolute;left: 0;right: 0;bottom: 0;font-family: "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;font-size: 13px;line-height: 28px;color: #fff;background: url(http://zornet.ru/Ajaxoskrip/Forma_skriptov/tygsa/hb_p_bg1.png);padding: 0 0 0 14px}  
.post .v-panel .date{font-style: normal;float: left;min-width: 64px}  
.post .v-panel .autor{float: left}  
.post .v-panel .autor a{color: #fff}  
.post .v-panel .v-count{float: right;width: 56px;font-size: 17px;line-height: 28px;text-align: center;background: #4ebaf6}  
.post .v-panel .v-count,.post .v-panel .v-count a{color: #fff}  
.post .v-panel .v-count1{float: right;color: #babdbe;margin: 0 7px 0 0}  

.post .description{overflow: hidden;padding: 24px 0 0;height: 227px;position: relative;font-size: 13px;line-height: 18px;font-family: "Segoe UI", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;height: 224px}  
@media screen and (max-width: 699px){  
  .post .description{font-family: "Segoe UI", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif}}  
.post .list-post-title,.post h2{font-size: 24px;line-height: 36px;font-family: "Segoe UI", "Helvetica Neue", Helvetica, Tahoma, sans-serif;font-weight: bold;margin: 0 0 5px;min-height: 22px;font-size: 19px;line-height: 20px  
}  
@media screen and (max-width: 699px){  
  .post .list-post-title,.post h2{font-family: "Segoe UI", "Helvetica Neue", Helvetica, Tahoma, sans-serif}  
}  
.post .list-post-title a,.post h2 a{color: #000}  
.post .list-post-title a:hover,.post h2 a:hover{color: #0072bc;text-decoration: none}  
.post p{margin: 0;color: #000}.post .more-box{position: absolute; z-index: 3;bottom: 0;right: 24px}  
.post .btn-more{float: left;font-family: "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;font-size: 17px;line-height: 26px;color: #fff;background: #babdbe;padding: 0 12px 2px}  
@media screen and (max-width: 699px){.post .btn-more{font-family: "Segoe UI", "Helvetica Neue", Helvetica, sans-serif}  
}  
.post .btn-more:hover{text-decoration: none;background: #4ebaf6}  
.post .meta{font-size: 10px;line-height: 28px;font-family: "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;color: #858585;float: right;text-align: right;height: 28px;overflow: hidden;width: 363px}

h1 {  
  overflow: hidden;  
  position: relative;  
  margin: 0;  
  text-align: center;  
  white-space: nowrap;  
}  
h1:before,  
h1:after {  
  content: '';  
  display: inline-block;  
  position: relative;  
  top: -1px;  
  width: 50%;  
  height: 1px;  
  vertical-align: middle;  
  background: black;  
}  
h1:before {  
  left: -10px;  
  margin-left: -50%;  
}  
h1:after {  
  left: 10px;  
  margin-right: -50%;  
}