/* TODO:
Reset and/or normalize for both, not just for mobile.
	- this causes discrepancies between narrow/wide views when content/styling is the same
*/


*, *:before, *:after {
	box-sizing: border-box;
}

:root {
    --default-red: #e01a4f;
}

/* clearfix specs */
.clearfix { display: block; }

.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
	line-height: 0;
}

.clearfix:after,
.clearboth { clear: both; }


body,
html {
	font-family: helvetica, arial, sans-serif;
}

body {
	padding:0;
	margin:0;
	position: relative;
    min-width: 320px;
    color: #222;
}

button,
input,
select,
textarea {
	margin: 0;
}

input { border-radius: 3px; }

p {
	font-size: 12px;
	line-height: 15px;
}

h3 { font-size: 24px; }

h4 {
	font-size: 17px;
	margin: 20px 0 10px;
}

a { text-decoration: none; }

img { border: 0 none; }

.need-help {
    display: block;
    text-align: right;
	font-size: 12px;
}

#yp-banner {
    position: fixed;
	top: 0;
    display: flex;
    align-items: center;
	zoom: 1;
	width: 100%;
	min-width: 0;
    -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
	box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
	z-index: 5000;
}

#yp-banner .container { width: 100%; }

#yp-banner a { display: inline-block; }

#yp-banner .logo {
    display: inline-block;
    margin-left: 10px;
	background-repeat: no-repeat;
	background-size: contain;
    background-position: center center;
	position: relative;
}

#content {
	max-width: 100%;
	margin: 73px auto 100px;
	min-height: calc(100vh - 140px);
    padding: 0 16px;
    overflow: hidden;
    background: #fff;
}

#content.admin {
    overflow-x: scroll;
}

.claim #content {
    margin-top: 0;
}

img.yp_cmr_registration_logo {
	width: 100%;
	margin-top: 70px;
}

.pixel-img {
	position: absolute;
	left: 0;
	top: 0;
}

.forgot-password {
    display: block;
    margin-top: 8px;
    font-size: 12px;
}

.reset-password { font-size: 11px; }

.reset-password form { margin-top: 28px; }

.cancel {
    display: block;
    margin-top: 31px;
}

.first-last-names { font-size: 11px; }

.container {
	max-width: 1000px;
	margin: 0 auto;
}

.highlight {
	font-size: 24px;
	padding-bottom: 16px;
}

.highlight p {
    font-size: 15px;
}

.highlight h3 { font-weight: normal; }

.social_btns {
    display: flex;
    justify-content: center;
    align-items: center;
	color: #555;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	border-radius: 3px;
	border: 1px solid #bbb;
	background-color: #fff;
	margin-bottom: 8px;
	padding: 12px 0;
    height: 40px;
}

.social_btns img {
    margin-right: 7px;
}

.helper-text.disclaimer-social {
    margin-bottom: 30px;
    padding-bottom: 20px;
	color: #999;
	font-size: 12px;
}

.sso {
    margin-bottom: 12px;
    width: 100%;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    background: #000;
    border-radius: 3px;
    color: #fff;
    border: 1px solid #000;
}

.sso:hover {
    border: 1px solid #ffdd00;
}

.sso img {
    vertical-align: middle;
    width: 30px;
    height: 30px;
}

/* desktop/mobile switches */
.desktop-only p {
	margin: 0;
}

.mobile-only { display: none; }

/* inner and module styles */
.inner.module {
    max-width: 460px;
	text-align: center;
}

.inner.module p {
    margin: 0 auto;
    max-width: 349px;
    text-align: center;
	font-size: 15px;
	line-height: 26px;
}

.inner.module.left-aligned,
.inner.module.left-aligned p {
	text-align: left;
}

.inner.module.left-aligned p {
	max-width: none;
}

.inner.module.left-aligned .btn.default {
	float: none;
}

.admin .inner.module {
	height: auto;
	padding-bottom: 30px;
}

#header-message {
	margin-bottom: 30px;
}

#header-message p {
	margin-top: 0;
}

/* confirm email styles */
#content.confirm_email p:first-of-type {
    font-size: 16px;
    font-weight: bold;
}

#content.confirm_email .btn.default {
	margin-top: 35px;
}

/* forgot password styles */
#content.forgot_password_form form {
	margin-top: 18px;
}

#content.forgot_password_form .btn.default {
	margin-top: 30px;
}

/* form-wrapper styles */
.form-wrapper,
.inner {
	background: #fff;
	margin: 0 auto;
}

.form-wrapper {
    padding-top: 30px;
}

.form-wrapper.join {
	max-width: 640px;
}

.form-wrapper.join p.helper-text,
.form-wrapper.join .btn.default,
.form-wrapper.join .point-of-entry {
    float: left;
}

.form-wrapper.join p.helper-text {
    padding-top: 10px;
    clear: both;
}

.helper-text-verify {
    color: #900;
}

.form-wrapper.login,
.form-wrapper.join {
	position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    max-width: 755px;
    border-radius: 4px;
}

.form-wrapper.login form {
    max-width: none;
}

.form-wrapper.login .highlight,
.form-wrapper.join .easyclick {
    font-size: 20px;
}

.form-wrapper.first-last-names {
	width : 400px;
	height: 465px;
}

.form-wrapper.find-user,
.form-wrapper.superuser {
    padding: 36px 30px 30px;
    max-width: 800px;
}

.form-wrapper.find-user .btn.default,
.form-wrapper.superuser  .btn.default {
    min-width: 0;
}


.form-wrapper.find-user label:last-of-type,
.form-wrapper.superuser label:last-of-type {
    margin-bottom: 5px;
    font-size: 16px;
}

.form-wrapper.find-user .vs,
.form-wrapper.superuser .vs {
    padding: 15px 0;
}

.form-wrapper.find-user input[type='text'],
.form-wrapper.find-user input[type='email'],
.form-wrapper.superuser input[type='text'],
.form-wrapper.superuser input[type='email'] {
    padding: 10px;
    width: 100%;
    max-width: 400px;
    height: 30px;
    font-size: 16px;
}

.form-wrapper label {
    display: block;
    margin-bottom: 14px;
    width: 100%;
}

.form-wrapper label:last-of-type {
    margin-bottom: 0;
}

/* other general styles */

section.left {
	float: left;
	width: 300px;
}

section.right {
	float: right;
	width: 300px;
	margin: 75px 0 0 0;
}

section.right header {
	font-size: 22px;
}

section.right ul {
	font-size: 14px;
	margin-left: -35px;
}

section.right ul li {
	margin-bottom: 8px;
}

section.center {
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 30px 0 30px;
}

section.center a.btn.default,
section.center input.btn.default {
	margin-top: 15px;
	margin-bottom: 25px;
}

section.business-account {
	position: absolute;
	background: #fff;
	width: 100%;
	padding: 15px 30px;
	bottom: 0;
	border-bottom: 1px solid #d7d5c8;
}

.registration_form header,
.login-form header {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 15px;
    font-weight: bold;
}

/* Default submit/input/button styling */
.btn.default {
    display: inline-block;
    margin-top: 30px;
    padding: 0 31px;
    min-width: 197px;
	color: #fff;
	font-size: 15px;
	line-height: 40px;
    font-weight: bold;
	border: 0;
	border-radius: 3px;
    cursor: pointer;
}

#confirm_email .btn.default,
.optout .btn.default {
	font-size: 18px;
}

.optout .btn.default {
	float: right;
}

form label input {
    padding: 8px 13px;
    width: 100%;
    height: 48px;
	border: 1px solid #ccc;
	font-size: 14px;
	line-height: 17px;
}

form.default {
    max-width: 343px;
}

.form-wrapper form {
    margin-right: auto;
    margin-left: auto;
}

.form-wrapper.login input,
.form-wrapper.join input {
    height: 42px;
}

/* forgot & reset pwd styling */
.reset-password p:first-of-type {
    max-width: 414px;
}

.reset-password.inner.module p ~ p {
    margin: 25px 0 8px;
}

.reset-password.inner.module .min-chars {
    text-align: left;
    font-size: 14px;
}

.placeholder {
	color: #999;
}

input.error {
	border: 1px solid var(--default-red) !important;
}

.form_error {
	display: block !important;
    padding-bottom: 8px;
    text-align: left;
	color: var(--default-red) !important;
	font-size: 12px;
	font-style: normal;
	line-height: 12px;
	z-index: 1;
}

.error-message {
    color: var( --default-red);
}

/* default error page */
#content.error .center {
    margin-top: 20ex;
}

#content.error .center .highlight {
    font-size: 18px;
    font-weight: bold;
}

/* log in styling */
.login_form label {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.login_form label + label {
    margin-top: 14px;
}

.login_form input {
    height: 42px;
}

.login_form .helper-text.disclaimer-social {
    border-bottom: 2px solid #eee;
}

.login_form .form_error {
    right: -310px;
    width: 290px;
}

.login_error {
	box-shadow: 0 2px 4px rgba(51, 51, 51, 0.3);
	color: #fff !important;
	background-color: #ed5400;
	font-size: 12px;
	font-style: normal;
	line-height: 12px;
	padding: 10px 12px;
	width: 100%;
	z-index: 1;
}

/* login */
#content.login_form section.center {
    padding: 0 26px;
    width: 100%;
    background-color: #fff;
}

#content.login_form section:first-child {
    border-right: 2px solid #eee;
}

#content.login_form section:last-child p {
    margin: 0;
    font-size: 14px;
}

#content.login_form .default.cta-login,
#content.login_form .cta-claim {
    display: block;
}

#content.login_form .default.cta-login {
    float: none;
    margin-top: 13px;
    background-color: #3cadc9;
    text-align: center;
}

#content.login_form section.center .claim-upsell {
    position: relative;
    margin-top: 40px;
    padding-top: 36px;
    height: 219px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    border-top: 2px solid #eee;
    background: transparent url(../../images/claim_image.svg) no-repeat center 106px;
}

#content.login_form .claim-upsell::before {
    content: 'OR';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translate(-50%);
    padding: 5px 26px;
    font-size: 14px;
    font-weight: bold;
    color: #a8a8a8;
    background: #fff;
}

#content.login_form .cta-claim {
    margin-bottom: 13px;
    padding: 12px 0;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #555;
    line-height: 18px;
    border-radius: 3px;
    border: 1px solid #bbb;
    background-color: #fff;
}

.login_form .join {
    font-size: 14px;
}

.forgot-password #submit_button,
.reset-password #submit_button,
.first-last-names #submit_button {
	width: 197px;
}

p.helper-text {
	font-size: 12px;
	color: #999;
}

#content.login_form section:first-child {
    width: 52%;
}

#content.login_form section:last-child {
    width: 48%;
}

/* OPT out page styling (e.g. /optout/c4f4e5...) */
.optout.form-wrapper {
    margin-top: 30px;
    padding-top: 0;
    max-width: 800px;
}

.optout.form-wrapper section.center { padding: 36px 30px 30px; }

.optout.form-wrapper section.center > p {
	margin: 0;
	padding: 0 0 22px;
}

.optout .highlight {
    padding-bottom: 20px;
	font-size: 24px;
    border-bottom: 3px solid #ffd400;
}

.optout p,
.optout fieldset {
    font-size: 14px;
    line-height: 18px;
}

.optout fieldset {
    display: flex;
}

.optout fieldset {
	border: none;
	padding: 30px 0 0;
}

.optout-container {
    display: flex;
    margin: 10px 0;
	padding: 15px 10px 5px;
    border: 1px solid #777;
}

.optout-container header {
    font-weight: bold;
    color: #222;
}

.optout .description {
    color: #2f2f2f;
    padding-bottom: 24px;
    width: 88%;
}

.optout-container.last {
    flex-wrap: wrap;
}

.optout-container.last ul {
    margin: 0 0 10px 0;
}

.optout-container.last li {
    margin-bottom: 5px;
}

.optout-container.last .description {
    flex: 0 0 100%;
    padding-bottom: 15px;
}

.optout form p { margin-top: 5px; }

.optout .description {
    margin-left: 5px;
	color: #666;
	padding-bottom: 10px;
}

.optout .unsubscribe .description {
    margin-left: 15px;
}

.optout header {
	font-size: 14px;
}

.optout .submit .btn.default {
    margin-top: 15px;
	width: 100%;
}

/* Toggle Switch in optout page */
.onoffswitch {
	position: relative;
	width: 40px;
    user-select: none;
	-webkit-user-select: none;
	-moz-user-select:none;
	-ms-user-select: none;
}

.onoffswitch-checkbox {
	display: none;
}

.onoffswitch-label {
	border: 2px solid #8E9990;
	border-radius: 19px;
	display: block;
	cursor: pointer;
	overflow: hidden;
}

.onoffswitch-inner {
	display: block;
	margin-left: -100%;
	width: 200%;
	transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
	color: #fff;
	display: block;
	float: left;
    font-weight: bold;
	font-size: 14px;
	height: 15px;
	line-height: 15px;
	padding: 0;
	width: 50%;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
	content: '';
    background-color: #fff;
}

.onoffswitch-inner:before {
	padding-left: 10px;
	color: #fff;
}

.onoffswitch-inner:after {
	padding-right: 10px;
	color: #999;
	text-align: right;
}

.onoffswitch-switch {
	display: block;
	height: 17px;
	width: 17px;
    margin: 1px;
	background: #fff;
	position: absolute;
    top: 0;
    bottom: 0;
	right: 21px;
	border: 2px solid #8E9990;
    border-radius: 19px;
	transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right: 0;
	background-color: #8ed105;
}

/* Custom checkboxes in optout page */
input[type=checkbox].optin {
	border:0;
	clip: rect(0 0 0 0);
	left: -1000px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	z-index: -1000;
}

input[type=checkbox].optin + label.optin {
	background-position: 0 0;
	background-repeat: no-repeat;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	height: 16px;
	line-height: 16px;
	padding-left: 21px;
	vertical-align: middle;
}

input[type=checkbox].optin:checked + label.optin {
	background-position: 0 -16px;
}

label.optin {
	background-image:url('../images/green-checkbox.png');
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

label.optin-header {
	width: auto !important;
}

label.optin.notifications {
	font-size: 14px !important;
}

/* OPT out success pagestyling */
.optout_success .inner.module {
	width: 460px;
	height: auto;
	padding: 36px 30px 30px;
	text-align: center;
}

.optout_success p { font-size: 14px; }

.easyclick {
	font-size: 18px;
	line-height: 26px;
	padding-bottom: 7px;
	padding-top: 80px;
}

.or {
	display: none;
    background: none repeat scroll 0 0 #fff;
	color: #999;
	font-size: 14px;
	height: 5ex;
	padding-top: 1.5ex;
	position: absolute;
	right: -0.7em;
	top: 50%;
}

.registration_form .left {
    float: none;
    padding-left: 30px;
	width: 48%;
}

.registration_form .left:first-child {
    border-right: 1px solid #bab9b6;
    float: left;
    height: 330px;
    padding-left: 0;
    padding-right: 30px;
    position: relative;
    width: 43%;
}

.registration_form .btn,
.login_form .btn {
	width: 100%;
	display: block;
}

.registration_form .btn.default {
	margin-top: 20px;
}

.registration_form input[type="text"],
.registration_form input[type="password"],
.registration_form input[type="email"] {
	border: 1px solid #cdcdcd;
	font-size: 14px;
	line-height: 17px;
	padding: 8px 10px;
	width: 100%;
}

.registration_form .form-wrapper p {
    color: #333;
    font-size: 14px;
    line-height: 1.25em;
    margin: 0;
}

.registration_form .form-wrapper p.helper-text {
    color: #999;
    font-size: 12px;
    line-height: 14px;
}

.registration_form .form-wrapper form label {
    position: relative;
    float: left;
    width: 100%;
}

#join-email-anchor {
    position: relative;
    top: 223px;
}

.registration_form .join:before,
.registration_form .join:after {
    content: '';
    display: table;
    line-height: 0;
}

.registration_form .join:after {
	clear: both;
}

#error_msg,
#error_msg2 {
    display: none;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    line-height: 14px;
	color: var( --default-red);
	text-align: left;
}

.bold_text {
	font-weight: bold;
}

label.email_opt_in {
	display: inline;
}

ul.notifications {
	list-style-type: none;
	padding-left: 0;
}

.facebook_alternate {
  display: inline-block;
  float: left;
  width: 48%;
}

.gplus_alternate {
  display: inline-block;
  float: right;
  width: 48%;
}

.registration_form .form-wrapper .point-of-entry,
.point-of-entry {
    margin-top: 23px;
    color: #222;
    font-size: 15px;
    font-weight: bold;
}

.registration_form .form-wrapper .point-of-entry a,
.point-of-entry a {
    font-weight: normal;
}

.claim-your-listing-container-desktop {
  position: relative;
  top: 23%;
}

.claim-your-listing-icon {
  margin-bottom: 7%;
  position: relative;
  left: 35%;
}

.registration_form .form-wrapper p.claim-your-listing-text-top {
  font-size: 1.05em;
  font-weight: bold;
}

ul.claim-your-listing {
  font-size: 0.78em;
  position: relative;
  left: -9%;
}

.registration_form .form-wrapper p.claim-your-listing-text-bottom {
  font-size: 0.80em;
  font-weight: bold;
}

/* FOOTER */
#yp-footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 24px 0 32px;
	width: 100%;
	text-align: center;
	color: #777;
	clear: both;
}

#yp-footer .container {
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
}

#yp-footer a {
    margin-right: 10px;
	font-size: 12px;
    color: inherit;
	line-height: 30px;
    white-space: nowrap;
}

#yp-footer a::after {
    content: '';
    display: inline-block;
    height: 9px;
    border-left: solid 1px #777;
    margin-left: 14px;
}

#yp-footer a:last-of-type::after {
    border-left: 0;
    margin-left: 0;
}

#yp-footer p {
    margin: 0;
	font-size: 12px;
	line-height: 16px;
}

#yp-footer .copyright {
    margin-top: 41px;
}

.disclaimer-join {
    float: left;
    margin-top: 15px;
    font-size: 0.72em;
}

#cross-site-disclaimer {
    margin: 5vh 0;
    width: 100%;
    text-align: center;
	color: #38465f
}

#cross-site-disclaimer p,
#cross-site-disclaimer a {
	font-size: 14px;
	line-height: 20px;
}


/* COMMON STYLES */
#confirm_email,
.form-wrapper.forgot-password,
.forgot_password_confirmation .inner.module {
	max-width: 460px;
	color: #222;
}

/* Forgot Password Form */

#content.forgot_password_form .cancel {
	display: block;
    margin-top: 31px;
	margin-right: 0;
	font-size: 12px;
}

#content.dialog_oauth h3 { margin-bottom: 0; }

#content.dialog_oauth ul {
    margin-left: 30px;
    list-style-type: disc;
}

#content.dialog_oauth li { margin: 30px 0 0; }

#content.dialog_oauth form { text-align: center; }

#content.dialog_oauth .btn.default {
    margin-right: 15px;
    min-width: 0;
}

/* wide view */
@media screen and (min-width: 660px) {
    #error_msg {
        margin: 0 auto;
    }

    #content {
        max-width: 1000px;
    }

    .form-wrapper {
        padding-top: 70px;
    }

    .highlight {
        padding-bottom: 31px;
        font-size: 34px;
    }

    .highlight p {
        font-size: 16px;
    }

    /* login / reg */
    .form-wrapper.login,
    .form-wrapper.join {
        margin-top: 80px;
        padding: 30px 0;
        border: 2px solid #eee;
    }

    .or { display: block; }

    #content.login_form .highlight {
        padding-bottom: 18px;
        font-size: 18px;
        line-height: 26px;
    }

    #join-email .with-border-top {
        float: left;
        margin-top: 10px;
        padding-top: 15px;
        width: 100%;
        border-top: 1px solid #ccc;
    }

    .registration_form .form-wrapper {
        padding-bottom: 30px;
    }

    .registration_form .form-wrapper form label:first-child,
    .registration_form .form-wrapper form label:first-child + label {
        float: left;
        width: 48%;
    }

    .registration_form .form-wrapper form label:first-child + label {
        margin-left: 4%;
    }

    .inner.module p {
        font-size: 16px;
    }

    #cross-site-disclaimer {
        width: 570px;
        margin: 20px auto 0;
    }

    .optout .highlight {
        padding-bottom: 50px;
    }

    .optout form {
        display: flex;
        flex-wrap: wrap;
    }

    .optout.form-wrapper {
        border: 1px solid #eee;
    }

    .optout .optout-container {
        flex: 1 1 45%;
    }

    .optout .optout-container:nth-child(3) {
        margin-left: 20px;
    }

    .optout .submit {
        flex: 0 0 100%;
    }

    .optout .submit .btn.default {
        width: auto;
    }

    #content.dialog_oauth ul {
        margin-left: 0;
    }

    #yp-footer {
        padding: 40px 0;
    }

    #yp-footer .copyright {
        margin-top: 33px;
    }
}

@media screen and (min-width: 1000px) {
    #yp-banner .logo {
        margin-left: 0;
    }

    #yp-footer .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}