Demo hình :
[You must be registered and logged in to see this link.]
css
- Code:
#smallrum{padding: 0.4em 1em;margin: 3px 1px; background: none; -webkit-box-shadow: -0px 0px 0px #ffffff;box-shadow: -0px 0px 0px #ffffff;color: #ffffff;width: 440px;} #smallrum a img{vertical-align: middle; padding-right: 2px; margin-top:-8px;} #smallrum a.gensmall { display: inline-block; text-align: left; width: 200px; }
.main .main-foot {
background-color: white;
color: black;
}
.pun .post {
border-color: #EEE white #CCC;
border-style: solid none;
border-width: 0px 0 1px;
}
#banner {
height: 235px;
width: 920px;
margin: 0 auto;
padding: 30px 30px;
margin-top: -1px;
background-image: url('http://i41.servimg.com/u/f41/16/81/06/32/banner20.jpg');
}
/* tooltip */
#tooltip{background-color:#FFFFFF;border:1px solid #0e0e0e;border-radius:1px;color:#000000;opacity:.9;padding:10px}blockquote{-moz-border-image:url(http://img824.imageshack.us/img824/6347/hhhpz.png) 33 30 11 16 stretch;-o-border-image:url(http://img824.imageshack.us/img824/6347/hhhpz.png) 33 30 11 16 stretch;-webkit-border-image:url(http://img824.imageshack.us/img824/6347/hhhpz.png) 33 30 11 16 stretch;background:#E2EECC;border-image:url(http://img824.imageshack.us/img824/6347/hhhpz.png) 33 30 11 16 stretch;border-width:33px 30px 11px 16px;padding:0 0 10px 5px}
#tooltip .tiplFMvi{border-bottom:1px dashed;padding-bottom:5px;margin-bottom:5px}
.navtabs li {
border-right: 0 solid #5A7F97;
float: left;
list-style: none outside none;
width: 80px;
height: 28px;
}
.lastchieucao {
height: 400px;
}
.loaddingLike{background:url(http://i48.servimg.com/u/f48/16/58/89/73/loadin11.gif) no-repeat scroll center center transparent;display:none;height:1.4em;margin:-1.4em 0 -3px 200px;width:126px}.FMvi-like em{display:none}.post .post-options{height:22px;position:relative}.FMvi-like .nolikeplus{float:left}.FMvi-like .nolikeminus{cursor:pointer;float:left;left:80px;position:absolute;top:5px}.FMvi-like{display:none;left:150px;min-width:250px;position:absolute}.FMvi-like .likeNone,.FMvi-like .likePro{border-radius:1px 1px 1px 1px;color:#FFF;padding:3px 5px;text-align:left;width:57px}
.starsTitle{background-color:#BFBFBF;border:1px solid #989898;color:#F8FF04;font-family:Comic Sans MS;font-variant:small-caps;font-weight:700;height:1.4em;padding:5px;text-shadow:1px 1px 1px #000}#tooltip .header{display:none}#tooltip img{height:70px!important;padding-right:10px}.latest_topics li{height:1.34em;position:relative!important}.leftrecent{height:1.3em;left:0;overflow:hidden;position:absolute;width:500px}.rightrecent{position:absolute;right:0}.imgstatus{background-color:#FFF;left:-30px;padding:0 3px;position:absolute}#content-container div#left{float:none;padding:10px 0;width:100%}*+ html #content-container div#main{margin-left:0}* html #content-container #main-content{margin-right:0;overflow:visible}* html #content-container div#main{float:none;margin-right:-99%;width:100%}.latest_topics{list-style:decimal-leading-zero outside none;margin:0 0 0 25px !important;padding:10px;text-align:left}.toppost_width{float:left;width:200px}
/*buttons & form*/
button, input[type=button], input[type=submit] {
border:none;
display:inline-block;
cursor:pointer;
background:url(../Images/overlay-button.png) #108AB2;
padding:4px 6px;
border-bottom: 1px solid rgba(0,0,0,0.25);
-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
font-size:0.9em;
color:#fff;
width:auto;
}
button:hover, input[type=button]:hover,input[type=submit]:hover {background:url(../Images/overlay-button.png) #911618;}
input[disabled=disabled] {display:none;}
/*navlinks-------------------------------------------------*/
#pun-navlinks{
padding: 0 !important;
height: 40px;
background:#454545 url(http://i41.servimg.com/u/f41/16/81/06/32/nava10.jpg) repeat-x; margin: -4px 5px 25px; margin-left:-18px; margin-right:-17px;}
#pun-navlinks ul{
padding-top: 10px;
padding-left: 20px;}
#pun-navlinks ul li a{
color: white;
font-size: 12px;
font-weight: bold;
font-family: Trebuchet MS, Arial;
font-weight: bold;
text-shadow: black 1px 1px 5px;}
#pun-navlinks ul li a:hover{
background:#000000 url() repeat-x ;}
/*SFARSIT---navlinks-------------------------------------------------*/
.pun {
width: 945px;
margin: 0 auto;
}
.module-advert{display:none;}
body.smiley-frame{background-image:none!important;background-color:#FFF!important;padding-top:0!important}
.pun{min-width:945px!important}
#content{width:100%!important}
body {
background-attachment: fixed;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
body {
background:#11AFD6 url('http://i41.servimg.com/u/f41/16/81/06/32/bg13.jpg') fixed center ;
}
.main-head1 {
background-color: #FC144E;
background-image: url(http://i41.servimg.com/u/f41/16/81/06/32/tcatte10.jpg)!important;
background-repeat: no-repeat;
border: 0 none!important;
height: 50px;
padding: 0;
width: 945px;
}
.main .main-foot, .main .main-head {
background-color: #FC144E;
background-image: url(http://i41.servimg.com/u/f41/16/81/06/32/tcatte10.jpg)!important;
background-repeat: no-repeat;
border: 0 none!important;
height: 50px;
padding: 0;
}
.pun .main-content {
background-color: #FBFBFB;
border: 1px solid #DDD;
}
.pun table.table td {
background-color: #FBFBFB;
border-color: #DDD;
border-style: solid none none solid;
border-width: 1px;
line-height: 130%;
padding: .6em 0 .7em;
}
#chatbox_members,#chatbox,#chatbox_footer{background-color:#FFF}
#chatbox_header.main-head {
background-color: #000;
color: #DEDFDF;
padding: 0 1.3em;
}
a,a:link,a:hover{text-decoration:none!important}
#smilies_categ p{text-align:center}
.user-basic-info img{max-width: 150px}
#left,#tooltip .header,#textarea_content dt, #dulieutip, #dulieupostter, #sapxepdulieu, .tipchuthich {display:none}
#show_color{display:block}
.main-foot p,.main-head p{width:50%!important}
#pun-logo{padding-right:10px}
p#pun-desc{color:#FFCE30;margin-left:20px;padding:.5em 0 0 5px}
#pun-foot .copyright{text-shadow:1px 1px 1px #000}
blockquote{background-color:#EDF7FF!important;border:1px dashed #1A5381!important;padding:5px!important}
blockquote cite{background-color:#E4E6E4;box-shadow:1px 1px 1px;display:inline!important;margin:2px 10px 2px 2px !important;padding:5px 5px 0}
.pun table .tdtopics {margin-left: -50px;}
.collapse a,.collapsePost a{color:#FFF!important;font-family:monospace;font-size:18px;font-weight:700;padding:3px 8px}
.collapse a:hover,.collapsePost a:hover{background-color:#000;padding:0 5px;border:3px double #72736E}
/* Khung chuyĂªn mục */
#profile-advanced-details .autobot,.main-head .h2,.main-head .h3,.main-head h1,.main-head h3,.main-head h2{text-shadow:1px 1px 1px #000;color:#FF0;font-family:Trebuchet MS;font-size:17px!important;font-variant:small-caps;font-weight:600!important}
.pun .main-foot .h2,.pun .main-head .h2{float:left;height:18px;overflow:hidden;width:890px}
.for_box{background:url(http://i43.servimg.com/u/f43/14/53/79/27/fp10.png) no-repeat scroll left top transparent;color:#0E2C3E;font-size:12px;font-weight:700;height:33px;line-height:normal;margin-left:13px;padding-top:3px;text-align:center;width:74px}
.for_box span{color:#105289;display:block;font-size:10px}
.smallrum{display:none;padding:1em;background:#e7e7e7 none;-moz-box-shadow:-2px 2px 2px #c8c8c8;-webkit-box-shadow:-2px 2px 2px #c8c8c8;box-shadow:-2px 2px 2px #c8c8c8;color:#e7e7e7;margin:3px 1px;}
.smallrum a.gensmall{display:inline-block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:175px}
.blackBox{background-color:#021D1F;color:#C7C7C7}
.redBox{background-color:#26F532;color:#FFF}
.redBox .box2 a{color:#000!important}
/* Số trang */
.paging{background-color:#1571A3;border:3px double #D1D1E1;box-shadow:-2px 2px 2px #C8C8C8;color:transparent;width:auto;margin:0 0 4px;padding:5px 10px}
.paging a{border:0;color:#FFF!important;font-size:.9em}
.paging b{border:0;color:#FF0;font-size:1.5em}
/* BĂ i cĂ¹ng chuyĂªn mục */
.fmviToggle .h2{width:880px!important}
.fmviToggle .h2 a,.fmviToggle .h2 a:link{color:#DEDFDF!important}
.fmviToggle .listVer4{list-style-type:decimal-leading-zero;padding:10px 40px}
/* Khung soạn thảo */
#smiley-box iframe{height: 150px;}
#textarea_content dd {margin-left: 0!important}
input[type="submit"],input[type="reset"]{float: none !important}
#smilies_categ{padding: 10px 0}
#smiley-box{border:3px dotted #0C5A89;width:100%!important;padding:5px}
div.posting-block{border:3px dotted #207B0D;float:left;margin-right:-3px;margin-top:7px;width:100%;padding:0 0 0 10px}
div.posting-block #text_editor_textarea, div.posting-block #text_editor_iframe{height: 255px;}
#text_editor_controls {margin:0 !important;width: 100% !important}
#quick_reply .frm-buttons {text-align: center;}
button.button2,input.button2{background:none repeat scroll 0 0 #D0D0D0;border:1px outset #B0B0B0;color:#000;cursor:pointer;font-size:11px!important;height:25px!important;vertical-align:middle!important;width:auto!important;padding:1px 2px!important}
/* Quyá»n hạn trong chuyĂªn mục */
#quanlylist{border:2px solid #EAEAEA;width:276px;padding:10px!important}
#quanlylist p{background-color:#8B8B8B;border:1px solid #807F7F;color:#FFF;font-variant:small-caps;text-shadow:1px 1px 1px #000;width:278px;margin:7px -12px;padding:3px 10px}
/* Bộ gõ mudim style by www.c3zone.net */
#mudimPanel {-webkit-transition: all 2s ease;-moz-transition: all 2s ease;background:#FFF url(http://i48.servimg.com/u/f48/16/58/89/73/go1010.jpg) no-repeat right center!important;-moz-opacity: 0.9;opacity: 0.9;filter: alpha(opacity=90);top: 200px!important;left:-333px!important;width: 330px!important;height: 47px!important;padding: 4px 26px 4px 4px!important;font-size: 9px!important;font-weight:bold;vertical-align:middle;-moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000;}
#mudimPanel:hover {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-moz-opacity: 1; opacity: 1; filter: alpha(opacity=100);left:0!important}
/* Fancybox */
.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;margin:0;padding:0}
.fancybox-wrap{position:absolute;top:0;left:0;z-index:1002}
.fancybox-outer{background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:0;padding:0}
.fancybox-opened{z-index:1003}
.fancybox-opened .fancybox-outer{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}
.fancybox-inner{width:100%;height:100%;position:relative;outline:none;overflow:hidden;margin:0;padding:0}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;vertical-align:top;margin:0;padding:0}
.fancybox-image{max-width:100%;max-height:100%}
#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-21px;margin-left:-21px;width:42px;height:42px;background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancyb10.gif);opacity:0.8;cursor:pointer;z-index:1010}
.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/fancyb10.png)}
.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:1004}
.fancybox-prev,.fancybox-next{position:absolute;top:0;width:40%;height:100%;cursor:pointer;background:transparent url(http://i48.servimg.com/u/f48/16/58/89/73/blank10.gif);z-index:1003}
.fancybox-prev{left:0}
.fancybox-next{right:0}
.fancybox-prev span,.fancybox-next span{position:absolute;top:50%;left:-9999px;width:36px;height:36px;margin-top:-18px;cursor:pointer;z-index:1003}
.fancybox-prev span{background-position:0 -36px}
.fancybox-next span{background-position:0 -72px}
.fancybox-prev:hover span{left:20px}
.fancybox-next:hover span{left:auto;right:20px}
.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;overflow:visible;visibility:hidden;padding:0}
#fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index: 999;background:#000}
.fancybox-title{display:none}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index: 999;text-align:center}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
.fancybox-title-inside-wrap{margin-top:10px}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}
#fancybox-buttons{position:fixed;left:0;width:100%;z-index:1005}
#fancybox-buttons.top{top:10px}
#fancybox-buttons.bottom{bottom:10px}
#fancybox-buttons ul{display:block;width:170px;height:30px;list-style:none;-webkit-box-shadow:0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);-moz-box-shadow:0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);background:#111 0 0 50% 50% 100%;border-radius:3px;margin:0 auto;padding:0}
#fancybox-buttons ul li{float:left;margin:0;padding:0}
#fancybox-buttons a{display:block;width:30px;height:30px;text-indent:-9999px;background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/fancyb11.png);background-repeat:no-repeat;outline:none}
#fancybox-buttons a.btnPrev{width:32px;background-position:6px 0}
#fancybox-buttons a.btnNext{background-position:-33px 0;border-right:1px solid #3e3e3e}
#fancybox-buttons a.btnPlay{background-position:0 -30px}
#fancybox-buttons a.btnPlayOn{background-position:-30px -30px}
#fancybox-buttons a.btnToggle{background-position:3px -60px;border-left:1px solid #111;border-right:1px solid #3e3e3e;width:35px}
#fancybox-buttons a.btnToggleOn{background-position:-27px -60px}
#fancybox-buttons a.btnClose{border-left:1px solid #111;width:38px;background-position:-57px 0}
#fancybox-buttons a.btnDisabled{opacity:0.5;cursor:default}
.fancybox-prev:hover,.fancybox-next:hover,.fancybox-opened .fancybox-title{visibility:visible}
.post-entry .entry-content img{max-width:350px}
.iconPlayer{background:url(//ssl.gstatic.com/s2/tt/images/play-overlay.png) no-repeat scroll center center transparent;left:140px;opacity:0.8;position:absolute;top:-155px;z-index:99;padding:40px !important}
.fancybox-inner{overflow:hidden!important}
.fancyimg-fmvi{cursor: -moz-zoom-in;cursor: -webkit-zoom-in}
#loginFancy{width:305px;margin:-5px -5px -17px;padding:0!important}
#loginFancy .user_login_form{text-align:left}
#loginFancy p{width:269px;position:relative;padding:5px}
#loginFancy .mainoption{border:0;font-style:normal!important;font-weight:500;border-radius:0;margin-top:-5px;padding:4px 2px important}
#loginFancy .post{position:absolute;left:80px;width:90px}
#loginFancy .Rlogin{right:0;position:absolute}
.boxbody{background:url(/users/2211/12/43/96/album/box-sh10.gif) no-repeat scroll 0 100% transparent;font-size:12px;line-height:18px;padding-bottom:9px}
.bbody{background:#fff;font-size:11px}
.boxbody div{background:none repeat scroll 0 0 #FFF;border:1px solid #e0e0e0;display:block;list-style:none outside none;margin:0;padding:4px}
.xemtip {
background-color: white;
width: 270px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px dotted #940000;}
.xemmoi {
background: url(http://i48.servimg.com/u/f48/16/58/89/73/box10110.gif) repeat ;
border-radius: 2px 2px 2px 2px;
box-shadow: 2px 3px 3px #C8C8C8;
text-align: left;
margin: 20px 10px;
padding: 10px;
}
.xemgui {
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;
}
#pun-about, .boxfmvi .tc2, .boxfmvi .tcr {
background: url() repeat scroll 0 0 #FFFFFF!important;
}
.tipsy{font-size:12px;padding:5px;position:absolute;text-shadow:none;z-index:999}.tipsy-inner{-moz-border-radius:3px;-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);-webkit-border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);background:#0066FF url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px;background-color:#0066FF;border-radius:3px;color:#fff;max-width:200px;padding:8px;text-align:center}.tipsy-arrow{background:url(http://cuul.tk/img/tipsy.gif) no-repeat top left;height:5px;position:absolute;width:9px}.tipsy-n .tipsy-arrow{left:50%;margin-left:-4px;top:0}.tipsy-nw .tipsy-arrow{left:10px;top:0}.tipsy-ne .tipsy-arrow{right:10px;top:0}.tipsy-s .tipsy-arrow{background-position:bottom left;bottom:0;left:50%;margin-left:-4px}.tipsy-sw .tipsy-arrow{background-position:bottom left;bottom:0;left:10px}.tipsy-se .tipsy-arrow{background-position:bottom left;bottom:0;right:10px}.tipsy-e .tipsy-arrow{background-position:top right;height:9px;margin-top:-4px;right:0;top:50%;width:5px}.tipsy-w .tipsy-arrow{height:9px;left:0;margin-top:-4px;top:50%;width:5px}
.page-title {
padding-left: 200px;
padding-right: 10px;
padding-top: 15px;
color: white;
font-family: Trebuchet MS;
font-size: 17px!important;
font-variant: small-caps;
font-weight: 600!important;
}
.main-head {
color: white;
font-family: Trebuchet MS;
font-size: 17px!important;
font-variant: small-caps;
font-weight: 600!important;
}
#zzadfooter {
display: none;
}
.tinhhinhforum
{background-image:url(http://i41.servimg.com/u/f41/16/81/06/32/tcatla10.gif);color:#000000;font-size:12px;height: 10px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:700;padding:8px}
index_body:
[You must be registered and logged in to see this link.]
index_box:
[You must be registered and logged in to see this link.]
overall_footer_begin:
[You must be registered and logged in to see this link.]
overall_header:
[You must be registered and logged in to see this link.]