.wf-loading * { /* first things first, we need to hide everything, but bear in mind that this will only take effect once the loading script has taken effect. here we're hiding all content within the once it has the class "wf-loading" */ opacity: 0; } html{ width: 100%; min-height: 100%; margin-top: 0px; margin-left: 0px; background: #FFFFFF; /* For browsers that do not support gradients */ /* background-repeat: no-repeat;*/ /* background: -webkit-linear-gradient(white, #ACACAC 300px); For Safari 5.1 to 6.0 */ /* background: -o-linear-gradient(white, #ACACAC 300px); For Opera 11.1 to 12.0 */ /* background: -moz-linear-gradient(white, #ACACAC 300px); For Firefox 3.6 to 15 */ /* background: linear-gradient(white, #ACACAC 300px); Standard syntax */ } body { width: auto; margin:0 auto; font-size: 16px; font-family: 'Open Sans', sans-serif; font-display: optional; color: #444; min-height: 350px; background: #FFFFFF; /* For browsers that do not support gradients */ /* background-repeat: no-repeat; */ /* background: -webkit-linear-gradient(white, #ACACAC 300px); For Safari 5.1 to 6.0 */ /* background: -o-linear-gradient(white, #ACACAC 300px); For Opera 11.1 to 12.0 */ /* background: -moz-linear-gradient(white, #ACACAC 300px); For Firefox 3.6 to 15 */ /* background: linear-gradient(white, #ACACAC 300px); Standard syntax */ -webkit-text-size-adjust: 100%; /* -ms-overflow-style:none; */ } a { color: #FC4A1A; text-decoration: none; cursor: pointer; } .header{ text-align: center; width: 100%; background: #444; color: #fff; } .header a{ color: #fff; } .controls{ position: relative; margin-bottom: 0px; display: block; width: 100%; text-align: left; height: 60px; line-height: 60px; border-bottom: 0px solid #444; white-space: nowrap; box-sizing: border-box; user-select: none; vertical-align: middle; } .headerlinks{ display: inline-block; position: relative; } .headerlinks a{ display: inline-block; margin-left: 30px; vertical-align: middle; } .headerlinksicon { display: none; margin-left: 30px; vertical-align: middle; margin: 0px; cursor: pointer; } .headerlinks-content { display: inline-block; text-align: left; line-height: normal; white-space: nowrap; } .logo{ display: inline-block; font-family: 'Audiowide'; font-size: 32px; line-height: 32px; margin-left: 20px; text-shadow: 2px 2px #000; color: #fff; vertical-align: middle; margin-bottom: 8px; } .userheader{ text-align: right; position: absolute; right: 0px; top: 0px; display: block; line-height: 60px; height: 60px; padding: 0px; padding-right: 20px; margin: 0px; box-sizing: border-box; vertical-align: middle; } .userheader a{ margin-left: 0px; } .userpic{ width: 40px; height: 40px; border-radius: 50%; padding: 0px; margin: 0px; display: inline; vertical-align: middle; margin-bottom: 4px; } .userdownarrow{ display: inline-block; height: 60px; line-height: 60px; vertical-align: top; font-size: 16px; } .user_login{ font-size: 14px; color: silver; user-select: none; cursor: default; width: 100%; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .bgcolor { background: #444; } .nobgcolor { background: white; } .closebutton{ color: #444; } .arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #FC4A1A; } .downarrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin: 0px; padding: 0px; border-top: 8px solid #FC4A1A; border-left: 8px solid transparent; border-right: 8px solid transparent; } .uparrow { display: inline-block; vertical-align: top; width: 0; height: 0; margin: 0px; padding: 0px; border-bottom: 8px solid #FC4A1A; border-left: 8px solid transparent; border-right: 8px solid transparent; font-size: 0px; } .arrowcontainer{ position: absolute; padding: 0px; text-align: center; background: transparent; width: auto; height: 8px; } .bubbleuparrow, .bubbledownarrow, .bubbleuparrowafter, .bubbledownarrowafter{ /* display: inline-block; width: 0; height: 0; margin: 0px; padding: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; */ bottom: 0%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; } .bubbleuparrow { /* vertical-align: middle; border-top: 8px solid #FC4A1A; */ border-color: rgba(252, 74, 26, 0); border-top-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .bubbleuparrowafter { border-color: rgba(242, 242, 242, 0); border-top-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .bubbledownarrow { /* vertical-align: top; border-bottom: 8px solid #FC4A1A; */ border-color: rgba(252, 74, 26, 0); border-bottom-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .bubbledownarrowafter { /* vertical-align: top; border-bottom: 8px solid #FC4A1A; */ border-color: rgba(242, 242, 242, 0); border-bottom-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .bubbledialog{ position: absolute; z-index: 1000; /* background: #FCEFEC; */ background: #f2f2f2; border: 2px solid #FC4A1A; border-radius: 10px; padding: 10px; box-shadow: 0 0 10px rgba(68,68,68,1); } /* Any scrollable list INSIDE a popup (dropdown .selector, .effectlist, font list, color list, ...) keeps its scroll from chaining out to the page -- an outside scroll is what BubbleDialog's close-on-scroll listens for, so containment here prevents an over-scroll at the list's top/bottom from dismissing the popup. No-op on non-scrolling descendants. */ .bubbledialog * { overscroll-behavior: contain; } /* https://cssarrowplease.com/ */ .downbubbledialog:after, .downbubbledialog:before { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; } .downbubbledialog:after { border-color: rgba(242, 242, 242, 0); border-bottom-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .downbubbledialog:before { border-color: rgba(252, 74, 26, 0); border-bottom-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .upbubbledialog:after, .upbubbledialog:before { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .upbubbledialog:after { border-color: rgba(242, 242, 242, 0); border-top-color: #f2f2f2; border-width: 8px; margin-left: -8px; } .upbubbledialog:before { border-color: rgba(252, 74, 26, 0); border-top-color: #FC4A1A; border-width: 11px; margin-left: -11px; } .bubblecontainer{ text-align: center; font-family: 'Open Sans', sans-serif !important; font-size: 14px; /* background: #f2f2f2; */ display: inline-block; width: auto; height: auto; } .bubblecontainer .part{ margin-bottom: 0px; } .bubblecontainer .inlinepart{ margin-right: 10px; } .bubblecontainer .inlinepart:last-child{ margin-right: 0px; } .selector{ font-family: 'Open Sans', sans-serif !important; font-size: 14px; width: auto; height: auto; /* min-width: 60px; */ max-height: 200px; overflow-y: scroll; padding: 0px; scrollbar-width: thin; } .selector::-webkit-scrollbar { -webkit-appearance: none; } .selector::-webkit-scrollbar:horizontal { height: 8px; } .selector::-webkit-scrollbar:vertical { width: 8px; } .selector::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .selector::-webkit-scrollbar-track { background-color: silver; /* border-radius: 0px; */ } .selectitem{ padding: 2px 0px; padding-right: 18px; padding-left: 10px; width: 100%; color: #444; background: #fff; line-height: normal; cursor: pointer; border: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-sizing: border-box; user-select: none; text-align: left; white-space: nowrap; } .selectitem:hover{ background: #4abdac; /* aqua color */ color: #fff; } .selectheader{ padding: 0px 5px; width: 100%; color: black; line-height: normal; font-weight: bold; background: #444; color: #fff; cursor: not-allowed; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-sizing: border-box; user-select: none; } .selecteditem{ background: #FC4A1A; color: white; } .selecteditem:hover{ background: #FC4A1A; color: white; } .colorbox{ display: inline-block; width: 100%; height: 100%; border: 1px solid silver; box-sizing: border-box; margin-bottom: 0px; margin-right: 0px; } .colorboxbg{ position: relative; display: inline-block; width: 20px; height: 20px; margin-bottom: 0px; margin-right: 0px; background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .colortextbox{ display: inline-block; vertical-align: top; line-height: 18px; font-size: 14px; height: 18px; padding: 0px; margin: 0px; border: 1px solid transparent; margin-right: 4px; } .colortextbox:last-child{ margin-right: 0px; } .searchterm { width: 120px; height: 30px; padding: 5px; margin: 0px; outline: 0px; border: 1px solid #E3E3E3; background: #fff; line-height: 18px !important; vertical-align: bottom; font-size: 14px; font-family: Open Sans, sans-serif; border-radius: 5px; box-sizing: border-box; } .searchterm:hover:enabled { border: 1px solid #FC4A1A; } .searchterm:focus { outline:0; } .searchbutton { height: 30px; padding: 5px; margin: 0px; margin-left: 2px; outline: 0; text-align: center; line-height: 18px !important; font-size: 14px !important; font-family: 'Open Sans', sans-serif !important; background: #444; border: 1px solid #E3E3E3; border-radius: 5px; color: white; vertical-align: bottom; cursor: pointer; user-select: none; -webkit-appearance: none; box-sizing: border-box; } .searchbutton:hover:enabled { /* background-color: #F7B733; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ border: 1px solid #FC4A1A; } .searchbutton:focus { outline:0; } .searchbutton:disabled { color: gray; cursor: auto; } .wideicon{ display: inline-block; color: #fff; background: transparent; border: 2px solid #fff; height: 14px; width: 24px; margin: 0px 3px; box-sizing: border-box; } .squareicon{ display: inline-block; color: #fff; background: transparent; border: 2px solid #fff; height: 14px; width: 14px; margin: 0px 3px; box-sizing: border-box; } .verticon{ display: inline-block; color: #fff; background: transparent; border: 2px solid #fff; height: 14px; width: 8px; margin: 0px 3px; box-sizing: border-box; } .googlesignin { background: url('/images/googlesignin/sprites.png') 0 -93px; background-size: 191px 184px; height: 46px; width: 191px; display: inline-block; /* background-repeat: no-repeat; background-attachment: fixed; background-position:; */ } .googlesignin:disabled { /* background-image: url('/images/googlesignin/btn_google_signin_dark_disabled_web@2x.png'); */ background-position: 0 0; } .googlesignin:focus { /* background-image: url('/images/googlesignin/btn_google_signin_dark_focus_web@2x.png'); */ background-position: 0 -139px; } .googlesignin:active { /* background-image: url('/images/googlesignin/btn_google_signin_dark_pressed_web@2x.png'); */ background-position: 0 -46px; } .pagetitle { font-size: 24px; font-family: 'Open Sans'; font-weight: bold; box-sizing: border-box; } .splash{ color: #444; padding-left: 10px; padding-right: 10px; max-width: 100%; display: block; /* height: 500px; */ min-height: 500px; overflow: visible; margin-bottom: 0px; text-align: center; } .bigsplash{ color: #444; padding-left: 10px; padding-right: 10px; max-width: 100%; display: block; height: 500px; min-height: 500px; overflow: visible; margin-bottom: 0px; text-align: center; } .splashlearnmore{ color: #444; padding: 0px 60px; max-width: 100%; display: inline-block; min-height: 100vh; width: 1280px; margin: 0 auto; margin-bottom: 20px; box-sizing: border-box; } .paddedlearnmore{ color: #444; padding: 0px 70px; max-width: 100%; display: inline-block; width: 1300px; margin: 0 auto; margin-bottom: 20px; box-sizing: border-box; } .splashlearnmoretitle{ color: #444; font-size: 28px; margin-bottom: 20px; font-weight: bold; font-family: 'Poppins'; text-align: center; } .splashlearnmorebyline{ font-size: 24px; } .splashtitle{ font-size: 60px; font-weight: bold; font-family: 'Poppins'; } .splashsection{ padding: 0px; overflow: hidden; margin-top: 120px; } .bigsplashsection{ overflow: hidden; max-width: 100%; width: 1280px; height: 500px; line-height: 500px; display: inline-block; padding: 0px 60px; box-sizing: border-box; background: transparent; color: white; margin-top: 0px; } h1{ font-size: 48px; font-weight: bold; font-family: 'Poppins'; margin: 10px 0px; } h2{ font-size: 36px; font-weight: bold; font-family: 'Poppins'; margin: 10px 0px; } h3{ font-size: 24px; font-weight: bold; font-family: 'Poppins'; margin: 10px 0px; } .splashread{ display: inline-block; margin: 0 auto; margin-top: 90px; text-align: left; font-size: 20px; line-height: 175%; max-width: 800px; } .splashread h1{ margin: 30px 0px; } .splashread h2{ margin: 30px 0px; } .splashread h3{ margin: 30px 0px; } .splashawesome{ display: inline-block; font-size: 24px; font-family: 'Open Sans', sans-serif !important; background: #FC4A1A; border: 1px solid #FC4A1A; border-radius: 3px; color: white; width: 45px; padding: 5px 2px; text-align: center; margin-right: 5px; } .splashbyline{ font-size: 24px; margin-top: 30px; margin-bottom: 30px; line-height: 150%; } .splashbutton{ display: inline-block; background: #FC4A1A; font-size: 24px; padding: 10px 20px; font-family: 'Open Sans', sans-serif !important; border: 1px solid #FC4A1A; border-radius: 3px; color: white; cursor: pointer; user-select: none; -webkit-appearance: none; } .splashbuttonrow{ margin-top: 0px; text-align: center; font-weight: normal; } .splashimgright{ float: right; display: inline-block; text-align: right; box-sizing: border-box; padding: 0px; padding-left: 10px; max-width: 554px; width: calc(50% - 10px); /* height: 324px; line-height: 324px; */ vertical-align: middle; } .bigsplashimgright{ float: right; display: inline-block; text-align: right; box-sizing: border-box; padding: 0px; padding-left: 10px; max-width: 554px; width: calc(50% - 10px); height: 500px; line-height: 500px; vertical-align: middle; } .splashimgleft{ float: left; display: inline-block; text-align: left; box-sizing: border-box; padding: 0px; padding-right: 10px; max-width: 554px; width: calc(50% - 10px); /* height: 324px; line-height: 324px; */ vertical-align: middle; } .splashtblleft{ float: left; font-size: 20px; padding: 0px; padding-right: 10px; padding-top: 10px; box-sizing: border-box; max-width: 554px; height: auto; width: calc(50% - 10px); } .bigsplashtblleft{ float: left; font-size: 20px; padding: 0px; padding-right: 10px; box-sizing: border-box; max-width: 554px; height: 500px; width: calc(50% - 10px); } .splashtblright{ float: right; font-size: 20px; padding: 0px; padding-left: 10px; padding-top: 10px; box-sizing: border-box; max-width: 554px; height: auto; width: calc(50% - 10px); } .splashtbltext{ display: inline-block; text-align: left; width: 100%; line-height: 175%; } .splashtbltext h1{ font-size: 18px; font-weight: bold; margin: 10px 0px; font-family: 'Open Sans'; text-transform: uppercase; color: #444; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .splashtbltext h1::first-line{ font-size: 32px; font-family: 'Poppins'; line-height: 32px; } .splashimg{ /* border: 3px solid #eeeeee;*/ width: 100%; max-width: 100%; box-sizing: border-box; } .splashtexttitle{ font-size: 36px; font-weight: bold; margin-bottom: 10px; font-family: 'Poppins'; } .videorevolver{ display: block; cursor: pointer; border: 0; width: 100%; object-fit: contain; background: transparent; } .revolvervideo{ border-radius: 10px; } .lazy{ background: transparent; } .shadowPlaceHolder{ display: none; width: 1px; height: 1px; } .cropPlaceHolder{ display: none; width: 1px; height: 1px; } .socialcircle { display: table-cell; font-size: 22px; width: 44px; height: 44px; vertical-align: middle; border-radius: 50%; background: #ffffff; border: 1px solid #444; color: #444; text-align: center; white-space: normal; } .socialcircle:hover { background: #FC4A1A; color: #ffffff; border: 1px solid #FC4A1A; } .emptybox{ display: inline-block; background: #ffffff; width: 10px; height: 10px; margin: 0px; border: 1px solid #444; margin-right: 1px; margin-bottom: 2px; /* To account for border in vertical spacing */ vertical-align: middle; } .fillbox{ display: inline-block; background: #444; width: 10px; height: 10px; margin: 0px; border: 1px solid #444; margin-right: 1px; margin-bottom: 2px; /* To account for border in vertical spacing */ vertical-align: middle; } .fillbox:last-child{ margin-right: 0px; } .emptybox:last-child{ margin-right: 0px; } .boxsequence{ width: 100%; } .boxbutton{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; background: #fff; color: #444; margin-right: 4px; vertical-align: middle; font-size: 14px; line-height: 14px; cursor: pointer; width: 65px; height: 55px; padding: 3px; font-family: Open Sans; } .boxbutton:last-child{ margin-right: 0px; } .footerlists{ margin: 0 auto; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: flex-start; width: auto; gap: 50px; padding: 50px; text-align: left; /* width:auto makes this shrink-to-fit, so below ~360px it sized itself to the hard 300px .footerlistcontainer and then added its own padding outside that -- 340px of footer inside a 300px column, which widened the whole document on every page. These two lines only bind when the parent is actually narrower than the content, so wider viewports are untouched: border-box puts the padding inside the cap rather than on top of it, and the cap is what finally gives .footerlistcontainer's max-width:100% something definite to resolve against (against a shrink-to-fit parent it was circular, which is why it never did anything). */ max-width: 100%; box-sizing: border-box; } .footerlistcontainer{ vertical-align: top; display: inline-block; width: 300px; /* margin: 35px; */ text-align: left; } .footerlistheader{ font-family: Poppins; font-weight: bold; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 15px 0px; } .footerlist{ list-style-type: none; list-style-position: outside; padding: 0px; margin: 0px; } .footerlist li{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 15px 0px; } .effectlist{ text-align: left; overflow-y: auto; width: 310px; height: 105px; margin: 0 auto; font-size: 0px; /* background: #fff; */ user-select: none; } .effectlist::-webkit-scrollbar { -webkit-appearance: none; } .effectlist::-webkit-scrollbar:horizontal { height: 8px; } .effectlist::-webkit-scrollbar:vertical { width: 8px; } .effectlist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .effectlist::-webkit-scrollbar-track { background-color: silver; /* border-radius: 0px; */ } .effectcanvas { display: inline-block; background: transparent; vertical-align: middle; margin-right: 0px; margin-bottom: 0px; cursor: pointer; padding: 0px; margin: 2px; /* border: 1px solid transparent; */ outline: 0; } .popupselected{ /* border: 1px solid #FC4A1A; */ background: #FC4A1A; } /* Customize the label (the container) */ .cbcontainer { display: inline-block; position: relative; padding-left: 24px; margin: 0px; cursor: pointer; font-size: 14px; line-height: 14px; height: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .cbcontainer input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 14px; width: 14px; background-color: #fff; border: 1px solid silver; } /* On mouse-over, add a grey background color */ .cbcontainer:hover input ~ .checkmark { /* background-color: silver; */ } /* When the checkbox is checked, add a blue background */ .cbcontainer input:checked ~ .checkmark { background-color: #444; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .cbcontainer input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .cbcontainer .checkmark:after { left: 4px; top: 0px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .toplayer{ margin-top: 20px; box-sizing: border-box; padding: 10px; } .toplayerinfo{ padding-left: 20px; padding-bottom: 5px; width: auto; display: table-cell; vertical-align: bottom; text-align: left; } .bigimagebox{ position: relative; width: 102px; display: table-cell; vertical-align: bottom; text-align: center; } .bigimage{ width: 100px; height: 100px; vertical-align: middle; border: 1px solid silver; border-radius: 50%; } .accountbox{ text-align: left; font-size: 18px; border: 1px solid silver; width: 800px; max-width: 100%; margin: 0 auto; background: #ffffff; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .updatepic{ display: block; width: 100%; position: absolute; top: 100px; text-align: center; } .checkerinspector{ background-color: #e5e5f7; opacity: 0.8; background-image: repeating-linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), repeating-linear-gradient(45deg, #444 25%, #e5e5f7 25%, #e5e5f7 75%, #444 75%, #444); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .checkerboard{ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .tinycheckerboard{ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 2px 2px; background-size: 4px 4px, 4px 4px; } .diagonallines { background-color: #fff; opacity: 1; background: repeating-linear-gradient( 45deg, #444, #444 4px, #fff 4px, #fff 20px ); } .zigzag { background-color: #fff; opacity: 1; background-image: linear-gradient(135deg, #444 25%, transparent 25%), linear-gradient(225deg, #444 25%, transparent 25%), linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(315deg, #444 25%, #fff 25%); background-position: 11px 0, 11px 0, 0 0, 0 0; background-size: 22px 22px; background-repeat: repeat; } .redzigzag { background-color: #fff; opacity: 1; background-image: linear-gradient(135deg, #FC4A1A 25%, transparent 25%), linear-gradient(225deg, #FC4A1A 25%, transparent 25%), linear-gradient(45deg, #FC4A1A 25%, transparent 25%), linear-gradient(315deg, #FC4A1A 25%, #fff 25%); background-position: 11px 0, 11px 0, 0 0, 0 0; background-size: 22px 22px; background-repeat: repeat; } .dots{ background-color: #444; opacity: 1; background-image: radial-gradient(#fff 0.45px, #444 0.45px); background-size: 9px 9px; } .reddots{ background-color: #FC4A1A; opacity: 1; background-image: radial-gradient(#fff 0.45px, #FC4A1A 0.45px); background-size: 9px 9px; } .dropdown { position: relative; display: inline-block; user-select: none; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; right: 10px; top: 55px; padding: 10px; background-color: white; min-width: 126px; box-shadow: 0 0 8px rgba(0,0,0,0.2); z-index: 99; font-size: 14px; width: 150px; text-align: left; line-height: normal; white-space: normal; border-radius: 5px; } .dropdown:hover .dropdown-content { display: block; } /* For mobile no hover */ .mobile-dropdown-content { display: none; position: relative; right: -5px; top: -5px; padding: 10px; background-color: white; min-width: 126px; box-shadow: 0 0 8px rgba(0,0,0,0.2); z-index: 99; font-size: 14px; width: 150px; text-align: left; line-height: normal; white-space: normal; } .inline-dropdown { position: relative; display: inline-block; user-select: none; } /* Dropdown Content (Hidden by Default) */ .inline-dropdown-content { display: none; position: absolute; right: -5px; padding: 10px; background-color: white; min-width: 126px; box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5); z-index: 99; font-size: 14px; width: 126px; text-align: left; line-height: normal; white-space: normal; } .inline-dropdown:hover .inline-dropdown-content { display: block; } .inline-dropdown:hover .editbutton { border: 1px solid #f2f2f2; } .fancy-inline-dropdown { position: relative; display: inline-block; user-select: none; } /* Dropdown Content (Hidden by Default) */ .fancy-inline-dropdown-content { display: none; position: absolute; right: 0px; /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); */ z-index: 99; font-size: 14px; text-align: left; line-height: normal; white-space: normal; } .fancy-inline-dropdown-content-menu{ margin: 0px; border: 3px solid #444; border-radius: 9px; padding: 10px; background: #fff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); } .fancy-inline-dropdown:hover .fancy-inline-dropdown-content { display: block; } .bloglist{ margin: 0 auto; display: block; width: 100%; max-width: 1280px; font-family: Open Sans; text-align: left; padding: 0px; font-size: 24px; box-sizing: border-box; } .blog{ display: inline-block; margin: 10px 10px; padding: 40px; border: 0; box-sizing: border-box; width: calc(100% - 20px); vertical-align: top; background: #f2f2f2; border-radius: 10px; box-shadow: none; color: #000; } .blog:hover{ box-shadow: 1px 1px 10px #444; } .blogimgcont{ display: inline-block; text-align: right; box-sizing: border-box; padding: 0px; padding-right: 20px; width: calc(30% - 20px); max-width: 382px; vertical-align: top; } .blogimg{ width: 100%; height: 100%; object-fit: cover; } .bloginfo{ display: inline-block; width: 70%; text-align: left; vertical-align: top; } .bloginfo h3{ font-size: 20px; font-weight: bold; font-family: 'Poppins'; margin-top: 0px; } .blogtitle{ font-size: 20px; font-weight: bold; font-family: 'Poppins'; } .blogdate{ margin-top: 5px; margin-bottom: 5px; font-size: 12px; text-transform: uppercase; } .blogdesc{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 18px; text-align: left; width: 100%; line-height: 150%; } .project{ display: inline-block; padding: 20px; border: 0; width: 25%; box-sizing: border-box; } .projectimg{ width: 100%; display: block; position: relative; } .projectimg:after{ padding-top: 56.25%; /* 16:9 ratio */ display: block; content: ''; } .projectimgcont{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .projectvid{ vertical-align: middle; width: 100%; display: block; position: relative; } .projectvid:after{ padding-top: 56.25%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .projectvidsq{ vertical-align: middle; width: 100%; display: block; position: relative; } .projectvidsq:after{ padding-top: 100%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .projectvidvert{ vertical-align: middle; width: 100%; display: block; position: relative; } .projectvidvert:after{ padding-top: 177.78%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .projectvidcont{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } input{ font: 400 18px 'Open Sans'; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .logininput { width: 100%; font-size: 18px; font-family: 'Open Sans' !important; padding: 2px; margin-bottom: 3px; margin-left: 0px; margin-right: 0px; margin-top: 0px; background-color: #ffffff !important; border: 1px solid silver !important; -webkit-appearance: none; border-radius: 0; } .logininput:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #ffffff inset; } .logininput:focus { outline:0; border: 1px solid #FC4A1A !important; } .logininput:disabled { color: #C0C0C0; } .loginlabel { font-size: 18px; font-weight: normal; padding: 2px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; display: inline-block; } .usermenu { display: inline-block; font-size: 14px !important; padding: 10px; width: 100%; color: #444 !important; background: white !important; box-sizing: border-box; cursor: pointer; } .usermenu:hover { color: white !important; background: #444 !important; } .addmenu { display: inline-block; font-size: 14px !important; padding: 0px 10px; margin: 0px; width: 100%; color: #444; background: #f2f2f2; box-sizing: border-box; cursor: pointer; text-align: left; line-height: 24px; border: none; white-space: nowrap; } .addmenu:hover:enabled { color: #f2f2f2; background: #444; border: none; } .addmenu:focus { outline: 0; } .addmenu:disabled { cursor: auto; color: #BEBEBE; } .tab{ font-size: 18px; font-family: 'Open Sans', sans-serif !important; background: transparent; border: none; /* border-bottom: 1px solid transparent; */ color: #FC4A1A; cursor: pointer; user-select: none; -webkit-appearance: none; padding-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; margin-right: 20px; } .tab:focus { outline:0; } .tab:disabled { color: #444; background: transparent; border: none; border-bottom: 1px solid #444; cursor: auto; } .atab{ font-size: 18px; font-weight: bold; font-family: 'Open Sans', sans-serif !important; background: transparent; border: none; /* border-bottom: 1px solid transparent; */ color: #FC4A1A; cursor: pointer; user-select: none; -webkit-appearance: none; padding-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; margin-right: 15px; } .atab:focus { outline:0; } .atabdisabled { color: #000; background: transparent; border: none; border-bottom: 1px solid #000; pointer-events: none; cursor: default; } .tabbutton{ font-size: 18px; font-family: 'Open Sans', sans-serif !important; background: #FC4A1A; border: 1px solid #FC4A1A; border-top-right-radius: 5px; border-top-left-radius: 5px; color: white; cursor: pointer; user-select: none; -webkit-appearance: none; } .tabbutton:focus { outline:0; } .tabbutton:disabled { background: #444; border: 1px solid transparent; cursor: auto; } .editnodebutton{ display: inline-block; font-family: 'Open Sans', sans-serif !important; font-size: 14px; text-align: center; background: #fff; padding: 0px 5px; border: 1px solid #E3E3E3; color: #444; border-radius: 5px; vertical-align: middle; outline: 0; margin: 0px; height: 30px; box-sizing: border-box; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-appearance: none; font-weight: normal; /* -webkit-appearance: none; */ } .editnodebutton:hover:enabled { border: 1px solid #FC4A1A; } .nodeeffectdiv{ display: inline-block; font-family: 'Open Sans', sans-serif !important; font-size: 14px; text-align: center; background: transparent; padding: 0px ; color: #444; vertical-align: middle; margin: 0px; height: 30px; line-height: 30px; vertical-align: middle; box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-appearance: none; font-weight: normal; } .actionbutton{ font-size: 16px; font-family: 'Open Sans', sans-serif !important; background: #FC4A1A; padding: 3px 10px; border: 1px solid #FC4A1A; border-radius: 3px; color: white; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-appearance: none; font-weight: bold; text-transform: uppercase; } .actionbutton:hover:enabled { /* background-color: #F7B733; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ border: 1px solid #FFF; } .actionbutton:focus { outline:0; } .actionbutton:disabled { color: #e3e3e3; background: #fff; border: 1px solid #e3e3e3; cursor: auto; } /* Upload trigger in the Uploads tab of the image and video selectors. It shares the tab right-hand slot with the Unsplash/Pixabay sort dropdowns, but unlike those it is the tab primary action, so it carries .actionbutton white-on-#FC4A1A instead of the neutral .selectbutton fill. This class only rescales it -- .actionbutton is 16px and sized for page-level buttons, and this has to sit on the same 30px control row as the dropdowns beside it. position:relative is required: BubbleDialog appends its .bubbledialog popup (position:absolute) into this button. */ /* Uploads grid while files are dragged over it. Outline rather than border so switching it on does not resize the box and reflow the grid underneath. */ /* Empty Uploads tab. This is the only place the drop zone advertises itself: a permanent background behind a full grid of thumbnails would be noise for a hint you need once, and an empty library is exactly when there is nothing else to look at. It renders inside .searchmessage, which supplies the centring and the 450px cap. */ /* Sits in the dead space left of the Upload button. Ellipsised rather than wrapped: it shares a fixed 30px row with the button, so a second line would overlap the grid. */ .drophint{ float: left; max-width: 60%; font-size: 13px; line-height: 30px; color: #a8a29b; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drophint i{ margin-right: 6px; color: #c9c4bd; } .dropinvite{ border: 2px dashed #dcdcdc; border-radius: 8px; padding: 34px 20px; color: #8a837c; font-size: 16px; font-weight: 600; } .dropinvite i{ display: block; font-size: 34px; color: #c9c4bd; margin-bottom: 12px; } .dropinvitesub{ font-size: 14px; font-weight: normal; margin-top: 6px; color: #a8a29b; } .dropactive{ outline: 2px dashed #FC4A1A; outline-offset: -6px; background: #FFF6F3; min-height: 120px; } .uploadbutton{ display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: relative; width: auto; height: 30px; padding: 0px 14px; font-size: 14px; line-height: 20px; border-radius: 5px; box-sizing: border-box; } .inlineactionbutton{ font-size: 18px; line-height: 18px; font-family: 'Open Sans', sans-serif !important; background: #FFF; padding: 5px; border: 1px solid #444; border-radius: 5px; color: #444; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-appearance: none; } .inlineactionbutton:hover:enabled { /* background-color: #F7B733; background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ border: 1px solid #FC4A1A; } .inlineactionbutton:focus { outline:0; } .inlineactionbutton:disabled { color: #e3e3e3; border: 1px solid #e3e3e3; cursor: auto; } .cropbutton{ padding: 5px 0px; font-size: 12px; line-height: 12px; border-radius: 5px; margin: 0px; border: 1px solid #e3e3e3; outline: 0px; cursor: pointer; height: 22px; width: 22px; background: #fff; color: #444 !important; display: inline-block; } .iconbutton{ font-size: 18px; vertical-align: middle; line-height: 24px; margin-left: 3px; margin-right: 3px; width: auto; height: 30px; background: transparent; text-align: left; font-weight: normal; padding: 0px 7px; box-sizing: border-box; font-family: 'Open Sans', sans-serif !important; border: 1px solid transparent; border-radius: 3px; color: #FFF; cursor: pointer; -webkit-appearance: none; user-select: none; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; white-space: nowrap; } .iconbutton:focus { outline:0; } .iconbutton:disabled { color: #888888; cursor: auto; } .editbutton{ display: inline-block; width: auto; font-size: 14px; vertical-align: middle; line-height: 24px; margin: 5px 0px; /* width: 100%; */ background: transparent; text-align: center; font-weight: normal; padding: 3px; box-sizing: border-box; font-family: 'Open Sans', sans-serif !important; border: 1px solid transparent; border-radius: 3px; color: white; cursor: pointer; -webkit-appearance: none; user-select: none; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; white-space: nowrap; } .editbutton:hover:enabled { background: #4ABDAC; /* background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)"; */ /* border: 1px solid #f2f2f2; */ } .editbutton:focus { outline:0; } .editbutton:disabled { color: gray; cursor: auto; } .blackbanner{ width: 100%; font-size: 36px; font-family: Poppins; font-weight: bold; background: #000; color: #fff; padding: 30px; box-sizing: border-box; background-image: linear-gradient(to right, rgb(0,0,0), rgb(68,68,68)); } .gradientbanner{ width: 100%; background: rgb(68,68,68); background: linear-gradient(73deg, rgba(68,68,68,1) 0%, rgba(252,74,26,1) 100%); color: #fff; padding: 40px; box-sizing: border-box; font-size: 36px; font-family: Poppins; font-weight: bold; margin-top: 40px; margin-bottom: 40px; border-radius: 5px; } .infoflex{ display: flex; flex-wrap: wrap; } .infobox{ flex: 1; vertical-align: top; background: #fff; padding: 20px; color: #000; border: 2px solid silver; border-radius: 10px; /* min-width: 300px; */ margin: 20px; box-sizing: border-box; } .greentored{ width: 100%; background: rgb(6,190,182); background: linear-gradient(73deg, rgba(6,190,182,1) 0%, rgba(252,74,26,1) 100%); padding: 40px; box-sizing: border-box; margin: 40px 0px; color: #fff; } .modal { position: fixed; /* Stay in place */ z-index: 10001; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0); /* Black w/ opacity */ } .fixedoverlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001; background-color: rgba(41, 47, 51, 0.5); /*dim the background*/ text-align: center; overflow: auto; display: flex; align-items: center; justify-content: center; } .dialog{ display: inline-block; vertical-align: middle; /* auto (not "0 auto") so a dialog taller than the viewport centres via auto margins yet stays scrollable to its TOP -- .fixedoverlay's align-items:center otherwise clips the top (and the close X) with no way to scroll up to it. */ margin: auto; width: auto; max-width: calc(100% - 10px); /* max-height: calc(100% - 10px); */ padding: 0px; background: #f2f2f2; border-radius: 5px; border: 1px solid #e3e3e3; box-sizing: border-box; z-index: 10001; } .dialogtitlediv{ background: #e3e3e3; color: #444; display: block; padding: 0px; line-height: 30px; height: 30px; font-size: 18px; position: relative; } .dialogtitle { /* padding: 2px; */ /* position: absolute; top: 0px; left: 0px;*/ display: inline-block; width: calc(100% - 50px); vertical-align: top; text-align: center; font-family: 'Audiowide'; font-weight: bold; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; /* margin-bottom: 15px; */ user-select: none; -webkit-user-select: none; margin: 0 auto; } .dialogclosediv{ position: absolute; vertical-align: top; text-align: right; margin-bottom: 0px; top: 0px; right: 10px; } .dialogbuttondiv{ margin-top: 20px; white-space: nowrap; text-align: right; vertical-align: top; } .dialogcontent{ margin-left: 25px; margin-right: 25px; margin-bottom: 25px; margin-top: 25px; box-sizing: border-box; } .dialogresizecontent{ max-height: calc(100vh - 130px); /*40px is for dialogtitle, 20+30 for dialog content padding, 40 for good measure*/ overflow-y: auto; } .dialogresizeheight{ height: calc(100vh - 130px); /*40px is for dialogtitle, 20+30 for dialog content padding, 40 for good measure*/ } .dialogscrollcontainer { /* overflow-y: auto; */ padding: 20px 30px; } .dialogscrollcontainer::-webkit-scrollbar { -webkit-appearance: none; width: 0px; } .dialogscrollcontainer::-webkit-scrollbar:horizontal { height: 0px; background: transparent; } .dialogscrollcontainer::-webkit-scrollbar:vertical { width: 0px; } .dialogscrollcontainer::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .dialogscrollcontainer::-webkit-scrollbar-track { background-color: transparent; border-radius: 0px; } .dialogscrollcontainer::-webkit-scrollbar-corner { background-color: transparent; } .progresslabel { width: 600px; max-width: 100%; padding: 2px; box-sizing: border-box; font-size: 28px; text-align: center; font-family: 'Open Sans'; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #444; user-select: none; } .progressbar { width: 600px; max-width: 100%; height: 20px; background: #ffffff; position: relative; border: 1px solid silver; } .indeterminate{ background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); filter: alpha(opacity=25); opacity: 0.25; } .progressoverlay{ position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; background: silver; } .roundbutton { display: inline-block; height: 30px; width: 30px; border-radius: 50%; -webkit-border-radius: 50%; color: white !important; background: #FC4A1A; border: 1px solid #FC4A1A; font-size: 18px; text-align: center; padding: 0px; cursor: pointer; } .roundbutton:hover { border-color: #FC4A1A; } .roundbutton:focus { outline:0; } .displayslim{ position: relative; display: inline-block; margin-top: 20px; margin-bottom: 20px; /* border: 1px solid silver; */ /* box-shadow: 0px 0px 5px silver; */ width: 800px; height: 450px; } .thumbnail{ display: block; /* background: #eeeeee; max-width: 112px; width: 112px; height: 63px; */ border: 2px solid transparent; margin: 0px; padding: 0px; vertical-align: middle; cursor: pointer; } .thumbarea{ display: inline-block; margin: 0 auto; font-size: 0px; width: 100%; /* max-width: 800px; */ text-align: left; margin-top: 0px; margin-bottom: 0px; overflow-x: hidden; overflow-y: hidden; /* height: 103px; */ background: #eeeeee; /* border: 1px solid silver; */ white-space: nowrap; vertical-align: top; } .addarea{ display: inline-block; width: 65px; height: 65px; box-sizing: border-box; line-height: 65px; margin-top: 5px; margin-left: 10px; margin-right: 10px; color: #FC4A1A !important; /* background: #eeeeee; */ /* height: 99px; */ vertical-align: middle; text-align: center; border: 0px; } .playarea{ display: inline-block; width: 65px; height: 65px; box-sizing: border-box; line-height: 65px; margin-top: 5px; margin-left: 10px; margin-right: 10px; color: #FC4A1A !important; /* background: #eeeeee; */ /* height: 99px; */ vertical-align: middle; text-align: center; border: 0px; } .thumbdiv{ position: relative; display: inline-block; /* width: 112px; */ margin-right: 5px; margin-top: 5px; margin-bottom: 5px; cursor: pointer; } .bigcard { position: relative; display: inline-block; margin: 10px; padding: 0px; box-sizing: border-box; width: calc(25% - 20px); cursor: pointer; color: #ffffff; background-color: transparent; overflow: hidden; vertical-align: bottom; } .middot{ display: inline-block; margin-left: 10px; margin-right: 10px } .templateheaderbg{ background: #eeeeee; background-image:linear-gradient(to right, rgba(6, 190, 182, 0.7), rgba(72, 177, 191, 0.95)), url(https://res.cloudinary.com/slimanimation/image/upload/c_scale,w_1280/v1552496707/splash/eyes.jpg); background-size: cover; background-position: center; width: 100%; } .templateheader{ width: 100%; padding: 50px 50px; box-sizing: border-box; font-size: 0px; } .templateheaderlefthalf{ width: 50%; min-width: 350px; margin: 0px; box-sizing: border-box; vertical-align: top; text-align: left; display: inline-block; color: #fff; font-size: 0px; } .templateheaderrighthalf{ width: 50%; min-width: 350px; margin: 0px; box-sizing: border-box; vertical-align: top; height: 120px; padding-top: 35px; text-align: right; display: inline-block; color: #fff; } .templatefullcont{ width: 100%; padding: 50px 40px; box-sizing: border-box; font-size: 0px; text-align: center; } .templatesearch{ float: right; display: inline-block; width: 180px; padding: 5px 10px; border-radius: 10px; margin: 5px; margin-right: 0px; outline: 0px; border: 1px solid silver; font-size: 18px; line-height: 24px; height: 24px; font-family: Open Sans, sans-serif; vertical-align: bottom; } .ideamenu{ position: relative; display: inline-block; margin: 5px; margin-left: 0px; } .ideamenutitle{ display: inline-block; padding: 5px 10px; border-radius: 0px; outline: 0px; border: 1px solid #444; border-radius: 10px; background: #FC4A1A; color: #fff; font-size: 18px; line-height: 24px; height: 24px; font-family: Open Sans, sans-serif; vertical-align: bottom; cursor: pointer; } .idealist{ display: none; position: absolute; left: 0px; top: 34px; background: white; box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5); z-index: 99; padding: 10px; box-sizing: border-box; text-align: left; margin: 0px; width: 320px; line-height: normal; -webkit-overflow-scrolling: touch; vertical-align: top; user-select: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; } .idealist a{ color: #000; white-space: nowrap; display: inline-block; width: 140px; font-size: 16px; margin: 0px 5px; padding: 5px 10px; cursor: pointer; box-sizing: border-box; z-index: 199; } .idealist a:hover{ color: #FFF; background: #444; } .idea{ background: #eee; margin: 0px; text-align: center; width: 100%; } .ideacontainer{ position: relative; margin:20px; display: inline-block; text-align: left; font-size: 20px; line-height: 175%; max-width: 900px; padding: 40px; background: white; color: #000; border: 1px solid silver; } .ideatitle{ text-align: left; font-size: 32px; font-weight: bold; line-height: 100%; margin-bottom: 10px; font-family: 'Poppins'; } .ideacontent{ text-align: left; font-size: 20px; line-height: 175%; } .ideaclose{ position: absolute; top: 18px; right: 20px; font-size: 20px; line-height: 20px; height: 20px; color: #000; } .startfromscratch{ display: inline-block; vertical-align: middle; background: transparent; font-size: 20px; font-weight: bold; padding: 10px 10px; box-sizing: border-box; line-height: normal; font-family: 'Open Sans', sans-serif !important; border: 1px solid #FFF; border-radius: 10px; color: #FFF; cursor: pointer; user-select: none; -webkit-appearance: none; } .startfromscratch:hover { border: 1px solid #FC4A1A; } .templatelistcont{ margin: 0 auto; margin-top: 0px; text-align: center; width: 100%; /* display: grid; grid-template-columns: auto auto auto auto; */ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; gap: 30px 30px; } .tempcard { display: inline-block; /* place-self: center; */ margin: 0px; padding: 20px; box-sizing: border-box; /* width: calc(25% - 20px); */ color: #000; background-color: #f2f2f2; overflow: hidden; vertical-align: top; border-radius: 5px; /* No border. The #f2f2f2 fill above already separates one card from the next; a silver 1px rule on top of it is a second boundary doing the same job, and at low contrast against that fill it read as noise rather than structure once the grid ran to 417 cards. :hover still lifts the card, so the affordance is unchanged. Removing it leaves 2px of slack (border-box 394 - 40 padding = 354 against a 352 image) which the centred image absorbs. */ border: 0; box-shadow: none; max-width: 100%; width: 394px; } .tempcard .tempcardtitle{ margin: 0px; padding: 0px; margin-top: 10px; text-align: center; font-size: 14px; vertical-align: bottom; font-family: Open Sans; font-weight: normal !important; color: #444; user-select: none; /* 20px, not 28. 28 on a 14px font is double-spaced, and because it is the block's strut it applied to BOTH lines -- the ::first-line rule below asks for 18px and never got it -- so the title and its category floated 56px apart inside a 306px card. 20px is the same ratio the <=820px block further down already uses; that pass tightened the phone and left the desktop behind, which is the only reason this was still here. Two lines now measure 40px and the card is 290px. The 18px ::first-line still fits inside the strut. */ line-height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .tempcard .tempcardtitle::first-line{ text-transform: uppercase; font-size: 18px; font-weight: bold; line-height: 18px; } .tempcard:hover{ box-shadow: 1px 1px 5px #444; } .tempcardcont { position: relative; width: 100%; /* Rounded on the media box rather than on the img, because three things stack in here: .tempimgcont holds the still, .tempvideocont holds the hover clip, and :after paints the loading spinner and supplies the 16:9 height. Rounding the image alone would leave the hover video square-cornered the moment you pointed at a card. overflow:hidden clips all three. 4px matches the related grid on template.php; the card's own 5px sits outside the 20px padding and is a separate edge. */ border-radius: 4px; overflow: hidden; } .tempcardcont:after{ padding-top: 56.25%; /* 16:9 ratio */ display: block; background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%; content: ''; } .temptitle{ text-align: center; text-transform: uppercase; font-size: 18px; font-weight: bold; padding-top: 10px; user-select: none; line-height: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .tempdesctitle{ text-align: center; font-size: 14px; padding-top: 5px; user-select: none; line-height: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .tempbr{ position: absolute; display: inline-block; font-size: 14px; bottom: 5px; right: 5px; padding: 4px; color: #fff; background-color: rgba(68,68,68,0.5); } .tempbl{ position: absolute; display: inline-block; font-size: 14px; bottom: 5px; left: 5px; padding: 4px; margin-right: 4px; color: #fff; background-color: rgba(68,68,68,0.5); } .tempimgcont{ display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .tempimg{ display: block; width: 100%; height: 100%; } .tempvideocont{ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .tempvideo{ display: block; outline: 0; width: 100%; height: 100%; } .templatevideocont{ margin: 0 auto; display: inline-block; width: 100%; height: 100%; max-width: 1280px; width: 100%; padding: 0px 60px; text-align: center; box-sizing: border-box; margin-top: 20px; } .templatevideocrumbs{ text-align: left; font-size: 14px; font-weight: bold; text-transform: uppercase; height: 20px; line-height: 20px; vertical-align: middle; white-space: nowrap; overflow-x: scroll; width: 100%; } .templatevideo{ margin: 20px 0px; display: block; outline: 0; object-fit: contain; width: 100%; min-height: 240px; height: calc(100vh - 200px); max-height: 720px; } .temp{ margin: 0 auto; display: inline-block; width: 100%; text-align: center; box-sizing: border-box; margin-top: 60px; color: #444; } .templeft{ display: inline-block; font-size: 20px; padding: 30px; padding-left: 0px; box-sizing: border-box; max-width: 1280px; width: calc(50% - 30px); min-width: 484px; height: auto; vertical-align: top; line-height: normal; position: relative; } .tempright{ display: inline-block; font-size: 20px; line-height: 175%; padding: 30px; padding-left: 20px; padding-right: 0px; box-sizing: border-box; max-width: 504px; width: calc(50% - 0px); min-width: 352px; height: auto; } .card { position: relative; display: inline-block; margin-left: 10px; margin-top: 10px; padding: 0px; box-sizing: border-box; width: calc(25% - 12.5px); min-width: 50px; cursor: pointer; color: #ffffff; background-color: transparent; overflow: hidden; vertical-align: bottom; } .deselectedcard{ color: transparent; background-color: transparent; } .selectedcard{ color: #FFFFFF; background-color: rgba(252, 74, 26,0.5); } .searchresults { min-height: 200px; width: 100%; height: 100%; overflow-y: scroll; overflow-x: scroll; -webkit-overflow-scrolling: touch; pointer-events: auto; border: 1px solid #E3E3E3; box-sizing: border-box; padding: 0px; user-select: none; } .searchresults::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .searchresults::-webkit-scrollbar:horizontal { height: 0px; background: gray; } .searchresults::-webkit-scrollbar:vertical { width: 11px; } .searchresults::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .searchresults::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .searchresults::-webkit-scrollbar-corner { background-color: silver; } .medialistselector{ width: 100%; display: inline-flex; flex-wrap: wrap; gap: 2.5px; justify-content: flex-start; align-items: flex-start; align-content: flex-start; text-align: left; margin: 0px; padding: 0px; line-height: 0%; vertical-align: top; font-size: 14px; } .medialistselector .mls-thumb{ position: relative; } .mls-thumb.mls-draggable{ transition: box-shadow 0.1s ease; } /* the tile being dragged: lifts off the strip and follows the pointer (transform set inline in JS) */ .mls-thumb.mls-dragging{ opacity: 0.92; z-index: 10; box-shadow: 0 8px 18px rgba(0,0,0,0.4); cursor: grabbing; } /* the tile it will drop onto */ .mls-thumb.mls-drop-target{ outline: 3px solid #fc4a1a; outline-offset: 2px; } .mls-thumb.mls-drop-target::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(252,74,26,0.22); pointer-events: none; } /* "x" to remove a media element (top-right of each tile) */ .mls-remove{ position: absolute; top: 0px; right: 0px; width: 16px; height: 16px; line-height: 15px; text-align: center; font-size: 14px; font-weight: bold; color: #fff; background: rgba(0,0,0,0.55); cursor: pointer; z-index: 2; user-select: none; border-bottom-left-radius: 4px; } .mls-remove:hover{ background: #fc4a1a; } /* "+" tile to add a media element (trails the thumbnails) */ .mls-add{ box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 2px dashed #b8b8b8; border-radius: 4px; background: transparent; color: #b8b8b8; font-size: 30px; font-weight: 300; line-height: normal; cursor: pointer; } .mls-add:hover{ border-color: #fc4a1a; color: #fc4a1a; } .medialistselector::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .medialistselector::-webkit-scrollbar:horizontal { height: 11px; background: gray; } .medialistselector::-webkit-scrollbar:vertical { width: 0px; } .medialistselector::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .medialistselector::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .medialistselector::-webkit-scrollbar-corner { background-color: silver; } .searchmessage{ font-size: 18px; color: #444; margin: 0 auto; text-align: center; max-width: 450px; background: transparent; padding: 10px; box-sizing: border-box; font-weight: bold; } .imgcolcont{ display: block; cursor: pointer; position: relative; overflow: hidden; box-sizing: border-box; /*important*/ border-style: solid; border-color: transparent; border-radius: 8px; } .imgcolcont:hover{ border-color: #FC4A1A; } .imgcolcont img{ display: block; margin: 0px; background: #E3E3E3; } .userdiv{ position: absolute; display: none; bottom: 0px; left: 0px; margin: 0px; padding: 0px; box-sizing: border-box; font-size: 10px; max-width: 90%; } .userdiv a{ color: white; text-decoration: none; background: rgba(0,0,0,.3); padding-left: 3px; padding-right: 3px; box-sizing: border-box; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; vertical-align: bottom; text-align: left; } .helpcontent { text-align: left; font-size: 18px; margin-top: 0px; margin-bottom: 0px; padding: 0px 10px; width: 100%; max-height: calc(75vh - 100px); box-sizing: border-box; min-height: 100px; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; pointer-events: auto; } .helpcontent p{ margin: 10px 0px; } .helpcontent::-webkit-scrollbar { -webkit-appearance: none; width: 3px; } .helpcontent::-webkit-scrollbar:horizontal { height: 0px; background: transparent; } .helpcontent::-webkit-scrollbar:vertical { width: 3px; } .helpcontent::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .helpcontent::-webkit-scrollbar-track { background-color: transparent; border-radius: 0px; } .helpcontent::-webkit-scrollbar-corner { background-color: transparent; } .helpcrumbs{ font-size: 14px; } .helptext{ display: inline-block; width: calc(100% - 40px); max-width: 800px; padding: 20px 80px; margin: 20px 0px; font-size: 18px; line-height: 200%; background: #fff; text-align: left; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 3%); } .morediv{ margin-top: 20px; margin-bottom: 20px; text-align: center; } .spinnerdiv{ position: relative; min-width: 100px; width: 100%; min-height: 100px; } .timeline{ position: relative; font-size: 12px; color: #ffffff; background: transparent; background-image: linear-gradient(to right, #444, #787878, #444); text-align: center; vertical-align: middle; padding: 0px; margin: 0px; } .timelineselect{ background: rgb(74, 189, 172); background-image: none; } .sortable-placeholder { display: inline-block; height: 1px; width: 112px; background: #eeeeee; } .sortable-square-placeholder { display: inline-block; height: 1px; width: 63px; background: #eeeeee; } .thumblist{ display: inline-block; background: #E3E3E3; /* background-image: linear-gradient(#969696, #444 18px); */ width: 100%; text-align: left; margin: 0px; /* margin-top: 5px; */ /* margin-bottom: 20px; */ overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; /* height: 99px; */ /* background: #eeeeee; */ /* border: 1px solid silver; */ white-space: nowrap; vertical-align: top; user-select: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; } .thumblist::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .thumblist::-webkit-scrollbar:horizontal { height: 11px; background: gray; } .thumblist::-webkit-scrollbar:vertical { width: 11px; } .thumblist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .thumblist::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .thumblist::-webkit-scrollbar-corner { background-color: silver; } .backdroplist{ display: inline-block; background: #444; /* background-image: linear-gradient(#969696, #444 18px); */ width: 100%; text-align: left; margin: 0px; /* margin-top: 5px; */ /* margin-bottom: 20px; */ overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; /* height: 99px; */ /* background: #eeeeee; */ /* border: 1px solid silver; */ white-space: nowrap; vertical-align: top; user-select: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; -webkit-touch-callout: none; } .backdroplist::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .backdroplist::-webkit-scrollbar:horizontal { height: 10px; background: gray; } .backdroplist::-webkit-scrollbar:vertical { width: 10px; } .backdroplist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .backdroplist::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .backdroplist::-webkit-scrollbar-corner { background-color: silver; } .thumbinfo { position: absolute; bottom: 0px; left: 5px; /* padding: 5px; */ border-radius: 3px; display: inline-block; /* border: 1px solid white; */ color: #444; text-align: left; font-size: 12px; line-height: 12px; vertical-align: middle; } .thumbfunc{ position: absolute; bottom: 0px; right: 5px; padding: 0px; display: inline-block; color: white; text-align: right; font-size: 14px; line-height: 14px; vertical-align: middle; } .playercontrols { font-size: 14px; font-weight: bold; font-family: Open Sans; width: 100%; height: auto; text-align: center; background-color: rgba(0,0,0,0.5); background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); background: -o-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); background: linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); padding-top: 0px; padding-bottom: 8px; color: white; white-space: nowrap; overflow: hidden; } .captioninput{ font-size: inherit; font-family: Open Sans, Noto Color Emoji; border: 1px solid #E3E3E3; padding: 5px; color: #444; background: white; width: 100%; border-radius: 5px; box-sizing: border-box; } .captioninput:hover:enabled { border: 1px solid #FC4A1A; } .captioninput:focus { outline:0; } .sp-palette span[title="rgb(128, 128, 128)"]{ border: 1px solid #FC4A1A; } .sp-container button { font-family: 'Open Sans', sans-serif !important; background-color: #FC4A1A; border: 1px solid #FC4A1A; border-radius: 3px; background-image: none; color: white; font-size: 14px; line-height: 1; padding: 5px 4px; text-align: center; vertical-align: middle; text-shadow: none; } .sp-container button:hover { background-color: #FC4A1A; border: 1px solid #444; background-image: none; text-shadow: none; } .sp-container button:active { } .sp-cancel { font-size: 14px; color: #FC4A1A !important; margin:0; padding:2px; margin-right: 5px; vertical-align: middle; text-decoration:none; } .sp-cancel:hover { text-decoration: underline; } .sp-replacer { background: #fff; border: 1px solid #E3E3E3; border-radius: 5px; padding: 4px; } .sp-replacer:hover:enabled { border: 1px solid #FC4A1A; } .sp-preview, .sp-alpha, .sp-thumb-el { position:relative; /* background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2) 5px, transparent 5px, transparent 5px); */ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .sp-clear-display { /* background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2) 5px, transparent 5px, transparent 5px); */ background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px; } .sp-clear.sp-clear-display { background-position: 0px 0px, 5px 5px; } .sp-preview{ width: 18px; height: 18px; border: 1px solid silver; } .sp-dd{ font-size: 18px; } .fontbutton{ display: block; width: 100%; border-radius: 0px; text-align: left; margin: 0px; padding: 0px; border: 1px solid #fff; cursor: pointer; background: #fff; height: 27px; outline: 0; } .fontbutton:hover { background: #eee; } .selectedfontbutton{ border: 1px solid #FC4A1A; } .fontimg{ height: 25px; cursor: pointer; /* display: block; */ } .fontbanner{ text-align: center; background: #F8F8F8; color: #888; width: 100%; padding: 0px; padding-top: 4px; padding-bottom: 5px; box-sizing: border-box; font-size: 11px; line-height: 11px; vertical-align: middle; font-weight: bold; margin-bottom: 0px; cursor: not-allowed; } .fontsearch{ display: block; width: 100%; padding: 5px; margin: 0px; margin-top: 0px; margin-bottom: 0px; outline: 0px; border: none; border-bottom: 1px solid #e3e3e3; font-size: 14px; line-height: 30px; height: 30px; box-sizing: border-box; font-family: Open Sans, sans-serif; vertical-align: middle; } .fontsearchcontainer{ display: block; background: #fff; text-align: left; white-space: normal; width: 100%; overflow-y: scroll; height: 180px; /* border-bottom: 1px solid #e3e3e3; */ box-sizing: border-box; font-size: 14px; } .fontsearchcontainer::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .fontsearchcontainer::-webkit-scrollbar:vertical { height: 7px; } .fontsearchcontainer::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid gray; /* should match background, can't be transparent */ background-color: gray; } .fontsearchcontainer::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .fontsearchcontainer::-webkit-scrollbar-corner { background-color: silver; } .selectbutton{ display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; flex-grow: 0; font-size: 14px; background: #ffffff; color: #444; padding: 4px; border: 1px solid #E3E3E3; height: 30px; line-height: 20px; border-radius: 5px; box-sizing: border-box; cursor: pointer; user-select: none; margin: 0px; position: relative; font-family: Open Sans, sans-serif; width: 100%; } .selectbutton:hover{ border-color: #FC4A1A; } .selectbutton:hover:enabled { border-color: #FC4A1A; } .selectbutton:hover:disabled { border-color: #E3E3E3; } .selectbutton:focus { outline:0; } .selectbutton:disabled { color: silver; background: #E3E3E3; cursor: default; } .selecttext{ /* display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; flex-grow: 0; */ flex: 1 1 auto; padding: 0px; width: calc(100% - 14px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 20px; line-height: 20px; vertical-align: top; font-size: 14px; text-align: center; margin-right: 4px; /* line-height: normal; */ } .selectarrow{ flex: 0 1 auto; display: inline-block; padding: 0px; /* height: 20px; line-height: 17px; padding-top: 3px; */ width: 9px; vertical-align: top; /* line-height: normal; */ } .rightmargin{ margin-right: 5px; } .leftmargin{ margin-left: 5px; } .effectrow{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; } .effectindex{ flex: 0 1 auto; width: 50px; } .effecttime{ flex: 0 1 auto; width: 85px; } .effect{ flex: 1 1 auto; width: calc(100% - 145px); } .numberinputcont{ display: inline-block; width: 50px; font-size: 14px; text-align: center; background: #fff; padding: 4px 0px; border: 1px solid #E3E3E3; border-radius: 5px; vertical-align: middle; outline: 0; font-weight: normal; margin: 0px; height: 30px; box-sizing: border-box; position: relative; /* -webkit-appearance: none; */ } .numberinputcont:hover:enabled { border: 1px solid #FC4A1A; } .numberinput{ width: 100%; border: none; font-size: inherit; text-align: center; background: #fff; padding: 0px 0px; box-sizing: border-box; color: #444; height: 20px; line-height: 20px; vertical-align: top; -webkit-appearance: none; } .numberinput:focus { outline:0; } .part{ text-align: left; margin-bottom: 10px; } .inlinepart{ vertical-align: top; display: inline-block; white-space: nowrap; margin-right: 10px; } .paramlabel{ display: inline-block; vertical-align: top; margin-right: 4px; font-weight: bold; color: #333; } .dialogcontent .paramlabel{ display: none; } /* A bubble-button's own inner label (e.g. StrokeSelector's "Stroke:") is redundant when the button sits inside a popup whose columns already carry .banner labels (the object/item selector's OBJECT/FILL/STROKE headers). .dialogcontent .paramlabel used to hide it, but popups now portal to (escaping .dialogcontent) so that rule stopped matching -- mirror it on .bubbledialog. Kept ABOVE .rowcontainer .paramlabel so rowcontainer layouts (shapepanel, getPart(null), no banner) still re-enable their sole label. Only hits labels INSIDE a popup, never a standalone trigger button. */ .bubbledialog .paramlabel{ display: none; } .banner{ font-size: 11px; line-height: normal; font-weight: bold; color: #333; user-select: none; text-transform: uppercase; } .rowcontainer{ display: inline-flex; flex-direction: row; row-gap: 20px; column-gap: 5px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; width: 316px; text-align: left; font-family: Open Sans; font-size: 14px; margin-top: 0px; } .row{ display: flex; flex-wrap: nowrap; align-items: flex-start; align-content: flex-start; justify-content: space-between; width: 100%; text-align: left; margin-bottom: 0px; column-gap: 5px; } .rowcontainer .paramlabel{ display: inline-block; } .rowcontainer .part{ margin-bottom: 0px; } .rowcontainer .inlinepart{ margin-right: 0px; } .rowcontainer .inlinepart:last-child{ margin-right: 0px; } .rowcontainer .banner{ font-size: 14px; text-transform: capitalize; } .animui { width: auto; text-align: center; background: #fff; display: none; margin: 40px 0px; padding: 30px; box-shadow: 5px 5px 20px #555; border-radius: 10px; } .animui h1{ margin: 0px; margin-bottom: 20px; line-height: 100%; } .animuicontrols { width: 320px; display: inline-flex; flex-wrap: wrap; gap: 20px 20px; padding: 20px; margin: 0px; margin-left: 20px; background: #fff; border-radius: 10px; border: 1px solid silver; vertical-align: middle; text-align: left; font-size: 18px; max-height: 460px; /* ~= the preview's 480px max (animationdialog.js), so the panel matches the preview height and a taller control list scrolls instead of growing the modal */ overflow-y: auto; /* dropdowns portal to (see bubbledialog.js), so this scroll container never clips them */ overflow-x: hidden; /* box-shadow: 2px 2px 5px #777; */ } .animuicontrolsrow { width: 100%; display: inline-flex; flex-wrap: wrap; gap: 20px 20px; padding: 0px; margin: 0px; vertical-align: middle; text-align: left; font-size: 18px; } .animuicontrols .part{ margin-right: 0px; margin-bottom: 0px; } .animuicontrols .banner{ /* font-size: 14px; */ } .animuicontrols .selectbutton{ /* border: 1px solid transparent; */ } .animuicontrols .actionbutton{ font-size: 14px; } .animplayer{ display: inline-block; vertical-align: middle; padding: 0px; } .lightborder{ background: #fff; border: 1px solid #E3E3E3; border-radius: 5px; -webkit-appearance: none; } .lightborder:hover:enabled { border: 1px solid #FC4A1A; } .lightborder:focus { outline:0; } .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .inputfile + label { /* padding: 5px; height: 30px; margin: 0px; color: white; background-color: #444; border: 1px solid #E3E3E3; font-size: 14px; line-height: 18px !important; display: inline-block; width: auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: left; vertical-align: bottom; border-radius: 5px; box-sizing: border-box; -webkit-appearance: none; user-select: none; */ } .inputfile:focus + label, .inputfile + label:hover { /* border: 1px solid #FC4A1A; */ } .inputfile + label { cursor: pointer; /* "hand" cursor */ } .inputfile:focus + label { /* outline: 1px dotted #FC4A1A; */ /* outline: -webkit-focus-ring-color auto 5px; */ outline: 0; } .inputfile:focus + label, .inputfile.has-focus + label { /* outline: 1px dotted #000; */ /* outline: -webkit-focus-ring-color auto 5px; */ outline: 0; } .slideoptions{ position: absolute; z-index: 5000; font-family: 'Open Sans', sans-serif !important; font-size: 18px; background: transparent; width: 121px; height: auto; overflow: none; padding: 0px; margin: 0px; box-sizing: border-box; } .slidelist{ background: white; width: 100%; height: auto; overflow: none; padding: 0px; border: 3px solid #FC4A1A; border-radius: 3px; box-sizing: border-box; display: inline-block; } .slidelist:after { content:''; position: absolute; top: 100%; left: 50%; margin-left: -10px; width: 0; height: 0; border-top: solid 10px #FC4A1A; border-left: solid 10px transparent; border-right: solid 10px transparent; } .slideitem{ padding: 10px; width: 100%; color: #444; line-height: 150%; cursor: pointer; box-sizing: border-box; } .slideitem:hover{ background: #eeeeee; } .croplist{ float: left; display: inline-block; border: 1px solid silver; height: 385px; width: 210px; font-size: 24px; font-family: 'Open Sans'; text-align: center; color: #FC4A1A; overflow-y: scroll; margin: 0 auto; } .croplist::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } .croplist::-webkit-scrollbar:vertical { height: 11px; } .croplist::-webkit-scrollbar-thumb { border-radius: 0px; border: 1px solid white; /* should match background, can't be transparent */ background-color: gray; } .croplist::-webkit-scrollbar-track { background-color: silver; border-radius: 0px; } .croplist::-webkit-scrollbar-corner { background-color: silver; } @media only screen and (max-width: 1400px) { /* .tempcard{ width: calc(33.33% - 20px); } */ } @media only screen and (max-width: 1150px) { .splashtitle{ font-size: 50px; } h1{ font-size: 40px; } h2{ font-size: 32px; } h3{ font-size: 24px; } .splashbyline{ font-size: 22px; } .splashbutton{ font-size: 22px; } } @media only screen and (max-width: 1088px) { .templeft{ max-width: 100%; width: 100%; padding: 0px; padding-bottom: 30px; min-width: 352px; } .tempright{ max-width: 770px; width: 100%; padding: 0px; padding-bottom: 30px; min-width: 352px; } .templateheader{ padding: 50px 20px; } .templatefullcont{ padding: 50px 10px; } .splashlearnmore{ padding: 0px 20px; } .paddedlearnmore{ padding: 0px 20px; } .infobox{ flex: 100%; } } @media only screen and (max-width: 960px) { .splashtitle{ font-size: 38px; } h1{ font-size: 38px; } h2{ font-size: 30px; } h3{ font-size: 22px; } .splashbyline{ font-size: 20px; } .splashbutton{ font-size: 20px; } .splashbuttonrow{ margin-bottom: 20px; } .splashsection{ margin-top: 80px; } .splashtblleft{ float: none; max-width: 100%; height: auto; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashtblright{ float: none; height: auto; max-width: 100%; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashimgright{ display: block; width: 100%; /* max-width: 100%; */ text-align: left; height: auto; float: none; padding-left: 0px; margin: 0 auto; } .splashimgleft{ display: block; width: 100%; /* max-width: 100%; */ text-align: left; height: auto; float: none; padding-right: 0px; margin: 0 auto; } /* .tempcard{ width: calc(50% - 20px); } */ } @media only screen and (max-width: 930px) { .blogimgcont{ width: calc(40% - 10px); } .bloginfo{ width: 60%; } } @media only screen and (max-width: 800px) { .headerlinksicon { display: inline-block; margin-left: 20px; font-size: 30px; } .headerlinks a{ display: inline-block; width: 100%; margin: 0px; padding: 10px; vertical-align: middle; background: white; color: #444; box-sizing: border-box; white-space: nowrap; text-transform: uppercase; } .headerlinks a:hover { color: white !important; background: #444 !important; } .headerlinks a:active { color: white !important; background: #444 !important; } .headerlinks-content { display: none; position: absolute; right: -10px; left: auto; width: 250px; top: 50px; padding: 10px; background: white; color: #444; box-shadow: 0 0 8px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5); z-index: 99; font-size: 14px; max-width: calc(100vw - 20px); overflow: hidden; text-align: left; line-height: normal; white-space: normal; border-radius: 5px; } .headerlinks:hover .headerlinks-content { display: inline-block; } .splashlearnmore{ padding: 0px 10px; } .paddedlearnmore{ padding: 0px 10px; } } @media only screen and (max-width: 745px) { .templateheaderrighthalf{ padding-left: 120px; box-sizing: border-box; height: auto; margin-top: 10px; padding-top: 0px; text-align: left; } } @media only screen and (max-width: 700px) { .bloglist{ text-align: center; } .blog{ display: inline-block; width: 350px; max-width: 100%; margin: 10px 0px; padding: 20px; text-align: center; } /* Same shape as the .footerlists bug: a hard px width with nothing to cap it. .blog is border-box 350px/max-width:100%, so at 320px its content box is 260px -- but these two stayed 310px and pushed 20px of every blog card past the right edge, widening the page. max-width:100% costs nothing above 350px, where 310px is already the smaller value. */ .blogimgcont{ width: 310px; max-width: 100%; padding-right: 0px; } .bloginfo{ margin-top: 10px; width: 310px; max-width: 100%; } .bloginfo h3{ font-size: 18px; margin-top: 0px; } .blogtitle{ font-size: 18px; } .blogdesc{ font-size: 14px; } } @media only screen and (max-width: 550px) { /* .tempcard{ margin-right: 10px; margin-left: 10px; } */ } @media only screen and (max-device-width: 820px) { body { width: 100%; margin-left: 0px; margin-right: 0px; -webkit-text-size-adjust: 100%; } .page { width: 100%; max-width: 100%; margin:0 auto; padding: 0px; text-align: center; position: relative; /* min-height: 100%;*/ } .content { margin: 0px; min-width: 0px; width: 100%; padding: 5px; background: white; border-radius: 0px; border: 2px solid #FC4A1A; box-shadow: none; box-sizing: border-box; } .greentored{ padding: 10px; margin: 10px 0px; } .infobox{ margin: 5px; } .splash{ /* height: calc(100vh - 150px);*/ /* min-height: 350px; */ } .bigsplash{ height: auto; min-height: none; } .splashlearnmore{ padding: 10px; } .paddedlearnmore{ padding: 10px; } .splashlearnmoretitle{ font-size: 20px; } .splashlearnmorebyline{ font-size: 20px; } .templatevideocont{ padding: 0px 5px; } .gradientbanner{ padding: 10px; font-size: 18px; margin-top: 20px; margin-bottom: 20px; } .splashtitle{ font-size: 38px; } .splashsection{ margin-top: 50px; } .bigsplashsection{ padding: 40px 10px; } h1{ font-size: 32px; } h2{ font-size: 28px; } h3{ font-size: 24px; } .splashbyline{ font-size: 20px; } .splashbutton{ font-size: 20px; } .splashimgright{ width: 100%; /* max-width: 100%; */ height: auto; line-height: normal; float: none; padding-left: 0px; margin: 0 auto; } .bigsplashimgright{ width: 100%; max-width: 100%; height: auto; line-height: normal; float: none; padding-left: 0px; margin: 0 auto; } .splashimgleft{ width: 100%; /* max-width: 100%; */ height: auto; line-height: normal; float: none; padding-right: 0px; margin: 0 auto; } .splashtblleft{ float: none; line-height: normal; /* max-width: 100%; */ height: auto; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .bigsplashtblleft{ float: none; line-height: normal; /* max-width: 100%; */ height: auto; width: 100%; padding: 0px; padding-right: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashtblright{ float: none; line-height: normal; /* max-width: 100%; */ height: auto; width: 100%; padding: 0px; padding-left: 0px; padding-bottom: 10px; box-sizing: border-box; margin: 0 auto; } .splashtexttitle{ font-size: 28px; } .splashtbltext h1{ font-size: 18px; font-weight: bold; margin: 10px 0px; font-family: 'Open Sans'; text-transform: uppercase; color: #444; line-height: 28px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .splashtbltext h1::first-line{ font-size: 28px; font-family: 'Poppins'; line-height: 28px; } .splashtbltext h2{ margin-bottom: 10px; } .tab{ font-size: 14px; margin-right: 0px; } .searchterm { width: 90px; } .inputfile + label { font-size: 14px; padding: 5px 5px; } .dialog{ max-width: calc(100% - 10px); } .dialogcontent{ background: #f2f2f2; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; } .dialogresizecontent{ max-height: 75vh; /*This may be a safer option as window size is not fixed on mobile*/ overflow-y: auto; } .dialogresizeheight{ height: 75vh; /*This may be a safer option as window size is not fixed on mobile*/ } .dialogscrollcontainer { padding: 10px 10px; } .progresslabel { max-width: 100%; padding: 2px; font-size: 20px; text-align: center; font-family: 'Open Sans'; white-space: nowrap; user-select: none; } .progressbar { max-width: 100%; height: 20px; } .displayslim{ position: relative; display: inline-block; margin-top: 20px; margin-bottom: 20px; /* border: 1px solid silver; */ /* box-shadow: 0px 0px 5px silver; */ width: auto; height: auto; } .bigcard { width: calc(100% - 40px); max-width: 352px; margin: 20px; box-sizing: border-box; } .card { width: calc(100% - 10px); margin: 5px; } .searchresults::-webkit-scrollbar:vertical { width: 0px; } .helpcontent { font-size: 14px; max-height: calc(75vh - 120px); } .helpcrumbs{ font-size: 14px; } .helptext{ padding: 10px 10px; margin: 10px 0px; } .project{ display: inline-block; padding: 20px 10px; border: 0; width: 100%; max-width: 372px; box-sizing: border-box; } /* .tempcard{ margin-left: 0px; margin-right: 0px; box-sizing: border-box; } */ .templatesearch{ font-size: 16px; line-height: 22px; height: 22px; } .rowcontainer{ row-gap: 10px; } .animui { margin: 5px; padding: 5px; box-shadow: none; border-radius: none; } .animui h1{ font-size: 24px; margin: 0px 0px; margin-bottom: 10px; } .animuicontent { /* !important: animationdialog.js sets an inline display:inline-block on this element, which would otherwise beat these rules. */ display: flex !important; flex-direction: column-reverse !important; /* controls (2nd child in DOM) sit ABOVE the preview on mobile, so a control's popup opens DOWNWARD into the canvas area with room, instead of flipping up over the other controls / into the keyboard */ align-items: center !important; } .animuicontrols { /* On a phone the container is viewport-constrained (~343px on a 375px screen). The desktop 320px + 40px padding is a 360px+ CONTENT-box that overflows that container and runs edge-to-edge. Fit it: fill the container with the padding INSIDE the width (border-box), capped so it doesn't stretch huge on a tablet. */ width: 100%; max-width: 360px; box-sizing: border-box; margin: 0px; margin-left: 0px; margin-top: 10px; padding: 20px; gap: 10px 20px; box-shadow: none; max-height: 40vh; /* tighter than desktop: stacked layout subtracts controlsHeight from the preview, so keep the panel short and let it scroll (animationdialog.js:63) */ } .animplayer{ display: inline-block; vertical-align: middle; padding: 0px; } } /* ── Create dropdown — desktop ────────────────────────────────────────────── */ .create-dropdown { position: relative; display: inline-block; vertical-align: middle; } /* Explicitly show the trigger link on desktop */ .create-dropdown > a:first-child { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } .create-dropdown > a::after { content: ''; display: inline-block; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .8; } .create-menu { display: none; position: absolute; top: 100%; margin-top: 0; left: 50%; transform: translateX(-50%); background: transparent; min-width: 250px; z-index: 9999; padding-top: 10px; /* transparent hover bridge — keeps mouse connected */ } .create-menu-inner { background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.15); padding: 8px; } .create-menu-inner::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; } .create-menu-inner { position: relative; } .create-dropdown:hover .create-menu, .create-dropdown:focus-within .create-menu { display: block; } .create-menu a { display: flex !important; align-items: center; gap: 10px; width: 100% !important; padding: 9px 12px !important; margin: 0 !important; border-radius: 6px; font-size: 14px !important; color: #333 !important; background: transparent !important; text-decoration: none; white-space: nowrap; box-sizing: border-box; text-transform: none !important; line-height: normal !important; transition: background .15s; } .create-menu a + a { margin-top: 2px !important; } .create-menu a:hover { background: #f0fafc !important; color: #1a6b7a !important; } .create-menu .menu-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; line-height: 1; } .create-menu .menu-text { flex: 1; min-width: 0; } .create-menu .menu-text strong { display: block; font-size: 13px; font-weight: 700; color: #222; line-height: 1.3; } .create-menu .menu-text span { display: block; font-size: 11px; color: #888; margin-top: 2px; line-height: 1.3; } .create-menu .menu-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: linear-gradient(135deg, #7c3aed, #3b82f6); color: #fff; letter-spacing: .3px; } /* ── Create dropdown — mobile (≤800px matches existing nav breakpoint) ─────── */ @media only screen and (max-width: 800px) { /* Hide the Create trigger entirely on mobile */ .create-dropdown > a:first-child { display: none !important; } .create-dropdown > a::after { display: none; } /* Wrapper: full width, static, no overflow */ .create-dropdown { display: block !important; position: static !important; width: 100% !important; } /* Menu panel: static, no box, no transform, no min-width */ .create-menu { display: block !important; position: static !important; -webkit-transform: none !important; transform: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: 100% !important; } .create-menu::before { display: none !important; } /* Each link: plain block, matches existing .headerlinks a on mobile exactly */ .create-menu a { display: block !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 10px !important; border-radius: 0 !important; background: white !important; color: #444 !important; font-size: 14px !important; font-weight: normal !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* Kill the flex layout from desktop */ -webkit-flex-direction: row !important; flex-direction: row !important; -webkit-align-items: center !important; align-items: center !important; gap: 8px !important; } .create-menu a + a { margin-top: 0 !important; } .create-menu a:hover, .create-menu a:active { color: white !important; background: #444 !important; } .create-menu .menu-text strong { display: inline; font-size: 14px; font-weight: normal; } .create-menu .menu-text span { display: none; } .create-menu .menu-icon { display: inline; margin-right: 6px; } .create-menu .menu-badge { display: inline-block; margin-left: 6px; vertical-align: middle; font-size: 9px; padding: 1px 5px; } } /* Below 720px a 300px footer column inside 50px of padding needs 400px, which is wider than a phone -- that was the sideways scroll on every page. Desktop is untouched. */ @media only screen and (max-width: 720px){ .footerlists{padding:40px 20px;gap:30px;} .footerlistcontainer{max-width:100%;} } /* The card title. mov.css sets 14px with 28px leading, which is nearly double-spaced and made every card taller than its content once the listing went to two cards per row on a phone. Lives here rather than being overridden on templates.php and template.php separately -- .tempcard is one component and both pages render it. */ @media only screen and (max-width: 820px){ /* 18px, not 20. Desktop is 14px on 20px leading (1.43); 12px on 20px here was 1.67, looser than the larger type above it, which is backwards. This block was written while desktop was still 28px and 20 looked tight by comparison. Two lines now measure 36px. */ .tempcard .tempcardtitle{font-size:12px;line-height:18px;} .tempcard .tempcardtitle::first-line{font-size:14px;line-height:18px;} } /* =========================================================================== Template listing and browse facets -- /templates/ and /templates// --------------------------------------------------------------------------- Moved here from the