body { font-family: 'Hind Siliguri', sans-serif; font-size: 16px; background: url(../img/tegels.png); color: #333; }
body, div, ul, li, table { padding: 0; margin: 0; }
ul { list-style-type: none; }
table { font-size: 16px; }

#wrap { width: calc(100% - 40px); padding: 20px; max-width: 800px; margin:0 auto; }

#head { width: 100%; margin:0 auto; position: relative; }
#head img { width: 100%; margin: 0; padding: 0; display: block; }
#head .dummy { z-index: 10; opacity: 0; }
#head .back { z-index: 20; position: absolute; top: 0; left: 0; }
#head .inner { z-index: 30; position: absolute; top: 0; left: 0; }
#head .front { z-index: 40; position: absolute; top: 0; left: 0; }
#head:hover .back, 
#head:hover .front { left: -24%; transition: all ease-in-out 1s; }
#head:hover .inner { left: 24%; transition: all ease-in-out 1s; }  

#block { display:none; z-index: 100; position:fixed; left:0; top: 0; right: 0; bottom: 0; }

#content {width: 100%; margin-top: 20px; }
.post {background: #fff; border: 1px solid #000; padding: 15px; margin-bottom: 20px;}
.post h2 { font-size: 20px; margin: 0; padding: 0; line-height: 20px; }
.post small { font-size: 9px;}
.post .images { float: left; }
.post .images p { float:left; overflow: hidden; }
.post .images p strong { white-space:nowrap; }
.post .images p.h { width: calc(50% - 8px); padding: 4px; }
.post .images p.h img { width: 100%; }
.post .images p.v { width: calc(33% - 8px); padding: 4px; }
.post .images p.v img { width: 100%; }
.post .clear { clear: both; }

.post div.react { margin: 0; padding: 0; position: relative; clear: both; }
.post div.react a { text-decoration: none; color: #333; }
.post div.react a { text-decoration: underline; }
.post div.react ul { display: none; z-index: 110; list-style-type: none; position: absolute; bottom: 25px; padding: 15px; width: calc(100%-30px); border:1px solid #ccc; box-shadow: 0 0 14px #555; background: #fff; border-radius: 10px;}
.post div.react ul:after, .post div.react ul:before {top: 100%; left: 40px; border: solid transparent; border-width: 0px; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.post div.react ul:after { border-top-color: #ffffff; border-width: 10px; margin-left: -10px; }
.post div.react ul:before { border-top-color: #ccc; border-width: 10px; margin-left: -10px; margin-top: 1px; }

.post div.react ul li .by { display:block; float: left; font-weight: bold; height: 20px;}
.post div.react ul li .at { display:block; float: left;font-size: 10px; height: 20px;line-height: 25px; margin-left: 25px; }
.post div.react ul li .msg { display:block; float: left; width: 100%; padding-bottom: 10px;}