/* =================================================================== https://gr8.social/v2/Skins/Fonts.css =================================================================== */ /* latin */ @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 400; src: local('Droid Sans Regular'), local('DroidSans-Regular'), url(../../Fonts/DroidSansRegular.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 700; src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(../../Fonts/DroidSansBold.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Yesteryear'; font-style: normal; font-weight: 400; src: local('Yesteryear'), local('Yesteryear-Regular'), url(../../Fonts/YesteryearRegular.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =================================================================== https://gr8.social/v2/Skins/NormalizeStyles.css =================================================================== */ /* The purpose of this file is to have a common starting point between platforms. Differences and bugs should be handled here as much as possible so the rest of our styling doesn't have to deal with it. */ /* I believe this is not needed? html { margin: 0; padding: 0; border: 0; } */ :where(body.SA, .SA div, .SA object, .SA iframe, .SA h1, .SA h2, .SA h3, .SA h4, .SA h5, .SA h6, .SA p, .SA blockquote, .SA ol, .SA ul, .SA li, .SA form, .SA fieldset, .SA legend, .SA label, .SA table, .SA header, .SA footer, .SA nav, .SA section) { margin: 0; padding: 0; border: 0; } /* Prevent iOS text size adjust after orientation change, without disabling user zoom. */ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* X (Twitter) sets the color to white and dark scheme so we can't see text in many places */ .SA form, .SA input, .SA textarea { color: #000000; } .SA { color-scheme: light; } .SA ol, .SA ul { margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; } .SA p { margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .SA a { cursor: pointer !important; /* setting the cursor style for A elements made an inline onclick handler work on iOS (an iOS bug where inline onclick handlers aren't called) */ } .SA input { border-style: solid; /* without this colors don't work properly on OSX Safari */ } /* make all buttons look the same */ .SA button, .SA input[type=button], .SA input[type=submit] { -webkit-appearance: none; color: #333; font: inherit; border: 1px solid #bbb; background: #f0f0f0; /* background: -moz-linear-gradient(top, #f0f0f0 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #bebebe)); background: -webkit-linear-gradient(top, #f0f0f0 0%, #bebebe 100%); background: -o-linear-gradient(top, #f0f0f0 0%, #bebebe 100%); background: -ms-linear-gradient(top, #f0f0f0 0%, #bebebe 100%);*/ background: linear-gradient(to bottom, #f0f0f0 0%, #bebebe 100%); /* -webkit-border-radius: 5px; -moz-border-radius: 5px; */ border-radius: 5px; /* put some space between rows otherwise they touch */ margin-top: 2px; margin-bottom: 2px; padding: 3px; /* remove extra padding on left and right in iOS */ outline: none; /* for good measure */ overflow: visible; /* removes extra side padding in IE */ cursor: pointer; } .SA button:disabled, .SA button.disabled { cursor: default; } /* .SA button, .SA input[type=button] { -webkit-appearance: none; -moz-appearance: none; display: block; margin: 1.5em 0; font-size: 1em; line-height: 2.5em; color: #333; font-weight: bold; height: 2.5em; width: 100%; background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); border: 1px solid #bbb; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } */ .SA input[type=text], .SA input[type=url], .SA input[type=email], .SA input[type=password], .SA input[type=tel], .SA textarea { -webkit-appearance: none; -moz-appearance: none; font: inherit; font-size: 16px; /* this should prevent zooming in on fields in iOS */ /* display: block; margin: 0; width: 100%; height: 40px; line-height: 40px; font-size: 17px;*/ border: 1px solid #bbb; border-radius: 5px; } .SA .square_corners, .SA input[type=text].square_corners, .SA input[type=url].square_corners, .SA input[type=email].square_corners, .SA input[type=password].square_corners, .SA input[type=tel].square_corners, .SA textarea.square_corners { border-radius: 0px; } .SA .no_shadow, .SA input[type=text].no_shadow, .SA input[type=url].no_shadow, .SA input[type=email].no_shadow, .SA input[type=password].no_shadow, .SA input[type=tel].no_shadow, .SA select.no_shadow, .SA textarea.no_shadow { border-style: solid; border-color: #888; } @media screen and (max-width: 640px) /* mobile phone */ { /* for mobile screens make radio and check boxes bigger */ .SA input[type=checkbox], .SA input[type=radio] { width: 25px; height: 25px; vertical-align: middle; } } /* .SA input[type=range] { width: 100%; } .SA input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%); border: 1px solid #bbb; -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px; } */ /* give clickable items an appropriate cursor */ .SA a[href], .SA input[type='radio'], .SA input[type='checkbox'], .SA input[type='submit'], .SA input[type='image'], .SA label[for], .SA select, .SA button, .SA .pointer { cursor: pointer; } /* it's hard to hide an element without disrupting any "display" value currently set so we do it with a class instead */ .SA .hide_element { display: none !important; } /* normalize some styles for the Chrome extension elements */ .SA.popup_window, .SA .SA_dropdown-menu-popup { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 17px; padding-inline-start: 0px; /* undo styling from .SA ul above otherwise we have blank space to left of menu items */ } /* disable scrollbar auto-hide on some platforms */ .SA ::-webkit-scrollbar { -webkit-appearance: none; width: .8em; } .SA ::-webkit-scrollbar-thumb { border-radius: .4em; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); } .SA img { display: inline; /* GoHighLevel sets this to "block" */ } /* =================================================================== https://gr8.social/v2/Skins/Controls.css =================================================================== */ .SA .MultiSelect { height: auto; } /* the SPAN version doesn't go full width and doesn't wrap and has round ends */ .SA span.MultiSelect_Item, .SA span.MultiItem_Item { border-radius: 15px; display: inline-block; /* so the right end doesn't get chopped off, also helps break-word work below */ /* white-space: nowrap; I found that sometimes tags got long with the path in them and we wanted them to wrap */ /* this is now handled by the second TD styling below word-wrap: break-word; word-break: break-word; */ } /* the DIV and TABLE version goes full width and wraps as needed and has round corners */ .SA div.MultiSelect_Item, .SA div.MultiItem_Item { border-radius: 5px; } .SA .entry_table > tbody > tr > td:nth-child(2), .SA .simple_table > tbody > tr > td:nth-child(2) { word-break: break-word; /* prevent long data (like URLs) from pushing the table too wide */ } /* DRL FIXIT! This style for rounded table borders does not get applied for some reason, maybe due to COLSPAN=2? .SA tr.MultiSelect_Item, .SA tr.MultiItem_Item { this just taken from an example to test this feature... border: solid 1px #000; border-style: solid none; padding: 10px; background-color: cyan; } .SA tr.MultiSelect_Item td:first-child, .SA tr.MultiItem_Item td:first-child { border-left-style: solid; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .SA tr.MultiSelect_Item td:last-child, .SA tr.MultiItem_Item td:last-child { border-right-style: solid; border-bottom-right-radius: 5px; border-top-right-radius: 5px; } */ .SA .MultiSelect_Item:not(.MultiSelect_NoStyle), .SA .MultiItem_Item:not(.MultiItem_NoStyle) { border: 1px solid #bbb; background: #f0f0f0; padding: 4px 4px 4px 10px; margin: 3px 3px 3px 0px; font-size:85%; color: #000; } .SA .MultiSelect_Item .MultiSelect_Item:not(.MultiSelect_NoStyle), .SA .MultiItem_Item .MultiItem_Item:not(.MultiItem_NoStyle) { /* when we nest a multi-item inside another multi-item we use a different background color for readability */ background: #f6f6f6; } /* TR button row, make it closer to the rows above, and we have to use the long selector to override other styling */ .SA .entry_table > tbody > tr.MultiItemButton > td:first-child, .SA .simple_table > tbody > tr.MultiItemButton > td:first-child { padding-top: 0px; } /* TR button row, make it closer to the rows above, and we have to use the long selector to override other styling */ .SA .entry_table > tbody > tr.MultiItemButton > td:first-child button.form_button, .SA .simple_table > tbody > tr.MultiItemButton > td:first-child button.form_button { margin-top: 0px; } .SA .MultiSelect_Item.active, .SA .MultiItem_Item.active { opacity: 0.5; } /* .SA span.MultiItem_Item, .SA div.MultiItem_Item { display:block; padding:10px; margin:5px 0; position:relative; } */ .SA .Misc_Delete, .SA .TreeNode_Delete, .SA .MultiSelect_Drag, .SA .MultiSelect_Delete, .SA .MultiItem_Drag, .SA .MultiItem_Delete, .SA .MultiItem_Edit, .SA .AI_Button { /* remove our styling for button tag*/ line-height: normal; color: initial; height: auto; opacity: initial; background: initial; padding: initial; transition: initial; /* style for our purposes */ border: none; border-radius: 0; /* override default button style */ width: 20px; height: 20px; background-size: 20px 20px; background-repeat: no-repeat; background-position: center; /* margin-left: 2px; margin-right: 2px; vertical-align: middle; */ float: right; margin: 1px 0 0 10px; } .SA .Misc_Edit { /* remove our styling for button tag*/ line-height: normal; color: initial; height: auto; opacity: initial; background: initial; padding: initial; transition: initial; /* style for our purposes */ border: none; width: 20px; height: 20px; float: right; margin: 1px 0 0 10px; } .SA .Misc_Edit IMG { /* the floating icon is smaller than a regular button icon */ width: 20px; height: 20px; } .SA .Misc_Delete, .SA .TreeNode_Delete, .SA .MultiSelect_Delete, .SA .MultiItem_Delete { border-radius: 10px; background-image: url('/Cache/71848/RemoveDk.svg'); } .SA .MultiSelect_Drag, .SA .MultiItem_Drag { border-radius: 10px; background-image: url('/Cache/71848/DragVerticalDk.svg'); } .SA .MultiItem_Edit { background-image: url('/Cache/71848/EditDk.svg'); } /* .SA .AI_Button { background-image: url('/Cache/71848/AIAssistantCircleDk.svg'); } */ .SA .editable_enabled, .SA .MultiSelect_Item, .SA .MultiItem { /* this allows our touch support to work on MS Edge */ touch-action: none; } .SA div.MultiItem_Item .MultiItem_Delete, .SA div.MultiItem_Item .MultiItem_Edit, .SA div.MultiSelect_Item .MultiSelect_Delete, .SA tr.MultiItem_Item > td .MultiItem_Delete, .SA tr.MultiSelect_Item > td .MultiSelect_Delete { position: relative; top: -3px; right: 0px; } .SA div.MultiItem_Item .MultiItem_Drag, .SA div.MultiSelect_Item .MultiSelect_Drag, .SA tr.MultiItem_Item > td .MultiItem_Drag, .SA tr.MultiSelect_Item > td .MultiSelect_Drag { position: relative; top: -3px; left: -15px; float: left; } .SA span.MultiSelect_Item .MultiSelect_Drag { position: relative; float: left; margin: 1px 10px 0 0; } .SA .MultiItem_Item > select:not(.No_WideRow_Stretch), .SA .MultiItem_Item > input:not(.No_WideRow_Stretch), .SA .MultiItem_Item > textarea:not(.No_WideRow_Stretch), .SA .MultiItem_Item > div:not(.No_WideRow_Stretch) { width:99.9% /*!important*/; } /* WideRow is a DIV "row" containing a label and span, with the span containing the input field stretched to take all available space */ .SA .WideRow { padding-top: 10px; /* looks better with spacing between rows */ } .SA .WideRow > span { /* display: block; DRL FIXIT! This was way too vague. When we track down why this is here add a proper class for it. */ /* overflow: hidden; this was preventing a pop up menu from extended beyond the bounds of a DIV (Issue 1502) */ /* padding-right: 5px; padding-left: 10px;*/ } .SA .WideRow > label { float: left; } .SA .WideRow > span > select :not(.No_WideRow_Stretch), .SA .WideRow > span > input :not(.No_WideRow_Stretch), .SA .WideRow > span > textarea :not(.No_WideRow_Stretch) { width:99.9% /*!important*/; } /* DRL FIXIT? This broke the main menu on the website view. .SA input[type="checkbox"] { display: inline-block; width: 16px !important; height: 16px; max-width: initial; min-width: initial; margin: -2px 0 0 0; padding:0 0 0 14px !important; vertical-align: middle; } */ /* remove the checkbox/radio color on some browsers (like newer Chrome it's blue) */ .SA input[type='checkbox'], .SA input[type='radio'] { filter: grayscale(1) } /* the sizing of input text boxes is usually relative to the text box and any borders and such will be outside and this messes up the spacing (sometimes making the text box bigger than the containing DIV) so we use this style to use the outside as the size reference */ .SA input { box-sizing: border-box; } .SA .StripeElement { background-color:#ffffff; border: 1px solid #cecece; border-radius:5px; padding:8px 5px; /* for some reason the Stripe element doesn't show as much padding so we increase it */ } .SA .ResourceChooser_Preview { display: table; height: 100%; } .SA .ResourceChooser_Image { display: table-cell; vertical-align: middle; padding-right: 10px; width: 1%; /* if I don't have this we use up too much space for the image for some reason */ } .SA .ResourceChooser_Filename { display: table-cell; vertical-align: middle; padding-bottom: 5px; } .SA .ResourceChooser_Buttons { display: table-cell; white-space:nowrap; text-align: right; vertical-align: middle; padding-bottom: 5px; } .SA .ResourceChooser_Buttons > A { padding-left: 10px; } .SA .uploadProgress { max-width: 100%; height: 14px; background: #feb902; margin-bottom: 6px; border-radius: 4px; } /* Used by dropzone to hide the drop control until needed. */ .SA .editgrid .dz-message, .SA .edittree .dz-message { display: none; } /* =================================================================== https://gr8.social/v2/Skins/CampaignDrawWinners.css =================================================================== */ .SA .draw_box { height: 140px; overflow: hidden; border: solid 4px black; border-radius: 8px; /* center the box */ margin-left: auto; margin-right: auto; } .SA .draw_box .list { margin: 0; padding: 0; /*the second value is the duration in seconds of the scroll animation*/ -webkit-animation: scrollUp 5s 0.16s forwards; animation: scrollUp 5s 0.16s forwards; } .SA .draw_box ul li { height: 120px; padding: 10px; list-style: none; font-size: 80px; } .SA #WinnersList { border: solid 2px black; border-radius: 4px; /* half size and centered */ width: 50%; margin: auto; } .SA .content_dialog:has(.draw_box) { max-width:1100px; } @media screen and (max-width: 768px){ .SA .draw_box { height: 100px; } .SA .draw_box ul li { font-size: 45px; } } @media screen and (max-width: 992px){ .SA .draw_box { height: 100px; } .SA .draw_box ul li { font-size: 50px; } } @media screen and (max-width: 1200px){ .SA .draw_box { height: 100px; width: 80%; } .SA .draw_box ul li { font-size: 60px; } } @-webkit-keyframes scrollUp { from { transform: translateY(0); } /*changing the translateY value here helps line-up the winner with the box.*/ /*Small lists - less decimals. Large lists (thousands) - more decimals*/ /*formula for TranlateY = (-100% / #of-rows in excel file) x (#of-rows in excel file - 1) this gets it centered*/ to { transform: translateY(-99%); } } @keyframes scrollUp { from { transform: translateY(0); } /*changing the translateY value here helps line-up the winner with the box.*/ /*Small lists - less decimals. Large lists (thousands) - more decimals*/ to { transform: translateY(-99%); } } /* =================================================================== https://gr8.social/v2/Skins/CampaignReports.css =================================================================== */ .SA DIV.report_table > TABLE { width: max-content; text-align: left; } /* put a bit of space between the columns */ .SA DIV.report_table > TABLE TR > TD { padding-left: 15px; } .SA DIV.report_table > TABLE TR > TD:first-child { padding-left: 0px; } .SA DIV.report_table > TABLE TR.header > TD { text-align: center; font-weight: bold; } .SA DIV.report_table > TABLE TR.total > TD { text-align: center; font-weight: bold; border-top: solid; } .SA DIV.report_table > TABLE TR > TD.money { text-align: right; } /* =================================================================== https://gr8.social/v2/Skins/DropdownMenu.css =================================================================== */ .SA .dropdown-menu { position: relative; display: inline-block; text-align: left; /* undo styling from ResourceChooser_Buttons which is right aligned */ } .SA .dropdown-menu > span { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; /* top: -10px; */ } .SA .dropdown-menu > span, .SA .dropdown-menu > div, .SA .dropdown-menu li > div { cursor: pointer; outline: 0; vertical-align: middle; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .SA .dropdown-menu > div { background-color: rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; } .SA .dropdown-menu > span:focus ~ div { display: block; } .SA .dropdown-menu > ul { position: absolute !important; z-index: 2; transition: visibility 0.5s; max-height: 240px; visibility: hidden; opacity: 0; overflow: hidden; /* had to hide it for OSX Safari otherwise it prevented clicking on items under menu - it's shown below */ } /* I suspect the "visible" class may no longer be used now that we show it on focus? .SA .dropdown-menu.visible > ul, */ .SA .dropdown-menu > span:focus ~ ul { visibility: visible; opacity: 1; overflow: auto; /* had to hide it for OSX Safari so need to show it here */ } .SA .dropdown-menu.right > ul { right: 0; padding-left: 0 !important; min-width: 120px; } .SA .dropdown-menu.left > ul { left: 0; padding-left: 0 !important; } .SA .dropdown-menu > ul { top: 25px; border-radius: 2px; backdrop-filter: blur(9px); padding: 0; background: #ffffff; border: 1px solid #d7d7d7; margin: 0; } .SA .dropdown-menu li { height: 2em; line-height: 2em; white-space: nowrap; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); list-style: none; margin-left: 0; transition: background 300ms ease; background: #ffffff8c; padding: 2px 20px 5px 6px; } .SA .dropdown-menu li:not(:first-child) { border-top: none; } .SA .dropdown-menu li:hover { background: #bfbfbf4f; } .SA .dropdown-menu.dropdown-menu-fix > ul{ overflow: auto !important; visibility: visible !important; opacity: 1 !important; } .SA .dropdown-menu li div .iconsmall{ width: 20px; height: 20px; padding: 4px; } .SA .AddRemoveSelector_Container .dropdown-menu li div /* for AddRemoveSelector as it doesn't put text in a span DRL FIXIT? Put it in a span? */ { padding: 0px 11px; /* width: 35px; these dimensions mess up the pop up menu for the AddRemoveSelector case! height: 35px; */ box-sizing: border-box; color: #feb902; /* transition: color 300ms ease;*/ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 13px; } .SA .dropdown-menu > span:focus img{ filter: brightness(123%); } /* =================================================================== https://gr8.social/v2/Skins/Forms.css =================================================================== */ .SA table.entry_table, table.simple_table { vertical-align: top; margin: 0; margin-left: auto; margin-right: auto; padding: 0; width: 98%; /* force full width of column/page */ /* space between rows, and also needed for rounded corners on table cells (although this isn't working still) */ border-collapse: separate; /* border-spacing: 0 0.75em; */ } .SA table.centered_table { width: auto; /* centered table doesn't take full width */ } .SA table.entry_table > tbody, .SA .entry_table > tbody > tr, .SA table.simple_table > tbody, .SA .simple_table > tbody > tr { width: 99.9%; /* force rows to take all available width */ } .SA .entry_table > tbody > tr > td, .SA .simple_table > tbody > tr > td { padding-top: 0.5em; padding-bottom: 0.5em; } /* .SA .entry_table > tbody > tr:first-child > td:not(:first-child), .SA .simple_table > tbody > tr:first-child > td:not(:first-child) { padding-top: 0px; } .SA .entry_table > tbody > tr:last-child > td, .SA .simple_table > tbody > tr:last-child > td { padding-bottom: 0px; } */ .SA .entry_table > tbody > tr > td:first-child, .SA .simple_table > tbody > tr > td:first-child { padding-right: 0.75em; padding-top: 0.5em; } .SA table.entry_table > tbody > tr > td { /* convert "label : input field [description]" on a row to one above the other */ display: block; } .SA table.entry_table > tbody> tr { display: block; } .SA table.entry_table > tbody > tr > td > input:not([type=radio]):not([type=checkbox]):not(.No_WideRow_Stretch), .SA table.simple_table > tbody > tr > td > input:not([type=radio]):not([type=checkbox]):not(.No_WideRow_Stretch), .SA table.entry_table > tbody > tr > td > select:not(.No_WideRow_Stretch), .SA table.simple_table > tbody > tr > td > select:not(.No_WideRow_Stretch), .SA table.entry_table > tbody > tr > td > textarea, .SA table.simple_table > tbody > tr > td > textarea, .SA table.entry_table > tbody > tr > td > iframe, .SA table.simple_table > tbody > tr > td > iframe, .SA table.entry_table > tbody > tr > td > table, .SA table.simple_table > tbody > tr > td > table /* added these for the case of ResourceChooser_Preview but it breaks other pages like when ordering an email plan, and I don't see a problem with this removed. .SA table.entry_table > tbody > tr > td > div, .SA table.simple_table > tbody > tr > td > div */ { width: 99.9%; /* stretch fields to take all available width */ } .SA div.card_body > input, .SA div.card_body > select, .SA div.card_body > textarea, .SA div.card_body > iframe /*, .SA div.card_body > table*/ { width: 99.9%; /* stretch fields to take all available width */ } /* .SA div.MultiItem_Item > input, .SA div.MultiItem_Item > select, .SA div.MultiItem_Item > textarea/*, .SA div.MultiItem_Item > table* / { width: 95%; /* stretch fields to take all available width, but leave space for the X * / } */ /* .SA table.entry_table > tbody > tr > td > input.three_way_split, .SA table.simple_table > tbody > tr > td > input.three_way_split { width: 31%; /* stretch fields to take only 1/3 available width } */ .SA table.entry_table > tbody > tr > td > input.auto_width, .SA table.simple_table > tbody > tr > td > input.auto_width { width: auto; /* override the stretching */ } .SA table.entry_table td:nth-child(1) { font-weight: 600; /* font-size: 110%; */ margin-top: 10px; /* a little space between what would otherwise be rows */ /* font-weight: 700; font-size: 90%; */ /*padding-top: 8px;*/ vertical-align:top; clear:both; } /* .SA table.entry_table > tbody > tr > td:nth-child(3) { /* third column is the description * width: 100%; font-size: 80%; } */ .SA table.entry_table td #Repeats_INTERVAL, .SA table.entry_table td #Repeats_COUNT, .SA table.entry_table td #Repeats_UNTIL + a { width: auto !important; min-width:80px; display: inline-block; } /* DRL FIXIT? I'm not sure whether these are desired? */ .SA table.entry_table td.entry_buttons { font-weight: bold; /* palette items... */ border-color: #ddd; } .SA table.labeled_table td:nth-child(1) { font-weight: 600; font-size: 110%; } /* why were we going for full width buttons? .SA table.simple_table > tbody > tr > td > button, .SA table.simple_table > tbody > tr > td > input[type="submit"] { width: 99.9%; } .SA table td.bordered { border-width: 1px; border-style: solid; /* palette items... * / border-color: #666 #ccc #ccc #666; } */ .SA .success_row { /* palette items... */ background: #DFF2BF; } .SA .warning_row { /* palette items... */ background: #FEEFB3; } .SA .error_row { /* palette items... */ background: #A01010; } .SA .validation_error:not(div), .SA input[type=text].validation_error, .SA input[type=url].validation_error, .SA input[type=email].validation_error, .SA input[type=password].validation_error, .SA input[type=tel].validation_error, .SA input[type=checkbox].validation_error, .SA input[type=radio].validation_error, .SA select.validation_error, .SA textarea.validation_error, .SA div.validation_error /* for CKEditor */ { /* palette items... */ border-color: #f90000; background-color: #FFDFE4; } .SA .validation_warning:not(div), .SA input[type=text].validation_warning, .SA input[type=url].validation_warning, .SA input[type=email].validation_warning, .SA input[type=password].validation_warning, .SA input[type=tel].validation_warning, .SA input[type=checkbox].validation_warning, .SA input[type=radio].validation_warning, .SA select.validation_warning, .SA textarea.validation_warning, .SA div.validation_warning /* for CKEditor */ { /* palette items... */ color: #9F6000; background-color: #FEEFB3; } .SA .validation_info:not(div), .SA input[type=text].validation_info, .SA input[type=url].validation_info, .SA input[type=email].validation_info, .SA input[type=password].validation_info, .SA input[type=tel].validation_info, .SA input[type=checkbox].validation_info, .SA input[type=radio].validation_info, .SA select.validation_info, .SA textarea.validation_info, .SA div.validation_info /* for CKEditor */ { /* palette items... */ color: #00529B; background-color: #BDE5F8; } .SA div.validation_error, .SA input.validation_error + label, .SA label:has(input.validation_error) { /* palette items... */ color: #f90000; } .SA div.validation_warning, .SA input.validation_warning + label, .SA label:has(input.validation_warning) { /* palette items... */ color: #9F6000; } .SA div.validation_info, .SA input.validation_info + label, .SA label:has(input.validation_info) { /* palette items... */ color: #00529B; } .SA input.image_selector /* hide the radio/checkbox */ { visibility: hidden; /* Makes input not-clickable */ position: absolute; /* Remove input from document flow */ /* position: absolute; left: -9999px;*/ } .SA input.image_selector + label > img, /* label next to the input */ .SA label.image_selector > input + img /* label wrapping the input */ { cursor: pointer; } .SA input.image_selector:checked + label > img, /* label next to the input */ .SA label.image_selector > input:checked + img /* label wrapping the input */ { border: 1px solid #fff; box-shadow: 0 0 3px 3px #090; } .SA .section_title, .SA .section_sub_title { padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; border-width: 2px; border-style: solid; /* I had to increase the height to get a button to fit on iPhone */ height: 35px; } .SA .section_title { /* palette items... */ font-weight: bold; background: #ccc; border-color: #ccc #666 #666 #ccc; } .SA .section_sub_title { /* palette items... */ font-weight: normal; background: #eee; border-color: #ccc #666 #666 #ccc; } .SA .section_title a, .SA .section_title button { /* Remove all decorations to look like normal text */ background: none; border: none; display: inline; font: inherit; margin: 0; outline: none; outline-offset: 0; box-shadow: none; cursor: pointer; float: right; /* padding: 0.75em 0.8em; */ padding: 0; height: 100%; /* removed for events page, not sure if it's used elsewhere? border-left-width: 1px; border-left-style: solid; */ /* palette items... */ color: #000; border-color: #666; } .SA .section_description { padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; border-width: 1px; border-style: solid; /* palette items... */ background: #eee; border-color: #ccc #666 #666 #ccc; } .SA .section_group { border: 0; position: relative; /*padding-bottom: 15px;*/ } .SA .centered_table_header { height: 41px; /* allow for height of table row which is now floating over the content */ } .SA .centered_table_header > TD { height: 35px; /* must match section_title height */ } /* Remove the above and below spacing added by P styling. */ /*.SA .section_group,*/ .SA .entry_table .radio_group, .SA .entry_table .checkbox_group { margin: 0px; } .SA .section_group > label, .SA .radio_group > label, .SA .checkbox_group > label { display: block; margin:10px 0; } /* DRL Not sure what this was added for? .SA .section_group #searchIcon { position: absolute; right: 5px; top: 15px; width: 18px; height: 18px; } */ .SA .section_group input + .MultiItem button, .SA .section_group select + .MultiItem button{ margin-top:0; /* margin-bottom:15px; */ } .SA table.entry_table{ border-collapse: collapse; } .SA table.entry_table td input:not[type="radio"], .SA table.entry_table td input:not[type="checkbox"], .SA table.entry_table td textarea, .SA table.entry_table td iframe { width:99.9% !important; } .SA table td input.three_way_split, .SA table td select.three_way_split, .SA div.card_body > input.three_way_split, .SA div.card_body > select.three_way_split { width: 99.9% !important; display: inline-block; /* float: left; */ margin-right: 0.5%; } .SA table td input.always_three_way_split, .SA table td select.always_three_way_split, .SA table td span.always_three_way_split, .SA div.card_body > input.always_three_way_split, .SA div.card_body > select.always_three_way_split { width: 31% !important; display: inline-block; /* float: left; */ margin-right: 0.5%; } .SA table td input.always_two_way_split, .SA table td select.always_two_way_split, .SA div.card_body > input.always_two_way_split, .SA div.card_body > select.always_two_way_split { width: 49% !important; display: inline-block; /* float: left; */ margin-right: 0.5%; } .SA table td .centered { margin: 0 auto; } .SA .three_way_split:last-child, .SA .always_three_way_split:last-child, .SA .always_two_way_split:last-child { margin-right: 0; } /* This doesn't seem to be used, relevant styling is in LayoutAppContent.css .SA .content_dialog { padding: 5px 8px 5px 15px; margin-bottom: 20px; border: 2px solid #efefef; border-radius: 10px; } */ .SA .content_dialog td input[type="radio"] { display: inline-block; width: 16px !important; height: 16px; max-width: initial; min-width: initial; margin: 0 5px 4px 0; /* alignment for "default" selector for contact phones/emails/addresses/ims */ vertical-align: middle; } .SA .form-tip { /* display: block; */ font-style:italic; font-size: 85%; padding: 5px 5px 5px 26px; color: #484848; background: url(/Cache/71848/TipsDk.svg) 3px 50% no-repeat; background-size:16px 16px; } .SA .form-tip p { margin: 0.3em 0; } .SA table.entry_table td.entry_buttons{ border:0; padding-bottom:0; } .SA .entry_buttons .optional{ color:#ffffff; opacity:1; padding: 0 5px; } .SA div.justify > label { word-break: normal; /* prevent a break like "Street\n:" } .SA div.justify > input, .SA div.justify > select, .SA div.justify > textarea { margin-bottom: 0.5em; width: 99.9%; /* stretch fields to take all available width */ } @media screen and (min-width: 37em) and (min-width: 640px) /* phone in landscape mode, large tablet in portrait mode */ { .SA table.entry_table > tbody > tr > td /* convert to showing on a row instead of one above the other */ { display: table-cell; /* The below is added for drag-and-drop of MultiItem. This was added because while dragging the fields in the table on devices the ghost image was going outside or we can say is being created too far. So in order to prevent it on mobile devices and ipad we added its position to be relative */ position: relative !important; } .SA table.entry_table > tbody> tr { display: table-row; } /* .SA table.entry_table > tbody > tr > td:nth-child(3) /* third column is the description * { width: 25%; } */ .SA .section_title a { padding:4px 4px 4px 8px; } .SA .section_title a .iconsmall{ margin-left:5px; } .SA .content_dialog td{ padding-bottom:10px; } /*.SA table.entry_table td:nth-child(1) { padding-top: 13px; width:20%; }*/ .SA table td input.always_three_way_split, .SA table td select.always_three_way_split, .SA table td span.always_three_way_split, .SA table td input.three_way_split, .SA table td select.three_way_split, .SA table td span.three_way_split { width: 32% !important; display: inline-block; /* float: left; */ margin-right: 0.5%; } /* .SA .three_way_split:last-child { margin-right: 0; } */ .SA .section_group > label, .SA .radio_group > label, .SA .checkbox_group > label { display: inline-block; margin: 2px 20px 8px 0; } /*.SA .section_group label:last-of-type { margin-right:0; }*/ .SA div.justify { display: flex; justify-content: space-between; align-items: center; } .SA div.justify label { margin: 0; margin-right: 10px; } } .SA button.form_button, .SA input[type=button].form_button, .SA button.dz-button /* dropzone button for FileUpload.js */ { cursor: pointer; font-size: 100%; font-weight: normal; /* undo the bold styling applied inside the first column of an entry_table */ line-height: 20px; color: #fff; border: 0; height: 40px; /* this is the height the button will be with an icon so make them all the same height regardless of icon */ width: auto; /* opacity: 0.8; */ background:transparent; background-color: #feb902; border-radius: 5px; padding: 5px; transition: all .5s; margin:8px 10px 8px 0; } .SA button.form_button:hover, .SA button.form_button:active, .SA button.form_button:focus, .SA input[type=button].form_button:hover, .SA input[type=button].form_button:active, .SA input[type=button].form_button:focus { /* opacity:1; */ background-color: #b16c00; } /* Color covered above and the extra styling isn't needed? .SA button.form_button:active, .SA input[type=button].form_button:active { border: 0; box-shadow: none; background-color: #b16c00; } */ .SA button.form_button:disabled, .SA input[type=button].form_button:disabled { cursor: default; background-color: #ffff4e; } .SA .alt_section_title { background-color: #feb902; color: white; height: auto; padding-top: 8px !important; padding-bottom: 8px !important; border-top: 0 !important; } .SA #content_inline_filter{ box-sizing:border-box; text-align:left; /* padding:45px 5px 10px; */ border-bottom: 1px solid #cecece; background:#bababa; } .SA .filter_section_inline .iconsmall{ margin-right:10px; } .SA .filter_section_inline select, .SA .filter_section_inline input { background-color:#ffffff; border: 1px solid #cecece; border-radius:3px; padding:3px 5px; font-size: 85%; width:100%; /* max-width:200px; this makes various controls too narrow, such as on the Contacts page filter section*/ margin-top:4px; color:#333; -webkit-appearance: none; -moz-appearance: none; appearance: none; display:inline-block; } .SA .filter_section_inline select { background-image:url(/Cache/71848/ExpandGreyOff.svg); background-size: .7em; background-position:98% 50%; background-repeat:no-repeat; padding-right:16px; } /* This didn't prove useful, shows up under the X sometimes, and confused one customer who thought it was a button. .SA .filter_section_toolbar input[type=search], .SA .filter_section_inline input[type=search] { background-size: 18px 18px; background-image:url(/Cache/71848/SearchGrey.svg); background-position:98% 50%; background-repeat:no-repeat; padding-right:16px; } */ .SA .filter_section_inline input[type=search] { max-width:none; } .SA #selection_text { padding-left: 15px; color: #fff; margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 10px; padding-bottom: 0; /* opacity:0.8; */ } .SA select, .SA .DateAndTimeChooser_Selector, .SA .is-selectbox.snippet-cat /* right side palette drop down list */ { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image:url(/Cache/71848/ExpandGreyOff.svg); background-size: .7em; background-position:98% 50%; background-repeat:no-repeat; padding-right:16px; } /* remove the drop down icon from the drop down menu list */ .SA select.DropDownMenu { background-image:none; padding-right:5px; } /* added this so the search button in the inline filter area doesn't cause that table row to be taller than the others */ .SA .filter_section_search_button { cursor: pointer; color: #fff; border: 0; height: auto; /* opacity: 0.8; */ background:transparent; background-color: #feb902; border-radius: 5px; padding: 5px; transition: all .5s; line-height: 20px; margin:0px 10px 0px 0; } .SA .filter_section_search_button:hover { background-color: #b16c00; color: #fff; /* opacity: 0.8; */ } .SA .tab_row { min-height: 35px; /* DRL FIXIT ? Why does the tab row have a height of 0, even though the tab labels have a height? */ display: table-row; /* force the next item to show on the next line, not sure why it doesn't do that naturally */ } .SA .tab_radio_button { position: absolute; left: -9999px;; } .SA .tab_radio_label { display: block; position: relative; border: 1px solid #777; border-bottom: none; border-radius: 5px 5px 0 0; height: 32px; margin-top: 4px; float: left; margin-right: 2px; text-align: center; line-height: 36px; cursor: pointer; margin-bottom:-1px; background:#f9f9f9; color:#777; transition: all .5s; /* opacity: 0.8; */ padding: 0 28px 0 4px; overflow: hidden; text-overflow: clip; } .SA .tab_add_button:hover, .SA .tab_radio_label:hover { background: #ccc; } .SA .tab_remove_button { position: absolute; top: 0px; right: 0px; cursor: pointer; color: #222; border-radius: 30px; background: transparent; font-size: 27px; font-weight: bold; display: inline-block; line-height: 0px; padding: 10px 0; margin: 8px 4px 8px 0; width: 20px; } .SA .tab_radio_button:checked+label { height: 36px; margin-top: 0px; color: #fff; background: #feb902; } .SA .tab_radio_button:checked+label > .tab_remove_button:before, .SA .tab_radio_button:checked+label > .tab_remove_button:after { background-color: #fff; } .SA .tab_remove_button:hover { background-color: #ddd; } .SA .tab_radio_button:checked+label > .tab_remove_button:hover::before, .SA .tab_radio_button:checked+label > .tab_remove_button:hover::after { background-color: #222; } .SA .tab_remove_button:before, .SA .tab_remove_button:after { position: absolute; left: 9px; top: 3px; content: ' '; height: 14px; width: 2px; background-color: #222; } .SA .tab_remove_button:before { transform: rotate(45deg); } .SA .tab_remove_button:after { transform: rotate(-45deg); } .SA .tab_add_button { width: 36px; font-size: 30px; padding: 0; } .SA .tab_add_button:before { content: "+"; } .tab_info_message { color: #00529B; background-color: #BDE5F8; text-align: center; padding-top: 5px; padding-bottom: 5px; margin-top: 10px; margin-bottom: 15px } /** * Styles for Dropzone template */ .SA .dropzone.FileUpload * { pointer-events: none; } .SA .dz-drag-hover.FileUpload { border: 2px dashed #ddd; padding: 4px; border-radius: 5px; } .SA .FileUpload .dz-preview { border: 1px solid #bbb; border-radius: 5px; padding: 8px; margin-top: 1em; position: relative; } .SA .FileUpload .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; height: 16px; background: #ddd; -webkit-transform: scale(1); border-radius: 8px; overflow: hidden; } .SA .FileUpload .dz-upload { background: linear-gradient(to bottom, #feb902, #b16c00); position: absolute; top: 0; left: 0; bottom: 0; width: 0; } .SA .FileUpload .dz-remove { position: absolute; width: 20px; height: 20px; top: 4px; right: 4px; background-image: url(/Cache/71848/RemoveDk.svg); background-size: 20px 20px; cursor: pointer; pointer-events: all; } /* DRL FIXIT? Are the following only used for layout editor? If so move to LayoutEditor.css */ .SA .AddRemoveSelector_Container { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .SA .AddRemoveSelector_Container select { align-self: flex-start; flex-grow: 1; } /* =================================================================== https://gr8.social/v2/Skins/ContentBuilderCustomize.css =================================================================== */ h1.custom-tag-grouptitle { margin: 1; cursor: default; font-size: 11px; font-weight: bold; white-space: nowrap; margin: 0; padding: 6px 6px 7px 6px; color: #484848; border-bottom: 1px solid #d1d1d1; background: #f8f8f8; } ul.custom-tag-group { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } .custom-tag-group li { font-size: 11px; margin-bottom: 5px; padding: 6px 7px; display: block; color: inherit!important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; } #_cbhtml.menu-position-up .is-rte-pop.active { bottom: 96px; top: auto !important; z-index: 9; } span.placeholder-widget { background: yellow; cursor: pointer; } .layout_control { width: 100%; /* was 99% but this looks better (hope it doesn't break anything */ margin: 0.7rem 0; line-height: 1.9em !important; } /* when we use a transparent image like an SVG the background appears as dark grey instead of white due to some default content builder styling so we'll override that here. */ #_cbhtml .snippet-item { background-color: #FFF !important;; } /* =================================================================== https://gr8.social/v2/Skins/Forum.css =================================================================== */ /* breadcrumbs */ #breadcrumbs{ background:#efefef; color:#bbbbbb; padding:15px 10px 12px; font-size:100%; border-radius: 10px; margin-bottom: 30px; } #breadcrumbs .inner-nav:before{ font-size:100%; line-height:1; } #breadcrumbs .inner-nav li:last-child, #breadcrumbs .inner-nav li:nth-last-child(2){ display:inline-block; } #breadcrumbs{ background:#efefef; color:#bbbbbb; padding:15px 10px 12px; font-size:80%; } #breadcrumbs .inner-nav{ margin:0; padding:0; display:block; list-style:none; } #breadcrumbs .inner-nav:before{ content:'\25C4'; display:inline-block; margin:0 10px 0 0; font-size:80%; vertical-align: middle; } #breadcrumbs .inner-nav li{ display:none; margin:0; padding:0; } #breadcrumbs .inner-nav li:not(:last-child):after{ content:'\00bb'; display:inline-block; margin:0 10px; } #breadcrumbs .inner-nav li a:hover, #breadcrumbs .inner-nav li a:active, #breadcrumbs .inner-nav li a:focus{ color: #feb902; } #breadcrumbs .inner-nav li::before { content: none; } /* For websites with a fixed header... */ .top-fixed #header ~ #breadcrumbs{ position:fixed; left:0; right:0; z-index:5; } .top-fixed #breadcrumbs ~ .content_wrapper{ margin-top:46px; } @media screen and (min-width: 60em){ /* tablet in landscape mode, laptop or desktop, may not be full screen */ #breadcrumbs .inner-nav li{ display:inline-block; } } /* .forum_search_box input{ font-size:90%; box-shadow:none; height:36px; box-sizing:border-box; float:left; margin:0; padding:2px 4px; } .forum_search_box input[type=text], .forum_search_box input[type=search] { border:1px solid #efefef; width:72%; margin-right:3%; padding:2px 2px 2px 30px; background:url('/Images/NetBizBoom/svg/SearchGrey.svg') 5px 50% no-repeat; background-size:20px 20px; } .forum_search_box input[type=submit]{ width:25%; background: #feb902; color:#ffffff; border:1px solid #feb902; } .forum_search_box input[type=submit]:hover, .forum_search_box input[type=submit]:focus, .forum_search_box input[type=submit]:active{ width:25%; color: #feb902; background:#ffffff; } */ .forum_search_box .tags{ clear:both; padding-top:10px; } .forum_search_box .tags h3{ text-transform:uppercase; text-align:left; color:#666; margin: 5px 0 5px; font-weight: 400; font-size: 18px; display:inline-block; margin-right:20px; } .forum_search_box .tags .MultiSelect_Item:hover{ opacity:1; } .forum_search_box .tags .MultiSelect_Item .MultiSelect_Delete{ margin-left:5px; position:relative; background:#aaaaaa; } .forum_search_box .tags .MultiSelect_Item .MultiSelect_Delete:hover, .forum_search_box .tags .MultiSelect_Item .MultiSelect_Delete:active, .forum_search_box .tags .MultiSelect_Item .MultiSelect_Delete:focus{ background: #feb902; border:0; box-shadow:none; } .forum_search_box .tags .MultiSelect_Delete:before { content: 'x'; display: block; line-height: 12px; font-size: 13px; position: absolute; top: 0; left: 0; right: 0; text-align: center; font-family: monospace; color:#ffffff; } .tags .select-wrapper{ position:relative; margin-top: 3px; margin-bottom: 3px; margin-right: 3px; } .tags select{ display: inline-block; background: #fff url('/Images/Common/DropDownIcon.png') 90% 50% no-repeat; border-radius: 5px; vertical-align: top; font-size: 80%; opacity: 0.7; color: #666; border: 0; padding: 5px 25px 5px 10px; vertical-align: middle; -webkit-appearance: none; -moz-appearance : none; border: 1px solid #efefef; } /* Topics */ .content .index{ float:none; width: 100%; box-sizing: border-box; padding:0; border:0; } .new_post, .follow_post, .edit_post, .delete_post, .copy_post, div > span.copy_post /* to override DropDownMenu.css styling */ { font-size:90%; padding: 5px; margin:0 0 25px; color:#fff; background: #feb902; padding:10px 15px; border-radius:5px; border:0; transition:all 0.3s; white-space:nowrap; /* margin: 0 auto 15px; I don't want the button centered width: 100%; I don't want the button the full width of the page */ float:none; line-height: 15px; border:1px solid #feb902; } .follow_post, .edit_post, .delete_post, .copy_post, div > span.copy_post /* to override DropDownMenu.css styling */ { margin-left: 10px; } .topic .topic_subject { font-size: 22px; } .new_blog_post:before, .new_post:before { content: '+'; font-size: 140%; font-weight: 700; vertical-align: middle; line-height: 0.6; display: inline-block; position: relative; top: -1px; } .new_blog_post:hover, .new_blog_post:active, .new_blog_post:focus, .new_post:hover, .new_post:active, .new_post:focus{ border:1px solid #feb902; background:#ffffff; color: #feb902; box-shadow:none; } .new_blog_post:hover:before, .new_post:hover:before{ animation-name: spin; animation-duration: 1s; animation-iteration-count: once; animation-timing-function: ease-in-out; } .index .topic{ clear:both; border:0 !important; border-bottom:1px solid #efefef !important; padding:0 0 30px; margin-bottom:30px; } .index .topic:first-of-type { border-top: 1px solid #efefef !important; padding-top: 20px; margin-top: 30px; } .topic .topic_subject{ font-size:24px; } .topic .topic_subject a{ display:inline-block; transition:color 0.3s; } .section_subject a:hover, .section_subject a:active, .section_subject a:focus, .topic_subject a:hover, .topic_subject a:active, .topic_subject a:focus, .post_subject a:hover, .post_subject a:active, .post_subject a:focus{ color: #feb902; background:transparent !important; } .topic .topic_displayname, .topic .topic_date{ color:#666666; display:block; font-size:80%; } .topic .topic_body{ clear:both; background:#efefef; padding:1px 8px 0 15px; margin:10px 0 0; border-radius:10px; } .topic .topic_body:empty{ clear:both; padding: 0; } /* Single discussion */ .post .post_displayname, .post .post_date{ float:none; width:auto; text-align:left; font-size:90%; line-height:1.5; } .comment_body .new_post, .post_body .new_post{ margin: 5px 0; width: auto; float:left; } .comment_body .follow_post, .comment_body .edit_post, .comment_body .delete_post, .comment_body .copy_post, .post .follow_post, .post .edit_post, .post .delete_post, .post .copy_post, .post_body .follow_post, .post_body .edit_post, .post_body .delete_post, .post_body .copy_post { padding: 3px 10px; margin: 5px 15px 5px 0; float:left; } .taglist { float: none; margin-bottom: 15px; } .section_subject{ text-align:left; margin:0; padding:0; } .section_subject a{ margin: 5px 0 0; display: inline-block; } .section_subject:after{ display:none; } .section .section_body{ padding:15px 0; } .section > .children{ border-top:4px solid #efefef; } .comment_displayname, .comment_date, .section_displayname, .section_date, .post_displayname, .post_date{ color:#666666; display:block; font-size:80%; } .comment_displayname { font-style: italic; } .children{ clear:both; padding-top:20px; } .child{ padding:10px 0 10px 20px; clear:both; } .child:after{ display:block; content:''; clear:both; } .section .post{ border:0; } .children:first-of-type > .child:not(.comment_child) { padding-left: 0; } .children .child:not(.comment_child){ border-top: 1px solid #efefef; padding-left:40px; position:relative; } .children .child:not(.comment_child):before{ display:block; background:#efefef; width:16px; height:16px; position:absolute; top:-8px; left:0; content:''; border-radius:50%; } .section > .children > .child{ padding-left:0; border-top-width:2px; } .section > .children > .child:first-of-type{ border-top:0; } .section > .children > .child:before{ display:none; } .comment_body .new_post, .post_body .new_post{ border:1px solid #feb902; padding: 3px 10px 1px; text-transform: uppercase; margin:2px 0; } .comment_body .new_post:hover, .comment_body .new_post:active, .comment_body .new_post:focus, .post_body .new_post:hover, .post_body .new_post:active, .post_body .new_post:focus{ color: #feb902; box-shadow:none; background:#fff; } .taglist .MultiSelect_Item{ padding:4px 12px; } .comment_body .new_post, .post_body .new_post{ width: auto; float:left; } .comment_body .follow_post, .comment_body .edit_post, .comment_body .delete_post, .comment_body .copy_post, .post_body .follow_post, .post_body .edit_post, .post_body .delete_post, .post_body .copy_post { padding: 3px 10px; margin: 5px 15px 5px 0; float:left; } .taglist { float: none; margin-bottom: 0; } .children .child{ padding-left:20px; } /* .child span.forumimage { width: 75px; height: 75px; float: left; margin: 0 5px 0 0; } */ .children img.forumimage { float: left; margin: 0 5px 0 0; max-width: 75px; max-height: 75px; width: expression(this.width > 75 ? "75px" : true); height: expression(this.height > 75 ? "75px" : true); } .topic .topic_subject .forumimage ~ a { margin-top: 0; } /* .topic span.forumimage{ display:block; float:left; width:100px; height:100px; margin-bottom:10px; margin-right:10px; } */ .topic img.forumimage { display:block; float:left; margin-bottom:10px; margin-right:10px; max-width: 200px; max-height: 200px; width: expression(this.width > 200 ? "200px" : true); height: expression(this.height > 200 ? "200px" : true); } /* Common */ .comment_body, .section_body, .post_body{ clear:both; padding:5px 0 10px; margin:0; } /* we want comments to be distinguishable from posts */ .comment_child{ padding:5px 8px 5px 15px; margin:5px 5px 5px; border:2px solid #efefef; border-radius:10px; } .topic .topic_body:after, .post_body:after{ display:block; clear:both; content:''; } .topic .topic_body p, .post_body p{ margin:5px 0; } .comment_body .follow_post, .comment_body .edit_post, .comment_body .delete_post, .comment_body .copy_post, .section .follow_post, .section .edit_post, .section .delete_post, .section .copy_post, .topic .follow_post, .topic .edit_post, .topic .delete_post, .topic .copy_post, .post_body .follow_post, .post_body .edit_post, .post_body .delete_post, .post_body .copy_post { float:left; background: #efefef; letter-spacing: 0.2px; text-transform: uppercase; font-size: 80%; font-weight: 400; color: #bbb; border: 1px solid #bbb; border-width: 1px; padding: 2px 10px; transition:all 0.5s; margin:4px 15px 4px 0; vertical-align:top; } .follow_post:hover, .edit_post:hover, .delete_post:hover, .copy_post:hover, .follow_post:active, .edit_post:active, .delete_post:active, .copy_post:active, .follow_post:focus, .edit_post:focus, .delete_post:focus, .copy_post:focus { color: #feb902; border-color: #feb902; background-color:#fff; box-shadow:none; } /* span.forumimage{ display:block; float:none; margin:0 auto 10px; width: 300px; height: 300px; border-radius:15px; overflow:hidden; border:3px solid #efefef; background-position:50% 50%; background-size:cover; } */ img.forumimage { display:block; float:none; margin:0 auto 10px; border-radius:15px; border:3px solid #efefef; max-width: 450px; max-height: 450px; width: expression(this.width > 450 ? "450px" : true); height: expression(this.height > 450 ? "450px" : true); } .topic ~ .paging-wrapper{ margin:0; } /* Comments */ .post { border-width: 0 !important; } .section .comment { border: 0; } .comment .comment_displayname, .comment .comment_date { display:block; float: none; width: auto; text-align: left; font-size: 90%; line-height: 1.5; } /*.topic_date,*/ .blog_date, /*.forum_date, */ .discussion_date /*.comment_date*/ { float: right; } section > .post{ border-bottom:2px solid #efefef !important; } @media screen and (min-width: 37em) and (min-width: 640px){ /* phone in landscape mode, large tablet in portrait mode */ .new_blog_post, .new_post{ width:auto; height:auto; } .post ~ .new_post, .section ~ .new_post{ margin:25px 0 0; } .section .child span.forumimage{ margin-right:10px; } .taglist{ float:left; } .comment_body .new_post, .section .new_post, .post_body .new_post{ float:right; border:1px solid #feb902; padding: 2px 10px; text-transform: uppercase; margin:2px 0; } .comment_body .follow_post, .comment_body .edit_post, .comment_body .delete_post, .comment_body .copy_post, .section .follow_post, .section .edit_post, .section .delete_post, .section .copy_post, .topic .follow_post, .topic .edit_post, .topic .delete_post, .topic .copy_post, .post_body .follow_post, .post_body .edit_post, .post_body .delete_post, .post_body .copy_post { float:right; margin:2px 0 10px 15px; } .comment_body .follow_post, .comment_body .edit_post, .comment_body .delete_post, .comment_body .copy_post, .post_body .follow_post, .post_body .edit_post, .post_body .delete_post, .post_body .copy_post { margin:2px 0 0 15px; } img.forumimage { max-width: 300px; max-height: 300px; width: expression(this.width > 300 ? "300px" : true); height: expression(this.height > 300 ? "300px" : true); } } @media screen and (min-width: 60em){ /* tablet in landscape mode, laptop or desktop, may not be full screen */ .forum_search_box input[type=text]{ padding:2px 2px 2px 10px; background:transparent; } .index .topic:first-of-type { margin-top: 0; } .taglist{ float:left; } .forum_search_box .tags h3{ text-transform:uppercase; text-align:left; color:#666; margin: 5px 0 5px; font-weight: 400; font-size: 18px; display:inline-block; margin-right:20px; } .forum_search_box .tags h3{ display:block !important; margin-right:0 !important; } } /* =================================================================== https://gr8.social/v2/Skins/iFrame.css =================================================================== */ /* =================================================== The following came from MainLayout.css =================================================== */ /* The "regular" (non-video) classes allow our code in iFrame.js to manage the frame sizing */ .iframe_wrapper { position: relative; width: 100%; height: 100%; } .iframe_wrapper_full { /* full screen version */ position: fixed; overflow: hidden; top: 40px; bottom: 0px; left: 0; right: 0; width: 100%; } /* The xxx_video classes use CSS sizing. DRL FIXIT? We may want to convert these to use iFrame.js and enhance that code to handle video of different aspect ratios. */ .iframe_wrapper_video { position: relative; width: 100%; height: 0; /* DRL I replaced this with the below because it was cutting off the controls at the bottom... padding-bottom: 51%; aspect ratio of the iframe to maintain */ padding-bottom: 55%; /* aspect ratio of the iframe to maintain */ } .iframe_wrapper_full_video { /* full screen version */ position: fixed; overflow: hidden; top: 40px; bottom: 0px; left: 7%; /* this should be 0 but for the FIXIT below */ right: 0; width: 86%; /* DRL FIXIT! using 100% cuts off the controls at the bottom of the page */ } .iframe_wrapper_medium { /* can be added to the above to make a smaller video */ width: 50%; height: 50%; /* center it */ margin-left: auto; margin-right: auto; } /* shared styling */ .iframe_wrapper_video iframe, .iframe_wrapper_full iframe { /* undo some of the other iframe styling in LayoutAppContent.css */ border-radius: 0px; padding: 0px; margin: 0px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .iframe_wrapper_video iframe, .iframe_wrapper iframe { /* undo some of the other iframe styling in LayoutAppContent.css */ border-radius: 0px; padding: 0px; margin: 0px; position: relative; top: 0; left: 0; height: 100%; width: 100%; border: 0; } /* =================================================== The following came from Website.css We would like to change the relevant code to use the above classes instead! =================================================== */ /* seems wasn't used for front facing websites .iframe_wrapper_full { position:relative; padding-bottom:0%; padding-top:30px; height:0; } */ .content_video { /* technique from https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */ position:relative; /*padding-bottom:56.25%;*/ /*padding-top:30px;*/ /*height:0;*/ } td > .content_video { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; } .content_video iframe, .content_video object, .content_video embed { /* technique from https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */ position:absolute; top:0; left:0; width:100%; height:100%; } /* don't know why this was here? .content_video{ border-radius:20px; border:8px solid #fff; padding-bottom: 56.25% !important; } .content_video:after { display:block; content:''; position:absolute; top:50%; left:50%; width: 40px; height: 40px; margin: -20px 0 0 -20px ; background-color: #ffffff; z-index:-1; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } */ @media (max-height:900px) and (min-width:992px){ /* LM: This code is for fixed header and I implemented that feature at the end part of this file */ /* body.web_page_body { padding-top: 110px; } */ .content_video{ /* technique from https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */ padding-top: 0; /*max-width: 720px; */ /* Commented to remove resize jump */ position: relative; margin: 0 auto; /*padding-bottom: 40%;*/ /* DRL FIXIT? Doesn't this need height:0 like the other version above? */ } .video .content_video{ max-width:100%; margin-bottom:0; } } /* =================================================================== https://gr8.social/v2/Skins/Images.css =================================================================== */ /* NOTE: sizes below must match the iconSizes array in Templates.php */ img.thumbnailimage { width: auto; height: auto; max-width: 30px; max-height: 30px; } img.tinyimage { width: auto; height: auto; max-width: 75px; max-height: 75px; } img.smallimage { width: auto; height: auto; max-width: 150px; max-height: 150px; } img.mediumimage { width: auto; height: auto; max-width: 300px; max-height: 300px; } img.largeimage { width: auto; height: auto; max-width: 450px; max-height: 450px; } img.extralargeimage { width: auto; height: auto; max-width: 600px; max-height: 600px; } @media screen and (max-width: 736px) { img.mediumimage { width: auto; height: auto; max-width: 300px; max-height: 300px; } img.largeimage { width: auto; height: auto; max-width: 300px; max-height: 300px; } } img.iconsmall /* icons on a data row, share buttons in the Web page footer */ { vertical-align: middle; width: 30px; /* this is usually used with SVGs which don't scale when using auto/auto */ height: auto; max-height: 30px; } img.iconthumbnail /* icons on a data row */ { vertical-align: middle; width: auto; height: auto; max-width: 50px; max-height: 50px; } /* was used by Quizzes span.iconimage { display: inline-block; background-repeat: no-repeat; background-size: contain; width: 75px; height: 75px; } */ /* =================================================================== https://gr8.social/v2/Skins/MessageWindow.css =================================================================== */ #message_window_group { height: 100%; width: 100%; table-layout: static; } #message_window_content { position: absolute; left: 50px; top: 0px; right: 0px; bottom: 30px; overflow: auto; } #message_window_bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; text-align: center; } #message_yesno_window_group { height:100%; width:100%; table-layout:static; } #message_yesno_window_content { position: relative; overflow: auto; } /* =================================================================== https://gr8.social/v2/Skins/PopUpWindow.css =================================================================== */ .popup_window { position: fixed; z-index: 20000; box-shadow: 8px 8px 5px #555; border: 2px solid #888; background: #FFFFFF; /* DRL FIXIT! If I don't specify a color it goes transparent. */ } /* Make the parent window content disabled while the pop up is displayed by placing a grey overlay under the popup. */ div.popup_window:before { content: ''; position: absolute; top: -1000px; left: -1000px; right: -1000px; bottom: -1000px; background: rgba(0, 0, 0, 0.1); z-index: -1; } .popup_window_small { left: 18%; top: 28%; right: 18%; bottom: 38%; } .popup_window_medium { left: 9%; top: 14%; right: 9%; bottom: 17%; } .popup_window_narrow { left: 22%; top: 8%; right: 22%; bottom: 12%; } .popup_window_large { left: 48px; top: 48px; right: 48px; bottom: 48px; } .popup_window_bottom_small { left: 0px; height: 90px; right: 0px; bottom: 0px; } .popup_window_bottom_small div#message_window_content { bottom: 0px; /* no "Close" button below so take up that space */ } .popup_window_bottom_small div#message_window_bottom { display: none; /* hide "Close" button */ } .popup_window_bottom_medium { left: 0px; height: 200px; right: 0px; bottom: 0px; } .popup_window_bottom_large { left: 0px; height: 300px; right: 0px; bottom: 0px; } #popup_window_shim { width: 1px; min-height: 101vh; } .popup_window > .window_header { position:absolute; } .popup_window > .window_header.window_no_header { display: none; } .popup_window_content { position: absolute; left: 0px; top: 40px; right: 0px; bottom: 0px; overflow: auto; } .popup_window_content.window_no_header { top: 0px; } .popup_window_content.window_no_scrollbars { overflow: clip; } body.has_popup_window { overflow: hidden !important; /* prevent scrolling in parent when popup is shown */ /* position: fixed; DRL This was causing the scroll position of the parent to be reset. */ } /* not sure what this is for?? */ body.has_popup_window .content_wrapper { display:block !important; } .popup_frame_content { position: absolute; left: 0px; top: 32px; right: 0px; bottom: 0px; overflow: auto; } .popup_window_full { left: 0px; top: 0px; right: 0px; bottom: 0px; } .popup_window_full #popup_header { display: none; } /* .popup_window_full .popup_window_content { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; /*overflow-y: auto; -webkit-overflow-scrolling: touch;* / } */ /* #popup_header { background: #feb902; border-bottom: 2px solid #888; position: absolute; left: 0px; top: 0px; right: 0px; height: 30px; } #popup_header input { background: url(/Cache/71848/CloseWindow.svg) no-repeat center center; background-size: cover; border: unset; width: 20px; height: 20px; } */ .popup_web_window iframe { /* we have to undo some styling applied to iframe in MainLayout.css */ box-sizing: content-box; border: none; border-radius: 0px; padding: 0px; /* width: auto; */ margin: 0px; height:100%; width:100%; } /* =================================================================== https://gr8.social/v2/Skins/CKEditorCustomize.css =================================================================== */ .placeholder_select_combo { width: 28px !important; height: 26px !important; } .placeholder_select_combo .cke_combo_button { display: inline-block; height: 18px; width: 16px; padding: 4px 6px !important; outline: 0; cursor: default; float: left; border: 0; position: relative; margin-left: 0 !important; } .placeholder_select_combo .cke_combo_button:hover, .placeholder_select_combo .cke_combo_button:focus, .placeholder_select_combo .cke_combo_button:active { background: #e5e5e5 !important; border: 1px #bcbcbc solid !important; padding: 3px 5px !important; margin: 0 !important; } .placeholder_select_combo.cke_combo_on .cke_combo_button { padding: 3px 5px !important; } .placeholder_select_combo .cke_combo_button .cke_combo_text { display: none; } .placeholder_select_combo .cke_combo_button .cke_combo_open { cursor: inherit; margin: 2px 0; width: 16px; height: 16px; float: left; display: inline-block; } .placeholder_select_combo .cke_combo_button .cke_combo_open { background: url(/Images/NetBizBoom/svg/ReplacementTbDk.svg); background-repeat: no-repeat; background-size: cover; } .placeholder_select_combo .cke_combo_button .cke_combo_open .cke_combo_arrow { display: none; } .cke_combopanel { width: 200px !important; } .cke_button__resource .cke_button_label { display: inline; } .cke_button__resource .cke_button_icon { display: none; } .resource_button { line-height: 18px !important; } .resource_button .resource_link_check { margin-right: 4px; } .resource_select .cke_button_icon { display: inline; } .resource_select .cke_button_label { display: none; } div.cke_dialog_ui_input_select { display: block !important; } /* =================================================================== https://gr8.social/v2/Skins/Notifications.css =================================================================== */ .info_message, .success_message, .warning_message, .error_message, .validation_message, .busy_message { padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px 5px; } /* This is for displaying an information message. */ .info_message { color: #00529B; background-color: #BDE5F8; background-image: url("/Images/Common/Info.png"); } /* This is for displaying a success message as a result of an action. */ .success_message { color: #4F8A10; background-color: #DFF2BF; background-image:url("/Images/Common/Valid.png"); } /* This is for displaying a warning message as a result of an action. */ .warning_message { color: #9F6000; background-color: #FEEFB3; background-image: url("/Images/Common/Attention.png"); } /* This is for displaying an error message as a result of an action. */ .error_message { color: #D8000C; background-color: #FFBABA; background-image: url("/Images/Common/Cancel.png"); } /* This is for displaying a validation error message as a result of submitting a form. */ .validation_message { color: #D63301; background-color: #FFE0A0; background-image: url("/Images/Common/Attention.png"); } /* This is for displaying a busy message. */ .busy_message { color: #00529B; background-color: #BDE5F8; background-image: url("/Images/Common/Info.png"); } /* message positioning */ .top_large_message { top: 1rem; left: calc(50% - 250px); width: 500px; } .bottom_large_message { bottom: 1rem; left: calc(50% - 250px); width: 500px; } .toast_message { max-width: 300px; top: 1rem; right: 1rem; } .center_message { top: calc(50%); left: calc(50% - 250px); width: 500px; } #notification_window { position: fixed; box-shadow: 0 0 20px 3px rgba(0,0,0,.22); z-index: 2258594000; /*width: 100%; messes up spacing */ } #notification_window::after { content: ''; position: absolute; border: none; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; background-size: 20px 20px; background-repeat: no-repeat; background-position: center; background-image: url('/Cache/71848/CancelDk.svg'); cursor: pointer; } @media screen and (max-width: 500px) /* phone in portrait mode */ { /* on a small screen just go full width with a little spacing around the edges */ .top_large_message, .toast_message, .bottom_large_message { left: 1rem; right: 1rem; } } /* =================================================================== https://gr8.social/v2/Skins/DateAndTimeChooser.css =================================================================== */ .SA .calendar { font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, sans-serif; font-size: 0.9em; /* background-color: #EEE; color: #333; */ border: 1px solid #DDD; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; width: 99.9%; padding: 5px 15px; margin-top:10px; box-sizing: border-box; } .SA .calendar a { text-decoration: none; outline: none; } .SA .calendar_enabler, .SA .calendar_timerow { display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0; width: fit-content; /* remove 99.99% width applied to table elements */ word-break: normal; /* undo Control.css styling which can result in OK breaking to two lines */ } .SA .calendar_timerow SELECT { width: auto; /* remove 99.99% width applied to table elements */ } .SA .calendar .months, .SA .calendar_ok { background-color: #feb902; border: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: #FFF; padding: 0.2em; text-align: center; } .SA a.calendar_ok { padding:3px 15px; } .SA a.calendar_ok:hover, .SA a.calendar_ok:active, .SA a.calendar_ok:focus { color: #FFF; background-color: #b16c00; } .SA .calendar .prev-month, .SA .calendar .next-month { margin-top: 3px; padding: 0; } .SA .calendar .prev-month { float: left; } .SA .calendar .next-month { float: right; } .SA .calendar .current-month { margin: 0 auto; } .SA .calendar .months a { color: #FFF; padding: 0 0.4em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .SA .calendar .months a:hover { } .SA .calendar table { border-collapse: collapse; padding: 0; font-size: 0.8em; width: 100%; } .SA .calendar th { text-align: center; } .SA .calendar td { text-align: right; padding: 1px; width: 14.3%; } .SA .calendar td a { display: block; text-decoration: none; padding: 0.2em; color: #feb902; border: 1px solid #DDD; } .SA .calendar td a:hover, .SA .calendar td.selected a, .SA .calendar td.today a { } .SA .calendar td.available a { background-color: #FFFFFF; color: #feb902; } .SA .calendar td.not_available a { } .SA .calendar td.selected a { color: #FFFFFF; background-color: #feb902; } .SA .calendar td.today a { border-radius: 50%; border-color: #feb902; } .SA .calendar .calendar_time_column { display: inline-block; padding: 0 10px 0 10px; } .SA .calendar div.calendar_timerow { text-align: center; } .SA .calendar_enabler label { margin:0 30px 0 0; } .SA .calendar select, .SA .calendar input { width:auto; max-width: initial; min-width: initial; display:inline-block; background-position: 95% 50%; padding-right:20px; margin:0 5px; } .SA .calendar table td { text-align: center; } /* =================================================================== https://gr8.social/v2/Skins/VideoJs.css =================================================================== */ .video-js .vjs-control-bar { background-color: #2b333f !important; } .hytPlayerWrap { display: inline-block; position: relative; } /* .hytPlayerWrap.vjs-ended::after { content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 120px; background-image: url("/Cache/71848/ReplayButtonDk.svg"); } */ .hytPlayerWrap.vjs-paused:not(.vjs-ended)::after { content:""; position: absolute; top: 0; left: 0; bottom: 30px; right: 0; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 120px; background-image: url("/Cache/71848/PlayButtonAnimatedDk.gif"); } .hytPlayerWrap.muted:not(.vjs-paused):not(.vjs-ended)::after { content:""; position: absolute; top: 0; left: 0; bottom: 30px; right: 0; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: 20px 20px; background-size: 60px; background-image: url("/Cache/71848/UnmuteAnimatedDk.gif"); } .video-js button.vjs-picture-in-picture-control { display:none } .video-js .vjs-big-play-button { display: none !important; } .video-js.vjs-waiting::after { display: none; } .video-js.vjs-seeking:not(.loadeddata) .vjs-loading-spinner { display: none; } .vjs-youtube .vjs-loading-spinner { display: none !important; } /* After video overlay changes */ .vjs-after-video-overlay { display: none; align-items: center; justify-content: center; flex-direction: column; position: absolute; top: 0; left: 0; bottom: 30px; right: 0; background-color: #00000045; } .vjs-ended .vjs-after-video-overlay { display: flex; } .vjs-after-video-overlay .vjs-replay-button { cursor: pointer; width: 90px; height: 60px; margin: 8px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 90px; background-image: url("/Cache/71848/ReplayButtonDk.svg"); order: -1; } .video-js .vjs-flow-button, .video-js .vjs-flow-button:active, .video-js .vjs-flow-button:hover { background: #feb902; } .video-js .vjs-flow-button:hover { background: #FFF !important; color: #feb902 !important; } /* =================================================================== https://gr8.social/v2/Skins/EditGrid.css =================================================================== */ /* span img { pointer-events: none; } */ .editgrid:not(.editgrid_disabled) { /* we must leave space on the right to allow the scrolling of the page */ text-align: left; width: 85%; } .editgrid.editgrid_disabled .GridNode_ShowForEdit { display: none; } .editgrid_selectable:not(.selectable_indicators) tr, .editgrid_draggable, .editgrid_draggable_templated { cursor: pointer; } /* span.drag { position: absolute; opacity: 0.8; cursor: pointer; z-index: -100; } */ /* .editgrid_droptarget { border: 2px dashed #000; } */ .editgrid ul { list-style-type: none; text-align: left; } .editgrid ul li ul { position: relative; padding-left: 40px; } /* headers are white */ .editgrid > .editgrid_header { background: #ffffff; } /* other folders grey .editgrid ul > li > ul li > .editgrid_folder { background: rgba(37,170,225,0.0); }*/ /* files a slightly darker grey .editgrid ul li > .editgrid_file { background: #f0f0f0; }*/ /* selected cells are blue */ .editgrid .editgrid_selecteditem { background: #ffff4e !important; } .editgrid{ margin-top:10px; } .inverted .editgrid{ background: #f0f0f0; border: 1px solid #cecece; } /* .editgrid_draggable .iconsmall{ max-height:16px; } */ .GridNode_SourceItem, .filter_inner > button { display: inline-block; border: 0; border-radius: 4px; background: #f0f0f0; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-top: 3px; margin-right: 8px; font-size: 80%; color: #333; } .GridNode_SourceItem { border-radius: 15px; /* let's put round corners on draggable items to make them look different from buttons */ } /* =================================================================== https://gr8.social/v2/Skins/EditTree.css =================================================================== */ /* span img { pointer-events: none; } */ /* smartphones and touchscreens smaller than a tablet in landscape mode, a laptop or a desktop */ @media (hover: none) and (pointer: coarse) and (max-width: 1120px) { .edittree:not(.edittree_disabled) { /* we must leave space on the right to allow the scrolling of the page */ text-align: left; width: 85%; } } .edittree.edittree_disabled .TreeNode_ShowForEdit { display: none; } .edittree_selectable:not(.selectable_indicators) tr, .edittree:not(.edittree_disabled) .edittree_draggable, .edittree:not(.edittree_disabled) .edittree_draggable_templated { cursor: pointer; } /* span.drag { position: absolute; opacity: 0.8; cursor: pointer; z-index: -100; } */ /* .edittree_droptarget { border: 2px dashed #000; } */ .edittree ul { list-style-type: none; text-align: left; } /* top level folder is white */ .edittree > ul > li > .edittree_folder { background: #ffffff; } /* other folders grey */ .edittree ul > li > ul li > .edittree_folder { background: rgba(37,170,225,0.0); } /* files a slightly darker grey */ .edittree ul li > .edittree_file { background: #f0f0f0; } /* selected folders (and their children) or files are blue */ .edittree ul li > .edittree_selecteditem, .edittree ul li > .edittree_selecteditem + ul, .edittree ul li > .edittree_selecteditem + ul li > div { background: #ffff4e !important; } .edittree ul li ul { position: relative; padding-left: 26px !important; margin: 0; } .edittree > ul > li > .edittree_folder .resource_name { display: inline; padding-left: 0; margin-top: 0; } .edittree > ul > li > .edittree_folder .list_head { border-bottom: 1px solid #cecece !important; } .edittree > ul > li > ul > li:first-of-type .edittree_folder .list_head { border-top: 0 !important; } .edittree{ margin-top:10px; } .inverted .edittree{ background: #f0f0f0; border: 1px solid #cecece; } /* .edittree_draggable .iconsmall{ max-height:16px; } */ .TreeNode_SourceItem, .filter_inner > button { display: inline-block; border: 0; border-radius: 4px; background: #f0f0f0; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-top: 3px; margin-right: 8px; font-size: 80%; color: #333; } .TreeNode_SourceItem { border-radius: 15px; /* let's put round corners on draggable items to make them look different from buttons */ } /* =================================================================== https://gr8.social/v2/Skins/TemplatePreviews.css =================================================================== */ .SA .preview_permalink /* this is actually outside the content_preview div */ { word-break: break-all; } .SA .content_preview_wrapper { margin: 0 auto; /* center the preview table in the parent DIV */ min-width: 500px; /* added to fix wide image causing content to overflow wrapper width */ } .SA .content_preview { text-align: left; /* added to remove the above centering, but I'm not sure this is the best fix in all cases for previews? */ margin: 0 auto; /* center the preview table in the parent DIV */ border: 2px solid; border-radius: 8px; max-width: 500px; } /* .SA .content_preview .preview_body { max-height: 200px; overflow-y: auto; } */ .SA #post_preview { width: 100%; height: 300px; } /* =================================================================== https://gr8.social/v2/Skins/WebSite.css =================================================================== */ @supports (-webkit-overflow-scrolling: touch) /* CSS specific to iOS devices */ { /* this fixes a problem with the GrapesJS editor on iOS devices whereby we can't select items dropped onto the page (see http://gravitydept.com/blog/js-click-event-bubbling-on-ios) */ html * { cursor: pointer; } } html{ width:100%; min-height:100%; overflow-x:hidden; } body.web_page_body, body.landing_page_body, body.layout_editor_page_body { font: 110% 'Gill Sans', 'Droid Sans', 'Calibri', 'Lucida Grande', 'Trebuchet MS', 'Helvetica Neue', 'Arial', sans-serif; /* On iOS we found that the ContentBuilder editing area was getting clipped to the body and the body was only using a portion of the available area near the top. So I added this to force it to use all the available space so we aren't clipping anything. This doesn't seem to bother the website and landing pages. */ min-height: 99%; /* note we also have min-height on the HTML element, use < 100 here to avoid unnecessary scrollbar */ background-color:#f4f4f4; font-size:110%; } /* LM: This code is for fixed header and I implemented that feature at the end part of this file */ /* body.web_page_body { padding-top: 60px; } */ header.website-header:empty, section.website-section:empty, footer.website-footer:empty, div.website-cell:empty, div.website-block:empty, div.media-container:empty, div.text-container:empty{ height: 100px; } /* LM: set default width of Row as 100% */ .SA .website-row { width: 100%; } .SA .website-cell { background-color: white; } .SA .website-section .website-row .website-cell, .SA .website-footer .website-row .website-cell { margin: 1rem; padding: 20px 10px; border-radius: 20px; } /* .SA .website-row.two-col .website-cell{ width: 50%; } .SA .website-row.three-col .website-cell{ width: 33.33%; } .SA .website-row .website-cell:last-of-type{ padding-right: 0; } .SA .block-presentation > .media-container{ width: 34%; } .SA .block-presentation > .text-container{ width: 66%; } */ .SA #header{ padding-left:60px; border-top:4px solid #feb902; border-bottom:0; width:100%; box-sizing:border-box; top:0; left:0; right:0; color:#333333; background:rgba(255,255,255,1); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25); z-index: 100; /* make sure the menu appears over the page content */ } /* the absolute positioning breaks inside the layout editor so we only set it for "real" web pages */ body.web_page_body #header{ position:absolute; } .SA footer{ font-size:0.9em; text-align:center; color:#848484; } .SA footer a{ display:inline-block; color:#848484; margin: 5px 0; } .SA footer a:hover, .SA footer a:active, .SA footer a:focus{ color: #feb902; background:transparent; } .SA footer span{ display:block; font-size:0.9em; margin-top:5px; } .SA .drop_down_menu a{ text-decoration: none; cursor: pointer; color:#000000; } .SA .drop_down_menu a:focus, .SA .drop_down_menu a:hover, .SA .drop_down_menu a:active{ background:transparent; } .SA #page_title{ position:static; /* we need to give the title a width so that if we use a background image logo it will show and we allow some space so it doesn't push the login button off that row */ width: calc(100% - 160px); float:left; height:40px; line-height: 40px; margin: 10px 5px; background-position: 0 50%; background-repeat: no-repeat; background-size:contain; } /* undo some ContentBuilder styling from content.css... */ .SA *, .SA ::before, .SA ::after { border: revert; } /* on web pages the drop down lists and text boxes had small text */ .SA select, .SA input, .SA textarea { font-size: 100% !important; } /* allow clicking on a span to see the title instead of waiting for the hover to show it after a delay */ span[title] { position: relative; cursor: pointer; } span[title]:active:after { display: block; position: absolute; z-index: 10000; content: attr(title); padding: 5px; border: 1px solid #ccc; border-radius: 5px; top: 30px; left: -100px; width: 300px; background: #fff; font-size: medium; font-weight: normal; } /* ======================================================================================================= DRL NOTE: The WebSite.css and LayoutAppContent.css files need to have some consistency with the styling due to a current limitation that the layout editor loads the latter but when those pages are presented we load the former. This block is important to have matching. */ .SA .content_wrapper { position: relative; width: 100%; /* width: 99%; have a little spacing on mobile */ max-width:1100px; margin: 0 auto 0 auto; /* Center content */ /* text-align: center; breaks website pages built with CKEditor *//* center the inline elements inside the wrapper (probably not needed for websites but here to match LayoutAppContent.css) */ /* box-sizing: border-box; */ /* padding:30px 15px; */ } .SA .is-wrapper div.is-section.is-section-navbar { left: 0px; /* otherwise the navigation bar gets shifted to the right due to above max-width */ } @media screen and (min-width: 1120px) /* tablet in landscape mode, laptop or desktop, may not be full screen */ { .SA .content_wrapper.layout_editor { width: 100%; } } .SA .row.clearfix { margin: 0 auto 0 auto; /* center the wrapper */ /* text-align: left; not needed since we removed centering above *//* undo content_wrapper centering */ /* This was added to give a border around ContentBuilder pages but it doesn't look good in ContentBox. box-sizing: border-box; border-left:1px solid #bbb; border-right:1px solid #bbb; */ } /* This was added to give a border around ContentBuilder pages but it doesn't look good in ContentBox. .SA .row.clearfix:first-of-type { margin-top: 5px; /* a little space is prettier * / border-top:1px solid #bbb; } .SA .row.clearfix:last-of-type { /* margin-bottom: 5px; a little space is prettier, but this doesn't seem to work?? * / border-bottom:1px solid #bbb; } */ .SA .row.clearfix:before { /* create an element below this one in the z-order so we can set a background color that will not hide any video or image applied to the attached or any of its children */ content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -10; /* make sure video elements appear above the background */ display: block; /* content.css set this to "table" which prevents showing the background color */ background-color: #fff; } /* these flip alignment on a small screen, used for labels to the left of input fields */ .SA .normally-right-aligned { text-align: right; } .SA .normally-left-aligned { text-align: left; } @media screen and (max-width: 60em) { .SA .normally-right-aligned { text-align: left; } .SA .normally-left-aligned { text-align: right; } } /* ======================================================================================================= */ .SA .webinar_pre_message, .SA .webinar_post_message { font-size:180%; font-weight:400; text-align:center; } /* LM: I already added space, so this will not be needed */ /* .SA section{ margin-bottom:30px; } */ /* DRL This "hack" is added to allow GrapesJS created pages (i.e.