@font-face { font-family: Allura-Regular; src: url("fonts/Allura-Regular.otf") format("opentype"); } /* bootstrap breakpoints xs = Extra small <576px sm = Small =576px md = Medium =768px lg = Large =992px xl = Extra large =1200px */ /* matching classes */ /* smallest supported screen size = 360px */ /* width */ .w_xs { width: 360px; } .w_sm { width: 576px; } .w_md { width: 768px; } .w_lg { width: 992px; } .w_xl { width: 1200px; } .w_100 { width: 100%; } /* max-width / bootstrap breakpoints */ .mw_xs { max-width: 360px; } /* col */ .mw_sm { max-width: 576px; } /* col-sm */ .mw_md { max-width: 768px; } /* col-md */ .mw_lg { max-width: 992px; } /* col-lg */ .mw_xl { max-width: 1200px; } /* col-xl */ .mw_100 { max-width: 100%; } /* not sure if this would even work */ /* container max-width */ .mcw_xs { max-width: 360px; } .mcw_sm { max-width: 540px; } .mcw_md { max-width: 720px; } .mcw_lg { max-width: 960px; } .mcw_xl { max-width: 1140px; } /* hide when <= 360, 540, 720, etc. */ .hide_360 { display: none; } .hide_576 { display: none; } .hide_768 { display: none; } .hide_992 { display: none; } @media (min-width: 360px) { .hide_360 { display: inline-block; } } @media (min-width: 576px) { .hide_576 { display: inline-block; } } @media (min-width: 768px) { .hide_768 { display: inline-block; } } @media (min-width: 992px) { .hide_992 { display: inline-block; } } /* additional sizes */ .hide_400 { display: none; } .hide_450 { display: none; } .hide_500 { display: none; } @media (min-width: 400px) { .hide_400 { display: inline-block; } } @media (min-width: 450px) { .hide_450 { display: inline-block; } } @media (min-width: 500px) { .hide_500 { display: inline-block; } } /* other size utilities */ .w640 { width: 100%; max-width: 640px; } /* for matching bootstrap colors for buttons and alerts, just use the class by itself: .btn-* .alert-* primary secondary success danger warning info light dark */ /* end matching classes */ /* helper classes */ .rel { position: relative; } .abs { position: absolute; } span.line_wrap { display: inline-block; } /*

first line second line (when wrapping)

*/ .reset_text { font-size: initial; font-weight: initial; line-height: initial; } /* end helper classes */ /* shared / overrides */ /* TODO: more color? #D92B3C */ .h1, h1 { font-size: 2rem; color: #214058; line-height: 1.1; } /* 2.50rem */ .h2, h2 { font-size: 1.75rem; color: #326387; line-height: 1.2; } /* 2.00rem */ .h3, h3 { font-size: 1.5rem; color: #39739D; line-height: 1.3; } /* 1.75rem */ .h4, h4 { font-size: 1.25rem; color: #478ABC; line-height: 1.4; } /* 1.50rem */ .h5, h5 { font-size: 1.15rem; color: #214058; line-height: 1.5; font-weight: bold; } /* 1.25rem */ h1, h2, h3, h4, .h1, .h2, .h3, .h4 { margin-top: 1rem; margin-bottom: .5rem; } h5:not('modal-title'), .h5:not('modal-title') { margin-top: .5rem; margin-bottom: .5rem; } h1:first-of-type, .h1:first-of-type, h2:first-of-type, .h2:first-of-type, h3:first-of-type, .h3:first-of-type, h4:first-of-type, .h4:first-of-type, h5:first-of-type, .h5:first-of-type{ margin-top: 0; } a { color: #116ABB; font-weight: 500; text-decoration: underline; } a.badge { text-decoration: none; } a.link_muted { color: #333333; font-weight: 400; text-decoration: none; } body { caret-color: transparent; } /* turn off stupid blinking cursor */ textarea, input { caret-color: black; } /* turn back on for text areas and inputs, then turn back on anywhere else needed */ /* border: 1px dashed #555555; padding: 3px 5px 4px 5px; box-shadow: rgb(0 0 0 / 40%) -2px 2px 3px; */ .badge.DDDbadge-selected { /*border: 1px dashed #555555;*/ padding: 3px 5px 4px 5px; box-shadow: rgb(0 0 0 / 40%) -2px 2px 3px; } .badge.badge-selected { border: 1px solid; } form { margin-block-end: 0; } /* TODO: check if this breaks anything, it's for sub page cancel modal */ /* modal defaults */ .modal-body { text-align: left; padding: 10px; } .modal .btn.btn-ok { color: #FFFFFF; } .modal-header { padding: 10px; } .modal-header .close span { cursor: pointer; } @media (max-width: 576px) { .modal .modal-dialog { margin: 10px 10px 30px 10px; } /* make it easier to dismiss on mobile */ } .btn { text-decoration: none; max-width: 345px; } .alert { width: 100%; padding: 10px; } .alert.alert-warning { border-color: #FFE188; } .alert-dismissible .close { padding: 7px; } /* .alert-dismissible .close { padding: 0px 4px 4px 4px; background: white; } */ .card { width: 100%; } .form-group label.col-form-label { font-weight: 600; } .dashboard_select .option_highlight { color: red; } .dashboard_select .option_mute { color: gray; } /* input[type=checkbox], input[type=radio] { width: 16px; height: 16px; vertical-align: text-bottom; } no mobile chrome */ input[type=checkbox], input[type=radio] { transform: scale(1.4); vertical-align: middle; } .form-check-input { margin-top: .5rem; } /* new x/twitter icon override */ .fa.fa-x { background-image: url("https://cdn.marriedfun.org/img/x_32.png"); background-size: 40px; background-repeat: no-repeat; position: relative; top: 12px; } .signup_button { margin-left: -3px; } .container { padding-left: 5px; padding-right: 5px; } .card-body { padding: 10px; background: #FFFFFF; } .card { /* margin-top: 5px; */ overflow: hidden; border: 1px solid #C1DEF9; } .card.col_1_card { overflow: hidden; } /* was initial ??? */ .progress.sm { height: .5rem; } .progress.lg { height: 1.5rem; } .btn:not([disabled]) { cursor: pointer; } .btn:disabled { cursor: not-allowed; } .btn.disabled { cursor: not-allowed; } .navbar-toggler { cursor: pointer; } .navbar-toggler-icon.custom_toggler { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } .navbar { padding: 5px; } #header_navbar { margin-bottom: 10px; background: #FFFFFF; border-bottom: 1px solid #C1DEF9; box-shadow: 0px 0px 10px 0 rgba(13,75,132,.12); } .footer { font-size: 12px; width: 100%; text-align: center; color: #000000; } .footer a { } .footer_logo { width: 100%; } /* remove other one */ .footer .footer_left { text-align: left; } .footer .footer_image { width: 50px; } .footer .footer_desc { padding: 4px 0 0 10px; line-height: 1.3; font-size: 16px; } .feature_box h2, .feature_box h3, .access_offer_inner h2 { margin-top: 0; } .article_card h5 { margin-top: 0; } .feature_box hr { margin: 10px 0; } .feature_box p { margin: 0; } .heading_resources .resources { padding-top: 2px; text-align: right; } @media (min-width: 424px) { .heading_resources .resources { max-width: 212px; } } .heading_resources .resources_menu button.resources_button i { font-size: 20px; } .heading_resources .resources_menu button.resources_button { padding: 7px 8px 5px 8px; } .heading_resources .resources_menu button.resources_button.dropdown-toggle { padding: 0 8px; } .heading_resources .resources .resources_menu { } .heading_resources .resources .resources_menu.empty_links button.dropdown-toggle { background: #E89FBC; } /* dev only */ .navbar-brand { width: 100%; text-align: center; } .navbar-brand img { height: 36px; } #header_extended { } .tagline { color: #000000; font-style: italic; text-align: center; font-size: 15px; margin-bottom: 5px; } @media (min-width: 576px) { .tagline { font-size: large; } } /*#ratings_stars_select, #ratings_group_select, #watch_shared_select, #watch_group_select {*/ .filter_select { margin-top: 10px; color: #FFFFFF; background-color: #007BFF; border-color: #007BFF; } .anchor { display: block; position: relative; top: -70px; visibility: hidden; } /* compensate for fixed header. e.g.
*/ .scroll_top { display: none; /* hidden by default */ position: fixed; /* fixed/sticky position */ bottom: 20px; /* place the button at the bottom of the page */ right: 30px; /* place the button 30px from the right */ z-index: 99; /* make sure it does not overlap */ } .scroll_top:hover { background-color: #555; /* Add a dark-grey background on hover */ } .loader_wrapper { display: none; position: fixed; z-index: 1050; background: rgba(0,0,0,.3); width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader { position: absolute; border: 10px solid #91C5FF; /* larger */ border-top: 10px solid #EA1B23; /* smaller */ border-radius: 50%; width: 80px; height: 80px; animation: spin 1.5s linear infinite; left: 50%; top: 50%; margin-left: -40px; margin-top: -100px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* go larger than 1140 + 30 = 1170 */ @media (min-width: 576px) { .container { max-width: 100%; } } /* default: 576|540 */ @media (min-width: 768px) { .container { max-width: 720px; } } /* default: 768|720 */ @media (min-width: 992px) { .container { max-width: 960px; } } /* default: 992|960 */ @media (min-width: 1200px) { .container { max-width: 1210px; } } /* default: 1200|1140 */ @media (min-width: 992px) { #footer_navbar { height: initial; } .footer { font-size: initial; } .navbar-brand img { height: 54px; } } .atools a { color: #668; } .environment_bar { text-align: center; color: #FFFFFF; font-weight: bold; position: relative; } .environment_bar.dev { background: #FF0000; } .environment_bar.demo { background: #00DD00; } .environment_debug_box { display: none; } .environment_debug_toggle { position: absolute; left: 4px; bottom: 0; color: blanchedalmond; } .bs_progress.progress { position: relative; } .bs_progress.progress .progress_overlay { position: absolute; bottom: 0; text-align: center; width: 100%; font-weight: bold; } .bs_progress .progress-bar { color: darkblue; } .list_no_margin { margin: 0; } body { min-height: 100vh; position: relative; margin: 0; } #footer_navbar { width: 100%; background: #FFFFFF; border-top: 1px solid #C1DEF9; box-shadow: 0px 0px 10px 0 rgba(13,75,132,.12); margin-top: 20px; } .container.main { margin: 0 auto; padding-top: 63px; min-height: 50vh; } @media (min-width: 992px) { .container.main { padding-top: 79px; min-height: 75vh; } } .contents { margin-top: 5px; } /* BHC accordion tab list - can be overriden inline */ .accordion_tab_list .nav-tabs { display: none; } @media (min-width: 768px) { .accordion_tab_list .nav-tabs { display: flex; } .accordion_tab_list .card { border: none; } .accordion_tab_list .card .card-header { display: none; } .accordion_tab_list .card .collapse{ display: block; } } @media (max-width: 767px) { .accordion_tab_list .tab-pane { display: block !important; opacity: 1; } } /* BHC accordion toggle icons */ .accordion i.fa-plus-square-o { color: #888888; } .accordion i.fa-minus-square-o { color: #888888; } .accordion .accordion_toggle { position: absolute; left: -4px; top: -22px; } .accordion .collapsed .accordion_toggle .fa-minus-square-o { display: none; } .accordion .collapsed .accordion_toggle .fa-plus-square-o { display: block; } .accordion .accordion_toggle .fa-minus-square-o { display: block; } .accordion .accordion_toggle .fa-plus-square-o { display: none; } /* BHC collapse toggle icons */ i.fa-plus-square-o { color: #888888; cursor: pointer; } i.fa-minus-square-o { color: #888888; cursor: pointer; } .collapse_toggle { position: absolute; left: -4px; top: -22px; } .collapse_toggle .collapsed.fa-minus-square-o { display: none; } .collapse_toggle .collapsed.fa-plus-square-o { display: block; } .collapse_toggle .fa-minus-square-o { display: block; } .collapse_toggle .fa-plus-square-o { display: none; } /* custom */ body { background: #ECF5FD; line-height: 1.5; } .position_relative { position: relative; } .container.page { background: #FFFFFF; } a.dropdown-item .fa, a.nav-link .fa { color: red; margin-right: 8px; font-size: 18px; } .refresh_button { position: absolute; top: 10px; right: 0; } .refresh_button i.fa-refresh { font-size: 23px; } .container .card-header { padding: 10px; font-weight: bold; font-size: larger; color: #444444; } /* new version */ /*.page_index_main { margin-top: -20px; } @media (max-width: 992px) { .page_index_main { margin-top: 0; } }*/ .page_index_main h2 a { text-decoration: none; color: inherit; } .home_card { margin-bottom: 10px; cursor: pointer; } .home_card .card-body { padding: 0; } .home_label_holder { margin-bottom: -15px; } .home_label { position: relative; margin: 0 auto; bottom: 16px; width: 90%; max-width: 200px; text-align: center; background: #2F5B80; font-weight: bold; border: 2px solid #ECF5FD; z-index: 1; border-radius: 7px; padding: 0 0 2px 0; color: #FFFFFF; } .home_label a { color: #FFFFFF; text-decoration: none; } .quote_otd { margin-top: 10px; } .featured_idea_holder { position: relative; width: 100%; } .featured_idea { color: #FFFFFF; text-decoration: none; position: absolute; top: 25px; text-align: center; font-weight: bold; z-index: 1; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); font-size: 24px; padding: 0 20px 4px 20px; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(221,221,221,.6) 50%, rgba(255,255,255,0) 100%); text-shadow: -1px -1px 0 #333333, 1px -1px 0 #333333, -1px 1px 0 #333333, 1px 1px 0 #333333; } /* old version */ .card.home_page .card-body { background-color: #F5C6CB; background-image: url("https://cdn.marriedfun.org/img/home/background.jpg"); } .card.home_page #carousel { } .card.home_page h3 { font: 2.5em Allura-Regular; color: #9B1C28; line-height: .8em; margin: 1em 0 .5em 0; border-bottom: 2px dashed #FE4F83; } .card.home_page h4 { font-size: 1.2em; font-weight: bold; color: #9B1C28; margin: .7em 0 .4em 0; } .card.home_page p { } .home_page .home_intimacy_tracker { border: 1px solid #FFFFFF; border-radius: 5px; overflow: hidden; } .card_shadow { box-shadow: -2px 2px 8px 0 rgba(40,40,40,.12); } /* link boxes */ /* auto width */ .lb.card { padding: 10px 10px 0 10px; } .lb_links.row { margin-right: -5px; margin-left: -5px; } /*.lb_links.row a { width: 100%; max-width: 400px; margin-bottom: 10px; }*/ .lb_links.row .col { width: 100%; max-width: 400px; margin-bottom: 10px; } .lb_links.row .col { padding-left: 5px; padding-right: 5px; } .lb_links.row i.fa { padding-right: 10px; padding-right: 10px; } /* defined width */ .lb_2.card { padding: 10px 10px 0 10px; } .lb_links_2.row { margin-right: -5px; margin-left: -5px; } .lb_links_2.row a { width: 100%; max-width: 400px; margin-bottom: 10px; } .lb_links_2.row .col-12, .lb_links_2.row .col-6, .lb_links_2.row .col-4, .lb_links_2.row .col-3, .lb_links_2.row .col-1, .lb_links_2.row .col-sm-12, .lb_links_2.row .col-sm-6, .lb_links_2.row .col-sm-4, .lb_links_2.row .col-sm-3, .lb_links_2.row .col-sm-1, .lb_links_2.row .col-md-12, .lb_links_2.row .col-md-6, .lb_links_2.row .col-md-4, .lb_links_2.row .col-md-3, .lb_links_2.row .col-md-1, .lb_links_2.row .col-lg-12, .lb_links_2.row .col-lg-6, .lb_links_2.row .col-lg-4, .lb_links_2.row .col-lg-3, .lb_links_2.row .col-lg-1, .lb_links_2.row .col-xl-12, .lb_links_2.row .col-xl-6, .lb_links_2.row .col-xl-4, .lb_links_2.row .col-xl-3, .lb_links_2.row .col-xl-1 { padding-left: 5px; padding-right: 5px; } .lb_links_2.row i.fa { padding-right: 10px; padding-right: 10px; } .facebook_home { width: 100%; } .fb_box_right { font-size: .95rem; margin-bottom: 8px; } .fb_home { max-width: 360px; /*padding: 10px 5px;*/ margin: 0 auto; text-align: center; border-radius: 5px; } .sharethis-inline-share-buttons { margin-bottom: 8px; max-width: 500px; } .ad { background: #CCCCCC; overflow: hidden; } .ad_right { background: #CCCCCC; width: 310px; overflow: hidden; } .ad_inner { text-align: center; padding-top: 5px; padding-bottom: 5px; } /* text-center pb-2 pt-2 pb-md-0 pt-md-0 */ .ad_300x250 { width: 300px; height: 250px; overflow: hidden; margin: 0 auto; } @media (min-width: 576px) { .ad_right { width: 100%; } } @media (min-width: 768px) { .ad_right .ad_inner { padding-top: 5px; padding-bottom: 5px; margin: 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; } } .tooltips { color: #8B0000; font-size: larger; } .tooltip_superscript { vertical-align: super; font-size: 14px; } .tooltip .tooltip-inner { background-color: #337AB7; /* border: 1px solid #FFFFFF; box-shadow: 0 0 20px #555555; */ } .tooltip.top > .tooltip-arrow { border-top-color: #337AB7; } .tooltip.right > .tooltip-arrow { border-right-color: #337AB7; } .tooltip.bottom > .tooltip-arrow { border-bottom-color: #337AB7; } .tooltip.left > .tooltip-arrow { border-left-color: #337AB7; } .tooltip.bs-tooltip-top > .arrow::before { border-top-color: #337AB7; } .tooltip a { color: yellow; } .tooltip.show { opacity: .95; } /* .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before border-top-color: red; */ .require_login { margin-bottom: 10px; } .dev_message { padding-left: 10px; font-size: smaller; font-style: italic; } .feature_box { margin-bottom: 10px; padding: 10px; position: relative; border-radius: 5px; border: 1px solid #C1DEF9; color: #333333; background: #FFFFFF; } .feature_box a:not(.btn) { color: #0000B7; } .feature_box .col-12, .feature_box .col-sm-6, .feature_box .col-md-4 { padding: 0; } .feature_box.row { margin-left: 0; margin-right: 0; } .feature_box.red { border: 1px solid red; } .feature_box.blue { border: 1px solid blue; } .feature_box.green { border: 1px solid green; } .main.landing .video_box.feature_box { width: 100%; padding: 2px 10px 10px 10px; overflow: hidden; } .main.intro .video_box.feature_box { padding: 0; border: 0; margin: 0; } .affiliate_box { margin-bottom: 10px; } .box_shadow { border: 1px solid #FFFFFF; border-radius: 5px; overflow: hidden; box-shadow: 0 0 20px #555555; } .box_shadow.red { box-shadow: 0 0 20px #F75E6E; } .box_shadow.blue { box-shadow: 0 0 20px #4469A8; } .box_shadow.green { box-shadow: 0 0 20px #47B03C; } .feature_list i.fa-li { color: green; font-size: 20px; line-height: 20px; } .feature_list.red i.fa-li { color: red; } .feature_list.red { border-color: red; } .feature_list.fa-ul { margin-bottom: 0; } /* cc - REF# 626482 */ #cc_box { background-color: rgba(20,20,20,0.9); min-height: 26px; font-size: 14px; color: #CCCCCC; line-height: 26px; padding: 8px 0 8px 30px; font-family: "Trebuchet MS",Helvetica,sans-serif; position: fixed; bottom: 0; left: 0; right: 0; display: none; z-index: 9999; text-align: center; } .cc_button { width: 175px; } #cc_box a { color: #4B8EE7; text-decoration: none; margin-right: 30px; } /* end cc */ /* shorten_hide text */ .sh_text .sh_visible { } .sh_text .sh_toggle { cursor: pointer; } .sh_text .sh_hidden { display: none; } .sh_text .sh_more { color: #007BFF; } /* end shorten_hide text */ /* REF# 917883 - promotions */ .site_message .dismiss_message_button { float: right; margin: -8px -8px 5px 5px; padding: 0 1px 0 2px; color: red; background: #FFFFFF; cursor: pointer; font-size: 23px; } .site_message.alert { margin-bottom: 10px; } .site_message.alert p { text-shadow: #FFFFFF 0px 0px 10px; } @media (min-width: 992px) { .site_message.alert { background-size: cover; height: 150px; } } .site_message.alert.valentines_day { background-image: url(https://cdn.marriedfun.org/img/misc/valentines_promo_background.png); } .site_message.alert.mothers_day { background-image: url(https://cdn.marriedfun.org/img/misc/mothers_day_promo_background.png); } .site_message.alert.independence_day { background-image: url(https://cdn.marriedfun.org/img/misc/independence_day_promo_background.png); color: #FFFFFF; } .site_message.alert.independence_day p { text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1); } .site_message.alert.valentines_day span { font-weight: bold; color: red; background: #FFFFFF; padding: 0 5px; border-radius: 5px; } .site_message.alert.valentines_day_2020 p { font-size: 20px; } @media (min-width: 480px) { .site_message.alert.valentines_day_2020 p { font-size: 28px; } } .site_message.alert.year_2023 p { font-size: 20px; } .site_message.alert.year_2025 p { font-size: 20px; } @media (min-width: 480px) { .site_message.alert.year_2023 p { font-size: 28px; } .site_message.alert.year_2025 p { font-size: 25px; } } .site_message.alert.black_friday { background-image: url(https://cdn.marriedfun.org/img/misc/black_friday_promo_background.jpg); background-size: cover; min-height: 150px; } .site_message.alert.black_friday p { color: #FFFFFF; text-shadow: #000000 0px 0px 4px; text-align: center; } .site_message.alert.black_friday a.btn.btn-success { position: absolute; right: 10px; bottom: 40px; opacity: .9; } .site_message.alert.black_friday a.btn.btn-success:hover { opacity: 1; } @media (min-width: 480px) { .site_message.alert.black_friday a.btn.btn-success { position: absolute; right: 10px; bottom: 10px; opacity: 1; } } .site_message.alert.year_end_2019 { background-image: url(https://cdn.marriedfun.org/img/misc/year_end_2019_promo_background.jpg); background-size: cover; min-height: 150px; } .site_message.alert.year_end_2019 p { color: #FFFFFF; text-shadow: #000000 0px 0px 4px; text-align: center; font-size: 21px; } .site_message.alert.year_end_2019 a.btn.btn-success { position: absolute; right: 10px; bottom: 10px; } .site_message.alert.year_end_2019 .offer_details p { font-size: 16px; margin-top: 10px; } @media (min-width: 520px) { .site_message.alert.year_end_2019 p { font-size: 26px; } .site_message.alert.year_end_2019 .offer_details p { font-size: 20px; margin-top: 10px; } } @media (min-width: 700px) { .site_message.alert.year_end_2019 p { font-size: 36px; } } .site_message.alert.year_end_2020 { background-image: url(https://cdn.marriedfun.org/img/misc/year_end_2020_promo_background.jpg); background-size: cover; min-height: 150px; } .site_message.alert.year_end_2020 p { color: #FFFFFF; text-shadow: #000000 0px 0px 4px; text-align: center; font-size: 21px; } .site_message.alert.year_end_2020 a.btn.btn-success { position: absolute; right: 10px; bottom: 10px; } .site_message.alert.year_end_2020 .offer_details p { font-size: 16px; margin-top: 10px; } @media (min-width: 520px) { .site_message.alert.year_end_2020 p { font-size: 26px; } .site_message.alert.year_end_2020 .offer_details p { font-size: 20px; margin-top: 10px; } } @media (min-width: 700px) { .site_message.alert.year_end_2020 p { font-size: 36px; } } .site_message p { margin-bottom: 0; line-height: 1.4em; } /* end promotions */ .auth_modal .modal-body { padding: 0; } .auth_modal .floating_close_button { position: relative; } .auth_modal .close_button { position: absolute; top: 4px; right: 8px; } .auth_form .social_login .btn.btn-social { color: #FFFFFF; min-width: 220px; font-size: 16px; width: 100%; max-width: 350px; } .auth_form .social_login .btn.btn-social .fa { font-size: 20px; padding-top: 2px; } .auth_form .social_login .btn.btn-twitter:hover { color: #FFFFFF; } .auth_form .social_login .btn.btn-facebook:hover { color: #FFFFFF; } .auth_form .social_login .btn.btn-google:hover { color: #FFFFFF; } .auth_form .social_login .sign_up_text { font-weight: 600; text-align: center; margin-bottom: 10px; margin-top: 10px; } .auth_form .social_login .login_buttons .grid_inner { text-align: center; } .auth_form .login_tos { font-size: smaller; text-align: center; } .auth_form .text_divider { border-bottom: 1px solid #D4DCE4; text-align: center; } .auth_form .text_divider span { color: #97A9BB; position: relative; top: 0.7rem; background: #FFFFFF; padding: 10px; } .auth_form .login_form_logo img { height: 40px; margin: 5px; } .auth_form .auth_button { width: 100%; max-width: 350px; margin-top: 10px; } @media (min-width: 576px) { .auth_form .auth_button { max-width: 250px; } } .auth_form .toggle_hide_password { color: #999999; } .auth_form .input-group-text { background: transparent; border-left: 0; } .auth_form #user_password_new { border-right: 0; } .auth_form .forgot_password_outer { position: relative; } .auth_form .forgot_password { position: absolute; bottom: 61px; right: 0; } @media (min-width: 576px) { .auth_form .forgot_password { position: initial; text-align: right; margin-top: -13px; margin-bottom: 10px; } } .auth_form .captcha { border: 1px solid #DDDDDD; border-radius: 5px; background: #F8F8F8; overflow: hidden; } .auth_form .captcha img { border: 0; margin: 0 auto; } .auth_form .form-group:last-of-type { margin-bottom: 0; } /* add button for apple which isn't included for some reason... */ /* lighter #282B33, darker #15161A, darkest #0C0C0E */ .btn-apple { color: #FFFFFF; background-color: #282B33; border-color:rgba(0,0,0,0.2); } .btn-apple:focus, .btn-apple.focus { color: #FFFFFF; background-color: #15161A; border-color: rgba(0,0,0,0.2); } .btn-apple:hover { color: #FFFFFF; background-color: #15161A; border-color: rgba(0,0,0,0.2); } .btn-apple:active, .btn-apple.active, .open > .dropdown-toggle.btn-apple { color: #FFFFFF; background-color: #15161A; border-color: rgba(0,0,0,0.2); } .btn-apple:active:hover, .btn-apple.active:hover, .open > .dropdown-toggle.btn-apple:hover, .btn-apple:active:focus, .btn-apple.active:focus, .open > .dropdown-toggle.btn-apple:focus, .btn-apple:active.focus, .btn-apple.active.focus, .open > .dropdown-toggle.btn-apple.focus { color: #FFFFFF; background-color: #0C0C0E; border-color: rgba(0,0,0,0.2); } .btn-apple:active, .btn-apple.active, .open > .dropdown-toggle.btn-apple { background-image: none; } .btn-apple.disabled:hover, .btn-apple[disabled]:hover,fieldset[disabled] .btn-apple:hover, .btn-apple.disabled:focus, .btn-apple[disabled]:focus,fieldset[disabled] .btn-apple:focus, .btn-apple.disabled.focus, .btn-apple[disabled].focus,fieldset[disabled] .btn-apple.focus { background-color: #15161A; border-color:rgba(0,0,0,0.2); } .btn-apple .badge { color: #15161A; background-color: #FFFFFF; } .status_message { margin-bottom: 10px; } .signup_box { overflow: hidden; } .signup_box .dismiss_button { position: absolute; top: 1px; right: 2px; z-index: 2; color: red; cursor: pointer; font-size: 21px; } .signup_box .form-group { margin-bottom: 0; } .signup_box p { line-height: 1.5em; } .signup_box_left { line-height: 1.7em; } .category_box { padding: 10px; } .category_box .heading { font-weight: bold; font-size: 1.5em; text-decoration: underline; } .category_box ul { padding: 0; margin: 0; } .category_box li { list-style: none; font-weight: bold; } .category_box a { display: block; } .category_box ul li { line-height: 1.5em; } .category_box ul ul li { font-weight: normal; } .category_box li:first-child { } /*.category_box ul ul li:last-child { padding-bottom: 10px; }*/ .category_box ul ul a { margin-left: 0; } .category_box ul ul ul a { margin-left: 20px; } .additional_content_box ul { padding-inline-start: 20px; margin-bottom: 0; } .additional_content_box ul li { list-style: none; } .social_media_box ul { margin: 0; } .social_media_box h4 { margin-bottom: 10px; text-align: center; } /* line up with facebook_box on small screens */ .product_box h4 { font-size: 14px; } .product_box .col-sm-6, .product_box .col-xl-4 { width: 100%; } /* ugly override */ /* col-12 col-sm-6 col-xl-4 */ .carousel { min-height: 150px; margin: 1px 0; } .carousel .carousel-indicators li { background: #91C5FF; border: 1px solid #E1EFFF; height: 5px; cursor: pointer; } .carousel .carousel-indicators li.active { background: #FF557F; border: 1px solid #FFECF1; } .carousel .carousel-indicators { bottom: -6px; } .carousel .carousel-inner > .carousel-item { /* overrides speed (0.6s orig) */ /*-webkit-transition: 1.2s ease-in-out left; -moz-transition: 1.2s ease-in-out left; -o-transition: 1.2s ease-in-out left; transition: 1.2s ease-in-out left; transform .6s ease,-webkit-transform .6s ease; */ } #promotion_button, #promotion_login_button { margin-bottom: 5px; } /* #carousel .carousel-item { transform: scale(1.3); height: 130%; } */ /* / * not sure why the media queries seem to be 50px off * / .card .index a.btn { line-height: 40px; } .card .index .btn { width: 100%; / *max-width: 440px; margin-bottom: 10px; * /height: 50px; } @media (max-width: 400px) { .card .index .btn { width: 100%; max-width: 100%; } / * .card .index .btn:last-of-type { margin-bottom: 0; } * / } @media (min-width: 500px) { .card .index .btn { width: 49.5%; max-width: 49.5%; } } @media (min-width: 1200px) { .card .index .btn { width: 32.8%; max-width: 32.8%; } } .card .index .btn i { font-size: 24px; padding-right: 10px; } .card .index .btn i.button_icon_art { font-size: 22px; } .card .index .btn i.button_icon_games { font-size: 28px; } .card .index .locked { } */ .quick_links { } .quick_links .btn { width: 100%; padding: 5px 0; } .quick_links .btn i { font-size: 24px; padding-right: 10px; } @media (min-width: 500px) { .OLDquick_links .btn i { font-size: 24px; padding-right: 10px; } } .card.getting_started img { border: 1px solid #DDDDDD; } .index_buttons { padding: 10px; } .index_buttons_alert { margin: 8px 0 10px 0; padding: 0; } .card.card_top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-top: 0; } .card.card_bottom { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; } .card p:last-of-type { margin-bottom: 0; } /* .button_icon_back { font-size: 24px; padding-right: 10px; vertical-align: bottom; } .button_icon_art { font-size: 24px; padding-right: 10px; vertical-align: bottom; } .button_icon_games { font-size: 28px; padding-right: 10px; vertical-align: bottom; } .button_icon_ana { font-size: 24px; padding-right: 10px; vertical-align: text-bottom; } .button_icon_pos { font-size: 24px; padding-right: 10px; vertical-align: text-bottom; } .button_icon_ero { font-size: 24px; padding-right: 10px; vertical-align: text-bottom; } .button_icon_products { font-size: 22px; padding-right: 10px; vertical-align: text-bottom; } .button_icon_help { font-size: 22px; padding-right: 10px; vertical-align: text-bottom; } */ .card .index .btn .button_icon_dating_dashboard { font-size: 20px; } .card .index .btn .button_icon_intimacy_tracker { font-size: 20px; } .card.position { margin-bottom: 20px; } .position_list { padding: 0 10px; } .pos_carousel { max-width: 500px; } /* modals */ .dynamic_modal .modal-body { padding: 10px; } .modal_body_variable_height { position: relative; overflow-y: auto; height: 100%; min-height: 200px; max-height: 500px; background: #B0E8FF; } /* registration forms */ .auth { max-width: 710px; } .auth .card-body { } /* auth auth_login / login_form auth auth_register / register_form auth auth_edit / edit_account_form auth auth_reset / password_reset_form auth auth_password / new_password_form auth auth_verification / email_verification_resend_form */ .auth.auth_register .card { border: 0; } #username_row { display: none; } .new_usernames { margin: 10px 0 0 0; } .select_username { width: 100%; max-width: 305px; text-align: left; } #account_modal_1 .new_usernames .select_username { margin: 0; } .new_usernames .grid_inner { border: 0; } .register_modal .auth.auth_register .card .card-body { background: #FFFFFF; } .register_modal .modal-body { padding: 0; } /* .register_modal .col-sm-8 { max-width: 100%; flex: 0 0 100%; } */ /* ugly hack */ .register_modal .auth.auth_register .register_form .btn { min-width: initial; } /* .card.pricing */ .auth.auth_register .card-header { display: none; } .auth.auth_register .form-group.row .btn { margin-bottom: 0; } .auth.auth_register .register_form .btn { min-width: initial; } .registration_notice { max-width: 600px; } .register_form .form-group { margin-bottom: 0; } .register_form .alert.alert-warning { margin: 1rem 0; } @media (min-width: 576px) { .register_form .form-group { margin-bottom: 1rem; } } .login_form #row_rememberme { display: none; } #label_rememberme { display: none; } #user_rememberme { display: none; } #welcome_modal {} .welcome_modal_buttons a.btn { width: 100%; max-width: 300px; margin-bottom: 5px; } /* top_nav */ /* .top_nav.courses_top_nav a { margin: .125em .25em .125em 0; min-width: 47.5%; } //* 2 wide *\/ @media (min-width: 321px) { .top_nav.courses_top_nav a { margin: .125em .2em .125em 0; } //* 2 wide *\/ } @media (min-width: 360px) { .top_nav.courses_top_nav a { margin: .125em .2em .125em 0; min-width: 31.5%; } //* 3 wide *\/ } @media (min-width: 480px) { .top_nav.courses_top_nav a { margin: .125em .2em .125em 0; min-width: 23.5%; } //* 4 wide **\/ } @media (min-width: 640px) { .top_nav.courses_top_nav a { margin: .5em .5em .5em 0; min-width: auto; } //* x wide /**\/ } .top_nav.admin_top_nav a { margin: .5em .5em .75em 0; } .top_nav.date_planner_top_nav { margin-bottom: 15px; } */ /* top_nav */ .top_nav { margin: 0 -0.5% 5px -0.5%; } .top_nav a { margin: 5px 2.5px; min-width: 99%; } /* 1 wide */ .top_nav.wide a { margin: 5px 2.5px; min-width: 99%; } /* 1 wide */ @media (min-width: 320px) { .top_nav a { min-width: 47.4%; } /* 2 wide */ .top_nav.wide a { min-width: 47.4%; } /* 2 wide */ } @media (min-width: 360px) { .top_nav a { min-width: 30.8%; } /* 3 wide */ .top_nav.wide a { min-width: 47.4%; } /* 2 wide */ } @media (min-width: 480px) { .top_nav a { min-width: 23.0%; } /* 4 wide */ .top_nav.wide a { min-width: 31.4%; } /* 3 wide */ } @media (min-width: 640px) { .top_nav a { min-width: auto; } /* x wide */ .top_nav.wide a { min-width: 23.0%; } /* 4 wide */ } @media (min-width: 800px) { .top_nav.wide a { min-width: auto; } /* x wide */ } /* end top_nav */ /* membership / pricing */ #cancel_membership_modal .btn { width: initial; min-width: initial; } .card.no_membership .plans { max-width: 800px; } .card.no_membership .memb .box_body { height: 200px; } .card.no_membership .memb .box_heading { font: bold 25px arial; padding: 3px 0; } .year_price, .month_price { display: none; } .year_price.visible, .month_price.visible { display: block; } .period_toggle { text-align: center; margin-top: 10px; } .period_toggle .months_free { padding-left: 5px; vertical-align: middle; font-weight: bold; color: #0199ED; } .period_toggle .months_free.inactive { text-decoration: line-through; font-weight: normal; color: #BBBBBB; } .card.pricing .lower_features { padding-left: 10px; font-weight: bold; text-decoration: underline; } .card.pricing .product_nick_name { /*margin-top: -5px;*/ } .card.pricing .product_nick_name.free_plan { /*padding: 7px 0;*/ } .card.pricing .membership_level_name { /*line-height: 14px;*/ } .card.pricing_month, .card.pricing_year, .card.pricing_lifetime { overflow: visible; } .card.pricing .pricing_free { border-color: #8B8B8B; } /* darker gray */ .card.pricing .pricing_free .card-heading { background: #C3C3C3; } /* gray */ .card.pricing .pricing_free .card-body { background: #EBEBEB; } /* lighter gray */ .card.pricing .pricing_free .card-footer { background: #F7F7F7; } /* lightest gray */ /* .card.pricing .pricing_month { border-color: #FF7991; position: relative; overflow: initial; } darker pink */ /* .card.pricing .pricing_month .card-heading { background: #FFC0CB; } pink */ /* .card.pricing .pricing_month .card-body { background: #FFECEF; } lighter pink */ /* .card.pricing .pricing_month .card-footer { background: #FFF7F7; } lightest pink */ .card.pricing .pricing_month { border-color: #007BFF; position: relative; } /* darker blue */ .card.pricing .pricing_month .card-heading { background: #9DCCFF; } /* blue */ .card.pricing .pricing_month .card-body { background: #DDEDFF; } /* lighter blue */ .card.pricing .pricing_month .card-footer { background: #EAF4FF; } /* lightest blue */ .card.pricing .pricing_year { border-color: #28A745; position: relative; } /* darker green */ .card.pricing .pricing_year .card-heading { background: #8CE39F; } /* green */ .card.pricing .pricing_year .card-body { background: #CFF3D8; } /* lighter green */ .card.pricing .pricing_year .card-footer { background: #E3F9E9; } /* lightest green */ .card.pricing .card-footer a { font-weight: normal; text-decoration: none; border-bottom: 1px dotted; } .card.pricing .pricing_free .card-footer a { color: #595959; } /* gray */ .card.pricing .pricing_year .card-footer a { color: #1B7A35; } /* green */ .card.pricing .pricing_month .card-footer a { color: #00438C; } /* blue */ /* .card.pricing .pricing_lifetime { border-color: #00EAEA; position: relative; overflow: initial; } darker blue */ /* .card.pricing .pricing_lifetime .card-heading { background: #9FFFFF; } blue */ /* .card.pricing .pricing_lifetime .card-body { background: #E6FFFF; } lighter blue */ /* .card.pricing .pricing_lifetime .card-footer { background: #F4FFFF; } lightest blue */ .card.pricing .pricing_section { color: #444444; text-align: center; } .card.pricing .discount_section { text-align: center; font-weight: bold; margin: -10px 0 10px 0; } .card.pricing .extra_info_section { text-align: center; font-weight: bold; margin: -20px 0 5px 0; } .card.pricing .pricing_col .btn { margin: 0 0 0 0; } .card.pricing .pricing_col .btn { min-width: 180px; } .card.pricing .card-body .currency { font-size: 40px; font-weight: 600; } .card.pricing .card-body .price { font-size: 50px; font-weight: 600; } .card.pricing .card-body .info { font-size: 25px; line-height: 0; } .card.pricing .card { } .card.pricing .card-heading { padding: 5px 10px; font-weight: 600; font-size: 1.4em; text-align: center; } .card.pricing .card ul { } .card.pricing .card-footer { background: #FFFFFF; padding: .5rem .5rem 0 0; } .card.pricing .pricing_col ul { margin-left: -5px; margin-bottom: 10px; } .card.pricing .pricing_col { padding: 5px 0; } @media (min-width: 576px) { .card.pricing .pricing_col { padding: 0 5px; } } .card.pricing button.stripe-button-el { margin-bottom: 2px; margin-top: 4px; } .card.pricing .continue_message { padding: 10px; margin-top: 10px; margin-bottom: 0; } .guarantee { text-align: center; } .pricing_question { font-weight: bold; font-size: smaller; line-height: 1.4; color: #555555; } .pricing_answer { font-size: smaller; line-height: 1.3; margin-bottom: 10px; color: #555555; } /* ribbon: https://www.cssportal.com/css-ribbon-generator/ */ .ribbon { position: absolute; right: -5px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon span { font-size: 10px; font-weight: bold; color: #FFFFFF; text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 100px; display: block; background: #79A70A; top: 19px; right: -21px; background: linear-gradient(#F70505 0%, #8F0808 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; } .ribbon span::before { content: ""; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #8F0808; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #8F0808; } .ribbon span::after { content: ""; position: absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #8F0808; border-bottom: 3px solid transparent; border-top: 3px solid #8F0808; } /* ribbon customizations */ .ribbon { width: 110px; height: 110px; top: -6px; } .ribbon span { font-size: 13px; line-height: 28px; width: 118px; right: -27px; text-transform: none; } .DDDpricing_month .ribbon span { background: #FF4A6A; background: linear-gradient(#FF4A6A 0%, #B0001F 100%); } .DDDpricing_month .ribbon span::before { border-left-color: #B0001F; border-top-color: #B0001F; } .DDDpricing_month .ribbon span::after { border-right-color: #B0001F; border-top-color: #B0001F; } .pricing_month .ribbon span { background: #00A6C4; background: linear-gradient(#00A6C4 0%, #006071 100%); } .pricing_month .ribbon span::before { border-left-color: #006071; border-top-color: #006071; } .pricing_month .ribbon span::after { border-right-color: #006071; border-top-color: #006071; } .pricing_year .ribbon span { background: #1BBC1B; background: linear-gradient(#1BBC1B 0%, #138413 100%); } .pricing_year .ribbon span::before { border-left-color: #138413; border-top-color: #138413; } .pricing_year .ribbon span::after { border-right-color: #138413; border-top-color: #138413; } .DDDpricing_lifetime .ribbon span { background: #00A6C4; background: linear-gradient(#00A6C4 0%, #006071 100%); } .DDDpricing_lifetime .ribbon span::before { border-left-color: #006071; border-top-color: #006071; } .DDDpricing_lifetime .ribbon span::after { border-right-color: #006071; border-top-color: #006071; } .memb_price { margin-top: 20px; font-weight: bold; font-size: 40px; color: #1E4628; } /* dumb hack for when the button disappears */ @media (min-width: 576px) and (max-width: 992px) { .memb_price { line-height: 30px; } } .memb_price_mo_yr { height: 55px; font-size: 20px; line-height: 20px; } .my_membership { background: #E1EFFF; border: 1px solid #93B6DD; } .my_membership td { padding: 5px; width: 50%; } .my_payment_information { background: #E1EFFF; border: 1px solid #93B6DD; } .my_payment_information td { padding: 5px; } .my_payment_information td:last-of-type { padding-left: 20px; } #login_modal .modal-body, #register_modal .modal-body .modal-body { padding: 5px; } #login_modal .modal-body p, #register_modal .modal-body p { display: none; } #login_modal .modal-body .alert, #register_modal .modal-body .alert { margin-bottom: 0; } #register_modal .modal-body .alert.alert-warning { margin: 10px 0; } #register_modal_free .modal-body { padding: 0; } /* #register_modal_free .modal-body { padding: 5px; } #register_modal_month .modal-body { padding: 5px; } #register_modal_year .modal-body { padding: 5px; } #register_modal_lifetime .modal-body { padding: 5px; } */ .modify_membership_modal .modal-body { padding: 10px; } #modify_membership_form .card .modal-footer button, #modify_membership_form .card .modal-footer input[type=submit] { width: 120px; min-width: 120px; } .membership_success_buttons a { margin: 10px 5px 0 0; width: 100%; max-width: 320px; } @media (min-width: 576px) { .membership_success_buttons a { width: 175px; max-width: initial; } } .purchase_gift_success_buttons a { margin: 10px 0 0 0; width: 200px; } #features_modal .modal-body { padding: 0; } #promotion_modal .modal-body { padding: 0; } #promotion_modal .modal-body .auth { max-width: 100%; } #promotion_modal .card-header { display: none; } .download_alert { padding: 15px; } .download_alert .form-check { margin-left: 15px; } .download_alert .form-check-input { /*margin-left: -2px;*/ } /* account */ .my_account { background: #E1EFFF; border: 1px solid #93B6DD; width: 100%; max-width: 500px; } .my_account td { padding: 5px; width: 50%; } #account_modal_1 .card-header, #account_modal_2 .card-header { display: none; } #account_modal_1 .card, #account_modal_2 .card, #account_modal_3 .card { margin-top: 0; } #account_modal_1 .auth, #account_modal_2 .auth { max-width: 100%; } #account_modal_1 .modal-body, #account_modal_2 .modal-body, #account_modal_3 .modal-body { padding: 5px; } #account_modal_1 .form-group, #account_modal_2 .form-group, #account_modal_3 .form-group { margin-bottom: .3em; } #account_modal_1 .auth_edit input[type=submit], #account_modal_2 .auth_edit input[type=submit] { margin-top: .5em; } #account_modal_1 .auth_edit button, #account_modal_2 .auth_edit button { margin-top: .5em; } .edit_account_form #username_adjective + span, .edit_account_form #username_animal + span { margin-bottom: 10px; } .auth_edit hr { border-top: 2px solid rgba(0,0,0,.2); } #edit_preferences .modal-body { padding: 5px; } .image_style_choices { padding: 0 10px; } .image_style_choices img { width: 31.5%; margin-right: .1em; margin-top: -1em; margin-bottom: .3em; } #image_value { margin-top: 10px; } .background_colors { margin: 0; } .background_colors div { width: 12%; height: 40px; float: left; border: 1px solid #999999; margin: 1px; cursor: pointer; color: #FFFFFF; text-align: center; line-height: 36px; text-shadow: 0px 2px 5px #000000; } select#time_zone_1 { padding: 0 2px; } .image_style_choices img { cursor: pointer; } .error_alert_hidden { display: none; } .edit_notifications .disabled { background: #DDDDDD; } .table-striped.notifications { max-width: 400px; } .table-striped.notifications .ts-heading { border-bottom: 1px solid #8EB3DB; border-top: 1px solid #8EB3DB; background: #87CEFA; } .table-striped.notifications td { width: auto; padding: 5px; } .card.unsubscribe { max-width: 800px; } .trial_message { color: #000000; margin: -3px -5px 5px -5px; height: 35px; background: pink; padding: 5px 10px; text-align: center; } @media (min-width: 768px) { .trial_message { margin: -5px 0px 5px 0px; background: pink; padding: 5px 10px; text-align: center; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } } .trial_buttons button { } .impersonation_message { color: #000000; margin: -3px -5px 5px -5px; height: 35px; background: orange; padding: 5px 10px; text-align: center; } @media (min-width: 768px) { .impersonation_message { margin: -5px 0px 5px 0px; background: orange; padding: 5px 10px; text-align: center; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } } .site_breadcrumb { color: #116ABB; margin: 0 0 0 1px; height: 31px; } .breadcrumb_home { font-size: 18px; } .facebook { margin-top: 10px; } @media (min-width: 992px) { .facebook { margin-top: 0px; } } .facebook_outer { position: relative; } .facebook_button { position: absolute; top: -30px; right: 0; } /* feature calendar */ /* calendar box-shadow: 0px 0px 8px rgba(190, 228, 200, .5);*/ .feature_calendar { width: 100%; max-width: 600px; } .feature_calendar #calendar_header { width: 100%; padding-right: 17px; margin-top: 20px; } .feature_calendar #calendar_outer { overflow: hidden; overflow-y: scroll; height: 407px; } @media (min-width: 500px) { .feature_calendar #calendar_outer { height: 614px; } } .feature_calendar table.calendar { width: 100%; font: 1.1em helvetica; box-shadow: 0px 41px 59px -37px rgba(60, 145, 83, .4); } .feature_calendar table.calendar { margin-bottom: 10px; border-collapse: collapse; } .feature_calendar table.calendar td { height: 2.5em; background: #FFFFFF; border: 1px solid #CCCCCC; padding: 0; text-align: center; font-weight: bold; width: 14.29%; cursor: pointer; } .feature_calendar table.calendar th { text-align: center; width: 14.29%; font-weight: initial; } /* older *//* table.calendar tr:not(:nth-child(2)) td.border_7 { border-top-width: 3px; border-top-color: #777777; } */ .feature_calendar table.calendar tr td.border_7 { border-top-width: 2px; border-top-color: #777777; } .feature_calendar table.calendar td.border_1:not(:first-child) { border-left-width: 3px; border-left-color: #777777; } /* add left border unless it's the first day */ .feature_calendar table.calendar td.today { border: 2px dashed #EE444D !important; } /* table.calendar tr:first-child td { border-top-width: 2px; border-top-color: #777777; } add top border on calendar */ .feature_calendar table.calendar .calendar_day { position: relative; } .feature_calendar table.calendar .calendar_day .month_label { position: absolute; left: 0; top: 2px; transform: rotate(-90deg); text-transform: uppercase; color: #333333; height: 40px; font-size: .8em; pointer-events: none; } .feature_calendar table.calendar .calendar_day .day_label { position: absolute; top: 13px; width: 100%; pointer-events: none; } .feature_calendar table.calendar .calendar_day .cell_data { height: inherit; /*background: azure;*/ } /* larger version */ @media (min-width: 500px) { .feature_calendar table.calendar { font: 1.4em helvetica; } .feature_calendar table.calendar td { height: 3em; } .feature_calendar table.calendar .calendar_day .month_label { left: -4px; top: 13px; } .feature_calendar table.calendar .calendar_day .day_label { top: 21px; } } table.key { margin-top: 20px; } table.key td { height: 25px; border: 1px solid #999999; background: #FFFFFF; padding: 0 5px; } table.key td.key_label { text-align: left; } table.key td.key_header { background: initial; border: 0; font-weight: bold; padding: 5px 0; } /* end feature calendar */ /* intimacy tracker */ .feature_calendar table.calendar td.alternate_month { background: #EEEEEE; } .feature_calendar table.calendar td.event_f { background: #FFBBBB; } /* pink */ /* REF# 027493 */ .feature_calendar table.calendar td.event_m { background: #AEE4FF; } /* blue */ .feature_calendar table.calendar td.event_b { background: #DBB3FF; } /* purple */ .feature_calendar table.calendar td.event_s { background: #CCF9CF; } /* green */ .feature_calendar table.calendar td.event_p { background: #86B088; } /* dark green / gray */ table.key td.event_f { background: #FFBBBB; width: 27px; } /* pink */ table.key td.event_m { background: #AEE4FF; width: 27px; } /* blue */ table.key td.event_b { background: #DBB3FF; width: 27px; } /* purple */ table.key td.event_s { background: #CCF9CF; width: 27px; } /* green */ table.key td.event_p { background: #86B088; width: 27px; } /* dark green / gray */ /* getting started page */ .page_getting_started .checklist { max-width: 650px; border-collapse: collapse; cursor: default; } .page_getting_started .checklist_item { border: 1px solid #DDDDDD; padding: 10px; margin-top: -1px; } .page_getting_started .checklist a.linked_item { color: initial; font-weight: initial; cursor: pointer; text-decoration: none; } .page_getting_started .checklist .checklist_item:hover { background: #EEEEEE; } .page_getting_started .checklist a.linked_item .checklist_item:hover { background: #EFEFFF; } .page_getting_started .checklist_icon { font-size: 24px; text-align: center; color: #555555; } .page_getting_started .checklist_checkmark { font-size: 24px; text-align: center; color: green; } .page_getting_started .checklist_chevron { font-size: 24px; text-align: center; color: blue; } .page_getting_started .checklist_icon.verify_email { font-size: 22px; } .page_getting_started .checklist_icon.account_linking { } .page_getting_started .checklist_icon.trial_or_subscription { font-size: 23px; } .page_getting_started .checklist_icon.demographics { font-size: 26px; } .page_getting_started .checklist_icon.time_zone { } .page_getting_started .checklist_icon.position_settings { font-size: 23px; margin-left: 2px; } .page_getting_started .checklist_icon.notifications { font-size: 20px; margin-left: -3px; } .page_getting_started .getting_started_progress { width: 95%; margin: 0 auto 15px auto; } .page_getting_started .button_list { margin: 15px 0; } /* end getting started page */ /* content - challenges */ .page_challenges #leaderboard_carousel { width: 100%; max-width: 500px; padding-bottom: 30px; font-weight: bold; } .page_challenges #leaderboard_carousel .carousel-control-next-icon { background-color: red; margin-left: 35px; } .page_challenges #leaderboard_carousel .carousel-control-prev-icon { background-color: red; margin-right: 35px; } .page_challenges #leaderboard_carousel .leaderboard { width: 100%; margin: 0; margin-top: 10px; text-align: center; border-radius: 5px; overflow: hidden; } .page_challenges #leaderboard_carousel .rank { } .page_challenges #leaderboard_carousel .username { text-align: left; } .page_challenges #leaderboard_carousel .score { padding: inherit; border: inherit; /* reset some stuff... */ } /* larger version */ @media (min-width: 500px) { .page_challenges #leaderboard_carousel .carousel-control-next-icon { margin-left: 55px; } .page_challenges #leaderboard_carousel .carousel-control-prev-icon { margin-right: 55px; } } /* https://htmlcolorcodes.com/ (use bottom 6 shades), then https://meyerweb.com/eric/tools/color-blend/#512E5F:C39BD3:8:hex (10 colors) */ /* REF# 733264 */ #leaderboard_carousel .lb_purple_header { background: #3F2349; color: #F4ECF7; line-height: 32px; } #leaderboard_carousel .lb_purple_1 { background: #512E5F; color: yellow; } #leaderboard_carousel .lb_purple_2 { background: #5E3A6C; color: yellow; } #leaderboard_carousel .lb_purple_3 { background: #6A4679; color: yellow; } #leaderboard_carousel .lb_purple_4 { background: #775286; color: yellow; } #leaderboard_carousel .lb_purple_5 { background: #845E93; color: yellow; } #leaderboard_carousel .lb_purple_6 { background: #906B9F; color: yellow; } #leaderboard_carousel .lb_purple_7 { background: #9D77AC; color: yellow; } #leaderboard_carousel .lb_purple_8 { background: #AA83B9; color: yellow; } #leaderboard_carousel .lb_purple_9 { background: #B68FC6; color: yellow; } #leaderboard_carousel .lb_purple_10 { background: #C39BD3; color: yellow; } #leaderboard_carousel .lb_indigo_header { background: #153E59; color: #F4ECF7; line-height: 32px; } #leaderboard_carousel .lb_indigo_1 { background: #1B4F72; color: yellow; } #leaderboard_carousel .lb_indigo_2 { background: #22597E; color: yellow; } #leaderboard_carousel .lb_indigo_3 { background: #2A648B; color: yellow; } #leaderboard_carousel .lb_indigo_4 { background: #316E97; color: yellow; } #leaderboard_carousel .lb_indigo_5 { background: #3879A4; color: yellow; } #leaderboard_carousel .lb_indigo_6 { background: #4083B0; color: yellow; } #leaderboard_carousel .lb_indigo_7 { background: #478EBD; color: yellow; } #leaderboard_carousel .lb_indigo_8 { background: #4E98C9; color: yellow; } #leaderboard_carousel .lb_indigo_9 { background: #56A3D6; color: yellow; } #leaderboard_carousel .lb_indigo_10 { background: #5DADE2; color: yellow; } #leaderboard_carousel .lb_red_header { background: #4D1711; color: #F4ECF7; line-height: 32px; } #leaderboard_carousel .lb_red_1 { background: #641E16; color: yellow; } #leaderboard_carousel .lb_red_2 { background: #70251D; color: yellow; } #leaderboard_carousel .lb_red_3 { background: #7B2D24; color: yellow; } #leaderboard_carousel .lb_red_4 { background: #87342B; color: yellow; } #leaderboard_carousel .lb_red_5 { background: #933C32; color: yellow; } #leaderboard_carousel .lb_red_6 { background: #9E4339; color: yellow; } #leaderboard_carousel .lb_red_7 { background: #AA4B40; color: yellow; } #leaderboard_carousel .lb_red_8 { background: #B65247; color: yellow; } #leaderboard_carousel .lb_red_9 { background: #C15A4E; color: yellow; } #leaderboard_carousel .lb_red_10 { background: #CD6155; color: yellow; } /* https://htmlcolorcodes.com/ #leaderboard_carousel .lb_purple_1 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_2 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_3 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_4 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_5 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_6 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_7 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_8 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_9 { background: #dddddd; color: yellow; } #leaderboard_carousel .lb_purple_10 { background: #dddddd; color: yellow; } dark=>light red 1: purple 2: indigo: green 3: #186a3b #58d68d #186A3B #1F7644 #26824D #2D8E56 #349A5F #3CA669 #43B272 #4ABE7B #51CA84 #58D68D yellow: #7d6608 #f4d03f #7D6608 #8A720E #977E14 #A5891A #B29520 #BFA127 #CCAD2D #DAB833 #E7C439 #F4D03F orange 2: #784212 #eb984e #784212 #854C19 #92551F #9E5F26 #AB682D #B87233 #C57B3A #D18541 #DE8E47 #EB984E */ @media (min-width: 400px) { .page_challenges .content_topic_button { max-width: 215px; } } .page_challenges .simple_table { text-align: center; } .page_challenges .simple_table th { font-size: 16px; padding: 4px; cursor: default; background: #D0E7FB; } .page_challenges .simple_table td { font-size: 14px; padding: 4px; cursor: default; border: 0; } .page_challenges .simple_table .name { text-align: left; } .page_challenges .simple_table .start { } .page_challenges .simple_table .score { border: inherit; } .page_challenges .grid img { box-shadow: none; } .page_challenges .activity { border: 2px solid #DDDDDD; height: 40px; font: 12px arial; text-align: center; vertical-align: middle; padding: 0; border-radius: 3px; overflow: hidden; } .page_challenges .activity .activity_left { width: 20px; padding: 5px; font-size: 16px; line-height: 28px; text-align: center; font-weight: bold; user-select: none; } .page_challenges .activity .activity_right { padding: 5px; user-select: none; /*line-height: 28px;*/ } .page_challenges .calendar_cell { padding: 8px 0; height: inherit; /*background: pink;*/ } @media (min-width: 576px) { .page_challenges .calendar_cell { padding: 12px 0; } } @media (min-width: 768px) { .page_challenges .calendar_cell { padding: 15px 0; } } .page_challenges .calendar_cell.points_1 { background: #FFF362; } /* yellow */ .page_challenges .calendar_cell.points_2 { background: #FFAC1C; } /* orange */ .page_challenges .calendar_cell.points_3 { background: #FFAEAE; } /* red */ .page_challenges .activity.points_1 { background: #FFFFEA; border-color: #FFF362; } .page_challenges .activity.points_2 { background: #FBEEE6; border-color: #FFC666; } .page_challenges .activity.points_3 { background: #FFE1E1; border-color: #FFAEAE; } .page_challenges .activity.points_1 .activity_left { background: #FFF362; } .page_challenges .activity.points_2 .activity_left { background: #FFC666; } .page_challenges .activity.points_3 .activity_left { background: #FFAEAE; } .page_challenges .activity.points_1.selected { box-shadow: -2px 2px 6px 0px #ACB5FD; border-color: #707DFC; border-width: 2px; } .page_challenges .activity.points_2.selected { box-shadow: -2px 2px 6px 0px #ACB5FD; border-color: #707DFC; border-width: 2px; } .page_challenges .activity.points_3.selected { box-shadow: -2px 2px 6px 0px #ACB5FD; border-color: #707DFC; border-width: 2px; } .page_challenges .activity.done { background: #CCCCCC; cursor: not-allowed; } .page_challenges .activity.done .activity_left { } .page_challenges .activity.done .activity_right { background: #CCCCCC; border-color: #AAAAAA; } .page_challenges #calendar_header { padding-right: 0; margin-top: 20px; } .page_challenges #calendar_outer { overflow: hidden; overflow-y: auto; height: auto; } @media (min-width: 500px) { .page_challenges #calendar_outer { height: auto; } } .page_challenges table.calendar td.invalid { background: #EEEEEE !important; color: #BBBBBB; cursor: default; } .page_challenges table.calendar td.invalid .month_label { color: #888888; } .page_challenges table.calendar .inner { height: inherit; } .page_challenges table.calendar .inner.completed { background: #CCF9CF; } /* green */ /* shared score box */ .page_challenges .score_box { border: 1px solid #888888; max-width: 400px; margin-top: 10px; border-color: #5A3360; border-radius: 5px; background: #F8C9F7; color: #FFFFFF; width: 100%; max-width: 360px; font-weight: bold; padding: 5px 10px; background-image: linear-gradient(to right, #5A3360, #F8C9F7); box-shadow: -2px 2px 6px 0px #BBBBBB; } .page_challenges .score_box .total_score_left { color: #7ACAE9; } .page_challenges .score_box .total_score_right { color: #7ACAE9; padding-left: 5px; } .page_challenges .score_box .possible_score_left { color: #7ACAE9; } .page_challenges .score_box .possible_score_right { color: #7ACAE9; padding-left: 5px; } /* challenge_been_there_done_that */ .challenge_been_there_done_that text { cursor: pointer; } .challenge_been_there_done_that .button_b { } .challenge_been_there_done_that .button_d { } .challenge_been_there_done_that .button_n { background: #ACCB30; color: #FFFFFF; } .challenge_been_there_done_that .button_n:hover { background: #8DA727; color: #FFFFFF; } .challenge_been_there_done_that .button_r { background: #AAAAAA; color: #FFFFFF; } .challenge_been_there_done_that .button_r:hover { background: #888888; color: #FFFFFF; } .challenge_been_there_done_that select.location { max-width: 310px; } .challenge_been_there_done_that .btdt_type_links { } .challenge_been_there_done_that .btdt_type_links span { font-weight: 600; } /* challenge_30_days_to_remember */ .challenge_30_days_to_remember { } table.key td.points_1 { background: #FFF362; width: 27px; } table.key td.points_2 { background: #FFC666; width: 27px; } table.key td.points_3 { background: #FFAEAE; width: 27px; } /* content - goals */ .sample_text textarea { width: 100%; height: 220px; border-color: #C3E6CB; margin-top: 20px; padding: 10px; } /* content - activities */ .page_activities .advent_calendar { padding: 10px; background-image: url("https://cdn.marriedfun.org/img/content/activities/advent_calendar/snowflake-background.jpg"); background-color: #CDECFE; background-repeat: no-repeat; } .advent_card { position: relative; border-radius: 5px; border: 1px dashed #777777; overflow: hidden; } .advent_card .front { display: block; } .advent_card .back { display: none; } .advent_card.open .front { display: none; } .advent_card.open .back { display: block; } .advent_card .front_overlay { position: absolute; top: 0; left: 0; font-family: 'BioRhyme', serif; font-size: 58px; color: #FFFFFF; height: 100%; width: 100%; align-items: center; justify-content: center; display: flex; background: rgba(29, 101, 135, 0.1); text-shadow: 2px 2px 0 #344f63, 2px -2px 0 #344f63, -2px 2px 0 #344f63, -2px -2px 0 #344f63, 2px 0px 0 #344f63, 0px 2px 0 #344f63, -2px 0px 0 #344f63, 0px -2px 0 #344f63; } .advent_card .back_overlay { position: absolute; bottom: -3px; right: -6px; display: none; font-size: 20px; color: #FFFFFF; height: 30px; width: 30px; cursor: pointer; } .advent_card.open .front_overlay { display: none; } .advent_card.open .back_overlay { display: block; } .advent_card.active-day { } .advent_card.active-day .front_overlay { color: red; text-shadow: 1px 1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, 1px 0px 0 #FFFFFF, 0px 1px 0 #FFFFFF, -1px 0px 0 #FFFFFF, 0px -2px 0 #FFFFFF; } .advent_card:hover { cursor: pointer; border-color: #FFFFFF; } .advent_card.future:hover { cursor: default; border-color: #777777; } .advent_card.future img:hover { animation: shake 0.5s; animation-iteration-count: infinite; /* start again when finished*/ } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } /* content - advice */ .advice_row { margin-bottom: 20px; } .advice_row hr { margin-top: 15px; margin-bottom: 10px; } .advice_row a { text-decoration: none; } /* content - articles */ .article_card_small { max-height: 200px; overflow: hidden; background: #FFFFFF; line-height: 1.3em; padding: 8px 12px; border: 1px solid #EEEEEE; } .article_image { border: 1px solid #AAAAAA; border-radius: 3px; margin-bottom: 10px; width: 100%; max-width: 640px; } .article_card { margin-bottom: 10px; } .article_card .card-body { background: #FFFFFF; } .article_category { margin: 0 0 10px 10px; } .content_topic_button { width: 100%; max-width: 330px; } @media (max-width: 516px) { .content_topic_button { min-width: 270px; margin-bottom: 10px; } } #access_overlay { position: fixed; display: none; width: 100%; height: 50%; left: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 10; border-top: 2px solid #555555; } #access_offer { background: #FFFFFF; width: 100%; max-width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); } #access_offer_inline { background: #FFFFFF; width: 100%; max-width: 300px; } @media (min-width: 320px) { #access_offer, #access_offer_inline { max-width: 500px; } } .access_offer_inner { padding: 10px; border: 5px solid; text-align: left; } @media (max-width: 360px) { .access_offer_inner h3 { font-size: 1.4em; } } .access_offer_inner .btn { max-width: 230px; } .related_content div.photo { border: 1px solid #BBBBBB; border-radius: 3px; overflow: hidden; } .anat_erog h2 { margin-top: 0; } .anatomy_term { } /* tools */ .page_tools_buttons { margin-bottom: 20px; } .page_tools_buttons a.btn { margin-bottom: 5px; } .page_tools_buttons a.btn { width: 100%; } @media (min-width: 400px) { .page_tools_buttons a.btn { max-width: 170px; } } .tools_teaser_image { border: 1px solid #C1DEF9; border-radius: 5px; } .chart { position: relative; height: auto; width: 100%; max-width: 600px; } .chart.dashboard_1 { position: relative; height: auto; width: 100%; max-width: 1300px; } /* page_updates */ .page_updates .col_1_card img { max-width: 100%; height: auto; border: 1px solid #EEEEEE; box-shadow: -2px 2px 6px 0px #BBBBBB; } .page_updates .col_1_cardh3 { margin-top: 1em; } .page_updates .col_1_cardh3:first-of-type { margin-top: 0.5em; } /* date idea generator */ .date_idea_generator .answer_hidden_section { margin-top: 10px; } .date_idea_generator .results_buttons .btn, .date_idea_generator .results_buttons a.btn { width: 100%; max-width: 310px; margin-right: 10px; } .date_idea_generator .button_left { margin: 0; padding: 0 8px; } .date_idea_generator .button_right { margin: 0; padding: 0 8px; } .date_idea_generator .sharing { margin: 0; padding: 0 8px; } .date_idea_generator .results_buttons.container { padding: 0; margin-top: 10px; } .date_idea_generator p { margin-bottom: 5px; } .date_idea_generator .alert { margin-bottom: 0; } /* quotes */ .quote_body img.quote { width: 600px; } .quote_card .card-body { background: #FFFFFF; } .quote_card .card { margin-bottom: 10px; } /* fortunes */ .fortune { font: bold 1em "Times New Roman"; position: relative; padding: 10px 15px; margin: 0 auto; background-color: #FCFCFC; color: #12269E; box-shadow: -2px 2px 5px rgb(128,128,128,0.2); line-height: 1.4em; max-width: 500px; text-align: left; } .fortune .bed { color: red; font-style: italic; opacity: 0; transition-delay: 2s; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; -ms-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } .fortune a { font-weight: bold; } .fortune .bed.visible { opacity: 1 /* for transition */; position: relative; z-index: 2; background: #FFFFFF; } .fortune p { margin: 0; } .fortune .smiley { font-size: 1.4em; } .fortune_logo { position: absolute; bottom: 4px; right: 4px; } .fortune_logo img { height: 23px; } .fortune:before, .fortune:after { content: ''; position: absolute; left: 0; border-radius: 50%; width: 100%; height: 20px; display: none; } .fortune:before { box-shadow: 0 0 5px rgb(0,0,0,.7); } .fortune:after { box-shadow: 0 0 10px black; } .fortune.top-shadow:before { display: block; top: 0px; clip: rect(-40px auto 0 auto); } /* deprecated - should be something like clip-path: inset(-40px auto 0 auto); */ .fortune.bottom-shadow:after { display: block; bottom: 0px; clip: rect(20px auto 40px auto); } /* role play */ .page_role_play .toggle_switch_dom, .page_role_play .toggle_switch_inv { display: inline; margin-left: 10px; } .page_role_play .toggle_switch_dom .toggle-on.btn-success { background-color: #F5C6CB; color: #DF4F5E; font-weight: bold; } .page_role_play .toggle_switch_dom .toggle-off.btn-secondary { background-color: #BEE5EB; color: #338AB5; font-weight: bold; } .page_role_play .toggle_switch_dom .toggle { border-width: 1px; border-style: solid; border-color: #AAAAAA; background-color: #AAAAAA; box-shadow: -1px 1px 3px rgba(100, 100, 100, 1); } .page_role_play fieldset { border: 3px solid #1F497D; background: #ddd; border-radius: 5px; padding: 15px; } .page_role_play fieldset legend { width: inherit; max-width: inherit; background: #1F497D; color: #FFFFFF; padding: 5px 10px ; font-size: 16px; border-radius: 5px; box-shadow: 0 0 0 3px #DDDDDD; } .page_role_play .rp_col_1 { padding-top: 4px; text-align: center; } .page_role_play .rp_col_2 { padding-top: 4px; text-align: center; } .page_role_play .rp_col_3 { padding-top: 0px; text-align: center; } .page_role_play .overview_image { border: 1px solid #999999; border-radius: 5px; margin-top: 10px; } /* affiliates */ .affiliate_notice { font: 12px arial; color: #777777; } .affiliates img { max-width: 100%; height: auto; } /* same as img-fluid */ .affiliates img { border: 0; } .affiliates .aff_tracking { position: absolute; } .affiliates_note { line-height: 1.3em; margin-top: 10px; } @media (min-width: 480px) { .affiliates_note { line-height: inherit; } } .affiliates .card-body { padding: 0; } .affiliate_category_badge { position: relative; } .affiliate_category_badge span.badge { position: absolute; left: 3px; bottom: 4px; z-index: 2; } .affiliate_status_badge { position: relative; cursor: pointer; } .affiliate_status_badge span.badge { position: absolute; right: 0; right: 5px; top: 5px; } .affiliates .card .card-header { line-height: 22px; font-size: 16px; padding: 5px; } .affiliates .card .card-header span { font-size: 1em; } .dimmed { position: relative; } .dimmed:before { content: " "; z-index: 2; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); pointer-events: none; } /* help */ .help_table { margin-bottom: 10px; border-collapse: collapse; } .help_table td { padding: 0 5px 0 10px; background: #FFFFFF; border: 1px solid #444444; } .help_table tr td:first-child { font-weight: bold; color: #FF0000; } /* positions */ .position { height: 100%; margin-top: 5px; } .position h4 { color: #653038; } .position .card-img-top { min-height: 200px; } .position .img_holder { position: relative; } .position .img_cover { position: absolute; height: 45px; background: #FFFFFF; bottom: 0; width: 33%; right: 0; } @media (min-width: 576px) { .position .img_cover { height: 50px; bottom: 0; width: 28%; } } @media (min-width: 768px) { .position .img_cover { height: 62px; width: 28%; bottom: 0; } } .position.e .card-img-top { } /* maybe instead of sets, customize by id ranges */ .position.e .img_holder { display: none; } .position img { } .position .card-text { line-height: 1.3em; margin-top: 20px; } .position .no_results { margin: 10px; min-height: 200px; } .position_filter { position: absolute; right: 10px; top: 11px; } .page_positions .position_filter { top: -22px; right: 0; } .position_filter .fa-caret-square-o-down { font-size: 30px; color: #CCCCCC; } .position_edit .form-group { margin-bottom: .3em; } .position_edit textarea { height: 250px; } .card.position .card-header { background: #FFFFFF; z-index: 1; max-height: 53px; overflow: hidden; } .card.position .card-header h1 { font-size: 1.3em; margin: 0; display: inline; } .position_banner { position: absolute; top: 29px; right: -93px; color: #FFFFFF; text-align: center; text-decoration: none; letter-spacing: .1em; background-color: #A00; padding: 0.2em 5em 0.2em 5em; font: bold 14px/1.1em Arial, Sans-Serif; text-shadow: 0 0 0.75em #444; box-shadow: 0 0 0.5em rgba(0,0,0,0.5); -webkit-text-shadow: 0 0 0.75em #444; -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.5); transform: rotate(33deg) scale(0.75,1); } .position_banner:before { content: ''; top: 0; left: 0; right: 0; bottom: 0; position: absolute; margin: -0.3em -5em; transform: scale(0.7); -webkit-transform: scale(0.7); border: 2px rgba(255,255,255,0.7) dashed; } @media (min-width: 400px) { .position_banner { padding: 0.4em 5em 0.4em 5em; font: bold 16px/1.2em Arial, Sans-Serif; top: 34px; right: -98px; } } @media (min-width: 500px) { .position_banner { padding: 0.4em 5em 0.4em 5em; font: bold 16px/1.2em Arial, Sans-Serif; top: 40px; right: -85px; } } .position_of_day { } .content_section { margin-top: 15px; } .content_section_anchor { display: block; position: relative; top: -70px; visibility: hidden; } /* compensate for fixed header. e.g.
*/ .content_section_heading { border-top: 1px solid #DDDDDD; padding-top: 10px; } #edit_position_modal .modal-body { padding: 5px; } .badge_hard { background: orange; } .linked { color: red; } .results_filter { width: 100%; } .results_filter hr { margin-top: .5rem; margin-bottom: .5rem; } .filter_counts { font-size: x-small; color: #999; } .position_collapse { border: 0; } .position_collapse .card-body { background: #FFFFCE; } .card_image_and_arrows { position: relative; } .card_image_and_arrows .card-img-top { border-radius: 0; } .arrow_right { right: 5px; } .arrow_left { left: 5px; } .arrow_right, .arrow_left { position: absolute; top: calc(50% - 20px); } .arrow_right img, .arrow_left img { width: 20px; opacity: 0.5; } .arrow_right img:hover, .arrow_left img:hover { opacity: 1; } @media (min-width: 576px) { .arrow_right { right: 10px; } .arrow_left { left: 10px; } .arrow_right, .arrow_left { top: calc(50% - 26px); } .arrow_right img, .arrow_left img { width: 30px; } } .count_status { color: #7E7E7E; font-size: 14px; } .fa.active { color: red; } #accordion { } .filter_submit { position: relative; } .filter_buttons { position: absolute; top: -35px; right: 0; } .filter_submit .dropdown-menu { min-width: 3rem; padding: 0; margin-left: -30px; } .filter_submit .dropdown-item { padding: .25rem .5rem; } #header_navbar .dropdown-item { padding: 5px 10px; } #header_navbar .dropdown-divider { margin: 5px 0; } #collapseOne { } .sub_nav .row { margin-right: -5px; } .sub_nav #search_input { max-width: 200px; padding: 2px 10px 5px 10px; height: 31px; font-size: 15px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .sub_nav #search_button { margin-right: -10px; cursor: pointer; } .sub_nav .nav_row { height: 32px; } .fav .row { margin: 0; } #sha_button { cursor: pointer; } .number { font: 8em Allura-Regular; line-height: .8em; text-align: center; } .num_controls { color: #FFFFFF; } .num_controls input[type=text] { width: 35px; height: 25px; margin: 0 5px; text-align: center; } .num .card-body { max-height: 100px; } @media (min-width: 576px) { .num .card-body { max-height: 200px; } } .card.position .card-body { position: relative; } .overlay_top { position: absolute; top: 50px; z-index: 10; width: 100%; } .overlay_top.modal_overlay { top: 10px; } .overlay_top_inner { } .overlay_bottom { position: relative; width: 100%; } .difficulty_badge { position: absolute; top: -51px; left: -7px; } @media (min-width: 450px) { .difficulty_badge { position: absolute; top: -52px; left: -4px; } } .active_icons { position: absolute; top: -55px; right: -6px; } /*.act { position: absolute; top: 151px; left: 4px; width: 100px; } .act img { width: 24px; margin-right: 5px; } */ .settings_icon { color: #FFFFFF; font-size: 24px; position: absolute; right: 10px; top: 2px; text-shadow: 0px 2px 5px #000000; } .settings_icon:hover{ cursor: pointer; } .settings_icon a { color: #FFFFFF; } .help_icon { color: #FFFFFF; font-size: 24px; position: absolute; right: 40px; top: 2px; text-shadow: 0px 2px 5px #000000; } .help_icon:hover{ cursor: pointer; } .help_icon a { color: #FFFFFF; } .active_icon { width: 25px; } .method_icon { height: 25px; } .cards_count { margin-bottom: 10px; } /* static stars */ .OLDstars_static { position: relative; } .OLDrating_static { position: absolute; left: 6px; bottom: 0px; z-index: 3; } .OLDrating_static .rating li { cursor: initial; } .fa.fa-star, .fa.fa-star-o, .fa.fa-star-half-o { margin-right: 3px; color: yellow; text-shadow: -1px 1px 3px #333333; } /*.page_games .static_stars, .page_quote_category .static_stars { position: absolute; bottom: 0; right: 0; cursor: initial; }*/ .static_stars { position: absolute; bottom: 0; right: 0; cursor: initial; } .page_position_search .static_stars { } .page_position_favorites .static_stars { } /* ratings */ /* old? .ratings_icon { color: #FFFFFF; font-size: 24px; position: absolute; right: 70px; top: 2px; text-shadow: 0px 2px 5px #000000; } .ratings_icon:hover{ cursor: pointer; } .ratings_icon a { color: #FFFFFF; } */ .ratings_outer .left_stars { } .ratings_outer .right_stars { } .stars { } @media (min-width: 576px) { /* .stars { top: -77px; }*/ } /* todo: clean up */ .ratings_outer { max-width: 500px; margin: auto; } .ratings_outer .fa.fa-star, .ratings_outer .fa.fa-star-o, .ratings_outer .fa.fa-star-half-o { color: yellow; font-size: 26px; text-shadow: none; } .ratings_outer .header { text-align: center; font-weight: bold; margin-bottom: -25px; margin-top: 10px; z-index: 10; } .ratings_outer .header.gray_border { border: 0; border-top: 1px solid #CCCCCC; } .stars_her .fa.fa-star, .stars_her .fa.fa-star-o, .stars_her .fa.fa-star-half-o { color: #FF8A9E; } .stars_him .fa.fa-star, .stars_him .fa.fa-star-o, .stars_him .fa.fa-star-half-o { color: #69BAFC; } .stars_both .fa.fa-star, .stars_both .fa.fa-star-o, .stars_both .fa.fa-star-half-o { color: #C0A2DD; } .stars_all .fa.fa-star, .stars_all .fa.fa-star-o, .stars_all .fa.fa-star-half-o { color: yellow; } .ratings_outer div { /* border: 1px solid #CCCCCC; */ } .ratings_outer .awaiting_message { font-style: italic; text-align: center; font-size: 14px; color: #333333; padding-right: 6px; } /* REF# 814414 */ .star_rating { } .star_rating ul.rating { padding-inline-start: 0; } .rating li { line-height: 0; width: 25px; height: 25px; padding: 0; margin: 0; list-style: none; cursor: pointer; } .rating li span { display: none; } .left_stars ul.rating { float: left; } .right_stars ul.rating { float: right; } .left_stars .rating li { float: left; margin-right: 0; } .right_stars .rating li { float: left; margin-left: 0; } /* 320px */ /* use .ratings_outer for the combined view */ .ratings_outer .stars_her .static_stars, .ratings_outer .stars_him .static_stars { position: static; } .ratings_outer .stars_him { margin-right: -2px; } .ratings_outer .stars_her i.fa, .ratings_outer .stars_him i.fa { cursor: not-allowed; } .stars_her.disabled .fa.fa-star-o { color: #E9D8DA; } /* #DFC6CA */ .stars_him.disabled .fa.fa-star-o { color: #D0E1F0; } /* #BCD2E9 */ .ratings_outer .stars_her i.fa, .ratings_outer .stars_him i.fa { margin-right: 1px; } .no_linked_account { position: absolute; font-size: 13px; font-weight: 600; font-style: italic; text-align: center; line-height: 25px; top: 27px; } .no_linked_account a { color: #0D5393; } .stars_her .no_linked_account { left: 4px; } .stars_him .no_linked_account { right: 4px; } /* .no_linked_account { font-size: 15px; line-height: 25px; } */ /* 360px */ @media only screen and (min-width: 360px) { .ratings_outer .stars_him { margin-right: -6px; } .ratings_outer .stars_her i.fa, .ratings_outer .stars_him i.fa { margin-right: 6px; } /* REF# 814414 */ .left_stars .rating li { float: left; margin-right: 5px; } .right_stars .rating li { float: left; margin-left: 5px; } .stars_her .no_linked_account { left: 14px; } .stars_him .no_linked_account { right: 20px; } } /* 600px */ @media only screen and (min-width: 600px) { .ratings_outer .stars_him { margin-right: -6px; } .ratings_outer .stars_her i.fa, .ratings_outer .stars_him i.fa { margin-right: 7.5px; } .left_stars .rating li { float: left; margin-right: 7px; } .right_stars .rating li { float: left; margin-left: 7px; } .stars_her .no_linked_account { left: 18px; } .stars_him .no_linked_account { right: 24px; } } /* TODO: combine */ /* ratings */ .position_ratings .grid img { box-shadow: inset 2em -2em 5em 2em rgba(255,0,0,0.9) } .position_ratings .grid .grid_inner { } .position_ratings .grid_inner { border: 0; } .position_ratings .card-header { padding: 5px; font-size: 16px; } .position_ratings .card-body { padding: 0; } .position_ratings .position_card { } /* watch / favorites */ .position_watch .grid img { box-shadow: inset 2em -2em 5em 2em rgba(255,0,0,0.9) } .position_watch .grid .grid_inner { } .position_watch .grid_inner { border: 0; } .position_watch .card-header { padding: 5px; font-size: 16px; } .position_watch .card-body { padding: 5px; } .position_watch .position_card { } .page_position_favorites .filters select, .page_position_watch .filters select { width: 100%; max-width: 300px; padding: 5px; } .page_position_favorites .filters select.float-right, .page_position_watch .filters select.float-right { max-width: 110px; } #watch_shared_select { } .watch { position: absolute; top: 3px; left: 3px; background-color:rgba(255,255,255,0.3); border-radius: 10px; padding: 0 6px; } .watch i.fa { font-size: 25px; color: #DDDDDD; text-shadow: -1px 1px 0px #444444; } /* text-shadow: 0px 2px 5px #000000; */ .watch i.fa.eye_her { color: #FF8A9E; } .watch i.fa.eye_him { color: #69BAFC; } .watch .watch_icon { cursor: pointer; } .watch .watch_icon.show { display: block; } .watch .watch_icon.hide { display: none; } .watch.no_position { position: static; } .watch.no_position i.fa { text-shadow: none; } .watch_fav h3 { color: #FFFFFF; } /*@media (min-width: 500px) { .watch_fav .card .card-header { } }*/ .watch_fav .card { margin: 0; } .watch_fav .card-deck { margin: 0; } .watch_fav .card-deck .row { margin: 0; } .watch_fav .nav-link { padding: 4px 10px; } .position_card { cursor: pointer; } .watch_fav .card-body { height: 24px; padding: 0; } .position_card.empty .card-body { height: 200px; } .watch_fav .stars { right: 0; left: -1px; top: 2px; } .watch_fav #tabbed_content { width: 100%; background: #ECF5FD; border: 1px solid #C1DEF9; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-top: -1px; } .watch_fav .nav-link.active { background: #ECF5FD; color: #000000; border-color: #C1DEF9; border-bottom-color: #ECF5FD; position: relative; bottom: 2px; } .watch_fav .nav-tabs { border-bottom-width: 0px; } .watch_fav .nav-tabs .nav-item { margin-bottom: -3px; } .watch_fav .nav-tabs .nav-link:hover { border-color: #C1DEF9; color: #116ABB; margin-bottom: 1px; border-bottom: 0; } .watch_fav .nav-tabs .nav-link.active:hover { color: #116ABB; } .watch_fav .row { margin-top: 0; } .watch_fav .card .card-header { padding: 0 5px; font-size: initial; line-height: 1.3em; text-align: center; } .position_card .card-img-top { border-radius: 0; } #position_search_form { margin-right: 15px; } .position_id a { color: #999999; text-align: right; } /* referrals, gifts, promos */ .card.referral .card-img-top { border-bottom: 1px solid #D8D8D8; } .card.referral textarea { width: 100%; } .card.referral #referral_email { margin: 0 6px 10px 0; } .card.referral #referral_copy { margin: 0 0 10px 0; } .card.referral .referral_link { max-width: 360px; font-size: 15px; } .card.referral h5 { margin: 0; } .referral_text_box { font-weight: bold; background: #FFFFFF; padding: 10px; border: 1px solid #C1DEF9; margin: 0 0 10px 0; border-radius: 5px; } .copy_confirm { color: red; display: none; margin: -14px 0 0 12px; } .gift_policies { margin-top: 20px; } .card.gift input { max-width: 411px; } .card.gift #custom_message { min-height: 150px; } .card.gift .card-body { } #gift_button_6, #gift_button_12 { width: 100%; max-width: 200px; } .redeem_form_2 .form-control#code { width: 100%; max-width: 340px; } .redeem_form_2_submit_button { margin: 10px 0; } .alert .gift_alert { line-height: 35px; } .gift_heading { font: 2.5em Allura-Regular; color: red; margin-bottom: 0; } .group_1 { display: flex; } .group_2 { display: none; } .flex_show { display: flex; } .image_radio { margin-bottom: 10px; cursor: pointer; } .image_radio input { display: none; } .image_radio img { border: 1px solid #CED4DA; } .image_radio img.selected { border: 1px solid red; box-shadow: 0 0 20px #F75E6E; } .gift_preview { background: #FFFFFF; margin: 10px 0; max-width: 600px; } .gift_preview textarea { height: 150px; } .gift_preview img { border: 1px solid #CED4DA; } .review_gift #payment_button { display: inline-block; } .fade_in { animation: fadein 3s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .delivery_buttons { display: inline-block; } /* block quotes */ .quote_outer { position: relative; } @media (min-width: 800px) { .quote_outer { margin: 0 0; } } blockquote { margin: 0 25px 0 25px; padding: .75em .5em .75em 1em; background: #FFFFFF; border-left: 0.5em solid #DDDDDD; font-size: 1em; line-height: 1.5; box-shadow: 1px 0 5px #CCCCCC; } blockquote:before { display: block; height: 0; content: "“"; margin-left: -55px; font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif; color: #999999; } /*blockquote:after { display: block; height: 0; content: "”"; margin-right: 0; font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif; color: #999999; }*/ blockquote:after { position: absolute; top: 10px; right: 2px; content: "”"; font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif; color: #999999; } blockquote p { margin: 0; } cite { font-style: italic; } /* shared / generic */ .generic_box { text-align: center; border: 1px double #80CA94; border-radius: 5px; overflow: hidden; margin-bottom: 10px; } .generic_box .box_heading { font: bold 30px Allura-Regular; background: #80CA94; padding: 0 10px; } .generic_box .box_body { padding: 10px; background: #E4F3E9; } .users_name { border: 1px dotted; padding: 0 5px 2px 5px; border-radius: 3px; font-size: 100%; } .blocked_overlay .overlay_background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000000; opacity: .5; cursor: not-allowed; } .blocked_overlay .overlay_icon { position: absolute; margin: auto; right: 50%; margin-right: -32px; top: 50%; margin-top: -50px; background: rgba(255,128,128,0.5); box-shadow: 0 0 120px 35px #FF8080; border-radius: 50px; } .blocked_overlay .overlay_icon .access_icon { font-size: 100px; color: #333333; } /* icon is 64x100 @ 100px */ .grid img { box-shadow: inset 2em -2em 5em 2em rgba(255,0,0,0.9) } .grid .grid_inner { border-radius: 5px; overflow: hidden; } .grid_outer { } .grid_inner { } /* add padding between boxes and compensate for outside padding with matching negative margins */ /* ze|sm|md|lg|xl - REF# 821947 define gutter sizes for grid builder */ .grid_ze { margin: 0px; } .grid_ze .grid_outer { padding: 0px; } .grid_sm { margin: 0 -2.5px; } .grid_sm .grid_outer { padding: 2.5px; } .grid_md { margin: 0 -5px; } .grid_md .grid_outer { padding: 5px; } .grid_lg { margin: 0 -7.5px; } .grid_lg .grid_outer { padding: 7.5px; } .grid_xl { margin: 0 -10px; } .grid_xl .grid_outer { padding: 10px; } /* make the gutters a bit larger for bigger screens */ @media (min-width: 500px) { .grid_ze { margin: 0px; } .grid_ze .grid_outer { padding: 0px; } .grid_sm { margin: 0 -5px; } .grid_sm .grid_outer { padding: 5px; } .grid_md { margin: 0 -7.5px; } .grid_md .grid_outer { padding: 7.5px; } .grid_lg { margin: 0 -10px; } .grid_lg .grid_outer { padding: 10px; } .grid_xl { margin: 0 -12.5px; } .grid_xl .grid_outer { padding: 12.5px; } } .button_list .grid_inner { border: 0; } .button_list .btn { width: 100%; } .all_position { background: #777777; padding: 15px; } .all_position h3 { color: #FFFFFF; } .all_position .card-header { background: #ADDCB9; } .all_position .card-img-top { border-top-left-radius: 0; border-top-right-radius: 0; } .all_position .row { font-size: 12px; } .all_position .col-3 { padding-left: 5px; padding-right: 5px; } .show_all_modal_body table { width: 100%; border: 1px solid #999999; margin: 10px 0; background: #FFFFFF; } .show_all_modal_body table td { padding: 5px; } .show_all_img { cursor: pointer; } .all_position .card-header.next { background: #F79196; } .all_position .card-header.done { background: #8DB4FA; } /* poker card games - REF# 932374 */ .poker_hand { position: relative; font-size: 9px; margin: auto; max-width: 250px; margin: 0 auto; min-height: 210px; max-height: 260px; } /* height: 100%; */ .poker_hand > div { position: absolute; } .poker_hand .pcard { cursor: pointer; caret-color: transparent; } #poker_hand_1 { transform: rotate(-35deg); left: 0px; top: 20px; } #poker_hand_2 { transform: rotate(-17deg); left: 25px; top: 10px; } #poker_hand_3 { transform: rotate( 0deg); left: 50px; top: 0px; } #poker_hand_4 { transform: rotate(+17deg); left: 75px; top: 10px; } #poker_hand_5 { transform: rotate(+35deg); left: 100px; top: 20px; } .poker_hand.discard { max-width: 100%; font-size: 7px; } .poker_hand.discard .pcard:hover { transform: scale(1.05); } .poker_hand.discard .pcard.selected { border: 1px solid blue; transform: scale(1.05); box-shadow: 0 0 10px rgb(0 0 255 / 50%); } .poker_hand.discard .pcard.invalid { border: 1px solid red; transform: scale(1.05); box-shadow: 0 0 10px rgb(255 0 0 / 50%); } .discard #poker_hand_1 { transform: rotate(0); left: 0; top: 0px; } .discard #poker_hand_2 { transform: rotate(0); left: 14%; top: 0px; } .discard #poker_hand_3 { transform: rotate(0); left: 28%; top: 0px; } .discard #poker_hand_4 { transform: rotate(0); left: 42%; top: 0px; } .discard #poker_hand_5 { transform: rotate(0); left: 56%; top: 0px; } @media (min-width: 360px) { .discard #poker_hand_2 { left: 16%; } .discard #poker_hand_3 { left: 32%; } .discard #poker_hand_4 { left: 48%; } .discard #poker_hand_5 { left: 64%; } } @media (min-width: 576px) { .discard #poker_hand_2 { left: 19%; } .discard #poker_hand_3 { left: 38%; } .discard #poker_hand_4 { left: 57%; } .discard #poker_hand_5 { left: 76%; } } @media (min-width: 768px) { .poker_hand.discard { font-size: 8px; } .discard #poker_hand_2 { left: 140px; } .discard #poker_hand_3 { left: 280px; } .discard #poker_hand_4 { left: 420px; } .discard #poker_hand_5 { left: 560px; } } @media (min-width: 992px) { .discard #poker_hand_2 { left: 19%; } .discard #poker_hand_3 { left: 38%; } .discard #poker_hand_4 { left: 57%; } .discard #poker_hand_5 { left: 76%; } } @media (min-width: 1200px) { .poker_hand.discard { font-size: 9px; } .discard #poker_hand_2 { left: 160px; } .discard #poker_hand_3 { left: 320px; } .discard #poker_hand_4 { left: 480px; } .discard #poker_hand_5 { left: 640px; } } .poker_hand .pcard .corner span { font-size: 2em; } .poker_header { position: relative; font-size: .8em; font-weight: bold; text-align: center; color: #FFFFFF; } .poker_money { position: absolute; width: 100%; max-width: 148px; border: 1px solid; } @media (min-width: 400px) { .poker_money { max-width: 168px; } .poker_header { font-size: .9em; } } @media (min-width: 500px) { .poker_money { max-width: 200px; } .poker_header { font-size: 1.0em; } } .poker_money_her { top: -10px; left: -10px; background: red; } .poker_money_him { top: -10px; right: -10px; background: blue; } .poker_pot { position: relative; top: -10px; background: #555; width: 100%; max-width: 50px; left: 50%; margin-left: -25px; border: 1px solid #000; } .poker_actions .btn { margin-bottom: 5px; } .toggle_hide_button { margin-top: 100px; } /* end poker card games */ .game_teaser { } .game_teaser br { margin: 5px 0 10px 0; } .game_teaser_image { border-radius: 10px; } .game_page img { border: 1px solid #CCCCCC; border-radius: 5px; } .game_filters { width: 100%; max-width: 500px; margin: 5px 0 15px 0; } .game_filters a { padding: 4px; } .game_options { width: 250px; margin: 0 auto; text-align: left; } .or_spacer { margin-left: 5px; } .access_indicator { position: relative; } .access_indicator .access_icon { position: absolute; font-size: 40px; color: #000000; text-shadow: 0px 0px 5px #ffffff; } .access_indicator .access_icon.articles { top: -41px; right: 7px; } .access_indicator .access_icon.article { top: -41px; right: 7px; color: #721C24; } .access_indicator .access_icon.overlay { top: -44px; right: 0; color: #721C24; } .access_indicator_letter { position: absolute; top: -28px; right: 15px; color: #FFFFFF; font-weight: bold; } .access_indicator_letter.starter { color: yellow; } .access_indicator_letter.advanced { color: cyan; right: 14px; } .access_indicator_letter.premium { color: hotpink; } .index .access_indicator .access_icon.games { top: -37px; right: -13px; font-size: 33px; color: #00499B; } .access_indicator .access_icon.game { top: -27px; right: -7px; font-size: 33px; color: #535960; } /* articles */ .access_background { position: absolute; top: -43px; right: 0px; width: 40px; height: 41px; background: rgba(255,128,128,0.5); box-shadow: 0 0 40px #FF8080; border-radius: 20px; } .locked_go_button { width: 100px; } #article_fade { position: relative; top: -200px; width: 100%; height: 200px; background: linear-gradient(to bottom, transparent, #D4EDDA); } #game_fade { position: relative; top: -600px; width: 100%; height: 600px; background: linear-gradient(to bottom, transparent, #D4EDDA); } .content_fade { position: relative; } .content_fade:after { position: absolute; bottom: 0; height: 100%; width: 100%; content: ""; background: linear-gradient(to bottom, transparent 10%, #D4EDDA 90%); } .topic_label { position: absolute; bottom: 5px; left: 5px; background: white; padding: 0 7px 1px 7px; border-radius: 3px; font-weight: 500; opacity: 0.8; } .hidden_control { visibility: hidden; position: absolute; } .dice_spacer { margin: 70px 0; } /* games */ .game_card_body { font-weight: bold; padding: 5px; text-align: center; line-height: 1.3em; } .free_games_account_level_message { display: none; } .free_games_account_level_message.show { display: block; } .game_min { min-height: 400px; } .games .join_code_badge { font-size: x-large; margin-top: 10px; margin-bottom: 2px; } .games .join_code_input { width: 75px; display: inline; text-transform: uppercase; } .games .join_game_options { display: none; font-weight: 700; } /* mit, mifn */ .com { /* max-width: 360px; */ height: 500px; } .com_body { font-size: 63px; font-family: "Allura-Regular", sans-serif; line-height: 1.2em; } .com .continue_button { font: 16px arial; position: absolute; bottom: 64px; right: 50%; margin-right: -45px; } .com .alert { padding: 10px; } .turn_time input[type=number], .max_items input[type=number] { width: 50px; } .mobile_br { display: inline-block; margin-top: 10px; } .game_3_tables h4 { color: #FFFFFF; } .game_3_tables table { background: #FFFFFF; } .game_3_tables td { width: 50%; } .game_4_buttons.row { margin: 0; padding: 0; } .game_4_buttons.row div { padding: 5px; } .game_4_buttons .fa-close, .game_4_buttons .fa-check { font-size: x-large; text-shadow: 0px 0px 1px #ffffff; cursor: pointer; } .game_4_buttons .fa-close { color: red; } .game_4_buttons .fa-check { color: green; } .game_4_buttons .item_hide { display: none; } .game_4_buttons .score_her, .game_4_buttons .score_him { color: #333333; font-size: 30px; text-align: right; line-height: 20px; } .game_4_buttons .row { margin: 0 -10px; } /* game_6 */ .com .success_button, .game_6_continue_button { font: 16px arial; position: relative; top: 30px; } .inst { font: 16px arial; margin-top: 20px; margin-bottom: 30px; } /* game_9, game_20 */ /* SEE: REF# 932374 */ .card.game_9, .card.game_20 { height: auto; min-height: 500px; } .game_9 .game_options .form-check-label, .game_20 .game_options .form-check-label { margin-bottom: 5px; } .game_9 .game_options, .game_20 .game_options input[type=radio] { bottom: 10px; } .game_9 #discard_button, .game_20 #discard_button { } .game_9 .poker_actions input[type=checkbox], .game_20 .poker_actions input[type=checkbox] { display: none; } .poker_actions { color: #555555; } .poker_actions.latest { color: #000000; font-weight: bold; } .game_20 .reward_icon img { width: 48px; filter: drop-shadow(-1px 0px 4px #333333); } /* memory: game_10, game_14 */ .game_memory_board { margin-bottom: 10px; border-collapse: collapse; width: 100%; max-width: 1000px; } .game_memory_board td { padding: 0 5px 0 10px; background: #FFFFFF; border: 1px solid #444444; } .game_memory_cell { margin: 2px; cursor: pointer; } .game_memory_cell .card_pos { position: absolute; left: 5px; } .game_memory_cell .card_back { display: block; background: #D9706D; border: 1px solid #888888; border-radius: 5px; overflow: hidden; } .game_memory_cell .card_front { display: none; background: #FFFFFF; border: 1px solid #888888; border-radius: 5px; overflow: hidden; } .dirty-memory .game_memory_cell .card_front img { transform: scale(0.8); position: relative; bottom: -6px; } .strip-memory .game_memory_cell .card_front img { transform: scale(1.0); position: relative; bottom: 0; } .game_memory_cell .card_front.matched_him { opacity: 0.4; cursor: default; background: #FFFFFF; border-color: #23607C; } .game_memory_cell .card_front.matched_her { opacity: 0.4; cursor: default; background: #FFFFFF; border-color: #B62130; } .game_memory_cell .card_contents { position: relative; font-size: 8px; } @media (min-width: 576px) { .game_memory_cell .card_contents { font-size: 10px; } } @media (min-width: 768px) { .game_memory_cell .card_contents { font-size: 12px; } } .dirty-memory .card-body { padding: 2px; } @media (min-width: 576px) { .dirty-memory .card-body { padding: 10px; } } #game_alert.alert { margin: 3px 3px 5px 3px; } #game_alert_2.alert { margin: 3px 3px 5px 3px; display: none; } .dirty-memory .him, .strip-memory .him { background-position: right 10px top 0px; background-size: 60px 74px; } .dirty-memory .her, .strip-memory .her { background-position: right 10px top 0px; background-size: 60px 74px; } .strip-memory_additional_rules { margin: -10px -10px 0 -10px; } /* ugly hack */ .strip-memory #ajax_output { margin: 40px 0; } #game_12_timer { margin-top: 40px; } .gift_game { cursor: pointer; } .gift_selected { transform: scale(1.2); cursor: not-allowed; } .gift_deselected { opacity: .3; transform: scale(0.8); cursor: not-allowed; } /* game_15, game_16 */ .bottle_chart { font-family: arial; fill: #FFFFFF; font-size: 13px; text-align: center; font-weight: bold; width: 100%; } /* support down to 320px - REF# 274947 */ .bottle_image { max-width: 180px; cursor: pointer; } @media (min-width: 360px) { .bottle_image { max-width: 240px; } } @media (min-width: 460px) { .bottle_image { max-width: 340px; } } @media (min-width: 576px) { .bottle_image { max-width: 400px; } } @media (min-width: 676px) { .bottle_image { max-width: 500px; } } @media (min-width: 768px) { .bottle_image { max-width: 600px; } } @media (min-width: 868px) { .bottle_image { max-width: 750px; } } @media (min-width: 992px) { .bottle_image { max-width: 900px; } } @media (min-width: 1200px) { .bottle_image { max-width: 1100px; } } .bottle_container { width: 100%; position: relative; caret-color: transparent; min-height: 100px; } .bottle_chart svg { position: relative; z-index: 1; } .bottle_outer { position: absolute; top: 50%; left: 50%; z-index: 2; } .game_15_next { margin-top: 20px; } .donutText { cursor: pointer; } /* game_23 */ .bingo_board { width: 100%; max-width: 600px; font-weight: bold; border: 1px solid; aspect-ratio: 1 / 1; background-color: lightblue; font-size: 11px; cursor: pointer; user-select: none; } .bingo_board td { width: 20%; height: 20%; position: relative; padding: 2px; text-align: center; border-collapse: collapse; border: 1px solid; } .bingo_board tr.header { background: darkblue; } .bingo_board tr.header .header_text { color: #FFFFFF; } .bingo_board tr.header td { height: 20px; } @media (min-width: 360px) { .bingo_board { font-size: 12px; } } @media (min-width: 460px) { .bingo_board { font-size: 16px; } } @media (min-width: 576px) { .bingo_board { font-size: 20px; } } .bingo_message { display: none; } .bingo_position_message { margin: 10px 0; } .game_23 .btn.btn-primary.bingo_next_button { color: white; width: 47%; max-width: 140px; margin-left: 10px; } .game_23 .btn.btn-secondary.bingo_done_button { color: white; width: 47%; max-width: 140px; margin-left: 10px; } .game_23 .btn.btn-primary.bingo_next_button_p2 { color: white; width: 47%; max-width: 140px; margin-left: 10px; } .game_23 .next_reward { font-weight: bold; } .game_23 #bingo_board_search { width: 200px; margin-bottom: 4px; } .bingo_board { display: none; } /* TODO: move */ .start_game_options h4 { margin: 10px 0 5px 0; } .game_23 .image { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 3px; overflow: hidden; left: 0; top: 0; } .game_23 .ball { position: absolute; z-index: 2; display: inline-block; top: 15%; left: 15%; width: 70%; height: 70%; margin: 0; border-radius: 50%; background: radial-gradient(circle at -58% 157%, rgba(252, 20, 4, 1), rgba(247, 2, 2, 1) 39%, rgba(254, 235, 235, 1) 91%, #062745 100%); box-shadow: -6px 6px 11px #555, 0 0 2px #CCC; opacity: 1; display: none; } .game_23 .ball.visible { display: block; } .game_23 .text { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; padding: 3px; text-shadow: white 0px 0 4px; line-height: 1.2em; } .game_23 .heart { width: 70%; aspect-ratio: 1; /* border-image: radial-gradient(var(--c, red) 69%, #0000 70%) 84.5% / 50%; */ border-image: radial-gradient(rgb(243 57 44) 68%, rgba(0, 0, 0, 0) 70%) 84.5% / 50%; clip-path: polygon(-41% 0, 50% 91%, 141% 0); border-radius: 113%; position: absolute; left: 15%; top: 17%; /* background: radial-gradient(circle at -58% 157%, rgba(252, 20, 4, 1), rgba(247, 2, 2, 1) 39%, rgba(254, 235, 235, 1) 91%, rgba(254, 235, 235, 1) 100%); box-shadow: -6px 6px 11px #555, 0 0 2px #CCC; */ } /* date planner */ .edit_date_plan .row { margin-bottom: 0; } @media (min-width: 576px) { .edit_date_plan .row { margin-bottom: 10px; } .edit_date_plan .row:last-child { margin-bottom: 0; } } .edit_date_plan label { padding-bottom: 10px; padding-bottom: 3px; } .date_plan_view { max-width: 688px; } .date_plan_view .carousel { border: 1px solid #FDCBCB; padding: 10px 8px 0 8px; border-radius: 5px; background: #FDECEC; color: #740C0C; min-height: 100px; } .date_plan_view .carousel .carousel-indicators { display: none; } .date_plan_view .date_plan_activities_buttons { margin-bottom: 10px; } .date_plan_view .location_phone, .date_plan_view .location_address { font-size: 16px; } .date_plan_view .carousel-control-prev, .date_plan_view .carousel-control-next { display: none; } .date_plan_view .text_box { padding: 3px 10px 5px 10px; margin-bottom: 10px; } .date_plan_view .text_box.plan { background: #FDF8EA; border: 1px solid #FFE188; border-radius: 5px; margin-top: 5px; margin-bottom: 0; } .date_plan_view .text_box.activity { background: #FFF6F6; border: 1px solid #FDCBCB; border-radius: 5px; margin-top: 5px; } .date_plan_view .date_activity_name { font-weight: bold; font-size: 22px; margin-bottom: 10px; } .date_plan_view .date_activity_time { text-align: right; line-height: 34px; } .date_plan_view hr { margin-top: 5px; margin-bottom: 15px; } .date_plan_view .location_image { margin-top: 10px; } .date_plan_view button.print_button, .date_plan_view button.email_button { padding: 5px 10px; } .date_plan_view button.email_button .fa-check { color: black; } .date_plan_view button.email_button .fa-close { color: darkred; } .print .date_plan_view .carousel-item { display: contents !important; opacity: 1 !important; } .print .date_plan_view { max-width: 100%; } .print .date_plan_view .location_map { max-width: 100%; } @media print { .heading_resources .col.resources { display: none; } } .date_plan_view .activities_summary { font-size: 12px; margin-bottom: 15px; border: 1px solid #F0F0F0; } .date_plan_view .activities_summary .row { padding: 2px 2px; } @media (min-width: 576px) { .date_plan_view .activities_summary { font-size: 16px; } .date_plan_view .activities_summary .row { padding: 2px 5px; } } .date_plan_view .activities_summary .external_name { } .date_plan_view .activities_summary .times { text-align: right; } .date_plan_view .activities_summary .row:nth-child(odd) { background: #F0F0F0; } /* date ideas shared */ .date_idea_modal .modal-body { padding: 10px; } .date_idea_modal .research_buttons a, .research_buttons a { margin-bottom: 5px; } .date_idea_modal .card-title { margin-top: 10px; } .date_idea_modal .card-title span { padding-left: 10px; color: #AAAAAA; font-size: 16px; font-style: italic; } /* dating dashboard */ .dating_dashboard .grid_inner { border: 0; } .dating_dashboard .grid_wrapper .card-header { padding: 2px 10px 2px 10px; text-align: center; background: #547EB8; } .dating_dashboard .grid_wrapper .card { } .dating_dashboard .grid_wrapper .card-header { color: #FFFFFF; } .dating_dashboard .grid_wrapper .card-header a { color: #FFFFFF; } .dating_dashboard .grid_wrapper .card-header a:link { color: #FFFFFF; } .dating_dashboard .grid_wrapper .card-img-top { border-radius: 0; } .dating_dashboard .card.date_planner { min-height: 195px; } .dating_dashboard .card.date_idea_ratings { min-height: 195px; background: #F3F9FE; } .dating_dashboard .card.date_idea_generator { min-height: 195px; } .dating_dashboard .card.more .card-header { font-weight: normal; } .dating_dashboard .card.advertisement .card-header { font-weight: normal; } .dashboard_ratings_table { width: 101%; text-align: center; /* border-bottom: 1px solid #83A2C5;*/ border-spacing: 0; margin: auto; padding: 5px; } /* 100% no worky? */ .dashboard_ratings_table th { font-size: 15px; } .dashboard_ratings_table .label { font-size: 16px; font-weight: bold; } .dashboard_ratings_table .value { font-size: 42px; font-weight: bold; } .dashboard_ratings_table.date_idea_ratings .value { width: 33%; } .dashboard_ratings_table.date_plans .value { width: 25%; } .dashboard_ratings_table thead { width: 100%; border: 1px solid #83A2C5; border-spacing: 0; margin: auto; padding: 5px; } .dashboard_ratings_table thead th { background: #83A2C5; color: #FFFFFF; } .dashboard_ratings_table tbody tr:nth-child(even) { background: #F3F9FE; border-bottom: 1px solid #83A2C5; border-top: 1px solid #83A2C5; } .dashboard_ratings_table tbody tr:nth-child(odd) { background: #E8F3FD; } .dashboard_ratings_table tbody tr:last-child { border-bottom: 0; } /* date idea sorter */ .date_idea_sorter .card img.card-img-top { min-height: 100px; } /* make lazy loading and page rendering work more smoothly */ .date_idea_sorter .neg_margins { margin-right: -5px; } .date_idea_sorter { margin-left: -5px; margin-right: -5px; } @media (min-width: 576px) { .date_idea_sorter { margin-left: inherit; margin-right: inherit; } } .date_idea_sorter .login_request { margin: auto; max-width: 500px; } /* date ideas pages */ .date_ideas .featured_date_idea img { max-width: 600px; } .date_idea_links_alpha { font-size: .98rem; margin-bottom: 20px; } .date_idea_article_heading .icon { font-size: 25px; padding-right: 5px; line-height: 25px; vertical-align: bottom; } .date_idea_article_heading .letter { font-weight: bold; } .date_idea_article_links_alphabetical { font-size: 15px; } .try_these_date_ideas .card { border: 0; } .try_these_date_ideas .card-header { padding: 0; } .simple_signup_box_2 { margin-top: 10px; max-width: 400px; } .simple_signup_box_2 .form-group { margin-bottom: 0; } .featured_date_idea /* date idea articles */ .article_date_idea { margin-bottom: 30px; } .article_date_idea p { margin-top: 15px; } .article_date_idea hr { margin-top: 15px; margin-bottom: 10px; } .article_date_idea .tags { margin-bottom: 5px; } .article_date_idea img { } .article_date_idea .text { margin-bottom: 10px; } .article_date_idea .heading span { padding-left: 15px; color: #AAAAAA; font-size: 20px; font-style: italic; } .heading_link_container { position: relative; width: 100%; max-width: 640px; } .heading_link { position: absolute; right: 0; top: 7px; color: #CCCCCC; } .heading_link:hover { position: absolute; right: 0; top: 7px; color: #0000FF; cursor: pointer; } /* testing... */ .featured_date_ideas_carousel { width: 600px; border: 1px solid #DDDDDD; } .featured_date_ideas_carousel .carousel-caption { width: 90%; right: 5%; left: 5%; } .featured_date_ideas_carousel .carousel-caption h5 { font-size: 32px; color: #FFFFFF; } .featured_date_ideas_carousel .carousel-caption p { padding: 0 15px 15px 15px; } .featured_date_ideas_carousel .scrim { border-radius: 10px; background-color: rgba(0, 0, 0, .3); box-shadow: 0 0 5rem rgba(0, 0, 0, 0.3); } .featured_date_ideas_carousel h5 { border-top-right-radius: 10px; border-top-left-radius: 10px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 5rem rgba(0, 0, 0, 0.3); } .featured_date_ideas_carousel .carousel-inner { /* position: relative;*/ /* Removed height here */ /* overflow: hidden;*/ } .featured_date_ideas_carousel .carousel-item { /* position: relative; width: 100vh; height: 100vh; display: none; width: 100%; */ } /* date_idea_ratings */ .date_idea_ratings .rating_details_card { cursor: pointer; } .date_idea_ratings .more_details { position: absolute; top: 0; right: 0; background: #FFFFFF; font-weight: bold; font-size: 16px; padding: 4px 12px; opacity: .8; box-shadow: 0 0 40px #888888; } .date_idea_ratings .more_details a { color: #000000; } .date_idea_ratings .tools_buttons a { width: 100%; max-width: 300px; margin-bottom: 5px; } @media (min-width: 576px) { .date_idea_ratings .tools_buttons a { width: 200px; } } .levels_table { width: 100%; max-width: 500px; margin-bottom: 10px; border-collapse: collapse; } .levels_table th { text-align: center; } .levels_table td { padding: 0 5px; background: #FFFFFF; border: 1px solid #444444; } .levels_table tr td:first-child { font-weight: bold; text-align: center; } .date_ideas_card .card-body { padding: 5px; } .date_idea { margin: 0 4px 4px 0; cursor: pointer; position: relative; } .date_idea .card-body { background: #FFFFFF; } .date_idea .date_content { padding: 30px 10px; } .date_idea .idea { position: absolute; bottom: 7px; right: 0; min-height: 32px; width: 100%; padding: 5px 0; } .date_idea.ratings { margin: 0 0 8px 0; cursor: default; position: relative; } .date_idea.ratings .idea { bottom: 34px; } .date_idea .idea.background { background: #333333; opacity: .3; } .date_idea .idea.text { color: white; font: bold 16px arial; text-align: center; } .date_idea .price_symbol { position: absolute; top: 0px; right: 0px; color: #000000; background: #FFFFFF; padding: 0 4px; font-weight: bold; font-size: 12px; opacity: 0.7; } .card_visible { position: relative; display: block; } .card_hidden { position: absolute; display: none; } .card_visible img { transform: scale(1); transition: .3s ease-in-out; } .card_visible img:hover { transform: scale(1.1); } .date_idea .interest_bar { position: absolute; width: 100%; bottom: 0; height: 7px; } .date_idea .interest_her { background: #EB8B95; display: inline-block; border-right: 1px solid white; } .date_idea .interest_him { background: #439DC9; display: inline-block; border-right: 1px solid white; } .date_idea .interest_unrated { background: #AAAAAA; display: inline-block; border-right: 1px solid white; } .price_filter, .rating_filter, .done_filter { margin: 0 2px 0 8px; } @media (min-width: 576px) { .price_filter, .rating_filter, .done_filter { margin: 0 2px 0 16px; } } .date_ideas_count { margin-top: 10px; font-size: smaller; } .date_idea .rating_controls { position: absolute; bottom: 0; color: #000000; background: #008000; font-weight: bold; font-size: 14px; width: 100%; opacity: .8; } .date_idea .rating_control { display: inline-block; width: 16.667%; text-align: center; padding: 5px 0; cursor: pointer; text-shadow: 0px 0px 5px #FFFFFF; } .date_idea .rating_control.control_0 { background: #777777; } .date_idea .rating_control.control_1 { background: #FF0000; } .date_idea .rating_control.control_2 { background: #FF7900; } .date_idea .rating_control.control_3 { background: #FFF200; } .date_idea .rating_control.control_4 { background: #87C100; } .date_idea .rating_control.control_5 { background: #008000; } .date_idea .rating_control.rated:not(.selected) { background: #777777; } .date_ratings_unrated span.count, .date_ratings_rated span.count { margin-left: 10px; font-size: 16px; } .rating_buttons a { width: 100%; max-width: 200px; } .date_plan_accordion, .date_plan_button_holder { max-width: 603px; margin-bottom: 10px; } .date_plan_button_holder button.btn { max-width: 345px; } .date_plan_accordion:last-of-type { margin-bottom: 0; } .date_plan_accordion .list-group-item { padding: 10px 12px; } .date_plan_accordion .card-header { padding: 0; } .date_plan_accordion .card-body { background: transparent; } .date_plan_accordion .btn.btn-link { background: #F7F7D9; } .date_plan_accordion .btn.btn-link.collapsed { background: inherit; } .date_plan_accordion .card .collapse.show { background: #F7F7D9; } .date_plan_accordion .card .collapsing { background: #F7F7D9; } .OLDdate_plan_accordion .card .collapse.show .card-body { border-top: 1px solid #C1DEF9; } .OLDdate_plan_accordion .card .collapsing .card-body { border-top: 1px solid #C1DEF9; } .OLDdate_plan_accordion > .card:first-of-type { border-bottom: 1px solid #C1DEF9; } .OLDdate_plan_accordion { border-collapse: collapse; } .OLDdate_plan_accordion { border-bottom: 1px solid #C1DEF9; } .date_plan_accordion .card.single_item { border-bottom: 1px solid #C1DEF9; border-radius: 5px; overflow: hidden; } .date_plan_accordion .btn.btn-link { text-decoration: none; } .date_plan_accordion .label_left { text-align: left; color: #8D514B; font-size: 18px; font-weight: bold; } .date_plan_accordion .label_right { text-align: right; color: #7B7C84; font-size: 12px; line-height: 26px; } .date_plan_accordion .btn.btn-primary.new_activity_button { color: #FFFFFF; } .edit_activity_form .nav-link { padding: .3rem .5rem; } /*.edit_activity_form .update_search .input-group-text { cursor: not-allowed; } .edit_activity_form .update_search.changed .input-group-text { background: #007BFF; color: #FFFFFF; border: 0; cursor: pointer; } */ .edit_activity_form .update_search .input-group-text { background: #007BFF; color: #FFFFFF; border: 0; cursor: pointer; } .edit_activity_form .btn.btn-link .label_location { text-decoration: none; } .edit_activity_form .location_controls { text-align: center; } .edit_activity_form .location_map_button { text-align: center; } .select_option_category { font-weight: bold; } select.currency { font-family: "Lucida Console", Monaco, monospace; font-size: 14px; } .edit_activity_form .edit_activity_submit { text-align: center; margin-bottom: 0; } .edit_activity_form .edit_activity_submit .btn { width: initial; } .edit_activity_form .alert { margin-bottom: 0; } .edit_activity_form .nav-link { padding: 8px; } .map_info_window .heading { font: bold 16px arial; color: #555555; margin-bottom: 5px; padding-right: 20px; } .map_info_window .address_1, .map_info_window .address_2 { color: #555555; font: 14px arial; margin-bottom: 2px; } .map_info_window .phone { color: #999999; font: 14px arial; } .map_info_window .link { margin-top: 5px; text-align: center; } .map_info_window .link a { font: bold 16px arial; } .location_results .btn { width: 100%; max-width: 800px; padding: 0; } .location_results .btn.show_map, .location_results .btn.choose_location { max-width: 500px; padding: 5px; } .location_results .label_name { text-decoration: underline; } .location_results .btn-link { text-decoration: none; } .location_results .single_item.card:last-of-type { border-bottom: 1px solid #C1DEF9; } /* .accordion>.card:last-of-type */ .location_image { width: 100%; display: table; position: relative; background-color: #CCCCCC; margin-bottom: 10px; } .location_image .image_container { text-align: center; vertical-align: middle; display: table-cell; } .location_image .image_container img { max-width: 444px; } .yelp_icon { position: absolute; left: 5px; bottom: 5px; } .location_name { text-align: center; font-size: 18px; font-weight: bold; color: #FD3D3D; } .location_rating { text-align: center; margin-bottom: 5px; } .location_rating img { height: 18px; /* match yelp size */ } .location_address { color: #333333; font-size: 12px; text-align: center; margin-bottom: 0; } .location_phone { color: #333333; font-size: 12px; text-align: center; margin-bottom: 5px; } .location_price { color: #333333; font-size: 12px; text-align: center; } .edit_date_activity_button { position: relative; } .edit_date_activity_button .activity_name { font-weight: bold; } .edit_date_activity_button .activity_time { font-size: 13px; color: #999999; padding-right: 40px; } @media (min-width: 576px) { .edit_date_activity_button .activity_time { text-align: right; } } .activity_delete_button { position: absolute; color: #BBBBBB; width: 40px; height: 100%; right: 0; top: 0; padding: 8px 0 0 15px; } .activity_delete_button:hover { color: #000000; } .order_activity_buttons { position: relative; } .order_activity_button { position: absolute; } .oab_top { bottom: 10px; right: 3px; background: deepskyblue; padding: 0 2px; } .oab_bottom { top: 10px; right: 3px; background: deepskyblue; padding: 0 2px; } .activity_list .times { } .date_plan_accordion .btn { width: 100%; max-width: 100%; } #location_results .accordion .card-header { padding: 0px; } .location_map .google_map { width: 100%; max-width: 600px; } .location_map .google_map { border: 1px solid #CCCCCC; } /* map attempt - REF# 819973 */ .ZZZlocation_map .map-canvas { width: 100%; max-width: 600px; } .location_map { width: 100%; max-width: 600px; border: 1px solid #CCCCCC; } .location_map.date_planner { display: none; height: 250px; box-shadow: 0 0 5px rgba(0,0,0,0.5); } /*.location_map.view { margin: 15px 0; }*/ /* height: 400px; max-width: 688px; */ .location_map.date_plan { margin: 15px 0; height: 400px; max-width: 688px; } .quiz { background: #FFFFFF; margin-bottom: 100px; } .quiz .card-body { } .quiz .form-check { padding-left: 32px; margin: 8px 0; } .quiz .form-check-input { /*margin-top: 4px;*/ } .quiz .form-check-label { padding-left: 5px; line-height: 27px; margin-top: 2px; } .quiz .form-group.buttons { margin-bottom: 0; } .quiz_submit, .quiz_button { width: 100%; max-width: 120px; } .quiz .slide.hide { display: none; } .quiz .slide { width: 100%; max-width: 600px; border: 1px solid #DDDDDD; padding: 10px; box-shadow: 0px 0px 10px 0 rgba(13,75,132,.12); } .quiz .progress { width: 90%; margin-bottom: 10px; text-align: center; } .quiz .buttons i.fa { } .quiz .buttons .text { } .quiz .answer_inputs { padding: 5px; border: 2px dashed #EEEEEE; border-radius: 5px; background: rgb(250,230,230); background: linear-gradient(28deg, rgba(250,230,230,0.2) 43%, rgba(146,215,251,.2) 100%); /* box-shadow: 0px 0px 10px 0 rgba(13,75,132,.12); */ } .quiz_results_grid .grid_inner { border: 0; } .quiz_result .card-title span { padding-left: 10px; color: #AAAAAA; font-size: 16px; font-style: italic; } .checkbox_instructions { padding-left: 5px; color: #AAAAAA; font-size: 18px; font-style: italic; } .image_attribution { text-align: center; font-size: 11px; } .home_card .image_attribution { margin-top: 15px; } .content_attribution { font-size: smaller; text-align: center; margin-top: 5px; } /* questionnaires */ .section_title { font-weight: bold; } .section_title.show_all { border-top: 2px dashed; padding-top: 5px; } .section_description { } .questionnaire_question { margin-top: 7px; padding-bottom: 10px; } .questionnaire_question input[type=checkbox], .questionnaire_question input[type=radio] { transform: scale(1.4); vertical-align: middle; } .questionnaire_question span.required_indicator { color: red; margin-right: 2px; } .questionnaire_question .form-check-label { padding-left: 3px; line-height: 28px; } .questionnaire_question .form-group { padding-left: 10px; margin-bottom: 2px; } .questionnaire_question .form-group.options { padding-left: 12px; margin-bottom: 2px; } .questionnaire_question .alternative_text { margin-top: 5px; /*padding-left: 20px;*/ } .questionnaire_question input[type=text].alternative_text { width: 500px; max-width: 100%; } .questionnaire_question textarea.alternative_text { width: 100%; height: 87px; } .questionnaire_question .question_description { border: 1px dashed #EEEEEE; padding: 5px; margin-bottom: 10px; border-radius: 5px; } .DDDquestionnaire_question:not(:last-child) { border-bottom: 1px solid #EEEEEE; } /* end questionnaires */ /* tool - couples questions */ .page_couples_questions li.selected { font-weight: bold; } .page_couples_questions li.selected span { color: red; } .page_couples_questions .table_outer { width: 100%; } @media (min-width: 1200px) { .page_couples_questions .table_outer { max-width: 550px; } } .page_couples_questions .simple_table { text-align: center; margin-bottom: 5px; cursor: default; } .page_couples_questions .simple_table tbody tr.none_remaining:nth-child(even) { background: #FFFFF2; } .page_couples_questions .simple_table tbody tr.none_remaining:nth-child(odd) { background: #FFFFCE; } .page_couples_questions .simple_table tbody tr.all_topic { background: #ABD3F8; } .page_couples_questions .simple_table tbody tr.all_topic.none_remaining { background: #FFFF8C; } .page_couples_questions .simple_table tbody td { padding: 2px 5px 3px 5px; } .page_couples_questions .key.key_cq td.fill { padding: 0; width: 25px; } .cq_box { width: 100%; max-width: 600px; margin-bottom: 30px; padding-bottom: 10px; text-align: center; overflow: hidden; border: 2px dashed #EEEEEE; border-radius: 5px; background-size: cover; background: rgb(250,230,230); background: linear-gradient(28deg, rgba(250,230,230,0.2) 43%, rgba(146,215,251,.2) 100%); } .cq_box .cq_box_padding { padding: 20% 10px 20% 10px; } .cq_box .spinner_icon_2 { margin-bottom: 53px; } /* margin to reduce resize (targeted to 2 lines of text) */ .cq_box .slide h3 { font-size: 2em; padding: 20% 10px 20% 10px; margin: 0; } .cq_box #question_text { padding-top: 23px; } .cq_box .form-group { margin: 0; } .cq_box_topic { position: relative; width: 100%; } .cq_box_topic .background { position: absolute; width: 100%; height: 30px; background: #39739D; opacity: .5; } .cq_box_topic .text { position: absolute; width: 100%; color: white; top: 4px; font: bold 20px arial; text-align: center; } .cq_box .slide_overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin-top: 90px; backdrop-filter: blur(5px); } .cq_box .slide_overlay .message_box { position: relative; top: 50%; margin-top: -100px; left: 50%; margin-left: -150px; } .cq_box .slide_overlay .message_button { position: absolute; width: 300px; height: 200px; background: #FFFFFF; border: 1px dashed #DDDDDD; padding: 10px; } /* end tool - couples questions */ /* tool - o finder */ .o_bot_image { max-width: 300px; } .o_bot_image_results { width: 250px; } #questionnaire_form .btn { margin-bottom: 5px; } /* TODO: see what's used */ .o_finder_accordion, .o_finder_button_holder { width: 100%; max-width: 1000px; margin-bottom: 10px; } .o_finder_button_holder button.btn { width: 100%; max-width: 345px; } .o_finder_accordion h2 .btn-link { width: 100%; max-width: 1000px; } .o_finder_accordion a.btn { width: 100%; max-width: 147px; } /* 139px */ .o_finder_accordion:last-of-type { margin-bottom: 0; } .o_finder_accordion .list-group-item { padding: 10px 12px; } .o_finder_accordion .card-header { padding: 0; } .o_finder_accordion .card-body { background: transparent; } .o_finder_accordion .btn.btn-link { background: #F7F7D9; } .o_finder_accordion .btn.btn-link.collapsed { background: inherit; } .o_finder_accordion .card .collapse.show { background: #F7F7D9; } .o_finder_accordion .card .collapsing { background: #F7F7D9; } .o_finder_accordion .card.single_item { border-bottom: 1px solid #C1DEF9; border-radius: 5px; overflow: hidden; } .o_finder_accordion .btn.btn-link { text-decoration: none; } .o_finder_accordion .label_left { text-align: left; padding-left: 15px; color: #8D514B; font-size: 18px; font-weight: bold; } .o_finder_accordion .label_right { text-align: right; padding-left: 15px; color: #7B7C84; font-size: 12px; line-height: 26px; } .o_finder_accordion .btn.btn-primary.new_activity_button { color: #FFFFFF; } .o_finder_results .observations { margin-bottom: 10px; } .o_finder_results .item { border-bottom: 1px solid #CCCCCC; margin-bottom: 5px; padding-bottom: 5px; } .o_finder_results .item:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .o_finder_results .item h5 { margin-bottom: 3px; } .o_finder .delete_o_finder_data { width: 120px; } .o_finder .report { } /* end tool - o finder */ /* tool - ynm_list */ .ynm_list .list_output { max-width: 600px; } .ynm_list .ynm_button { width: 75px; margin-bottom: 5px; } .ynm_list .col_left { font-weight: 500; padding-left: 20px; line-height: inherit; } .ynm_list .col_left .collapse_block { font-weight: normal; padding-left: 0; padding-bottom: 5px; } .ynm_list .collapse_block .collapsing, .ynm_list .collapse_block .collapse.show { text-align: left; } .ynm_list .collapse_toggle .fa { font-size: 20px; } .ynm_list .list_output .collapse_toggle { top: 3px; left: -21px; } .ynm_list .questionnaire_question input[type=checkbox], .ynm_list .questionnaire_question input[type=radio] { transform: scale(1.4); vertical-align: middle; } .ynm_list .questionnaire_question .form-check-label { padding-left: 3px; line-height: 28px; } .ynm_list .ynm_list_tabs { margin-bottom: 10px; } .ynm_list .ynm_list_top_nav .badge { padding: 4px 5px 5px 5px; } /* results */ .ynm_list .list_output.results { } .ynm_list .list_output.results .col_left { line-height: inherit; } .ynm_list .list_output.results.header .ynm_result_label { font-weight: normal; } .ynm_list hr { margin: 15px 0 0 0; } .ynm_list h4 { margin: 5px 0; } .ynm_list .ynm_result_label { width: 85px; margin-left: 5px; padding-bottom: 2px; text-align: center; font-weight: 500; } .ynm_list .result_6 { background: #28A745; } /* darker green */ .ynm_list .result_5 { background: #A6E388; } /* lighter green */ .ynm_list .result_4 { background: #FFFF75; } /* yellow */ .ynm_list .result_3 { background: #D0D0D0; } /* gray */ .ynm_list .unanswered { font-size: smaller; font-style: italic; } .ynm_list .ynm_filters select#ynm_filter_item { width: 160px; padding: 5px; margin: 10px 0 0 0; } .ynm_list .ynm_filters.form-group { margin-bottom: 0; } /* end tool - ynm_list */ /* my stuff */ .page_my_stuff .ml_column { text-align: center; } .page_my_stuff .col.highlight { background: #83E78A; } .page_my_stuff .checkmark_icon { color: blue; padding: 4px; } .page_my_stuff .asterisk_icon { color: crimson; padding: 4px; font-size: small; } .page_my_stuff .access_headings { margin: 10px 0 0 0; font-size: large; font-weight: bold; } .page_my_stuff .access_headings .right { font-size: smaller; font-weight: bold; border-bottom: 1px solid; } .page_my_stuff .key { margin: 0 0 15px 0; } .page_my_stuff .key td.highlight { background: #83E78A; } .page_my_stuff .key td { background: inherit; } .page_my_stuff .key td:first-of-type { text-align: center; font-weight: bold; } .page_my_stuff .key td:first-of-type.key_header { text-align: left; } /* end my stuff */ /* page settings */ #page_settings_modal .toggle-group label { line-height: initial; } #page_settings_modal .form-group { margin-bottom: 2px; } /* end page settings */ /* shared backgrounds */ .him { background-image: url("https://cdn.marriedfun.org/img/him.png"); background-color: #CDECFE; background-repeat: no-repeat; background-position: right bottom -2px; } .her { background-image: url("https://cdn.marriedfun.org/img/her.png"); background-color: #F9DDE4; background-repeat: no-repeat; background-position: left bottom -3px; } .him2 { background-image: url("https://cdn.marriedfun.org/img/him2.png"); background-color: #CDECFE; background-repeat: no-repeat; background-position: right bottom -2px; } .her2 { background-image: url("https://cdn.marriedfun.org/img/her2.png"); background-color: #F9DDE4; background-repeat: no-repeat; background-position: left bottom -3px; } .her .her_checkboxes { background-color: rgba(255, 255, 255, .7); padding-top: 10px; border: 1px solid #DF4F5E; } .him .him_checkboxes { background-color: rgba(255, 255, 255, .7); padding-top: 10px; border: 1px solid #338AB5; } /* shared colors */ .him_bg_l { background: #BEE5EB; /* blue - lighter */ } .her_bg_l { background: #F5C6CB; /* pink - lighter */ } .him_bg_d { background: #76B8D8; /* blue - darker */ } .her_bg_d { background: #EC959D; /* pink - darker */ } .him_brd { border-width: 1px; border-color: #338AB5; border-style: solid; /* blue */ } .her_brd { border-width: 1px; border-color: #DF4F5E; border-style: solid; /* pink */ } .him_brd_d { border-width: 1px; border-color: #23607C; border-style: solid; /* dark blue */ } .her_brd_d { border-width: 1px; border-color: #B62130; border-style: solid; /* dark pink */ } .btn-him { background-color: #059AF3; color: #FFFFFF; border-color: #059AF3; } .btn-him:hover { background-color: #0480CA; } .btn-her { background-color: #DC3545; color: #FFFFFF; border-color: #DC3545; } .btn-her:hover { background-color: #B7202F; } #notification_box { display: relative; min-height: 50px; font: 12px arial; text-align: left; } #notification { display: absolute; } #notification.alert { margin: 0; } .whats_new_box .show_all_url_block { text-align: center; margin-top: 5px; } .whats_new_box .show_all_url { } .progress .null { width: 34%; background-color: #AAAAAA; } .progress .clear { width: 34%; background-color: #FFFFFF; } .progress .one { width: 33%; background-color: #FDBDBF; } .progress .two { width: 33%; background-color: #FA7C80; } .progress .three { width: 34%; background-color: #F72025; } .depth .progress { position: absolute; top: -13px; border: 1px dotted #F72025; width: 98%; left: 1%; /*position: relative; top: -22px; border: 1px dotted #F72025;*/ } .contact_us_form { max-width: 800px; } .contact_us_form .captcha { border: 1px solid #DDDDDD; border-radius: 5px; background: #F8F8F8; overflow: hidden; } .contact_us_form #message { height: 200px; } #user_testing_form label { font-weight: bold; justify-content: left; } #user_testing_form input[type=text], #user_testing_form input[type=email] { width: 100%; max-width: 350px; } .user_testing_intro_video { width: 100%; max-width: 800px; margin-bottom: 20px; } .user_testing_questionnaire { width: 100%; } .user_testing_questionnaire iframe { width: 100%; height: 800px; border: 0; } .card.products { border: 0; } .card.products .row > div { margin-bottom: 10px; } .product_image { text-align: center; width: 100%; background: #FFFFFF; padding: 10px; margin: 5px 0; } .product_image img { width: 200px; } .product_image img > div { background: #FFFFFF; padding: 10px; } .prod_100 img.product { width: 100px; } .prod_150 img.product { width: 150px; } .prod_200 img.product { width: 200px; } .prod_250 img.product { width: 250px; } .prod_300 img.product { width: 300px; } .prod_350 img.product { width: 350px; } .prod_400 img.product { width: 400px; } .prod_450 img.product { width: 450px; } .products a.btn { margin-top: 10px; } .products h5 { margin-top: 10px; } .share_product { font: 12px arial; color: #000000; } .products_ment { } .products_ment .card-body { line-height: 1.5; } .products_ment .card-header { padding: 0; } /* admin */ .container.admin { max-width: 99%; } .admin_email_sender { background: #FFFFFF; padding: 10px; border: 1px solid #888888; max-width: 600px; } .admin_email_sender#preview_box { background: #FFFFFF; padding: 10px; border: 1px solid #888888; max-width: 100%; } .generation_output img { max-width: 300px; } .quote_configure textarea { width: 100%; max-width: 500px; } .generation_output { margin-top: 10px; } .admin_add_email_sequence { background: #FFFFFF; padding: 10px; border: 1px solid #888888; max-width: 600px; } #iframe_small { width: 320px; height: 600px; border: 0; margin: 20px; } #iframe_large { width: 630px; height: 600px; border: 0; margin: 20px; } .simple_table { width: 100%; border: 1px solid #83A2C5; border-spacing: 0; margin: auto; padding: 5px; cursor: pointer; margin-bottom: 20px; } .simple_table thead { width: 100%; border: 1px solid #83A2C5; border-spacing: 0; margin: auto; padding: 5px; } .simple_table thead th { background: #83A2C5; color: #FFFFFF; } .simple_table tbody tr:nth-child(even) { background: #F3F9FE; border-bottom: 1px solid #83A2C5; border-top: 1px solid #83A2C5; } .simple_table tbody tr:nth-child(odd) { background: #E8F3FD; } .simple_table.user_list tbody tr { border: 0; } .simple_table.user_list tbody tr:nth-child(4n+1) { background: #F3F9FE; } .simple_table.user_list tbody tr:nth-child(4n+2) { background: #FFFFF0; } .simple_table.user_list tbody tr:nth-child(4n+3) { background: #E8F3FD; } .simple_table.user_list tbody tr:nth-child(4n) { background: #FFFFF0; } .simple_table.templates { font-size: 14px; cursor: default; } .keywords_fade { background: #CCF8C7; padding: 3px 10px 1px 10px; } .keywords_fade.wait { background: #FCCFD0; } .image_attribution_form { width: 660px; padding: 5px 10px; background: #CCF8C7; } .image_attribution_form .form-control { margin-bottom: 5px; } .image_attribution_form .image_attribution_example { padding: 5px; background: #FFFFFF; } .info_form { max-width: 1400px; padding: 5px 10px; background: #CCF8C7; } .info_form label { margin-bottom: 5px; } .template_buttons { margin-bottom: 3px; } .template_buttons .btn { margin-right: 2px; padding: 0 4px; } #body, #content { height: 300px; } /* landing */ .container.landing { width: 100%; max-width: 1000px; padding: 5px 5px 70px 5px; } .landing_logo img { height: 56px !important; margin-bottom: 5px; } @media print { .landing_logo img { height: 75px !important; margin-bottom: 20px; } } /* temp hack */ .container.landing .facebook_home { display: none; } .container.landing .btn-danger { display: none; } /* playing cards - https://donpark.github.io/scalable-css-playing-cards/ */ /* renamed to pcard */ @font-face { font-family: 'Suit-Regular'; src: url("/fonts/suit-regular.eot"); src: url("/fonts/suit-regular.eot?#iefix") format('embedded-opentype'), url("/fonts/suit-regular.woff") format('woff'), url("/fonts/suit-regular.ttf") format('truetype'), url("/fonts/suit-regular.svg#suit-regular") format('svg'); font-weight: normal; font-style: normal; } .pcard { background-color: #fff; font-family: 'Suit-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em; -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); /*float: left;*/ width: 16em; height: 22.4em; /*margin: 0 1.2em 1.2em 0;*/ margin: 0; position: relative; z-index: 2; } .pcard.noshadow { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .pcard .pcard-back img { width: 16em; height: 22.4em; } .pcard .flipped { -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .pcard .heart, .pcard .diamond { color: #df0000; } .pcard .corner { line-height: 1; position: absolute; text-align: center; } .pcard .corner span { display: block; font-size: 1.5em; font-weight: bold; } .pcard .corner .number { font-size: 2em; height: 1.92em/2; line-height: 1.92em/2; } .pcard .corner.top { left: 0.64em; top: 0.96em; } .pcard .corner.bottom { bottom: 0.96em; right: 0.64em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .pcard-ace span.suit.middle_center { font-size: 10.24em; left: 0.45517241379310347em; top: 0.593103448275862em; } .pcard .pcard-ten .corner .number { font-size: 1.5em; } .pcard .face img { position: absolute; left: 2.56em; top: 2.08em; width: 10.8em; height: 18.24em; } .pcard .suit { font-size: 5.8em; font-weight: normal; width: 0.6896551724137931em; height: 0.786206896551724em; line-height: 0.786206896551724em; position: absolute; text-align: center; } .pcard .suit.top_center { left: 1.0482758620689656em; top: 0.3310344827586207em; } .pcard .suit.top_left { left: 0.41379310344827586em; top: 0.3310344827586207em; } .pcard .suit.top_right { right: 0.41379310344827586em; top: 0.3310344827586207em; } .pcard .suit.middle_center { left: 1.0482758620689656em; top: 1.517241379310345em; } .pcard .suit.middle_top { left: 1.0482758620689656em; top: 0.9655172413793103em; } .pcard .suit.middle_bottom { bottom: 0.9655172413793103em; left: 1.0482758620689656em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .suit.middle_left { left: 0.41379310344827586em; top: 1.517241379310345em; } .pcard .suit.middle_right { right: 0.41379310344827586em; top: 1.517241379310345em; } .pcard .suit.middle_top_center { left: 1.0482758620689656em; top: 0.8275862068965517em; } .pcard .suit.middle_top_left { left: 0.41379310344827586em; top: 1.103448275862069em; } .pcard .suit.middle_top_right { right: 0.41379310344827586em; top: 1.103448275862069em; } .pcard .suit.middle_bottom_left { bottom: 1.103448275862069em; left: 0.41379310344827586em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .suit.middle_bottom_right { bottom: 1.103448275862069em; right: 0.41379310344827586em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .suit.middle_bottom_center { bottom: 0.8275862068965517em; left: 1.0482758620689656em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .suit.bottom_center { bottom: 0.3310344827586207em; left: 1.0482758620689656em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .suit.bottom_left { bottom: 0.3310344827586207em; left: 0.41379310344827586em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .suit.bottom_right { bottom: 0.3310344827586207em; right: 0.41379310344827586em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .pcard .card-joker img { position: absolute; left: 2.56em; top: 2.5em; width: 10.8em; height: 18.24em; } /* end playing cards */ /* progress bar */ /* TODO: is this in use? */ .progress_bar { display: inline-block; width: 100px; margin: 25px; } .progress_bar_circle { width: 100%; margin: 0 auto; margin-top: 10px; display: inline-block; position: relative; text-align: center; } .progress_bar_circle canvas { vertical-align: middle; } .progress_bar_circle div { position: absolute; top: 30px; left: 0; width: 100%; text-align: center; line-height: 40px; font-size: 20px; } .progress_bar_circle strong i { font-style: normal; font-size: 0.6em; font-weight: normal; } .progress_bar_circle span { display: block; color: #AAAAAA; margin-top: 12px; } .progressbar { display: inline-block; width: 100px; margin: 25px; } .circle { width: 100%; margin: 0 auto; display: inline-block; position: relative; text-align: center; } .circle canvas { vertical-align: middle; transform: rotate(+0.25turn); } .circle div { position: absolute; top: 30px; left: 0; width: 100%; text-align: center; line-height: 40px; font-size: 20px; } .circle strong { position: absolute; top: 30px; left: 0; width: 100%; text-align: center; line-height: 20px; font-size: 20px; } .circle strong i { font-style: normal; font-size: 0.6em; font-weight: normal; } .circle span { display: block; color: #aaa; margin-top: 12px; } /* end progress bar */ /* social media icons see: https://www.templatemonster.com/blog/how-to-add-social-media-icons-website/ */ .social-wrapper .list-unstyled { padding-left: 0; list-style: none; } .social-wrapper .list-inline li { display: inline-block; padding-right: 5px; padding-left: 5px; margin-bottom: 10px; } .social-icons .fa { font-size: 1.8em; } .social-icons .fa { width: 50px; height: 50px; line-height: 50px; text-align: center; color: #FFF; color: rgba(255, 255, 255, 0.8); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #footer_navbar .social-icons .fa { width: 40px; height: 40px; line-height: 40px; } #footer_navbar ul.social-icons { margin-bottom: 0; } .social-icons.icon-circle .fa{ border-radius: 50%; } .social-icons .fa:hover, .social-icons .fa:active { color: #FFF; -webkit-box-shadow: 1px 1px 3px #333; -moz-box-shadow: 1px 1px 3px #333; box-shadow: 1px 1px 3px #333; } .social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square { background-color: #C52F30; } .social-icons .fa-facebook,.social-icons .fa-facebook-square { background-color: #3C599F; } .social-icons .fa-instagram { background-color: #A1755C; } .social-icons .fa-pinterest,.social-icons .fa-pinterest-square { background-color: #CC2127; } .social-icons .fa-twitter,.social-icons .fa-twitter-square { background-color: #32CCFE; } /* end social media icons */ /* move by refresh_button and menu icon? */ .header_right { position: relative; } .site_search_button { font-size: 23px; color: red; cursor: pointer; } .site_search_button.page_404 { font-size: initial; color: white; cursor: pointer; } .site_search_button.scr_md { position: absolute; top: 1px; right: 53px; } .site_search_button.scr_xs { font-size: 19px; padding-top: 4px; padding-left: 5px; } @media (min-width: 768px) { .site_search_button.scr_md { display: none; } } @media (max-width: 768px) { .site_search_button.scr_xs { display: none; } } /* search - smart suggest */ #search_input-suggestions { margin: 10px 0 0 0; padding: 0; background: transparent; text-align: left; /*display: block !important; *//* don't need to hide when in modal already */ } .ss-wrap #search_input { border: 1px solid #AAAAAA; border-radius: 5px; position: relative; font-family: "Source Sans Pro", sans-serif; font-weight: 600; width: 100%; height: 40px; padding: 0 10px; box-shadow: none; outline: none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .ss-wrap #search_input:focus { box-shadow: 0 0 7px rgba(122, 196, 246, 1); border: 1px solid #0074A6; } .ss-result-title { padding-left: 3px; background: #F2FBFF; border-bottom: 1px solid #B0E8FF; } /* .ss-header + .ss-result-title:last-child { border-bottom: 0; } */ .ss-result-title a { text-decoration: none; } .ss-result-title a:hover { text-decoration: underline; } .ss-result-title .shl { color: red; } #search_box { width: 300px; height: 100px; margin: 0 auto; margin-top: 0px; border: 1px solid #888888; border-radius: 5px; background: #E1F5FF; box-shadow: 2px 2px 5px 0 #c5c5c5; } #search_box #heading { background: #51A3DC; color: #FFFFFF; font: bold 18px arial; padding: 5px; text-align: center; } #search_box #body { padding: 5px; } #search_box #cl_inputFocus { border: 1px solid #888888; width: 100%; margin-top: 14px; border-radius: 5px; padding: 5px; font: 16px arial; background-color: #FFFFFF; } .search_result { } .search_result a { } /* .ss-result img { width: 88px; height: auto; padding:0; margin: 0; } */ .ss-header { height: 25px; margin-top: 10px; overflow: hidden; padding: 0; color: #FFFFFF; background: transparent url(https://cdn.marriedfun.org/img/misc/ss/search-header-bg.gif) repeat-x bottom; text-transform: uppercase; } .ss-header p.ss-header-text { margin: 0 !important; padding: 1px 0 0 6px !important; float: left; font-size: 15px; font-weight: bold; } .ss-header p.ss-header-limit { margin: 0 !important; padding: 0 4px 0 0 !important; float: right; font-size: 11px; font-weight: normal; } /* .ss-result { width: 88px; height: 80px; float: left; margin: 0 5px 5px 0; overflow: hidden; border-radius: 4px; border: 1px solid #888; box-shadow: -1px 1px 1px #CCC; background: #555; } */ .search_result.category .ss-result { width: 88px; height: 80px; float: left; margin: 0 5px 5px 0; overflow: hidden; border-radius: 4px; border: 1px solid #888; box-shadow: -1px 1px 1px #CCC; background: #555; } .search_result.item .ss-result { width: 88px; height: 30px; float: left; margin: 0 5px 5px 0; overflow: hidden; border-radius: 4px; border: 1px solid #888; box-shadow: -1px 1px 1px #CCC; background: #555; } .ss-result img { width: 100%; height: auto; vertical-align: middle; } /* see: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div */ .ss-result .frame { height: 68px; overflow: hidden; /* equals max image height */ width: 86px; white-space: nowrap; float: left;} .search_unavailable { text-align: center; margin-top: 50px; } /* end search - smart suggest */ /* https://loadingapng.com/ first one, #EB1C24, transparent, 30x30, apng */ .spinner_icon { margin: 20px 0 0 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }