/* CSS RESET */
/* ------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

/* GENERAL STYLES */
/* ------------------------------------------------------------------------ */
 
body {
    background: #4A5155;
    color: #404040;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-size: .875em;
    font-weight: normal;
    line-height: 1.8em;
}

#login_form, #forgot_pw_form, #email_unsub_form, #activate_account_form {
    margin: 0 auto;
    width: 700px;
    position: relative;
    top: 45%;
  	-webkit-transform: translateY(-45%);
  	-ms-transform: translateY(-45%);
  	transform: translateY(-45%);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

/* Misc */
.clear {
clear: both;
font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;
}

strong {
    font-weight: bold;
}

img {
display: block;
}

a, a:visited {
color: #74BCE8;
cursor: pointer;
text-decoration: none;
font-weight: bold;
}

a, .no-touch a:hover, a:active {
    outline: medium none;
}

.gold {
color: #b8aa58;
font-weight: bold;
}
/* /Misc */

section {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}

#pagewide {
width: 100%;
height: 492px;
margin: 0 auto;
font-family: arial, helvetica, sans-serif;
color: #000;
font-size: 12px;
}

#pagewide_footer {
color: #eee;
width: auto;
height: auto;
padding: 0;
text-align: center;
line-height: 1.5em;
margin: 10px 0;
float: left;
width: 700px;
}

#credentials {
display: block;
width: 700px;
float: left;
padding: 0 0 35px;
margin: auto;
background: #fff;
border-radius: 3px;
border: 1px solid #373e42;
/* box-shadow: 0 1px 3px #fff, 0 1px 2px #eee; */
}

#nextmark_logo {
width: 280px;
height: 30px;
padding: 0;
margin-left: 56px;
}

#credential_mgr {
padding: 0;
width: 600px;
}

#credential_main {
margin: 0;
padding-bottom: 1px;
}

/*#credential_login {
width: 600px;
margin: 0 13px 24px 13px;
padding: 0 0 28px 36px;
}*/

.remember {
font-size: 11px;
}

#footer {
margin: 0 0 0 49px;
padding: 0;
font-size: 12px;
}

#footer p {
margin-bottom: 20px;
}

#footer a, a:visited {
color: #74BCE8;
text-decoration: none;
}

#footer .contact span {
color: #b8aa58;
}

#footer .gold {
color: #b8aa58;
}

#copyright {
margin: 0;
padding: 0;
font-size: 11px;
text-align: center;
}

.error {
font-size: 16px;
color: #444;
font-weight: bold;
margin:0px;
padding: 10px 38px;
background: linear-gradient(#F9D25A,#F0E572);
border-bottom: 1px solid #eee;
}

.email_error {
font-size: 12px;
color: #ff0000;
margin-top:10px; 
}

.contact {
color: #000
}

#banner {
    background-color: #373e42;
    min-width: 600px;
    top: 0;
    padding: 15px 0;
    width: auto;
    position: relative;
    vertical-align: middle;
    border-radius: 2px 2px 0 0;
}

#banner > h1 {
    background: url("/media/images/stripe_bionic_h1.png") no-repeat scroll 0 0 / 77px 24px rgba(0, 0, 0, 0);
    cursor: pointer;
    vertical-align: middle;
    height: 24px;
    margin-left: 25px;
    text-indent: -9999em;
    width: 8.857em;
}

.left_login_wrapper {
    font-size: 1.0em;
    color: #aaa !important;
    float: left;
    width: 350px;
    min-height: 300px;
    margin-top: 5px;
    margin-left: 38px;
    border-radius: 0;
	border-right: 0px solid #ddd;
}

.left_login_wrapper label {
    line-height: 25px;
    width: auto;
    color: #565656;
    display: block;
    font-size: 1em !important;
    font-weight: bold;
    margin: 10px 0 5px;
    position:relatvie;
}

.left_login_wrapper .signup label {
    margin-top: 0;
}

.left_login_wrapper input[type="text"], .left_login_wrapper input[type="password"]  {
    border: 3px solid #eee;
    border-radius: 3px;
    font-size: 15px;
    padding: 10px;
    color: #757575;
    width: 280px;
}

.left_login_wrapper .input_field {
    clear: both;
    float: none;
    height: auto;
    min-width: 300px;
    vertical-align: middle;
}

.left_login_wrapper .input_field p {
    line-height: 1.5em;
}

.forgot_password_link {
	padding-left: 10px;
}

.gray-button,
.blue-button {
    transition: background 0.2s, color 0.2s;
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer;
    display: inline-block;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 20px;
    margin: 20px 0;
    padding: 10px 20px;
    position: relative;
    text-shadow: none;
}

.gray-button {
    background: #dfe0e1;
    color: #555 ;
}

.gray-button:hover {
    background: #e2e2e2;
}

.gray-button:focus {
    background-color: #e2e2e2;
    outline: 2px solid #e2e2e2;
    outline-offset: 2px;
}

.gray-button:disabled,
.gray-button.disabled,
.gray-button.disabled:hover {
    background: #eeeff0; 
    color: #bab7b7;
    cursor: default;
}

.blue-button {
    background: #69AED4;
    color: white;
}

.blue-button:hover {
    background: #51b0e1;
}

.blue-button:focus {
    background-color: #51b0e1;
    outline: 2px solid #51b0e1;
    outline-offset: 2px;
}

.blue-button:disabled,
.blue-button.disabled,
.blue-button.disabled:hover {
    background: #B5B5B5; 
    border: 0px solid #B5B5B5;
    color: #888888;
    cursor: default;
}

.right_blog_wrapper {
    font-size: 1.0em;
    color: #aaa !important;
    display: block;
    float: left;
    width: 200px;
    min-height: 300px;
    margin-top: 5px;
    margin-left: 15px;
    border-radius: 0;
}

.right_blog_wrapper .input_field {
    clear: both;
    float: none;
    height: auto;
    line-height: 40px;
    margin-bottom: 10px;
    min-width: 300px;
    vertical-align: middle;
}

.right_blog_wrapper label {
    line-height: 25px;
    width: auto;
    color: #565656;
    display: block;
    font-size: 1em !important;
    font-weight: bold;
    margin-top: 10px;
    position:relatvie;
}

.right_blog_wrapper p {
    color: #444 !important;
    font-size: 13px;
    line-height: 1.5;
    width: auto;
    max-width: 250px;
}

h2 a {
    font-weight: normal;
}

h2 {
	font-size: 20px;
	margin: 0 0 15px;
	font-weight: normal;
	line-height: 1.25em;
	width: 250px;
}

.readmore {
    margin: 10px 0;
}

.copyright {
    display: block;
    clear: both;
    color: #888;
}

.credential_main_wrapper {
    font-size: 1.0em;
    color: #aaa !important;
    display: block;
    float: left;
    width: 500px;
    min-height: 300px;
    margin-top: 20px;
    margin-left: 30px;
    border-radius: 0;
}

.credential_main_wrapper label {
    line-height: 25px;
    width: auto;
    color: #565656;
    display: block;
    font-size: 1em !important;
    font-weight: bold;
    margin-top: 10px;
    position:relatvie;
}

.credential_main_wrapper input[type="text"],
.credential_main_wrapper input[type="password"]  {
    border: 3px solid #eee;
    border-radius: 3px;
    font-size: 15px;
    padding: 10px;
    color: #757575;
    width: 250px;
}

.credential_main_wrapper .input_field {
    clear: both;
    float: none;
    height: auto;
    line-height: 40px;
    margin-bottom: 10px;
    min-width: 300px;
    vertical-align: middle;
}

.credential_main_wrapper .input_field p {
    height: 40px;
    line-height: 1.5;
}

/* Email Unsubscribe / Resubscribe */
.email-unsubscribe-resubscribe  {
    background: #f5f6f7;
}

    .email-unsubscribe-resubscribe .content {
        margin: 200px auto;
        text-align: center;
        width: 300px;
        font-size: 20px;
        line-height: 28px;
    }
    
    .email-unsubscribe-resubscribe a.gray-button {
        font-size: 13px;
        margin-top: 0;
    }
    
    .email-unsubscribe-resubscribe img {
        margin: 0 auto;
        padding-bottom: 20px;
    }
    
        .email-unsubscribe-resubscribe img.icon {
            margin: -75px 0 15px 200px;
        }
    
    .email-unsubscribe-resubscribe .mistake {
        display: block;
        font-size: 13px;
        margin-top: 10px;
        padding: 10px 0;
        border-top: 1px solid #ccc;
    }
    


.member-logo span.member-initials, .member-photo {
  display: inline-block;
  box-sizing: border-box;
  background-size: 80px auto;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 16px;
  padding-bottom: 0;
  width: 72px;
  height: 72px;
  color: #fff;
  line-height: 38px;
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
  font-weight: normal;
  border-radius: 50%;
  margin-bottom: 10px;
}

#email_unsub_form #pagewide{
    height: 410px;
}

@media only screen and (max-width: 800px) {
    form#email_unsub_form,
    form#forgot_pw_form,
    form#login_form {
        width: auto;
        text-align: center;
    }

    div#credentials {
        width: auto;
        float: none;
        display: inline-table;
        text-align: left;
        width: 340px;
    }

    div#banner {
        min-width: 300px;
    }
    .credential_main_wrapper,
    .left_login_wrapper {
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
        width: auto;
    }

    input#email,
    input#password {
        width: 100%;
        box-sizing: border-box;
    }

    div#rssFeed {
        display: none;
    }

    div#pagewide_footer {
        width: 100%;
    }

    p.contact-us {
        line-height: 18px;
    }
}