demo online [You must be registered and logged in to see this link.]

Code:

/* Latest topic */
.boxFMvi{margin:0!important}
.top-vi,.viewrep{height:153px}
#most_active,#active_starters,#users_week,#users_month{display:none}
.lastcate{position:absolute;right:0}
.showpost{line-height:18px;font-size:9px;position:absolute;right:166px}
.rightnumber{position:absolute;right:0pt;text-align:right;}
.leftrecent{width:240px;white-space:nowrap;position:absolute;overflow:hidden;text-overflow:ellipsis}
.rightrecent{position: absolute; right: 280px}
.imgstatus{position: absolute; left: -27px; padding: 2px 4px; background-color: #FFF;}
#content-container div#left{border:1px solid #DDD;float:none;width:100%;margin:10px 0}
*+ html #content-container div#main{margin-left:0}
* html #content-container #main-content{overflow:visible;margin-right:0}
* html #content-container div#main{margin-right:-99%;width:100%;float:none}
.latest_topics{list-style:decimal-leading-zero outside none;text-align:left;margin:0!important;padding:0 5px 0 30px}
.latest_topics li{line-height:16px;position:relative}
.toppost_width{float:left; width: 200px}
.recentWidth{float: right; width: 750px}
.recentWidth .main-head{position: relative; height: 1.3em;overflow: hidden;}
.recentWidth h3{marign-left: 10px}
.loaddinng{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/loadin12.gif);background-position:center center;background-repeat:no-repeat;height:150px;width:180px}
#checktip{position:absolute;right:10px;top:3px;z-index:300}
.starsTitle{background: url(http://www.9xstudio.biz/users/2012/10/88/45/album/thead110.gif);border: 0 solid #DDD;color:#00569C;font-weight:700;height:1.4em;padding:5px}

/* Lastopic */
#last-posts{width:100%;float:right;}
#select-lastpost{float:right;cursor:pointer;}
#option-lastpost{height:18px;}
 
.op-last{background-color:transparent;float:left;padding:2px 0;height:18px;margin:-3px 2px 0;width:90px;text-align:center;}
.op-last2{height:18px;border-bottom:0;color:#000000;background-color:#fff;border-radius:3px;border: 1px solid #ddd;}
.op-last-bottom{float:left;border:1px solid #999;margin:-1px 2px 0;padding:5px;cursor:pointer;height:15px;background-color:#DDD;}
.op-last-bottom2{height:23px;font-weight:bold;border-radius:0 0 5px 5px;border-top:0;background-color:white;margin-top:-4px;color:red;background-color:#FFF;}
.op-last-select{font-weight:bold!important;color:red;}
.op-choice{float:left;display:none;}
.op-change{float:left;margin-left:5px;margin-top:50px;}
.op-prew,.op-next{width:20px;height:20px;cursor:pointer;float:left;margin:0 2px;}
.op-prew{background:url(http://i48.servimg.com/u/f48/13/58/60/43/contro18.png) 50% 50%;}
.op-next{background:url(http://i48.servimg.com/u/f48/13/58/60/43/contro20.png) 50% 50%;}
#main-lastpost{height: 360px;padding:20px 10px 5px;background-color:white;min-height:170px;}
#dl-lastpost{display:none;}
#name-lastpost,.name-lastpost {
position: absolute;
padding: 5px 25px;
font-style: italic;
}
 
.dl-post {
height: 15px;
}
lp1,.lp2,.lp3,.lp4,.lp5,.lp6,.lp7,.lp8,.imglp{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
}
.dl-post:hover{
background-color:#DDD;
}
 
.lp1 img {
height: 14px;
}
.lp2 {
margin-left: 10px;
width: 220px;
}
.lp3 {
margin-left: 400px;
width: 0px;
display:none;
}
.lp4 {
margin-left: 260px;
width: 120px;
}
.lp5 {
margin-left: 385px;
width: 190px;
}
.lp6 {
margin-left: 580px;
font-style: italic;
}
.lp7 {
margin-left: 655px;
font-style: italic;
}
.lp8 {
margin-left: 940px;
}
.imglp {
margin-left: 930px;
margin-top:1px;
}
#trang-lastpost {
float: right;
}
#trang-lastpost {
float: right;
}
.TrangTruoc,.TrangSau,.TrangHT{font:12px Courier;cursor:pointer;color:red;float: left;height:30px;width:30px;opacity:0.6;}
.TrangTruoc:hover,.TrangSau:hover,.TrangHT:hover{opacity:1;}
.TrangTruoc{display:none;background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancy_12.png) no-repeat;}
.TrangSau{background:url(http://i48.servimg.com/u/f48/13/58/60/43/fancy_10.png) no-repeat;}
#SoTrangLT{width:25px;text-align:center;font-weight:bold;border:3px dashed white;}
#SoTrangLT:hover{border:3px dashed black;color:red;}
 
#Load {
display:none;
background:#FFF url(https://lh6.googleusercontent.com/-w4Vs9guhNLU/T-IAGnUJxaI/AAAAAAAAARk/GadFsuw8-ec/h120/loading.gif) 50% 50% no-repeat;
position:fixed;
left:50%;
top:40%;
width:50px;
height:50px;
border:20px solid rgba(0, 13, 255, .3);
border-radius:50px;
margin-left:-25px;
}


.pun {
width: 71%;
padding: 15px;
padding-top: 25px;
background: rgba(255, 255, 255, 0.30);
}

#pun-head {
background:#FFFFFF;
padding: 15px;
border-radius:5px;
color: #000;
}

#pun-intro {
background:#FFFFFF url(http://i47.servimg.com/u/f47/17/57/92/32/bg210.gif) repeat  ;
padding: 15px;
height: 140px;
border-radius:5px;
color: #000;
}

#pun-logo img {
height: 120px;
width: 500px;
padding-right: 15px;
}

#pun-title {
background:#FFFFFF;
color: #000;
font-size: 20px;
border-radius:5px;
padding:10px;
width: 350px;
margin-left: 1.5em;
margin-top: -1.5em;
border: 1px solid #ddd;
text-align:center;
}



.pun-crumbs {
background-color: #339BB9;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5BC0DE), to(#339BB9));
background-image: -moz-linear-gradient(top, #5BC0DE, #339BB9);
background-image: -ms-linear-gradient(top, #5BC0DE, #339BB9);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5BC0DE), color-stop(100%, #339BB9));
background-image: -webkit-linear-gradient(top, #5BC0DE, #339BB9);
background-image: -o-linear-gradient(top, #5BC0DE, #339BB9);
background-image: linear-gradient(top, #5BC0DE, #339BB9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339BB9 #339BB9 #22697D;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
position: relative;
padding: 7px 15px;
margin-bottom: 18px;
color: white;
border-width: 1px;
border-style: solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.menunav{
height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: #2C2C2C;
background-image: -moz-linear-gradient(top, #333, #222);
background-image: -ms-linear-gradient(top, #333, #222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
background-image: -webkit-linear-gradient(top, #333, #222);
background-image: -o-linear-gradient(top, #333, #222);
background-image: linear-gradient(top, #333, #222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.menunav ul{display:block;height:30px;margin:0 auto;padding:0px 0 0;position:relative;width:960px;z-index:14}
.menunav ul li{display:inline;height:30px;margin:0;text-align:center}

.menunav ul li a{border-right: 1px solid #454545;color:#FFF;display:block;float:left;font-weight:bold;height:30px;padding:10px 14px 0;text-align:center;z-index:10}
.menunav ul li a:hover,.menunav ul li .active{color:#FFF;display:block;height:23px;padding-top:10px;text-align:center;z-index:10}
.menunav ul a.ico_home,.menunav ul a.ico_home:hover{background-position:left -3183px;border-right:1px solid #474747;color:#EFEFEF;display:block;height:18px;margin:5px 3px 0 0;padding:5px 0 0!important;width:32px}
.menunav span{display:block;height:23px!important;position:absolute;right:0;top:4px;width:95px}
.menunav span a,.menunav span a:hover{height:23px!important;padding:0!important}
.icon, .menunav ul a.ico_home, .menunav ul a.ico_home:hover {background: url("http://i48.servimg.com/u/f48/17/18/08/55/_home10.png") no-repeat scroll 0 0 transparent;height:25px!important;}



/* Login top */
#login-top {
width: 318px;
background: url(http://i48.servimg.com/u/f48/16/58/89/73/box10110.gif) repeat scroll left top transparent;
border-radius: 2px 2px 2px 2px;
height: 95px;
position: absolute;
top: 77px;
right: 207px;
padding: 25px;
color: yellow;
line-height:120%;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
#id-login {
width: 180px;
border: 0;
border-radius: 3px;
margin: 3px;
padding: 5px;
background: white url(http://i28.servimg.com/u/f28/15/68/89/57/id966810.png) no-repeat scroll left center;
color: #000;
padding-left:18px;
}

#pw-login {
width: 180px;
border: 0;
border-radius: 3px;
margin: 3px;
padding: 5px;
background: white url(http://i28.servimg.com/u/f28/15/68/89/57/pass9610.png) no-repeat scroll left center;
color: #000;
padding-left:18px;
}
#username {
background: white url(http://i28.servimg.com/u/f28/15/68/89/57/id966810.png) no-repeat scroll left center;
}
#password {
background: white url(http://i28.servimg.com/u/f28/15/68/89/57/pass9610.png) no-repeat scroll left center;
}

#ok-login {
float: right;
height: 39px;
width: 90px;
margin: -20px 5px 0 0;
background-color:#333;
background-color: rgba(0,0,0,0.5);
border-radius: 3px;
border: 0;
cursor: pointer;
color: yellow;
margin-top: -50px;
font-weight:bold;
}
#ck-login {
float: right;
margin: 5px;
color: #474747;
font-size:10pt;
font-weight:bold;
}
.kullanici_paneli-ekstra{position:absolute;right:40px;top:45px;width:290px;font-weight:bold;}
.kullanici_paneli-ekstra-ekle{padding:8px;text-align:left;}
.kullanici_paneli-ekstra-ekle2{left:10px;text-align:left;}




/*Posting layouts*/


.main-topic {
background-color: white;
border-radius: 6px 6px 6px 6px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
border:none;
}


.postfoot {
   border-top: 1px solid #ddd;
   clear: both;
   padding-bottom: 0.5em;
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 0.5em;
   text-align: right;
     background-color: #fff;
        border-radius: 0 0 6px 6px;
     margin-left: 1.5em;
     margin-right: 1.5em;
}
div.post-options img{
   cursor: pointer;
   }
.pun .postfoot .user-contact {
   float: left;
   width: 15em;
   text-align: left;
 
   }
.user-contact a {
   background-color: #fff;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   color: #000;
   display: inline-block;
   padding: 3px;
   box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
   -webkit-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
   -moz-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
   -khtml-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
}

/* Post Basic Layout-------------------------------------------------------------*/
.pun .topic {
   border: 1px solid #ddd;
   border-style: none solid;
   background-color: #fff;
     padding: 10px 0px 10px 0px;
   }
.pun .post {
   border: 1px solid #ddd;
   background-color: #fff;
     
}
* html .pun .post {
   height: 1%;
   }
*+ html .pun .post {
   min-height: 1px;
   }
.pun .postmain {
   background-color: #fff;
   border-left: 1px solid #ddd;
   margin-left: 17em;
     
}
.pun .posthead {
        background: whiteSmoke;
   border: 1px solid #ededed;
   padding-bottom: 0.5em;
   padding-left: 1em;
   padding-right: 1.3em;
   padding-top: 0.5em;
        border-radius: 6px 6px 0 0;
     margin-left: 1.5em;
     margin-right: 1.5em;
        font-style: italic;
 
}

.pun .postbody {
   width: 100%;
   }
.pun .posthead h2 strong {
   float: right;
   }


.user-basic-info a img{background:#fff;float:center;border:1px solid #CBCBCB;box-shadow:0 0 5px rgba(0,0,0,0.2);margin:5px auto;padding:2px;height:150px;width:150px}
.user-basic-info a img:hover{
  background:#fff;float:center;border:1px solid #CBCBCB;box-shadow:0 0 5px rgba(0,0,0,0.2);margin:5px auto;padding:2px;height:150px;width:150px;
transition: all 0s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}

.user-info {
font-size: 12px;
margin-right: 0.5em!important;
width: 200px;
float: right;
}



.pun table.table td {
border-style: none none solid none;
}


.last-post1{background:url(http://i48.servimg.com/u/f48/16/58/89/73/box10110.gif) repeat scroll left top transparent;border-radius:2px 2px 2px 2px;box-shadow:2px 3px 3px #C8C8C8;text-align:left;margin:20px 10px;padding:10px}
.last-post2{width:18px;height:25px;float:left;background:url(http://i48.servimg.com/u/f48/16/58/89/73/iaza1411.gif) no-repeat scroll left top transparent;margin-left:-28px}



a:link,a:active,a:visited {
    text-decoration: none;
    }

a:hover{
  text-decoration: none !important;
    }


#main .module-advert {
background-color: #FBFBFB;
border: 1px solid #DDD;
}
#pun-announcement, .main .main-foot, .main .main-content, .main .main-content .table {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

/* Glass nav - www.fmvi.org */
#pun-head #pun-navlinks{background-color:transparent;border:0 none;color:#000000}
.title-overview{font-size:20px;font-variant:small-caps;font-weight:700;margin-bottom:10px;padding:5px 0}
.center-overview{color:#000!important}
.center-overview a{background-image:none!important}
.center-overview a:hover{background-image:none!important}
#pun-navlinks ul{text-align:center;}
#pun-navlinks li{background-color:transparent;background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/btn_ho10.png);background-position:right top;background-repeat:no-repeat;color:#FFF;display:inline-block;font:13px tahoma,arial,sans-serif;height:32px;margin-right:5px;padding-right:10px;text-decoration:none}
#pun-navlinks li:hover{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/btn_ho10.png);color:#000000;outline:medium none}
#pun-navlinks li a{background-color:transparent;background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/btn_ho11.png);background-repeat:no-repeat;color:#FFF;display:inline-block;line-height:21px;margin-right:-8px!important;padding:3px 0 8px 10px}
#pun-navlinks li:hover a{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/btn_ho11.png)}


.main .main-head {
color: #333;
min-height: 20px;
padding: 12px;
border-bottom: 1px solid #ddd;
background: #fff;
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}

.main .main-foot {
color: #333;
min-height: 20px;
padding: 12px;
background: #fff;
border-radius: 6px;
}


.main .main-head2 {
color: #333;
min-height: 20px;
padding: 12px;
background: #fff;
border-radius: 6px;
}


.main-head h3, .main-head .h3, .main .main-head .page-title, .main-head h2, .main-head p, .main-head .subtitle {
font-size: 15px;
font-weight: bold;
line-height: 20px;
color: #000;
}

.pun .main-content {
background-color: white;
border-radius: 0px 0px 6px 6px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
border:none;
}

.pun .main-contentbox {
background-color: white;
border-radius: 0px 0px 6px 6px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 0px;
padding-right: 0px;
border:none;
}

body {
background: #0099B9 url(http://static.mp3.zdn.vn/skins/mp3_version3_05/images/bg-2.jpg) repeat-x;
color: black;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-position: top center;
background-attachment: fixed;
}
 l.fanclub {
position:relative;
left:0px;
color: #000000;
}
.fanclub:hover {
left:15px;
transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;
transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2);
}
.fanclub {
background-color: #FFFFFF;
margin:1px 3px 2px 1px;
padding:1px 5px;
border:1px solid #CCCCCC;
}
/* bảng thống kê vbb */
.posting, .paging, .standalone, div.frm-form, #pun-qpost, #pun-info, #copyright {
background: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.dongkhung {
width: 100%;
background: white;
border: 1px solid #CCC;
border-radius: 2px;
float: center;
padding: 4px;
}
l.viewcailon {
position:relative;
left:0px;
color: #000000;
}
.viewcailon:hover {
left:15px;
transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;
transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2);
}
.viewcailon {
background-color: #FFFFFF;
margin:1px 3px 2px 1px;
padding:1px 5px;
border:1px solid #CCCCCC;
}
/* Avatar in index */
.avatar-index {float: left;}
.avatar-index img {width: 40px;height: 40px;background: #F4F4F4;border: 1px solid #DDD;margin: 0 5px;padding: 1px;}
.avatar-index img:hover {border: 1px dashed #CCC;}