/* ================================== */ /* = = */ /* = STYLING PAGE BUILDER = */ /* = = */ /* ================================== */ /* Last updated 28 Feb 2017 */ /* IMPORTANT NOTES */ /* 1) Page Builder already has a default stylesheet /ea-demo/frontend/pbAssets/build/css/enPage.css */ /* so you may not need extra styling - only if you need to adjust the default behaviour */ /* 2) For specificty, ensure that the template's tag has a class of "pb" /* 3) By default every component has box-sizing: border-box; /* STRUCTURE NOTES */ /* Each component has a series of classes: /* Every component: en__component */ /* Page (form class): en__component--page */ /* Row: en__component--row */ /* 2-col row: en__component--row--2 */ /* Column (contained in row): en__component--column */ /* Copy block: en__component--copyblock */ /* Form block: en__component--formblock */ /* Every field: en__field */ /* Field by type: en__field--text, en__field__element--checkbox, etc */ /* Field by tag: en__field--emailAddress, en__field--lastName, etc */ /* Field on page: en__field--12345 (specific to a field in a formblock) */ /* Label: en__field__label */ /* Errors: en__errorList (at top), .en__field__error (above field); /* PICK AND CHOOSE! */ /* ================================== */ /* = BODY STYLES = */ /* ================================== */ /* If you want to adjust body styles */ body.pb { } /* ================================== */ /* = PAGE = */ /* ================================== */ /* The page contains the rows and everything else /* If you want to adjust page width so it isn't 100%: */ .pb .en__component--page { /* e.g. 80% width, with top and bottom margin */ width: 100%; /*margin: 2% auto;*/ } /* ================================== */ /* = ROWS = */ /* ================================== */ /* Rows contain columns - here's some optional things you can do */ /* STOP COLUMNS FROM HAVING THE SAME HEIGHT */ .pb .en__component--row { align-items: flex-start; -webkit-align-items: flex-start; } /* REVERSE COLUMN STACKING (RIGHT ABOVE LEFT) */ /* By default, the right column will sit below the left on narrow screens */ /* To reverse this, so that the right column sits above, use this style */ /* NOTE: even in the editor, whatever was in the right column will now be in the left and vice versa, so you'll have to drag the blocks around. Also, if you are using a style to set a width of, e.g., the left column by saying the 1st child then the 1st child is now the other side, so it will instead set the width of the right column. So you may need to adjust the css for columns if using this. */ /*.pb .en__component--row { flex-direction: row-reverse; -webkit-flex-direction: row-reverse; }*/ /* ================================== */ /* = COLUMNS = */ /* ================================== */ /* COLUMN WIDTHS & STYLING */ /* By default, the columns are set at 50% each, and 100% at < 600px. */ /* The columns are flex, but not at < 600px, due to iPhone issues. */ /* If you want to change the desktop column widths, they should be set via */ /* media queries to keep them responsive. But if you are happy to keep them at 50%, */ /* then just style the columns via .pb .en__component--column */ @media screen and (min-width: 600px) { /* left column styling - widths should add up to 100% */ .pb .en__component--row--2 .en__component--column:nth-child(1) { width: 50%; /*padding: 1.25em;*/ } /* right column styling - widths should add up to 100% */ .pb .en__component--row--2 .en__component--column:nth-child(2) { width: 45%; padding-left: 5%; } } /* ================================== */ /* = FIELDS (general) = */ /* ================================== */ /* This makes sure the inputs inherit font size */ .pb .en__field__input--calendar, .pb .en__field__input--other, .pb .en__field__input--password, .pb .en__field__input--select, .pb .en__field__input--splitselect, .pb .en__field__input--splittext, .pb .en__field__input--text, .pb .en__field__input--textarea, .pb .en__field__input--tripleselect, .pb .en__field__input--tripletext { font-size: inherit; width: 100%; } /* Input fields - if you want to style them, e.g. with more padding & grey border */ /*.pb input[type="text"], .pb input[type="date"], .pb textarea, .pb select, .pb fieldset { border: 1px solid #ccc; font-family: inherit; font-size: inherit; color: #333; padding: 10px; background-color: #fff; border-radius: 0; width: 100%; }*/ /* add a border around input fields when selected? */ /*.pb input:focus, .pb textarea:focus, .pb select:focus, .pb fieldset:focus { border-color: #1693A5; box-shadow: 0px 0px 10px #1693A5; }*/ /* By default, labels are width: 180px - if you want to adjust to third of width:; */ .pb .en__field--text .en__field__label, .pb .en__field--select .en__field__label, .pb .en__field--radio .en__field__label, .pb .en__field--textarea .en__field__label, .pb .en__field--calendar .en__field__label { width: 100%; font-weight: bold; } /* Make input boxes' containers two-thirds of width */ .pb .en__field__element--text, .pb .en__field__element--select, .pb .en__field__element--radio, .pb .en__field__element--textarea, .pb .en__field__element--calendar { width: 100%; } /* If you want a checkbox to be full width */ .pb .en__field__element--checkbox { width: 100%; } /* Mandatory asterisk */ .pb .en__field.en__mandatory > label::after { content: " *"; color: #aa0000; } /* SELECTS */ /* Remove minimum width from selects */ .pb select.en__field__input--select { min-width: auto; } /* ================================== */ /* = REPLACEMENT SELECT = */ /* ================================== */ /* If you want to style selects, you have to remove default display & add your own custom arrow */ /*.pb select.en__field__input--select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("data:image/svg+xml;utf8,"); background-position: 100% 50%; background-repeat: no-repeat; } */ /* ================================== */ /* = REPLACEMENT CHECKBOX = */ /* ================================== */ /* If you want to style standard checkboxes, then hide the check boxes and /* add your own replacements - these four rules do this */ /* Hide checkboxes */ .pb .en__field__input--checkbox { display: none; } /* Cursor behaviour */ .pb .en__field--checkbox .en__field__label { cursor: pointer; } /* Add replacement tick box */ .pb input[type=checkbox] + label:before { content:""; background-color: #fff; border: 1px solid #dbdbdb; height: 27px; width: 27px; display: block; float: left; margin-right: 10px; } /* Replacement tick box - checked */ .pb input[type=checkbox]:checked + label:before { background-image: url("https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2003/form_checkbox.png?v=1489587335000"); background-position: center center; background-repeat: no-repeat; border: 1px solid #dbdbdb; height: 27px; width: 27px; display: block; float: left; margin-right: 10px; } /* ================================== */ /* = ERRORS = */ /* ================================== */ /* If you want to move the error message below the field see error-alerts-below-boxes-and-style-them.txt */ /* This styles the errors */ .pb .en__field__error, .pb .en__error { background-color: #aa0000; color: #fff; padding: 3px; border-radius: 3px; } /* ================================== */ /* = BUTTONS = */ /* ================================== */ .pb button { color: #000374; background: #fcc926 none repeat scroll 0 0; font-size: 1.4em; font-weight: normal; padding: 1.1em; cursor: pointer; cursor: hand; display: block; position: relative; transition: ease-in-out all .3s; min-width: 175px; border: 0; } .pb button:hover { color: #fff !important; background: #00bbee !important; text-decoration: none !important; } /* ================================== */ /* = OPTIONAL STUFF = */ /* ================================== */ /* headings */ /* h1 { margin: 1.7rem 0; font-size: 3rem; font-weight: bold; } h2 { font-size: 2rem; margin: 1.3rem 0 0.5rem 0; } h3 { font-size: 1.3rem; margin: 1rem 0 0 0; }*/ /* Hide opt-in label */ .en__field--opt-in > label { /* whatever the name of your opt-in is */ display: none; } /* Hide something in the editor, but not live */ #en__pagebuilder .yourdiv { display: none; } /* give a backgound to the form blocks */ .en__component--formblock { padding: 25px; background: #f5f5f5; } /* h2 right column fancy boxed heading */ .en__component--column:nth-child(2) h2 { width: 100%; background-color: #158b9d; color: #fff; text-align: center; padding: 20px; box-sizing: border-box; margin: 25px 0 0; } /* ================================== */ /* = MEDIA QUERIES = */ /* ================================== */ @media (max-width: 600px) { .pb .en__component--column:nth-child(1) { width: 100%; } .pb .en__component--column:nth-child(2) { width: 100%; margin-left: 0; margin-top: 1.5rem; } } /* =================================== */ /* = CATS PROTECTION SPECIFIC = */ /* =================================== */ /* Cats Protection website styles */ .mainContent { width: 100% !important; } .googleTranslater { display: none; } /* Cat box */ .catbox { width: 100%; display: block; border: 1px solid #d1d2d4; box-sizing: border-box; margin-bottom: 20px; } .catbox h3 { font-size: 1.2em; background-color: #fcc926; /* blue is fcc926 */ color: #535353; padding: 10px 0 10px 15px; } .catbox p, .catbox ul { padding: 13px 15px; } .catbox li { margin-left: 15px; list-style-type: square !important; font-weight: bold; } /* More info expandable box */ .moreinfo { cursor: pointer; border: 1px solid #d1d2d4; box-sizing: border-box; display: block; width: 100%; margin-bottom: 20px; } .moreinfo-heading { background-color: #58585a; color: #fff; font-size: 1.2em; padding: 10px 0 10px 40px; background-image: url("https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2003/arrow-right-white.png?v=1474905830000"); background-repeat: no-repeat; background-position: 10px center; } .moreinfo-content p { padding: 13px 15px; } /* Banner image at top of design */ .bannerImage { width: 100%; height: auto; }