/** * Style Name: Caspar * Description: Caspar is a simple monochromatic theme with the ability to blend in with most white or grayscale themes. It is incredibly simple yet effective. * Instructions: * Version: 2.1 * Version Date: 2020-03-08 * Tags: white, gray, black, light **/ /** Table of Contents * Import * Resets * Form & Controls * Fieldset, Legend, Label * Text Fields * Ordered & Unordered lists * Checkboxes, Radio Buttons and Drop Down Menus * Other Fields * Submit Buttons * Special Classes * Ready Styles * Multi Styles */ /** Import Use to import other style sheets ------------------------------------------------------------ */ /* @import url('../parent/style.css'); */ /** Resets Use to reset HTML form elements within CF7 forms ------------------------------------------------------------ */ .wpcf7 .cf7s-caspar p { } .wpcf7 .cf7s-caspar em { } .wpcf7 .cf7s-caspar a { } /** Form & Controls Use to style the overall CF7 form ------------------------------------------------------------ */ .wpcf7 .cf7s-caspar { padding: 20px; color: #000; border: 1px solid #c3c3c3; background: #fff; } /** Fieldset, Legend, Label ------------------------------------------------------------ */ .wpcf7 .cf7s-caspar fieldset { margin: 10px 0; padding: 10px 20px; border: 1px solid #c3c3c3; background: #fff; } .wpcf7 .cf7s-caspar legend { font-size: 1.2em; padding: 2px 10px; color: #1a1a1a; border: 1px solid #c3c3c3; background: #ededed; } .wpcf7 .cf7s-caspar label { } .wpcf7 .cf7s-caspar fieldset p { } .wpcf7 .cf7s-caspar fieldset fieldset { margin: 10px 0; /* Above CSS overwritten by cf7s-default */ } .wpcf7 .cf7s-caspar fieldset fieldset legend { } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar fieldset fieldset input, .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar fieldset fieldset textarea { } /** Text Fields ------------------------------------------------------------ */ .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input, .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar textarea { margin-bottom: 8px; padding: 7px; border: 1px solid #c3c3c3; background: #fff; } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="text"], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="email"], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="tel"], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="url"], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="number"], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="range"], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type=date], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type=file] { } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="text"] { } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="email"] { } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="tel"] { } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar textarea { padding: 5px 7px; /* deliberately different from Input */ } /** Ordered & Unordered lists ------------------------------------------------------------ */ .wpcf7 .cf7s-caspar ol, .wpcf7 .cf7s-caspar ul, .wpcf7 .cf7s-caspar li { } .wpcf7 .cf7s-caspar ol { } .wpcf7 .cf7s-caspar li { margin-bottom: 5px; } .wpcf7 .cf7s-caspar li label { } .wpcf7 .cf7s-caspar .wpcf7-list-item { } .wpcf7 .cf7s-caspar .wpcf7-list-item-label { margin-right: 7px; /* adds space after Radio Button labels */ } /** Checkboxes, Radio Buttons and Drop Down Menus ------------------------------------------------------------ */ .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="checkbox"], .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="radio"] { margin-right: 6px; background: none; } .wpcf7 .cf7s-caspar select { margin-bottom: 8px; margin-left: 0; /* same as Input */ padding: 5px; border: 1px solid #c3c3c3; } .wpcf7 .cf7s-caspar select option { } .wpcf7 .cf7s-caspar select option:hover { background: #ededed; } .wpcf7 .cf7s-caspar .wpcf7-checkbox .wpcf7-list-item, .wpcf7 .cf7s-caspar .wpcf7-radio .wpcf7-list-item { margin-left: 13px; } /** Other Fields ------------------------------------------------------------ */ /** Submit Buttons ------------------------------------------------------------ */ .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="submit"] { padding: 5px 15px; color: #1a1a1a; border: 1px solid #c3c3c3; background: #ededed; } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="submit"]:hover { background: #fff; } /** Special Classes NOTE: Special Classes are classes added in the CF7 Form HTML for a particular form ------------------------------------------------------------ */ /** Ready Styles ------------------------------------------------------------ */ .wpcf7 .cf7s-caspar .singleline { } .wpcf7 .cf7s-caspar .singleline li { } .wpcf7 .cf7s-caspar .singleline input { } .wpcf7 .cf7s-caspar .horizontal, .wpcf7 .cf7s-caspar .checkbox-horizontal, .wpcf7 .cf7s-caspar .radio-horizontal { } .wpcf7 .cf7s-caspar .box { margin-bottom: 15px; padding: 10px; border: 1px solid #c3c3c3; background: #fff; } .wpcf7 .cf7s-caspar .box select { } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar .grid-hover [data-row-span] [data-field-span]:hover { background: #ededed; } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar .grid-lined { border-top: 1px solid #c3c3c3; } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar .grid-lined [data-row-span] { border-bottom: 1px solid #c3c3c3; } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar .grid-lined [data-row-span] [data-field-span] { border-right: 1px solid #c3c3c3; } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar .grid-lined [data-row-span] [data-field-span]:first-child { border-left: 1px solid #c3c3c3; } /* Needed to over-write Ready Default styling in cf7s-ready.css */ @media only screen and (min-width: 0) and (max-width: 700px) { .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar .grid-lined [data-row-span] { border-bottom: none; /* Needed so don't get additional line */ } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar .grid-lined [data-row-span] [data-field-span] { border-bottom: 1px solid #c3c3c3; border-left: 1px solid #c3c3c3; } } /** Multi Styles ------------------------------------------------------------ */ /* Multi Fixes */ .wpcf7 .cf7s-caspar.cf7multi { } .wpcf7 .cf7s-caspar.cf7multi .etabs li { } /* Easytabs */ .wpcf7 .cf7s-caspar.cf7multi .tab-container { } .wpcf7 .cf7s-caspar.cf7multi .etabs { } .wpcf7 .cf7s-caspar.cf7multi .tab { border: 1px solid #c3c3c3; border-bottom: none; } .wpcf7 .cf7s-caspar.cf7multi .tab a { color: #000; } .wpcf7 .cf7s-caspar.cf7multi .tab.active { } .wpcf7 .cf7s-caspar.cf7multi .tab a.active { } .wpcf7 .cf7s-caspar.cf7multi .epanels { border: 1px solid #c3c3c3; } .wpcf7 .cf7s-caspar.cf7multi .panel-container { } /* Navigation */ .wpcf7 .cf7s-caspar.cf7multi .navigation { } .wpcf7 .cf7s-caspar.cf7multi .navigation .previous, .wpcf7 .cf7s-caspar.cf7multi .navigation .next { color: #1a1a1a; border: 1px solid #c3c3c3; background: #ededed; } .wpcf7 .cf7s-caspar.cf7multi .navigation .previous:hover, .wpcf7 .cf7s-caspar.cf7multi .navigation .next:hover { background: #fff; } /* Pagination */ .wpcf7 .cf7s-caspar.cf7multi .pagination { } /* Start & End Tabs */ .wpcf7 .cf7s-caspar.cf7multi .navigation .start, .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar.cf7multi .navigation .end { padding: 5px 10px; color: #1a1a1a; border: 1px solid #c3c3c3; background: #ededed; } .wpcf7 .cf7s-caspar.cf7multi .navigation .start:hover, .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar.cf7multi .navigation .end:hover { background: #fff; } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar.cf7multi .navigation .end { } .wpcf7 .wpcf7-form.cf7skins.cf7s-caspar.cf7multi .navigation .end:hover { } /* Progress Bar */ .wpcf7 .cf7s-caspar.cf7multi .cf7m-progress { border: 1px solid #c3c3c3; } .wpcf7 .cf7s-caspar.cf7multi .cf7m-progress div { } /* Thank You Tab */ .wpcf7 .cf7s-caspar.cf7multi .cf7m-thanks { }