/* CSS Document */ /******* GENERAL RESET *******/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0pt none; font-family:inherit; font-size: 100%;font-style:inherit;font-weight:inherit;margin:0pt; padding:0pt; vertical-align:baseline; } html, body { margin:0; padding:0; } body { background: #eee; font-family: 'cartogothic_stdregular', Helvetica, Arial;} .br { clear:both; margin-bottom:0;} .br_left { clear:left; margin-bottom:0;} .br_right { clear:right; margin-bottom:0;} .br_right.hide { display:none;} i { font-style:italic; color:#777;} a { text-decoration:none;} a:hover { text-decoration:underline;} a.link { color: #095B8C;} a.link.ul { text-decoration:underline;} a.link.big { font-size:1.1em;} ul { list-style:none;} .jp_heading { background: #12571E; color: #fff; font-weight: bold; padding: .4em 2em .4em 1em; font-size: .8em; margin-bottom: 1em; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif" } /*-------------------------------------------------------- Global settings ---------------------------------------------------------*/ header, .body-sec, #footer-sec { max-width:1070px; margin-left:auto; margin-right:auto; } @font-face { font-family: 'cartogothic_stdregular'; src: url('fonts/cartogothicstd/cartogothicstd-book-webfont.eot'); src: url('fonts/cartogothicstd/cartogothicstd-book-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cartogothicstd/cartogothicstd-book-webfont.woff') format('woff'), url('fonts/cartogothicstd/cartogothicstd-book-webfont.ttf') format('truetype'), url('fonts/cartogothicstd/cartogothicstd-book-webfont.svg#cartogothic_stdregular') format('svg'); } @font-face { font-family: 'cartogothic_stdbold'; src: url('fonts/cartogothicstd/cartogothicstd-bold-webfont.eot'); src: url('fonts/cartogothicstd/cartogothicstd-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cartogothicstd/cartogothicstd-bold-webfont.woff') format('woff'), url('fonts/cartogothicstd/cartogothicstd-bold-webfont.ttf') format('truetype'), url('fonts/cartogothicstd/cartogothicstd-bold-webfont.svg#cartogothic_stdbold') format('svg'); } @font-face { font-family: 'aliquamregular'; src: url('fonts/aliquamreg/aliquamreg-webfont.eot'); src: url('fonts/aliquamreg/aliquamreg-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/aliquamreg/aliquamreg-webfont.woff') format('woff'), url('fonts/aliquamreg/aliquamreg-webfont.ttf') format('truetype'), url('fonts/aliquamreg/aliquamreg-webfont.svg#aliquamregular') format('svg'); } /*facebook login btn*/ a.jp_facebook_login { background: #3A5BA0; border-radius: 5px;} a.jp_facebook_login img { width: 50px; vertical-align: middle;} a.jp_facebook_login span { font-size: 1em; color: #fff; vertical-align: middle;} /* Login popup*/ #jp-login-popup { display:none;} #jp-login-popup.heading h5 { float: left; max-width:500px; font-family: 'aliquamregular', Helvetica, Arial; color:#888; /*border:1px solid #000;*/} #jp-login-popup .heading h5 {font-size:1.4em; margin-bottom:.3em; padding-left:.5em;} #jp-login-popup .heading h6 {font-size:.9em; color:#555; max-width:230px; float:right; padding-right:1em; /*border:1px solid #000;*/} #jp-login-popup ul { width: 235px; margin: 0 auto; display: block; } #jp-login-popup li { margin-bottom: 1.8em; display: block; width: 100%; } #jp-login-popup li:last-child { margin-bottom: 0;} #jp-login-popup li a { display: block;} #jp-login-popup a.gb-email-login { background:#333; color:#fff; padding:1em; font-size:1em; font-weight:300;} /*sidebar trending*/ aside .item.trending { border:1px solid #cdcdcd; background:#f7f7f7; padding: 1em 0 1em .7em; margin-bottom: 1em;} aside .item.trending span.heading { } aside .item.trending ul { margin: 2em 0 0 1em;} aside .item.trending li { float: left; margin: 0 1em 1em 0; width: 44%; font-size: .9em; border-bottom: 1px dashed #aaa; } aside .item.trending li a { } /*sidebar mobile app ad*/ aside .item.mobile_app_ad { background: #133507; color: #fff; margin-bottom: 2em; padding: 1.5em; text-align: center; } aside .item.mobile_app_ad {background: linear-gradient(to bottom, #2F5F0C 0%,#133A03 100%); text-shadow:1px 1px #000; } aside .item.mobile_app_ad h4 { font-size: 1.5em; margin-bottom: 1em;} aside .item.mobile_app_ad h4 span { display: block; font-size: 1.2em; font-family: 'aliquamregular', Helvetica, Arial; margin-bottom: .5em;} aside .item.mobile_app_ad p {} aside .item.mobile_app_ad img.btn { width: 220px;} aside .item.mobile_app_ad a:hover {text-decoration: none;} /*sidebar article*/ aside .item.article { border:1px solid #cdcdcd; background:#f7f7f7; padding: 1em; margin-bottom: 1em;} aside .item.article .article-sec { margin-top: 1em;} aside .item.article img.tnail {float: left; width: 33%; margin-right: 1em;} aside .item.article .text { float: left; width: 60%; } aside .item.article h6 { font-size:1.5em; font-family: 'aliquamregular', Helvetica, Arial; color:#274b04; margin-bottom: .5em; } aside .item.article p {color:#555; font-size: .85em; } /* Alphabet list*/ .dictionary-alphabet { margin-left:1em;} .dictionary-alphabet li { font-size:1.1em; float:left; width:30px; margin-bottom:.8em;} .dictionary-alphabet li.popular { width:70px;} .dictionary-alphabet li a { color:#666;} .dictionary-alphabet li.selected { margin-right:10px;} .dictionary-alphabet li a.selected { color:#fff; background:#444; padding:.2em .4em;} .dictionary-alphabet li a:hover { color: #060; text-decoration:none;} /* sidebar*/ aside.dictionary-sidebar .item.social { background:#fff; border:1px solid #ccc;} aside.dictionary-sidebar .item #tab-nav { list-style:none; background:#eee; margin:0; } aside.dictionary-sidebar .item #tab-nav li { float:left;} aside.dictionary-sidebar .item #tab-nav li a { display:block; color:#666; font-size:.85em;} aside.dictionary-sidebar .item #tab-nav li a:hover { background:#ddd; text-decoration:none;} aside.dictionary-sidebar .item #tab-nav li a.selected { background:#fff; color:#444; } aside.dictionary-sidebar .item #tab-nav li a span { background: url(../img/icons/social-links.png) no-repeat 6px 6px; display:block; } aside.dictionary-sidebar .item #tab-nav li a span { padding:.8em; padding-left:2.72em;} aside.dictionary-sidebar .item #tab-nav #twitter-con-nav span { background: url(../img/icons/social-links.png) no-repeat 6px -38px; } aside.dictionary-sidebar .item #tab-nav #google-con-nav span { background: url(../img/icons/social-links.png) no-repeat 6px -84px; } aside.dictionary-sidebar .item .content-sec .tab-content { display:none ;} aside.dictionary-sidebar .item .content-sec #facebook-con { display:block;} aside.dictionary-sidebar .item.categories {border:1px solid #cdcdcd; background:#f4f4f4; padding: .8em;} aside.dictionary-sidebar .item.categories h6 { font-family: 'cartogothic_stdbold', Helvetica, Arial; color:#777; font-size:1em; margin-bottom:1em; } aside.dictionary-sidebar .item.categories h6 { padding-bottom:.5em; border-bottom:1px dashed #aaa;} aside.dictionary-sidebar .item.categories li { float:left; font-size:.82em; width:135px; margin-bottom:.7em;} aside.dictionary-sidebar .item.categories li a { color:#555;} /* pagination */ div.global-pagination {font-size:.8em; margin-top:2em;} div.global-pagination a { border:1px solid #bbb; padding:.3em .5em .3em .5em; background: #ddd; text-decoration:none; color:#444;} div.global-pagination a:hover { background:#444; color:#fff; border:1px solid #333; } div.global-pagination strong { border:1px solid #bbb; color:#555; padding:.3em .5em .3em .5em; background:#fff;} /* error*/ .gb-error { background:#FCE0E0; color:#C91D21; border:1px dashed #F44044; display:block; padding:.6em; font-size:.1.2em; margin-bottom:2em; text-align:center;} /* error-success msg*/ span.gb-success { background: #E0FCCF; color: #367621; border:1px dashed #4B9F13; display:block; padding:.6em; font-size:.1.2em; margin-bottom:2em; text-align:center;} /* visitor msg*/ .gb-visitor-msg { background:#E7FDD9; color:#305831; font-family: Helvetica, Arial; padding:1em; text-align:center; font-size:.95em;} .gb-visitor-msg em { font-weight:bold;} .gb-visitor-msg p { margin-right:2.2em;} .gb-visitor-msg a.msg { font-weight:bold; color:#256489; text-decoration:underline;} .gb-visitor-msg a.hide { color:#256489; position:absolute; top:1em; right:1em; } /*breadcrumbs*/ .gb-breadcrumbs {/* white-space: nowrap;*/ margin: 0 0 .2em .5em; } .gb-breadcrumbs li { display: inline-block; line-height: 26px; margin: 0 9px 0 -10px; padding: 0 15px; position: relative; z-index: 999 !important;} .gb-breadcrumbs li::before, .gb-breadcrumbs li::after { border-right: 1px solid #666666; content: ''; display: block; height: 50%; position: absolute; } .gb-breadcrumbs li::before, .gb-breadcrumbs li::after { left: 0; right: 0; top: 0; z-index: -1; transform: skewX(45deg);} .gb-breadcrumbs li::after { bottom: 0; top: auto; transform: skewX(-45deg); } .gb-breadcrumbs li:last-of-type::before, .gb-breadcrumbs li:last-of-type::after { display: none; } .gb-breadcrumbs li { font: bold .75em Sans-Serif; letter-spacing: -1px; text-decoration: none; margin-bottom:1em; } .gb-breadcrumbs li a { color: #999;} .gb-breadcrumbs li span { color:#777;} /*adult content warning*/ .adult-warning { border:1px solid #D5C71E; padding:.9em; font-size:.75em; background:#FDFEE2; color:#999; margin-top:1em;} /*header*/ #header-container { background:url(../img/header/header-bg.jpg); padding-top:.7em;} header .logo-sec { float:left; width:270px; margin-left: -100%; } header .logo-sec h2 { font-size:.75em; color:#aaa; margin-left:.5em;} header .action-sec { float:left; width:100%; } header .action-sec-inner {margin-left:270px; padding:.7em .5em 0 0; } header .action-sec ul { list-style:none; font-size:.95em; color: #bbb;} header .action-sec ul li { margin-right:.7em;} header .action-sec ul li a {color: #bbb;} header .action-sec ul.small-nav { display:none;} header .action-sec nav { float:left; width:73%; } header .action-sec nav li { float:left; margin-right:2.3em;} header .action-sec nav li a:hover { color: #9BC61A; text-decoration:none;} header .action-sec nav li.last { margin-right:0; } header .action-sec div.account-sec { float:right; width:26%; } header .action-sec div.account-sec li { float:right; margin-right:.5em;} header .action-sec div.account-sec li:first-child { margin-right:0; } header .action-sec div.account-sec.myc { width:190px; } header .action-sec div.account-sec.myc li { float:none;} /*notification section*/ header .mobile-notification-area { display:none;} header .action-sec .notify-icon { float:left; width:43px; padding-top:.2em; position:relative;} header .action-sec .notify-icon .img-bell { width:27px;} header .action-sec .acc-ul.notify-icon a { display:block; position:relative;} header .action-sec .acc-ul.notify-icon a span.notify-num { color:#fff; font-size:.7em; display:block; border:1px solid #B52225; border-radius: 30%;} header .action-sec .acc-ul.notify-icon a span.notify-num { position:absolute; top:-5px; left:14px; background:#E42929; padding:.2em .3em; } header .action-sec .acc-ul.notify-icon .notify-dropdown-bg { position:absolute; left:-380px; top:31px; width:400px; display:none; z-index:99999; } header .action-sec .acc-ul.notify-icon .notify-dropdown { background:#fff; border:1px solid #ccc; margin-top:-9px; overflow-y:auto; max-height:400px;} header .action-sec .acc-ul.notify-icon .notify-dropdown {box-shadow: 2px 6px 5px -3px rgba(0,0,0,0.75); font-size:.9em;} header .action-sec .acc-ul.notify-icon .notify-dropdown .empty { font-size:1em; display:block; text-align:center; color:#999; padding:1em;} header .acc-ul.notify-icon .arrow-up { border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #fff; } header .acc-ul.notify-icon .arrow-up { width: 0; height: 0; float:right;} header .acc-ul.notify-icon .notify-dropdown h6 { font-weight:bold; padding: 1em; border-bottom:1px solid #ccc; color:#333; } header .acc-ul.notify-icon .notify-dropdown li { border-bottom:1px solid #ccc; padding:.7em; display:block; } header .acc-ul.notify-icon .notify-dropdown li:hover { background:#F4FAFD;} header .acc-ul.notify-icon .notify-dropdown li.unread { background: #F5FFF4;} header .acc-ul.notify-icon .notify-dropdown li .img-icon { float:left; margin-right:1em; width:25px;} header .acc-ul.notify-icon .notify-dropdown li .notify-content { float:left; width:310px; color:#666;} header .acc-ul.notify-icon .notify-dropdown li .notify-content em { font-weight:bold; font-size:.9em; } header .acc-ul.notify-icon .notify-dropdown li .notify-content p { font-size:.89em; margin-top:.5em;} header .acc-ul.notify-icon .notify-dropdown li .notify-content p em { font-size:1em;} header .acc-ul.notify-icon .notify-dropdown li .notify-content .date { color:#999; font-size:.8em;} header .acc-ul.notify-icon .notify-dropdown a.link { display:block; text-align:center; font-size:.85em; font-weight:bold; padding:.7em;} header .acc-ul.notify-icon .notify-dropdown a.link:hover {background: #F4FAFD;} /* account dropdown*/ header .action-sec .account-link-part { float:left; width:140px;} header .action-sec div.account-sec.myc ul.my li.main {background:url(../img/header/acc-bg.png); width:100%; } header .action-sec div.account-sec.myc ul.my li.main a { display:block; background: url(../img/header/arrow.png) no-repeat; border:#222 1px solid;} header .action-sec div.account-sec.myc ul.my li.main a { padding:.5em 0 .5em .9em; background-position:115px -26px; font-size:.85em;} header .action-sec div.account-sec.myc ul.my li.main a.arrow {background-position:115px 10px;} header .action-sec div.account-sec.myc ul.my li.dropdown ul { position:absolute; display: none; z-index:1999999; } header .action-sec div.account-sec.myc ul.my li.dropdown ul li { /*display:block; float:none; */ } header .action-sec div.account-sec.myc ul.my li.dropdown ul li a { display:block; width:140px; text-align:center; padding:.5em 0; background: #000; border-bottom:1px #222 solid; } header .action-sec div.account-sec.myc ul.my li.dropdown ul li a:hover {color: #9BC61A;} header .action-sec div.account-sec ul.my li a:hover { text-decoration:none;} header .action-sec form { margin-top:1em;} header .action-sec form .search-text-con-bg { width:100%; float: right; } header .action-sec form .search-text-con { margin-right:117px; background:#999;} header .action-sec form .search-btn-con { width:96px; float: right; margin-right: -100%; } header .action-sec form input.text { vertical-align:middle; width:100%; padding:.39em .5em; font-size:1.2em; border:1px solid #333; margin-top:-.1em;} header .action-sec form input.text { -webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 1); -moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 1);} header .action-sec form input.text { box-shadow: 1px 1px 2px rgba(50, 50, 50, 1);} header .action-sec form input.btn { vertical-align:middle; margin:-.1em 0 0 -.1em; width:100%; } header ::-webkit-input-placeholder {color: #999; } header :-moz-placeholder {color: #999; } header :-ms-input-placeholder { color:#999; } /*footer*/ footer { background:#242125; padding: 0 .3em;} footer img.footer-logo { display:block; margin:0 auto 1em auto;} footer .f-alphabet { border-bottom:1px solid #444; padding-bottom:1em; margin-bottom: 1em;} footer .f-alphabet li { float:left; width:3.7%;} footer .f-alphabet li a { color:#aaa;} footer .f-alphabet li a:hover { color:#9BC61A; text-decoration:none;} footer .footer-nav { padding-top:1em; display: flex; justify-content: space-between; max-width: 600px;} footer .footer-nav .item { padding-right: 1em;} footer .footer-nav .item .title { color: #aaa; font-weight: bold; font-size: .96em; display: block; margin-bottom: 1em;} footer .footer-nav .item li { font-size: .9em; margin-bottom: .7em;} footer .footer-nav .item li a { color: #888;} footer .footer-nav .item li a.add { color: #9BC61A;} footer .social-links { display: flex; justify-content: center;} footer .social-links ul { display: flex; max-width: 220px; width: 100%; justify-content: space-between;} footer .footnote { display:block; text-align:center; color:#555; font-size:.8em; margin-top:1em;} /*---------------------- book promo ---------------------------------*/ /* background: linear-gradient(115deg, #333 75%, #ffe2a8 50%); */ .jp-book-promo { background: linear-gradient(152deg, #333 71%, #ffe2a8 50%); } .jp-book-promo.hide-book-image { background: #333; } .jp-book-promo .inner { display: flex; padding: 2em 0; max-width:1070px; width:90%; margin:0 auto; } .jp-book-promo .left {padding-right: 1em; width: 100%; } .jp-book-promo .left h2 { font-size: 22px !important; max-width: 500px; color: #ffcf6e !important; font-family: "Montserrat", sans-serif; margin: 0 !important; } .jp-book-promo .left h2 { line-height: 2.3em; font-weight: 900;} .jp-book-promo .left h2 em { display: block; font-size: 1.7em; color: #6ad261 !important; text-transform: uppercase; margin-top: 0; font-family: "Montserrat", sans-serif;} .jp-book-promo .left h2 em b { display: block; font-size: 1.2em; color: #fff; text-transform: uppercase; } .jp-book-promo .left p { color: #bbb; font-size: 17px; margin-top: 1em; line-height: 1.5em; } .jp-book-promo .left p em { display: block; margin-top: 0.3em; font-weight: normal !important;} .jp-book-promo .left ul { list-style: none !important; margin-left: 2em; line-height: 1.9em !important; color: #bbb; font-size: 16px; color: #bbb9b5;} .jp-book-promo .left li { margin: 0 !important;} .jp-book-promo .left li:before { content: "\2713"; color: rgb(75, 202, 75); display: inline-block; width: 1.5em; margin-left: -1em; } .jp-book-promo .left a.get_book { display: block; width: 250px; background: #cf0b0b; color: #fff; text-align: center; padding: 1em .3em; font-size: 18px; } .jp-book-promo .left a.get_book { margin: 2em 0 0 0; border-radius: 5px; font-weight: bold; text-transform: uppercase; } .jp-book-promo .left a.get_book:hover { text-decoration: none; } .jp-book-promo .right { /*border: 1px solid #000;*/ max-width: 400px; width: 99%; } .jp-book-promo .right a { display: block; width: 300px; margin: 0 auto; } .jp-book-promo .right a img { width: 100%;} /* no book thumbnail mode */ .jp-book-promo.hide-book-image .inner { display: block; } .jp-book-promo.hide-book-image .left h2 { text-align: center; max-width: 98%; } .jp-book-promo.hide-book-image .left p { text-align: center; } .jp-book-promo.hide-book-image .left ul { margin: 0 auto !important; width: 300px;} .jp-book-promo.hide-book-image .left a.get_book { margin: 0 auto;} /*---------------------- youtube promo ---------------------------------*/ .jp-youtube-promo { background: #333; padding: 2em; display: flex; align-items: flex-start; border-radius: 10px;} .jp-youtube-promo .icon-sec { max-width: 250px; width: 99%; margin-right: 1em;} .jp-youtube-promo .icon-sec img { width: 100%; display: block; } .jp-youtube-promo .text-sec { width: 99%;} .jp-youtube-promo .text-sec h2 { font-size: 22px !important; color: #fff !important; font-family: "Montserrat", sans-serif; margin-bottom: 1em; } .jp-youtube-promo .text-sec p { color: #eee; font-size: 1.1em; line-height: 1.5em; margin-bottom: 1em; } .jp-youtube-promo .text-sec a { display: block; width: 150px; background: #c40a0a; color: #fff; text-align: center; padding: .8em .3em; font-size: 1.1em; margin-top: 1em; } .jp-youtube-promo .text-sec a { border-radius: 25px; float: right; font-weight: bold;} .jp-youtube-promo .text-sec a:hover { text-decoration: none; background: #107eb1;} /*---------------------- book store promo ---------------------------------*/ .jp-book-promo.store { background: linear-gradient(110deg, #333 60%, #dfb25a 50%); } .jp-book-promo.store .right { max-width: 450px; } .jp-book-promo.store .right a { width: 440px; } .jp-book-promo.store .left h2 { font-size: 28px !important; } .jp-book-promo.store .left h2 em {font-size: 1.9em; } .jp-book-promo .left p { font-size: 19px; color: #ccc; } .jp-book-promo.store .left ul { font-size: 18px; color: #ccc;} /*---------------------- jpNewsletterSubscriber ---------------------------------*/ .jpNewsletterSubscriber_v_2 { padding: 2em 1em; background: #444; } .jpNewsletterSubscriber_v_2 em.title { display: block; font-weight: bold; margin-bottom: 1em; font-family: "Roboto", serif; } .jpNewsletterSubscriber_v_2 em.title { color: #eee;} .jpNewsletterSubscriber_v_2 em.title { font-size: 1.2em; text-align: center; font-family: "Raleway", sans-serif;} .jpNewsletterSubscriber_v_2 em.title small { color: #ccc; font-size: .9em; display: block; margin-top: 1em;} .jpNewsletterSubscriber_v_2 p.n_desc { font-size: 1em; text-align: center; color: #ccc; margin: .5em 0 1em 0; display: block; } .jpNewsletterSubscriber_v_2 fieldset { display: flex;} .jpNewsletterSubscriber_v_2 fieldset input { padding: .5em 1em; background: #eee; border: 1px solid #ccc; font-size: 1em; display: block; width: 100%; border-radius: 3px;} .jpNewsletterSubscriber_v_2 fieldset input.email { margin: 0 .5em; } .jpNewsletterSubscriber_v_2 fieldset input.name { } .jpNewsletterSubscriber_v_2 fieldset a { display: block; background: #b52121; color: #fff; padding: .5em 1em; width: 120px; text-align: center;} .jpNewsletterSubscriber_v_2 fieldset a { font-weight: bold; font-family: "Raleway", sans-serif; font-size: .9em; text-transform: uppercase; border-radius: 3px; } .jpNewsletterSubscriber_v_2 fieldset a:hover { text-decoration: none; background: #095B8C;} .jpNewsletterSubscriber_v_2 .info-sec { display: block; } .jpNewsletterSubscriber_v_2 .thank-you { display: none; } .jpNewsletterSubscriber_v_2 .thank-you em { color: #9ee47d; display: block; font-size: 1.3em; margin-bottom: 0.5em; } .jpNewsletterSubscriber_v_2 .thank-you p { font-size: .9em; color: #eee;} .jpNewsletterSubscriber_v_2 .error-sec { display: none; font-size: .8em; background: #ffcccc; color: #973e3e; padding: .8em .5em; margin-top: 1em;} /* popup mode */ .jpNewsletterSubscriber_v_2.popup { background: none; padding: 0;} .jpNewsletterSubscriber_v_2.popup .popup_container { position: fixed; background: #000; z-index: 9999; width: 100%; height: 100%; left: 0; top: 0; overflow: auto; } .jpNewsletterSubscriber_v_2.popup .popup_container { background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); } .jpNewsletterSubscriber_v_2.popup .popup_content { width: 100%; max-width: 600px; background: #222; margin: 5% auto;} .jpNewsletterSubscriber_v_2.popup .popup_content { border-radius: 10px; padding: 2em;} .jpNewsletterSubscriber_v_2.popup .popup_content a.close { float: right; font-size: 2em; color: #fff; padding: .5em; } .jpNewsletterSubscriber_v_2.popup .popup_content em.title { font-size: 30px; } .jpNewsletterSubscriber_v_2.popup .popup_content p.n_desc { font-size: 16px; } .jpNewsletterSubscriber_v_2.popup .popup_content fieldset { display: block;} .jpNewsletterSubscriber_v_2.popup .popup_content fieldset input { width: 95%; max-width: 300px; border-radius: 3px; margin: 1em auto;} .jpNewsletterSubscriber_v_2.popup .popup_content fieldset a { margin: 1em auto 0 auto; padding: 1em 1em; width: 150px; } .jpNewsletterSubscriber_v_2.popup .popup-trigger:hover { cursor: pointer;} /*---------------------- Free swear word list ---------------------------------*/ .free-swear-list-focus { background: #f8f8f8; border: 1px solid #ddd; padding: 2em; margin-top: 1em; display: flex; } .free-swear-list-focus .left { max-width: 700px; width: 95%;} .free-swear-list-focus .left h2 { font-size: 2em;} .free-swear-list-focus .left p { font-size: 1.1em; margin: 1em 0; } .free-swear-list-focus .right { width: 100%; max-width: 300px; } .free-swear-list-focus .right img { display: block; margin: 0 auto; width: 100%; max-width: 200px; box-shadow: 0px 5px 7px 3px rgba(0,0,0,0.31);} .free-swear-list-focus .focus-btn { display: block; width: 90%; max-width: 300px; background: #d45207; padding: 1em 1em;} .free-swear-list-focus .focus-btn { text-align: center; border-radius: 25px; color: #fff;} .free-swear-list-focus .focus-btn:hover { background: #3479be; text-decoration: none;} /*---------------------- Blog Video Section ---------------------------------*/ .blog_video_sec { background: #10699c;} .blog_video_sec .inner { max-width:1070px; width:90%; margin:0 auto; font-family: "Roboto", serif; padding: 1em; } .blog_video_sec .top_sec { display: flex; justify-content: space-between; margin-bottom: 2em;} .blog_video_sec .top_sec h3 { font-size: 1.8em; color: #fff; font-family: "Montserrat", sans-serif;} .blog_video_sec .top_sec a { font-size: .9em; color: #f6fcff;} .blog_video_sec .content-main { display: flex; } .blog_video_sec .left_main { width: 100%; max-width: 800px; margin-right: 2em; } .blog_video_sec .left_main .featured_video { padding: 1em; background: #0a3a55; border: 1px solid #1e648d;} .blog_video_sec .left_main .featured_video a { display: block; color: #a9c7f3; font-size: 1.2em; margin-top: .5em;} .blog_video_sec .right_bar {} .blog_video_sec .right_bar a.item { display: block; margin-bottom: 1em; max-width: 200px;} .blog_video_sec .right_bar a.item em { display: block; margin-top: .4em; font-size: .9em; color: #eee;} /*-------------------------------------------------------- Small Screen ---------------------------------------------------------*/ @media screen and (max-width: 940px) { /*---------------------- book promo ---------------------------------*/ .jp-book-promo .right a { width: 230px; } } @media screen and (max-width: 720px) { /*---------------------- book promo ---------------------------------*/ .jp-book-promo {} .jp-book-promo .inner { display: block; padding: 1em; width:90%; margin:0; } .jp-book-promo .left h2 { text-align: center;} .jp-book-promo .left p { text-align: center; font-size: 16px;} .jp-book-promo .left p em { display: inline; } .jp-book-promo .left ul { font-size: 15px; text-align: center; list-style: none;} .jp-book-promo .left a.get_book { margin: 1em auto; } .jp-book-promo .right { margin: 0 auto;} .jp-book-promo .right a { width: 230px; } /*---------------------- book store promo ---------------------------------*/ .jp-book-promo.store { background: linear-gradient(150deg, #333 60%, #dfb25a 50%); } .jp-book-promo.store .left h2 { font-size: 22px !important; } .jp-book-promo.store .left ul { font-size: 16px; color: #bbb;} .jp-book-promo.store .right a { width: 390px; } /*---------------------- Blog Video Section ---------------------------------*/ .blog_video_sec .content-main { display: block;} .blog_video_sec .right_bar { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1.6em; } .blog_video_sec .right_bar a.item { margin-bottom: 1em; width: 46%; max-width: 250px;} .blog_video_sec .right_bar a.item:last-child { display: none;} } @media screen and (max-width: 600px) { /* Alphabet list*/ .dictionary-alphabet li.popular { width:80px;} .dictionary-alphabet li { width:50px; margin-bottom:1.4em; font-size:1.15em; } header .logo-sec { width:190px; } header .action-sec-inner {margin-left:0; padding-right:0; } header .logo-sec img { width:150px;} header .logo-sec h2{ display:none;} /*nav sec*/ header .action-sec ul.small-nav { display: block; float:right; margin: 1em 0 0 0;} header .action-sec ul.small-nav li { float:left; margin: 0 .5em 0 1.3em;} header .action-sec ul.small-nav li:first-child { margin: 0 .5em 0 1em;} /*notification area*/ header .action-sec ul.small-nav li.notify-area {} header .action-sec ul.small-nav li.notify-area img.img-bell { width:29px;} header .action-sec ul.small-nav li.notify-area a { display:block; position:relative;} header .action-sec ul.small-nav li.notify-area a span.notify-num { color:#fff; font-size:.7em; display:block; border:1px solid #B52225; border-radius: 30%;} header .action-sec ul.small-nav li.notify-area a span.notify-num { position:absolute; top:-5px; left:14px; background:#E42929; padding:.2em .3em;} header .mobile-notification-area {} header .mobile-notification-area .notify-dropdown { background:#fff; border:1px solid #ccc; font-size:.9em;} header .mobile-notification-area .notify-dropdown .empty { font-size:1em; display:block; text-align:center; color:#999; padding:1em;} header .mobile-notification-area .notify-dropdown h6 { font-weight:bold; padding: 1em; border-bottom:1px solid #ccc; color:#333; } header .mobile-notification-area .notify-dropdown li { border-bottom:1px solid #ccc; padding:.7em; display:block; } header .mobile-notification-area .notify-dropdown li:hover { background:#F4FAFD;} header .mobile-notification-area .notify-dropdown li.unread { background: #F5FFF4;} header .mobile-notification-area .notify-dropdown li .img-icon { float:left; margin-right:1em; width:25px;} header .mobile-notification-area .notify-dropdown li .notify-content { float:left; width:100%; max-width:340px; color:#666;} header .mobile-notification-area .notify-dropdown li .notify-content em { font-weight:bold; font-size:.9em; } header .mobile-notification-area .notify-dropdown li .notify-content p { font-size:.89em; margin-top:.5em;} header .mobile-notification-area .notify-dropdown li .notify-content p em { font-size:1em;} header .mobile-notification-area .notify-dropdown li .notify-content .date { color:#999; font-size:.8em; display:block; margin-top:.5em;} header .mobile-notification-area .notify-dropdown a.link { display:block; text-align:center; font-size:.85em; font-weight:bold; padding:.7em;} header .mobile-notification-area .notify-dropdown a.link:hover {background: #F4FAFD;} header .action-sec nav { float: none; width:100%; margin-top:.5em; display:none; } header .action-sec nav li { float: none; margin-right:0;} header .action-sec nav li a { display:block; background:#111; border-bottom:1px solid #333; padding:1em .3em; } /* searchs sec*/ header .action-sec form { margin:1em 0; display:none;} header .action-sec form .search-btn-con { width:87px} header .action-sec form .search-text-con { margin-right:105px; } header .action-sec form input.text { font-size:1.06em;} /* my account sec*/ header .action-sec div.account-sec { margin:-1.6em 0 0 0; width:120px; background:#1c1c1c; border:1px solid #444; padding: .2em .6em; font-size:.9em; } header .action-sec div.account-sec.loreg {padding: .6em .6em; width:140px; } header .action-sec div.account-sec.loreg li.or { margin:0 1.2em;} header .action-sec div.account-sec.myc { margin:-1.6em 0 0 0; width:145px; background: none; border: none; padding:0; font-size:.9em; } header .action-sec div.account-sec.myc ul.my li.main a {padding:.8em 0 .8em .9em; } header .action-sec div.account-sec.myc ul.my li.dropdown ul li a { width:139px; padding:.9em 0 .9em 0; } header .action-sec .br_right.hide { display: block;} header br.small-hide { display:none;} /*notification section*/ header .action-sec .notify-icon { display:none;} /*footer*/ footer img.footer-logo { margin:0 auto 0 auto;} footer .f-alphabet ul { display:none;} footer .left { max-width:100%; float: none; margin-bottom:2em; } footer .left ul.first { margin-bottom:1em;} footer .left ul.first li { width:24%; text-align:center; margin:0;} footer .left ul.sec li { width:25%; text-align:center; margin:0;} footer .right { width:250px; float: none; margin:0 auto; } /* newsletter popup */ .jpNewsletterSubscriber_v_2.popup .popup_content { padding: 1em 0;} .jpNewsletterSubscriber_v_2.popup .popup_content .thank-you { padding: 1em;} .jpNewsletterSubscriber_v_2 fieldset input { font-size: 14px; } /*---------------------- Free swear word list ---------------------------------*/ .free-swear-list-focus { padding: 1em; display: block; border: none;} .free-swear-list-focus .left { text-align: center; max-width: 700px; width: 95%; margin: 0 auto; } .free-swear-list-focus .left h2 { font-size: 2em;} .free-swear-list-focus .left p { font-size: 1.1em; margin: 1em 0; } .free-swear-list-focus .right { width: 100%; max-width: 300px; margin: 0 auto;} .free-swear-list-focus .right img { display: block; margin: 0 auto; width: 100%; max-width: 150px;} .free-swear-list-focus .focus-btn { margin: 0 auto;} /*---------------------- youtube promo ---------------------------------*/ .jp-youtube-promo { display: block; } .jp-youtube-promo .icon-sec { max-width: 350px; width: 99%; margin: 0 0 1em 0;} .jp-youtube-promo .text-sec { width: 99%;} .jp-youtube-promo .text-sec h2 { font-size: 20px; margin-bottom: 1em; } .jp-youtube-promo .text-sec p { color: #eee; font-size: 1em; line-height: 1.7em; margin-bottom: 1em; } .jp-youtube-promo.hide-icon .icon-sec { display: none;} } @media screen and (max-width:470px) { /* logo sec*/ header .logo-sec { width:150px; } header .logo-sec img { width:130px;} /*nav sec*/ header .action-sec ul.small-nav {} header .action-sec form .search-text-con-bg { margin-left:.5em;} /*notification section*/ header .mobile-notification-area .notify-dropdown li .notify-content { max-width:240px; } /*footer*/ footer .left ul.first li { width:130px; text-align:center; margin:0 0 1em 0;} footer .left ul.sec li {width:130px; text-align:center; margin:0 0 1em 0;} } /*-------------------------------------------------------- Medium Screen ---------------------------------------------------------*/ @media screen and (min-width: 601px) and (max-width:840px) { header .logo-sec { width:210px; } header .action-sec-inner {margin-left:210px; } /*nav sec*/ header .action-sec nav { float: none; width:100%; margin-top:.5em; } header .action-sec nav li { margin-right:0; width:20%; text-align:center;} /* my account sec*/ header .action-sec div.account-sec { margin:-1.6em 0 1em 0; width:130px; background:#1c1c1c; border:1px solid #444; padding: .2em .4em; font-size:.9em; } header .action-sec div.account-sec.loreg {padding: .6em .6em; width:140px; } header .action-sec div.account-sec.loreg li.or { margin:0 1.2em;} header .action-sec div.account-sec.myc { margin:-1.6em 0 1em 0; width:190px; background: none; border: none; padding:0; font-size:.9em; } header .action-sec div.account-sec.myc ul.my li.dropdown ul li a { padding:.9em 0 .9em 0; } header .action-sec .br_right.hide.one { display: block;} /* searchs sec*/ header .action-sec form { margin-top:0} header .action-sec form .search-btn-con { width:87px} header .action-sec form .search-text-con { margin-right:105px; } header .action-sec form input.text { font-size:1.06em;} } @media screen and (min-width: 601px) and (max-width:693px) { footer img.footer-logo { margin:0 auto 0 auto;} footer .f-alphabet ul { display:none;} footer .left { max-width:100%; float: none; margin-bottom:2em; } footer .left ul.first { margin-bottom:1em;} footer .left ul.first li { width:24%; text-align:center; margin:0;} footer .left ul.sec li { width:25%; text-align:center; margin:0;} footer .right { width:250px; float: none; margin:0 auto; } }