diff --git a/css/frontend.css b/css/frontend.css index 7be5cbc5c..ecd3a80ce 100644 --- a/css/frontend.css +++ b/css/frontend.css @@ -1,200 +1,200 @@ -/*--------------------------------------- - Buttons ----------------------------------------*/ -.pmpro_btn, .pmpro_btn:link, .pmpro_content_message a, .pmpro_content_message a:link { - display: inline-block; - background-color: #EFEFEF; - background-image: none; - border: 1px solid #D6D6D6; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - padding: 6px 12px; - margin: 0; - color: #444; - font-size: 12px; - font-weight: 700; - text-transform: none; - text-decoration: none; - text-align: center; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} - -.pmpro_btn:focus, .pmpro_content_message a:focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -.pmpro_btn:hover, .pmpro_btn:focus, .pmpro_content_message a:focus, .pmpro_content_message a:hover { - color: #000; - background-color: #FAFAFA; - text-decoration: none; -} - -.pmpro_btn:active, -.pmpro_btn.active { - background-image: none; - outline: 0; - -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); -} - -.pmpro_btn.disabled, -.pmpro_btn[disabled], -fieldset[disabled] .pmpro_btn { - pointer-events: none; - cursor: not-allowed; - opacity: 0.65; - filter: alpha(opacity=65); - -webkit-box-shadow: none; - box-shadow: none; -} - -.pmpro_btn.pmpro_cancel, .pmpro_btn.pmpro_cancel:link {background: none; border: none; margin: 0 0 0 10px; } -/*--------------------------------------- - Forms ----------------------------------------*/ -form.pmpro_form div {clear: left; margin: .5em 0 1em 0; } -form.pmpro_form label {float: left; margin: 3px 10px 0 0; width: 120px; font-weight: bold; text-align: right; } -form.pmpro_form label.pmpro_normal {float: none; margin: 0 0 0 0; width: auto; font-weight: normal; text-align: auto;} -.pmpro_clickable {cursor: pointer;} -form.pmpro_form .likelabel {font-weight: bold; } -form.pmpro_form .input, form.pmpro_form textarea, .input, form.pmpro_form select {padding: 3px; border: 1px solid #AAA; margin: 0 3px 0 0; } -form.pmpro_form textarea {font-family: Arial, Helvetica, sans-serif; font-size: 12px; } -form.pmpro_form select {margin: 2px 0 0 0 ; font-size: 12px;} -form.pmpro_form .lite {color: #666; } -form.pmpro_form .leftmar {margin: 8px 0 0 130px; } - -form.pmpro_form .pmpro_captcha {margin: 0 0 0 130px !important; } -form.pmpro_form .pmpro_captcha div {clear: none; margin: 0; } -form.pmpro_form .pmpro_submit {margin-left: 130px; } -form.pmpro_form .pmpro_submit span {float: left; } -form.pmpro_form #pmpro_processing_message {margin: 5px 0 0 10px; font-style: italic; color: #999; } - -/*-------------------------------------------------- - Messages - Success, Error, Alert -----------------------------------------------------*/ -.pmpro_message {background-color: #d9edf7; margin: .5em 0; padding: 10px 15px; color: #31708f; font-size: 14px; font-weight: 400; line-height: 1.5em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #bce8f1; } - -.pmpro_success {background-color: #dff0d8; color: #3c763d; border-color: #d6e9c6; } -.pmpro_error {background-color: #f2dede; color: #a94442; border-color: #ebccd1; } -.pmpro_alert {background-color: #fcf8e3; color: #8a6d3b; border-color: #faebcc;} - -.pmpro_content_message a {margin: 5px 5px 0 0; } - -.pmpro_message a {color: #245269; text-decoration: underline; } -.pmpro_success a {color: #2b542c; } -.pmpro_error a {color: #843534; } -.pmpro_alert a {color: #66512c; } - -input.pmpro_error {background-image: none;} -select.pmpro_error {background-image: none;} - -/*--------------------------------------- - Membership Checkout ----------------------------------------*/ -.pmpro_checkout thead th {font-weight: bold; color: #444; padding: 10px; } -.pmpro_checkout tbody td {padding: 10px; } -.pmpro_checkout tr.odd td {background: rgba(125,125,125,.1); } -.pmpro_checkout tr.selected td {background: #FFC; } -.pmpro_checkout tr.active td {background: #FFC; } -.pmpro_checkout .name {font-weight: bold; } -.pmpro_checkout ul {margin: 5px 0 0 20px; padding: 0; font-size: .8em; color: #444; } - -.pmpro_checkout tfoot td {padding: 10px; color: #444; } -.pmpro_checkout .topfoot td {border-top: 2px solid #CCC;} -.pmpro_checkout .total td {border-top: 1px solid #CCC; font-size: 1.2em; font-weight: bold; padding-bottom: 30px;} -.pmpro_checkout tfoot .entercode td {background: #EEE; } - -.pmpro_checkout td.rtbdr {border-right: 1px solid #CCC; } - -.pmpro_checkout select {font-size: 11px; } - -.pmpro_thead-msg {display: block; float: right; width: auto; font-style: italic; font-weight: normal; text-align: right; white-space: nowrap; } - -.pmpro_ordersummary {float: right; } - -#pmpro_license { background: #FFF; padding: 5px; border: 1px solid #CCC; height: 200px; margin: 3px; color: #666; overflow: auto; } - -.pmpro_sslseal {float: right; clear: none !important; margin: 0 !important; } - -a.pmpro_radio {text-decoration: none; color: #000;} - -/*--------------------------------------- - Membership Invoice ----------------------------------------*/ -.pmpro_invoice { } - - -/*--------------------------------------- - Membership Account ----------------------------------------*/ -#pmpro_account .pmpro_box {border-top: 1px solid #CCC; padding: 1em 0; margin: 1em 0; } -#pmpro_account .pmpro_box h3 {margin: 0; padding: 0; border: none; background: none; } -#pmpro_account .pmpro_box p {margin: .5em 0 0 0; padding: 0; } -#pmpro_account .pmpro_box ul {margin-bottom: 0; } - -#pmpro_account #pmpro_account-membership { } -#pmpro_account #pmpro_account-profile { } -#pmpro_account #pmpro_account-billing { } -#pmpro_account #pmpro_account-invoices { } -#pmpro_account #pmpro_account-links { } - -.pmpro_actionlinks {font-size: .8em; margin: .25em 0 0 0; } -.pmpro_actionlinks a {display: inline-block; padding: 0 5px 0 0; margin: 0; text-decoration: none; } -.pmpro_actionlinks a:last-child {padding: 0; } -.pmpro_hidden {display: none;} -li.pmpro_more {list-style-type: none; text-align: center; margin-left: -20px; padding-left: 0;} - -/*--------------------------------------- - Membership Levels ----------------------------------------*/ -#pmpro_levels_table {background: #FFF; } -#pmpro_levels_table .pmpro_btn {display: block; } - -/*--------------------------------------- - Misc ----------------------------------------*/ -.pmpro_a-right {float: right; width: auto; text-align: right; text-decoration: underline; font-size: 11px; } -.pmpro_a-print {float: right; width: auto; text-decoration: none; color: #345395; background: url(../images/printer.gif) top left no-repeat; padding: 0px 0px 2px 20px; font-size: 11px; line-height: 16px; cursor: pointer; } - -.pmpro_red {color: #CC0000; } -.pmpro_grey {color: #999; } - -.top1em {margin-top: 1em;} -.bot1em {margin-bottom: 1em;} -.bot0em {margin-bottom: 0em;} -.clear {clear: both; } - -.pmpro_small {font-size: .8em;} - -/* - Fixes for Twentyfiften and other themes. -*/ -form.pmpro_form .input {display: inline-block; width: auto; } -#your-profile input {display: inline-block; width: auto; } /* front end profile via Theme My Login */ - -@media (max-width:768px){ - #pmpro_levels_table {border: none; } - #pmpro_levels_table th {display: none; } - #pmpro_levels_table td {border: none; display: block; padding: 0 10px; text-align: center; } - #pmpro_levels_table td:first-child {font-size: 1.4em; padding-top: 10px; } - #pmpro_levels_table td:last-child {padding-bottom: 10px; padding-top: 10px; } - form.pmpro_form label {display: block; margin: 0; text-align: left; width: 100%; } - form.pmpro_form label.pmpro_normal, #pmpro_tos_fields label {display: inline-block; } - form.pmpro_form input[type=text].input, form.pmpro_form input[type=password].input {width: 90%; } - form.pmpro_form input[type=text]#other_discount_code, form.pmpro_form input[type=text]#CVV, form.pmpro_form input[type=text]#discount_code {width: 40%; } - form.pmpro_form #pmpro_payment_information_fields .pmpro_thead-msg {float: none; margin-bottom: 10px; text-align: left; text-wrap: normal; white-space: normal; } - form.pmpro_form .leftmar {margin: 2px 0 0 0; } - form.pmpro_form .pmpro_submit {margin-left: 0; } - form.pmpro_form .pmpro_submit #pmpro_submit_span {display: block; float: none; } - form.pmpro_form .pmpro_btn {display: block; width: 100%; } -} +/*--------------------------------------- + Buttons +---------------------------------------*/ +.pmpro_btn, .pmpro_btn:link, .pmpro_content_message a, .pmpro_content_message a:link { + display: inline-block; + background-color: #EFEFEF; + background-image: none; + border: 1px solid #D6D6D6; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + padding: 6px 12px; + margin: 0; + color: #444; + font-size: 12px; + font-weight: 700; + text-transform: none; + text-decoration: none; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.pmpro_btn:focus, .pmpro_content_message a:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.pmpro_btn:hover, .pmpro_btn:focus, .pmpro_content_message a:focus, .pmpro_content_message a:hover { + color: #000; + background-color: #FAFAFA; + text-decoration: none; +} + +.pmpro_btn:active, +.pmpro_btn.active { + background-image: none; + outline: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} + +.pmpro_btn.disabled, +.pmpro_btn[disabled], +fieldset[disabled] .pmpro_btn { + pointer-events: none; + cursor: not-allowed; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; +} + +.pmpro_btn.pmpro_cancel, .pmpro_btn.pmpro_cancel:link {background: none; border: none; margin: 0 0 0 10px; } +/*--------------------------------------- + Forms +---------------------------------------*/ +form.pmpro_form div {clear: left; margin: .5em 0 1em 0; } +form.pmpro_form label {float: left; margin: 3px 10px 0 0; width: 120px; font-weight: bold; text-align: right; } +form.pmpro_form label.pmpro_normal {float: none; margin: 0 0 0 0; width: auto; font-weight: normal; text-align: auto;} +.pmpro_clickable {cursor: pointer;} +form.pmpro_form .likelabel {font-weight: bold; } +form.pmpro_form .input, form.pmpro_form textarea, .input, form.pmpro_form select {padding: 3px; border: 1px solid #AAA; margin: 0 3px 0 0; } +form.pmpro_form textarea {font-family: Arial, Helvetica, sans-serif; font-size: 12px; } +form.pmpro_form select {margin: 2px 0 0 0 ; font-size: 12px;} +form.pmpro_form .lite {color: #666; } +form.pmpro_form .leftmar {margin: 8px 0 0 130px; } + +form.pmpro_form .pmpro_captcha {margin: 0 0 0 130px !important; } +form.pmpro_form .pmpro_captcha div {clear: none; margin: 0; } +form.pmpro_form .pmpro_submit {margin-left: 130px; } +form.pmpro_form .pmpro_submit span {float: left; } +form.pmpro_form #pmpro_processing_message {margin: 5px 0 0 10px; font-style: italic; color: #999; } + +/*-------------------------------------------------- + Messages - Success, Error, Alert +----------------------------------------------------*/ +.pmpro_message {background-color: #d9edf7; margin: .5em 0; padding: 10px 15px; color: #31708f; font-size: 14px; font-weight: 400; line-height: 1.5em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #bce8f1; } + +.pmpro_success {background-color: #dff0d8; color: #3c763d; border-color: #d6e9c6; } +.pmpro_error {background-color: #f2dede; color: #a94442; border-color: #ebccd1; } +.pmpro_alert {background-color: #fcf8e3; color: #8a6d3b; border-color: #faebcc;} + +.pmpro_content_message a {margin: 5px 5px 0 0; } + +.pmpro_message a {color: #245269; text-decoration: underline; } +.pmpro_success a {color: #2b542c; } +.pmpro_error a {color: #843534; } +.pmpro_alert a {color: #66512c; } + +input.pmpro_error {background-image: none;} +select.pmpro_error {background-image: none;} + +/*--------------------------------------- + Membership Checkout +---------------------------------------*/ +.pmpro_checkout thead th {font-weight: bold; color: #444; padding: 10px; } +.pmpro_checkout tbody td {padding: 10px; } +.pmpro_checkout tr.odd td {background: rgba(125,125,125,.1); } +.pmpro_checkout tr.selected td {background: #FFC; } +.pmpro_checkout tr.active td {background: #FFC; } +.pmpro_checkout .name {font-weight: bold; } +.pmpro_checkout ul {margin: 5px 0 0 20px; padding: 0; font-size: .8em; color: #444; } + +.pmpro_checkout tfoot td {padding: 10px; color: #444; } +.pmpro_checkout .topfoot td {border-top: 2px solid #CCC;} +.pmpro_checkout .total td {border-top: 1px solid #CCC; font-size: 1.2em; font-weight: bold; padding-bottom: 30px;} +.pmpro_checkout tfoot .entercode td {background: #EEE; } + +.pmpro_checkout td.rtbdr {border-right: 1px solid #CCC; } + +.pmpro_checkout select {font-size: 11px; } + +.pmpro_thead-msg {display: block; float: right; width: auto; font-style: italic; font-weight: normal; text-align: right; white-space: nowrap; } + +.pmpro_ordersummary {float: right; } + +#pmpro_license { background: #FFF; padding: 5px; border: 1px solid #CCC; height: 200px; margin: 3px; color: #666; overflow: auto; } + +.pmpro_sslseal {float: right; clear: none !important; margin: 0 !important; } + +a.pmpro_radio {text-decoration: none; color: #000;} + +/*--------------------------------------- + Membership Invoice +---------------------------------------*/ +.pmpro_invoice { } + + +/*--------------------------------------- + Membership Account +---------------------------------------*/ +#pmpro_account .pmpro_box {border-top: 1px solid #CCC; padding: 1em 0; margin: 1em 0; } +#pmpro_account .pmpro_box h3 {margin: 0; padding: 0; border: none; background: none; } +#pmpro_account .pmpro_box p {margin: .5em 0 0 0; padding: 0; } +#pmpro_account .pmpro_box ul {margin-bottom: 0; } + +#pmpro_account #pmpro_account-membership { } +#pmpro_account #pmpro_account-profile { } +#pmpro_account #pmpro_account-billing { } +#pmpro_account #pmpro_account-invoices { } +#pmpro_account #pmpro_account-links { } + +.pmpro_actionlinks {font-size: .8em; margin: .25em 0 0 0; } +.pmpro_actionlinks a {display: inline-block; padding: 0 5px 0 0; margin: 0; text-decoration: none; } +.pmpro_actionlinks a:last-child {padding: 0; } +.pmpro_hidden {display: none;} +li.pmpro_more {list-style-type: none; text-align: center; margin-left: -20px; padding-left: 0;} + +/*--------------------------------------- + Membership Levels +---------------------------------------*/ +#pmpro_levels_table {background: #FFF; } +#pmpro_levels_table .pmpro_btn {display: block; } + +/*--------------------------------------- + Misc +---------------------------------------*/ +.pmpro_a-right {float: right; width: auto; text-align: right; text-decoration: underline; font-size: 11px; } +.pmpro_a-print {float: right; width: auto; text-decoration: none; color: #345395; background: url(../images/printer.gif) top left no-repeat; padding: 0px 0px 2px 20px; font-size: 11px; line-height: 16px; cursor: pointer; } + +.pmpro_red {color: #CC0000; } +.pmpro_grey {color: #999; } + +.top1em {margin-top: 1em;} +.bot1em {margin-bottom: 1em;} +.bot0em {margin-bottom: 0em;} +.clear {clear: both; } + +.pmpro_small {font-size: .8em;} + +/* + Fixes for Twentyfiften and other themes. +*/ +form.pmpro_form .input {display: inline-block; width: auto; } +#your-profile input {display: inline-block; width: auto; } /* front end profile via Theme My Login */ + +@media (max-width:768px){ + #pmpro_levels_table {border: none; } + #pmpro_levels_table th {display: none; } + #pmpro_levels_table td {border: none; display: block; padding: 0 10px; text-align: center; } + #pmpro_levels_table td:first-child {font-size: 1.4em; padding-top: 10px; } + #pmpro_levels_table td:last-child {padding-bottom: 10px; padding-top: 10px; } + form.pmpro_form label {display: block; margin: 0; text-align: left; width: 100%; } + form.pmpro_form label.pmpro_normal, #pmpro_tos_fields label {display: inline-block; } + form.pmpro_form input[type=text].input, form.pmpro_form input[type=password].input {width: 90%; } + form.pmpro_form input[type=text]#other_discount_code, form.pmpro_form input[type=text]#CVV, form.pmpro_form input[type=text]#discount_code {width: 40%; } + form.pmpro_form #pmpro_payment_information_fields .pmpro_thead-msg {float: none; margin-bottom: 10px; text-align: left; text-wrap: normal; white-space: normal; } + form.pmpro_form .leftmar {margin: 2px 0 0 0; } + form.pmpro_form .pmpro_submit {margin-left: 0; } + form.pmpro_form .pmpro_submit #pmpro_submit_span {display: block; float: none; } + form.pmpro_form .pmpro_btn {display: block; width: 100%; } +}