/* common */ .ad { text-align: center; } .center-align { text-align: center; } .gap-bottom-xs { margin-bottom: 10px; } .gap-bottom-sm { margin-bottom: 15px; } .gap-bottom-md { margin-bottom: 30px; } .photo-news { position: relative; } .photo-news img { width: 100%; } .photo-news .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px; color: #fff; } .list-card { padding: 14px; border: 1px solid #ddd; } .list-card li { padding: 10px 0; border-bottom: 1px solid #ddd; } .list-card li:after { content: ''; display: table; clear: both; } .list-card li:first-child { padding-top: 0; } .list-card li:last-child { padding-bottom: 0; border-bottom: 0; } .list-card img { float: left; width: 33%; } .list-card span { float: right; width: 62%; width: -webkit-calc(67% - 15px); width: -moz-calc(67% - 15px); width: calc(67% - 15px); } .row-header-tools .tools{ font-size: 0.8em; } .todays-webtoon .summary{ width: 60%; float: left; overflow: hidden; height: 20px; } @media (min-width: 900px) { .layout-blog:after { content: ''; display: table; clear: both; } .layout-blog { padding-right: 325px; } .layout-blog > div:nth-child(1) { float: left; width: 100%; } .layout-blog > div:nth-child(2) { float: right; width: 300px; margin-right: -325px; } .sidebar{ float: right; width: 300px; margin-right: -325px; } } .gallery-3 { margin-right: -10px; margin-bottom: -15px; overflow: hidden; font-size: 0; } .gallery-3 img { width: 100%; } .gallery-3 > li { width: 50%; padding-right: 10px; font-size: 14.24px; font-size: 1rem; display: inline-block; vertical-align: top; margin-bottom: 15px; } @media (min-width: 440px) { .gallery-3 > li { width: 33.33%; } } /* logo line */ .site-head--inner .logoline { line-height: 18px; border-bottom: 1px solid #d6d6d6; } .site-head--inner .nav-toggle, .site-head--inner .logo a { display: inline-block; padding: 12px; padding-left: 0; } .site-head--inner .logo { display: inline-block; } .site-head--inner img { height: 18px; vertical-align: bottom; } .site-head--inner .login { float: right; font-size: 0.93em; } .site-head--inner .login a { float: left; display: block; padding: 12px 0; } .site-head--inner .login a:hover { text-decoration: underline; } .site-head--inner .login a:first-child { color: #26bcb7; } .site-head--inner .login a:first-child:after { content: ''; display: inline-block; vertical-align: middle; border-right: 1px solid #d6d6d6; height: 15px; margin: 0 8px; } /* nav line */ .site-head--inner .navline { margin-bottom: 25px; padding: 6px 0 12px; border-bottom: 3px solid #0BCAC4; position: relative; } .section-nav, .section-nav h1, .section-nav ul, .section-nav li { display: inline-block; vertical-align: middle; } .section-nav h1 { font-size: 1.7em; margin-right: 10px; } .section-nav ul li{ padding-top:3px; } .section-nav .current { color: #26bcb7; } .section-nav li a { display: block; padding-left: 1.5em; font-weight: bold; } .site-head--inner .navline .search-toggle { float: right; height: 24px; padding: 4px; margin-right: 0px; margin-top:10px; } .site-head--inner .navline .search { top: 10px; } .site-head--inner .navline .search button { top: 8px; bottom: auto; } @media (max-width: 1079px) { .site-head--inner .navline .search .btn-close { right: 10px; } } /* webtoon main */ .img-slider-wrapper { position: relative; } .img-slider-tools { position: absolute; right: 15px; bottom: 19px; z-index: 1; color: #fff; font-size: 0.93em; } .img-slider-tools .arr { padding: 3px; cursor: pointer; } .img-slider-tools .arr:before { content: ''; display: block; height: 0; line-height: 0; border: 5px solid transparent; } .img-slider-tools .prev:before { border-right-color: #fff; } .img-slider-tools .next:before { border-left-color: #fff; } .img-slider .txt { font-size: 1.07em; font-weight: bold; background: #1B4077; background: hsla(220, 80%, 30%, 0.9); } .img-slider .title { display: inline-block; vertical-align: middle; font-size: 1.29em; margin-right: 1em; } .img-slider .author { display: inline-block; } /* row */ .row-header { margin-bottom: 18px; padding-bottom: 8px; font-size: 1.36em; border-bottom: 1px solid #e5e5e5; } .row-header--compact { margin-bottom: 0; border-bottom: 0; } .row-header .title, .row-header h2 { display: inline-block; font-weight: bold; font-size: inherit; line-height: 1; } .sidebar .row-header { font-size: 1em; } .row-header-tools .title .new { color: #2D8BC4; margin-left: 0.5em; } .row-header-tools .title .new:after { content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-left: 3px; border: 2px solid; border-width: 2px 2px 0 0; transform: rotate(45deg); } .row-header-tools .tools a { line-height: 18px; padding-right: 0.8em; font-size: 0.86em; } .row-header-tools .tools a:last-child { padding-right: 0; } .row-header-tools .tools a:not(.current) { color: #666; } .row-header-tools .tools .current:before { content: '*'; margin-right: 2px; } @media (max-width: 359px) { .row-header-tools .tools { margin-top: 5px; } .row-header-tools .tools a:first-child { padding-left: 0; } } @media (min-width: 27.5em) { /* 440px */ .row-header-tools:after { content: ''; display: table; clear: both; } .row-header-tools .tools { float: right; } } .row-title { font-size: 0.93em; font-weight: bold; margin-top: 10px; } .row-des, .row-user { font-size: 0.86em; margin: 3px 0; } .row-user { color: #666; } /* banner box */ .banner-box { text-align: center; padding: 20px 10px 10px 20px; padding-top: 20px; border: 1px solid #D8D8D8; background: #F8F8F8; } .banner-box > div { display: inline-block; vertical-align: middle; margin-bottom: 10px; margin-right: 10px; } /* real time rank */ .realtime-rank .row-header { padding-top: 12px; border-top: 2px solid #434343; } .rank-list { counter-reset: rank; margin-bottom: -10px; } .two-cols:after { content: ''; display: table; clear: both; } .two-cols .col-item { float: left; width: 100%; /*margin-right: 3%;*/ } .two-cols .col-item:last-child { /*float: right; margin-right: 0;*/ } .rank-list li { padding-left: 1.3em; margin-bottom: 10px; counter-increment: rank; font-size: 0.93em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rank-list li:before { content: counter(rank); width: 1.3em; margin-left: -1.3em; color: #0BCAC4; font-weight: bold; float: left; padding-top: 3px; } .rank-list--border { padding: 15px 10px; padding-bottom: 10px; border: 1px solid #E5E5E5; } .rank-list--thumbs { margin-bottom: -5px; } .rank-list--thumbs li { margin-bottom: 5px; } .rank-list--thumbs li > div { display: inline-block; vertical-align: top; } .rank-list--thumbs .thumb { margin-right: 5px; } .rank-list--thumbs .info a:hover { text-decoration: underline; } .rank-list--thumbs .title { font-size: 0.86em; display: block; } .rank-list--thumbs .artist { font-size: 0.79em; color: #434343; } .rank-list--thumbs .rank-count { float: right; padding: 0 5px; font-size: 0.79em; color: #434343; line-height: 43px; } .recommend-rank .rank-list { margin-bottom: 0; } /* recommend life */ .recommend-life .photo-news { margin-bottom: -1px; } .recommend-life .photo-news .txt { font-size: 1.07em; } /* featured webtoon */ .poster { padding: 4% 5%; } .poster:after { content: ''; display: table; clear: both; } .poster > :last-child { padding-bottom: 15px; } @media (max-width: 499px) { .poster > a { display: block; text-align: center; } .poster img { margin-bottom: 15px; } } @media (min-width: 500px) { .poster img { float: right; margin-left: 10%; } } .featured-webtoon { color: #fff; background: #21ABAD; position: relative; height: 260px; cursor: pointer; } .featured-webtoon .label { margin-bottom: 10px; font-weight: bold; font-size: 1.21em; text-shadow: 0px 0px 4px #666; } .featured-webtoon .highlight { display: inline-block; padding: 6px; margin-right: 0.5em; line-height: 1; color: #21ABAD; background: #fff; } .featured-webtoon .title { font-size: 3em; font-weight: 900; line-height: 1.2; margin-bottom: 8px; } .featured-webtoon .summary { font-size: 1.29em; font-weight: bold; color: #D1EEEF; color: hsla(0, 0%, 100%, 0.8); } .featured-webtoon .webtoon-controls .arrowPrev,.featured-webtoon .webtoon-controls .arrowNext{ width: 20px; top:45%; font-size: 1em; } /* today's webtoon */ .todays-webtoon { border: 1px solid #ccc; } .todays-webtoon header { padding: 10px 12px; } .todays-webtoon h2 { font-size: 1.14em; display: inline-block; } .todays-webtoon .link { float: right; font-size: 0.86em; } .todays-webtoon ol:after { content: ''; display: table; clear: both; } .todays-webtoon li { table-layout: fixed; display: table; width: 100%; border-top: 1px solid #f2f2f2; } @media (min-width: 640px) { .todays-webtoon li { width: 50%; float: left; } .todays-webtoon li:nth-child(odd) { border-right: 1px solid #f2f2f2; } } .todays-webtoon li > span, .todays-webtoon li > a { display: table-cell; padding: 10px 0; vertical-align: top; } .todays-webtoon .thumb { width: 60px; padding-right: 7px; } .todays-webtoon img { width: 54px; height: 54px; } .todays-webtoon .week { margin-right: 7px; font-weight: bold; padding-left: 12px; padding-right: 7px; width: 4.3em; } .todays-webtoon .txt { padding-right: 12px; } .todays-webtoon .summary, .todays-webtoon .artist { font-size: 0.86em; color: #666; } .todays-webtoon .title { display: block; font-weight: bold; margin-bottom: 10px; } .todays-webtoon .artist { float: right; } /* recommended webtoon */ .recommended-webtoon h2 { font-size: 1.36em; margin: 10px 0; } /* current-webtoon */ .current-webtoon { background: #DFE6FB; } .current-webtoon p { margin: 10px 0; font-size: 0.9em; } .current-webtoon .tools { font-size: 0; } .current-webtoon .tools a { display: inline-block; padding: 7px 16px; font-size: 16px; font-size: 1rem; margin-right: -1px; border: 1px solid #B8B8B8; background: #fff; line-height: 1; white-space: nowrap; } .current-webtoon .tools a:hover{ background: #0BCAC4; color: #fff; } .current-webtoon .tools .add { padding-right: 33px; } .plus-circle { display: inline-block; width: 1.07em; height: 1.07em; /*color: #b8b8b8;*/ border: 1px solid; border-radius: 50%; position: relative; } .plus-circle:before, .plus-circle:after { content: ''; position: absolute; top: 0.45em; left: 2px; right: 2px; border-bottom: 1px solid; } .plus-circle:after { transform: rotate(90deg); } .current-webtoon .plus-circle { position: absolute; margin-left: 6px; margin-top: -1px; } .webtoon-tips { padding-bottom: 6px; border-bottom: 4px solid #F3F4F6; } .webtoon-tips span { display: inline-block; margin-right: 1em; padding: 5px 8px; font-weight: bold; background: #F3F4F6; } /* webtoon series list */ .webtoon-series-list-wrapper { overflow: auto; } .webtoon-series-list { width: 100%; min-width: 460px; table-layout: fixed; } .webtoon-series-list th { font-size: 0.79em; font-weight: normal; color: #767676; padding: 8px 0; border-bottom: 1px solid #c9c9c9; } .webtoon-series-list td { font-size: 0.86em; padding: 8px 0; border-bottom: 1px solid #ededed; color: #5a5a5a; } .webtoon-series-list .episode { margin-right: 1em; } .webtoon-star { float: left; width: 31px; overflow: hidden; height: 26px; } .webtoon-star > span { display: block; position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; background: url('../img/star-red.svg') 0 0 no-repeat; } .webtoon-star.star10 > span { width: 100%; } .webtoon-star.star9 > span { width: 90%; } .webtoon-star.star8 > span { width: 80%; } .webtoon-star.star7 > span { width: 70%; } .webtoon-star.star6 > span { width: 60%; } .webtoon-star.star5 > span { width: 50%; } .webtoon-star.star4 > span { width: 40%; } .webtoon-star.star3 > span { width: 30%; } .webtoon-star.star2 > span { width: 20%; } .webtoon-star.star1 > span { width: 10%; } .webtoon-star span.i-heart{ position: relative; width:31px; height: 26px; line-height: 0; background: none; } .heartNum{ padding-left: 10px; } /* social */ .icon { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; vertical-align: middle; } .i-circle { border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: background-color 0.25s; } .i-circle:hover { opacity: 0.7; } .i-facebook{ background-color: #3c5b96; } .i-twitter{ background-color: #29a3ef; } .i-kakao{ background-color: #ffdb17; } .i-url{ background-color: #bebebe; } .i-heart path, .i-comment path { transition: fill 0.25s; } .heart .active path, .i-heart:hover{ fill: #f02654; } .comment .active path, .i-comment:hover{ fill: #27aec9; } .icon svg, .icon img { vertical-align: middle; } .no-js .i-toggle { display: none; } .i-toggle { background: url('../img/ic-toggle.png') 50% 50% no-repeat; cursor: pointer; } .i-toggle.expanded { background-image: url('../img/ic-close.png'); } .shareline { margin-top: 30px; } .shareline li { margin-bottom: 10px; } .shareline .icon { margin-right: 0.3em; } @media (max-width: 1379px) { .shareline { text-align: center; } .shareline li { display: inline-block; margin-right: 10px; } } @media (min-width: 1380px) { .shareline { position: -webkit-sticky; position: sticky; top: 30px; float: left; margin-right: -100%; margin-left: -87px; } } .share-footer { margin-bottom: 30px; text-align: center; } .share-footer-main { margin-top: 7px; } .share-footer-main .hidden-icons { display: none; } .share-footer-main .hidden-icons.active, .no-js .share-footer-main .hidden-icons { display: inline-block; } .share-footer-main a { margin-right: 7px; } /* pagination */ .pagination { margin: 30px 0; text-align: center; } .pagination > a, .pagination > span { display: inline-block; min-width: 2.4em; color: #767676; font-size: 0.86em; padding: 7px; border: 1px solid transparent; } .pagination > a:hover, .pagination > .current { font-weight: bold; color: #26bcb7; border-color: #e0e0e0; } .prev-angle:before, .next-angle:after { content: ''; display: inline-block; vertical-align: 0.1em; width: 0.43em; height: 0.43em; margin: 0 0.14em; border-style: solid; /* only shows on browser supports "calc" */ border-width: -webkit-calc(1px) -webkit-calc(1px) 0 0; border-width: -moz-calc(1px) -moz-calc(1px) 0 0; border-width: calc(1px) calc(1px) 0 0; transform: rotate(45deg); } .prev-angle:before { transform: rotate(-135deg); } /* article */ .article-header { padding: 14px 0; background: #F3F4F6; border-bottom: 1px solid #B6B4B5; } .article-header .title { font-size: 1.14em; font-weight: bold; display: inline-block; } .article-nav { float: right; font-size: 0.9em; color: #666; } .article-nav .viewList{ border:1px solid #ccc; background-color: #fff; font-weight: bold; padding: 5px; margin-right: 5px; } .article-nav .prev { margin-right: 0.5em; } .full-article { padding-bottom: 50px; border-bottom: 1px solid #e5e5e5; } /* vote line */ .vote-line { margin-top: 30px; } .vote-line dt, .vote-line dd { display: inline-block; font-size: 0.86em; color: #767676; } .vote-line dt { font-weight: bold; margin-right: 0.3em; } .vote-line .total { padding-right: 0.7em; margin-right: 0.4em; border-right: 1px solid #E4E4E4; } .vote-line strong { font-size: 1.43em; line-height: 12px; font-weight: 900; color: #666; font-family: tahoma,Helvetica,Sans-serif; } .vote-line em { font-style: normal; } .vote-line button { font-size: 0.71em; padding: 2px 6px; border-radius: 2px; border: 1px solid #D9D9D9; } .vote-line .select-star-wrapper { position: relative; display: inline-block; vertical-align: bottom; } .vote-line .selected { border: 1px solid #CBCBC9; padding: 2px 4px 1px; line-height: 1; cursor: pointer; } .vote-line .selected:after { content: ''; width: 0; height: 0; line-height: 0; border: 0.29em solid transparent; border-top-color: #999; position: relative; top: 0.6em; margin: 0 0.14em; } .vote-line .select-star { position: absolute; left: 0; width: 100%; border: 1px solid #CBCBC9; z-index: 100; margin-top: -1px; background: #fff; display: none; } .vote-line .active .select-star { display: block; } .vote-line .select-star li { padding: 2px 4px; cursor: pointer; font-size: 0.79em; white-space: nowrap; } .vote-line .select-star li:first-child { padding-top: 4px; } .vote-line .select-star li:last-child { padding-bottom: 4px; } .vote-line .select-star li:hover { background: #f5f5f5; } /* comic nav row */ .comic-nav { margin-top: 10px; padding: 15px; border: 1px solid #DCDCDC; } .bookmarks a { display: inline-block; padding: 3px 5px; font-size: 0.86em; border: 1px solid #E1E1E1; border-bottom-color: #D0D0D0; border-radius: 2px; } .comic-nav .bookmarks { text-align: right; margin-bottom: 15px; } .comic-nav-slider { position: relative; padding: 0 30px; } .comic-nav-slider li { display: inline-block; text-align: center; padding: 30px 0 20px; } .comic-nav-slider a { display: block; padding: 0 16px; } .comic-nav-slider .active .slide-item { display: block; outline: 3px solid #FFBB04; outline-offset: 8px; } .remote_cont{ display: none; } @media (min-width: 800px) { .comic-nav-slider a { padding: 0 30px; } .comic-nav-slider .active .slide-item { outline-offset: 15px; } /**Remote control**/ .remote_cont{ display: block; position: fixed; bottom: 10px; border:1px solid #c9c9c9; width: 155px; z-index: 9999; right:10px; text-align: center; font-size: 0.9em; background: #fff; cursor: move; border-radius: 3px; } .remoteTitle{ border-bottom: 1px solid #c9c9c9; font-weight: bold; padding :5px; font-size: 1em; } .remote_cont a.close{ position: absolute; top:7px; right: 5px; } .remoteBox{ background: #eee; padding:10px; overflow: hidden; } .remoteBox a:hover{ color: #666; } .remoteBox .tit{ padding-bottom:10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .btn_area a{ float: left; border:1px solid #ccc; padding: 5px 0; width: 30px; background: #fff; margin-right: 4px; font-size: 0.9em; } .btn_area a:last-child{ margin-right: 0; } .moveComment{ clear: both; padding: 10px 0; } .move2{ overflow: hidden; } .move2 a{ float: left; width: 44px; } .move2 a .fas{ font-size: 1.3em; } .move2 div{ font-size: 0.85em; } } .comic-nav-slider .episode { display: block; font-size: 0.86em; padding-top: 10px; } .comic-nav-slider button { position: absolute; top: 40%; margin-top: -15px; width: 32px; height: 31px; background: url('../img/arrow-map.png') 0 0 no-repeat; text-indent: 110%; overflow: hidden; } .comic-nav-slider [disabled] { display: none; } .comic-nav-slider [data-controls="prev"] { left: 0; } .comic-nav-slider [data-controls="prev"]:hover { background-position: 0 -33px; } .comic-nav-slider [data-controls="next"] { right: 0; background-position: -33px 0; } .comic-nav-slider [data-controls="next"]:hover { background-position: -33px -33px; } .comic-nav-slider .tns-slide-active a { border-right: 1px solid #F1F1F1; } /* override the last border */ .comic-nav-slider .tns-slide-active:last-of-type a { border: 0; } .comic-nav-slider .tns-slide-active + :not(.tns-slide-active) { position: relative; } .comic-nav-slider .tns-slide-active + :not(.tns-slide-active):before { content: ''; position: absolute; left: -1px; top: 0; height: 100%; border-left: 1px solid #fff; } .comment-box { margin-bottom: 30px; } /**Comment**/ .reply{ padding-top:30px; } .reply .reply_tit{ font-size: 16px; } .reply .reply_tit img{ margin-top: 3px; } .reply .delete{ padding-left:20px; color:#bcbcbc; } .reply_social span{ padding-right: 10px; } .reply .reply_write{ color:#999999; line-height: 23px; padding:10px 20px; } .reply_regist{ border-top:1px solid #e8e9ea; height:46px; line-height: 46px; } .reply_no{ color:#bcbcbc; padding-left:20px; } .reply_btn{ background: #04b9c2; width:87px; height: 47px; color:#fff; float:right; text-align: center; line-height: 47px; } .reply_btn a{ color:#fff; } .reply_btn a:hover{ color:#fff; } .reply_social{ padding:20px 20px 0 20px; } .reply_write textarea{ z-index: auto; position: relative; line-height: 20px; font-size: 13px; padding: 10px 0; border: none; } .reply .reply_box{ border: 1px solid #c5c5c5; margin-top: 10px; clear: both; overflow: hidden; background: #fff; } .reply_sort{border-bottom: 1px solid #ebeef3; margin-top:20px; padding:10px 0; font-size:16px; } .reply_sort span{padding-right:20px;} .reply_sort a:hover{ color:#26bcb7;} .reply_sort .current{ color:#26bcb7;} .reply_comment{padding:20px 0;border-bottom: 1px solid #ebeef3; overflow:hidden;} .reply_comment_open{padding:20px 0;border-bottom: 0px; overflow:hidden;} .r_base{overflow:hidden;display:block;} .icons2{float:right !important; } .reply_box2 .icons{float:right !important; padding-top:20px; } .icons2 img{padding-right:7px;} .viewall{padding:10px 0 20px 0; text-decoration: underline;} .viewall a:hover{color:#2bbec6;} .reply_comment{padding:20px 0;border-bottom: 1px solid #ebeef3; overflow:hidden;} .reply_comment_open{padding:20px 0;border-bottom: 0px; overflow:hidden;} .r_base{overflow:hidden;display:block;} .icons2{float:right !important; } .reply_box2 .icons{float:right !important; padding-top:20px; } .icons2 img{padding-right:7px;} .reply .reply_box{ border: 1px solid #c5c5c5;margin-top: 10px;clear: both;overflow: hidden;background: #fff;} .reply .reply_box2{ clear:both; overflow:hidden; background: #f5f6f6; border-top:1px solid #ebeef3; padding:20px 20px 0 20px; margin-top:20px; display:block; font-size: 14px;} .reply .reply_box2 .box_wrap{overflow:hidden;display: block; border-bottom: 1px solid #e0e1e1; padding-bottom:20px; margin-bottom:20px;} .reply .reply_box2 .box_wrap li{float:left;} .reply .reply_box2 .box_wrap2{overflow:hidden;display: block; margin-bottom:20px;} .reply .reply_box2 .box_wrap2 li{float:left;} .reply .reply_box2 .box_wrap2 li.reply_boxWrap{width: 90%;} .reply .reply_box2 .box_wrap .r_text li{float:left; padding-right:10px;} .reply_close{width:90px; height: 30px; line-height: 30px; border: 1px solid #c7c7c7; text-align: center; margin:20px auto;} .reply_close a:hover{color:#2bbec6;} .reply_close img{ padding-top:12px;padding-left:5px;} .img_reply{width:20px; float:left;} .r_img2{width:20px; padding-top:10px;} .r_info{color:#999999; padding-bottom:10px;} .r_info a{color:#999;} .r_info a:hover{color:#2bbec6;} .r_info span{padding-right:10px;} .r_date{font-size:12px;} .r_text{font-size: 15px;padding-bottom:15px;} .r_text label { border-radius: 3px; padding: 2px 4px; color: #fff; background: #e64c3d; display: inline-block; margin-right: 5px; font-size: 11px; } .r_text div:nth-child(2) { display: inline-block; vertical-align: sub; } .thumbup2{color:#e64c3d;padding-left: 20px;} .thumbdown2{color:#3c92ca;padding-left: 20px;} .reply_comment .btn-default{ border-radius: 0; display: inline-block; text-align: center; padding: 5px 15px; border: 1px solid #ccc; } .reply_comment .btn-default:hover{ border-color: #2bbec6; color: #2bbec6; } .pagenumber{ padding:25px 0; text-align: center; overflow: hidden; } .pagenumber a{ color:#a2a2a2; padding:5px 10px; display: inline-block; } .pagenumber a.current{ border:1px solid #ddd; color: #2bbec6; } .pagenumber a img{ vertical-align: middle; }