/*** Custom Dashboard ***/ /* BASE CSS - BEGINS HERE */ /* DIMENSIONS */ @siteWidth : 960px; @mobile-max : 639px; @mobile-small : 504px; @tablet-min : @mobile-max + 1px; @tablet-max : 959px; @desktop-min : @tablet-max + 1px; @mobile-min : 320px; /* COLORS */ @orange-red : #e04421; /* Titles, Links, Lines and Decorations */ @dark-orange-red : #c83615; /* Lines and Decorations */ @dark-brown : #271d18; /* Lines and Decorations */ @white : #ffffff; /* Lines and Decorations */ @black : #000000; /* Lines and Decorations */ /* FONTS */ @font-copy : helvetica, arial, sans-serif; @font-primary : "proxima-nova", sans-serif; @font-secondary : "museo-slab", sans-serif; /* BASE CSS - ENDS HERE */ /* CSS CODE - BEGINS HERE */ .page-manage-account-user-edit, .page-manage-account-wk-edit, .page-manage-account-em-edit, .page-manage-account-adv-edit{ #edit-member, #edit-shipping-information, #edit-blockpassword, #edit-membership, #edit-billing-information, #edit-physical-mail, #edit-mail--2, #edit-adminfields { border-radius: 10px; border: 1px solid #e57d61; margin-bottom: 20px; background-color: #fff; margin-left: 10px; legend { background-color: #e14421; color: #fff; font-weight: bold; padding: 14px 16px; margin: 0 -20px; position: relative; border-radius: 10px; } legend a { position: absolute; right: -50px; color: #e14d2b; font-style: italic; text-transform: lowercase; font-size: 12px; font-family: verdana; bottom: 0px; } .fieldset-wrapper{ padding: 5px 10px; } /*-----------MANAGE ACCOUNT-----------------*/ /*.page-manage-creditcards-edit #manage-account-wk-member-edit .fieldset-wrapper, .page-manage-account-wk-membership-edit #manage-account-wk-membership-edit .fieldset-wrapper, .page-manage-account-em-member-edit #manage-account-em-member-edit .fieldset-wrapper, .page-manage-account-em-membership-edit #manage-account-em-membership-edit .fieldset-wrapper, .page-manage-account-user-edit #manage-account-edit .fieldset-wrapper, .page-manage-account-wk-edit #manage-account-wk-edit .fieldset-wrapper, .page-manage-account-em-edit #manage-account-em-edit .fieldset-wrapper{ padding: 5px 0; }*/ } #edit-creditcard { legend { background-color: #fff; color: #000; font-weight: normal; padding: 14px 16px; margin: 0 0px; position: relative; border-radius: 0px; font-size: 16px; } } } /* Member Information - Edit */ .page-manage-account-wk-member-edit #manage-account-wk-member-edit, .page-manage-account-wk-membership-edit #manage-account-wk-membership-edit, .page-manage-account-em-member-edit #manage-account-em-member-edit, .page-manage-account-em-membership-edit #manage-account-em-membership-edit, .page-manage-account-adv-member-edit #manage-account-adv-member-edit, .page-manage-account-adv-membership-edit #manage-account-adv-membership-edit, .page-manage-account-user-edit #manage-account-edit, .page-manage-account-wk-edit #manage-account-wk-edit, .page-manage-account-em-edit #manage-account-em-edit, .page-manage-account-adv-edit #manage-account-adv-edit{ fieldset.collapsible { padding-bottom: 24px; position: relative; width: 591px; } .fieldset-wrapper { width: auto; } .form-item { float: none; clear: both; width: auto; margin-bottom: 0px; margin-top: 7px; label { display: inline-block; width: 135px; float: none; line-height: 28px; } input { display: inline-block; width: auto; float: none; } textarea{ width:500px; } .description { display: block; clear: both; float: none; padding-left: 110px; } select { font-size: 16px; } &.form-item-userforum label { width: 135px; } &.form-item-userforum input { width: auto; } &.form-type-checkbox { padding-left: 5px; } &.form-type-checkbox label{ width: 450px; line-height: 20px; } &.form-item-companyname label { width: 140px; } &.form-item-companyname input { width: auto; } &.form-item-arvc-member label { width: 500px; } } #edit-shipping-information .form-item, #edit-billing-information .form-item { label { width: 120px; } .description { padding-left: 130px; } } input.form-submitX { margin: 0px 15px 0px 0px; } #edit-membership .form-item { &.form-type-password-confirm { width: 100%; } div.password-confirm { float: right; width: 150px; margin: 7px 0px 0px 10px; } .form-item-pass-pass1 label, .form-item-pass-pass2 label { width: 150px; } .form-item-pass-pass1 input, .form-item-pass-pass2 input { width: 150px; } } #edit-membership { .credit-card-title, .rs-table, .credit-card-note { float: left; clear: both; padding-left: 10px; font-size: 16px; } .rs-table { width: 95%; margin-top: 3px; } .rs-table thead th { padding: 1px 4px; } .rs-table .form-item.form-type-checkbox { float: none; margin: 0px; padding: 0px; } } } .page-manage-account-user #edit-actions input.form-submitX, .page-manage-account-wk #edit-actions input.form-submitX, .page-manage-account-em #edit-actions input.form-submitX, .page-manage-account-adv #edit-actions input.form-submitX, .page-manage-account-user #edit-actions a.form-submit, .page-manage-account-wk #edit-actions a.form-submit, .page-manage-account-em #edit-actions a.form-submit, .page-manage-account-adv #edit-actions a.form-submit, .page-manage-account-user #edit-actions a.form-submitX, .page-manage-account-wk #edit-actions a.form-submitX, .page-manage-account-em #edit-actions a.form-submitX, .page-manage-account-adv #edit-actions a.form-submitX{ margin: 0px 15px 0px 15px; background-color: @orange-red; border: 0 none; color: @white; cursor: pointer; font-family: @font-secondary; font-weight: 700px; padding: 8px 50px; font-size: 20px; text-decoration: none; height: 27px; display: inline-block; &:hover { background-color: @dark-orange-red; } } span.tooltipm { background: #e14421 url("/sites/default/themes/workamper/images/bg-tooltip.png") no-repeat scroll center center / 58% auto; border-radius: 50%; color: white; display: block; float: right; font-size: 12px; font-weight: bold; height: 14px; margin-left: 9px; margin-top:4px; overflow: hidden; position: relative; text-align: center; text-decoration: none; text-indent: 100%; width: 14px; z-index: 999; } span.tooltipm:hover { background-position: 3px 3px; background-size: 8px auto; border-radius: 5px; float: right; height: auto; left: 0; padding: 6px 20px; right: 0; text-indent: 0; top: 0; width: 180px; text-align:left; z-index: 9999999; } .email-block { padding: 0 0 0 10px; } .email-block > strong { font-size: 16px; } .block1 { float: left; width: 100%; margin-left: 26px; margin-bottom:8px; } .block1 > input { float: left; margin: 4px 0 0; } .block1 > strong { float: left; font-size: 16px; margin-bottom: 4px; font-weight: 500; padding: 0 0 0 4px; position: absolute; } .save-bu{display:inline-block;float:left;} .cancel-bu{height:24px !important;text-align:center;min-width: 0 !important;} /*CUSTOM manage_account*/ .manage_account { background-color: rgba(232,223,208,0.7); padding: 15px 30px; fieldset { border-radius: 10px; border: 1px solid #e57d61; margin-bottom: 20px; padding: 10px; margin-left: 5px; } fieldset legend { background-color: #e14421; color: #fff; font-weight: bold; padding: 14px 16px; margin: 0 -20px; position: relative; border-radius: 10px; } fieldset legend a { position: absolute; right: -50px; color: #e14d2b; font-style: italic; text-transform: lowercase; font-size: 12px; font-family: verdana; bottom: 0px; } fieldset p{ margin: 5px 0px; } fieldset label{ font-weight: normal; display: inline-block; width: 130px; text-align: right; padding: 0 10px; vertical-align: top; } fieldset strong { display: inline-block; } fieldset strong.arvc { font-size: 14px; font-style: italic; } } .page-manage-account-user .manage_account, .page-manage-account-wk .manage_account, .page-manage-account-em .manage_account , .page-manage-account-adv .manage_account{ fieldset span.tooltip, fieldset strong span.tooltip { display: none; font-size: 14px; font-style: italic; font-weight: normal; } fieldset p:hover > span.tooltip { display: inline; } fieldset strong:hover > span.tooltip { display: inline; } } .state-intro{ display: inline-block; width: 80%; margin: 10px 0px 18px 54px; text-align: justify; background-color: #fff; padding: 0px 16px 0px; } .state-intro p { font-size: 16px; } /* CSS CODE - ENDS HERE */ /*** Mobile - Cellphone ***/ @media only screen and (max-width: @mobile-max) { /* CSS CODE - BEGINS HERE */ .page-manage-account-user-member-edit #manage-account-user-member-edit, .page-manage-account-user-membership-edit #manage-account-user-membership-edit, .page-manage-account-wk-member-edit #manage-account-wk-member-edit, .page-manage-account-wk-membership-edit #manage-account-wk-membership-edit, .page-manage-account-em-member-edit #manage-account-em-member-edit, .page-manage-account-em-membership-edit #manage-account-em-membership-edit, .page-manage-account-adv-member-edit #manage-account-em-member-edit, .page-manage-account-adv-membership-edit #manage-account-em-membership-edit, .page-manage-account-user-edit #manage-account-user-edit, .page-manage-account-wk-edit #manage-account-wk-edit, .page-manage-account-em-edit #manage-account-em-edit, .page-manage-account-adv-edit #manage-account-adv-edit{ fieldset.collapsible { width: auto; } .form-item { float: none; label { float: none; margin: 0px; padding: 0px; } input { float: none; width: 98%; margin: 0px; } select { float: none; width: 98%; } textarea { float: none; width: 98%; } .description { padding: 0px; } &.form-item-approved { height: 20px; padding-top: 10px; } &.form-item-autorenew input, &.form-item-approved input { float: left; width: auto; } &.form-item-autorenew label, &.form-item-approved label { clear: none; display: block; float: left; width: auto; margin-left: 5px; } &.form-item-userforum label { width: auto; } &.form-item-userforum input { width: 98%; } &.form-type-checkbox { padding-left: 0px; } &.form-type-checkbox label{ width: auto; line-height: 20px; } &.form-item-companyname label { width: auto; } &.form-item-companyname input { width: 98%; } &.form-item-arvc-member label { width: auto; } } #edit-physical-mail, #edit-mail--2 { input { float: left; width: auto; } label { clear: none; display: block; float: left; width: auto; margin-left: 5px; } .form-item-information-about-live-events label { width: 90%; } } #edit-shipping-information .form-item, #edit-billing-information .form-item { label { width: auto; } .description { padding-left: 0px; } } #edit-membership .form-item { &.form-type-password-confirm { width: 100%; } div.password-confirm { float: right; width: 98%; margin: 7px 0px 0px 10px; } .form-item-pass-pass1 label, .form-item-pass-pass2 label { width: 98%; } .form-item-pass-pass1 input, .form-item-pass-pass2 input { width: 98%; } .password-suggestions.description { width: 100%; } } #edit-actions > div { display: block !important; } #edit-blockpassword{ position: relative; div.password-confirm{ position: absolute; top: 10px; right: 10px; text-align: right; } } #edit-blockpassword .form-item{ .password-suggestions.description{ width: 100%; } } } .page-manage-account-user #edit-actions input.form-submit, .page-manage-account-wk #edit-actions input.form-submit, .page-manage-account-em #edit-actions input.form-submit, .page-manage-account-user #edit-actions a.form-submit, .page-manage-account-wk #edit-actions a.form-submit, .page-manage-account-em #edit-actions a.form-submit, .page-manage-account-user #edit-actions a.form-submitX, .page-manage-account-wk #edit-actions a.form-submitX, .page-manage-account-em #edit-actions a.form-submitX { display: block !important; width: 86%; margin: 15px 0px 0px 2%; padding: 8px 5%; text-align: center; } .page-manage-account-user #edit-actions input.form-submit, .page-manage-account-wk #edit-actions input.form-submit, .page-manage-account-em #edit-actions input.form-submit, .page-manage-account-adv #edit-actions input.form-submit{ width: 96%; } .manage_account fieldset { margin-bottom: 15px; .fieldset-wrapper { padding: 0px 10px; } } .page-manage-account-wk-edit #manage-account-wk-edit { .fieldset-wrapper { padding: 0px 10px !important; } .form-item label { width: 99% !important; } .form-type-checkbox { input, label { display: inline !important; float: none !important; width: auto !important; } } } .state-intro{ width: 90% !important; padding: 0% 5% !important; margin: 10px 0px; } .back-button{ float: left !important; width: 100% !important; } .page-select-state-of-interest .form-type-checkbox:nth-child(1),.page-select-state-of-interest .form-type-checkbox:nth-child(2),.page-select-state-of-interest .form-type-checkbox:nth-child(3) { width: 100% !important; text-align: left !important; } /* CSS CODE - ENDS HERE */ } /*** Fix Fluid Styles for Big Mobile Screens ***/ @media only screen and (min-width: @mobile-min + 155px) and (max-width: @mobile-max) { /* CSS CODE - BEGINS HERE */ /* CSS CODE - ENDS HERE */ } .page-manage-account-user-edit #manage-account-edit .form-item-approved .description, .page-manage-account-user-edit #manage-account-edit .form-item-arvc-member .description, .page-manage-account-em-edit #manage-account-em-edit .form-item-arvc-member .description, .page-manage-account-em-edit #manage-account-em-edit .form-item-approved .description, .page-manage-account-adv-edit #manage-account-adv-edit .form-item-arvc-member .description, .page-manage-account-adv-edit #manage-account-adv-edit .form-item-approved .description, .page-manage-account-wk-edit #manage-account-wk-edit .form-item-approved .description { padding-left: 0 !important; text-align: justify; } .page-manage-account-user-edit #manage-account-edit .form-item label, .page-manage-account-em-edit #manage-account-em-edit .form-item label, .page-manage-account-em-edit #manage-account-em-edit .form-item.form-item-userforum label{ width: 140px; } .page-manage-account-wk-member-edit #manage-account-wk-member-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-wk-membership-edit #manage-account-wk-membership-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-em-member-edit #manage-account-em-member-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-em-membership-edit #manage-account-em-membership-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-adv-member-edit #manage-account-adv-member-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-adv-membership-edit #manage-account-adv-membership-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-user-edit #manage-account-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-wk-edit #manage-account-wk-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-em-edit #manage-account-em-edit #edit-membership .form-item.form-type-password-confirm>label, .page-manage-account-adv-edit #manage-account-adv-edit #edit-membership .form-item.form-type-password-confirm>label{ width:450px; } #edit-creditcard legend span a{ color:#000; background-color:#fff; } a.morelink{text-decoration:none;outline:none}.morecontent span{display:none} #popup1 { left: 0; position: fixed; top: 0px; width: 100%; z-index: 1001; height: 1780px; background-color: rgba(0, 0, 0, 0.35); } .page-select-state-of-interest .form-type-checkbox:nth-child(1),.page-select-state-of-interest .form-type-checkbox:nth-child(2),.page-select-state-of-interest .form-type-checkbox:nth-child(3) { width: 28%; text-align: center; } .page-select-state-of-interest .form-type-checkbox{float: left;width: 25%;margin:0 0 11px;} .page-select-state-of-interest .select-mail-fieldset {padding-left: 18px;} .state_submit_button{ clear: both; float: left; display: inline-block; margin-bottom: 17px; margin-top: 10px; } .state_cancel_button{ float: left; margin-left: 9px; margin-top: 10px; } .state_cancel_button a{ height: 23px; padding: 8px 0px !important; text-align: center; } .page-select-state-of-interest #page-title{float:left;} .back-button { background-color: #e04421; color: #fff !important; float: right; width: 25%; font-size: 18px; margin-top: 9px; text-align: center; } .back-button:hover { background-color: #C83615; text-decoration: none; }