#portal-content { margin:15px auto 40px; padding-left: 20px; padding-right: 20px; } #portal-content form { display:block; } .portal-page-title { margin-left:0; font-size:24px; font-weight:bold; margin-bottom:15px; } #portal-content h3 { font-size: 20px; } /* ############### Login Styling ################## */ #portal-content #inputUsername, #portal-content #inputPassword { margin-bottom:0; } #portal-content .errorMessage { color:red; } /* ############### Dashboard Styling ################## */ /* ############### Checkout Styling ################## */ input#promocode_enter { background-color:#f7f7f7; border: solid 1px #a7a9ac; padding:5px; margin: 5px 0 15px; width:100px; } .page-payment form { margin-left: 10px; width:90%; max-width:1200px; } .page-payment .priceStructure { /*width:550px;*/ border:solid 1px #000; text-align: center; } .page-payment .priceStructure tr:first-child { } .page-payment .priceStructure tr:first-child td { border-bottom:solid 1px #000; font-weight:bold; text-transform: uppercase; background-color:#d1d2d4 !important; } .page-payment .priceStructure td { text-align:left; padding:5px 10px !important; width:140px; border-right:solid 1px #000; } .page-payment .priceStructure td:last-child { border-right:none; } .page-payment .priceStructure tr:nth-child(even) {background: #fcfeff;} .page-payment .priceStructure tr:nth-child(odd) {background: #e7e7e8;} .payment-disclaimer_m, .payment-disclaimer_y { color:#4b4b4b; } .payment-disclaimer { font-size:10px; color:#4b4b4b; } #agree_tc_chkbox, #agree_edit_chkbox { float:left; margin-right:10px; clear:both; } .payment-chkbox, .payment-chkbox { margin-bottom:15px; } .page-payment .required-star { margin-left:2px; margin-right: 20px; } .page-payment label { margin-right:2px; } .page-payment input, .page-payment select { background-color:#f7f7f7; border: solid 1px #a7a9ac; padding:5px; margin: 5px 0 15px; } .page-payment .payment-info { width:700px; table-layout:auto; } .page-payment #cardHolderName { width:300px; } .page-payment #ccnumber { width:250px; } .page-payment #expDateMM { width:75px; } .page-payment #expDateYY { width:90px;} .page-payment #security_code { width:100px;} .page-payment .billing-info input, .page-payment .billing-info #billing_province { background-color:#f7f7f7; border: solid 1px #a7a9ac; padding:5px; margin: 5px 0 15px; width:350px; } .page-payment .billing-info #billing_province { width:360px; } .page-payment .billing-info #billing_postal { width:200px;} .page-payment table.billing-info { width:700px; } .page-payment table.billing-info td:first-child{ width:400px; } .page-payment table.billing-info td:nth-child(2) { width:300px; } .page-payment .required-star { margin-right: 2px; margin-left: 0;} .page-payment .payment-fillform label {width:100px; display:inline-block; } .page-payment .payment-fillform #fillformFname, .page-payment .payment-fillform #fillformTel { margin-right:20px; } .page-payment .payment-fillform input { margin-bottom:5px !important; } .page-payment p { margin-top:15px; } .page-payment label[for="fillformExt"] { width: inherit; margin-right: 10px; } /* ############### Form Page Styling ################## */ .entry-field { margin-bottom:0; } .entry-field .col1 { width:250px; display:inline-block; vertical-align: top; padding-right:15px; } .entry-field .col2 { display:inline-block; vertical-align: top; } .entry-field .col2 label.error { margin-left: 3px; font-weight:normal!important; font-size:10px; max-width: 200px; display: inline-block; vertical-align: middle; } .entry-field .col2 input { width:300px; } .entry-field .col2 textarea { width:300px; height:150px; line-height:150%; font-size:12px; background-color: #f7f7f7; border: solid 1px #a7a9ac; padding: 5px; margin: 5px 0 4px; font-family: arial; } .entry-field .col1 label { font-weight:bold; font-size: 14px; color:#000; } .entry-field .col1 label.overCharLimit { color:red; } .entry-field .field-limit { font-size: 11px; } #portal-content .entry-form .entry-page input[type="text"] { width: 90%; min-width:300px; } #portal-content .entry-form .entry-page textarea { width: 450px; height:125px; } #portal-content .entry-form input, #portal-content .userProfile input { padding: 0.5278em; } #portal-content .entry-form input.img_upload_btn { padding: 0; } #portal-content .entry-form .entry-page .char-count { font-weight:normal; font-size:11px;} #portal-content .entry-form .display-msg { margin-top:15px; } #portal-content #img-preview img { max-width: 200px; } #portal-content #upload_msg { display:inline-block; color:red; font-size:12px; } .entry-field .col2 .display-field { min-width: 300px; max-width: 500px; margin-bottom:0; } #portal-content .viewtype.distributors p { max-width: 800px; } #portal-content .distributorList, #portal-content .keywordList { margin-top:15px; } #portal-content .distributor_header div { width:215px;text-align:center;display:inline-block; } #portal-content .num_distributors input, #portal-content .num_distributors select { width:200px; margin:5px; } #portal-content .num_keywords { clear:both; display:block; margin:4px 10px 0 0; } #portal-content .num_keywords label { width: 100px; display: inline-block; } #portal-content .num_keywords input { width:250px; margin-bottom:5px; } #portal-content .note { font-size:10px; } #portal-content #repeat_PSM { padding:6px 10px !important; } #portal-content h3.top, #portal-content h3.sec { margin-bottom: 0; } #portal-content ul.sub-accordion { margin-top:15px; } #portal-content h3.top .right { float:right; margin-right:20px; } #portal-content h3.top .num_selected { font-size:14px; } #portal-content .open, #portal-content .close { display:inline-block; font-size:12px; margin: 0 10px; vertical-align: middle; /*text-decoration:underline;*/ } #portal-content #ui-accordion-cat-accordion-panel-1, #portal-content #ui-accordion-cat-accordion-panel-2, #portal-content #ui-accordion-cat-accordion-panel-3, #portal-content #ui-accordion-cat-accordion-panel-4, #portal-content #ui-accordion-cat-accordion-panel-5 { padding-top:0; } #portal-content .cat-page label.header { font-weight: bold; color: #6c9a3b; margin:4px 30px 0; display: inline-block; } #portal-content .cat-page label.sec-header { font-weight: bold; color: #999; margin:4px 30px 0;; display: block; } #portal-content .cat-page li.top, #portal-content .cat-page li.sec { width: 100% !important; list-style-type: none; } #portal-content .cat-page li { width: 250px; display: inline-block; vertical-align:top; } #portal-content .cat-page li div { display: block; /*margin-left: 8px;*/ padding: 2px; } #portal-content .cat-page input { vertical-align: top; cursor: pointer; margin:5px; float:left; } #portal-content .cat-page label.selected { font-weight: bold; color: #1d5384; } #portal-content .main-cat, #portal-content .sub-cat { margin-top:15px; text-transform:capitalize; } #portal-content .sub-cat { /*max-height: 500px; min-height: 150px; padding: 0 15px; overflow: auto; border: solid 1px #999;*/ } #consent-form .entry-field .col1 { width:150px; vertical-align: middle; } #consent-form input{ background-color: #f7f7f7; border: solid 1px #a7a9ac; padding: 5px; margin: 0 0 4px; } #consent-form #consent_agree { margin:5px 10px 50px 0; float:left;} #consent-form .agree_label { font-size:14px; } #portal-content .viewtype.intro .col1{ width:100px; } #portal-content .viewtype.intro .col2 input{ margin:0; margin-bottom:5px; width:250px; } #portal-content .viewtype.intro label{ margin-right:15px; } #portal-content .viewtype.intro #btypeId { width:300px; } /* ############### Purchase Options Styling ################## */ #portal-content .checkmark_compare { width:35px; text-align:center; } #portal-content .comparison_table { max-width:700px; border-collapse:collapse; display:inline-block; } #portal-content .comparison_table td { padding:5px; border:solid 1px #000; text-align:center; min-width:100px; } #portal-content .comparison_table tr td:first-child { font-weight: bold; } #portal-content .comparison_table tr:first-child td { font-weight: bold; } #portal-content .comparison_table tr:first-child td:first-child { border:none;} #portal-content .cart_display .remove_purchase { text-decoration:underline; color:red; } #portal-content .cart_display .remove_purchase:hover { cursor:pointer; } #portal-content .cart_display h3 { margin-top:0; } #portal-content .cart_display { display:inline-block; float: right; min-width: 250px; max-width:500px; width:425px; } #portal-content .cart_display table { width:100%; } #portal-content .cart_display table .tax td:first-child, #portal-content .cart_display table .total td:first-child { /*text-transform:uppercase; color:#6d6e71;*/ } #portal-content .cart_display td:first-child { width:84%; } #portal-content .cart_display td:nth-child(2) { width:16%; text-align:right; } #portal-content .cart_display td {padding: 0; line-height: 200%;} #portal-content .bookings_table { max-width:700px; border-collapse:collapse; } #portal-content .bookings_table td { padding:5px; border:solid 1px #000; text-align:center; } #portal-content .bookings_table tr td:first-child { font-weight: bold; } #portal-content .bookings_table tr:first-child td { font-weight: bold; } /*#portal-content .bookings_table .upgrade_header{ max-width:300px; }*/ #portal-content .tooltip-img { margin-bottom: 5px; width: 30px; vertical-align: middle; } /* ############### General Styling ################## */ #portal-content p { margin:10px 0px; } .form-buttons { text-align:center; clear:both; padding:10px 0; margin-top:10px; } #portal-content .browse_btn { width:175px !important; display:inline-block !important; background-color: #fff !important; border: solid 1px #cdced1 !important; color: #767475 !important; padding-top: 0 !important; height:28px !important; line-height: 2; } #portal-content div.img_upload_btn { text-align: center; position: relative; overflow: hidden; font-size:14px; } #portal-content input.img_upload_btn { position: absolute; display: block; top: 0px; right: 0px; margin: 0px; opacity: 0; font-size: 200px; direction: ltr; cursor: pointer; width: 100%; height: 100%; } .header-title { margin: 10px 0;} .status { text-transform:capitalize; } .status a { text-decoration:underline;} .required-star { color:#F00; } #TestAlertMessage { color:#F00; } #portal-content input, #portal-content select { background-color: #f7f7f7; border: solid 1px #a7a9ac; padding: 5px; margin: 0 0 5px; } hr.myProfile, hr.checkout { margin: 15px 0 10px; border:none; border-bottom:#000 solid 1px; } .cart_button { position: relative; } .cart_button img { margin-right:20px; margin-left:20px; } .cart_button:hover {cursor:pointer; } .cart-item { position: absolute; background-color: #f00; color: #fff; right: 0; padding:1px 3px; font-size:11px; margin-top:8px;} .cart-item-num { position: absolute; right: 28px; margin-top:3px; z-index:99; border-radius: 50%; behavior: url(PIE.htc); /* for IE8 */ width: 15px; height: 15px; padding: 1px; background: #fff; border: 3px solid #f00; color: #f00; text-align: center; font-size:13px; } /* ############### Button Styling ################## */ .noty_message{ height:45px; font-size:16px !important; line-height: 18px !important; } .admin-products-menu .btn { padding: 4px 6px !important; } #portal-content button.btn { background-color: #333 !important; border: 0 none !important; font-size: 12px !important; padding: 0.7917em 1.5em !important; border-radius: 0 !important; line-height: 1.42857; background-image:none; color:#FFF !important; } #portal-content button.btn:hover { background-color: rgba(51, 51, 51, 0.7) !important; outline: 0 none; } #portal-content button.btn.btn-primary:hover { background-color: rgba(10, 179, 218, 0.7) !important; } #portal-content button.btn.btn-yellow:hover { background-color: rgba(235, 147, 22, 0.7) !important; } #portal-content button.btn.btn-red:hover { background-color: rgba(217, 83, 79, 0.7) !important; } #portal-content button.btn.btn-info:hover { background-color: rgba(42, 171, 210, 0.7) !important; } #portal-content button.addnew_button { margin-right:10px; } #portal-content button.btn.btn-primary { background-color: rgb(10, 179, 218) !important; border: 3px solid rgb(189, 190, 192) !important; padding-bottom: 6px !important; padding-top: 6px !important; min-height:36px; } #portal-content button.btn.btn-yellow { background-color: #eb9316 !important; } #portal-content button.btn.btn-red { background-color: #d9534f !important; } #portal-content button.btn.btn-info { background-color: #2aabd2 !important; } div.ui-datepicker-header { background: #e9e9e9; } table.ui-datepicker-calendar { background-color: #fff; } table.ui-datepicker-calendar td .ui-state-default { background: #f6f6f6; } .ui-dialog.ui-widget.ui-widget-content { background-color: #fff; } /* ############### PREVIEW. ################## */ .viewtype .left_wrapper { width: calc(100% - 350px); float:left; } .keywords .keywords_wrapper p { margin-right:20px !important; } #portal-content .preview_wrapper.preview { width:300px; margin:auto; float:right; } #portal-content .preview_wrapper.preview .psm_preview, .preview_wrapper.preview .ps_preview { border: 1px solid #a6c9e2; margin-bottom: 10px; } #portal-content .preview_wrapper.preview .psm_preview p, .preview_wrapper.preview .ps_preview p{ font-weight:bold; color: #77982e; } #portal-content .preview_wrapper.approve .psm_preview p, .preview_wrapper.approve .ps_preview p{ font-weight:bold; color: #77982e; } #portal-content .preview_wrapper.thankyou .psm_preview p, .preview_wrapper.thankyou .ps_preview p{ font-weight:bold; color: #77982e; } #portal-content .preview_wrapper.approve, .preview_wrapper.thankyou { max-width:600px; margin:auto; } #portal-content .preview_approve { width: 80%; margin: auto; } #portal-content .preview_wrapper table td { padding: 0; line-height: 125%; word-wrap: break-word; max-width: 200px;/*word-break: break-all;*/ } #portal-content .preview_wrapper.preview p { font-size:15px; } .psm_preview, .ps_preview { display:inline-block; float:left; } .psm_preview p, .ps_preview p { font-size:15px; /*text-align:center;*/ } .preview_wrapper.preview .psm_preview p, .preview_wrapper.preview .ps_preview p { text-align:left; } .psm_preview table, .psm_preview img, .ps_preview img { max-width:200px; } .psm_preview { width: 240px; font-size: 15px; font-family: 'Arial'; font-stretch: condensed; padding: 0 10px 20px; text-align: left; margin-right: 75px; } .ps_preview { width: 240px; font-size: 15px; font-family: 'Arial'; font-stretch: condensed; padding: 0 10px 20px; text-align: left; } .psm_preview .E, .ps_preview .E { max-width:200px; margin:auto; background: #F7F0DC; padding: 10px 10px; border: 2px solid #6B5B2F; } .psm_preview .A, .ps_preview .A { max-width:200px; margin:auto; background: #F7F0DC; padding: 10px 10px; border: 2px solid #6B5B2F; } .adv_listing { font-style:italic; font:"Times New Roman", Times, serif; } .adv_listing_fr { font-style:italic; font:Arial, Helvetica, sans-serif; font-weight:bold; } .viewtype.approve p { clear:both; } #approve_PSM, #approve_PS{ float: left; margin-right: 15px !important; } .imgli { padding-left: 2px; padding-right: 10px; } .thankyou .preview_wrapper .ui-icon { float: left; margin-right: .3em; margin-top: -.1em; } .grn { color: #77982e; } /* ############### MISC. ################## */ .hidden { display:none; } .qtip-default { border: 1px solid #F1D031 !important; background-color: #FFFFEA !important;/*background-color: #FFFFA3 !important;*/ } .tooltiptext { margin:10px 25px; font-size:16px; line-height:150%; } .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000 !important; } .ui-dialog-titlebar-close { background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0); border: medium none; } .ui-dialog-titlebar-close:hover { background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0); } /********************* * Responsive *********************/ @media screen and (max-width: 1020px) { #leaderboard { display:none; } #portal-content p, #portal-content .left_wrapper, .bookings_table { font-size: 14px; } body .site { top: 50px; } input, textarea { color: #000000; } .viewtype.companyDetails .preview_wrapper, .viewtype.keywords .preview_wrapper, .viewtype.companyDetailsPS .preview_wrapper { display:none; } .viewtype.companyDetails .left_wrapper, .viewtype.keywords .left_wrapper, .viewtype.companyDetailsPS .left_wrapper { width:100%; } #portal-content .distributor_header div { width: 185px; } #portal-content .num_distributors input, #portal-content .num_distributors select { width: 170px; } #portal-content .cat-page { font-size: 12px; } .viewtype.optionsPSM .preview_wrapper, .viewtype.optionsPS .preview_wrapper { display:none; } .viewtype.optionsPSM h3, .viewtype.optionsPS h3 { clear:both; } #portal-content .cart_display { float: left; font-size: 14px; margin: 20px 0; } #portal-content .preview_approve { font-size: 14px; width: 90%; } #portal-content .page-payment, #portal-content .page-payment p { font-size: 12px; } #portal-content .page-payment input, #portal-content .page-payment select { padding:2px !important; } #portal-content .page-payment form { width:100%; margin:0; } .page-payment .payment-info, .page-payment .payment-fillform, #portal-content .cart_display { width:100%; } .page-payment #cardHolderName { width:200px; } .page-payment #ccnumber { width:150px; } .page-payment #expDateYY { width:75px;} .page-payment #security_code { width:45px;} .page-payment .payment-info td { vertical-align: top; } .page-payment .payment-info tr:nth-child(1) td:nth-child(1) { width:40% !important; } .page-payment .payment-info tr:nth-child(1) td:nth-child(2) { width:60% !important; } #portal-content .page-payment .payment-fillform label { width:80px; margin-right: 10px; } #portal-content .page-payment .payment-fillform input { width:100px; margin-right: 10px; padding:2px; } } @media screen and (max-width: 800px) { #portal-content p, #portal-content .left_wrapper, .bookings_table { font-size: 12px; } .entry-field .col2 { display: block; } .entry-field .col2 input, .entry-field .col2 textarea, .entry-field .col2 select { width:90%; } #portal-content .distributor_header div { width: 33%; } #portal-content .num_distributors input, #portal-content .num_distributors select { width: 30%; padding:2px; margin:2px; font-size:11px; } } @media screen and (max-width: 650px) { #portal-content { padding-left: 10px; padding-right: 10px; } .portal-page-title { font-size:18px; } #portal-content button.btn { font-size: 11px !important; padding: 5px 10px !important; } #portal-content .left_wrapper #repeat_PSM { padding: 5px 10px !important; } #portal-content p, #portal-content .left_wrapper, .bookings_table { font-size: 11px; } #portal-content .loginPage input { width: 100px; } #portal-content .viewtype.intro label[for="quebec_listing"] { display:block; margin-bottom: 10px; } .entry-field .col2 { display: block; } .entry-field .col2 input, .entry-field .col2 textarea, .entry-field .col2 select { width:90%; } #portal-content .distributor_header div { width: 33%; } #portal-content .num_distributors input, #portal-content .num_distributors select { width: 30%; padding:2px; margin:2px; font-size:11px; } .viewtype.keywords .form-buttons { padding-top:30px; } #portal-content .cat-page label.header { font-size: 14px; } #portal-content h3.top .num_selected, #portal-content h3.top .right { font-size: 10px; clear:both; display:inline-block; margin-left: 5px; margin-right:5px; } .ui-accordion .ui-accordion-header .ui-icon { top: 28% !important; } .ui-accordion .ui-accordion-content { clear:both; padding: 1em 15px !important; } #portal-content .comparison_table { overflow:scroll; max-width:500px; } #portal-content .preview_approve { font-size: 11px; width: 90%; } #portal-content .preview_wrapper .psm_preview, #portal-content .preview_wrapper .ps_preview { font-size:12px !important; } #portal-content .page-payment label { font-size:11px; } .page-payment #cardHolderName { width:150px; } .page-payment #sCardType { width:100px; margin-right:10px; } .page-payment #ccnumber { width:100px; } .page-payment #expDateYY { width:75px;} .page-payment #security_code { width:45px;} #portal-content .page-payment .payment-fillform label { width:80px; margin-right: 10px; } #portal-content .page-payment .payment-fillform input { width:100px; margin-right: 10px; padding:2px; } }