/* Theme Name: BranfordMagazine Theme URI: https://www.der-prinz.com Description: CUSTOM version for ETF Strategy. Customized in mid 2017 by Michael Oeser Version: 10.0.1 Author: ThemeShift Author URI: https://www.der-prinz.com License: GPL License URI: http://www.opensource.org/licenses/gpl-license.php ******************************************************************************************** EDITS / CHANGELOG: 2021 Feb 1 - Added CSS for Subscription Cards for the ETF Leaky paywall setup 2018-07-06 - Added this description for easier identification of changes 2017 September - Massive layout changes for the new website ******************************************************************************************** The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php ******************************************************************************************** ** Color related styles can be edited in the specific CSS files of the used color schemes ** ******************************************************************************************** STRUCTURE OF THIS CSS DOCUMENT - CSS RESET - HTML ELEMENTS - WP WANTS THEM - HYPERLINKS - IMAGES - GENERAL STRUCTURE - HEADLINES - SIDEBAR - WIDGETS - BUTTON STYLES - NAVIGATION BAR STYLES - CONTENT - FOOTER - FLOATING - TABS - SUBSCRIPTION CARDS /*************************************** CSS Reset by Eric Meyer v1.0 | 20080212 ****************************************/ /* Use the box model for easier CSS widths - http://www.paulund.co.uk/use-box-model-for-easier-widths*/ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /****************************************** * HTML Elements ******************************************/ body { color: #333; padding: 13px 0 25px 0; border-top: 4px solid #840000; border-bottom: 4px solid #840000; } body, select, input, textarea { font: 14px Arial, Verdana, Sans-Serif; line-height: 1.4em; } p { margin: 15px 0; } hr { background: #ccc; display: block; height:1px; border:0; } small { font-size: 0.9em; padding:3px 6px; } /****************************************** * WP WANTS THEM! ******************************************/ .sticky { } .gallery-caption { } .bypostauthor { } /****************************************** * HYPERLINKS ******************************************/ /*** standard link behaviour ***/ a:link, a:active, a:visited { color:#333; text-decoration: underline; } a:hover { color:#333; text-decoration: none; } .blogtitle a { text-decoration: none; } /*** Title area links ***/ .title:link, .title:active, .title:visited { text-decoration: none; } .title:hover { text-decoration: underline; } /*** HTML headline links ***/ h3 a:link, h3 a:active, h3 a:visited { text-decoration:none; } h3 a:hover { text-decoration:underline; } h4 a:link, h4 a:active, h4 a:visited { text-decoration:none; } h4 a:hover { text-decoration:underline; } /*** Links in the sidebar ***/ #sidelist a:link, #sidelist a:active, #sidelist a:visited { text-decoration:none; } #sidelist a:hover { text-decoration:underline; } #sidelist .menu li a:link, #sidelist .menu li a:visited { /* .menu is a default custom menu class */ display:block; padding:4px 4px 4px 20px; } #sidelist .menu li a:hover, #sidelist .menu li a:active { text-decoration:none!important; } #sidelist .menu li ul li a, #sidelist .menu li ul li a:visited { padding:2px 2px 2px 40px!important; border:0; } #sidelist .menu li ul li a:hover, #sidelist .menu li ul li a:active { text-decoration:none!important; } /*** Links in unordered lists ***/ .bullets li a { text-decoration:none!important; } .bullets li a:hover { text-decoration:underline!important; } /*** How tags appear ***/ .tags a { text-decoration:none; } .tags a:hover { text-decoration:underline; } /*** Links within comments metadata (date, Author etc.) ***/ .commentmetadata a:link, .commentmetadata a:active, .commentmetadata a:visited { text-decoration:none; } .commentmetadata a:hover { text-decoration:underline; } /*** Links in the footer ***/ #footer a { text-decoration: none; } #footer a:hover { text-decoration: underline; } #top-link { display:none; position:fixed; right:10px; bottom:10px; font-weight:bold; text-decoration:none; background:#eee; color:#333!important; padding:10px;-webkit-border-radius: 3px; border-radius: 3px; opacity:.5;} #top-link:hover {text-decoration:none!important;opacity:.8;} /****************************************** * IMAGES ******************************************/ img, a:link img, a:visited img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } #pageleft img, #pagemiddle img, #pageright img {margin-bottom:10px;} #rightcol img, #centercol img { float:left; margin:3px 10px 4px 0; } #leftcol img { margin-bottom: 4px; display:block; } /*** WordPress specific image classes ***/ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; margin: 4px 10px 1px 0; } .alignright { float: right; margin: 4px 0 1px 10px; } .wp-caption { text-align: center; background-color: #fff; margin-top:5px; margin-right: 15px; margin-bottom:0px; max-width: 100%; height: auto; width: auto\9; /* ie8 */} .wp-caption img { } .wp-caption img:hover { } .wp-caption p.wp-caption-text { color:#666; font-size: 10px; line-height: 12px; padding: 7px 4px 2px 5px!important; margin: 0!important; } /***iFrame Video ***/ iframe { max-width:100%;} /****************************************** * GENERAL STRUCTURE ******************************************/ #header { height: auto; margin-bottom:5px; } #headerwidgets { float: right; margin-top: -40px; position:relative; z-index:999; } .header_widget { color: #888; margin-bottom:5px; text-align:right; } #page { /*the main container*/ max-width:1200px; margin:0 auto; font-size:0.9em; background:#FFF; padding: 0px 20px 20px 20px; } #content { width:74%; float:left; } .left { float:left; } .right { float:right; } #sidebar { width: 25% /*31.25%*/; float:right; } #leftcol { width:31.25%; margin-right:2%; } #centercol { width:31.25%; text-align:justify; margin-right:2%; } #rightcol { width:31.25%; text-align:justify; } #leftcol, #rightcol, #centercol { float:left } #leftcol h3, #rightcol h3, #centercol h3, #leftcol h4, #rightcol h4, #centercol h4 { text-align:left; } /****************************************** * HEADLINES ******************************************/ h1, h2, h3, h4, h5, h6, .blogtitle, .blogtitle a { font-family: Georgia, "Times New Roman", Times, serif; font-weight:normal; } .blogtitle, .blogtitle a { font-size: 2.0em; padding: 20px 0px 25px 0px; } .description { font-size: 1.6em; font-weight: bold; color:#999; margin-bottom:20px; } h1 { font-size: 1.8em; font-weight: bold; margin: 0px 10px 0px 0px; padding: 20px 0px 0px 10px; } h2 { font-size: 1.8em; padding-bottom:8px; border-bottom:1px solid #ccc; margin: 20px 0; } h3 { font-size: 1.4em; padding-bottom:8px; margin: 10px 0; } #leftcol h3, #leftcol h3 a, #centercol h3, #centercol h3 a, #rightcol h3, #rightcol h3 a { font-size:1.2em; margin:0; font-weight: normal!important; } #leftcol h4, #centercol h4, #rightcol h4, #tabs h4 { font: 0.9em Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:0.2em; margin-bottom:4px; font-weight:bold; } #sidebar h2 { font: 0.9em Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:0.2em; margin-bottom:4px; font-weight:bold; } #sidebar h3, #sidebar h2 { font: 0.9em Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; letter-spacing:0.2em; /*border-top:3px double #999;*/ border-bottom:1px solid #ccc; padding:5px 0 5px 2px; margin:10px 0 15px 0; } .page-template-tmpl_3-column-page-php h3 { color:#666!important; font: 0.9em Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; letter-spacing:0.2em; } #respond h3 { border-top:1px solid #ccc; margin-top:25px; padding-top:20px; } h3#comments { margin-top:32px; } h3 a:link, h3 a:visited { color: #666; } h4 { font-size:1.2em; margin-bottom:6px; } .entry h1 { font-size: 2.0em; font-weight:normal; margin: 10px 0 20px 0; padding:0; } .entry h2 { font-size: 1.8em; margin: 10px 0 20px 0; padding:0; border:none; } .entry h3 { font-size: 1.6em; font-weight:normal; margin: 10px 0 20px 0; padding:0; text-transform:regular; letter-spacing:0em; } .entry h4 { font-size: 1.4em; font-weight:normal; margin: 10px 0 20px 0; padding:0; } .entry h5 { font-size: 1.2em; font-weight:normal; margin: 10px 0 20px 0; padding:0; } .entry h6 { font-size: 1.0em; font-weight:normal; margin: 10px 0 20px 0; padding:0; } .page-template-tmpl_3-column-page-php h2 { font-size: 1.4em; margin: 10px 0 20px 0; padding:0; border:none; text-align:left; } .page-template-tmpl_3-column-page-php h2 a { text-decoration:none; } #alternative_footer h4 { font-family:Arial, Helvetica, sans-serif; } /****************************************** * SIDEBAR ******************************************/ #sidebar {padding-top:4px;} .single #sidebar {padding-top:14px;} .home #sidebar {padding-top:20px;} #sidelist .newsblock {margin-top:-20px;} #sidelist li { list-style:none; } .bullets li { margin:0 0 5px 15px; list-style:square; } #sidelist .bullets li { list-style:square; margin-bottom:5px; margin-left:22px; } #sidelist .feed li { margin-bottom:5px; padding-left:20px; background:url(images/rss.gif) no-repeat; } /****************************************** * WIDGETS ******************************************/ /*** These are specific css rules for the PRiNZ Widget Factory Widgets - Most of them are not used a the moment ***/ /* used by more than one Widget */ .sidebar_widget img, .sidebar_widget a:link img, .sidebar_widget a:visited img { } /* PRiNZ Featured Categories Widget */ .extra_posts h4 { margin-top:20px; } .extra_posts li { margin:0 0 5px 15px; list-style:square; } .extra_posts a { text-decoration:none; } /* PRiNZ Recent Posts Widget */ .prinz_widget_date { font-size:10px; } /* PRiNZ Social Icons Widget */ .headerbarleft .prinz_social_icons ul li, .headerbarright .prinz_social_icons ul li { margin-bottom:0!important; } /* PRiNZ Twitter Widget */ #twitter_update_list li { list-style:square; margin-bottom:5px; margin-left:15px; } /*********************************************** * BUTTON STYLES ************************************************/ button, .button { border:none; font-weight:bold; display: inline-block; white-space: nowrap; padding: 10px 20px; margin:10px 0; filter: alpha(opacity=100); opacity: 1; text-decoration:none!important; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; backface-visibility:hidden; /* Fix for transition flickering */ -webkit-backface-visibility:hidden; /* Chrome and Safari */ -moz-backface-visibility:hidden; /* Firefox */ } button:hover, .button:hover { text-decoration:none!important; } button:hover, .button:hover, input[type=submit]:hover { filter: alpha(opacity=80); opacity: .8; } button.medium, .button.medium { padding: 14px 18px; font-size:1.2em; } button.large, .button.large { padding: 18px 22px; font-size:1.4em; } button.alt, .button.alt { background: #333; } /*********************************************** * STYLES FOR THE HORIZONTAL NAVIGATION MENUES ************************************************/ /*** Basic styles for all menus (color styles are defined in the colorscheme stylesheets) ***/ .sf-menu, .sf-menu * { margin:0; padding:0; list-style:none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top:-999em; width:150px; /* left offset of submenus need to match */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; } .sf-menu li { float:left; position:relative; width: auto; } .sf-menu a { display:block; position:relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left:0; top: 40px; /* match top ul list item height */ z-index:100; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top:-999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left:150px; /* match ul width */ top:0px; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left:150px; /* match ul width */ top:0px; } /*** PRIMARY MENU STYLES ***/ .prinz-menu-primary a, .prinz-menu-primary a:visited { /* visited pseudo selector so IE6 applies text colour*/ padding: 0 10px; line-height: 40px; background: none; ; text-decoration: none; } .prinz-menu-primary li.sfHover a, .prinz-menu-primary a:focus, .prinz-menu-primary a:hover, .prinz-menu-primary a:active, .prinz-menu-primary li.current-cat a, .prinz-menu-primary li.current a, .prinz-menu-primary li.current-menu-ancestor a, .prinz-menu-primary li.current-menu-item a { outline: 0; } .prinz-menu-primary li li a { padding: 0 20px; line-height: 30px!important; font-weight: normal!important; } .prinz-menu-primary li li:hover, .prinz-menu-primary li li.sfHover, .prinz-menu-primary li li a:focus, .prinz-menu-primary li li a:hover, .prinz-menu-primary li li a:active, .prinz-menu-primary li li.current-cat, .prinz-menu-primary li li.current, .prinz-menu-primary li li.current-menu-ancestor a, .prinz-menu-primary li li.current-menu-item a { color: #fff; outline: 0; } /*** SECONDARY MENU STYLES ***/ .prinz-menu-secondary { margin-top:2px; } .prinz-menu-secondary a, .prinz-menu-secondary a:visited { /* visited pseudo selector so IE6 applies text colour*/ padding: 0 10px; line-height: 40px; background: none; text-decoration: none; } .prinz-menu-secondary li:hover, .prinz-menu-secondary li.sfHover, .prinz-menu-secondary a:focus, .prinz-menu-secondary a:hover, .prinz-menu-secondary a:active, .prinz-menu-secondary li.current-cat, .prinz-menu-secondary li.current, .prinz-menu-secondary li.current-menu-ancestor a, .prinz-menu-secondary li.current-menu-item a { outline: 0; } .prinz-menu-secondary li li a { padding: 0 10px; line-height: 30px!important; font-weight: normal!important; } .prinz-menu-secondary li li:hover, .prinz-menu-secondary li li.sfHover, .prinz-menu-secondary li li a:focus, .prinz-menu-secondary li li a:hover, .prinz-menu-secondary li li a:active, .prinz-menu-secondary li li.current-cat, .prinz-menu-secondary li li.current, .prinz-menu-secondary li li.current-menu-ancestor a, .prinz-menu-secondary li li.current-menu-item a { outline: 0; } /****************************************** * CONTENT ******************************************/ /*** Featured Articles formatting "leftcol" ***/ .feature { padding:15px; } .feature p, /*#rightcol p*/ { margin:0; } #leftcol .feature { margin-bottom: 15px; } #leftcol p {margin-top:2px;} #centercol p, #rightcol p {margin-top:0;} /*** Formating of the Leadstory stuff in the tabbed section ***/ .title, a.title { font-family: Georgia, "Times New Roman", Times, serif; font-size:1.1em; font-weight:bold; letter-spacing:normal; } #lead p { margin-bottom:10px; } .read-on a { /* This can be used to format the "[...]" link in the lead story */ text-decoration:none; } .read-on a:hover { text-decoration:underline; } #rightcol .clearfloat, #leftcol.clearfloat, #centercol .clearfloat { padding:15px 0; } /*** "more" Links in the excerpts ***/ .excerpt_more a:hover { text-decoration:none; } /*** Post Formatting ***/ .entry { padding-bottom:28px; text-align:justify; } .post blockquote { padding:6px 14px; margin:18px 35px; } .post ul li { list-style:square; margin-bottom:5px; margin-left:42px; } .post ol li { margin-bottom:5px; margin-left:48px; } #tags { padding:3px; } .postmetadata { font-size:0.9em; margin:0 0 10px 0; padding:5px 10px; } /*** Page navigation links ***/ #paging { width: 600px; height: 30px; list-style: none; } #paging li { float: left; height: 30px; text-align: center; } #paging li.prev, #paging li.next { width: 100px; } #paging li.pages { width: 300px; margin: 0 20px; } #paging li.pages a { margin: 0 5px; padding: 5px; display: inline-block; } #paging li.pages a.active { font-weight:bold; padding: 7px; } /*** Comments ***/ .commentlist { padding-left:30px; } .commentlist li { margin: 15px 0 3px; padding: 8px 15px 10px 15px; background:#f8f8f8; border:1px solid #eee; } .commentmetadata { display: block; } /*** Form Elements ***/ select { background:#f2f2f2; border:1px solid #9c9c9c; padding: 5px; width:100% } #searchform { } #searchsubmit {display:none;} .searchfield { width:100%; padding: 5px 5px 5px 20px; background: url(images/icons/search-16.png) 3px 3px no-repeat #fff; color:#666; border:1px solid #ddd; } .searchfield:hover, .searchfield:focus { background: url(images/icons/search-16.png) 3px 3px no-repeat #eee; border:1px solid #999; text-decoration:none; } .newsletter { width:160px; padding: 2px 2px 2px 5px; background: #fff; color:#666; border:1px solid #ddd; } .newsletter:hover, .newsletter:focus { background: #eee; border:1px solid #999; text-decoration:none; } #newsleter-submit { background: #333; border:none; color: #fff; padding: 1px; } #newsleter-submit:hover { background: #666; } #commentform input { width: 170px; margin: 5px 5px 1px 0; } #commentform textarea { width: 100%; margin-top:5px; } /***************************************************** * PAGE TEMPLATES ****************************************************/ /*** Styles for the "3-columns-page template" ***/ #pageleft { float: left; width: 32%; margin: 20px 2% 0 0; padding: 0 2% 0 0; border-right: solid 1px #999; text-align:justify; } #pagemiddle { float: left; width: 32%; margin: 20px 2% 0 0; padding: 0px; text-align:justify; } #pageright { float: left; width: 32%; margin: 20px 0 0 0; padding: 0 0 0 2%; border-left: solid 1px #999; text-align:justify; } #pageleft .bullets li, #pagemiddle .bullets li, #pageright .bullets li { list-style:square; margin-bottom:5px; margin-left:22px; text-decoration:none!important; } /*** Styles for the "fullwidth-page template" ***/ #fullwidthpage { float: left; width: 100%; text-align:justify; } /****************************************** * FOOTER ******************************************/ #footer { margin: 0 auto; width: 900px; font-size:0.9em; text-align:center; padding-top:15px; } #alternative_footer { margin: 20px auto 5px; width: 960px; font-size:0.9em; padding: 20px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .4); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .4); } .alternative_footer_left { width: 25%; float: left; padding:0 2% 0 0; } .alternative_footer_middle1 { width: 25%; float: left; padding:0 2%; } .alternative_footer_middle2 { width: 25%; float: left; padding:0 2%; } .alternative_footer_right { width: 25%; float: left; padding:0 0 0 2%; } /***************************************************** * FLOATING ****************************************************/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .clearfloat:after { display:block; visibility:hidden; clear:both; height:0; content:"."; } .clearfloat { display:inline-block; } .clearfloat { display:block; } /***************************************************** * TABS ****************************************************/ #tabs { /* the whole container with all elements of the tabbed section */ margin: 10px 0 0 0; } .ui-tabs-panel .title { /* for the headlines in the tabbed section */ font:1.8em Georgia, "Times New Roman", Times, serif; line-height:100%; display:block; padding-bottom:7px; text-transform:none; letter-spacing:normal; } .ui-tabs { position: relative; padding: .2em; zoom: 1; padding-left:0;} .ui-tabs .ui-tabs-nav { margin: 0 0 40px 0; padding: 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px 3px 0 0; /*border-bottom: 0;*/ padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: 5px 10px; text-decoration: none; font-weight:bold;} .ui-tabs .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; padding: 1em 1.4em; min-height: 250px;} /***************************************************** * SUBSCRIPTION CARDS ****************************************************/ .subcription-alt-currency-notice { margin-top:0; } .subscription-benefits { padding-bottom: 40px; } .subscription-card.leaky_paywall_subscription_option { background-color: #f1f1f1; border-radius: 0; border:none; width:100%; } .subscription-options { border-top: 1px solid grey; display:flex; flex-flow: row; } .subscription-options .button { margin-top: 40px; font: 0.9em Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; font-weight: bold; } p.subscription-price { font-weight: bold; margin-bottom: 0; } .subscription-title-and-blurb-wrapper { text-align: left;; } .subscription-title-and-blurb-wrapper ul, .subscription-title-and-blurb-wrapper li { margin:0 !important; padding-left:10px !important; } .sub-monthly { width:90%; } .sub-annual { width:90%; } @media screen and (min-width: 760px) { .subscription-card-grid { display: flex; flex-flow:row; justify-content: space-between; } .subscription-card.leaky_paywall_subscription_option { display: flex; flex-flow: column; flex-basis: 49%; justify-content: space-between; } } /***************************************************** * Corporate Bundles Subscription Page ****************************************************/ .asp_product_description { margin: 0 !important; } .asp_product_description h1 { font-size: 20px; font-weight: normal ; margin: 0 0 10px 0; padding: 0; } .asp_product_item_top { display: none; } .asp_price_container { display:none; } .asp_product_item { background-color: #f1f1f1; border: none !important; flex-basis: calc(25% - 10px); text-align: center; display: flex !important; flex-flow: column; justify-content: space-between; } .asp_product_item div[style="clear:both;"] { display:none; } .asp_product_item p { margin: 0 5px; } #subscription-boxes-wrapper button.asp_product_buy_btn.blue { background: #840000 !important; border-radius: 0; color:#fff; text-shadow: none; border: none; font: 0.9em Arial, sans-serif; font-weight: normal; text-transform: uppercase; letter-spacing: 0.2em; font-weight: bold; } #subscription-boxes-wrapper button.asp_product_buy_btn.blue span { color:#fff; } @media screen and (min-width: 760px) { #subscription-boxes-wrapper { display:flex; justify-content: space-between; } } /***************************************************** * Corporate Bundles Details Forms ****************************************************/ fieldset p { text-align: left; margin:0; } fieldset p.group-label { font-weight: bold; grid-column: span 3; margin-bottom: 10px; width:100%; } fieldset.account-manager { background:#f1f1f1; } .page-template-tmpl_bundle-registration-page fieldset { border: solid 1px #f1f1f1; padding:10px; font-style: normal; margin-top: 20px; } .page-template-tmpl_bundle-registration-page legend { font-style: normal; font-weight: bold; } .page-template-tmpl_bundle-registration-page input[type="text"], .page-template-tmpl_bundle-registration-page input[type="email"] { width:100% !important; } @media only screen and (min-width: 760px) { .page-template-tmpl_bundle-registration-page fieldset { display: grid; grid-column-gap:20px; grid-template-columns: 1fr 1fr 1fr; } #wpcf7-f39947-o1 form { display: grid; grid-column-gap:20px; grid-template-columns: 1fr 1fr 1fr; } }