/*@charset "UTF-8";*/ /** * This file is intended to define MediaFire's core theme. * Any site-wide styling for elements, including legacy and template system, should live * here so that they can be adjusted easily in the future (excluding React/app sections of site). * This could include colors, fonts and text styling, media queries and more. * * MediaFire style guide: https://projects.invisionapp.com/boards/7K11KG743Z8GA/ */ /* ========================================================================== Define root styles ========================================================================== */ :root { --mf-blue1: #000A27; --mf-blue2: #002369; /* Used as background for content sections (Ex.: homepage), text link hover */ --mf-blue3: #0045AD; /* Used as background for main header */ --mf-blue4: #0070F0; /* Base blue: headings and main UI elements like buttons and text links */ --mf-blue5: #479DF4; --mf-blue6: #8FC7F8; --mf-blue7: #D6ECFD; --mf-blue8: #F5FAFF; --mf-green1: #082118; --mf-green2: #165A3A; --mf-green3: #259355; --mf-green4: #33CC66; /* Base green: CTAs, status, decorative. Use together with Gray2 or darker */ --mf-green5: #6CDA8E; --mf-green6: #A5E9B7; --mf-green7: #DEF7E4; --mf-green8: #F7FDF8; --mf-gold1: #291F01; --mf-gold2: #705403; --mf-gold3: #B88A05; --mf-gold4: #FFBF07; /* Base gold: warning status and UI. Use together with Gray2 or darker */ --mf-gold5: #FFD14C; --mf-gold6: #FFE392; --mf-gold7: #FFF5D7; --mf-gold8: #FFFCF5; --mf-red1: #27100B; --mf-red2: #692B1D; --mf-red3: #AD4730; --mf-red4: #F06242; /* Base red: danger status and UI. Use together with Gray2 or darker */ --mf-red5: #F48E77; --mf-red6: #F8BAAC; --mf-red7: #FDE6E1; --mf-red8: #FFF9F7; --mf-black: #0E1116; --mf-gray1: #1A1E28; --mf-gray2: #222835; /* Base gray: default body text color, backgrounds */ --mf-gray3: #3D424E; --mf-gray4: #575B65; --mf-gray5: #72767E; /* Use for lighter text on white background. This is the lightest value text can be */ --mf-gray6: #8C8F96; --mf-gray7: #A7A9AE; --mf-gray8: #C1C3C7; --mf-gray9: #DADEE0; --mf-gray10: #E9EAEB; --mf-gray11: #F4F4F5; /* Background shading for content boxes, dividers */ --mf-gray12: #F6F6F7; --mf-gray13: #F9F9F9; } /*@charset "UTF-8";*/ /* CSS Document */ /* MediaFire Master Stylesheet, Ver. 4 */ /*-------------------------------------------------------------------- GLOBAL CSS global.css.php ---------------------------------------------------------------------- CONCATENATED FILE, PART OF: /css/mfv4_(build number).php?ver=nonssl&date=(build date) ---------------------------------------------------------------------- CASCADE ORDER: --> /store/lrdistro/c/w/content/css/global.css.php /store/lrdistro/c/w/content/css/utility.css.php /store/lrdistro/c/w/content/css/layout.css.php /store/lrdistro/c/w/content/css/header.css.php /store/lrdistro/c/w/content/css/footer.css.php [ section dependent css, not part of mfv4 file ] --------------------------------------------------------------------*/ /* ========================================================================== Resets ========================================================================== */ /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; } body { } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } .show-focus-outlines :focus { outline: 0; box-shadow: inset 0 0 0 2px hsla(0,0%,100%,0.9), 0 0 0 2px #002369; box-shadow: inset 0 0 0 2px hsla(0,0%,100%,0.9), 0 0 0 2px var(--mf-blue2); border-radius: 4px; z-index: 1; opacity: 1; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } ::-moz-focus-inner { border: 0; } /* ========================================================================== Basic global styles ========================================================================== */ html { min-width: 0px; height: 100%; background: #fff; font: normal normal normal 14px/1.6 'Open Sans', sans-serif; -webkit-text-size-adjust: none; } body { top: 0 !important; /* override position change from Google Translate */ min-width: 940px; height: 100%; background: #fff; color: #222835; color: var(--mf-gray2); } body.signUp { overflow-y: scroll; } body.mobileDocPreview { min-width: 0; } body.lightbox { overflow: hidden; } body.windows.lightbox, body.linux.lightbox, .widows.lightbox .viewtabs_bar, .linux.lightbox .viewtabs_bar, .widows.lightbox #myfiles_controlbar_wrap, .linux.lightbox #myfiles_controlbar_wrap, .widows.lightbox #header, .linux.lightbox #header { padding-right:20px; } .display, .h1, .h2, .h3, .h4, .h5, .h6, .h7 { font-weight: normal !important; margin-bottom: 1rem !important; } .display, .h1, .h2, .h3 { line-height: 1.4 !important; } .h4, .h5 { line-height: 1.5 !important; } .h6, .h7 { line-height: 1.6 !important; } .display { font-size: 3.5rem !important; } /* 49px / 68.6px */ .h1 { font-size: 2.9rem !important; } /* 40.6px / 56.8px */ .h2 { font-size: 2.3rem !important; } /* 32.2px / 45.1px */ .h3 { font-size: 1.9rem !important; } /* 26.6px / 37.2px */ .h4 { font-size: 1.6rem !important; } /* 22.4px / 33.6px */ .h5 { font-size: 1.3rem !important; } /* 18.2px / 27.3px */ .h6 { font-size: 1.18rem !important; } /* 16.5px / 26.4px */ .h7 { font-size: 1rem !important; } /* 14px / 22.4px */ .text-xxxl { font-size: 1.5rem !important; } /* 21px / 33.6px */ .text-xxl { font-size: 1.3rem !important; } /* 18.2px / 29.1px */ .text-xl { font-size: 1.18rem !important; } /* 16.5px / 26.4px */ .text-large { font-size: 1.07rem !important; } /* 15px / 24px */ .text-normal { font-size: 1rem !important; } /* 14px / 22.4px */ .text-small { font-size: .93rem !important; } /* 13px / 20.8px */ .text-xs { font-size: .86rem !important; } /* 12px / 19.2px */ .text-sub { font-size: .79rem !important; } /* 11px / 17.7px */ .font-weight-normal { font-weight: normal !important; } .font-weight-bold { font-weight: bold !important; } .text-center { text-align: center !important; } .text-transform-uppercase { text-transform: uppercase; } .text-transform-none { text-transform: none; } a { color: #0070F0; color: var(--mf-blue4); text-decoration: none; } a:hover { color: #002369; color: var(--mf-blue2); } ::selection, -moz-selection { background: rgba(0, 160, 250, 0.5); color: white; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .5rem !important; } .mt-2 { margin-top: 1rem !important; } .mt-3 { margin-top: 1.5rem !important; } .mt-4 { margin-top: 2rem !important; } .mt-5 { margin-top: 2.5rem !important; } .mt-6 { margin-top: 3rem !important; } .mt-7 { margin-top: 3.5rem !important; } .mt-8 { margin-top: 4rem !important; } .mt-9 { margin-top: 4.5rem !important; } .mt-10 { margin-top: 5rem !important; } .mt-auto { margin-top: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .5rem !important; } .mb-2 { margin-bottom: 1rem !important; } .mb-3 { margin-bottom: 1.5rem !important; } .mb-4 { margin-bottom: 2rem !important; } .mb-5 { margin-bottom: 2.5rem !important; } .mb-6 { margin-bottom: 3rem !important; } .mb-7 { margin-bottom: 3.5rem !important; } .mb-8 { margin-bottom: 4rem !important; } .mb-9 { margin-bottom: 4.5rem !important; } .mb-10 { margin-bottom: 5rem !important; } .mb-auto { margin-bottom: auto !important; } .ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: .5rem !important; } .ml-2 { margin-left: 1rem !important; } .ml-3 { margin-left: 1.5rem !important; } .ml-4 { margin-left: 2rem !important; } .ml-5 { margin-left: 2.5rem !important; } .ml-6 { margin-left: 3rem !important; } .ml-7 { margin-left: 3.5rem !important; } .ml-8 { margin-left: 4rem !important; } .ml-9 { margin-left: 4.5rem !important; } .ml-10 { margin-left: 5rem !important; } .ml-auto { margin-left: auto !important; } .mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: .5rem !important; } .mr-2 { margin-right: 1rem !important; } .mr-3 { margin-right: 1.5rem !important; } .mr-4 { margin-right: 2rem !important; } .mr-5 { margin-right: 2.5rem !important; } .mr-6 { margin-right: 3rem !important; } .mr-7 { margin-right: 3.5rem !important; } .mr-8 { margin-right: 4rem !important; } .mr-9 { margin-right: 4.5rem !important; } .mr-10 { margin-right: 5rem !important; } .mr-auto { margin-right: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .my-2 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-3 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-4 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .my-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-7 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; } .my-8 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .my-9 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; } .my-10 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-left: .5rem !important; margin-right: .5rem !important; } .mx-2 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-3 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-4 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-5 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } .mx-6 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-7 { margin-left: 3.5rem !important; margin-right: 3.5rem !important; } .mx-8 { margin-left: 4rem !important; margin-right: 4rem !important; } .mx-9 { margin-left: 4.5rem !important; margin-right: 4.5rem !important; } .mx-10 { margin-left: 5rem !important; margin-right: 5rem !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: .5rem !important; } .pt-2 { padding-top: 1rem !important; } .pt-3 { padding-top: 1.5rem !important; } .pt-4 { padding-top: 2rem !important; } .pt-5 { padding-top: 2.5rem !important; } .pt-6 { padding-top: 3rem !important; } .pt-7 { padding-top: 3.5rem !important; } .pt-8 { padding-top: 4rem !important; } .pt-9 { padding-top: 4.5rem !important; } .pt-10 { padding-top: 5rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: .5rem !important; } .pb-2 { padding-bottom: 1rem !important; } .pb-3 { padding-bottom: 1.5rem !important; } .pb-4 { padding-bottom: 2rem !important; } .pb-5 { padding-bottom: 2.5rem !important; } .pb-6 { padding-bottom: 3rem !important; } .pb-7 { padding-bottom: 3.5rem !important; } .pb-8 { padding-bottom: 4rem !important; } .pb-9 { padding-bottom: 4.5rem !important; } .pb-10 { padding-bottom: 5rem !important; } .pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: .5rem !important; } .pl-2 { padding-left: 1rem !important; } .pl-3 { padding-left: 1.5rem !important; } .pl-4 { padding-left: 2rem !important; } .pl-5 { padding-left: 2.5rem !important; } .pl-6 { padding-left: 3rem !important; } .pl-7 { padding-left: 3.5rem !important; } .pl-8 { padding-left: 4rem !important; } .pl-9 { padding-left: 4.5rem !important; } .pl-10 { padding-left: 5rem !important; } .pr-0 { padding-right: 0 !important; } .pr-1 { padding-right: .5rem !important; } .pr-2 { padding-right: 1rem !important; } .pr-3 { padding-right: 1.5rem !important; } .pr-4 { padding-right: 2rem !important; } .pr-5 { padding-right: 2.5rem !important; } .pr-6 { padding-right: 3rem !important; } .pr-7 { padding-right: 3.5rem !important; } .pr-8 { padding-right: 4rem !important; } .pr-9 { padding-right: 4.5rem !important; } .pr-10 { padding-right: 5rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-3 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-4 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-7 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .py-8 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-9 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; } .py-10 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-2 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-3 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-4 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-5 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .px-6 { padding-left: 3rem !important; padding-right: 3rem !important; } .px-7 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; } .px-8 { padding-left: 4rem !important; padding-right: 4rem !important; } .px-9 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; } .px-10 { padding-left: 5rem !important; padding-right: 5rem !important; } .hide { display: none; } .w-100 { width: 100% !important; } .flex-wrap { flex-wrap: wrap !important; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /*Styles for bulleted and ordered lists*/ .indentedList { list-style-position: outside; padding-left: 3rem; } ul.indentedList { list-style-type: disc; } ol.indentedList { list-style-type: decimal; } .indentedList > li ul, .indentedList > li ol { margin-bottom: 0 !important; } .nonIndentedList { padding-left: 0; } .unstyledList { list-style: none; } .external-link { background: url(//static.mediafire.com/images/icons/svg_dark/external_link.svg) right center no-repeat; padding-right: 14px; } .external-link:hover { background-image: url(//static.mediafire.com/images/icons/svg_dark/external_link_blue2.svg); } /* ========================================================================== Main containers within ========================================================================== */ #container { min-height: 100%; z-index: 1; padding-top: 70px; } .myfiles #container, .recentChanges #container, .sharedWithMe #container { padding-top: 0; background: #fff; } .signUp #container, .signUpRegister #container, .checkOut #container, .changePlan #container { padding-top: 0; } #content_container { padding-bottom: 300px; z-index: 1; } .myfiles #content_container { padding-bottom: 0; } .wrap { width: 960px; margin: 0 auto; } #page_screen { background-color:#000; filter: alpha(opacity=10); opacity: 0; position: fixed; top: 0px; left: 0px; bottom: 0; width: 100%; height: auto !important; display: none; z-index: 1000; } .modalMobile { overflow: hidden; position: fixed; width: 100%; height: 100%; } body.signup.modalMobile { height:100%; } .modalMobile #page_screen { display: none !important; } .modalMobile .floatingTabsBox { display: none; } /* ========================================================================== Old getting started tab nav ========================================================================== */ .subNavBar { width: 100%; height: 46px; margin-top: -1px; background: #EDF1F5; position: relative; z-index: 1; margin-top: -2px; background: -moz-linear-gradient(top, #EDF1F5 0%, #BFD0E0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EDF1F5), color-stop(100%, #BFD0E0)); background: -webkit-linear-gradient(top, #EDF1F5 0%, #BFD0E0 100%); background: -o-linear-gradient(top, #EDF1F5 0%, #BFD0E0 100%); background: -ms-linear-gradient(top, #EDF1F5 0%, #BFD0E0 100%); background: linear-gradient(top, #EDF1F5 0%, #BFD0E0 100%); } .subNavBar li { float: left; border-left: 1px solid #A2BBD1; } .subNavBar li:last-child { border-right: 1px solid #A2BBD1; } .subNavBar li.current { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(255,255,255,1) 100%); /* W3C */ } .subNavBar a { display: block; padding: 12px 25px 12px 25px; color: black; font-weight: bold; text-shadow: 0px 1px 1px white; text-align: center; border-left: 1px solid #E8EEF4; border-right: 1px solid #E8EEF4; } .subNavBar a:hover { color: #3190D3; } /* ========================================================================== Tables (minimal touchup on 10/24/16, needs revisiting -gabe) ========================================================================== */ table { width: 100%; background: #F4F4F5; background: var(--mf-gray11); padding: 2px; border: none; border-collapse: separate; margin-bottom: 20px; } th { text-align: left; } td, th { padding: 5px; } tbody tr { background: #fff; } tbody tr td { border: none } table.split-cells { border-spacing: 2px; padding: 0; } td > .btn { display: block; } table .lg-txt { font-size: 21px; font-weight: bold; } table caption { caption-side: bottom; text-align: left; padding-top: 10px; font-size: .86rem; } .account_header_table table tr td, .account_header_table table tr th { text-align: center; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* PSEUDO TABLE (do not use) /////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .pseudoTable { border:1px solid #cdd0d4; background: #dfe2e6; padding:2px; -moz-box-shadow: inset 0px 1px 0px #fff; -webkit-box-shadow: inset 0px 1px 0px #fff; box-shadow: inset 0px 1px 0px #fff; font-size: 12px; } .pseudoTable .ptHead { padding: 4px 8px; font-weight: bold; overflow: auto; } .pseudoTable ul { background: #fff; border: 1px solid #cdd0d4; -moz-box-shadow: 0px 1px 0px #fff; -webkit-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff; margin: 0 !important; } .pseudoTable li { background: #fff; border-bottom: 1px solid #eee; border-top: 1px solid #fff; padding: 5px; overflow: auto; } .pseudoTable li div, .ptHead div { float: left; } /* ========================================================================== Old button styles (deprecated, use .Btn-* component styles instead ) ========================================================================== */ /* Core style */ a[class*="gbtn"], button[class*="gbtn"], input[class*="gbtn"], div[class*="gbtn"], li[class*="gbtn"] { border-radius: 3px; float: right; position: relative; margin: 0 10px 0 0; font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: normal; padding: 0 13px 0 0; cursor: pointer; height: 36px; line-height: 36px; border: 0; outline: 0; text-transform: uppercase; -webkit-appearance: none; } input[type="submit"].gbtnPrimary, input[type="submit"].gbtnSecondary, input[type="submit"].gbtnTertiary { padding-left: 13px; } .gbtnPrimary:not([class*="ico30"]), .gbtnSecondary:not([class*="ico30"]), .gbtnTertiary:not([class*="ico30"]) { padding-left: 4px; } .gbtnPrimary:first-letter, .gbtnSecondary:first-letter, .gbtnTertiary:first-letter, .gbtnAlt:first-letter { padding-left: 10px; } /* Light colored button */ .gbtnPrimary, input[type="button"].gbtnPrimary, input[type="reset"].gbtnPrimary, input[type="submit"].gbtnPrimary { color: #575B65; color: var(--mf-gray4); background: #E9EAEB; background: var(--mf-gray10); } /* Green button */ .gbtnSecondary, input[type="button"].gbtnSecondary { color: #fff; background: #6c3; } /* Blue button */ .gbtnTertiary, input[type="button"].gbtnTertiary, input[type="submit"].gbtnTertiary { color: #fff; background-color: #0070F0; background-color: var(--mf-blue4); } /* Dark button with reversed icon */ .gbtnAlt { color: #fff; background-color: #404040; } /* Simple hover effect that should work for any button color */ .gbtnPrimary:hover, .gbtnSecondary:hover, .gbtnTertiary:hover, .gbtnAlt:hover, button[class*="gbtn"]:hover { background-image: -webkit-linear-gradient(top, rgba(0,0,0,.08), rgba(0,0,0,.08)); background-image: -moz-linear-gradient(top, rgba(0,0,0,.08), rgba(0,0,0,.08)); background-image: -ms-linear-gradient(top, rgba(0,0,0,.08), rgba(0,0,0,.08)); background-image: -o-linear-gradient(top, rgba(0,0,0,.08), rgba(0,0,0,.08)); background-image: linear-gradient(top, rgba(0,0,0,.08), rgba(0,0,0,.08)); text-decoration: none; } a.gbtnPrimary:hover { color: #575B65; color: var(--mf-gray4); } a.gbtnTertiary:hover, a.gbtnAlt:hover { color: #fff; } a.gbtnSecondary:hover { color: #fff; } /* Core icon style */ a[class*="ico30"]:after, button[class*="ico30"]:after, div[class*="ico30"]:after, li[class*="ico30"]:after { content: ""; float: left; height: 20px; width: 30px; margin-top: 8px; background-image: url(//static.mediafire.com/images/icons/ico30/ico30-v9.png); background-repeat: no-repeat; } /* Reversed icon for alt button */ a[class*="ico30"].gbtnAlt:after, button[class*="ico30"].gbtnAlt:after, div[class*="ico30"].gbtnAlt:after, li[class*="ico30"].gbtnAlt:after { background-image: url(//static.mediafire.com/images/icons/ico30/ico30_reversed-v9.png); } /* Masked icons for white backgrounds, allows css background color */ a[class*="ico30"].maskedIcons:after, li[class*="ico30"].maskedIcons:after, div[class*="ico30"].maskedIcons:after { background-image: url(//static.mediafire.com/images/icons/ico30/ico30-mask-white.png); } /* Grouped buttons */ a.rightBtn, li.rightBtn, div.rightBtn { border-radius: 0 3px 3px 0; margin-left: 1px; position: relative; } a.leftBtn, li.leftBtn, div.leftBtn { border-radius: 3px 0 0 3px; margin-right: 0; } a.centerBtn, li.centerBtn, div.centerBtn { border-radius: 0; margin: 0 0 0 1px; } a[class*="ico30"].plainTxtBtn:after, li[class*="ico30"].plainTxtBtn:after, div[class*="ico30"].plainTxtBtn:after { margin: 0 4px 0 -14px; } a[class*="ico30"].plainTxtBtn.reversedIcons:after, li[class*="ico30"].plainTxtBtn.reversedIcons:after, div[class*="ico30"].plainTxtBtn.reversedIcons:after { background-image: url(//static.mediafire.com/images/icons/ico30/ico30_reversed-v9.png); } a[class*="ico30"].maskedIcons:after, li[class*="ico30"].maskedIcons:after, div[class*="ico30"].maskedIcons:after { background-image: url(//static.mediafire.com/images/icons/ico30/ico30-mask-white.png); } .betaBtn:after { content: "BETA"; border-radius: 3px; background-color: #397baf; padding: 3px 7px; margin-left: 8px; font-size: 11px; font-weight: 700; color: #fff; position: relative; top: -2px; } /* ========================================================================== Button styles ========================================================================== */ /* Core style, default height 36px */ .Btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-size: .79rem; font-weight: normal; height: auto; min-height: 36px; line-height: 1.5; margin: 0; padding: 6px 12px; border: 0; outline: 0; cursor: pointer; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color .1s linear 0s; -webkit-appearance: none; } /* Medium, height 40px */ .Btn--medium { border-radius: 4px; font-size: .86rem; min-height: 40px; padding: 8px 12px; } /* Large, height 48px */ .Btn--large { border-radius: 5px; font-size: .93rem; min-height: 48px; padding: 12px 14px; } /* Button text size modifier classes, use in addition to main class (global text sizes work too) ========================================================================== */ .Btn--textCapsSmall { font-size: .79rem; } .Btn--textCapsMedium { font-size: .86rem; } .Btn--textCapsLarge { font-size: .93rem; } .Btn--textSmall { font-size: .86rem; text-transform: none; } .Btn--textMedium { font-size: .93rem; text-transform: none; } .Btn--textLarge { font-size: 1rem; text-transform: none; } /* Button modifier classes, use in addition to main class ========================================================================== */ /* Blue button */ .Btn--primary { color: #fff; background-color: #0070F0; background-color: var(--mf-blue4); } .Btn--primary:hover { color: #fff; background-color: HSL(212, 100%, 42%); /* --mf-blue4, -5 L */ } /* Light gray button */ .Btn--secondary { color: #222835; color: var(--mf-gray2); background-color: #fff; box-shadow: inset 0 0 0 2px #DBDCDF; box-shadow: inset 0 0 0 2px var(--mf-gray9); } .Btn--secondary:hover { color: #222835; color: var(--mf-gray2); background-color: #E9EAEB; background-color: var(--mf-gray10); } /* Green button (success) */ .Btn--success { color: #222835; color: var(--mf-gray2); background-color: #33CC66; background-color: var(--mf-green4); } .Btn--success:hover { color: #222835; color: var(--mf-gray2); background-color: HSL(140, 60%, 45%); /* --mf-green4, -5 L */ } /* Dark gray button, used in image viewer */ .Btn--darkGray { color: #fff; background-color: #404040; } .Btn--darkGray:hover { color: #fff; background-color: #494949; } /* Text button */ .Btn--text { background-color: transparent; color: #0070F0; color: var(--mf-blue4); } .Btn--text:hover { color: #002369; color: var(--mf-blue2); } /* Buttons rounded on either left or right side */ .Btn--roundedLeft { border-radius: 3px 0 0 3px; } .Btn--roundedRight { border-radius: 0 3px 3px 0; } /* Button icons (24x24px) ========================================================================== */ .Btn-icon { display: inline-flex; flex-shrink: 0; height: 24px; width: 24px; background-image: url(//static.mediafire.com/images/icons/svg_dark/icons_sprite.svg); background-repeat: no-repeat; margin-right: 8px; } /* Icon modifier classes, use in addition to main class ========================================================================== */ .Btn-icon--white { background-image: url(//static.mediafire.com/images/icons/svg_light/icons_sprite.svg); } .Btn-icon--arrowMove { background-position: -1319px 0; } .Btn-icon--arrowRight { background-position: -1632px 0; } .Btn-icon--chevronLeft { background-position: -312px 0; } .Btn-icon--clockHistory { background-position: -1559px 0; } .Btn-icon--download { background-position: -168px 0; } .Btn-icon--eye { background-position: -1415px 0; } .Btn-icon--files { background-position: -1439px 0; } .Btn-icon--folder { background-position: -840px 0; } .Btn-icon--folderPlus { background-position: -600px 0; } .Btn-icon--globe { background-position: -96px 0; } .Btn-icon--grid { background-position: -71px 0; } .Btn-icon--help { background-position: -816px 0; } .Btn-icon--list { background-position: -47px 0; } .Btn-icon--logout { background-position: -960px 0; } .Btn-icon--mobile { background-position: -887px 0; } .Btn-icon--plus { background-position: -119px 0; } .Btn-icon--settings { background-position: -720px 0; } .Btn-icon--share { background-position: -192px 0; } .Btn-icon--trash { background-position: -1031px 0; } .Btn-icon--upgrade { background-position: -792px 0; } .Btn-icon--upload { background-position: -144px 0; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* STEP CONFIRMATION (STEP# | PASS/FAIL ICON) --> used in dmca process ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .stepConfirm { display: inline-block; width: 40px; height: 22px; font-size: 14px; line-height: 22px; padding-left: 8px; color: #636466; border: 1px solid #B4B8BB; border-radius: 20px; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eff0f1)); background-image: -webkit-linear-gradient(top, #fff, #eff0f1); background-image: -moz-linear-gradient(top, #fff, #eff0f1); background-image: -ms-linear-gradient(top, #fff, #eff0f1); background-image: -o-linear-gradient(top, #fff, #eff0f1); background-image: linear-gradient(top, #fff, #eff0f1); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255,255,255,.5); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255,255,255,.5); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255,255,255,.5); text-shadow: 0px 1px 0px #fff; position: relative; } .stepConfirm:before { content: ""; position: absolute; height: 22px; width: 1px; left: 50%; top: 0; margin-left: -1px; background: #dcdee0; border-right: 1px solid #fff; } .stepConfirm:after { content: ""; position: absolute; top: 3px; right: 4px; height: 16px; width: 16px; background-color: #E6E8EA; border-radius: 50%; -moz-box-shadow: inset 0 0 0 2px #d0d4d9; -webkit-box-shadow: inset 0 0 0 2px #d0d4d9; box-shadow: inset 0 0 0 2px #d0d4d9; } .stepConfirm.stGood { color: #4e6621; border: 1px solid #b0c88c; border-radius: 20px; background-color: #f5ffd7; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5ffd7), to(#e1f3c6)); background-image: -webkit-linear-gradient(top, #f5ffd7, #e1f3c6); background-image: -moz-linear-gradient(top, #f5ffd7, #e1f3c6); background-image: -ms-linear-gradient(top, #f5ffd7, #e1f3c6); background-image: -o-linear-gradient(top, #f5ffd7, #e1f3c6); background-image: linear-gradient(top, #f5ffd7, #e1f3c6); } .stepConfirm.stGood:before { background: #cde3ab; } .stepConfirm.stGood:after { background-image: url(//static.mediafire.com/images/icons/status-sprite.png); background-position: 0 1px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* TOGGLE SWITCH /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .toggle-switch { width: 68px; height: 24px; font-size: 12px; background: #C2C7CB; background-image: -webkit-gradient(linear, left top, left bottom, from(#C2C7CB), to(#D9DADE)); background-image: -webkit-linear-gradient(top, #C2C7CB, #D9DADE); background-image: -moz-linear-gradient(top, #C2C7CB, #D9DADE); background-image: -ms-linear-gradient(top, #C2C7CB, #D9DADE); background-image: -o-linear-gradient(top, #C2C7CB, #D9DADE); background-image: linear-gradient(top, #C2C7CB, #D9DADE); overflow: hidden; border: 1px solid #454C54; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .ts-slider { display: table; width: 150%; height: 100%; margin-left: -50%; -webkit-transition: margin-left .1s linear; -moz-transition: margin-left .1s linear; -ms-transition: margin-left .1s linear; -o-transition: margin-left .1s linear; transition: margin-left .1s linear; } .toggle-switch.on .ts-slider { margin-left: 0; } .toggle-switch label { display: table-cell; width: 33%; height: 100%; cursor: pointer; text-transform: uppercase; text-shadow: 0px 1px 0px #fff; text-align: center; vertical-align: middle; line-height: 100%; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); } .ts-l { background-color: #2978e6; background-image: -webkit-gradient(linear, left top, left bottom, from(#2978e6), to(#4F99E3)); background-image: -webkit-linear-gradient(top, #2978e6, #4F99E3); background-image: -moz-linear-gradient(top, #2978e6, #4F99E3); background-image: -ms-linear-gradient(top, #2978e6, #4F99E3); background-image: -o-linear-gradient(top, #2978e6, #4F99E3); background-image: linear-gradient(top, #2978e6, #4F99E3); text-shadow: 0 -1px 1px black !important; color: #fff; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } .ts-r { color: #414C58; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } .ts-knob { display: table-cell; height: 100%; width: 33%; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; background-color: #ecf0f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#ecf0f3), to(#d4d8db)); background-image: -webkit-linear-gradient(top, #ecf0f3, #d4d8db); background-image: -moz-linear-gradient(top, #ecf0f3, #d4d8db); background-image: -ms-linear-gradient(top, #ecf0f3, #d4d8db); background-image: -o-linear-gradient(top, #ecf0f3, #d4d8db); background-image: linear-gradient(top, #ecf0f3, #d4d8db); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0,0,0,.5); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0,0,0,.5); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0,0,0,.5); } .ts-knob:active { background-color: #d4d8db; background-image: none; } .toggle-switch.tsSmall, .toggle-switch.tsSmall .ts-r, .toggle-switch.tsSmall .ts-l, .toggle-switch.tsSmall .ts-knob { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ /* OLD TOGGLE SWITCH FOR AUTO-BANDWIDTH PAGE, REPLACE WITH .toggle-switch ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .toggle-pushbutton { position: absolute; top: 32px; right: 30px; background: #CACFD3; overflow: auto; border-radius: 4px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.3); border-bottom: 1px solid white; } .toggle-pushbutton a { padding: 5px 10px; font-size: 12px; border-radius: 3px; } #autobandwidth.ab-enabled .btn.toggle-on, #autobandwidth.ab-disabled .btn.toggle-off { color: #222835; color: var(--mf-gray2); cursor: default; background: #fff; border: 1px solid #ddd; } /* ========================================================================== Old form styles (deprecated, use .Form-* component styles instead) ========================================================================== */ input[type="text"], input[type="password"], input[type="email"], textarea, select, .fauxInput { outline: none; padding: 0; height: 30px; line-height: 30px; color: #222835; color: var(--mf-gray2); font-size: 14px; font-family: 'Open Sans', sans-serif; background-color: #fff; border: 0 solid #E8E9EC; border-width: 0 0 1px; border-radius: 0 !important; box-sizing: border-box; transition: border .1s linear 0s, box-shadow .1s linear 0s; -webkit-appearance: none; /* iOS Safari controls some styles without this */ } textarea { line-height: 1.6; border-width: 1px; height: auto; padding: 10px; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:not(.goog-te-combo):focus { border-bottom-color: #0070F0; border-bottom-color: var(--mf-blue4); box-shadow: 0 1px 0 0 #0070F0; box-shadow: 0 1px 0 0 var(--mf-blue4); } input[type="text"]:placeholder, input[type="email"]:placeholder, input[type="password"]:placeholder, textarea:placeholder { color: #575B65; color: var(--mf-gray4); } input.input-static { padding: 0 8px; background: #f4f4f5 !important; border-bottom: 1px solid #E8E9EC !important; box-shadow: none !important; } /* Add dropdown indicator to custom styled . Updates the existing input style to provide better * visual grouping with floating labels (subtle gray background, rounded corners) * * .FloatingLabel-label (with nested ) * Element that creates the placeholder=>label effect. This is styled purely * with CSS as a sibling of its input (must be after in markup). It is * set to aria-hidden="true" so that it is not read in addition * to the preceding