* { margin: 0px; padding: 0px; } .fixme { background-color: yellow; color: red; } .inline { display: inline; } .hidden { display: none; } .clear { clear: both; } .superuser { padding: 2px; background-color: #FFFFAA !important; border: 1px solid #E58C18; } .fade { opacity: 0; transition: opacity 200ms ease-in-out; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; } .fade.doTransition { opacity: 1; } .transform { transition: transform 200ms ease-in-out; -webkit-transition: transform 200ms ease-in-out; -moz-transition: transform 200ms ease-in-out; -ms-transition: transform 200ms ease-in-out; -o-transition: transform 200ms ease-in-out; } .fade.transform { transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; -webkit-transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; -moz-transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; -ms-transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; -o-transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; } form.inplaceeditor-form { display: inline; } body { position: relative; font-family: "RooneySans-Regular", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; color: #000000; margin: 0px; background: white; } body.basicheader { background: white; padding: 1em; } i, em, cite { font-family: "RooneySans-Regular", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: italic; } strong, b { font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } body.basicheader { background-color: white; } i, em, cite { font-family: "RooneySans-Regular", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: italic; font-weight: normal; } strong, b { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; font-weight: normal; } a:link { color: #0099ff; text-decoration: none; } a:visited { color: #06C; text-decoration: none; } a:hover { text-decoration: underline; } a:active { color: #FF3300; text-decoration: underline; } a.plaintext:link, a.plaintext:visited, a span.plaintext, .local-tab a { color: black; text-decoration: none; } a.text_link { text-decoration: none; color: black; } p { margin-top: 0px; margin-bottom: 0.6em; font-size: 16px; line-height: 1.4; } ul + p, div + p, table + p { margin-top: 0.6em; } div.side_column p { font-size: 12px; line-height: 1.2; } div.side_column p.large { font-size: 16px; line-height: 1.2; margin: 0.6em 0 0; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; } h1.padded, h2.padded, h3.padded, h4.padded, h5.padded, h6.padded { margin-top: 6px; } h1, h2 { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } h1 { font-size: 40px; margin: 0px; clear: both; } h1 a:link, h1 a:visited { color: black; } h2 { font-size: 24px; margin-bottom: 6px; } h2.subhead { font-size: 14px; font-weight: normal; margin-left: 10px; margin-bottom: 4px; color: gray; } h3 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 16px; margin-bottom: 3px; } h4 { font-size: 13px; margin-bottom: 3px; } h5 { font-size: 11px; margin-bottom: 2px; } h6 { font-size: 10px; margin-bottom: 2px; } ul { list-style-type: none; padding: 0px; margin: 0px; } ul.bullet { margin-bottom: 6px; } ul.bullet > li { padding-left: 10px; text-indent: -8px; } ul.bullet > li * { text-indent: 0px; } ul.bullet > li:before { content: "\2022\0020"; font-size: 10px; } ol.p, ul.p { margin-top: 0px; margin-bottom: 12px; font-size: 14px; line-height: 1.4; } ul > li { margin: 0px; padding: 0px; } ol > li { margin-left: 2em; } .clearfix:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .pad_bottom { padding-bottom: 5px; } .spacer { border: 1px solid red; height: 100%; float: left; } div.clearer { float: none !important; clear: both !important; height: 0px; font-size: 0px; margin: 0px } img { border-style: none; } img.bling { width: 23px; height: 23px; border-style: none; vertical-align: middle; } img.cart_button_big { width: 131px; height: 31px; } img.cart_button_small { width: 63px; height: 25px; } .smalltext { font-family: Verdana, Geneva, Arial, sans-serif; font-size: x-small; } #alpha { font: normal 10px Tahoma, Geneva, sans-serif; padding: 4px 0px; border: 1px solid #bbb; } #alpha span { padding: .3em .6em .4em .6em; color: #333; } #alpha .selected { padding: .3em .6em .4em .6em; color: #333; background-color: #b6bdd2; } #alpha a { padding: .4em .55em .4em .55em; text-decoration: none; color: #333; font-weight: bold; border-style: none; } #alpha a:hover { color: #fff; background: #b6bdd2; } #alpha a.active, #alpha a.active:hover { color: #000; } .main_column .autobox { position: relative; clear: both; margin: 0px; } .side_column .autobox { position: relative; clear: both; margin: 0px; margin-bottom: 12px !important; padding: 12px !important; background-color: #F5F5F5; } .align-with-tabs { margin-top: 72px; } td > .align-with-tabs { margin-top: 77px; } .autobox-with-tabs { position: relative; margin-top: 16px; } .autobox-with-tabs.bottom-pad { padding-bottom: 20px; } .autobox-with-tabs .autobox { position: relative; padding: 24px 0px; } .autobox-with-tabs .local-tabs { width: 100%; -webkit-font-smoothing: antialiased; } .autobox-with-tabs .local-tabs .local-tab { border-bottom: 3px solid white; color: #555; position: relative; top: 1px; padding: 5px; margin: 0 12px; float: left; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 17px; font-weight: normal; } .autobox-with-tabs .local-tabs .more-autosize { cursor: pointer; } .autobox-with-tabs .local-tabs .local-tab:first-child { margin-left: 6px; } .autobox-with-tabs .local-tabs .local-tab a { color: #555; transition: color 200ms ease-in-out; -webkit-transition: color 200ms ease-in-out; -moz-transition: color 200ms ease-in-out; -ms-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; } .autobox-with-tabs .local-tabs .local-tab a:hover { color: #09f; } .autobox-with-tabs .local-tabs .local-tab .searchresults_tab_number { font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } .autobox-with-tabs .local-tabs .local-tab.active { border-color: #0af; color: #000; } #secure_reports .autobox-with-tabs .autobox, #foundry_admin .autobox-with-tabs .autobox, #payments_admin .autobox-with-tabs .autobox { position: static; padding: 50px 0; } .local-tab.inactive { color: #CCCCCC; } div.headline_box { position: relative; padding: 6px 0px; border-bottom: 1px solid black; margin: 0px; margin-bottom: 12px; zoom: 1; } div.headline_box.with_icon { padding-left: 40px; } div.headline_box h1, div.headline_box h2, div.headline_box h3, div.headline_box h4 { margin: 0px; padding: 0px; } div.headline_box img { position: absolute; left: 0px; bottom: -2px; } div.headline_box img.fontsample { position: relative; top: 0px; float: none; } div.headline_box a:link, div.headline_box a:visited, div.headline_box a:hover { } div.headline_box_subhead { position: absolute; bottom: 7px; right: 0px; } .columns, .two_column_layout { clear: both; position: relative; width: 939px; } .two_column_layout .main_column { clear: both; position: relative; width: 720px; float: left; } .two_column_layout .side_column { position: relative; margin-left: 24px; float: left; width: 195px; } div.embedded { position: relative; width: 100%; margin-top: 12px; } .two_column_layout .embedded .left_side { position: relative; float: left; width: 348px; } .two_column_layout .embedded .right_side { position: relative; float: left; width: 348px; padding-left: 24px; } img.fontsample { border-style: none; padding: 0px; margin: 0px; } div.auto_complete { position: absolute; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #CCCCCC; background-color: white; z-index: 500; border-radius: 0 0 3px 3px; } div.auto_complete ul { margin: 0px; padding: 0px; width: 100%; list-style-type: none; } div.auto_complete ul li { cursor: pointer; margin: 0px; padding: 3px 5px; font-size: 14px; color: black; text-align: left; line-height: 1.2em; border-bottom: 1px solid #CCCCCC; height: 33px; display: flex; align-items: center; text-transform: capitalize; } div.auto_complete ul li button { background-color: white; color: black; border: 1px #CCCCCC solid; padding: 2px 10px; margin-left: auto; } div.auto_complete ul li:hover { background-color: #0099FF; color: #FFFFFF; font-weight: bold; white-space: nowrap; } div.auto_complete ul li.selected { background-color: #0099FF; color: #FFFFFF; font-weight: bold; white-space: nowrap; } div.auto_complete ul strong.highlight { color: #0099FF; margin: 0px; padding: 0px; } span.plusminus { cursor: pointer; color: #999999; } span.plusminus:hover { color: #FF3300; } #popup_box_bg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black; opacity: 0.6; filter: alpha(opacity=60); z-index: 9999; } #popup_box { position: absolute; z-index: 10000; top: 0px; left: 0px; width: 400px; padding: 12px; background-color: white; margin-bottom: 60px; margin-top: 30px; } #popup_box .close_x { position: absolute; right: 9px; top: 3px; } #popup_box .modal-with-padding { padding: 30px 25px; } #popup_box .modal-with-padding > *:last-child { margin-bottom: 0; } #popup_login_frame { position: relative; width: 98%; height: 98%; } .errormsg { color: red; } img.spinner32, img.spinner16, img.spinner { width: 20px; height: 20px; vertical-align: middle; } img.tiny_checkcross { width: 9px; height: 9px; vertical-align: middle; } div#tipDiv { position: absolute; visibility: hidden; left: 0px; top: 0px; z-index: 100000; background-color: #ffffff; border: 1px solid #336; width: 350px; padding: 4px; overflow: hidden; padding: 5px; } .article_over { display: none; } /****************************** * FORM BUTTONS ******************************/ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=submit], input[type=reset], input[type=button], a.button, span.button, button { background-color: #09F; border-radius: 3px; color: white; cursor: pointer; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; letter-spacing: 0.03em; line-height: 1.25em; padding: 5px 10px; margin-top: 6px; margin-bottom: 6px; outline: none; border: none; -webkit-appearance: none; -webkit-border-radius: 3px; } input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, a.button:hover, span.button:hover, button:hover { background-color: #078adb; } input[type=submit].big, input[type=reset].big, input[type=button].big, a.button.big, span.button.big, button.big, input[type=submit].bigger, input[type=reset].bigger, input[type=button].bigger, a.button.bigger, span.button.bigger, button.bigger { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 16px; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; } input[type=submit].normal-case, a.button.normal-case, button.normal-case { text-transform: none; letter-spacing: 0; } input[type=submit].bigger, input[type=reset].bigger, input[type=button].bigger, a.button.bigger, span.button.bigger, button.bigger { padding: 10px 15px; } input[type=submit].large, input[type=reset].large, input[type=button].large, a.button.large, span.button.large, button.large { font-size: 17px; padding: 9px 16px; } input[type=submit].huge, input[type=reset].huge, input[type=button].huge, a.button.huge, span.button.huge, button.huge { font-size: 18px; margin: 5px; padding: 14px 32px; } input[type=submit].white, input[type=reset].white, input[type=button].white, a.button.white, span.button.white, button.white { background: #fefefe; border: 1px solid; border-color: #e3e3e3 #d9d9d9 #d5d5d5 #d9d9d9; color: #444 !important; -webkit-transition: border 200ms ease-in-out; -moz-transition: border 200ms ease-in-out; -ms-transition: border 200ms ease-in-out; -o-transition: border 200ms ease-in-out; transition: border 200ms ease-in-out; } input[type=submit].white:hover, input[type=reset].white:hover, input[type=button].white:hover, a.button.white:hover, span.button.white:hover, button.white:hover { background: #fefefe; border-color: #09f; } input[type=submit].grey, input[type=reset].grey, input[type=button].grey, a.button.grey, span.button.grey, button.grey, input[type=submit].gray, input[type=reset].gray, input[type=button].gray, a.button.gray, span.button.gray, button.gray { background: #eee; color: #444 !important; } input[type=submit].grey:hover, input[type=reset].grey:hover, input[type=button].grey:hover, a.button.grey:hover, span.button.grey:hover, button.grey:hover, input[type=submit].gray:hover, input[type=reset].gray:hover, input[type=button].gray:hover, a.button.gray:hover, span.button.gray:hover, button.gray:hover { background: #ddd; } input[type=submit].mediumgrey, input[type=reset].mediumgrey, input[type=button].mediumgrey, a.button.mediumgrey, span.button.mediumgrey, button.mediumgrey, input[type=submit].mediumgray, input[type=reset].mediumgray, input[type=button].mediumgray, a.button.mediumgray, span.button.mediumgray, button.mediumgray { background: #838383; } input[type=submit].mediumgrey:hover, input[type=reset].mediumgrey:hover, input[type=button].mediumgrey:hover, a.button.mediumgrey:hover, span.button.mediumgrey:hover, button.mediumgrey:hover, input[type=submit].mediumgray:hover, input[type=reset].mediumgray:hover, input[type=button].mediumgray:hover, a.button.mediumgray:hover, span.button.mediumgray:hover, button.mediumgray:hover { background: #757575; } input[type=submit].darkgrey, input[type=reset].darkgrey, input[type=button].darkgrey, a.button.darkgrey, span.button.darkgrey, button.darkgrey, input[type=submit].darkgray, input[type=reset].darkgray, input[type=button].darkgray, a.button.darkgray, span.button.darkgray, button.darkgray { background: #4a4a4a; } input[type=submit].darkgrey:hover, input[type=reset].darkgrey:hover, input[type=button].darkgrey:hover, a.button.darkgrey:hover, span.button.darkgrey:hover, button.darkgrey:hover, input[type=submit].darkgray:hover, input[type=reset].darkgray:hover, input[type=button].darkgray:hover, a.button.darkgray:hover, span.button.darkgray:hover, button.darkgray:hover { background: #333; } input[type=submit].black, input[type=reset].black, input[type=button].black, a.button.black, span.button.black, button.black { background: #111; -webkit-transition: background 200ms ease-in-out; -moz-transition: background 200ms ease-in-out; -ms-transition: background 200ms ease-in-out; -o-transition: background 200ms ease-in-out; transition: background 200ms ease-in-out; } input[type=submit].black:hover, input[type=reset].black:hover, input[type=button].black:hover, a.button.black:hover, span.button.black:hover, button.black:hover { background: #09f; } input[type=submit].magenta, input[type=reset].magenta, input[type=button].magenta, a.button.magenta, span.button.magenta, button.magenta { background: #F0F; } input[type=submit].magenta:hover, input[type=reset].magenta:hover, input[type=button].magenta:hover, a.button.magenta:hover, span.button.magenta:hover, button.magenta:hover { background: #D900D9; } input[type=submit].green, input[type=reset].green, input[type=button].green, a.button.green, span.button.green, button.green { background: #3C0; } input[type=submit].green:hover, input[type=reset].green:hover, input[type=button].green:hover, a.button.green:hover, span.button.green:hover, button.green:hover { background: #2B0; } input[type=submit].orange, input[type=reset].orange, input[type=button].orange, a.button.orange, span.button.orange, button.orange { background: #eca235; } input[type=submit].orange:hover, input[type=reset].orange:hover, input[type=button].orange:hover, a.button.orange:hover, span.button.orange:hover, button.orange:hover { background: #d4922f; } a.button, span.button { display: inline-block; text-decoration: none; } a.button:hover { text-decoration: none; } button[disabled], button.disabled, input[type=submit][disabled], input[type=button][disabled], a.button.disabled, span.button.disabled { background-color: #eee !important; color: #bababa !important; cursor: default; } button[disabled]:hover, button.disabled:hover, input[type=submit][disabled]:hover, input[type=button][disabled]:hover, a.button.disabled:hover, span.button.disabled:hover { background-color: #eee !important; color: #bababa !important; cursor: default; } input[type=reset], button[type=reset], a.button.cancel, button.cancel, span.button.cancel, input[type=submit].cancel, input[type=button].cancel { background-color: #CCC; color: #444; } input[type=reset]:hover, button[type=reset]:hover, a.button.cancel:hover, button.cancel:hover, span.button.cancel:hover, input[type=submit].cancel:hover, input[type=button].cancel:hover { background-color: #bbb; } input[type=reset]:active, button[type=reset]:active, button.cancel:active, input[type=button].cancel:active, input[type=submit].cancel:active, a.button.cancel:active, span.button.cancel:active { background-color: #999; color: #333; } input[type=reset].big_button, input[type=submit].big_button, input[type=button].big_button, button.big_button, a.button.big_button, span.button.big_button { font-size: larger; padding: 6px 12px; } input[type=text], input[type=email], input[type=password], input[type=tel], textarea { border: 1px solid #ddd; border-radius: 0; display: inline-block; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 15px; padding: 5px 7px; -webkit-appearance: none; -webkit-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -moz-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -ms-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -o-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; } input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus { border-color: #09f; box-shadow: inset 0px 2px 3px #e6e6e6; outline: none; } .checkbox { display: none; display: inline-block \9; } .checkbox + label { display: inline-block; margin-right: 10px; } .checkbox + label .checkbox_image { background: url('/s/images/foundry/foundry_checkbox.png') center center no-repeat; background-size: 18px 18px; display: inline-block; display: none \9; height: 18px; width: 18px; position: relative; top: 4px; } .checkbox + label:active .checkbox_image, .checkbox:checked + label:active .checkbox_image { background-image: url('/s/images/foundry/foundry_checkbox_active.png'); } .checkbox:checked + label .checkbox_image { background-image: url('/s/images/foundry/foundry_checkbox_checked.png'); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .checkbox + label .checkbox_image { background: url('/s/images/foundry/foundry_checkbox@2x.png') center center no-repeat; background-size: 18px 18px; } .checkbox + label:active .checkbox_image, .checkbox:checked + label:active .checkbox_image { background-image: url('/s/images/foundry/foundry_checkbox_active@2x.png'); } .checkbox:checked + label .checkbox_image { background-image: url('/s/images/foundry/foundry_checkbox_checked@2x.png'); } } /*********************************** * TAIL END OF BUTTONS ***********************************/ /******************************************** PRETTY TABLES AS PIONEERED IN PAYMENTS ADMIN ********************************************/ table.pretty_table { border-collapse: collapse; border-bottom: 1px solid black; } table.pretty_table tr th, table.pretty_table tr td { text-align: left; padding: 6px; } table.pretty_table tr th { vertical-align: bottom; border-bottom: 1px solid black; border-top: 1px solid black; background-color: #999; color: white; font-weight: bold; } table.pretty_table tr td { vertical-align: top; border-top: 1px solid #999; } table.pretty_table tr:first-child td { border-top: 1px solid black; } table.pretty_table tr > *.number { text-align: right; } table.pretty_table tr > *.tick { text-align: center; } table.pretty_table tr.warning td { color: black; background-color: #FFF0F0; } /************************************* * END PRETTY TABLES *************************************/ .licsmicon { width: 25px; height: 25px; white-space: nowrap; overflow: hidden; background: url('/s/images/iconsets/myfonts/licenseiconssmall-sprite-v3.png') 0 0 no-repeat; margin-right: 3px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .licsmicon { background-image: url('/s/images/iconsets/myfonts/licenseiconssmall-sprite-v3@2x.png'); background-size: 200px 64px; } } .licensetypesm-web { background-position: 0 0; } .licensetypesm-server { background-position: -25px 0; } .licensetypesm-epub { background-position: -50px 0; } .licensetypesm-desktop { background-position: -75px 0; } .licensetypesm-library_subscription { background-position: -150px 0; } .licensetypesm-app { background-position: -99px 0; } .licensetypesm-app_consumable-paygo { background-position: -125px 0; } .licensetypesm-digital_ad, .licensetypesm-digital_ad_consumable-paygo { background-position: -175px 0; } .license-printview { margin: 11px; } .fltleftpacklist.licensetypesm-web_consumable-paygo, .fltleftpacklist.licensetypesm-app_consumable-paygo { height: 32px; margin-top: 2px; } .fltleftpacklist.licensetypesm-classic, .fltleftpacklist.licensetypesm-creative, .fltleftpacklist.licensetypesm-business { background-size: 100% 100%; } .fltleftpacklist.licensetypesm-classic { background-image: url('/s/images/creative_license/classic.svg'); width: 31px; } .fltleftpacklist.licensetypesm-creative { background-image: url('/s/images/creative_license/creative.svg'); width: 31px; } .fltleftpacklist.licensetypesm-business { background-image: url('/s/images/creative_license/business.svg'); width: 43px; } /************************************* * HELPFUL POPUP TOOLTIP THING *************************************/ .help_tooltip { background: #333; border-radius: 3px; color: #fff; display: none; font-size: 14px; max-width: 450px; padding: 15px; position: relative; text-align: left; z-index: 10; } .help_tooltip:before { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #333; content: ""; width: 0; height: 0; position: absolute; left: 50%; top: -10px; margin-left: -10px; } *:hover > .help_tooltip { display: block; } .clearboth { clear: both; } /************************************* * FONT LIST / SEARCH RESULTS *************************************/ .full_width { clear: both; width: 100%; } .font-name { float: left; } #search_page .autobox-with-tabs .local-tabs .local-tab:first-child { margin-left: 12px; } .site-logo { text-indent: -999em; width: 138px; height: 68px; background: transparent url("/s/images/logo/header_logo.svg") center no-repeat; background-size: contain; } .mls-logo { background: transparent url("/s/images/logo/MLS-icon.svg") center no-repeat; background-size: contain; width: 65px; height: 65px; display: inline-block; } .mls-logo-before:before { content: ''; width: 46px; height: 46px; background: transparent url("/s/images/logo/MLS-icon.svg") center no-repeat; background-size: contain; display: block; margin: 0 auto 10px; } .mls-logo-before.inline:before { width: 16px; height: 16px; display: inline-block; margin: 0 5px 0 2px; position: relative; bottom: -3px; } .mls-slice { border-bottom: 1px solid #ccc; clear: both; margin-bottom: 15px; } .mls-slice.no-border { border-bottom: none; margin-bottom: 0; } .mls-slice h2 { font-size: 16px; margin-bottom: 2px; } .mls-slice p { padding: 0 0 15px; font-size: 14px; } .mls-slice .mls-logo { margin: 3px 14px 0 0; float: left; width: 40px; height: 40px; } .skyfonts-logo-before:before { content:''; width: 46px; height: 46px; background: transparent url("/s/images/logo/skyfonts-logo-dark.svg") center no-repeat; background-size: contain; display: block; margin: 0 auto 10px; } .skyfonts-logo-before.inline:before { width: 14px; height: 16px; display: inline-block; margin: 0 3px 0 0; position: relative; bottom: -3px; } .mf-logo { background: url("/s/images/logo/header_logo.svg") center center no-repeat; background-size: 161px 90px; width: 161px; height: 90px; margin: 0 auto; display: block; } select.mf-dropdown { background: url('/s/images/checkout/dropdown.png') no-repeat right 8px center; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; border-radius: 4px; text-shadow: 0px 0px #fff; border: 1px solid #C9C9C9; font-size: 14px; padding-left: 12px; padding-right: 35px; height: 40px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } select.mf-dropdown.alt { background: url('/s/w/sub_info/select_menu_arrow.svg') right 18px center no-repeat; background-size: 10px 8px; padding-left: 14px; padding-right: 44px; } select.mf-dropdown::-ms-expand { display: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 144dpi), only screen and ( min-resolution: 2dppx) { select.mf-dropdown { background: url('/s/images/checkout/dropdown@2x.png') no-repeat right 8px center; background-size: 16px 15px; } } /* ------Smartphones (portrait and landscape) ----------- @media only screen and (max-device-width: 600px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 960px) and (min-device-width: 320px) and (orientation: landscape) */ @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { .autobox-with-tabs .local-tabs .local-tab { font-size: 14px; margin: 0px 12px; } .local-tabs { border-top: 1px solid rgb(223, 221, 224); border-bottom: 1px solid rgb(223, 221, 224); overflow: auto; padding: 10px 0; } .autobox-with-tabs .local-tabs .local-tab.active { border-width: 2px; padding: 3px 0; } .autobox-with-tabs .autobox { padding: 8px 0; } .autobox-with-tabs { margin-top: 0; } } .loading { background-image: url("/s/images/iconsets/myfonts/spinner.gif"); background-position: right center; background-repeat: no-repeat; } 

.searchBox { display: inline-block; float: left; } .searchBox .load-show { display: initial; } .searchBox .load-hide { display: none; } .searchBox.mls form { margin: 0; } .searchBox form { clear: none; display: block; float: left; margin: 8px 20px 0 0; top: 0; max-width: 539px; width: 539px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row nowrap; } .searchBox form .filter { -webkit-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; order: 1; position: relative; padding: 8px 5px 2px 10px; border-radius: 3px 0 0 3px; color: #4A4A4A; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; background: #EFEFEF; display: inline-block; float: left; box-sizing: border-box; border: 1px solid #d5d5d5; border-right-style: none; height: 37px; } .searchBox form .filter:hover { cursor: pointer; } .searchBox form .filter .arrow-down { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #000; margin: 6px 5px 0 6px; } .searchBox form .filter .hidden { display: none; } .searchBox form .filter .items { text-align: left; position: absolute; left: 0; top: 103%; background: #FFFFFF; border: 1px solid #ACACAC; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); } .searchBox form .filter .items li { padding: 1em 1.5em 1em 1.2em; box-sizing: border-box; white-space: nowrap; } .searchBox form .filter .items li:hover { background: #EEE; } .searchBox form .filter .items li:not(:last-child) { border-bottom: 1px solid #F4F4F4; } .searchBox form .query { -webkit-box-flex: 1 0; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; order: 2; position: relative; } .searchBox form .query input { box-sizing: border-box; border-color: #d5d5d5; vertical-align: middle; height: 37px; line-height: 20px; width: 100%; } .searchBox form .query input:focus { border-color: #09f; } .searchBox form .query .auto_complete_results { position: absolute; background: #FFFFFF; border: 1px solid #666666; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); border-width: 1px 2px 2px 1px; width: 100%; transition: display 1s ease-in-out; z-index: 100; } .searchBox form .query .auto_complete_results li { cursor: pointer; margin: 0px; padding: 3px 5px; font-size: 11px; color: black; text-align: left; line-height: 1.2em; } .searchBox form .query .auto_complete_results li:hover { background-color: #0099FF; color: #FFFFFF; font-weight: bold; white-space: nowrap; } .searchBox form .goButton { order: 3; -webkit-box-flex: 0 0 38px; -webkit-flex: 0 0 38px; -ms-flex: 0 0 38px; flex: 0 0 38px; overflow: hidden; margin-left: 3px; float: left; } .searchBox form .goButton input { height: 37px; margin: 0 0; padding: 1px 7px 1px; width: 100%; border-color: #111; box-shadow: none; box-sizing: border-box; vertical-align: middle; } .searchBox form .goButton input:hover { border-color: #09f; } @media (min-width: 600px) and (max-width: 767px) { .searchBox { width: 100%; } .searchBox form { left: -5px; margin: 0 auto; float: none; } .searchBox form .query { width: 435px; } } @media screen and (max-width: 599px) { .searchBox { width: 100%; margin-top: 8px; } .searchBox form { width: 100%; margin: 0 auto; } } @media screen and (min-width: 768px) { .searchBox form { margin: 0; line-height: 20px; } } @media screen and (min-width: 1200px) { .searchBox form { margin: 22px 35px 0 0; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-width: 450px) { .searchBox form { margin: 0; width: 100%; } } @media only screen and (max-device-width: 736px) and (min-device-width: 480px) and (orientation: landscape) { .searchBox form { margin: 0; width: 100%; } .searchBox form .query { width: 76%; } } #cart { position: absolute; left: -225px; top: 20px; width: 500px; padding: 3px 10px; font-size: smaller; text-align: left; } #cart_image, #cartImage { background: url("/s/images/iconsets/myfonts/cart-sprite.png") 0 0 no-repeat; background-size: 22px 32px; float: right; width: 22px; height: 16px; border-style: none; position: relative; top: 13px; } #myfontsContainer:not(.fluid) #cart_image, #myfontsContainer:not(.fluid) #cartImage { top: 2px; } a:hover #cart_image, a:hover #cartImage { background-position: 0 -16px; } #cart_text, #cartText { clear: both; position: relative; top: 7px; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } #cart_buttons { width: 401px; height: 94px; text-align: right; z-index: 50; } #cart_buttons .add_to_cart_button { font-size: 14px; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; padding: 11px 16px 13px; white-space: nowrap; } #cart_buttons .buying_choices_button { font-size: 14px; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; padding: 12px; white-space: nowrap; } #cart_buttons .add_to_album_toggle { font-size: 10px; padding: 11px 14px; } #cart_buttons div.add_to_album_dropdown { top: 40px; } #cart_buttons .buying_choices + div.add_to_album_dropdown { top: 72px; } #cart_buttons .cart_buttons_buyit { min-height: 36px; } #cart_buttons .cart_buttons_buyit_button { float: right; } #cart_buttons h3.cart_buttons_buyit_desc { font-size: 19px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; max-height: 41px; } #cart_buttons h3.cart_buttons_buyit_desc span.regular-price { font-weight: normal; } #cart_buttons .buying_choices_note { font-size: 12px; } #cart_buttons .price-tag { float: left; margin-top: 2px; } #cart_buttons img.cart_button_big { float: right; } #cart_buttons a.add_to_album img.cart_button_big { margin-top: 6px; } .two_column_layout .main_column .autobox-with-tabs #cart_buttons { position: absolute; top: -127px; left: 538px; } #cart_controls { text-align: right; } #cart .pad_bottom { text-align: center; border: none; padding: 0px 0px 5px 0px; } .not_for_sale_text { padding: 15px 0px 0px 0px; width: 350px; margin: auto auto; } #cart .cart_total { float: right; font-size: 11pt; width: 75px; } #cart .cart_remove { float: right; padding-right: 10px; } div.price-tag { background-color: #ECE9D2; border-color: #F2F0E0 #BDBAA8 #BDBAA8 #F2F0E0; border-style: solid; border-width: 1px; color: #753F9B; font-size: 10px; min-width: 36px; padding: 9px 4px 2px 4px; text-align: center; display: inline; background-repeat: no-repeat; background-position: center 1px; float: right; } div.price-tag.yellow { background-color: #ffff33; border-color: #F2F0E0 #cccc33 #cccc33 #F2F0E0; border-style: solid; border-width: 1px; color: #753F9B; } div.price-tag.from { background-image: url(/s/images/layout/price_tags/price_tag-from.png); } div.price-tag.family { background-image: url(/s/images/layout/price_tags/price_tag-family.png); } div.price-tag.album { background-image: url(/s/images/layout/price_tags/price_tag-album.png); } div.price-tag.single { background-image: url(/s/images/layout/price_tags/price_tag-style.png); } div.price-tag.multi, div.price-tag.pack { background-image: url(/s/images/layout/price_tags/price_tag-pack.png); } div.price-tag.physical { background-image: url(/s/images/layout/price_tags/price_tag-CD.png); } div.price-tag.onlypack { background-image: url(/s/images/layout/price_tags/price_tag-only_in_packs.png); } div.price-tag.value_pack { background-image: url(/s/images/layout/price_tags/price_tag-valu_pack.png); } div.price-tag.notforsale { background-image: url(/s/images/layout/price_tags/price_tag-not_for_sale.png); } div.price-tag .cent { position: relative; left: 1px; font-size: smaller; vertical-align: text-top; text-decoration: underline; } div.price-listing { float: right; margin-top: 9px; white-space: nowrap; } span.promo_tag { font-size: 10px; color: #666; } span.sale-price, span.saleprice { color: red; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } span.regular-price-strike, span.regularprice-strike { color: red; text-decoration: line-through; } span.regular-price, span.regularprice { color: black; font-weight: bold; } .sale-price { margin-left: 3px; } .cart_subtotal, .price_tag_widget { font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #cart_image, #cartImage { background-image: url("/s/images/iconsets/myfonts/cart-sprite@2x.png"); } } #sitewideAnnouncement { background-color: #FFC; color: #C00; padding: 4px 12px; border: 1px solid black; margin-bottom: 24px; } #sitewideAnnouncement a.close { float: right; } #myfontsContainer { background-color: white; box-sizing: border-box; padding: 0 10px; width: 959px; margin: 0px auto; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media screen and (max-width: 768px) { #myfontsContainer.mobileNavAndroid #mobileNavMenu { left: 0px; } #myfontsContainer.mobileNavAndroid #myfontsHeader, #myfontsContainer.mobileNavAndroid #myfontsBody { left: 200px; } #myfontsContainer.mobileNavOpen { -moz-transform: translate3d(200px, 0, 0); -o-transform: translate3d(200px, 0, 0); -ms-transform: translate3d(200px, 0, 0); -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } } #myfontsBody { position: relative; width: 100%; padding-top: 10px; margin: 0 auto 0; } #myfontsContainer.respHomepage #myfontsBody { padding-top: 0; } #myfontsHeader { background: #fff; box-sizing: border-box; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; height: 110px; width: 100%; line-height: inherit; margin: 0 auto; padding: 0 0; position: relative; top: 0; right: 0; left: 0; z-index: 100; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #myfontsHeader a { color: #555; text-decoration: none; -moz-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } #myfontsHeader a:hover { color: #09f; } #headerLogotype { float: left; width: 161px; height: 90px; margin-right: 20px; position: relative; top: 3px; } #headerLogotype a { background: url("/s/images/logo/header_logo.svg") center center no-repeat; background: url("/s/images/logo/header_logo_ie.png") center center no-repeat \9 ; background-size: 161px 90px; display: block; width: 161px; height: 90px; } #headerLogin { position: absolute; top: 18px; right: 29px; } #headerLogin a#headerLoginLink { z-index: 101; position: relative; } #headerLogin a#headerLoginLink > span:first-child { display: inline-block; display: inline \9 ; font-size: 14px; height: 1.3em; line-height: 1.3em; text-align: right; vertical-align: middle; white-space: nowrap; } #headerLogin a#headerLoginLink span.arrow { display: inline-block; width: 0; height: 0; border-top: 5px solid #555; border-right: 4px solid transparent; border-left: 4px solid transparent; margin-left: 3px; position: relative; top: -1px; } #headerLogin a#headerLoginLink span.arrow-hidden { display: none; } #headerLogin a#headerLoginLink:hover span.arrow { border-top-color: #09f; } #headerLogin iframe { background: #fff; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); padding: 35px 15px 15px 15px; width: 205px; height: 155px; position: absolute; top: -5px; right: -5px; z-index: 100; } @media screen and (min-width: 768px) { #myfontsContainer.fluid #headerLogin iframe { top: 2px; } } #headerLogin #userMenu { background: #fff; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); font-size: 14px; line-height: 1.2em; padding: 10px 0; position: absolute; right: 0; top: 22px; width: 220px; z-index: 101; } #headerLogin #userMenu a { display: block; font-weight: normal; padding: 6px 20px; text-decoration: none; } #headerLogin #userMenu a:hover { background: #eee; color: #555; } #headerLogin #userMenu a.userMenu__item--desktopHidden { display: none; } @media screen and (max-width: 767px) { #myfontsContainer:not(.fluid):not(.fluid-mls) #headerLogin #userMenu a.userMenu__item--desktopHidden { display: block; } } #headerLogin .mls-nav { background: transparent url("/s/images/logo/logo-mls-sml.png") 0 0 no-repeat; text-decoration: none; text-indent: -999em; direction: ltr; width: 20px; height: 20px; overflow: hidden; display: block; float: right; position: relative; top: 0; right: -5px; margin-right: 7px; margin-left: 5px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #headerLogin .mls-nav { background-image: url("/s/images/logo/logo-mls-sml@2x.png"); background-size: 20px 20px; } } #headerLogin .mls-nav.hide { display: none; } #headerLogin .mls-nav:not(.hide) ~ #userMenu { right: 32px; } #myfontsContainer.fluid #headerLogin .mls-nav { top: 10px; margin-right: 3px; } #myfontsContainer.fluid #headerLogin .mls-nav:not(.hide) ~ #userMenu { right: 27px; } @media screen and (max-width: 1199px) { #myfontsContainer.fluid #headerLogin .mls-nav { margin-right: 9px; top: 9px; margin-left: 8px; } #myfontsContainer.fluid #headerLogin .mls-nav:not(.hide) ~ #userMenu { right: 35px; } } @media screen and (max-width: 767px) { #myfontsContainer.fluid #headerLogin .mls-nav { top: 2px; margin-right: 6px; } #myfontsContainer.fluid #headerLogin .mls-nav:not(.hide) ~ #userMenu { right: 32px; } } @media screen and (max-width: 414px) { #myfontsContainer.fluid #headerLogin .mls-nav { margin-right: 10px; } #myfontsContainer.fluid #headerLogin .mls-nav:not(.hide) ~ #userMenu { right: 36px; } } #headerCart { position: absolute; top: 18px; right: 0; text-align: right; } #headerCart img { opacity: 1; vertical-align: middle; } #headerCart span { display: block; font-size: 14px; margin-top: 8px; } #headerCart a { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; } #headerLogin a { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; } #headerNav { clear: none; display: block; float: left; text-align: center; } #headerNav a { display: inline-block; font-size: 16px; margin: 0 20px 0 0; padding: 15px 0 10px; text-decoration: none; } #headerNav a + .menuArrow { position: relative; left: -10px; } #headerNav .navMenu { display: inline-block; padding-bottom: 10px; position: relative; } @media (min-width: 768px) and (max-width: 1199px) { #headerNav .navMenu { margin-left: 7px; } } #headerNav .navMenu > a { padding-bottom: 0; } #headerNav .navMenu a.toggle { background: url("/s/images/iconsets/myfonts/header_menu_arrow.svg") right 50% no-repeat; background-image: url("/s/images/iconsets/myfonts/header_menu_arrow.png") \9 ; padding: 0 15px 0 0; } #headerNav .navMenu a.toggle:hover { background-image: url("/s/images/iconsets/myfonts/header_menu_arrow_hover.svg"); background-image: url("/s/images/iconsets/myfonts/header_menu_arrow_hover.png") \9 ; } #headerNav .navMenu nav { background: #fff; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); line-height: 1.2em; margin-top: 5px; padding: 5px 0; position: absolute; left: -16px; text-align: left; white-space: nowrap; } #headerNav .navMenu nav a { display: block; font-size: 14px; margin: 0; padding: 8px 16px; text-decoration: none; } #headerNav .navMenu nav a:hover { background: #eee; color: #555; } #headerNavMobile { display: none; float: left; } #headerNavMobile button.icon { background: url("/s/images/iconsets/myfonts/mobile_menu.png") no-repeat; display: block; height: 16px; width: 20px; padding: 17px; background-position: 1px 9px; } #headerNavMobileHomepage { display: none; } .navMenu nav { position: absolute; } #myfontsContainer.fluid { width: 100%; } #myfontsContainer.fluid #myfontsBody { margin: 0 auto; width: 100%; } #myfontsContainer.fluid footer#mainFooter { width: 100%; } @media screen and (max-width: 840px) { #myfontsContainer.fluid footer#mainFooter nav.links { display: block; } #myfontsContainer.fluid footer#mainFooter nav.links a { box-sizing: border-box; display: inline-block; width: 20%; min-width: 140px; } } #myfontsContainer.fluid #myfontsHeader.fixHeader { height: 90px; padding: 10px 10px 0 10px; position: fixed; opacity: .5; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #myfontsContainer.fluid #myfontsHeader.fixHeader.show { opacity: 1; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; -webkit-transition: opacity 500ms; transition: opacity 500ms; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #myfontsContainer.fluid #headerLogotype { width: 73px; height: 41px; } #myfontsContainer.fluid #headerLogotype a { background-size: 73px 41px; width: 73px; height: 41px; } #myfontsContainer.fluid #headerLogin { right: 20px; position: relative; float: left; } #myfontsContainer.fluid #headerLogin a#headerLoginLink { top: 3px; } #myfontsContainer.fluid #headerLogin a#headerLoginLink > span:first-child { font-size: 14px; height: 1.3em; line-height: 1.3em; } #myfontsContainer.fluid #headerCart { top: 0; right: 10px; float: right; position: relative; } #myfontsContainer.fluid #headerCart #cart_image, #myfontsContainer.fluid #headerCart #cartImage { width: 28px; } #myfontsContainer.fluid #headerCart span { display: none; } #myfontsContainer.fluid #headerNav { clear: both; display: none; } #myfontsContainer.fluid #headerNav .navMenu nav { left: -8px; } #myfontsContainer.fluid #headerNav .navMenu nav a { font-size: 14px; margin: 0; } #myfontsContainer.fluid #headerNav .navMenu nav a.toggle { padding-right: 15px; } #myfontsContainer.fluid #headerNavMobile { display: block; } #myfontsContainer.fluid #headerContainer { position: absolute; top: 0; right: 0; } @media (min-width: 550px) and (max-width: 600px) { #myfontsContainer.fluid #myfontsHeader { height: initial; margin-bottom: 20px; } } @media (min-width: 600px) and (max-width: 767px) { .no-touchevents #myfontsContainer.fluid #headerNav { display: block; text-align: center; width: 100%; margin-bottom: 10px; } .no-touchevents #myfontsContainer.fluid #headerNav a { font-size: 13px; margin: 0 12px 0 0; } .no-touchevents #myfontsContainer.fluid #headerNav .navMenu nav { left: -50px; } .no-touchevents #myfontsContainer.fluid #headerNavMobile { display: none; } #myfontsContainer.fluid #myfontsHeader { height: 53px; padding: 0; } #myfontsContainer.respHomepage #myfontsHeader, #myfontsContainer.fluid #myfontsHeader.fixHeader { height: 53px; padding: 0 0 10px 10px; } #myfontsContainer.fluid #myfontsBody { margin-top: 50px; } } @media (min-width: 450px) and (max-width: 600px) { #myfontsContainer.fluid #myfontsHeader { padding-left: 5px; } } @media (min-width: 450px) and (max-width: 550px) { #myfontsContainer.fluid #myfontsHeader { height: 85px; } } @media screen and (max-width: 767px) { #myfontsContainer.fluid #headerLogin { top: 10px; line-height: 0; } #myfontsContainer.fluid #headerLogin #userMenu a.userMenu__item--desktopHidden { display: block; } } @media screen and (min-width: 768px) { #myfontsContainer.fluid { padding: 0 20px; } #myfontsContainer.fluid #myfontsBody { padding-top: 15px; } #myfontsContainer.fluid #myfontsHeader { height: 110px; line-height: inherit; padding: 10px 0 0 0; position: relative; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #myfontsContainer.fluid #headerLogotype { width: 96px; height: 54px; } #myfontsContainer.fluid #headerLogotype a { background-size: 96px 54px; width: 96px; height: 54px; } #myfontsContainer.fluid #headerLogin { top: 1px; right: -65px; } #myfontsContainer.fluid #headerLogin a#headerLoginLink { top: 11px; } #myfontsContainer.fluid #headerLogin #userMenu { top: 30px; } #myfontsContainer.fluid #headerCart { text-align: right; top: 18px; right: 0; } #myfontsContainer.fluid #headerCart #cart_image, #myfontsContainer.fluid #headerCart #cartImage { height: 16px; width: 22px; top: 2px; } #myfontsContainer.fluid #headerCart span { display: block; margin-top: 5px; } #myfontsContainer.fluid #headerNav { display: block; text-align: left; margin-left: 53px; margin-top: 15px; } #myfontsContainer.fluid #headerNav a { font-size: 14px; margin: 0 7px; padding: 0; } #myfontsContainer.fluid #headerNav a:first-child { margin-left: 0; } #myfontsContainer.fluid #headerNav .navMenu nav { left: -8px; } #myfontsContainer.fluid #headerNav .navMenu nav a { padding: 8px 16px; } #myfontsContainer.fluid #headerNav .navMenu a.toggle { padding-right: 15px; } #myfontsContainer.fluid #headerNavMobile { display: none; } } @media screen and (min-width: 720px) { #myfontsContainer.fluid #headerNav a { font-size: 16px; } } @media screen and (min-width: 1200px) { #myfontsContainer.fluid { padding: 0 2%; } #myfontsContainer.fluid #myfontsHeader { height: 110px; padding: 0 12px; } #myfontsContainer.fluid #headerLogotype { width: 161px; height: 90px; left: -9px; margin-right: 25px; } #myfontsContainer.fluid #headerLogotype a { background-size: 161px 90px; width: 161px; height: 90px; } #myfontsContainer.fluid #headerContainer { top: 7px; } #myfontsContainer.fluid #headerNav { clear: none; float: left; text-align: left; margin-left: 0; margin-top: 18px; } #myfontsContainer.fluid #headerNav a { margin: 0 20px 0 0; } #myfontsContainer.fluid #headerNav a + .menuArrow { position: relative; left: -10px; } #myfontsContainer.fluid #headerNav .navMenu nav { left: -16px; } #myfontsContainer.fluid #headerLogin { right: 20px; } #myfontsContainer.fluid #headerLogin a#headerLoginLink > span:first-child { font-size: 16px; height: 1.2em; line-height: 1.2em; } #myfontsContainer.fluid #headerCart img { margin-right: 5px; } #myfontsContainer.fluid #headerCart span { display: inline; margin-top: 8px; font-size: 16px; } #myfontsContainer.fluid #headerCart #cart_text, #myfontsContainer.fluid #headerCart #cartText { top: 0; right: 5px; } } @media screen and (min-width: 1300px) { #myfontsContainer.fluid #headerNav { width: 1010px; } } @media screen and (min-width: 1738px) { #myfontsContainer.fluid #headerNav { margin-top: 25px; } } @media screen and (min-width: 2000px) { #myfontsContainer.fluid { margin: 0 auto; } #myfontsContainer.fluid #headerNav { margin-right: 0; width: 950px; } } #myfontsContainer.respHomePage { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f6f6f6)); background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0); } #headerMyFonts { font-family: "myfonts logotype"; font-size: 72px; color: #00AAFF; } #myfontsContainer.fluid #headerLogin { top: 6px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #headerNavMobile button.icon { background: url("/s/images/iconsets/myfonts/mobile_menu@2x.png") no-repeat; background-size: 20px 16px; background-position: 1px 15px; margin: 0; padding: 17px; padding-bottom: 28px; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-width: 450px) { #myfontsContainer.respHomePage { padding: 0; } #myfontsContainer.respHomePage #myfontsHeader { padding: 10px 10px 0 10px; } #myfontsContainer.respHomePage #myfontsBody { padding-top: 10px; } #myfontsContainer.fluid #headerCart { top: 13px; right: 6px; } #myfontsContainer.fluid #headerLogin { top: 23px; right: 10px; } #myfontsContainer.respHomepage #headerCart, #myfontsContainer.respHomepage #myfontsHeader.fixHeader #headerCart { top: 13px; right: 16px; } #myfontsContainer.respHomepage #headerLogin, #myfontsContainer.respHomepage #myfontsHeader.fixHeader #headerLogin { right: 20px; } #myfontsContainer.fluid #myfontsHeader { padding: 10px 0 0 0; } #myfontsContainer.fluid #headerLogotype { margin: 2px 0 15px 0; } #myfontsContainer.fluid #headerNavMobile { margin-left: 5px; } #myfontsContainer.fluid #headerLogin #headerLoginUsername { width: 100px; overflow: visible; } #myfontsContainer.fluid #myfontsHeader.fixHeader { height: 119px; } #myfontsContainer.fluid #myfontsHeader.fixHeader #headerCart { right: 16px; } #myfontsContainer.fluid #myfontsHeader.fixHeader #headerLogin { right: 20px; } #myfontsContainer.respHomepage #myfontsHeader { height: initial; padding: 10px 10px 0 10px; } #myfontsContainer.respHomepage #myfontsHeader.fixHeader { padding: 10px 10px 0 10px; } } @media only screen and (max-device-width: 736px) and (min-device-width: 480px) and (orientation: landscape) { #myfontsContainer.fluid #myfontsHeader.fixHeader { height: 53px; padding: 0 10px; } #myfontsContainer.fluid #myfontsHeader.fixHeader #headerLogin { right: 30px; } #myfontsContainer.fluid #myfontsHeader.fixHeader #headerCart { right: 20px; } #myfontsContainer.respHomepage #myfontsHeader.fixHeader #headerLogin { right: 20px; } #myfontsContainer.respHomepage #myfontsHeader.fixHeader #headerCart { right: 10px; } #myfontsContainer.fluid #headerCart { top: 1px; right: 10px; } #myfontsContainer.fluid #headerLogin { top: 10px; right: 20px; } #myfontsContainer.fluid #myfontsHeader { padding: 0; height: 45px; } #myfontsContainer.respHomepage #myfontsHeader { padding: 0 10px; } #myfontsContainer.fluid #myfontsBody { padding-top: 0; } #myfontsContainer.fluid #headerLogotype { margin: 2px 0 0 0; } #myfontsContainer.fluid #headerNav { display: none; } #myfontsContainer.fluid #headerNavMobile { display: block; } } @media screen and (min-width: 1368px) { #superuser_bar ~ #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { top: 29px; } } @media screen and (min-width: 768px) and (max-width: 1367px) { #superuser_bar ~ #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { top: 29px; } } @media only screen and (max-width: 895px) { #superuser_bar ~ #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { top: 52px; } } @media screen and (max-width: 767px) { #superuser_bar ~ #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { top: 55px; } #superuser_bar ~ #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #mainFooter { margin-top: 150px; } } @media only screen and (max-width: 565px) { #superuser_bar ~ #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { top: 75px; } } @media screen and (max-width: 767px) { #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter { position: static; } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { left: 0; position: absolute; top: 0; background-color: #fff; z-index: 100; } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { top: 0; width: 959px; } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #myfontsBody { top: 110px; } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #mainFooter { position: relative; top: 110px; } } @media screen and (min-width: 768px) and (max-width: 1367px) { #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter { position: static; padding-top: 180px; } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { left: 0; position: absolute; top: 0; background-color: #fff; z-index: 100; } } @media screen and (min-width: 1368px) { #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter { position: static; padding-top: 160px; } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper { left: 0; position: absolute; top: 0; background-color: #fff; z-index: 100; } } @media screen and (max-width: 767px) { #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #headerCart span { display: none; } } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #myfontsHeader #headerLogin .favorites { top: 0; } @media screen and (min-width: 1368px) { #myfontsContainer.categoriesABtesting:not(.fluid):not(.fluid-mls).newHeaderFooter { padding-top: 260px; } } @media screen and (min-width: 1280px) and (max-width: 1367px) { #myfontsContainer.categoriesABtesting:not(.fluid):not(.fluid-mls).newHeaderFooter { padding-top: 306px; } } @media screen and (min-width: 1082px) and (max-width: 1279px) { #myfontsContainer.categoriesABtesting:not(.fluid):not(.fluid-mls).newHeaderFooter { padding-top: 328px; } } @media screen and (min-width: 768px) and (max-width: 1081px) { #myfontsContainer.categoriesABtesting:not(.fluid):not(.fluid-mls).newHeaderFooter { padding-top: 382px; } } @media screen and (max-width: 767px) { #myfontsContainer.categoriesABtesting:not(.fluid):not(.fluid-mls).newHeaderFooter { padding-top: 303px; } } @media screen and (max-width: 767px) { #myfontsContainer.fluid.newHeaderFooter #myfontsHeader, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader { padding: 0; } #myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerContainer, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerContainer { padding: 0; } } .newHeaderFooter .headerWrapper { background-color: #fff; width: 100%; position: relative; z-index: 100; } @media screen and (min-width: 1368px) { .newHeaderFooter .headerWrapper { padding: 32.5px 0 15px 0; } } @media screen and (min-width: 768px) and (max-width: 1279px) { .newHeaderFooter .headerWrapper { padding: 5px 0 10px 0; } } @media screen and (min-width: 1280px) { .newHeaderFooter .headerWrapper { padding: 32.5px 0 15px 0; } } .newHeaderFooter .headerWrapper #headerContainer { padding: 0 10px; } .newHeaderFooter .headerWrapper__categoriesWrapper { background-color: #f4f4f4; border: 1px solid #e2e2e2; box-sizing: border-box; padding: 4px 0; margin-top: 21px; } .newHeaderFooter .headerWrapper__categoriesWrapper-hidden { display: none; } @media screen and (max-width: 767px) { .newHeaderFooter .headerWrapper__categoriesWrapper { padding: 10px 12px 20px 12px; } } @media screen and (min-width: 1200px) { #myfontsContainer.fluid.categoriesABtesting.newHeaderFooter .headerWrapper__categoriesWrapper { width: 104%; margin-left: -2%; } } @media screen and (min-width: 768px) and (max-width: 1199px) { #myfontsContainer.fluid.categoriesABtesting.newHeaderFooter .headerWrapper__categoriesWrapper { width: calc(100% + 40px); margin-left: -20px; } } @media screen and (max-width: 767px) { #myfontsContainer.fluid.categoriesABtesting.newHeaderFooter .headerWrapper__categoriesWrapper { width: calc(100% + 20px); margin-left: -10px; } } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #myfontsHeader, #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter .headerWrapper__categoriesWrapper { min-width: 959px; } @media screen and (max-width: 767px) { #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #headerContainer { top: 14px; } #myfontsContainer:not(.fluid):not(.fluid-mls).newHeaderFooter #headerContainer #headerCart { top: 10px; } } @media screen and (max-width: 767px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter .headerWrapper #headerNavMobile, #myfontsContainer.fluid-mls.newHeaderFooter .headerWrapper #headerNavMobile, #myfontsContainer.newHeaderFooter .headerWrapper #headerNavMobile { display: block; } } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #headerContainer, #myfontsContainer.fluid-mls.newHeaderFooter #headerContainer, #myfontsContainer.newHeaderFooter #headerContainer { padding: 0 10px; top: 3px; position: absolute; right: 0; } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader, #myfontsContainer.newHeaderFooter #myfontsHeader { margin-left: auto; margin-right: auto; max-width: 1368px; padding: 0 10px; } @media screen and (max-width: 767px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader, #myfontsContainer.newHeaderFooter #myfontsHeader { height: auto; padding: 10px 5px; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader, #myfontsContainer.newHeaderFooter #myfontsHeader { padding: 0 10px; } } @media screen and (min-width: 1280px) and (max-width: 1367px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader, #myfontsContainer.newHeaderFooter #myfontsHeader { height: auto; display: flex; align-items: center; } } @media screen and (max-width: 365px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader, #myfontsContainer.newHeaderFooter #myfontsHeader { padding: 10px; } } @media screen and (min-width: 1368px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader, #myfontsContainer.newHeaderFooter #myfontsHeader { height: auto; display: flex; align-items: center; } } @media screen and (max-width: 767px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerCart, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerCart, #myfontsContainer.newHeaderFooter #myfontsHeader #headerCart { top: 0; } } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin { position: relative; float: left; } @media screen and (max-width: 767px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin { top: 10px; } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin .mls-nav, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin .mls-nav, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin .mls-nav { top: 0px; } } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername { overflow: hidden; text-overflow: ellipsis; } @media screen and (min-width: 1368px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername { max-width: 140px; } } @media screen and (min-width: 1280px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername { max-width: 140px; } } @media screen and (min-width: 768px) and (max-width: 1279px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername { max-width: 250px; } } @media screen and (max-width: 767px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin #headerLoginUsername { max-width: 200px; } } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin .favorites, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin .favorites, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin .favorites { top: 12px; position: relative; margin: 0 18px; font-size: 16px; line-height: 1.2em; } @media screen and (max-width: 1280px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin .favorites, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin .favorites, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin .favorites { font-size: 14px; } } @media screen and (max-width: 767px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin .favorites, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin .favorites, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin .favorites { display: none; } } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin .favorites-icon, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin .favorites-icon, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin .favorites-icon { display: inline-block; width: 20px; height: 15px; position: relative; top: 2px; background-image: url("/s/images/font_cards/favorite_md_selected.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 768px) { .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerLogin, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerLogin, #myfontsContainer.newHeaderFooter #myfontsHeader #headerLogin { right: 20px; } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerCart, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerCart, #myfontsContainer.newHeaderFooter #myfontsHeader #headerCart { float: right; position: relative; text-align: right; top: 18px; right: 0; } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerCart span, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerCart span, #myfontsContainer.newHeaderFooter #myfontsHeader #headerCart span { display: inline; top: 0; right: 5px; } .no-touchevents#myfontsContainer.fluid.newHeaderFooter #myfontsHeader #headerCart #cartImage, #myfontsContainer.fluid-mls.newHeaderFooter #myfontsHeader #headerCart #cartImage, #myfontsContainer.newHeaderFooter #myfontsHeader #headerCart #cartImage { top: 0; } } .newHeaderFooter #headerLogotypeNew { float: left; width: 127px; height: 60px; margin-right: 20px; position: relative; top: 10px; } .newHeaderFooter #headerLogotypeNew a { background: url("/s/images/logo/MyFonts_Logo_C_RGB_by_Monotype.svg") center center no-repeat; background-size: contain; display: block; width: 127px; height: 60px; } @media screen and (min-width: 768px) and (max-width: 1279px) { .newHeaderFooter #headerLogotypeNew { width: 96px; height: 54px; top: 4px; } .newHeaderFooter #headerLogotypeNew a { width: 96px; height: 54px; } } @media screen and (max-width: 767px) { .newHeaderFooter #headerLogotypeNew { width: 73px; height: 41px; top: 6px; left: -5px; } .newHeaderFooter #headerLogotypeNew a { background: url("/s/images/logo/header_logo.svg") center center no-repeat; background: url("/s/images/logo/header_logo_ie.png") center center no-repeat \9; width: 73px; height: 41px; background-size: contain; } } #mainFooter { color: #555; font-size: 13px; text-align: center; width: 939px; clear: both; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 30px auto 0 auto; padding: 0 0 30px 0; } #mainFooter nav.links { width: 100%; max-width: 810px; margin: 0 auto; } #mainFooter nav.links a { color: #555; padding: 13px; display: inline-block; } #mainFooter nav.links a:hover { color: #222; } #mainFooter nav.social { display: table; margin: 20px auto; width: 300px; } #mainFooter nav.social a { color: #ddd; display: table-cell; font-family: "Social-Network-Icons"; font-size: 28px; font-weight: normal; text-decoration: none; -moz-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } #mainFooter nav.social a:hover { color: #aaa; } #mainFooter .links { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; max-width: 100%; } @media screen and (min-width: 1200px) { #mainFooter .links { flex-direction: row; } } #mainFooter .brands { display: flex; justify-content: center; margin: 25px auto; } @media screen and (min-width: 1368px) { #mainFooter .brands { padding: 0 16%; } } @media screen and (min-width: 768px) and (max-width: 1367px) { #mainFooter .brands { padding: 0 16%; } } #mainFooter .brands img { width: 100%; } #mainFooter .brands_monotype img, #mainFooter .brands_olapic img, #mainFooter .brands_mosaic img, #mainFooter .brands_myfonts img { max-width: 185px; } 

#myfontsContainer:not(.fluid):not(.fluid-mls) .navigationBar { min-width: 939px; } .navigationBar { height: 36px; width: 100%; z-index: 99; position: relative; } @media only screen and (max-device-width: 736px) and (min-device-width: 480px) and (orientation: landscape) { .navigationBar { display: none; } } @media screen and (max-width: 767px) { .navigationBar { display: none; } } .navigationBar__linkWrapper { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-direction: row; height: 100%; justify-content: center; width: 100%; } .navigationBar__link { color: #666; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: 500; margin: 0 0.9em; text-align: center; } .navigationBar__link { font-size: 12px; } @media screen and (min-width: 768px) { .navigationBar__link { font-size: calc(12px + 4 * ((100vw - 768px) / 152)); } } @media screen and (min-width: 920px) { .navigationBar__link { font-size: 16px; } } .navigationBar__link:link, .navigationBar__link:visited { color: #666; text-decoration: none; } .navigationBar__link:hover { color: #09f; } .navigationBar__link--toggle { background: url("/s/images/iconsets/myfonts/header_menu_arrow.svg") right 50% no-repeat; padding: 0 15px 0 0; } .navigationBar__link--toggle:hover { background-image: url("/s/images/iconsets/myfonts/header_menu_arrow_hover.svg"); } .navigationBar__link--disabled { cursor: pointer; pointer-events: none; } .navigationBar__submenu { background-color: #fff; border: 1px solid #e2e2e2; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); display: none; position: absolute; z-index: 101; } .navigationBar__submenu--visible { display: block; } .navigationBar__submenu__linkWrapper { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; margin: 5px; } .navigationBar__submenu .navigationBar__link { line-height: 31px; text-align: left; } .navigationBar__submenu .navigationBar__link { font-size: 13px; } @media screen and (min-width: 768px) { .navigationBar__submenu .navigationBar__link { font-size: calc(13px + 1 * ((100vw - 768px) / 152)); } } @media screen and (min-width: 920px) { .navigationBar__submenu .navigationBar__link { font-size: 14px; } } 

#mobileNavMenu { background-color: #eee; box-shadow: inset -3px 0 5px #e6e6e6; font-size: 16px; line-height: 1.2em; padding: 10px 0; position: fixed; top: 0; left: -200px; bottom: 0; width: 200px; z-index: 101; -moz-transition: left 200ms ease-in-out; -o-transition: left 200ms ease-in-out; -webkit-transition: left 200ms ease-in-out; transition: left 200ms ease-in-out; } #mobileNavMenu a { color: #555; display: block; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding: 15px 25px; text-decoration: none; } #mobileNavMenu a:hover, #mobileNavMenu a:active { background: #ddd; } 

.searchBarWidget { display: flex; justify-content: center; width: 535px; } @media screen and (min-width: 768px) and (max-width: 1279px) { .searchBarWidget { width: 100%; padding-top: 12px; } } @media screen and (max-width: 767px) { .searchBarWidget { width: 100%; padding-top: 10px; } } .searchBarWidget form { clear: none; margin: 0; top: 0; max-width: 700px; width: 700px; display: flex; flex-flow: row nowrap; } @media screen and (min-width: 768px) and (max-width: 1279px) { .searchBarWidget form { max-width: none; width: 100%; margin: 0; } } @media screen and (max-width: 767px) { .searchBarWidget form { left: -5px; margin: 0 auto; float: none; width: 100%; } } .searchBarWidget_filter { order: 1; position: relative; flex: 0 0 auto; height: 40px; border: 1px solid #DFDEDE; border-right: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-color: #EFEFEF; box-sizing: border-box; padding: 8px 13px; color: #4a4a4a; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; cursor: pointer; display: flex; justify-content: center; align-items: center; } .searchBarWidget_filter span { font-size: 14px; } .searchBarWidget_filter .arrow-down { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #000; margin: 3px 5px 0 6px; } .searchBarWidget_filter .hidden { display: none; } .searchBarWidget_filter .items { text-align: left; position: absolute; top: 37px; left: 0; z-index: 1; background: #fff; border: 1px solid #DFDEDE; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); } .searchBarWidget_filter .items li { padding: 1em 1.5em 1em 1.2em; box-sizing: border-box; white-space: nowrap; } .searchBarWidget_filter .items li:hover { background: #EFEFEF; } .searchBarWidget_filter .items li:not(:last-child) { border-bottom: 1px solid #f4f4f4; } .searchBarWidget__query { order: 2; flex: 1 0; position: relative; } @media screen and (min-width: 768px) and (max-width: 1367px) { .searchBarWidget__query { width: 100%; min-width: auto; } } @media screen and (max-width: 767px) { .searchBarWidget__query { width: 100%; min-width: auto; } } .searchBarWidget__query input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 40px; border: 1px solid #DFDEDE; background-color: #fff; min-width: 100%; box-sizing: border-box; border-color: #DFDEDE; line-height: 20px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 15px; padding: 5px 7px; transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; } .searchBarWidget__query input::-webkit-input-placeholder { font-size: 15px; line-height: 20px; text-overflow: ellipsis; } .searchBarWidget__query input::-moz-placeholder { font-size: 15px; line-height: 20px; text-overflow: ellipsis; } .searchBarWidget__query input:-ms-input-placeholder { font-size: 15px; line-height: 20px; text-overflow: ellipsis; } .searchBarWidget__query input:-moz-placeholder { font-size: 15px; line-height: 20px; text-overflow: ellipsis; } .searchBarWidget__query input[placeholder] { font-size: 15px; line-height: 20px; text-overflow: ellipsis; } @media screen and (max-width: 767px) { .searchBarWidget__query input::-webkit-input-placeholder { opacity: 0; } .searchBarWidget__query input::-moz-placeholder { opacity: 0; } .searchBarWidget__query input:-ms-input-placeholder { opacity: 0; } .searchBarWidget__query input:-moz-placeholder { opacity: 0; } } .searchBarWidget__query input:focus::-webkit-input-placeholder { opacity: 0; } .searchBarWidget__query input:focus::-moz-placeholder { opacity: 0; } .searchBarWidget__query input:focus:-ms-input-placeholder { opacity: 0; } .searchBarWidget__query input:focus:-moz-placeholder { opacity: 0; } .searchBarWidget__query .auto_complete_results { position: absolute; background: #fff; border: 1px solid #666; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); border-width: 1px 2px 2px 1px; width: 100%; transition: display 1s ease-in-out; z-index: 100; } .searchBarWidget__query .auto_complete_results li { cursor: pointer; margin: 0; padding: 3px 5px; font-size: 11px; color: black; text-align: left; line-height: 1.2em; } .searchBarWidget__query .auto_complete_results li:hover { background-color: #09f; color: #fff; font-weight: bold; white-space: nowrap; } button[type=submit]#searchButton.searchBarWidget__searchButton { border-radius: 4px; background-color: #000; color: #fff; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: 500; line-height: 20px; text-transform: capitalize; padding: 10px 26px; margin: 0 11px; order: 3; cursor: pointer; float: left; } button[type=submit]#searchButton.searchBarWidget__searchButton .-search { display: block; } button[type=submit]#searchButton.searchBarWidget__searchButton .-searchMobile { display: none; } @media screen and (min-width: 768px) and (max-width: 1279px) { button[type=submit]#searchButton.searchBarWidget__searchButton { margin: 0 0 0 11px; } } @media screen and (max-width: 767px) { button[type=submit]#searchButton.searchBarWidget__searchButton { padding: 10px 7px; margin-left: 2px; } button[type=submit]#searchButton.searchBarWidget__searchButton .-search { display: none; } button[type=submit]#searchButton.searchBarWidget__searchButton .-searchMobile { display: block; } } button[type=submit]#searchButton.searchBarWidget__searchButton:hover { background-color: #09f; } .searchBarWidget__button input { margin: 0; padding: 1px 7px 1px; width: 100%; border-color: #666; box-shadow: none; box-sizing: border-box; vertical-align: middle; margin-left: 11px; height: 40px; order: 3; } 

#about_us_page ul { margin-bottom: 12px; } #about_us_page table#did_you_know tr td { padding: 12px; border-top: 1px solid #CCCCCC; vertical-align: middle; } #about_us_page table#did_you_know tr td:not(:first-child) { text-align: center; } #about_us_page table#did_you_know tr td img { margin-left: 12px; } #about_us_page table#did_you_know tr.first td { border-top-style: none; } #about_us_bios div.img { clear: right; float: right; } #about_us_bios h4 + p { margin-bottom: 24px; } 

form.add_bling_form { line-height: 2em; } form.add_bling_form img, form.add_bling_form input[type=radio] { vertical-align: middle; } form.add_bling_form label { white-space: nowrap; } form.add_bling_form input[type=text] { width: 75%; } 

.cart_button_wrapper { position: relative; } .cart_button_wrapper button { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-left: 6px; } #add_album_to_cart .cart_button_wrapper { top: 12px; } #add_family_to_cart .cart_button_wrapper { margin-top: 10px; } .cart_button_wrapper.float_right { float: right; margin-left: 10px; } a.add_to_cart, a.buying_choices, a.add_to_cart_client { display: inline-block; visibility: visible !important; float: right; height: inherit; } a.add_to_cart_client:active { color: #000000; } button.add_to_cart_button, button.buying_choices_button { border-radius: 3px; float: right; font-size: 14px; line-height: 16px; outline: none; padding: 2px 9px 4px; margin-top: 0; background: #f0f; } button.add_to_cart_button { background: #f0f; } button.add_to_cart_button:hover { background: #D900D9; } button.add_to_album_toggle, button.add_to_album_toggle_client { border-radius: 0 3px 3px 0; float: left; font-size: 8px; line-height: 16px; outline: none; padding: 3px 6px; } button.add_to_album_toggle::-moz-focus-inner { margin-top: -1px; margin-bottom: -1px; } button.only { border-radius: 3px; } button.add_to_album_toggle.only { background: #eee; color: #444; margin-top: 0; } button.add_to_album_toggle.only:hover { background: #ddd; } button.add_to_album_toggle.only span.label { font-size: 14px; } button.buying_choices_button:hover { background: #D900D9; } .open button.add_to_album_toggle.only { background: #ddd; } @-moz-document url-prefix() { button.add_to_album_toggle_client.only { line-height: 15px; } } button.add_to_cart_button + div.album_dropdown button.add_to_album_toggle_client { display: inline-block; } button.add_to_cart_button + button.add_to_album_toggle:hover { background: #D900D9; } .open button.add_to_cart_button + button.add_to_album_toggle { background: #D900D9; } button.buying_choices_button + button.add_to_album_toggle { background: #09f; } button.buying_choices_button + button.add_to_album_toggle:hover { background: #078adb; } .open button.buying_choices_button + button.add_to_album_toggle { background: #078adb; } .album_dropdown_goto { display: none; } div.add_to_album_dropdown { background: white; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); display: none; font-size: 14px; padding: 15px; position: absolute; text-align: left; top: 28px; right: 0; width: 275px; z-index: 8; } div.add_to_album_dropdown a { float: none; } div.add_to_album_dropdown a.info { font-size: 11px; margin-left: 10px; } div.add_to_album_dropdown a.album_dropdown_goto { color: #ccc; display: inline-block; font-family: 'ClickBits-Arrows'; margin-left: 10px; -webkit-font-smoothing: antialiased; } div.add_to_album_dropdown a.album_dropdown_goto:hover { color: #aaa; text-decoration: none; } div.add_to_album_dropdown li { margin-bottom: 1px; } div.add_to_album_dropdown.open { display: block; } div.add_to_album_dropdown.only { top: 23px; } div.add_to_album_dropdown button:disabled { color: #fff; } div.add_to_album_dropdown hr { background: #ddd; border: none; height: 1px; margin: 10px 0; } div.add_to_album_dropdown input[type=submit] { line-height: 18px; margin-left: 5px; padding: 4px 9px; } div.add_to_album_dropdown input[type=text] { font-size: 12px; width: 180px; } div.add_to_album_dropdown div.albums ul { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; line-height: 20px; padding: 10px 0 0; } div.add_to_album_dropdown iframe.dropdown_login_frame { width: 270px; height: 150px; } div.add_to_album_dropdown p.trialMsg { display: none; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.add_to_album_dropdown button:disabled + p.trialMsg { display: block; } div.add_to_album_dropdown .trial, div.add_to_album_dropdown_client .trial, div.add_to_album_dropdown .webfont, div.add_to_album_dropdown_client .webfont { margin: 10px 0; } div.add_to_album_dropdown .trial, div.add_to_album_dropdown_client .trial { margin-bottom: 20px; } div.add_to_album_dropdown .trial a.button, div.add_to_album_dropdown .trial button, div.add_to_album_dropdown_client .trial a.button, div.add_to_album_dropdown_client .trial button, div.add_to_album_dropdown .webfont a.button, div.add_to_album_dropdown .webfont button, div.add_to_album_dropdown_client .webfont a.button, div.add_to_album_dropdown_client .webfont button { box-sizing: border-box; float: right; margin: 0; text-align: center; width: 100px; } div.add_to_album_dropdown .trial p, div.add_to_album_dropdown_client .trial p, div.add_to_album_dropdown .webfont p, div.add_to_album_dropdown_client .webfont p { float: left; font-size: 13px; width: 150px; } ul#albumdetail li div.price { float: right; } .licintrotxt { padding-top: 0; padding-bottom: 15px; } .addcrtcombohead, .addcrtdiscounttxt { font-size: 15px; font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 5px; } .addcrtcomboor { background: #fff; font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding: 0 6px; position: absolute; top: 129px; left: 50%; margin-left: -15px; width: 20px; text-align: center; } .addcrtdiscounttxt { margin-top: 15px; } .cart_choose_params_popup { width: 500px; } .cart_choose_params_popup ul li { padding-left: 6px; padding-top: 3px; } .addcrtbuttons { padding-top: 5px; padding-right: 10px; float: right; } span.add_to_cart_unavailable { float: right; color: #999; background-color: #FCFCFC; padding: 6px; } .cartlicparams { border-bottom: solid 1px #cccccc; margin-top: 15px; } .addcrtcomboor + .cartlicparams { border-top: solid 1px #cccccc; } .addcrtlictypehldr, .addcrtlictypehldrttl, .addcrtcombohldr { clear: left; line-height: 1.5em; padding: 10px 10px 10px 10px; border: solid 0 blue; } .addcrtlictypehldr, .addcrtlictypehldrttl { cursor: pointer; } .addcrtlictypehldrttl { padding: 10px 10px 0 10px; } .addcrtlictypehldr.highlight, .addcrtlictypehldr:hover, .addcrtcombohldr:hover { background-color: #eeeeee; } .addcrtlictitle, .addcrtlictitlettl { font-size: 15px; font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding-bottom: 3px; padding-top: 3px; } .addcrtlictypeckb, .addcrtlictypeckbttl { width: 15px; padding: 8px 0 0 25px; float: left; border: solid 0 #cccccc; } .addcrtlictypeprice, .addcrtlictypepricettl { width: 70px; padding: 5px 0 0 10px; float: left; text-align: right; font-size: 16px; font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; border: solid 0 #cccccc; } .addcrtlicsmiconttl { width: 50px; height: 50px; } .addcrtlicsmicon { width: 50px; height: 50px; white-space: nowrap; overflow: hidden; background: url("/s/images/iconsets/myfonts/licensetypes.png") 0 0 no-repeat; margin-right: 3px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .addcrtlicsmicon { background-image: url("/s/images/iconsets/myfonts/licensetypes@2x.png"); background-size: 250px 50px; } } .comboform .addcrtlicsmicon { background-image: url("/s/images/iconsets/myfonts/licensetypescombo.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .comboform .addcrtlicsmicon { background-image: url("/s/images/iconsets/myfonts/licensetypescombo@2x.png"); background-size: 315px 60px; } } .addcrtfltleftaddtocart, .addcrtfltleftaddtocartttl { float: left; width: 50px; height: 50px; margin-top: 7px; margin-right: 7px; margin-bottom: 7px; border: solid 0 blue; } .addcrtfltlefaddstdcart, .addcrtfltlefaddstdcartttl { margin-top: 0; float: left; width: 300px; border: solid 0 red; font-size: 14px; } .addcrtcombohldr .addcrtfltlefaddstdcart, .addcrtcombohldr .addcrtfltlefaddstdcartttl { margin-top: 0; float: left; width: 260px; border: solid 0 red; font-size: 14px; } .addcrtfltlefaddstdcart div, .addcrtfltlefaddstdcartttl div { margin-top: 0; margin-left: 15px; border: solid 0 red; } .addcrtlicensetype-combo { background-position: -253px 0; height: 60px; width: 61px; margin: 0; } .addcrtlicensetype-web { background-position: 0 0; } .addcrtlicensetype-server { background-position: -50px 0; } .addcrtlicensetype-epub { background-position: -100px 0; } .addcrtlicensetype-desktop { background-position: -150px 0; } .addcrtlicensetype-app { background-position: -200px 0; } .addcrtcombohldr .addcrtlictypeprice, .addcrtcombohldr .addcrtlictypebutton { float: right; width: 155px; } .addcrtcombohldr .addcrtlictypeprice { padding-left: 0; } .addcrtcombohldr .addcrtlictypebutton { margin-top: 5px; } .addcrtcombohldr .origionalPrice, .addcrtcombohldr .comboPrice { display: inline-block; margin-left: 10px; } .addcrtcombohldr .originalPrice { color: red; text-decoration: line-through; } .addcrtcombohldr .originalPrice span { color: #000; } .addcrtcombohldr .comboPrice { color: red; } .addcrtcombohldr em { color: #D900D9; } .addcrtcombohldr .comboPrice, .addcrtcombohldr em { font-style: normal; font-weight: bold; } .addcrtcombohldr .addcombo { background: #f0f; float: right; } .addcrtcombohldr .addcombo:hover { background: #D900D9; } .addcrtcombohldr button.disabled, .addcrtcombohldr button.disabled:hover { background-color: #eee; color: #bababa; } .cursalePrice { font-size: 14px; color: red; display: block; } .newregularpricestrike { color: black; text-decoration: line-through; } .buying_choices_note { font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { .cart_button_wrapper.center_button { float: none; margin: 12px auto 0; width: 90px; padding-bottom: 24px; } div.add_to_album_dropdown { right: -119px; } } .comboform .addcrtlicensetype-app-paygo { background-image: url("/s/images/licensing/appcomboicon-paygo.png"); background-position: 7px 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .comboform .addcrtlicensetype-app-paygo { background-image: url("/s/images/licensing/appcomboicon-paygo@2x.png"); background-size: 39px 50px; } } .comboform .addcrtlicensetype-web-paygo { background-image: url("/s/images/licensing/webcomboicon-paygo.png"); background-position: 7px 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .comboform .addcrtlicensetype-web-paygo { background-image: url("/s/images/licensing/webcomboicon-paygo@2x.png"); background-size: 38px 50px; } } .favorite { background-image: url("/s/images/font_cards/favorite.png"); background-repeat: no-repeat; background-position: center center; background-color: #eee; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .favorite { background-image: url("/s/images/font_cards/favorite@2x.png"); background-size: 13px 12px; } } #add_family_to_cart .cart_button_wrapper .ac-favorite-root { float: right; } #cart_buttons .add_to_cart button::-moz-focus-inner, #cart_buttons .buying_choices button::-moz-focus-inner { margin: 0; } #cart_buttons .add_to_cart button::-moz-focus-inner, #cart_buttons .add_to_cart_client button::-moz-focus-inner, #cart_buttons .buying_choices button::-moz-focus-inner { margin-top: -1px; margin-bottom: -1px; } #add_family_to_cart .favorite { width: 40px; height: 40px; float: left; background-size: 22px 20px; background-image: url("/s/images/font_cards/favorite_lg.png"); border-radius: 3px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #add_family_to_cart .favorite { background-image: url("/s/images/font_cards/favorite_lg@2x.png"); background-size: 20px 18px; } } .no-touchevents #add_family_to_cart .favorite:hover, #add_family_to_cart .selected .favorite { background-image: url("/s/images/font_cards/favorite_lg_selected.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .no-touchevents #add_family_to_cart .favorite:hover, #add_family_to_cart .selected .favorite { background-image: url("/s/images/font_cards/favorite_lg_selected@2x.png"); background-size: 20px 18px; } } #overview_samples button.add_to_cart_button, #overview_samples button.buying_choices_button, #overview_samples button.add_to_album_toggle { line-height: 17px; margin-top: 6px; font-size: 12px; } #overview_samples button.add_to_cart_button::-moz-focus-inner, #overview_samples button.buying_choices_button::-moz-focus-inner, #overview_samples button.add_to_album_toggle::-moz-focus-inner { margin-top: -1px; margin-bottom: -1px; } #overview_samples button.add_to_album_toggle.only span.label { font-size: 12px; } #overview_samples button.add_to_album_toggle { margin-top: 6px; padding: 2px 6px; font-size: 8px; } #add_family_to_cart .fc-authenticate { top: 46px; right: 159px; } .search-result-item button.add_to_album_toggle.only span.label { font-size: 11px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; letter-spacing: 0.05em; } 

.fake_foundry_login_bar { background-color: #FFFFF0; border: 1px solid black; padding: 1em; margin-bottom: 12px; line-height: 10px; } .auto_complete_li:hover { background-color: #0099FF; } .auto_complete_li_selected { background-color: #0099FF; } 

#album li.drag { cursor: move; position: relative; } #album li.drag a { cursor: pointer; } #album ul.sampleslist li { border-bottom: solid 1px #CCCCCC; padding: 5px 0px 0px 0px; } #album div.whole_div { padding-bottom: 20px; } #album .sample .font_name { float: left; padding-top: 6px; font-size: 12pt; } #album div.sampleImage { overflow: hidden; margin-top: 10px; margin-bottom: 10px; } #album .rollover_buttons { width: 200px; height: 35px; float: right; padding-right: 5px; text-align: right; } #album ul.sampleslist li.drag:hover { background-color: #f6f6f6; } #album .fresh { color: gray; } div#share_album_box form { display: none; } form.share_album_form { width: 400px; } form.share_album_form div.fieldhead { margin-top: 6px; } form.share_album_form h3.sectionsep { margin-top: 12px; padding-top: 6px; border-top: 1px solid black; } form.share_album_form input { width: 98%; } form.share_album_form textarea { width: 99%; height: 8em; } form.share_album_form div.buttons input { width: auto; } #album { width: 100%; } #album .side_column { width: initial; } #album #font-testdrive-new #sort-container { display: none; } #album #font-testdrive-new #font-options { float: right; } #album .two_column_layout .main_column { width: inherit; } #album .main_column .autobox-with-tabs { width: 720px; float: left; } #album-td #font-testdrive-new #font-options { float: right; } #album-td .two_column_layout .main_column { width: 100%; } #album-td #font-testdrive-new .right-options { width: 100%; border-top: 1px solid #dddddd; padding: 0 5px; } #album-td #font-testdrive-new .image_checkbox { float: right; } #album-td #font-testdrive-new .back-to-top { float: right; } #album-td #font-testdrive-new #color-picker + .dropdown-modal { left: -281px; } #album-td #font-testdrive-new #font-options .dropdown-modal #color-toggle:before { margin-left: 246px; } #album-td #font-testdrive-new #font-options .dropdown-modal #color-toggle:after { margin-left: 247px; } #album-td #font-testdrive-new #advanced-options + .dropdown-modal { left: -430px; } #album-td #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 456px; left: 34px; } #album-td #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 455px; left: 34px; } #album-td #font-testdrive-new #display-options + .dropdown-modal { left: -175px; } #album-td #font-testdrive-new #font-options .dis-options ul:first-child:before { margin-left: 251px; } #album-td #font-testdrive-new #font-options .dis-options ul:first-child:after { margin-left: 250px; } 

#announcement_bar { background: #0092F5; color: #fff; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; height: 38px; line-height: 38px; overflow: hidden; padding: 12px 0px; position: relative; text-align: left; z-index: 999; } span#announcement_bar_text { display: block; overflow: hidden; position: absolute; top: 12px; bottom: 12px; left: 20px; right: 60px; } a#announcement_bar_close { border: 2px solid #005492; border-radius: 14px; color: #005492; font-size: 22px; height: 24px; line-height: 20px; position: absolute; top: 17px; right: 17px; text-align: center; text-decoration: none; width: 24px; } a#announcement_bar_close:hover { border-color: #04284C; color: #04284C; } 

#artwork legend { font: 700 14px Arial, Helvetica, sans-serif; padding: 0 5px; margin: 0 10px; color: #73b304; } #artwork .progressWrapper { width: 357px; overflow: hidden; } #artwork .progressContainer { margin-bottom: 5px; padding: 4px; border: solid 1px #E8E8E8; background-color: #F7F7F7; overflow: hidden; } #artwork .message { margin: 1em 0; padding: 10px 20px; border: solid 1px #FFDD99; background-color: #FFFFCC; overflow: hidden; } #artwork .red { border: solid 1px #B50000; background-color: #FFEBEB; } #artwork .green { border: solid 1px #DDF0DD; background-color: #EBFFEB; } #artwork .blue { border: solid 1px #CEE2F2; background-color: #F0F5FF; } #artwork .progressName { font-size: 8pt; font-weight: 700; color: #555; width: 323px; height: 14px; text-align: left; white-space: nowrap; overflow: hidden; } #artwork .progressBarInProgress, #artwork .progressBarComplete, #artowrk .progressBarError { font-size: 0; width: 0%; height: 2px; background-color: blue; margin-top: 2px; } #artwork .progressBarComplete { width: 100%; background-color: green; visibility: hidden; } #artwork .progressBarError { width: 100%; background-color: red; visibility: hidden; } #artwork .progressBarStatus { margin-top: 2px; width: 337px; font-size: 7pt; font-family: Arial; text-align: left; white-space: nowrap; } a.progressCancel { font-size: 0; display: block; height: 14px; width: 14px; background-image: url(/widgets/artwork/cancelbutton.gif); background-repeat: no-repeat; background-position: -14px 0px; float: right; } #artwork a.progressCancel:hover { background-position: 0px 0px; } #artwork { width: 939px; } #artwork_table tr th, #artwork_table tr td { clear: both; text-align: left; padding: 12px 6px; } #artwork_table tr th { font-weight: bold; vertical-align: bottom; } #artwork_table tr td { border-top: 1px solid #CCCCCC; vertical-align: middle; } #artwork_table tr td.edit a { color: #0099ff; } #artwork_table tr td.edit { } #artwork_table tr td label.disabled { color: grey; } #artwork_table tr td.thumbnail { width: 200px; } #artwork_table tr td.thumbnail img.thumbnail_poster { width: 200px; height: 100px; } #artwork_table tr td.thumbnail img.thumbnailflag { width: 200px; height: 200px; } #artwork_table tr td.center { text-align: center; } #artwork_table tr td span.none { font-style: italic; } 

#exit-modal { display: none; } .site-logo { text-indent: -999em; width: 138px; height: 68px; background: transparent url("/s/images/logo/header_logo.svg") center no-repeat; background-size: contain; } .bundles-promo { margin: -12px; padding: 50px 20px 174px; text-align: center; background-size: contain; background: transparent url("/s/images/bundles/bundles-promo-bg.png") center bottom no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .bundles-promo { background-image: url("/s/images/bundles/bundles-promo-bg@2x.png"); background-size: contain; } } .bundles-promo h2 { margin-bottom: 17px; font-size: 28px; } .bundles-promo p { max-width: 28em; margin: 0 auto 20px; font-size: 19px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bundles-promo .site-logo { margin: 0 auto 20px; } .bundles-promo input[type=email] { width: 286px; font-size: 18px; padding: 9px 10px; margin-right: 8px; } .bundles-promo button { font-size: 18px; padding: 11px 19px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #bundles .content { max-width: 1722px; margin: 0 auto; margin-bottom: 10px; } #bundles .regular-price, #bundles .regularprice { font-weight: normal; } 

form.cart_list_filters { border-bottom: 1px solid #999; padding-bottom: 12px; } table.cart_list_filters { width: 100%; } table.cart_list_filters tr td:first-child { font-weight: bold; } p.license_params_Options_Pop_Warning { right: 50px; display: block; width: 200px; margin-top: -5px; right: 120px; color: black; padding-left: 6px; padding-top: 6px; padding-bottom: 6px; background-color: #FFD; border: 1px solid #E58C17; font-size: 12px; line-height: 1.4; position: absolute; } table.cart_list_filters tr td { padding: 3px; vertical-align: top; } table.cart_list_filters ul li { display: inline; padding-right: 16px; white-space: nowrap; } table.cart_list_filters ul li img { position: relative; top: 3px; } div.cart_list { clear: both; } table.cart_list { width: 100%; clear: both; } table.cart_list ul + br { display: none; } table.cart_list th { padding-top: 18px; background-color: white; font-weight: bold; } table.cart_list th, table.cart_list td { padding: 10px 6px 10px 6px; text-align: left; } table.cart_list td.edit a { white-space: nowrap; /* opacity: 0.8; filter: alpha(opacity=80); } table.cart_list td.edit a.active { opacity: 1.0; filter: alpha(opacity=100); */ } table.cart_list th.remove, table.cart_list td.remove { text-align: center; } table.cart_list th.price, table.cart_list td.price { text-align: right; } table.cart_list td { background-color: #f5f5f5; border-bottom: 4px solid white; } table.cart_list td.pack_header { width: 100px; } .pack_header_asorder { vertical-align: top; padding-top: 15px; border: solid 0px red; } table.cart_list td.pack_header .pack_name { font-size: 16px; } table.cart_list td.pack_header .pack_name_order_version { color: #0098FF; font-size: 17px; } .asorderheader { padding-left: 15px; padding-top: 5px; padding-bottom: 5px; font-size: 11px; } table.cart_list td.pack_header .pack_id, table.cart_list td.pack_header .style_count, table.cart_list .usage_label, table.cart_list span.promo_tag, table.cart_list .notforsale { font-size: 12px; white-space: nowrap; color: #666666; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } table.cart_list td.webfont_desc { text-align: right; } table.cart_list td.expando span.hackhackhack, table.cart_list td.license span.licenselink { font-size: 14px; } table.cart_list td a.changelink { font-size: 12px; font-weight: normal; } table.cart_list a.change { visibility: hidden; } table.cart_list form input.users { width: 5em; } table.cart_list form div.submit_hint { position: absolute; z-index: 100; padding: 3px; background-color: white; border: 1px solid black; } table.cart_list tr.pack_webfont_row:not(.pack_header_row) td, table.cart_list tr.pack_details_row td { border-top-style: none; } table.cart_list tr.pack_details_row td.pack_details { padding-right: 6px; border-top: 1px solid #E8E8E8; } table.cart_list div.style_listing_group_heading { font-weight: bold; margin-top: 12px; } table.cart_list div.style_listing { position: relative; overflow: hidden; padding-top: 12px; font-size: 10px; line-height: 18px; } table.cart_list div.style_listing div.style_icons { float: right; } table.cart_list div.style_listing div.style_icons img { margin-left: 4px; vertical-align: middle; } table.cart_list tr.warning td { background-color: #FFFFCC; } table.cart_list td.warning { font-weight: bold; color: red; } table.cart_list td.expando { text-align: center; padding-top: 0.7em; padding-right: 0; color: #666666; width: 1em; font-size: 13px; cursor: default; } .expandoasorder { width: 0px; } table.cart_list td.formats ul + form { margin-top: 6px; } table.cart_list td.formats { width: 395px; } table.cart_list td.formats .format { border-left: solid 1px #bbbbbb; width: 130px; float: left; padding-left: 15px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #submit_order_form table.cart_list td.formats .format { width: 115px; } table.cart_list td.formats .fortext { width: 20px; float: left; font-style: italic; padding-top: 12px; } table.cart_list td.formats .users { width: 185px; float: left; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding-top: 4px; padding-left: 15px; } #submit_order_form table.cart_list td.formats .users { width: 130px; } table.cart_list td.formats .formats_order_version { border-left: solid 0px #bbbbbb; width: 335px; float: left; padding-left: 15px; font-weight: normal; } .cart_list p.ios_warning { color: #444; font-size: 12px; padding-top: 8px; } .updateordersection { clear: both; padding-top: 5px; } .updateordersection a:hover { text-decoration: none; } .subscription .updateordersection { padding-top: 28px; } .updatetitle { font-size: 15px; color: #1fa41d; font-weight: bold; } .updatedesc { padding-bottom: 15px; font-size: 12px; color: #555555; width: 250px; } .updateprice { font-size: 12px; color: #000000; padding-left: 10px; font-weight: bold; } .updateversionitems { margin-bottom: 10px; } .updatedownloadprevvers { font-size: 12px; color: #878787; width: 250px; cursor: pointer; } .updatedownloadprevversbtns { margin-top: 6px; clear: left; } .updatedownloadshowanyways { display: inline-block; margin-top: 6px; clear: left; } .updatereleasedate { font-size: 11px; color: #000000; padding-left: 10px; } table.cart_list td.license .lic { border-left: solid 1px #bbbbbb; width: 90px; padding-left: 15px; } table.cart_list td.formats ul li { white-space: nowrap; } table.cart_list td.download { white-space: nowrap; font-size: smaller; vertical-align: middle; } table.cart_list td.download a.download { color: black; text-decoration: none; background: url("/s/images/download/download_arrow_small.gif") no-repeat left center; height: 18px; display: block; padding: 6px 0px 0px 20px; margin-top: 2px; margin-bottom: 2px; } table.cart_list td.download a.nodownload { color: black; padding-left: 20px; display: block; } table.cart_list td.download a.nodownload:hover { text-decoration: underline; } table.cart_list td.charsets img { padding-right: 2px; padding-bottom: 2px; } table.cart_list .button { margin-right: 8px; } form.cart_update_popup { width: 580px; } form.cart_update_popup p { font-size: 11px; } form.cart_update_popup p.license_category { font-weight: bold; } form.cart_update_popup p.note { color: #999; } form.cart_update_popup div.settings_box { border: 1px solid #bbbbbb; padding: 5px 5px 10px 10px; margin-top: 12px; } .changelicbtns { text-align: right; margin-top: 5px; } form.cart_update_popup div.desktop_lic { float: left; width: 49%; } form.cart_update_popup div.webfont_lic { float: right; clear: right; width: 49%; } form.cart_update_popup div.combo_lic { margin-top: 15px; margin-bottom: 15px; background-color: #FFFFCC; text-align: center; clear: both; width: 99%; } form.cart_update_popup div.settings_box.disabled > *:not(.license_category) { color: #999; } .fltleftpacklist { float: left; width: 25px; height: 25px; margin-top: 7px; margin-right: 3px; margin-bottom: 7px; } .settings_box .fltleftpacklist { margin-top: 10px; margin-right: 15px; } .settings_box .licensetypesm-web { margin-top: 18px; } .fltlefstdcart { float: left; line-height: 14px; margin-top: 13px; margin-left: 8px; } .settings_box .fltlefstdcart { margin-top: 8px; margin-bottom: 8px; } .fltlefstddesktopcart { float: left; line-height: 14px; margin-top: 6px; margin-left: 8px; } .cartlicenseformat { font-weight: 500; margin-top: 1px; } .removelicense { width: 20px; height: 20px; float: right; } .addlicbtn { float: left; width: 40px; padding-top: 5px; } .addlicbtn input { padding: 0px; width: 20px; height: 20px; } .addlic { margin-top: 3px; float: left; width: 475px; } .webboxicon { overflow: hidden; background: url("/s/images/iconsets/myfonts/box-web-74.png") 0 0 no-repeat; margin-right: 3px; } .webboxicon:hover { text-decoration: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .webboxicon { background-image: url("/s/images/iconsets/myfonts/box-web-74@2x.png"); -moz-background-size: 34px 34px; -ie-background-size: 34px 34px; -o-background-size: 34px 34px; -webkit-background-size: 34px 34px; background-size: 34px 34px; } } .downloadicon { background-image: url("/s/images/iconsets/myfonts/download.png"); background-position: right center; background-repeat: no-repeat; display: inline-block; font-size: 12px; padding: 5px 30px 5px 10px !important; } .downloadicon:hover { text-decoration: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .downloadicon { background-image: url("/s/images/iconsets/myfonts/download@2x.png"); -moz-background-size: 24px 18px; -ie-background-size: 24px 18px; -o-background-size: 24px 18px; -webkit-background-size: 24px 18px; background-size: 24px 18px; } } a.downloadbtn { background-color: #09F; background-image: url("/s/images/iconsets/myfonts/download.png"); background-position: right center; background-repeat: no-repeat; border-radius: 2px; box-shadow: inset 0px 5px 15px rgba(255, 255, 255, 0.2); color: #fff; display: inline-block; font-size: 1.1em; margin-right: 10px; padding: 5px 30px 5px 8px; border-color: #0084dc; border-style: solid; border-width: 1px; } a.downloadbtn:hover { background-color: #078adb; border-color: #007acb; } a.downloadbtn:active { background-color: #06C; color: #ccc; text-decoration: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { a.downloadbtn { background-image: url("/s/images/iconsets/myfonts/download@2x.png"); -moz-background-size: 24px 18px; -ie-background-size: 24px 18px; -o-background-size: 24px 18px; -webkit-background-size: 24px 18px; background-size: 24px 18px; } } .downloadupdateicon { background: url("/s/images/iconsets/myfonts/download.png") right center no-repeat; font-size: 12px; } .downloadupdateicon:hover { text-decoration: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .downloadupdateicon { background-image: url("/s/images/iconsets/myfonts/download@2x.png"); -moz-background-size: 24px 18px; -ie-background-size: 24px 18px; -o-background-size: 24px 18px; -webkit-background-size: 24px 18px; background-size: 24px 18px; } } a.downloadupdatebtn { background-color: #26ce22; border: 1px solid #20ae1d; border-radius: 2px; box-shadow: inset 0px 5px 15px rgba(255, 255, 255, 0.2); color: #fff; display: inline-block; font-size: 1.1em; margin: 10px 10px 5px 0; padding: 5px 30px 5px 8px; } a.downloadupdatebtn:hover { background-color: #22b61e; } a.downloadupdatebtn:active { background-color: #188015; text-decoration: none; } .downloadallbtn { font-size: 1.1em; margin-top: 0px; margin-bottom: 5px; padding: 5px 5px 5px 17px; text-align: left; background-color: #f5f5f5; } .downloadallbtn input[type=submit] { margin-right: 8px; } .helpicon { padding: 0px 22px 0px 0px; white-space: nowrap; overflow: hidden; background: url("/s/images/iconsets/myfonts/helpicongray.png") 0 0 no-repeat; margin-right: 3px; } .helpicon:hover { text-decoration: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .helpicon { background-image: url("/s/images/iconsets/myfonts/helpicongray@2x.png"); -moz-background-size: 20px 20px; -ie-background-size: 20px 20px; -o-background-size: 20px 20px; -webkit-background-size: 20px 20px; background-size: 20px 20px; } } button.mls-started { margin-top: 28px; } .cartWebfontInfo { float: right; width: 337px; margin-top: 8px; } #totalAppLicenses { font-weight: bold; } .licensingdetails { display: none; } .applicensesnumplatforms { width: 30px; } .helpmessageholder { position: absolute; display: none; z-index: 1000; } .webhelp { left: 80px; top: -22px; } .desktophelp { left: 100px; top: -22px; } .apphelp { left: 280px; top: -22px; } .serverhelp { left: 50px; top: -22px; } .epubhelp { left: 140px; top: -22px; } .helpmessagepointer { float: right; width: 19px; height: 62px; background-image: url("/s/images/iconsets/myfonts/pointer-blue-right.png"); background-repeat: no-repeat; background-position: center left; } .helpmessage { float: left; height: 40px; width: 160px; background-color: #ffffff; border-top: solid 1px #359be6; border-bottom: solid 1px #359be6; border-left: solid 1px #359be6; padding: 10px 10px 10px 10px; line-height: 12px; color: #4c4c4c; } .cart_list a.help { background: transparent; border: 1px solid #999; border-radius: 50%; color: #999; display: inline-block; font-weight: bold; height: 14px; line-height: 14px; width: 14px; overflow: visible; padding: 2px; position: relative; left: -5px; text-align: center; } .cart_list a.help .help_tooltip { font-size: 14px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; position: absolute; top: 30px; left: 50%; margin-left: -175px; width: 320px; } #btnAddAnotherTitle { line-height: 42px; } .applicsrows div { float: left; } .appfor { padding-left: 15px; width: 30px; } .appplatormios { width: 55px; padding-left: 6px; } .appplatormandroid { width: 80px; padding-left: 6px; } .appplatormwindows { width: 90px; padding-left: 6px; } .apphelpicon { width: 30px; padding-left: 20px; } .applicstotals div { float: right; } .totalAppLicensesprice { width: 100px; font-weight: bold; } .totalAppLicenses { width: 200px; } .applicsrows { clear: left; } .section_switchLic { display: none; } .licensetypesm-web-paygo { width: 25px; height: 33px; } .licensetypesm-app-paygo { background-image: url("/s/images/iconsets/myfonts/app-paygo.png"); background-position: 0px 0; height: 33px; top: -4px; -moz-background-size: 25px 33px; -ie-background-size: 25px 33px; -o-background-size: 25px 33px; -webkit-background-size: 25px 33px; background-size: 25px 33px; } 

#cart_page { max-width: 980px; min-height: 250px; margin: 0 auto; padding: 10px; color: #4a4a4a; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #cart_page * { box-sizing: border-box; -webkit-text-size-adjust: 100%; } #cart_page h1, #cart_page h2, #cart_page h3, #cart_page h4 { color: #4a4a4a; font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #cart_page h3 { color: #000; } #cart_page h2.large { font-size: 40px; clear: both; margin-bottom: 0.6em; color: #000; } #cart_page button.user_cancel, #cart_page button.user_update_button { display: inline-block; text-align: center; cursor: pointer; border-radius: 3px; width: 109px; height: 26px; padding: 3px 0 7px; font-size: 13px; line-height: 18.2px; } #cart_page button.user_cancel, #cart_page button.user_cancel:hover { background: #D7D7D7; color: #636263; } #cart_page button.user_update_button, #cart_page button.user_update_button:hover { background: #0099FF; color: #fff; } #cart_page button.user_cancel[disabled], #cart_page button.user_update_button[disabled] { cursor: default; } #cart_update strong { color: #4a4a4a; font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #cart_page_footer { padding: 10px; } div.pack_header_wrapper { background: #f4f4f4; margin: 0 auto; max-width: 980px; padding: 15px 15px 15px 10px; margin-bottom: 2px; font-size: 16px; } div.pack_header_wrapper .family { display: table; float: left; } div.pack_header_wrapper div.pack_name { padding: 0 5px; display: table-cell; vertical-align: middle; float: left; color: #0099FF; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.pack_header_wrapper div.pack_name:not(.sub)::after { content: "|"; padding-left: 8px; color: #4a4a4a; } div.pack_header_wrapper div.style_count { float: left; padding: 0 8px; position: relative; top: 1px; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #5C5C5C; } @media only screen and (min-width: 300px) and (max-width: 714px) { div.pack_header_wrapper div.style_count { width: 60%; font-size: 11px; clear: both; } div.pack_header_wrapper div.pack_name:not(.sub)::after { content: ""; padding-left: 0; } } @media only screen and (max-device-width: 580px) { div.pack_header_wrapper div.style_count { float: none; padding: 0 5px !important; width: 100%; display: block; clear: both; } } @media only screen and (min-device-width: 320px) and (max-device-width: 400px) { div.pack_header_wrapper div.style_count { font-size: 9px; } } div.font_face_row { background: none; position: relative; margin: 0 auto; } div.font_face_row div.font_face_wrapper { float: left; width: 100%; margin: 0 auto; display: none; background: #f4f4f4; margin-bottom: 2px; } div.font_face_row div.font_face_wrapper * { box-sizing: border-box; } div.font_face_row div.font_face_box { background: url("images/font-table-border.png") repeat-y right; float: none; position: relative; background: #f4f4f4; display: inline-block; vertical-align: top; width: 33.33%; height: 86px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; padding: 13px 15px; overflow: hidden; } div.font_face_row div.font_face_box:after { pointer-events: none; content: ''; width: 25px; position: absolute; height: 100%; right: 0; top: 0; -webkit-box-shadow: inset -20px 0 18px #f4f4f4; box-shadow: inset -20px 0 18px #f4f4f4; } div.font_face_row div.font_face_box img { max-width: none; max-height: 36px; margin-left: -5px; } div.font_face_row div.font_face_box:nth-child(3n+1) { border-left: none; } div.font_face_row div.font_face_box div.font_face_text { margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div.font_face_row div.font_face_box div.font_face_text img { max-width: 50%; height: 45px; } div.font_face_row div.font_face_box.single, div.font_face_row div.font_face_box.double:last-child { border-right: 2px solid #fff; width: calc(33.33% + 2px); width: -webkit-calc(33.33% + 2px); width: -o-calc(33.33% + 2px); width: -moz-calc(33.33% + 2px); } div.font_face_row div.font_face_box.single, div.font_face_row div.font_face_box.double, div.font_face_row div.font_face_box.full { border-bottom: 0; } @media only screen and (min-width: 300px) and (max-width: 714px) { div.font_face_row div.font_face_wrapper div.font_face_box.lastrow.full:nth-child(3n+1) { border-bottom: 2px solid #fff; } div.font_face_row div.font_face_wrapper div.font_face_box:nth-child(3n+1) { border-left: 2px solid #fff; } div.font_face_row div.font_face_wrapper div.font_face_box:nth-child(2n+1) { border-left: none; } div.font_face_row div.font_face_box { width: 50%; } div.font_face_row div.font_face_box:last-child, div.font_face_row div.font_face_box.border:nth-last-child(2) { border-bottom: 0; } div.font_face_row div.font_face_box.single-small, div.font_face_row div.font_face_box.full:nth-last-child(3) { border-bottom: 2px solid #fff; } div.font_face_row div.font_face_box.double:last-child { border-right: 0; } div.font_face_row div.font_face_box.single { width: 50%; border-right: 0; } div.font_face_row div.font_face_box.single-small:last-child { border-right: 2px solid #fff; width: calc(50% + 2px); width: -webkit-calc(50% + 2px); width: -o-calc(50% + 2px); width: -moz-calc(50% + 2px); border-bottom: 0; } div.font_face_row div.font_face_box.single-small:nth-last-child(2) { border-bottom: 2px solid #fff; } } div.inner_row { position: relative; display: block; margin: 0 auto; width: 100%; } #spacer { height: 100px; } .active, .active_fonts { display: block !important; } #bottom_border hr { border: 1px solid #E0E0E0; margin: 0 auto; } .right_arrow { display: block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid #888888; } .rotate-90 { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } div.expando { padding: 0 5px; display: table-cell; vertical-align: middle; color: #888888; cursor: pointer; } a.fontface_reveal { color: #888888 !important; } a.fontface_reveal:hover { text-decoration: none; } div.remove_button_wrapper { position: absolute; width: 36px; height: 36px; top: -10px; right: -10px; padding: 9px; } div.remove { background: #D7D7D7; text-align: center; display: table; width: 18px; height: 18px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } div.remove:hover, div.remove:active { background: #FF0000; color: #fff; } div.remove-x { display: table-cell; vertical-align: middle; color: #4A494A; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; transform-origin: 40% 45%; -moz-transform-origin: 7.1875px 9.04px; -webkit-transform-origin: 40% 45%; } div.remove-x span { color: #4A494A; text-decoration: none; font-size: 19px; text-align: center; line-height: 0; } div.remove-x:hover, div.remove-x:hover span { color: #ffffff; } div.remove-x span:hover, div.remove-x span:active { color: #ffffff; } div.formats-wrapper { position: relative; margin: 0 auto; max-width: 980px; clear: both; } div.license_wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; min-height: 50px; margin-bottom: 2px; } div.license_wrapper > div { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } div.license_type { background: #f4f4f4; float: none; padding: 0 5px; width: 25%; display: inline-block; vertical-align: top; } div.fltleftpacklist { float: left; min-width: 25px; display: table-cell; } div.fltlefstddesktopcart { float: none; word-wrap: break-word; margin-top: 11px; margin-bottom: 5px; display: table-cell; vertical-align: middle; min-height: 30px; padding-left: 8px; line-height: 1.2; } div.format { background: #f4f4f4; float: none; border-left: 2px solid #fff; padding: 0 5px; width: 25%; display: inline-block; vertical-align: top; } div.users { background: #f4f4f4; float: none; border-left: 2px solid #fff; padding: 0 15px; width: 50%; display: inline-block; vertical-align: top; } div.users .custom-select { min-width: 100px; padding-right: 33px; } div.users .custom-select .current-value { padding-top: 8px; } div.users .custom-select .dropdown { right: auto; left: -1px; top: -1px; } @media screen and (max-width: 380px) { div.users .custom-select .dropdown { min-width: 0; width: 100%; } div.users .custom-select .dropdown li input[type=text] { width: 65%; } div.users .custom-select .dropdown li input[type=submit] { width: 30%; } } @media screen and (max-width: 380px) { .license-quantity-placeholder { width: 100%; } } div.license_type_inner_wrapper, div.format_inner_wrapper, div.users_inner_wrapper { padding: 0 10px; display: inherit; align-items: inherit; -webkit-align-items: inherit; } div.license_type_inner_wrapper { display: table; } span.usernum { max-width: 300px; } span.updatelink { position: relative; left: 15px; cursor: pointer; } div.user_update { display: none; padding-bottom: 1em; } .user_update h2 { font-size: 16px; } .user_update p { font-size: 13px; padding-top: 10px; max-width: 340px; } div.user_update a:hover { text-decoration: none; } div.user_cancel, div.user_update_button { float: none; display: inline-block; text-align: center; cursor: pointer; border-radius: 3px; width: 109px; height: 26px; padding: 3px 0 7px; } div.user_cancel { background: #D7D7D7; color: #636263; } div.user_cancel a, div.user_cancel a.update { color: #636263 !important; } div.user_cancel p, div.user_update_button p { padding: 0; font-size: 13px; } div.user_update_button { background: #0099FF; color: #fff; } div.user_update_button a { color: #fff; } div.user_lcns_wrapper { clear: both; width: 100%; min-height: 75px; display: table; font-size: 14px; } div.lcns_users_label { float: none; display: inline-block; vertical-align: top; width: 55%; margin-top: 6px; } div.lcns_users_input { float: none; display: inline-block; vertical-align: top; width: 40%; } input.lcns_input { width: 100%; } div.wbfnt_lcns_row { display: table-row; padding: 15px 0; min-width: 100%; } div.wbfnt_lcns_row div.wbfnt_error { margin-left: 23px; margin-left: calc(3% + 9px); } div.wbfnt_lcns_cell { display: table-cell; vertical-align: middle; padding-top: 10px; } div.wbfnt_lcns_input { float: none; display: inline-block; margin-right: 5px; width: 3%; min-width: 12px; } input.wbfnt_input { max-width: 100%; } div.wbfnt_license_label { float: none; display: inline-block; max-width: 65%; margin-right: 5px; white-space: nowrap; } div.wbfnt_price { float: right; display: inline-block; max-width: 35%; width: 160px; } div.wbfnt_price_label { display: block; text-align: right; } div.wbfnt_error { font-size: 11px; color: #c00; margin-top: 2px; margin-bottom: 4px; } div.wbfnt_discount { display: block; color: #D0011B; text-align: right; } input.wbfnt_lcns_pgview { max-width: 115px; float: none; } div.apply_to_licenses { margin: 10px 0 24px 0; } div.apply_to_licenses label { font-size: 12px; } span.apply_to_all { position: relative; margin-right: 6px; } div.price_wrapper { position: relative; background: #F4F4F4; margin: 0 auto 15px; max-width: 980px; overflow: hidden; } div.price_label { float: left; padding: 15px; color: #868686; } div.price { float: right; padding: 12px 15px; } div.price_amt { color: #666; float: left; padding-right: 15px; margin-top: 2px; } .discount_strikethru-outer + .discount_now { margin-left: 7px; } div.discount_type { float: left; font-size: 16px; } span.discount_strikethru-outer { text-decoration: line-through; color: #D0011B; } span.discount_strikethru_price { color: #D0011B; } #cart_options { float: none; display: inline-block; vertical-align: top; } #cart_options_mobile { display: none; } #cart_options ul, #cart_options_mobile ul { position: relative; top: 6px; font-size: 15px; } #cart_options ul img, #cart_options_mobile ul img { padding-right: 8px; } #cart_options li, #cart_options_mobile li { display: inline-block; vertical-align: top; text-align: center; padding: 0 17px 20px 0; } #cart_options li.coupon, #cart_options_mobile li.coupon { background: url("/s/images/icons/coupon.png") no-repeat; text-indent: 28px; background-position: 0 4px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #cart_options li.coupon, #cart_options_mobile li.coupon { background-image: url("/s/images/icons/coupon@2x.png"); background-size: 18px 11px; } } #cart_options li.coupon #redeem_options, #cart_options_mobile li.coupon #redeem_options { text-indent: initial; } #cart_options li#pdf, #cart_options_mobile li#pdf { background: url("/s/images/icons/quote.png") no-repeat; text-indent: 12px; background-position: 2px 2px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #cart_options li#pdf, #cart_options_mobile li#pdf { background-image: url("/s/images/icons/quote@2x.png"); background-size: 12px 15px; } } #cart_options li#link, #cart_options_mobile li#link { background: url("/s/images/icons/link.png") no-repeat; text-indent: 12px; background-position: 0 7px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #cart_options li#link, #cart_options_mobile li#link { background-image: url("/s/images/icons/link@2x.png"); background-size: auto 7px; } } #cart_page_left { float: left; position: relative; } #cart_page_right { float: right; } a.cart_options { display: inline-block; vertical-align: bottom; } .cart_options .remove_button_wrapper { padding: 0; width: 18px; height: 18px; padding-right: 30px; float: left; position: static; } #sub_checkout { float: right; max-width: 320px; } #checkout { float: right; } #subtotal_label { float: right; } .sub_subtotal { font-size: 14px; text-align: right; margin: 5px 0; } a.button.bigger.magenta { border-radius: 5px; } #cart_page_footer h3.subtotal { padding: 8px 5px 0 0; } h3.subtotal_price { font-size: 24px; } h3.subtotal:after { content: ':'; } #subtotal_amt { float: right; } div.remove_cart_wrapper { position: relative; width: 17px; height: 16px; top: 0; right: 0; padding-right: 8px; float: left; } div.remove_cart { background: #D7D7D7; text-align: center; display: table; width: 100%; height: 100%; border-radius: 50%; } div.remove_cart:hover, div.remove_cart:active { background: #FF0000; } div.remove-x-cart { display: table-cell; vertical-align: middle; color: #4A494A; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; position: relative; left: 0; } div.remove-x-cart a { color: #4A494A; text-decoration: none; font-size: 12px; display: block; border-radius: 50%; padding: 0; text-align: center; font-weight: 800; } div.remove-x-cart:hover, div.remove-x-cart:hover a { color: #ffffff; } div.remove-x-cart a:hover, div.remove-x-cart a:active { color: #ffffff; } div.remove-cart-link { float: left; } #redeem_gc a { color: #09F; font-size: 15px; } #redeem_options { display: none; top: 30px; position: absolute; } div#codes_wrapper { *zoom: 1; display: block; } div#codes_wrapper:after { content: ""; display: table; clear: both; } div.code { float: left; display: inline-block; vertical-align: top; padding: 8px 25px 18px 0; } div.code_name { float: none; display: inline-block; vertical-align: top; } div.remove_code_wrapper { position: relative; float: none; display: inline-block; vertical-align: top; clear: both; width: 21px; height: 21px; top: 0; right: 0; left: 8px; } div.remove_code { background: #D7D7D7; text-align: center; display: table; width: 100%; height: 100%; border-radius: 50%; } div.remove_code:hover, div.remove_code:active { background: #FF0000; } #redeem_input { display: block; float: left; width: 250px; } input.redeem_code { width: 100%; display: block !important; margin: 0 auto; padding: 5px 5px !important; } input.redeem_code.invalid { border-color: red; background-color: white; height: initial; } div#redeem_button { display: block; float: left; margin-left: 10px; } #redeem_error { clear: both; display: none; background-color: #FFE55B; background-image: url("/s/images/checkout/warning.png"); background-repeat: no-repeat; background-position: 14px 50%; width: 100%; margin-top: 45px; } #redeem_error span { padding: 0 14px 0 55px; display: inline-block; margin: 13px 0; font-size: 18px; } a.redeem_button { background: #0099FF; color: #fff !important; display: table; border-radius: 5px; text-align: center; height: 31px; padding: 6px 15px; } a.redeem_button:hover { text-decoration: none; background: #1595EA; } a.redeem_button div.redeem_button_label { float: none; display: table-cell; vertical-align: middle; color: #fff; } #popup_box .remove_modal_wrapper { text-align: center; } #popup_box .remove_modal_wrapper p { padding: 0; } #popup_box .remove_modal_wrapper .nogo { background-color: #CCC; color: #444; } #popup_box .remove_modal_wrapper .nogo:hover { background-color: #bbb; } .cart_remove_all { color: #0099ff; } .cart_remove_all > div:hover { cursor: pointer; } .cart_remove_all > div.remove-cart-link:hover { text-decoration: underline; } @media only screen and (min-width: 300px) and (max-width: 400px) { span.usernum { max-width: 170px; overflow-wrap: break-word; word-wrap: break-word; } } @media only screen and (min-device-width: 300px) and (max-device-width: 714px) { #popup_box .remove_modal_wrapper > input { width: 100%; max-width: 296px; float: none; margin-bottom: 15px; padding: 10px 15px; } } @media only screen and (min-width: 715px) and (max-width: 930px) { #cart_page_right { margin-top: 20px; } } @media only screen and (min-width: 300px) and (max-width: 714px) { #myfontsContainer.fluid { padding: 0 10px; } #cart_page { padding: 0; } div.license_type_inner_wrapper { padding: 0; } div.formats-wrapper, div.price_wrapper { width: 100%; } div.license_wrapper { display: block !important; margin-bottom: 0; } div.license_wrapper > div { margin-bottom: 2px; } div.license_type { background: #F4F4F4; float: left; display: block; padding: 15px; width: 100%; display: inline-block; vertical-align: middle; } div.format { width: 100%; float: left; display: block; margin-left: 0; } div.users { min-width: 100%; float: left; display: block; margin-left: 0; } div.format, div.users { border-left: none; } span.apply_to_all { position: relative; margin-right: 3px; } div.user_cancel { margin-right: 2%; } div.user_cancel, div.user_update_button { width: 48%; max-width: 170px; } div.price { max-width: 75%; text-align: right; } div.price_amt { color: #868686; display: block; float: none; padding-right: 0 !important; } div.discount_type { display: block; float: none; } #cart_page_footer { margin: 0 auto; padding: 0; } #cart_page_left, #cart_page_right { float: none; width: 100%; max-width: 300px; margin: 0 auto; } #redeem_input, div#redeem_button { display: inline-block; } #redeem_input { width: 100%; } div#redeem_button { float: none; margin: 10px 0 0 0; } #redeem_error { margin-top: 10px; } #redeem_options { margin: 10px 0 10px 0; position: static; } #cart_options { display: block; text-align: center; } #cart_options #pdf, #cart_options #link, #cart_options .button { display: none; } #cart_options li.coupon { background: none; text-indent: initial; } #cart_options_mobile { display: block; float: none; margin: 0 auto; clear: both; width: 100%; text-align: center; } #cart_options_mobile ul { top: 29px; } #subtotal_label { float: left; } #cart_page h3 { color: #848484; font-size: 18px; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #cart_page h3.subtotal_price { color: #4a4a4a; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } h3.subtotal:after { content: ''; } #cart_page_footer h3.subtotal { padding: 0; } #subtotal { float: none; margin: 0 auto; margin-bottom: 15px; padding: 15px 0 0; } div.code { float: none; } #checkout { float: none; margin: 0 auto; padding: 15px 0; } #sub_checkout { float: none; margin: 0 auto; max-width: inherit; text-align: center; padding-bottom: 10px; border-top: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF; } a.button.bigger.magenta { margin: 0 auto; width: 100%; } #redeem_gc { font-size: 16px; text-align: center; padding: 0; } .redeem_gc { background: url("/s/images/icons/coupon.png") no-repeat; background-position: 0 3px; padding-left: 30px; } } @media only screen and (min-width: 300px) and (max-width: 714px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 300px) and (max-width: 714px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 300px) and (max-width: 714px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-width: 300px) and (max-width: 714px) and (min-device-pixel-ratio: 2), only screen and (min-width: 300px) and (max-width: 714px) and (min-resolution: 144dpi), only screen and (min-width: 300px) and (max-width: 714px) and (min-resolution: 2dppx) { .redeem_gc { background-image: url("/s/images/icons/coupon@2x.png"); background-size: 18px 11px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 400px) { div.user_update { max-width: 100%; padding: 10px 0; } div.lcns_users_label { max-width: 45%; } div.lcns_users_input { max-width: 45%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.font_face_box img { max-height: 32px; } #redeem_error { background-image: url("/s/images/checkout/warning@2x.png"); background-size: 25px 22px; } } 

.category_item { text-align: center; float: left; height: 110px; width: 240px; } 

div.cc_entry_widget { width: 28em; clear: left; } div.cc_entry_widget div.info_entry.city, div.cc_entry_widget div.info_entry.state, div.cc_entry_widget div.info_entry.postCode { float: left; } div.cc_entry_widget div.info_entry.state, div.cc_entry_widget div.info_entry.postCode { margin-left: 1em; } div.cc_entry_widget div.info_entry.city input { width: 8em; } div.cc_entry_widget div.info_entry.state input, div.cc_entry_widget div.info_entry.postCode input { width: 5em; } div.cc_entry_widget div.info_entry.countryCode { clear: left; } div.cc_entry_widget div.info_entry.remember input { width: auto; } div.cc_entry_widget div.info_entry.stateNote { clear: left; font-size: smaller; } div.cc_entry_widget div.info_entry.cc_submit { text-align: center; } div.cc_entry_widget div.info_entry.cc_submit input { width: auto; padding: 1em; } 

#checkout_page { max-width: 980px; min-height: 250px; margin: 0 auto; padding: 10px; color: #4a4a4a; } #checkout_page h1, #checkout_page h2, #checkout_page h3, #checkout_page h4 { color: #333; } #checkout_page h1 { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page h3 { font-size: 22px; margin-bottom: 20px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page strong { font-weight: normal; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page label { font-size: 14px; } #checkout_page .clear { clear: both; } #checkout_page .active { display: block !important; } #checkout_page #spacer { height: 100px; } #checkout_page #bottom_border hr { border: 1px solid #E0E0E0; margin: 0 auto; } #checkout_page #payment_options { padding-top: 20px; } #checkout_page input.has-error, #checkout_page select.has-error { border-color: red; } #checkout_page p.cc_opt, #checkout_page p.paypal_opt { font-size: 18px; padding: 0; margin-bottom: 5px; } #checkout_page p.cc_opt { margin-bottom: 10px; } #checkout_page .selected { color: #dddddd; } #checkout_page input[type=radio].css-checkbox-radio, #checkout_page input[type=checkbox].css-checkbox-check, #checkout_page input[type=checkbox].css-checkbox-check-2 { position: absolute; z-index: -1000; left: -1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #checkout_page input[type=radio].css-checkbox-radio + label.css-label-radio { padding-left: 25px; height: 32px; line-height: 36px; margin-bottom: 10px; background-repeat: no-repeat; background-position: 0 3px; cursor: pointer; font-size: 18px; display: inline-block; } #checkout_page input[type=radio].css-checkbox-radio:checked + label.css-label-radio { background-position: 0 -29px; } #checkout_page input[type=checkbox].css-checkbox-check + label.css-label-check, #checkout_page input[type=checkbox].css-checkbox-check-2 + label.css-label-check-2 { padding-left: 25px; height: 20px; display: inline-block; line-height: 20px; background-repeat: no-repeat; background-position: -12px -102px; vertical-align: middle; cursor: pointer; } #checkout_page input[type=checkbox].css-checkbox-check:checked + label.css-label-check, #checkout_page input[type=checkbox].css-checkbox-check-2:checked + label.css-label-check-2 { background-position: -12px -81px; } #checkout_page label.css-label-radio img { vertical-align: middle; width: 44px; height: 29px; } #checkout_page label.css-label-radio { background-image: url("/s/images/checkout/radio.png"); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page label.css-label-radio { background-image: url("/s/images/checkout/radio@2x.png"); background-size: 16px 60px; } } #checkout_page label.css-label-radio span { background-repeat: no-repeat; padding: 2px 0 6px 52px; } #checkout_page label.css-label-check, #checkout_page label.css-label-check-2 { background: url("/s/images/testdrive_new/fonttools_icon_sprite.png") no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page label.css-label-check, #checkout_page label.css-label-check-2 { background-image: url("/s/images/testdrive_new/fonttools_icon_sprite@2x.png"); background-size: 320px 250px; } } #checkout_page .visa { background: url("/s/images/checkout/visa.png") no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page .visa { background-image: url("/s/images/checkout/visa@2x.png"); background-size: 44px 29px; } } #checkout_page .mastercard { background: url("/s/images/checkout/mc.png") no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page .mastercard { background-image: url("/s/images/checkout/mc@2x.png"); background-size: 44px 29px; } } #checkout_page .discover { background: url("/s/images/checkout/discover.png") no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page .discover { background-image: url("/s/images/checkout/discover@2x.png"); background-size: 44px 29px; } } #checkout_page .amex { background: url("/s/images/checkout/amex.png") no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page .amex { background-image: url("/s/images/checkout/amex@2x.png"); background-size: 34px 29px; } } #checkout_page #cardNumber.visa, #checkout_page #cardNumber.mastercard, #checkout_page #cardNumber.discover, #checkout_page #cardNumber.amex { background-position: right 6px center; } #checkout_page div.cc_info_wrapper { padding: 20px 0 10px; } #checkout_page div.cc_info_small input, #checkout_page div.cc_info_large input { width: 100%; height: 40px; box-sizing: border-box; padding: 5px 11px; font-size: 14px; } #checkout_page div.paypal_opt_info, #checkout_page div.cc_opt_info { position: relative; } #checkout_page div.paypal_opt_info .paypal_opt_info { padding: 0 0 20px 25px; } #checkout_page div.paypal_opt_info p { padding-bottom: 0; } #checkout_page div.paypal_checkout { background: url("/s/images/checkout/paypal_checkout.png") no-repeat; width: 228px; height: 44px; cursor: pointer; } #checkout_page div.cc_info_small { float: none; display: inline-block; vertical-align: top; margin-right: 25px; width: 33%; max-width: 234px; } #checkout_page div.cc_info_small.security { max-width: 108px; } #checkout_page div.cc_info_small.expiration { margin-right: 0; } #checkout_page div.cc_info_large { float: none; display: block; padding-top: 15px; width: 65%; max-width: 407px; } #checkout_page div.cc_info_small select { width: 100%; margin-right: 5px; padding-right: 25px; color: #000000; } #checkout_page div.cc_info_small.expiration select { width: auto; } #checkout_page select.cc-exp-year { min-width: 88px; } #checkout_page select.cc-exp-month { min-width: 108px; } #checkout_page div.cc_info_small select option:first-child { color: #AEADAE; } #checkout_page div.cc_info_large select { width: 100%; } #checkout_page div.cc_info_small input.cc_sec { width: 50%; } #checkout_page label.cc_nickname { position: relative; width: 100%; white-space: nowrap; } #checkout_page #error-message { background-color: #FFE55B; background-image: url("/s/images/checkout/warning.png"); background-repeat: no-repeat; background-position: 14px 50%; width: 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page #error-message { background-image: url("/s/images/checkout/warning@2x.png"); background-size: 25px 22px; } } #checkout_page #error-message span { padding: 0 14px 0 55px; display: inline-block; margin: 13px 0; font-size: 18px; } #checkout_page input#checkout_next[type=button] { display: block; padding: 5px 25px; text-align: center; border-radius: 4px; background: #09f; text-transform: uppercase; color: #fff; max-width: 210px; font-size: 1.4em; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; } #checkout_page input#checkout_next[type=button]:hover { text-decoration: none; background: #2EA3F2; } #checkout_page input#checkout_next[type=button]:disabled { background: #EEEEEE; color: #BCBCBC; } #checkout_page div#expand_names { position: absolute; top: 15px; right: 15px; background: transparent url("/s/images/checkout/dropdown.png") 50% 50% no-repeat; pointer-events: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page div#expand_names { background-image: url("/s/images/checkout/dropdown@2x.png"); background-size: 16px 15px; } } #checkout_page div#expand_names a { width: 16px; height: 16px; display: block; } #checkout_page div.saved_names { display: none; padding: 5px 8px; -moz-transition: display 3ms; -o-transition: display 3ms; -webkit-transition: display 3ms; transition: display 3ms; color: #404040; } #checkout_page div.saved_names a { color: #404040; } #checkout_page ul.sub_menu_names { list-style: none; display: block; padding-bottom: 15px; } #checkout_page ul.sub_menu_names li { padding: 10px 0; } #checkout_page ul.sub_menu_names a { cursor: pointer; } #checkout_page .add_buyer_name { width: 65%; display: inline-block; } #checkout_page div#font_buyer { border: 1px solid #ddd; max-width: 530px; position: relative; } #checkout_page ol.checkout_final_opt ul.sub_menu_names li { font-size: 20px; padding: 10px 15px; } #checkout_page ol.checkout_final_opt ul.sub_menu_names li:first-child { position: absolute; top: 0; left: 0; right: 35px; background: #fff; padding-top: 6px; padding-left: 11px; } #checkout_page label.font_buyer_name { display: block; font-size: 20px; padding: 10px 35px 10px 20px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #checkout_page label.font_buyer_name.placeholder { color: #bbb; font-size: 16px; padding: 13px 35px 13px 19px; } #checkout_page label.font_buyer_name[type=text] { width: 80%; width: calc(100% - 78px); display: inline-block; border: 1px solid #09f; padding: 7px 12px 8px 12px; box-sizing: border-box; } #checkout_page input.font_buyer_name::-webkit-input-placeholder { font-size: 16px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page input.font_buyer_name:-moz-placeholder { font-size: 16px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page input.font_buyer_name::-moz-placeholder { font-size: 16px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page input.font_buyer_name:-ms-input-placeholder { font-size: 16px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page input#save_name[type=button] { display: inline-block; -moz-transition: background-color 500ms; -o-transition: background-color 500ms; -webkit-transition: background-color 500ms; transition: background-color 500ms; text-transform: uppercase; font-size: 16px; margin-left: 5px; padding: 6px 11px; } #checkout_page div.remove_button_wrapper_names { position: relative; display: inline-block; vertical-align: middle; width: 27px; height: 27px; -moz-transition: display 3ms; -o-transition: display 3ms; -webkit-transition: display 3ms; transition: display 3ms; } #checkout_page div.remove_name { background: #D7D7D7; text-align: center; display: table; width: 100%; height: 100%; border-radius: 50%; } #checkout_page div.remove_name:hover, #checkout_page div.remove_name:active { background: #FF0000; } #checkout_page div.remove-x-name { display: table-cell; vertical-align: middle; color: #4A494A; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); font-family: arial, "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; position: relative; left: 0; } #checkout_page div.remove-x-name a { color: #4A494A; text-decoration: none; font-size: 22px; display: block; border-radius: 50%; padding: 1px; text-align: center; } #checkout_page div.remove-x-name:hover, #checkout_page div.remove-x-name:hover a { color: #ffffff; } #checkout_page div.remove-x-name a:hover, #checkout_page div.remove-x-name a:active { color: #ffffff; } #checkout_page #accepted_payments { position: relative; top: 15px; border-top: 1px solid #E0E0E0; max-width: 375px; padding: 15px 0; text-align: center; } #checkout_page #accepted_payments .accept_icons { width: inherit; margin: 0 auto; } #checkout_page #accepted_payments .accept_icons span { background: url("/s/images/checkout/acceptancemarks.png?v=2") no-repeat; display: inline-block; width: 54px; height: 50px; margin: 0 5px 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page #accepted_payments .accept_icons span { background-image: url("/s/images/checkout/acceptancemarks@2x.png?v=2"); background-size: 342px 41px; } } #checkout_page #accepted_payments .accept_icons span.discover { background-position: -1px 6px; width: 55px; } #checkout_page #accepted_payments .accept_icons span.mastercard { background-position: -66px 6px; } #checkout_page #accepted_payments .accept_icons span.visa { background-position: -128px 6px; } #checkout_page #accepted_payments .accept_icons span.amex { background-position: -187px 6px; width: 39px; } #checkout_page #accepted_payments .accept_icons span.paypal { background-position: -233px 6px; margin: 0; width: 55px; } #checkout_page #accepted_payments .accept_icons span.diners { background-position: -292px 6px; } #checkout_page div.terms-error-root { font-size: 14px; } #checkout_page ol.checkout_final_opt { position: relative; list-style-position: inside; } #checkout_page ol.checkout_final_opt li { font-size: 22px; margin-left: 0; } #checkout_page ol.checkout_final_opt p { padding-top: 0; margin-top: .6em; } #checkout_page ol.checkout_final_opt h3 { margin-bottom: 10px; padding-top: 15px; font-size: 22px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #333; } @media screen and (max-width: 666px) { #checkout_page ol.checkout_final_opt p.terms_cond { margin-bottom: 1.6em; } } #checkout_page ol.checkout_final_opt > li:first-child { margin-top: 1em; } #checkout_page ol.checkout_final_opt > li > :first-child, #checkout_page ol.checkout_final_opt > li > div > :first-child { display: inline; } #checkout_page ol.checkout_final_opt > li > :first-child:after { content: ""; display: block; margin-bottom: 1.5em; } #checkout_page input.place_order { background-color: #FF40FF; padding: 15px 45px; max-width: 325px; width: 100%; position: relative; margin: 0 auto; text-align: center; text-transform: uppercase; display: block; color: #fff; border-radius: 5px; font-size: 1em; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page input.place_order:hover { background: #d900d9; text-decoration: none; } #checkout_page button#place_order { background: url("/s/images/checkout/paypal.png") no-repeat; width: 228px; height: 44px; border: 0; } #checkout_page button#place_order:disabled { opacity: .3; } #checkout_page div.order_subtotals { margin: 15px auto; max-width: 325px; } #checkout_page div.order_subtotals > div { display: table; width: 100%; table-layout: fixed; } #checkout_page div.column_row { display: table-row; position: relative; font-size: 17px; } #checkout_page div.column_row:last-child > div { padding: 20px 0 25px; } #checkout_page div.column_row.vat { font-size: 14px; } #checkout_page div.column_row.vat span:first-child { display: block; } #checkout_page div.column_left { display: table-cell; padding-right: 15px; text-align: left; padding-bottom: 6px; } #checkout_page div.column_right { display: table-cell; text-align: right; } #checkout_page span.next_bill { display: block; font-size: 14px; } #checkout_page span.total, #checkout_page span.total_amt { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #checkout_page span.vat_not_set, #checkout_page span.change_card { cursor: pointer; color: #09f; } #checkout_page div.vat_entry { display: none; -moz-transition: display 3ms; -o-transition: display 3ms; -webkit-transition: display 3ms; transition: display 3ms; width: 300px; height: auto; overflow: hidden; margin: 0 auto; margin-bottom: 15px; margin-top: 15px; } #checkout_page div.vat_entry select#vat_region { display: inline-block; width: 48%; box-sizing: border-box; } #checkout_page div.vat_entry input#vat_id { width: 49%; box-sizing: border-box; } #checkout_page div.vat_entry .vat_warning { width: 48%; margin-left: 49%; padding-left: 2px; font-size: 11px; color: #c00; margin-top: 2px; } #checkout_page div.vat_entry span.cta { padding-top: 5px; display: block; } #checkout_page div.vat_entry span button { margin-right: 2px; } #checkout_page select.vat_country_sel { width: 150px; } #checkout_page input.vat_country_code { width: 129px; } #checkout_page .float { float: none; display: inline-block; vertical-align: middle; } #checkout_page div.order_summary p { padding: 0; margin: 0; } @media screen and (max-width: 680px) { #checkout_page div.cc_info_small.expiration { width: 100%; } } @media screen and (max-width: 450px) { #checkout_page div.cc_info_small { width: 50%; } } @media only screen and (min-device-width: 300px) and (max-device-width: 714px) { #checkout_page { max-width: 90%; } #checkout_page p { font-size: 14px !important; } #checkout_page h1 { font-size: 22px; } #checkout_page h3 { font-size: 17px; } #checkout_page img { max-width: 100%; } #checkout_page div.cc_info_small, #checkout_page div.cc_info_large { float: none; margin-right: 0; width: 100%; max-width: none; } #checkout_page div.cc_info_small.number { width: 64%; margin-right: 2%; } #checkout_page div.cc_info_small.security { width: 31%; max-width: none; } #checkout_page div.cc_info_small.security label { white-space: nowrap; } #checkout_page div.cc_info_small.expiration { max-width: none; } #checkout_page div.cc_info_small.expiration select { width: 48%; margin-right: 1%; } #checkout_page label.cc_nickname { position: Relative; width: 100%; white-space: normal; } #checkout_page #accepted_payments { position: relative; top: 15px; border-top: 1px solid #E0E0E0; max-width: 100%; padding: 15px 0; text-align: center; float: none; margin: 0 auto; } #checkout_page input#checkout_next { padding: 5px 45px; max-width: 310px; margin: 0 auto; position: relative; top: 15px; } #checkout_page ol.checkout_final_opt { position: relative; left: 0; max-width: 90%; margin: 0 auto; } #checkout_page ol.checkout_final_opt li { padding: 10px 0; } #checkout_page ol.checkout_final_opt ul.sub_menu_names li { font-size: 18px; } #checkout_page ol.checkout_final_opt ul.sub_menu_names li:first-child { padding-right: 0; } #checkout_page label.font_buyer_name { font-size: 18px; } #checkout_page label.font_buyer_name.placeholder { font-size: 15px; } #checkout_page input.font_buyer_name[type=text] { width: 66%; padding: 4px 5px 7px; } #checkout_page input.font_buyer_name::-webkit-input-placeholder { font-size: 15px; } #checkout_page input.font_buyer_name:-moz-placeholder { font-size: 15px; } #checkout_page input.font_buyer_name::-moz-placeholder { font-size: 15px; } #checkout_page input.font_buyer_name:-ms-input-placeholder { font-size: 15px; } #checkout_page input#save_name[type=button] { padding: 5px 7px; font-size: 12px; margin-left: 0; } #checkout_page input.place_order { width: 100%; margin: 0 auto; } #checkout_page p.terms_cond { min-height: 55px; display: block; } #checkout_page div.order_subtotals { width: 250px; } #checkout_page div.cc_info_small.expiration input { width: 100%; margin: 0; } } @media only screen and (min-device-width: 715px) and (max-device-width: 800px) { #checkout_page { max-width: 95%; } #checkout_page input.font_buyer_name { width: 65%; } #checkout_page div#font_buyer { width: 100%; } } @media only screen and (min-device-width: 320px) and (max-device-width: 700px) { #checkout_page { max-width: 95%; } #checkout_page input.font_buyer_name { width: 65%; } #checkout_page div#font_buyer { width: 100%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #checkout_page input[type=checkbox].css-checkbox-check + label.css-label-check, #checkout_page input[type=checkbox].css-checkbox-check-2 + label.css-label-check-2 { background-position: -7px -197px; } #checkout_page input[type=checkbox].css-checkbox-check:checked + label.css-label-check, #checkout_page input[type=checkbox].css-checkbox-check-2:checked + label.css-label-check-2 { background-position: -7px -161px; } } 

 .cl-landing { text-align: center; margin: 0 -10px -30px; background-color: #F5F4F3; border-top: 1px solid #DFDEDE; height: 100%; box-sizing: border-box; } @media screen and (min-width: 768px) { .cl-landing { margin: 0 -20px -30px; } } @media screen and (min-width: 1200px) { .cl-landing { margin: 0 -2% -30px; margin: 0 calc(-2% - 1px) -30px; } } .cl-landing .slice { padding-top: 40px; padding-bottom: 40px; } .cl-landing .cl-small { width: 112px; height: 81px; opacity: 0.7; } .cl-landing .header { margin-left: auto; margin-right: auto; font-size: 32px; line-height: 40px; max-width: 95%; } .cl-landing .header--bold { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 24px; } .cl-landing .big { margin-left: auto; margin-right: auto; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 26px; max-width: 95%; line-height: 1.4; margin-top: 25px; margin-bottom: 50px; } .cl-landing .big span { display: block; } @media screen and (min-width: 550px) { .cl-landing .big { font-size: 34px; max-width: none; } } @media screen and (min-width: 900px) { .cl-landing .big { font-size: 56px; line-height: 1.1; } } .cl-landing .italic { color: #4a4a4a; font-size: 20px; font-style: italic; } .cl-landing .intro { margin-left: auto; margin-right: auto; font-size: 24px; line-height: 1.4; max-width: 95%; margin-bottom: 89px; } .cl-landing .intro--grey { color: #4a4a4a; } @media screen and (min-width: 600px) { .cl-landing .intro { max-width: 570px; } } .cl-landing .strip { margin-left: auto; margin-right: auto; width: 2047px; position: absolute; left: 0; right: 0; } .cl-landing .strip__container { margin-left: auto; margin-right: auto; position: relative; height: 139px; width: 100%; overflow: hidden; text-align: left; } .cl-landing .strip img { margin-left: 13px; max-height: 139px; } .cl-landing .strip img:first-child { margin-left: 0; } .cl-landing .three-col { margin: 0 auto; column-count: 1; max-width: 290px; } .cl-landing .three-col h4 { margin-bottom: 15px; font-size: 20px; } .cl-landing .three-col li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; min-height: 181px; } .cl-landing .three-col p { font-size: 17px; } @media screen and (min-width: 450px) { .cl-landing .three-col { max-width: 875px; column-count: 3; column-gap: 21px; margin: 50px 10px 50px; } } @media screen and (min-width: 900px) { .cl-landing .three-col { margin: 50px auto 50px; } } .cl-landing .license { width: 50px; height: 50px; margin-left: auto; margin-right: auto; margin-bottom: 20px; background-repeat: no-repeat; background-image: url("/s/images/family/license-types-sprite.png?v=2"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .cl-landing .license { background-image: url("/s/images/family/license-types-sprite@2x.png?v=2"); background-size: 475px 120px; } } .cl-landing .license.webfont { background-position: 0 0; } .cl-landing .license.server { background-position: -50px 0; } .cl-landing .license.epub { background-position: -100px 0; } .cl-landing .license.desktop { background-position: -150px 0; } .cl-landing .license.app { background-position: -200px 0; } .cl-landing .license.html5ad { background-position: -315px 0; } .cl-landing .list { display: block; } @media screen and (min-width: 450px) { .cl-landing .list { display: flex; flex-wrap: wrap; } } .cl-landing .list__card { margin-left: auto; margin-right: auto; border: 1px solid #E2E2E2; background-color: #FFFFFF; margin-bottom: 20px; box-sizing: border-box; will-change: transform; transition: transform 200ms ease-out; position: relative; } .cl-landing .list__card:before { content: ''; background-color: #fff; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; position: absolute; transition: transform 200ms ease-out; } .cl-landing .list__card:hover:before { background-color: #363637; transform: scale(1.05); } .cl-landing .list__card:hover .list__preview img { -webkit-filter: invert(1); filter: invert(1); max-width: 100%; } .cl-landing .list__card:hover .list__preview:after { background-image: none; } @media screen and (min-width: 450px) { .cl-landing .list__card { margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); } } @media screen and (min-width: 800px) { .cl-landing .list__card { flex-grow: 1; flex-shrink: 1; flex-basis: calc(33.3% - 20px); max-width: calc(33.3% - 20px); } } @media screen and (min-width: 1100px) { .cl-landing .list__card { flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 20px); max-width: calc(25% - 20px); } } @media screen and (min-width: 1400px) { .cl-landing .list__card { flex-grow: 1; flex-shrink: 1; flex-basis: calc(20% - 20px); max-width: calc(20% - 20px); } } .cl-landing .list__link { display: block; position: relative; width: 100%; padding-top: 56.25%; text-decoration: none; } .cl-landing .list__preview { position: absolute; z-index: 2; left: 30px; right: 30px; top: 50%; transform: translateY(-50%); text-align: center; transition: filter 200ms ease-out; overflow: hidden; } .cl-landing .list__preview img { max-height: 60px; max-width: none; margin: 0 auto; } .cl-landing .list__preview:after { position: absolute; right: 0; top: 0; bottom: 0; width: 16px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); content: ""; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.alternate_gothic img, :root .cl-landing .list__card:hover .list__preview.alternate_gothic img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.alternate_gothic:before, :root .cl-landing .list__card:hover .list__preview.alternate_gothic:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_alternate_gothic_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.alternate_gothic:before, :root .cl-landing .list__card:hover .list__preview.alternate_gothic:before { background-image: url("/s/images/cl_landing/clfonts_alternate_gothic_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.avenir_next_pro img, :root .cl-landing .list__card:hover .list__preview.avenir_next_pro img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.avenir_next_pro:before, :root .cl-landing .list__card:hover .list__preview.avenir_next_pro:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_avenir_next_pro_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.avenir_next_pro:before, :root .cl-landing .list__card:hover .list__preview.avenir_next_pro:before { background-image: url("/s/images/cl_landing/clfonts_avenir_next_pro_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.century_gothic img, :root .cl-landing .list__card:hover .list__preview.century_gothic img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.century_gothic:before, :root .cl-landing .list__card:hover .list__preview.century_gothic:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_century_gothic_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.century_gothic:before, :root .cl-landing .list__card:hover .list__preview.century_gothic:before { background-image: url("/s/images/cl_landing/clfonts_century_gothic_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.din_next img, :root .cl-landing .list__card:hover .list__preview.din_next img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.din_next:before, :root .cl-landing .list__card:hover .list__preview.din_next:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_din_next_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.din_next:before, :root .cl-landing .list__card:hover .list__preview.din_next:before { background-image: url("/s/images/cl_landing/clfonts_din_next_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.eurostile img, :root .cl-landing .list__card:hover .list__preview.eurostile img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.eurostile:before, :root .cl-landing .list__card:hover .list__preview.eurostile:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_eurostile_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.eurostile:before, :root .cl-landing .list__card:hover .list__preview.eurostile:before { background-image: url("/s/images/cl_landing/clfonts_eurostile_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.gill_sans img, :root .cl-landing .list__card:hover .list__preview.gill_sans img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.gill_sans:before, :root .cl-landing .list__card:hover .list__preview.gill_sans:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_gill_sans_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.gill_sans:before, :root .cl-landing .list__card:hover .list__preview.gill_sans:before { background-image: url("/s/images/cl_landing/clfonts_gill_sans_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_conduit img, :root .cl-landing .list__card:hover .list__preview.itc_conduit img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_conduit:before, :root .cl-landing .list__card:hover .list__preview.itc_conduit:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_itc_conduit_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_conduit:before, :root .cl-landing .list__card:hover .list__preview.itc_conduit:before { background-image: url("/s/images/cl_landing/clfonts_itc_conduit_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_franklin_gothic img, :root .cl-landing .list__card:hover .list__preview.itc_franklin_gothic img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_franklin_gothic:before, :root .cl-landing .list__card:hover .list__preview.itc_franklin_gothic:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_itc_franklin_gothic_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_franklin_gothic:before, :root .cl-landing .list__card:hover .list__preview.itc_franklin_gothic:before { background-image: url("/s/images/cl_landing/clfonts_itc_franklin_gothic_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_lubalin_graph img, :root .cl-landing .list__card:hover .list__preview.itc_lubalin_graph img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_lubalin_graph:before, :root .cl-landing .list__card:hover .list__preview.itc_lubalin_graph:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_itc_lubalin_graph_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.itc_lubalin_graph:before, :root .cl-landing .list__card:hover .list__preview.itc_lubalin_graph:before { background-image: url("/s/images/cl_landing/clfonts_itc_lubalin_graph_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.linotype_didot img, :root .cl-landing .list__card:hover .list__preview.linotype_didot img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.linotype_didot:before, :root .cl-landing .list__card:hover .list__preview.linotype_didot:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_linotype_didot_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.linotype_didot:before, :root .cl-landing .list__card:hover .list__preview.linotype_didot:before { background-image: url("/s/images/cl_landing/clfonts_linotype_didot_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neo_sans img, :root .cl-landing .list__card:hover .list__preview.neo_sans img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neo_sans:before, :root .cl-landing .list__card:hover .list__preview.neo_sans:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_neo_sans_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neo_sans:before, :root .cl-landing .list__card:hover .list__preview.neo_sans:before { background-image: url("/s/images/cl_landing/clfonts_neo_sans_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neue_haas_grotesk img, :root .cl-landing .list__card:hover .list__preview.neue_haas_grotesk img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neue_haas_grotesk:before, :root .cl-landing .list__card:hover .list__preview.neue_haas_grotesk:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_neue_haas_grotesk_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neue_haas_grotesk:before, :root .cl-landing .list__card:hover .list__preview.neue_haas_grotesk:before { background-image: url("/s/images/cl_landing/clfonts_neue_haas_grotesk_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neue_haas_unica img, :root .cl-landing .list__card:hover .list__preview.neue_haas_unica img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neue_haas_unica:before, :root .cl-landing .list__card:hover .list__preview.neue_haas_unica:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_neue_haas_unica_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.neue_haas_unica:before, :root .cl-landing .list__card:hover .list__preview.neue_haas_unica:before { background-image: url("/s/images/cl_landing/clfonts_neue_haas_unica_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.plantin img, :root .cl-landing .list__card:hover .list__preview.plantin img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.plantin:before, :root .cl-landing .list__card:hover .list__preview.plantin:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_plantin_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.plantin:before, :root .cl-landing .list__card:hover .list__preview.plantin:before { background-image: url("/s/images/cl_landing/clfonts_plantin_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.rockwell img, :root .cl-landing .list__card:hover .list__preview.rockwell img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.rockwell:before, :root .cl-landing .list__card:hover .list__preview.rockwell:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_rockwell_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.rockwell:before, :root .cl-landing .list__card:hover .list__preview.rockwell:before { background-image: url("/s/images/cl_landing/clfonts_rockwell_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.sabon img, :root .cl-landing .list__card:hover .list__preview.sabon img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.sabon:before, :root .cl-landing .list__card:hover .list__preview.sabon:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_sabon_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.sabon:before, :root .cl-landing .list__card:hover .list__preview.sabon:before { background-image: url("/s/images/cl_landing/clfonts_sabon_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.sackers_gothic img, :root .cl-landing .list__card:hover .list__preview.sackers_gothic img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.sackers_gothic:before, :root .cl-landing .list__card:hover .list__preview.sackers_gothic:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_sackers_gothic_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.sackers_gothic:before, :root .cl-landing .list__card:hover .list__preview.sackers_gothic:before { background-image: url("/s/images/cl_landing/clfonts_sackers_gothic_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.slate img, :root .cl-landing .list__card:hover .list__preview.slate img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.slate:before, :root .cl-landing .list__card:hover .list__preview.slate:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_slate_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.slate:before, :root .cl-landing .list__card:hover .list__preview.slate:before { background-image: url("/s/images/cl_landing/clfonts_slate_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.swiss_721 img, :root .cl-landing .list__card:hover .list__preview.swiss_721 img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.swiss_721:before, :root .cl-landing .list__card:hover .list__preview.swiss_721:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_swiss_721_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.swiss_721:before, :root .cl-landing .list__card:hover .list__preview.swiss_721:before { background-image: url("/s/images/cl_landing/clfonts_swiss_721_white@2x.png"); } } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.vag_rounded img, :root .cl-landing .list__card:hover .list__preview.vag_rounded img { display: none; } _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.vag_rounded:before, :root .cl-landing .list__card:hover .list__preview.vag_rounded:before { content: ""; min-width: 200px; max-width: 100%; background-image: url("/s/images/cl_landing/clfonts_vag_rounded_white.png"); display: block; background-size: contain; background-repeat: no-repeat; background-position: center; min-height: 60px; max-height: 60px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { _:-ms-fullscreen .cl-landing .list__card:hover .list__preview.vag_rounded:before, :root .cl-landing .list__card:hover .list__preview.vag_rounded:before { background-image: url("/s/images/cl_landing/clfonts_vag_rounded_white@2x.png"); } } 

button.add_to_album_toggle_client { border-radius: 0 3px 3px 0; float: left; font-size: 8px; line-height: 17px; outline: none; padding: 3px 0px; } button.only { border-radius: 3px 3px 3px 3px; } button.add_to_album_toggle_client.only { background: #eee; color: #444; margin-top: 0; padding: 5px 6px; } button.add_to_album_toggle_client.only:hover { background: #ddd; } .open button.add_to_album_toggle_client.only { background: #ddd; } button.add_to_album_toggle_client.only span.label { font-size: 14px; } div.add_to_album_dropdown_client { background: white; border: 1px solid #ddd; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); display: none; font-size: 14px; padding: 15px; position: absolute; text-align: left; top: 28px; right: 0; width: 280px; z-index: 8; } div.add_to_album_dropdown_client a.album_dropdown_goto { color: #ccc; display: inline-block; font-family: 'ClickBits-Arrows'; margin-left: 10px; -webkit-font-smoothing: antialiased; } div.add_to_album_dropdown_client a.album_dropdown_goto:hover { color: #aaa; text-decoration: none; } div.add_to_album_dropdown_client li { margin-bottom: 1px; } div.add_to_album_dropdown_client.open { display: block; } div.add_to_album_dropdown_client a { float: none; } div.add_to_album_dropdown_client a.info { font-size: 11px; margin-left: 10px; } div.add_to_album_dropdown_client button:disabled { color: #fff; } div.add_to_album_dropdown_client hr { background: #ddd; border: none; height: 1px; margin: 10px 0; } div.add_to_album_dropdown_client input[type=submit] { line-height: 18px; margin-left: 5px; padding: 4px 9px; } div.add_to_album_dropdown_client input[type=text] { font-size: 12px; width: 180px; } div.add_to_album_dropdown_client div.albums ul { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; line-height: 20px; padding: 10px 0 0; } div.add_to_album_dropdown_client iframe.dropdown_login_frame { width: 250px; height: 155px; } a.album_dropdown_delete { text-decoration: none; } a.album_dropdown_add.unavailable { text-decoration: none; cursor: pointer; color: black; } 

#contact_us h3 { margin-top: 1.2em; } 

#country_select_error { color: #cc0000; font-weight: bold; margin: 10px 0 5px; } 

 .dateRangePicker { background: #fff; font-family: "Proxima Nova"; position: relative; } .dateRangePicker input[type=text] { font-family: "Proxima Nova"; } .dateRangePicker .label { display: inline-block; line-height: 28px; margin-right: 10px; } .dateRangePicker .range { margin-top: 20px; } .dateRangePicker .foundry_input { font-size: 12px; width: 100px; } .dateRangePicker .buttons a#datepickerCancel { color: #666; font-size: 15px; margin-left: 20px; } .dateRangePicker .pickers { margin: 20px 0; } .dateRangePicker .endDatepicker { display: none; } .dateRangePicker .ui-datepicker { background: #fff; border: none; border-radius: 0; color: #000; font-family: "Proxima Nova"; font-size: 12px; width: 47em !important; } .dateRangePicker .ui-datepicker * { background: transparent; border: none; } .dateRangePicker .ui-datepicker .ui-datepicker-group { border: 1px solid #000; border-left: none; min-height: 175px; width: 33%; } .dateRangePicker .ui-datepicker .ui-datepicker-group.ui-datepicker-group-last { border-right: none; } .dateRangePicker .ui-datepicker .ui-datepicker-header { border-bottom: 1px solid #000; border-radius: 0; } .dateRangePicker .ui-datepicker .ui-datepicker-prev { top: 1px; left: 0; } .dateRangePicker .ui-datepicker .ui-datepicker-prev .ui-icon-circle-triangle-w { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid black; } .dateRangePicker .ui-datepicker .ui-datepicker-next { top: 1px; right: -10px; text-align: right; } .dateRangePicker .ui-datepicker .ui-datepicker-next .ui-icon-circle-triangle-e { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid black; } .dateRangePicker .ui-datepicker .ui-datepicker-title { color: #000; line-height: 1em; font-size: 12px; } .dateRangePicker .ui-datepicker .ui-datepicker-unselectable span { color: #666; font-weight: normal; padding: 4px 1px; text-align: center; } .dateRangePicker .ui-datepicker table td, .dateRangePicker .ui-datepicker table th { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .dateRangePicker .ui-datepicker table td:last-of-type, .dateRangePicker .ui-datepicker table th:last-of-type { border-right: none; } .dateRangePicker .ui-datepicker table td { padding: 0px; } .dateRangePicker .ui-datepicker table td a { color: #000; font-weight: normal; padding: 4px 1px; text-align: center; } .dateRangePicker .ui-datepicker table td.date-range-selected a, .dateRangePicker .ui-datepicker table td a.ui-state-active { background: #09f; color: #fff !important; } .dateRangePicker .ui-datepicker table th { padding: 4px 1px; } .dateRangePicker .ui-datepicker table tr:last-of-type td { border-bottom: none; } 

 /* Don't use selection stuff without nesting! ::-moz-selection { background-color: #09f; color: #fff; } ::selection { background-color: #09f; color: #fff; } */ #dev_docs h3.sechead { color: #404040; font-size: 18px; margin-top: 15px; } #dev_docs .aside sup { color: red; } #dev_docs table { background: #f5f5f5; border: 1px solid #ddd; border-spacing: 0px; margin-bottom: 15px; } #dev_docs table th { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; padding: 8px 12px; text-align: left; } #dev_docs table th.nested { padding: 8px 36px; } #dev_docs table td { border-top: 1px solid #ddd; padding: 8px 12px; } #dev_docs table td.heading .aside { float: right; } #dev_docs table td.nested { background: #f9f9f9; padding: 8px 36px; } #dev_docs table td.example { background: #f9f9f9; border-top: none; padding: 0; } #dev_docs table td.example * { display: none; } #dev_docs table td.example h3:nth-child(3) { margin-top: 15px; } #dev_docs table td:not(.example) code, #dev_docs table td.example.inline-code code { background: #ddd; display: inline-block !important; padding: 0px 2px; margin: 4px 2px; } #dev_docs table td:not(.example) code.bold-code, #dev_docs table td.example.inline-code code.bold-code { font-weight: bold; } #dev_docs table td .arrow { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #bbb; } #dev_docs table tr.expanded td .arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #bbb; margin-top: 5px; } #dev_docs table tr.expanded + tr td.example { border-top: 1px solid #ddd; padding: 8px 36px; } #dev_docs table tr.expanded + tr td.example * { display: block; } #dev_docs .section { display: none; } #dev_docs .section:first-child { display: block; } #dev_docs ul.examples { margin: 10px 0; } #dev_docs ul.examples > li { margin: 10px 0; overflow: auto; } #dev_docs ul.examples > li .arrow { float: left; width: 0; height: 0; margin-right: 15px; margin-bottom: 15px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #09f; } #dev_docs ul.examples > li > a { color: #000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 15px; } #dev_docs ul.examples > li > ul { background: #f5f5f5; border: 1px solid #ddd; display: none; padding: 8px; } #dev_docs ul.examples > li.expanded .arrow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #09f; } #dev_docs ul.examples > li.expanded > ul { display: block; margin: 10px 0; } #dev_docs .category_list code { background: #ddd; display: inline-block; padding: 0px 2px; margin: 4px 2px; } 

#dev_footer { color: #fff; font-family: "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-align: center; position: relative; margin-top: -50px; height: 14px; padding: 18px 0; clear: both; } #dev_footer a { color: #fff; text-decoration: underline; } #dev_footer a:hover { color: #09f; } #dev_footer b, #foundry_footer strong { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #dev_footer i, #foundry_footer em { font-family: "Proxima-Nova-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; } 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } .dev_button, a.dev_button, input[type=button].dev_button, input[type=submit].dev_button { background: #0096FF; border: none; border-radius: 2px; box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.2), inset -2px -2px 5px rgba(0, 0, 0, 0.1); color: #fff !important; font-size: 16px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; letter-spacing: 1px; padding: 8px 20px; text-decoration: none; text-transform: uppercase; -webkit-transition: background 200ms ease-in-out; -moz-transition: background 200ms ease-in-out; -ms-transition: background 200ms ease-in-out; -o-transition: background 200ms ease-in-out; transition: background 200ms ease-in-out; } .dev_button.big, a.dev_button.big, input[type=button].dev_button.big, input[type=submit].dev_button.big { font-size: 18px; padding: 12px 24px; } .dev_button.small, a.dev_button.small, input[type=button].dev_button.small, input[type=submit].dev_button.small { padding: 8px 12px; } .dev_white_button, a.dev_white_button, input[type=button].dev_white_button, input[type=submit].dev_white_button { background: #fff; border: 1px solid #ddd; border-radius: 1px; box-shadow: inset 0px -1px 4px #f5f5f5; cursor: pointer; color: #444 !important; float: right; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 13px; margin: 0 0 0 5px; padding: 3px 8px; text-decoration: none; -moz-transition: border-color 200ms ease-in-out; -o-transition: border-color 200ms ease-in-out; -webkit-transition: border-color 200ms ease-in-out; transition: border-color 200ms ease-in-out; } .dev_white_button:hover, a.dev_white_button:hover, input[type=button].dev_white_button:hover, input[type=submit].dev_white_button:hover { border-color: #09f; } .dev_white_button.big, a.dev_white_button.big, input[type=button].dev_white_button.big, input[type=submit].dev_white_button.big { letter-spacing: 1px; padding: 5px 10px; text-transform: uppercase; } .dev_button:hover, input[type=button].dev_button:hover, input[type=submit].dev_button:hover { background: #0076DF; } input[type=text].dev_input, input[type=password].dev_input, textarea.dev_input { border: 1px solid #ddd; display: inline-block; font-size: 14px; padding: 5px 7px; -webkit-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -moz-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -ms-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -o-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; } input[type=text].dev_input:focus, input[type=password].dev_input:focus, textarea.dev_input:focus { border-color: #09f; box-shadow: inset 0px 2px 3px #e6e6e6; outline: none; } #dev_wrapper { height: 100%; } body > #dev_wrapper { background: #404040; height: auto; min-height: 100%; } #dev_main { font-family: "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; padding-bottom: 50px; } #dev_main a { color: #09f; } #dev_main b, #dev_main strong { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #dev_main i, #dev_main em { font-family: "Proxima-Nova-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; } #dev_main .grey { color: #666; } #dev_main h2 + p { margin-top: 1em; } #dev_wrapper + #myfontsLegal { color: #fff; text-align: center; position: relative; margin-top: -50px; height: 14px; padding: 18px 0; clear: both; } #dev_wrapper + #myfontsLegal a { color: #fff; text-decoration: underline; } #dev_wrapper + #myfontsLegal a:hover { color: #09f; } #dev_header { height: 90px; margin: 0 auto; overflow: hidden; position: relative; width: 960px; } .dev_logo { background: url("/s/images/dev/dev_logo.png") center center no-repeat; background-size: 100px 50px; height: 50px; width: 100px; position: absolute; top: 32px; left: 0; } .dev_tools { color: #ccc; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; letter-spacing: 1px; line-height: 14px; text-transform: uppercase; position: absolute; top: 35px; left: 110px; width: 130px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .dev_logo { background: url("/s/images/dev/dev_logo@2x.png") center center no-repeat; background-size: 100px 50px; } } #dev_nav { list-style: none; position: absolute; top: 50px; left: 50%; margin-left: -240px; width: 750px; } #dev_nav li { float: left; height: 40px; margin-left: 40px; font-size: 14px; } @media only screen and (-webkit-max-device-pixel-ratio: 1.49) { #dev_nav li.selected { background: url("/s/images/dev/dev_tab_selected.png") center bottom no-repeat; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #dev_nav li.selected { background: url("/s/images/dev/dev_tab_selected@2x.png") center bottom no-repeat; background-size: 21.33337px 10px; } } #dev_nav li a { color: #fff; padding-bottom: 4px; } #dev_nav li a:hover { border-bottom: 1px solid #fff; color: #fff; text-decoration: none; } #dev_user_menu { color: #fff; font-size: 12px; position: absolute; top: 6px; right: 0px; } #dev_user_menu .user_name { padding: 0 8px; } #dev_user_menu a { color: #fff; padding-bottom: 3px; margin: 0 8px; text-decoration: none; } #dev_user_menu a:hover { border-bottom: 1px solid #fff; color: #fff; } #dev_main .page { background: #fff; box-sizing: border-box; margin: 0 auto; overflow: auto; padding: 30px; position: relative; width: 960px; } #dev_main .page .sidebar { box-sizing: border-box; float: left; text-align: right; width: 10%; } #dev_main .page .sidebar a { display: block; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; margin-bottom: 12px; } #dev_main .page .sidebar a.selected { color: #000; } #dev_main .page .sidebar a.dev_button, #dev_main .page .sidebar a.dev_white_button { font-size: 14px; margin-bottom: 16px; } #dev_main .page .content { box-sizing: border-box; float: left; padding: 0 25px; width: 80%; } #dev_main .page .content.full { width: 100%; } #dev_main .page .content hr { background: #ddd; border: none; height: 1px; margin-bottom: 10px; } #dev_main .page .content p { margin-bottom: 14px; } #dev_main .page .content ol { counter-reset: li; margin-left: 0; margin-bottom: 1em; padding-left: 0; } #dev_main .page .content ol li { position: relative; margin: 2px 0 2px 1.5em; list-style: none; } #dev_main .page .content ol li:before { content: counter(li) "."; counter-increment: li; position: absolute; top: -2px; left: -1.5em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 1.5em; margin-right: 8px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; text-align: center; } #dev_main .page .content .wide { width: 118%; } .dev_checkbox { display: none; display: inline-block \9; } .dev_checkbox + label { display: inline-block; margin-right: 10px; } .dev_checkbox + label .checkbox_image { background: url("/s/images/dev/dev_checkbox.png") center center no-repeat; background-size: 18px 18px; display: inline-block; display: none \9; height: 18px; width: 18px; position: relative; top: 4px; } .dev_checkbox + label:active .checkbox_image, .dev_checkbox:checked + label:active .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_active.png"); } .dev_checkbox:checked + label .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_checked.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .dev_checkbox + label .checkbox_image { background: url("/s/images/dev/dev_checkbox@2x.png") center center no-repeat; background-size: 18px 18px; } .dev_checkbox + label:active .checkbox_image, .dev_checkbox:checked + label:active .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_active@2x.png"); } .dev_checkbox:checked + label .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_checked@2x.png"); } } 

#dev_manage_apps #your_apps { position: relative; } #dev_manage_apps #your_apps #new_app { position: absolute; top: 0; right: 0; } #dev_manage_apps #your_apps .app { margin: 30px 0; } #dev_manage_apps #your_apps .app.template { display: none; } #dev_manage_apps #your_apps .app .app_header { background: #f5f5f5; border: 1px solid #ddd; box-sizing: border-box; overflow: auto; padding: 5px; width: 100%; } #dev_manage_apps #your_apps .app .app_header h3 { color: #444; float: left; margin: 2px 0; } #dev_manage_apps #your_apps .app p { margin-top: 5px; margin-bottom: 0 !important; } #dev_manage_apps form.app_form { display: none; } #dev_manage_apps form.app_form .warning_msg { color: #dd0000; font-size: 16px; display: none; } #dev_manage_apps form.app_form .warning_msg.active { display: block; } #dev_manage_apps form.app_form input[type=text], #dev_manage_apps form.app_form label { display: block; } #dev_manage_apps form.app_form input[type=text], #dev_manage_apps form.app_form textarea { margin: 8px 0; width: 515px; } #dev_manage_apps form.app_form input[type=text].warning_field, #dev_manage_apps form.app_form textarea.warning_field { border-color: #dd0000; } #dev_manage_apps form.app_form label { font-size: 14px; margin-top: 20px; } #dev_manage_apps form.app_form textarea { height: 150px; width: 654px; } #dev_manage_apps form.app_form input[type=checkbox] { position: relative; top: -10px; } #dev_manage_apps form.app_form input[type=checkbox] + label { position: relative; top: -10px; } #dev_manage_apps form.app_form input[type=submit] { margin-top: 15px; } 

#dev_main #dev_404 { background: url("/s/images/dev/dev_404.gif") center center/100% 100% no-repeat !important; color: #fff; font-family: "RooneySans-Medium"; font-size: 80px; height: 525px; position: relative; width: 700px; text-align: center; } #dev_main #dev_404 span { display: inline-block; line-height: 1em; opacity: 0.25; margin-top: 60%; } @media screen and (min-height: 700px) { #dev_main #dev_404 { height: 720px; width: 960px; } } 

 #docs { box-sizing: border-box; color: #333; font-family: 'St-Marie-Pro-Regular', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; } #docs p { font-size: 1em; margin: 1em 0; word-spacing: 0.07em; } #docs h4 + p, #docs h5 + p { margin-top: 0; } #docs h1 { color: #333; font-family: 'St-Marie-Pro-Black', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 3em; } #docs h2 { font-size: 1.8888em; padding-right: 35px; } #docs h3 { font-size: 1.8888em; margin: 0.8em 0 0.5em; } #docs h2, #docs h3 { color: #000; font-family: 'St-Marie-Pro-Thin', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #docs h2 a, #docs h3 a { color: #000; text-decoration: none; } #docs h4 { color: #333; font-family: 'St-Marie-Pro-Extra-Bold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 1.1666em; font-weight: normal; margin: 1.2em 0 0.6em; } #docs h4 a { color: #333; text-decoration: none; } #docs h5 { font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 1.0555em; margin: 1.2em 0 0.6em; } #docs em { font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; font-size: 1.0555em; } #docs .light { color: #000; font-family: 'St-Marie-Pro-Light', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #docs .right { text-align: right; } #docs .ryde { font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #docs header { margin-bottom: 20px; } #docs .sidebar { float: left; width: 200px; } #docs .sidebar a { display: block; margin: 1em 25px 1em 0; } #docs .sidebar a.selected { color: #000; } #docs .sidebar h4 { margin-top: 1em; } #docs .content { float: right; padding-left: 15px; width: 685px; } #docs .content ul.bullets { list-style-type: disc; } #docs .content li { line-height: 1.4em; margin: 0.8em 0 0.8em 30px; } #docs .content li ul.address { margin-top: 0.8em; } #docs .content li ul.address li { margin-top: 0; margin-bottom: 0; } 

div.dropdown_widget { position: relative; } div.dropdown_widget select.dropdown_fake_select { visibility: hidden; height: 21px; vertical-align: middle; } div.dropdown_widget input.dropdown_text { position: absolute; border-width: 1px; border-style: solid; border-color: #808080 white #E0E0E0 #808080; font-size: 12px; padding: 1px; background-color: white; height: 17px; left: 0px; top: 0px; right: 20px; } * html div.dropdown_widget input.dropdown_text { top: 1px; } div.dropdown_widget div.dropdown_button { position: absolute; background-image: url(/s/w/dropdown/dropdown-button.gif); width: 16px; height: 21px; right: 0px; top: 0px; cursor: default; } * html div.dropdown_widget div.dropdown_button { top: 1px; } input.dropdown_shortlist { display: none; } div.dropdown_menu { position: absolute; z-index: 1001; background-color: white; border: 1px solid black; left: 0px; top: 21px; max-height: 360px; overflow: auto; } div.dropdown_menu.dropup_menu { top: auto; bottom: 12px; } div.dropdown_menu div.scroller { overflow: auto; white-space: nowrap; padding: 3px; } div.dropdown_menu ul { padding: 0px; margin: 0px; } div.dropdown_menu ul .optgroup { font-weight: bold; } div.dropdown_menu li { margin: 0px; padding: 1px; cursor: default; } div.dropdown_menu li.indent { padding-left: 1em; } div.dropdown_menu li.hover { background-color: #36a0d1; color: white; font-weight: bold; } 

#dropdown_login_form { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 0; padding: 0; } #dropdown_login_form input[type=text], #dropdown_login_form input[type=password] { border: 1px solid #ddd; display: block; font-family: "RooneySans-Regular", "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 12px; margin-bottom: 10px; padding: 5px 7px; width: 91%; -webkit-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -moz-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -ms-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -o-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; } #dropdown_login_form input[type=text].error, #dropdown_login_form input[type=password].error { border-color: #c00; } #dropdown_login_form input[type=text]:focus, #dropdown_login_form input[type=password]:focus { border-color: #09f; box-shadow: inset 0px 2px 3px #e6e6e6; outline: none; } #dropdown_login_form label { font-size: 12px; } #dropdown_login_form p { margin: 0 0 5px 0; } #dropdown_login_form p.errormsg { color: #c00; font-size: 11px; } #dropdown_login_form input[type=submit] { background-color: #09f; border-radius: 3px; color: #fff; cursor: pointer; font-size: 12px; letter-spacing: 0.03em; line-height: 18px; padding: 5px 9px; position: absolute; bottom: 3px; left: 0px; outline: none; border: none; -webkit-appearance: none; -webkit-border-radius: 3px; font-family: "RooneySans-Medium","Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #dropdown_login_form input[type=submit]:hover { background-color: #078adb; } #dropdown_login_form .account_links { font-size: 10px; position: absolute; bottom: 12px; right: 8px; } #dropdown_login_form .account_links a { color: #555; text-decoration: none; } #dropdown_login_form .account_links a:hover { color: #09f; } 

ul.error_box { list-style-type: disc; padding: 12px; padding-left: 24px; margin-bottom: 12px; border: 1px solid #C00; background-color: #FCC; color: #C00; } 

.pricingGetQuoteBlock { margin: 0; padding: 0; } .pricingGetQuoteBlock__contentWrapper { padding: 1.5em 1em; } .pricingGetQuoteBlock__text { font-size: 13px; margin: 0 0 10px; text-align: center; } .pricingGetQuoteBlock__button { text-align: center; } #family .sendfont-sidebar h3 { margin: 5px 0; } #family .sendfont-sidebar h3:before { display: inline-block; margin: 0 5px 0 0; width: 16px; height: 16px; position: relative; bottom: -2px; } #family .sendfont-sidebar p { font-size: 13px; line-height: 1.4; } #family img.flag { margin-bottom: 10px; float: right; margin-left: 10px; } #family #overview_tab div.bottom_column { float: left; width: 224px; margin-top: 12px; margin-right: 12px; } #family #overview_tab div.bottom_column.bottom_column_first { border-left: 0; padding-left: 0; margin-left: 0; } #family #overview_tab #overview_samples { clear: both; padding-top: 0; } #family #overview_samples .ac-favorite-root { display: inline-block; margin-top: 6px; } #family #overview_samples .favorite { margin-bottom: 6px; margin-right: 0; } #family #overview_samples .fc-authenticate { top: 40px; right: 156px; } #family h4.familyBreadcrumb { color: #333; font-weight: normal; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-right: 15px; float: left; line-height: 19px; } #family div.sample { width: 100%; border-top: solid 1px #CCCCCC; margin-bottom: 5px; padding-top: 5px; } #family div.sample.sample_last { border-bottom: solid 1px #CCCCCC; } #family div.sample h4 { float: left; padding-top: 6px; font-weight: normal; } #family .sample_image { clear: both; overflow: hidden; padding: 5px 0 5px 0; width: 100%; } #family .price-tag { float: right; } #family p.instructions { font-size: 11px; } #family .mfAPICblock { padding-top: 3px; } #family div.admin_section, #family blue_ribbon { margin-bottom: 18px; padding: 10px; } #family #admin_tab ul { line-height: 1.5em; } #family .none { font-style: italic; } #family #family_copyright { margin-top: 12px; } #family #language_meta_groups ul li { padding-bottom: 12px; } #family .mls-slice { background: transparent url("/s/images/family/MF-family.png") center no-repeat; padding: 17px 20px; position: relative; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #family .mls-slice { background-image: url("/s/images/family/MF-family@2x.png"); background-size: 100% 90px; } } #family .mls-slice .mls-text { font-size: 1rem; line-height: 1.5rem; margin-top: 0.2rem; color: #fff; font-family: 'Harmonia-Sans-Regular'; } #family .mls-slice .mls-text span { font-family: 'Harmonia-Sans-Bold'; } #family .mls-slice .mls-logo { margin: 5px 14px 0 0; } #family .mls-slice .mls-logo.white { background: transparent url("/s/images/logo/MLS-icon-sml.png") center no-repeat; width: 44px; height: 44px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #family .mls-slice .mls-logo.white { background-image: url("/s/images/logo/MLS-icon-sml@2x.png"); background-size: 44px 44px; } } #family .mls-slice .btn-mls-new { background-color: #fb748b; border: 0; border-radius: 3px; box-sizing: border-box; color: #fff; padding: 15px 30px 14px; margin: 0; cursor: pointer; text-decoration: none; text-transform: uppercase; text-align: center; width: auto; position: absolute; right: 20px; top: 23px; font-size: 14px; letter-spacing: .15em; line-height: 1; font-family: 'Harmonia-Sans-Regular'; } #family .mls-slice p { margin-bottom: 0; } #family #font-testdrive-new #cust-text { width: 138px; } #family #font-testdrive-new #font-slider { width: 85px; } #family #font-testdrive-new #fit-width { width: 105px; padding: 0; padding-top: 7px; margin-left: 12px; } #family #font-testdrive-new #font-size { margin-left: 0; } #family #font-testdrive-new #font-options { margin-left: 0; } #family #font-testdrive-new #fit-width.checkbox label { font-size: 14px; padding-left: 28px; background-position: -7px -103px; } #family #font-testdrive-new #fit-width.checkbox label.checked { background-position: -7px -81px; } #family #font-testdrive-new .image_checkbox { display: none; } #family #progress, #family .back-to-top { display: none; } #family div.search-result-item h4 a { float: left; padding-top: 6px; font-weight: normal; font-size: 13px; } #family #overview_tab div.sample.testdrive_container { border-top: 0; clear: both; } #family div.search-result-item { padding: 5px 0; min-height: inherit; border-top: 1px solid #CCC; } #family #overview_tab div.search-result-item.sample_last { border-bottom: solid 1px #CCCCCC; } #family #overview_tab div.search-result-item.sample_first { border-top: 0; } #family .right-options { display: none; } #family .cart_button_wrapper { float: right; margin-left: 10px; } #family .add_to_album_toggle_client.only.album-toggle { background: #F0F; } #family .overview_tab .licicon { cursor: pointer; } #family div.licbtns { height: 25px; padding-top: 10px; } #family div.licbtns div { margin-right: 20px; margin-top: 5px; } #family div.rollover_buttons_lic .mouseshowlic { visibility: hidden; } #family .licicon { width: 25px; height: 25px; position: relative; white-space: nowrap; overflow: hidden; margin-right: 3px; background: url("/s/images/iconsets/myfonts/licenseiconssmall-sprite-v3.png") 0 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #family .licicon { background-image: url("/s/images/iconsets/myfonts/licenseiconssmall-sprite-v3@2x.png"); background-size: 200px 64px; } } #family .licensetype-mls { background-position: -152px 0; width: 22px; } #family .licensetype-web { background-position: 0 0; } #family .licensetype-web-paygo { background-position: 0 0; height: 32px; top: -3px; } #family .licensetype-server { background-position: -25px 0; } #family .licensetype-epub { background-position: -50px 0; } #family .licensetype-desktop { background-position: -75px 0; } #family .licensetype-app { background-position: -100px 0; } #family .licensetype-app-paygo { background-position: -125px 0; height: 32px; top: -3px; } #family .licensetype-digitalad { background-position: -175px 0; } #family .licshovermsg { clear: left; padding-top: 20px; height: 15px; position: absolute; font-weight: bold; } #family .licshoverpointer { width: 25px; height: 10px; position: relative; white-space: nowrap; overflow: hidden; margin-right: 3px; background: url("/s/images/iconsets/myfonts/triangle.png") center bottom no-repeat; clear: left; margin-top: 7px; display: none; position: absolute; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #family .licshoverpointer { background-image: url("/s/images/iconsets/myfonts/triangle@2x.png"); background-size: 8px 5px; } } #family .famglyphs { float: left; width: 300px; } #family .fltleftlist { float: left; } #family .lisctxtbtnhldr { position: absolute; bottom: 10px; width: 620px; text-align: center; background-color: #fff; } #family ul.webfont_style_list li { white-space: nowrap; overflow: hidden; } #family #familylicensingoptions { float: left; width: 270px; height: 80px; } #family #familylicensingoptionsglyphs { clear: left; border-top: solid 1px #ddd; margin-top: 5px; padding-top: 5px; height: 90px; } #family #familylicensingoptionsglyphs strong { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #familylicensingoptions .licensetype-mls:hover { background-position: -152px -32px; } #familylicensingoptions .licensetype-web:hover { background-position: 0 -32px; } #familylicensingoptions .licensetype-web-paygo:hover { background-position: 0 -32px; } #familylicensingoptions .licensetype-server:hover { background-position: -25px -32px; } #familylicensingoptions .licensetype-epub:hover { background-position: -50px -32px; } #familylicensingoptions .licensetype-desktop:hover { background-position: -75px -32px; } #familylicensingoptions .licensetype-app:hover { background-position: -100px -32px; } #familylicensingoptions .licensetype-app-paygo:hover { background-position: -125px -32px; } #familylicensingoptions .licensetype-digitalad:hover { background-position: -175px -32px; } #language_options_box { width: 189px; padding: 12px 3px; } #language_options_box #language_options_selection { border: 1px solid #CCC; background-color: #F5F5F5; font-size: smaller; padding: 3px; position: relative; width: 100%; left: -3px; cursor: pointer; } #language_options_box #language_options_selection:hover { background-color: white; border-color: #69F; } #language_options_box #language_options_selection #language_options_dropdown_arrow { float: right; color: #69F; position: relative; top: 0.5em; } #language_options_box ul li { padding: 3px; } #language_options_box ul li.selected { font-weight: bold; } #language_options_box ul li.even { background-color: white; } #language_options_box ul li.odd { background-color: #F5F5F5; } .two_column_layout .main_column .autobox-with-tabs #language_options_box { position: absolute; top: -91px; right: 0; z-index: 50; } .blue_ribbon_reviews { margin-left: 10px; } .blue_ribbon_reviews li { border-bottom: 1px solid #000; padding-bottom: 5px; margin-top: 5px; } .blue_ribbon_reviews li:last-child { border-bottom: 0; } .blue_ribbon hr { display: block; height: 1px; border: 0; border-top: 1px solid #000; margin: 10px 0; } .blue_ribbon_form input { margin: 10px 10px 0 0; } .blue_ribbon_form textarea { display: block; margin: 15px 0 5px; height: 120px; width: 680px; } #generate_new_webfonts_form ul { padding-left: 1em; } #localtab_webfont_preview { *display: none; _display: none; } #add_family_to_cart .add_to_album_toggle_client.only { height: 100%; border-radius: 3px; font-size: 10px; padding: 11px 14px; width: inherit; } #add_family_to_cart .cart_button_wrapper { height: 40px; } #add_family_to_cart .add_to_album_dropdown_client { top: 40px; } #overview_samples .add_to_album_toggle_client.only { padding: 2px 6px; margin-top: 6px; margin-bottom: 6px; } #overview_samples button.add_to_album_toggle_client.only span.label { font-size: 12px; } #overview_samples .add_to_album_dropdown_client { top: 29px; } .float_right { float: right; } .album_dropdown { height: inherit; } #family .ac-follow-root { position: relative; } #family .fam-follow a.fcbtn { border-radius: 3px; background-color: #eee; color: #4A4A4A; font-size: 12px; margin: 0 0 5px 0; height: 20px; text-decoration: none; text-align: center; width: 62px; float: left; line-height: 20px; } #family .fam-follow a.fcbtn:hover { background: #ddd; } #family .fam-follow div.fc-authenticate { top: 20px; left: 75px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #family #font-testdrive-new #fit-width.checkbox label { background-position: -3px -198px; } #family #font-testdrive-new #fit-width.checkbox label.checked { background-position: -3px -161px; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #family #font-testdrive-new #font-slider { width: 88%; } #family #font-testdrive-new .image_checkbox_mobile { display: none; } #family #font-testdrive-new #display-options + .dropdown-modal ul li.option:nth-child(2) { border-top-style: solid; } #family #font-testdrive-new #font-size #font-slider-wrap, #family #font-testdrive-new #font-size > #fit-width { display: none; } #family #font-testdrive-new #color-picker + .dropdown-modal { width: 325px !important; left: 0; } #family #font-testdrive-new #advanced-options + .dropdown-modal { width: 300px !important; } #family #font-testdrive-new #display-options + .dropdown-modal { width: 300px !important; left: 100px; } #family #font-testdrive-new #text-selector .dropdown-inner { max-height: none !important; } #family #font-testdrive-new .adv-options .dropdown-inner { max-height: none !important; } #family #font-testdrive-new #font-options .dis-options ul:first-of-type:before { margin-left: 164px; } #family #font-testdrive-new #font-options .dis-options ul:first-of-type:after { margin-left: 163px; } #family #font-testdrive-new #cust-text { width: 100%; } } #addToCartDialog { position: fixed; z-index: 10000; top: 0; left: 0; width: 400px; padding: 12px; background-color: white; } #addToCartDialog .close_x { position: absolute; right: 3px; top: 3px; } div.buying-choices { padding: 20px; color: #4a4a4a; } div.buying-choices p { padding: 15px 0; } div.buying-choices p.loader { position: absolute; padding: 0; margin: 0; font-style: italic; font-size: 14px; padding-left: 20px; background: transparent url("/s/images/iconsets/myfonts/spinner.gif") 0 1px no-repeat; background-size: 16px; min-height: 20px; opacity: 0.8; color: #000; } div.buying-choices p.loader.price { margin-top: 9px; right: 34px; text-align: right; } div.buying-choices h1 { font-size: 24px; line-height: 1.2; margin-bottom: 10px; font-weight: 400; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.buying-choices h2 { font-size: 20px; } div.buying-choices h3 { font-size: 19px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.buying-choices h2 + p { padding-top: 0; } div.buying-choices hr { background: #f1f1f1; height: 1px; border: none; margin: 18px 0; } div.buying-choices select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; border-radius: 4px; border: 1px solid #C9C9C9; font-size: 14px; padding-left: 12px; padding-right: 31px; box-sizing: border-box; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; background: url("/s/images/family/dropdown-sprite.png") no-repeat right 8px top 8px; height: 36px; cursor: pointer; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.buying-choices select { background-image: url("/s/images/family/dropdown-sprite@2x.png"); background-size: 23px 100px; } } div.buying-choices select::-ms-expand { display: none; } div.buying-choices select[disabled] { background-position: right 8px bottom 8px; cursor: default; } div.buying-choices ul.buying-choices { margin: 0; padding: 0; list-style: none; } div.buying-choices ul.buying-choices .licensing-info p { display: inline-block; } div.buying-choices ul.buying-choices li { padding: 0 0 15px; } div.buying-choices ul.buying-choices h3 { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; } div.buying-choices ul.buying-choices p { font-size: 13px; padding: 0; margin: 0; } div.buying-choices ul.buying-choices span.checkbox { float: left; width: 5%; margin-left: 1%; margin-top: 18px; } div.buying-choices ul.buying-choices .licensing-info { float: left; width: 94%; } div.buying-choices ul.buying-choices label { float: left; width: 72%; display: block; cursor: pointer; } div.buying-choices ul.buying-choices select, div.buying-choices ul.buying-choices .custom-select { width: 28%; float: right; margin-top: 12px; } div.buying-choices ul.buying-choices select.select-font-format { float: none; font-size: 13px; width: auto; padding: 0 21px 0 7px; height: 25px; margin-top: 8px; margin-bottom: 8px; background: url("/s/images/family/dropdown-dark.png") no-repeat right 6px top 7px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.buying-choices ul.buying-choices select.select-font-format { background-image: url("/s/images/family/dropdown-dark@2x.png"); background-size: 9px 8px; } } div.buying-choices ul.buying-choices select.select-font-format:focus { outline: none; } div.buying-choices ul.buying-choices .license-quantity-unlimited { width: 28%; float: right; margin-top: 26px; } div.buying-choices ul.buying-choices .buying-choice-icon { float: left; margin-right: 15px; } div.buying-choices p.promo { color: #888; } div.buying-choices p.promo.is-active:after { content: '\221a'; display: inline-block; margin-left: 4px; color: #888; font-family: 'Social-Network-Icons'; } div.buying-choices .buying-choice-icon { width: 50px; height: 50px; background-image: url("/s/images/family/license-types-sprite.png?v=2"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.buying-choices .buying-choice-icon { background-image: url("/s/images/family/license-types-sprite@2x.png?v=2"); background-size: 475px 120px; } } div.buying-choices .buying-choice-icon.small { width: 37px; height: 37px; background-image: url("/s/images/family/license-types-sprite-small.png?v=2"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.buying-choices .buying-choice-icon.small { background-image: url("/s/images/family/license-types-sprite-small@2x.png?v=2"); background-size: 356px 90px; } } div.buying-choices .buying-choice-icon.webfont { background-position: 0 0; } div.buying-choices .buying-choice-icon.server { background-position: -50px 0; } div.buying-choices .buying-choice-icon.epub { background-position: -100px 0; } div.buying-choices .buying-choice-icon.desktop { background-position: -150px 0; } div.buying-choices .buying-choice-icon.app { background-position: -200px 0; } div.buying-choices .buying-choice-icon.html5ad { background-position: -315px 0; } div.buying-choices .buying-choice-icon.webfont-paygo { height: 56px; background-position: -370px 0; } div.buying-choices .buying-choice-icon.app-paygo { height: 56px; background-position: -420px 0; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.webfont { background-position: 0 -60px; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.server { background-position: -50px -60px; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.epub { background-position: -100px -60px; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.desktop { background-position: -150px -60px; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.app { background-position: -200px -60px; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.html5ad { background-position: -315px -60px; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.webfont-paygo { background-position: -370px -60px; } div.buying-choices input[type=checkbox]:checked ~ div .buying-choice-icon.app-paygo { background-position: -420px -60px; } div.buying-choices .buying-choice-icon.webfont.small { background-position: 0 0; } div.buying-choices .buying-choice-icon.server.small { background-position: -39px 0; } div.buying-choices .buying-choice-icon.epub.small { background-position: -77px 0; } div.buying-choices .buying-choice-icon.desktop.small { background-position: -114px 0; } div.buying-choices .buying-choice-icon.app.small { background-position: -150px 0; } div.buying-choices .buying-choice-icon.html5ad.small { background-position: -237px 0; } div.buying-choices .buying-choice-icon.webfont-paygo.small { height: 43px; background-position: -277px 0; } div.buying-choices .buying-choice-icon.app-paygo.small { height: 43px; background-position: -314px 0; } div.buying-choices .accordian a.control { text-decoration: none; color: #4a4a4a; } div.buying-choices .accordian a.control:hover { text-decoration: none; } div.buying-choices .accordian a.control::before { content: ' '; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #4a4a4a; margin-right: 6px; transition: transform 200ms; } div.buying-choices .accordian.open a.control::before { border-width: 10px 5px 0 5px; border-color: #4a4a4a transparent transparent transparent; } div.buying-choices .filter-language p, div.buying-choices .filter-format p { font-size: 14px; } div.buying-choices .filter-language { float: left; } div.buying-choices .filter-format { float: right; } div.buying-choices .font-preview-panel .font-info, div.buying-choices .font-preview-panel .font-cart, div.buying-choices .font-previews > div { float: left; box-sizing: border-box; padding: 1.3em 1.5em; position: relative; } div.buying-choices .font-preview-panel { margin-top: 20px; position: relative; color: #333; background-color: #f5f5f5; box-shadow: inset 0 -2px white; } div.buying-choices .font-preview-panel .font-info { border-bottom: 2px solid #fff; border-right: 2px solid #fff; width: 72%; } div.buying-choices .font-preview-panel .font-info h3 { font-size: 21px; color: #000; margin-bottom: 4px; } div.buying-choices .font-preview-panel .font-info h3 + p:last-child { padding-bottom: 0; margin-bottom: 0; padding-top: 2px; } div.buying-choices .font-preview-panel .font-cart { float: right; width: 28%; box-shadow: -2px 0 white; padding: 0 0 10px 0; } div.buying-choices .font-preview-panel .font-previews { width: 72%; float: left; box-shadow: inset -2px 0 #fff; } div.buying-choices .font-preview-panel .font-previews div.lazy { height: 36px; background-repeat: no-repeat; background-size: auto 100%; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } div.buying-choices .font-preview-panel .show-more { float: left; clear: left; height: 33px; width: 72%; position: relative; } div.buying-choices .font-preview-panel .show-more a { font-size: 14px; box-sizing: border-box; position: absolute; top: -87px; bottom: 2px; left: 0; z-index: 2; width: 100%; height: 118px; border-right: 2px solid #fff; background: whitesmoke; background: linear-gradient(rgba(245, 245, 245, 0) 0, whitesmoke 63px); } div.buying-choices .font-preview-panel .show-more a span { background-color: #dedede; color: #4a4a4a; border-radius: 3px; padding: 4px 12px 5px; position: absolute; left: 20px; bottom: 19px; } div.buying-choices .font-preview-panel .show-more a:hover { text-decoration: none; } div.buying-choices .font-preview-panel .show-more a:focus { outline: none; } div.buying-choices .font-preview-panel .font-languages { width: 100%; float: left; clear: both; border-top: 2px solid #fff; margin-top: -2px; padding: 1.3em 1.5em; box-sizing: border-box; } div.buying-choices .font-preview-panel .font-languages p { margin: 0; padding: 0; font-size: 12px; color: #4a4a4a; } div.buying-choices .font-preview-panel .font-languages p + p { margin-top: 7px; } div.buying-choices .font-preview-panel.individual-font .font-languages { clear: none; width: 72%; box-sizing: border-box; margin-top: 0; border-top: none; box-shadow: inset -2px 0 #fff; } div.buying-choices .font-previews > div { border-right: 2px solid #fff; border-bottom: 2px solid #fff; width: 50%; overflow: hidden; min-height: 105px; } div.buying-choices .font-previews > div::after { pointer-events: none; content: ''; width: 25px; position: absolute; height: 100%; right: 0; top: 0; -webkit-box-shadow: inset -20px 0 18px #f4f4f4; box-shadow: inset -20px 0 18px #f4f4f4; } div.buying-choices .font-previews img { max-height: 36px; margin-left: -3px; } div.buying-choices .font-previews h5 { font-weight: 400; font-size: 13px; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } div.buying-choices .individual-font .font-previews > div { width: 100%; } div.buying-choices p.price span.discounted { display: none; color: #D0021B; } div.buying-choices p.price.discounted span.regular { text-decoration: line-through; } div.buying-choices p.price.discounted span.discounted { display: inline; } div.buying-choices .font-price-info:not(.pricingGetQuoteBlock) { padding: 1.3em 1.5em; } div.buying-choices .font-cart h4 { font-weight: 400; margin-bottom: 0; font-size: 15px; } div.buying-choices .font-cart p.price { font-size: 20px; padding-top: 0; overflow-wrap: break-word; } div.buying-choices .font-cart .button { width: 100%; display: block; box-sizing: border-box; margin: 0; } div.buying-choices .font-cart .button.darkgray { padding-right: 36px; text-align: center; background-image: url("/s/images/iconsets/myfonts/icon-arrow-right.png"); background-repeat: no-repeat; background-position: right 17px bottom 50%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.buying-choices .font-cart .button.darkgray { background-image: url("/s/images/iconsets/myfonts/icon-arrow-right@2x.png"); background-size: 16px 13px; } } div.buying-choices .font-cart .font-license-info { padding: 1em 1.5em; } div.buying-choices .font-cart .font-license-info p { padding-bottom: 3px; margin-bottom: 0; padding-top: 6px; } div.buying-choices .font-cart .font-license-info p strong { font-weight: 400; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.buying-choices .font-cart .font-license-info .buying-choice-icon { float: left; margin-right: 10px; } div.buying-choices .font-cart .font-license-info .buying-choice-icon + p { padding-top: 0; margin-top: 7px; margin-bottom: 3px; } div.buying-choices .font-cart .font-license-info .buying-choice-icon.webfont-paygo + p, div.buying-choices .font-cart .font-license-info .buying-choice-icon.app-paygo + p { margin-bottom: 10px; margin-top: 11px; } div.buying-choices .font-cart .font-license-info select.select-item-font-format { padding: 0 21px 0 7px; height: 25px; margin-left: 5px; height: 25px; background: url("/s/images/family/dropdown-dark.png") no-repeat right 6px top 7px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.buying-choices .font-cart .font-license-info select.select-item-font-format { background-image: url("/s/images/family/dropdown-dark@2x.png"); background-size: 9px 8px; } } div.buying-choices .font-cart .font-license-info select.select-item-font-format:focus { outline: none; } div.buying-choices .font-cart .font-price-info { padding-bottom: 1em; color: #000; } div.buying-choices .font-cart .font-info p + p { clear: left; } div.buying-choices .font-cart .font-info p:last-child { margin-bottom: 0; padding-bottom: 2px; } div.buying-choices p.star:before { content: "\2605"; margin-right: 10px; font-size: 20px; } div.buying-choices .web-desktop-combo { color: #000; margin-top: 15px; background-color: #f5f5f5; } div.buying-choices .web-desktop-combo *, div.buying-choices .web-desktop-combo *:before, div.buying-choices .web-desktop-combo *:after { box-sizing: border-box; } div.buying-choices .web-desktop-combo p { padding: 0; margin: 0 0 15px; } div.buying-choices .web-desktop-combo p:last-child { margin-bottom: 0; } div.buying-choices .web-desktop-combo > div:first-child { border-right: 2px solid #fff; width: 72%; float: left; } div.buying-choices .web-desktop-combo > div:first-child:not(.pricingGetQuoteBlock) { padding: 1.3em 1.5em; } div.buying-choices .web-desktop-combo > div:first-child h2 { font-size: 21px; margin-bottom: 0; margin-top: 12px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.buying-choices .web-desktop-combo > div:first-child h2 + p { color: #4a4a4a; } div.buying-choices .web-desktop-combo > div:first-child strong { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.buying-choices .web-desktop-combo > div:last-child { float: right; width: 28%; box-shadow: -2px 0 white; } div.buying-choices .web-desktop-combo > div:last-child:not(.pricingGetQuoteBlock) { padding: 1.3em 1.5em; } div.buying-choices .web-desktop-combo > div:last-child button { width: 100%; text-align: center; } div.buying-choices .web-desktop-combo > div:last-child h4 { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 15px; font-weight: 400; margin-bottom: 0; } div.buying-choices .web-desktop-combo > div:last-child p.price { font-size: 20px; margin-bottom: 12px; } div.buying-choices .web-desktop-combo .combo-icon { float: left; background-image: url("/s/images/family/icon-web-desktop-combo.png"); width: 111px; height: 87px; margin-right: 25px; margin-top: 9px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.buying-choices .web-desktop-combo .combo-icon { background-image: url("/s/images/family/icon-web-desktop-combo@2x.png"); background-size: 111px 87px; } } div.buying-choices .web-desktop-combo + span.or { position: absolute; left: 50%; background: #fff; display: inline-block; padding: 3px 11px; font-size: 16px; margin-top: 12px; margin-left: -19px; } div.buying-choices .web-desktop-combo + span.or + hr { margin-top: 27px; } div.buying-choices .warmdown { -webkit-animation: warmdown 1s; -moz-animation: warmdown 1s; -ms-animation: warmdown 1s; -o-animation: warmdown 1s; animation: warmdown 1s; } div.buying-choices ul.language-options { margin-bottom: 20px; margin-top: 6px; line-height: 1.5; } div.buying-choices ul.language-options li { clear: left; } div.buying-choices ul.language-options li span.checkbox { float: left; width: 20px; margin-right: 2px; } div.buying-choices ul.language-options li label { cursor: pointer; } .creative-license { } .creative-license h1 { font-size: 24px; margin-bottom: 18px; } .creative-license strong, .creative-license b { color: #000; } .creative-license .ribbon-top { position: absolute; top: 15px; left: -14px; background: url("/s/images/creative_license/ribbon.svg"); width: 293px; height: 56px; } .creative-license .ribbon-top + h1 { margin-top: 40px; } .creative-license .ribbon-top > div { font-size: 20px; color: #FFFFFF; padding: 9px 40px; } .creative-license .font-preview-panel { margin-top: 16px; } .creative-license .font-preview-panel .font-info, .creative-license .font-preview-panel .font-previews, .creative-license .font-preview-panel.individual-font .font-languages { width: 80%; } .creative-license .font-preview-panel .font-cart { width: 20%; } .creative-license .font-preview-panel .font-cart .font-price-info button.large { font-size: 20px; padding: 10px 30px; } .creative-license .font-preview-panel .font-cart .font-price-info h4 { font-size: 16px; } .creative-license .font-preview-panel .font-cart .font-price-info .best-value { background-image: url(/s/images/creative_license/flag_best_value.png); width: 233px; height: 48px; position: absolute; right: -10px; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .creative-license .font-preview-panel .font-cart .font-price-info .best-value { background-image: url("/s/images/creative_license/flag_best_value@2x.png"); background-size: 233px 48px; } } .creative-license .font-preview-panel .font-cart .font-price-info .best-value + .value { margin-top: 48px; } .creative-license .font-preview-panel .font-cart .font-price-info .value { font-size: 18px; text-align: right; color: #4a4a4a; margin-bottom: 40px; } .creative-license .font-preview-panel .font-cart .font-price-info p.price { font-size: 24px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .creative-license .font-preview-panel .font-languages { height: auto; } .creative-license .font-preview-panel .font-languages.hideContent { overflow: hidden; height: 12em; } .creative-license .font-preview-panel .font-price-info { padding: 25px; } .creative-license .font-preview-panel .show-more { width: 80%; } .creative-license .font-preview-panel .show-more-feat a { background-color: #dedede; color: #4a4a4a; border-radius: 3px; padding: 4px 12px 5px; } .creative-license .font-preview-panel.font-package .font-languages { border-top: 1px solid #DEDEDE; margin-top: 25px; padding: 25px 7px; } .creative-license .flexbox-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; text-align: center; } @media screen and (min-width: 600px) { .creative-license .flexbox-container { flex-wrap: nowrap; } } .creative-license .flexbox-container > div { position: relative; padding: 0; background-color: #F5F5F5; box-shadow: 1px 1px 2px 0 rgba(103, 103, 103, 0.5); width: 100%; margin-bottom: 20px; } @media screen and (min-width: 600px) { .creative-license .flexbox-container > div { width: 50%; } } .creative-license .flexbox-container > div:first-child { margin-right: 0; } @media screen and (min-width: 600px) { .creative-license .flexbox-container > div:first-child { margin-right: 20px; } } .creative-license .flexbox-container > p { padding: 10px 0; } .creative-license .flexbox-container .large { font-size: 20px; padding: 10px 20px; margin: 10px 0; min-width: 211px; box-sizing: border-box; } .creative-license .flexbox-container h1 { margin-bottom: 18px; } .creative-license .flexbox-container h2 { font-size: 26px; } .creative-license .flexbox-container h4 { font-size: 20px; } .creative-license .flexbox-container .classic .description, .creative-license .flexbox-container .creative .description { padding: 19px 10px 0; min-height: 225px; } .creative-license .flexbox-container .classic .description p, .creative-license .flexbox-container .creative .description p { width: 100%; margin: 0 auto; } .creative-license .flexbox-container .classic .description p span, .creative-license .flexbox-container .creative .description p span { display: block; font-size: 14px; } .creative-license .flexbox-container .classic .eula a, .creative-license .flexbox-container .creative .eula a { font-size: 12px; color: #4a4a4a; text-decoration: underline; } .creative-license .flexbox-container .classic .eula a:hover, .creative-license .flexbox-container .creative .eula a:hover { text-decoration: none; } .creative-license .flexbox-container .classic .features, .creative-license .flexbox-container .creative .features { margin-top: 13px; } .creative-license .flexbox-container .classic .features .border-top, .creative-license .flexbox-container .creative .features .border-top { border-top: 1px solid #E0E0E0; width: 95%; margin: 0 auto; } .creative-license .flexbox-container .classic .features p, .creative-license .flexbox-container .creative .features p { font-size: 12px; padding: 0; margin: 0; } .creative-license .flexbox-container .classic .features .bottom, .creative-license .flexbox-container .creative .features .bottom { position: absolute; bottom: 14px; left: 44%; } .creative-license .flexbox-container .classic .features > ul, .creative-license .flexbox-container .creative .features > ul { text-align: left; } .creative-license .flexbox-container .classic .features > ul > li, .creative-license .flexbox-container .creative .features > ul > li { padding: 9px 49px; font-size: 12px; position: relative; } .creative-license .flexbox-container .classic .features > ul > li:nth-child(even), .creative-license .flexbox-container .creative .features > ul > li:nth-child(even) { background-color: rgba(255, 255, 255, 0.51); } .creative-license .flexbox-container .classic .features > ul > li.eula, .creative-license .flexbox-container .creative .features > ul > li.eula { text-align: center; padding: 14px 10px; } .creative-license .flexbox-container .classic .features > ul > li:not(.faded):not(.eula):before, .creative-license .flexbox-container .creative .features > ul > li:not(.faded):not(.eula):before { background-image: url("/s/images/iconsets/myfonts/check.svg"); background-size: 8px 6px; background-repeat: no-repeat; width: 8px; height: 6px; content: ""; display: inline-block; padding-bottom: 1px; position: absolute; left: 27px; top: 14px; } .creative-license .flexbox-container .classic .features > ul > li.faded, .creative-license .flexbox-container .creative .features > ul > li.faded { color: #B4B4B4; } .creative-license .flexbox-container .classic .features > ul > li.faded b, .creative-license .flexbox-container .creative .features > ul > li.faded b { color: #B4B4B4; } .creative-license .flexbox-container .classic .features > ul > li .list, .creative-license .flexbox-container .creative .features > ul > li .list { width: 77px; margin: 0 auto; } .creative-license .flexbox-container .classic .features > ul > li .list ul, .creative-license .flexbox-container .creative .features > ul > li .list ul { text-align: left; list-style-type: disc; } .creative-license .flexbox-container .classic .features > ul > li .list ul li, .creative-license .flexbox-container .creative .features > ul > li .list ul li { line-height: 1.5em; text-indent: -5px; } .creative-license .flexbox-container .classic .description img { width: 83px; } .creative-license .flexbox-container .creative .description img { width: 92px; } .creative-license .flexbox-container .creative .ribbon-popular { position: absolute; left: -7px; top: -6px; width: 121px; height: 70px; background: url("/s/images/creative_license/ribbon-small.svg"); } .creative-license .flexbox-container .creative .ribbon-popular > div { color: #FFFFFF; transform: rotate(-30deg); margin-top: 19px; margin-left: -29px; } .creative-license .business { margin-top: 10px; } .creative-license .business h2 { font-size: 22px; } @media screen and (min-width: 800px) { .creative-license .business h2 { font-size: 26px; } } .creative-license .business h2 span { display: block; } .creative-license .business > div:nth-child(1) { width: 64px; height: 64px; float: left; display: inline-block; vertical-align: top; } @media screen and (min-width: 800px) { .creative-license .business > div:nth-child(1) { width: 128px; height: 128px; } } .creative-license .business > div:nth-child(2) { display: inline-block; margin-left: 30px; width: calc(100% - 94px); } @media screen and (min-width: 800px) { .creative-license .business > div:nth-child(2) { width: calc(100% - 158px); } } .creative-license .business p { padding: 5px 0; margin: 0; } .creative-license .business p span { display: block; font-size: 14px; } .creative-license .business button.large { font-size: 20px; padding: 10px 54px; margin: 10px 0; } .creative-license .price-info { font-size: 12px; color: #9B9B9B; margin-top: 30px; } .creative-license .classic .features > ul > li:first-child { padding: 17px 49px; } .creative-license .flexbox-container .classic .features > ul > li:first-child:not(.faded):not(.eula):before { top: 21px; } div.custom-business h1 { font-size: 24px; margin-bottom: 0; } div.custom-business h1 + p { margin-bottom: 0; padding: 15px 0 0 0; } div.custom-business p { padding: 0 0 26px 0; } div.custom-business .large { font-size: 24px; } @-webkit-keyframes warmdown { from { background: yellow; } to { background: transparent; } } @-moz-keyframes warmdown { from { background: yellow; } to { background: transparent; } } @-o-keyframes warmdown { from { background: yellow; } to { background: transparent; } } @keyframes warmdown { from { background: yellow; } to { background: transparent; } } .checkbox-replace input[type=checkbox] { position: absolute; z-index: -1000; left: -1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .checkbox-replace span.checkbox { background: url("/s/images/testdrive_new/fonttools_icon_sprite.png") no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .checkbox-replace span.checkbox { background-image: url("/s/images/testdrive_new/fonttools_icon_sprite@2x.png"); background-size: 320px 250px; } } .checkbox-replace input[type=checkbox] + span.checkbox { height: 20px; min-width: 20px; display: inline-block; line-height: 20px; background-repeat: no-repeat; background-position: -11px -102px; vertical-align: middle; cursor: pointer; } .checkbox-replace input[type=checkbox]:checked + span.checkbox { background-position: -11px -81px; } .custom-select { position: relative; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; border-radius: 4px; border: 1px solid #C9C9C9; font-size: 14px; padding-left: 12px; padding-right: 31px; box-sizing: border-box; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; background: url("/s/images/family/dropdown-sprite.png") no-repeat right 8px top 8px; height: 36px; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .custom-select { background-image: url("/s/images/family/dropdown-sprite@2x.png"); background-size: 23px 100px; } } .custom-select p.star { white-space: nowrap; font-size: 13px; margin: 0; padding: 0; line-height: 1.3; color: #888; } .custom-select p.star:before { content: "\2605"; margin-right: 10px; font-size: 20px; } .custom-select .current-value { padding-top: 9px; height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom-select::-ms-expand { display: none; } .custom-select .dropdown { display: none; min-width: 360px; font-size: 14px; margin: 0; padding: 0; z-index: 3; list-style: none; position: absolute; top: -1px; right: -1px; left: -108px; border: 1px solid #bbb; color: #4a4a4a; background-color: #fff; border-radius: 3px; box-shadow: 2px 2px 3px rgba(51, 51, 51, 0.2); } .custom-select .dropdown.open { display: block; } .custom-select .dropdown li { height: 63px; padding: 0; margin: 0; box-sizing: border-box; border-bottom: 1px solid #ccc; position: relative; background-color: #f7f7f7; } .custom-select .dropdown li:last-child { border-bottom: none; } .custom-select .dropdown li:not(.custom-input) { cursor: pointer; } .custom-select .dropdown li.selected:after { content: '\221a'; position: absolute; right: 19px; line-height: 1; top: 9px; font-family: 'Social-Network-Icons'; pointer-events: none; } .custom-select .dropdown li.selected.custom-input:after { display: none; } .custom-select .dropdown li > div { position: absolute; padding: 0 20px; width: 100%; box-sizing: border-box; top: 50%; text-align: left; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .custom-select .dropdown li.selected > div { padding-right: 35px; } .custom-select .dropdown li p.star { margin: 0; padding: 0; line-height: 1.3; color: #888; } .custom-select .dropdown li p.star:before { margin-right: 4px; font-size: 17px; } .custom-select .dropdown li span.value { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .custom-select .dropdown li input[type=text] { width: 70%; margin-top: 1px; box-sizing: border-box; border-color: #ccc; } .custom-select .dropdown li input[type=text]:focus { border-color: #09f; } .custom-select .dropdown li input[type=submit] { background-color: #4a4a4a; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 0; padding: 6px 12px; position: relative; top: 2px; width: 26%; box-sizing: border-box; float: right; } .custom-select .dropdown li input[type=submit]:hover { background-color: #111; } .custom-select .dropdown li span.error { display: block; color: #c00; font-size: 11px; margin-top: 4px; margin-bottom: 1px; } .custom-select .dropdown li:hover, .custom-select .dropdown li:hover:nth-child(even) { color: #fff; background-color: #09f; } .custom-select .dropdown li:hover p.star, .custom-select .dropdown li:hover:nth-child(even) p.star { color: rgba(255, 255, 255, 0.9); } .custom-select .dropdown li.loading:hover, .custom-select .dropdown li.loading:hover:nth-child(even) { background-color: #f7f7f7; color: #000; } .custom-select .dropdown p.loader { right: 0; padding-left: 28px; padding-top: 6px; background-position: 8px 50%; left: 0; top: 0; bottom: 0; background-color: #f7f7f7; cursor: default; opacity: 1; } .custom-select.advanced .dropdown li { background-color: #fff; } .custom-select.advanced .dropdown li:nth-child(even), .custom-select.advanced .dropdown li.custom-input { background-color: #f7f7f7; } .custom-select.advanced .dropdown li:hover, .custom-select.advanced .dropdown li:hover:nth-child(even) { background-color: #09f; } .custom-select.advanced .dropdown li.custom-input:hover { background-color: #f7f7f7; } .custom-select.advanced .dropdown li.custom-input:hover:after { display: none; } .custom-select.advanced .dropdown li.loading { height: 34px; } .custom-select.advanced .dropdown li.loading:hover, .custom-select.advanced .dropdown li.loading:hover:nth-child(even), .custom-select.advanced .dropdown li.loading.custom-input:hover { background-color: #f7f7f7; color: #000; } .custom-select.advanced .dropdown li.loading.selected:after, .custom-select.advanced .dropdown li.loading:hover:after { display: none; } .custom-select.advanced .dropdown li.selected:after { top: 25px; } .custom-select:not(.advanced) .dropdown { top: 6px; left: -15px; right: 8px; } .custom-select:not(.advanced) .dropdown li { height: auto; min-height: 32px; border-bottom: none; } .custom-select.disabled { background-position: right 8px bottom 8px; cursor: default; color: #7f7f7f; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sendfont-modal-contents { text-align: center; padding: 2em 0; color: #969696; } .sendfont-modal-contents h1 { font-size: 34px; margin-bottom: 12px; color: #4a4a4a; } .sendfont-modal-contents h1:before { width: 30px; height: 30px; } .sendfont-modal-contents h1 + p { font-size: 14px; line-height: 1.5; margin: 0 auto 35px; max-width: 42em; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .sendfont-modal-contents .slice { padding: 2.5em 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sendfont-modal-contents .slice.grey { background-color: #f4f4f4; } .sendfont-modal-contents .slice img { display: block; margin: 0 auto; max-width: 100%; max-height: 40px; } .sendfont-modal-contents h3 { color: #969696; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 22px; margin-bottom: 10px; } .sendfont-modal-contents .styles { font-size: 13px; color: rgba(150, 150, 150, 0.9); margin-top: 10px; } .sendfont-modal-contents form { margin-bottom: 30px; } .sendfont-modal-contents form .options { margin: 35px 0 30px; } .sendfont-modal-contents form .options li { margin: 0 20px; display: inline-block; } .sendfont-modal-contents form .options a { text-transform: uppercase; letter-spacing: 0.08em; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-decoration: none; box-shadow: none; display: inline-block; color: #666; } .sendfont-modal-contents form .options a:hover { color: #000; box-shadow: none; } .sendfont-modal-contents form .options a.active { box-shadow: 0 3px #09f; color: #000; cursor: default; } .sendfont-modal-contents form .option { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; max-width: 400px; margin: 0 auto; align-items: center; } .sendfont-modal-contents form .option.hidden { display: none; } .sendfont-modal-contents form .option.invalid { height: auto; background-color: initial; border: none; } .sendfont-modal-contents form .option.invalid .error { display: block; } .sendfont-modal-contents form .option.invalid input[type=text], .sendfont-modal-contents form .option.invalid input[type=email] { border-color: #c00; } .sendfont-modal-contents form .option .input { flex: 2 0 0; text-align: left; } .sendfont-modal-contents form .option .button { flex: 1 0 0; margin-left: 10px; } .sendfont-modal-contents form .option .error { margin-top: 10px; display: none; color: #c00; } .sendfont-modal-contents form .option input[type=text], .sendfont-modal-contents form .option input[type=email] { box-sizing: border-box; width: 100%; } .sendfont-modal-contents form .option input[type=text]:focus, .sendfont-modal-contents form .option input[type=email]:focus { border-color: #09f; } .sendfont-modal-contents form .option button { padding: 7px 20px; white-space: nowrap; margin: 0; width: 100%; } .sendfont-modal-contents form .option button img { position: relative; left: -3px; top: 1px; } .sendfont-modal-contents form .option small { font-size: 11px; letter-spacing: 0.02em; } .sendfont-modal-contents form .option small a { color: #969696; text-decoration: underline; } .sendfont-modal-contents form .option small a:hover { text-decoration: none; } .sendfont-modal-contents .send-modal-bg { position: absolute; z-index: -1; top: 0; left: -1px; bottom: 0; right: -1px; background: transparent url("/s/images/family/send-modal-bg.png") 50% 100% no-repeat; background-size: contain; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .sendfont-modal-contents .send-modal-bg { background-image: url("/s/images/family/send-modal-bg@2x.png"); background-size: contain; } } .sendfont-modal-contents .cta { margin-bottom: 75px; } .sendfont-modal-contents .cta .button { margin: 0; padding: 9px 26px; } .sendfont-modal-contents .cta p { margin: 3px 0; font-size: 13px; color: rgba(150, 150, 150, 0.9); } .sendfont-modal-contents .cta p a { color: rgba(0, 153, 255, 0.9); text-decoration: underline; } .sendfont-modal-contents .cta p a:hover { text-decoration: none; } #popup_box .controls { margin: 10px auto; padding: 0 25px; } #popup_box .controls input[type=button] { background-color: #ccc; color: #444; } #popup_box .controls input[type=button]:hover { background-color: #bbb; } #popup_box .controls ~ .content { margin: 10px auto; padding: 0 25px; } @media print { #popup_box { width: 100% !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; } #popup_box input[type=button], #popup_box input[type=reset], #popup_box input[type=text], #popup_box button { display: none; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .checkbox-replace input[type=checkbox] + span.checkbox { background-position: -7px -197px; } .checkbox-replace input[type=checkbox]:checked + span.checkbox { background-position: -7px -161px; } } @media only screen and (min-device-width: 320px) and (max-device-width: 533px) and (-webkit-min-device-pixel-ratio: 1) { #myfontsContainer:not(.fluid) ~ #popup_box { width: 533px !important; left: 213px !important; } } @media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 1) { #myfontsContainer:not(.fluid) ~ #popup_box { width: 640px !important; left: 159px !important; } } @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { #myfontsContainer:not(.fluid) ~ #popup_box { width: 626px !important; left: 166px !important; } } @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { #myfontsContainer:not(.fluid) ~ #popup_box { width: 667px !important; left: 146px !important; } } 

#family_licensing { color: #444; } #family_licensing .license-type { margin: 40px 0; padding-left: 50px; position: relative; } #family_licensing .license-type h3 { margin-bottom: 15px; } #family_licensing .license-type .licicon { position: absolute; left: 5px; top: 0; } 

form.metadata_update { position: absolute; background-color: white; padding: 1em; border: 1px solid black; z-index: 100; } form.metadata_update.metadata_person input[name=name], form.metadata_update.metadata_foundry input[name=name] { width: 20em; } form.metadata_update.metadata_person input[name=year], form.metadata_update.metadata_date input[name=date] { width: 8em; } form.metadata_update.metadata_url input[name=url] { width: 40em; } form.metadata_update.metadata_url input[name=desc] { width: 30em; } 

#family #overview_tab #family_article { padding-bottom: 16px; } form.user_article_edit { width: 720px; } form.user_article_edit textarea { width: 100%; height: 270px; } #family #design_details .design_details_column { float: left; width: 232px; padding-left: 32px; } #family #design_details .design_details_column:first-child { padding-left: 0; } #family #overview_tab h3 { margin-top: 0px; } #family_overview_header h3 + * { margin-top: 0; padding-top: 5px; } #design_details ul li { padding-bottom: 8px; font-size: 12px; } #design_details span.title { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #design_details ul.family_metadata a { white-space: nowrap; } #bling ul li { min-height: 12px; position: relative; padding-left: 25px; padding-bottom: 10px; clear: left; } #bling ul li.rating { padding-left: 0px; } #bling ul li.rating div.rating_stars { margin-bottom: 0px; position: relative; top: -2px; } #bling ul li img { position: absolute; top: -5px; left: 0px; } #bling ul li.rating img { position: relative; } 

table#feature_overview { margin-top: 24px; } table#feature_overview tr td { vertical-align: top; } table#feature_overview tr td.feature_overview_spacer { border-top: 1px solid white; width: 24px; } table#feature_overview tr td.feature_overview_spacer_first { border-top: 1px solid #CCCCCC; width: 24px; } table#feature_overview tr td.icon { border-top: 1px solid #CCCCCC; padding-top: 12px; width: 40px; } table#feature_overview tr td.icon img { width: 40px; height: 40px; } table#feature_overview tr td.title { border-top: 1px solid #CCCCCC; padding-top: 22px; padding-left: 12px; width: 296px; } table#feature_overview tr td.desc { padding-left: 12px; padding-bottom: 24px; width: 296px; } 

.file_drag_list { background: #f5f5f5; border: 1px solid #ddd; margin: 20px 0; padding: 10px; } .file_drag_list ul { min-height: 20px; } .file_drag_list h3 { color: #4c4c4c; margin-bottom: 10px; } .file_drag_list li.item { background: #fff; border: 1px solid #ddd; height: 48px; margin-top: 3px; padding: 6px; position: relative; } .file_drag_list li.ui-selected, .file_drag_list li.ui-selecting, .file_drag_list li.multiselect-item { border-color: #09f; } .file_drag_list li.item img { float: left; margin-right: 20px; max-height: 48px; } .file_drag_list li.item .title { font-weight: bold; line-height: 48px; color: #4c4c4c; } .file_drag_list li.item .uploaded { background-image: url("/s/images/foundry/foundry_uploaded.png"); background-position: left center; background-repeat: no-repeat; background-size: 16px 15px; color: #444; height: 16px; padding-left: 25px; position: absolute; top: 10px; right: 90px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .file_drag_list li.item .uploaded { background-image: url("/s/images/foundry/foundry_uploaded@2x.png"); } } .file_drag_list li.item .button { background-position: center center; background-repeat: no-repeat; opacity: 0.4; } .file_drag_list li.item .button:hover { opacity: 0.7; } .file_drag_list li.item .button:active { opacity: 1; } .file_drag_list li.item .button.move { background-image: url("/s/images/foundry/foundry_artwork_move.png"); background-size: 16px 26px; cursor: move; height: 26px; width: 16px; position: absolute; top: 10px; right: 10px; } .file_drag_list li.item .button.delete { background-image: url("/s/images/foundry/foundry_artwork_delete.png"); background-size: 14px 18px; cursor: pointer; height: 18px; width: 14px; position: absolute; top: 14px; right: 50px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .file_drag_list li.item .button.move { background-image: url("/s/images/foundry/foundry_artwork_move@2x.png"); } .file_drag_list li.item .button.delete { background-image: url("/s/images/foundry/foundry_artwork_delete@2x.png"); } } 

form.file_drop_upload fieldset { padding: 10px; } form.file_drop_upload legend { font-weight: bold; color: #333; } form.file_drop_upload .filedrag { background: #fcfcfc; display: none; text-align: center; padding: 70px 20px; margin: 1em 0; border: 2px dashed #ccc; border-radius: 7px; cursor: default; } form.file_drop_upload.active .filedrag { background-image: url("/s/images/foundry/foundry_loading.gif"); background-position: center 130px; background-repeat: no-repeat; background-size: 24px 24px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { form.file_drop_upload.active .filedrag { background-image: url("/s/images/foundry/foundry_loading@2x.gif"); } } form.file_drop_upload .filedrag.hover, form.file_drop_upload .filedrag:active { border-color: #09f; } form.file_drop_upload img { max-width: 100%; } form.file_drop_upload pre { width: 95%; height: 8em; font-family: monospace; font-size: 0.9em; padding: 1px 2px; margin: 0 0 1em auto; border: 1px inset #666; background-color: #eee; overflow: auto; } form.file_drop_upload #messages { padding: 0 10px; margin: 1em 0; border: 1px solid #999; } form.file_drop_upload #progress p { display: block; width: 240px; padding: 2px 5px; margin: 2px 0; border: 1px inset #446; border-radius: 5px; background: #eee url("progress.png") 100% 0 repeat-y; } form.file_drop_upload #progress p.success { background: #0c0 none 0 0 no-repeat; } form.file_drop_upload #progress p.failed { background: #c00 none 0 0 no-repeat; } .errbox { color: red; } 

a.bundleAdminLink { color: #0099ff !important; font-weight: normal; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; line-height: 19px; } div.bundleAdminPage { line-height: 26px; } 

.fontCardsContainer, .fontCardsMobileContainer { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; box-sizing: border-box; width: 100%; } #bundles .fontCardsContainer, #bundles .fontCardsMobileContainer { max-width: 1722px; margin: 0 auto; justify-content: space-between; } .fontCardsContainer *, .fontCardsMobileContainer * { box-sizing: border-box; } .fontCardsContainer #fontCardTemplate, .fontCardsMobileContainer #fontCardTemplate { display: none; } .fontCardsContainer .fontCard, .fontCardsMobileContainer .fontCard { width: 425px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #fff; border: 1px solid #eee; padding: 12px 15px 15px 15px; box-shadow: 0 1px 1px -1px #ddd; } .fontCardsContainer .fontCard .fcUpperBot, .fontCardsMobileContainer .fontCard .fcUpperBot { padding-top: 36px; font-size: 12px; } .fontCardsContainer .fontCard .fcUpperBot > div, .fontCardsMobileContainer .fontCard .fcUpperBot > div { display: inline-block; } .fontCardsContainer .fontCard .fcUpperBot .fcReason1, .fontCardsContainer .fontCard .fcUpperBot .fcReason2, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason1, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason2 { text-align: left; width: initial; height: initial; line-height: initial; } .fontCardsContainer .fontCard .fcUpperBot .fcPriceInfo, .fontCardsMobileContainer .fontCard .fcUpperBot .fcPriceInfo { display: inline-block; float: right; } #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { min-width: 370px; max-width: 560px; margin: 0 0 20px; width: 32.5%; } @media screen and (max-width: 1183px) { #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { width: calc(49% - 20px); width: 49%; } } @media screen and (max-width: 800px) { #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { margin: 0 auto 20px; float: none; width: 100%; } } @media screen and (max-width: 390px) { #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { min-width: 0; } } .fontCardsContainer .floaty, .fontCardsMobileContainer .floaty { float: left; } .fontCardsContainer .fcTitle, .fontCardsMobileContainer .fcTitle { padding-bottom: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 20px; font-size: 16px; } .fontCardsContainer .fcReason1, .fontCardsMobileContainer .fcReason1 { padding: 10px 0 10px 45px; background-repeat: no-repeat; background-position: left center; background-size: 30px; color: #333; position: relative; } .fontCardsContainer .fontCard.newFont .fcReason1, .fontCardsMobileContainer .fontCard.newFont .fcReason1 { padding: 0; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before { height: 15px; border-radius: 3px; color: white; font-size: 10px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; line-height: 15px; padding: 2px 5px; display: inline-block; padding-bottom: 3px; text-align: center; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before { background-color: #0090ff; content: "NEW"; } .fontCardsContainer .promotion .fcReason1, .fontCardsMobileContainer .promotion .fcReason1 { clear: left; } .fontCardsContainer .promotion .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before { background-color: #ff00c8; content: "SALE"; } .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { background-image: url("/s/images/font_cards/bulb.png"); background-repeat: no-repeat; content: ""; width: 22px; height: 21px; display: inline-block; vertical-align: middle; background-size: 22px 21px; } .fontCardsContainer .fontBundle .fcReason1:before, .fontCardsMobileContainer .fontBundle .fcReason1:before { background-image: url("/s/images/font_cards/icon-bundle.png"); background-repeat: no-repeat; content: ""; width: 19px; height: 21px; display: inline-block; vertical-align: middle; background-size: 19px 21px; position: relative; right: -3px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .fontCardsContainer .fontBundle .fcReason1:before, .fontCardsMobileContainer .fontBundle .fcReason1:before { background-image: url("/s/images/font_cards/icon-bundle@2x.png"); background-size: 19px 21px; } } .fontCardsContainer .fontCard .fcReason1 span, .fontCardsMobileContainer .fontCard .fcReason1 span { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; vertical-align: middle; } .fontCardsContainer .fontCard .fcReason1 span:first-child, .fontCardsMobileContainer .fontCard .fcReason1 span:first-child { margin-left: 5px; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1 span, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 span { margin-left: 0; vertical-align: super; } .fontCardsContainer .fontCard.bestSeller .fcReason1, .fontCardsMobileContainer .fontCard.bestSeller .fcReason1 { color: #111111; float: left; background: transparent url("/s/images/iconsets/myfonts/badge_star.png") no-repeat; padding-left: 20px; line-height: 0%; background-position: 0 -1px; clear: left; vertical-align: super; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 { background: none; padding: 6px 0 0 0; font-size: 11px; top: -1px; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1 .fcHnfRank, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 .fcHnfRank { float: left; display: inline; background-color: #0096ff; border-radius: 50%; height: 30px; min-width: 30px; font-size: 16px; color: white; text-align: center; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-top: -2px; width: 30px; padding-top: 4px; margin-top: -5px; } .fontCardsContainer .fontCard.select .fcReason1, .fontCardsMobileContainer .fontCard.select .fcReason1 { padding: 6px 0 0 0; } .fontCardsContainer .fcReason2, .fontCardsMobileContainer .fcReason2 { padding: 0; height: 21px; line-height: 21px; color: #333; } .fontCardsContainer .fcUpperLeft, .fontCardsMobileContainer .fcUpperLeft { width: 75%; } .fontCardsContainer .fcUpperRight, .fontCardsMobileContainer .fcUpperRight { width: 25%; } .fontCardsContainer .fcUpperBtns, .fontCardsMobileContainer .fcUpperBtns { float: right; width: 100%; } .fontCardsContainer .fcUpperBtns .follow.fcbtn, .fontCardsMobileContainer .fcUpperBtns .follow.fcbtn { display: none; } .fontCardsContainer .fcUpperBtns .favorite, .fontCardsMobileContainer .fcUpperBtns .favorite { background-image: url("/s/images/font_cards/favorite_md.png"); background-repeat: no-repeat; background-position: center center; background-color: #eee; background-size: 16px 14px; width: 30px; height: 28px; float: right; border-radius: 3px; } .fontCardsContainer .fcUpperBtns .favorite:hover, .fontCardsMobileContainer .fcUpperBtns .favorite:hover { background-image: url("/s/images/font_cards/favorite_md_selected.png"); } .fontCardsContainer .fcUpperBtns div.selected .favorite, .fontCardsMobileContainer .fcUpperBtns div.selected .favorite { background-image: url("/s/images/font_cards/favorite_md_selected.png"); } .fontCardsContainer .fcUpperBtns > li > div > a.follow:hover, .fontCardsMobileContainer .fcUpperBtns > li > div > a.follow:hover { background: #ddd; text-decoration: none; } .fontCardsContainer .fcUpperBtns > li, .fontCardsMobileContainer .fcUpperBtns > li { position: relative; float: none; } .fontCardsContainer .fcUpperBtns > li > div > a, .fontCardsMobileContainer .fcUpperBtns > li > div > a { float: right; margin-bottom: 8px; } .fontCardsContainer .fcUpperBtns .albumList, .fontCardsMobileContainer .fcUpperBtns .albumList { display: none; } .fontCardsContainer .fcUpperBtns .albumList a, .fontCardsMobileContainer .fcUpperBtns .albumList a { display: block; padding: 6px 10px; color: #555; } .fontCardsContainer .fcUpperBtns .albumList a:hover, .fontCardsMobileContainer .fcUpperBtns .albumList a:hover { display: block; text-decoration: none; background: #eee; } .fontCardsContainer .fcUpperBtns li:hover .albumList, .fontCardsMobileContainer .fcUpperBtns li:hover .albumList { display: block; background: #fff; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); line-height: 1.2em; padding: 5px 0; position: absolute; right: 0; text-align: left; white-space: nowrap; max-height: 150px; max-width: 164px; overflow: auto; } .fontCardsContainer .fontCard.foundry .fcUpperBtns .follow, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns .follow { display: inline-block; float: none; width: 85px; height: 30px; font-size: 16px; } .fontCardsContainer .fcPriceInfo, .fontCardsMobileContainer .fcPriceInfo { clear: right; text-align: right; display: none; } .fontCardsContainer .album_dropdown, .fontCardsMobileContainer .album_dropdown { display: none; } .fontCardsContainer .fcbtn, .fontCardsMobileContainer .fcbtn { display: block; padding: 5px 6px; border-radius: 3px; background-color: #eee; color: #444; font-size: 14px; margin: 0; height: 28px; } .fontCardsContainer .fontCard.font .fcUpperBtns > li.foundryOnly, .fontCardsMobileContainer .fontCard.font .fcUpperBtns > li.foundryOnly { display: none; } .fontCardsContainer .fontCard.foundry .fcUpperBtns > li.fontOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns > li.fontOnly { display: none; } .fontCardsContainer .fcLowerImage img, .fontCardsMobileContainer .fcLowerImage img { display: block; width: 100%; margin: 0 auto; } .fontCardsContainer .fontCard.foundry .fcLowerImage img, .fontCardsMobileContainer .fontCard.foundry .fcLowerImage img { max-height: 140px; } .fontCardsContainer .fcLowerFndryExp, .fontCardsMobileContainer .fcLowerFndryExp { margin-top: 4px; } .fontCardsContainer .fcLowerFndryExp a, .fontCardsMobileContainer .fcLowerFndryExp a { width: 22%; margin-right: 4%; float: left; } .fontCardsContainer .fcLowerFndryExp a img, .fontCardsMobileContainer .fcLowerFndryExp a img { display: block; width: 100%; } .fontCardsContainer .fcLowerOpt, .fontCardsMobileContainer .fcLowerOpt { margin-top: 10px; display: block; font-size: 12px; } .fontCardsContainer .fontCard.following .fcLowerOpt, .fontCardsMobileContainer .fontCard.following .fcLowerOpt { display: none; } .fontCardsContainer .fcRecChoice, .fontCardsMobileContainer .fcRecChoice { display: inline-block; padding: 1px 5px 3px 5px; margin-left: 0; border-radius: 3px; border: 1px solid #fff; background: #fff; -moz-transition: border 0.25s ease-in-out; -o-transition: border 0.25s ease-in-out; -webkit-transition: border 0.25s ease-in-out; transition: border 0.25s ease-in-out; } .fontCardsContainer .fcRecChoice.selected, .fontCardsContainer .fcRecChoice:hover, .fontCardsMobileContainer .fcRecChoice.selected, .fontCardsMobileContainer .fcRecChoice:hover { border: 1px solid #09f; text-decoration: none; } .fontCardsContainer .fcTitle, .fontCardsContainer .fcReason1, .fontCardsMobileContainer .fcTitle, .fontCardsMobileContainer .fcReason1 { width: 100%; float: left; text-align: center; margin-bottom: 5px; } .fontCardsContainer .fcReason1, .fontCardsContainer .fcReason2, .fontCardsMobileContainer .fcReason1, .fontCardsMobileContainer .fcReason2 { width: initial; text-align: left; position: relative; padding: 0; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before { height: 16px; font-size: 12px; margin-right: 5px; } .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { margin-right: 5px; } .fontCardsContainer .fcReason1 span, .fontCardsMobileContainer .fcReason1 span { display: none; } .fontCardsContainer .fcButtonWrapper, .fontCardsMobileContainer .fcButtonWrapper { float: right; text-align: center; } .fontCardsContainer button.add_to_album_toggle_client.only, .fontCardsMobileContainer button.add_to_album_toggle_client.only { padding: 5px 11px; height: 28px; } .fontCardsContainer button.add_to_album_toggle_client.only span, .fontCardsMobileContainer button.add_to_album_toggle_client.only span { font-size: 13px; line-height: normal; margin-right: 2px; } .fontCardsContainer button.add_to_album_toggle_client.only::-moz-focus-inner, .fontCardsMobileContainer button.add_to_album_toggle_client.only::-moz-focus-inner { padding: 0; border: 0; } .fontCardsContainer .fontCard.foundry, .fontCardsMobileContainer .fontCard.foundry { position: relative; padding: 27px 11px 22px 11px; } .fontCardsContainer .fontCard.foundry .fcReason1, .fontCardsContainer .fontCard.foundry .fcReason2, .fontCardsMobileContainer .fontCard.foundry .fcReason1, .fontCardsMobileContainer .fontCard.foundry .fcReason2 { display: none; } .fontCardsContainer .fontCard.foundry .fcButtonWrapper, .fontCardsMobileContainer .fontCard.foundry .fcButtonWrapper { float: none; } .fontCardsContainer .fontCard.foundry .fcUpperBtns li.foundryOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-left: 0; float: none; margin-top: 10px; } .fontCardsContainer .fontCard.foundry .fcTitle, .fontCardsMobileContainer .fontCard.foundry .fcTitle { display: none; } .fontCardsContainer .fontCard.foundry .fcUpper, .fontCardsMobileContainer .fontCard.foundry .fcUpper { margin-bottom: 24px; } .fontCardsContainer .fcLowerFndryExp a:nth-child(4), .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(4) { margin-right: 0; } .fontCardsContainer .fcLowerFndryExp a:nth-child(5) img, .fontCardsContainer .fcLowerFndryExp a:nth-child(6) img, .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(5) img, .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(6) img { display: none; } .fcUpper.clearfix { margin-bottom: 10px; } /* removed until Recommendations release -> make this not use an image .fontCardsContainer .fontCard.recommended .fcReason1 { background-image: url("/s/images/font_cards/reason_recommend.png"); background-size: 20px; } */ .ie .fontCardsContainer .fcUpperRight { display: block; width: 35%; } .ie .fontCardsContainer .fcUpperLeft { width: 65%; } .ie .fontCardsContainer .fcTitle { font-size: 24px; } @media screen and (min-width: 320px) { .fontCardsContainer .fcUpperRight, .fontCardsMobileContainer .fcUpperRight { display: block; width: 35%; } .fontCardsContainer .promotion .fcReason1, .fontCardsMobileContainer .promotion .fcReason1 { padding: 0; } .fontCardsContainer .fcUpperBtns > li, .fontCardsMobileContainer .fcUpperBtns > li { position: relative; float: right; margin-left: 8px; } .fontCardsContainer .fcUpperBtns > li > div > a, .fontCardsMobileContainer .fcUpperBtns > li > div > a { margin-bottom: 0; float: none; } .fontCardsContainer .fcUpperLeft, .fontCardsMobileContainer .fcUpperLeft { width: 65%; } .fontCardsContainer .fcLowerOpt, .fontCardsMobileContainer .fcLowerOpt { font-size: 14px; } .fontCardsContainer .fcRecChoice, .fontCardsMobileContainer .fcRecChoice { margin-left: 10px; } .fontCardsContainer .fcPriceInfo, .fontCardsMobileContainer .fcPriceInfo { display: block; } .fontCardsContainer .fontCard .fcReason1, .fontCardsMobileContainer .fontCard .fcReason1 { margin-bottom: 0; } .fontCardsContainer .fontCard.select .fcReason1, .fontCardsMobileContainer .fontCard.select .fcReason1 { padding: 0; } .fontCardsContainer .fontCard.newFont .fcReason1, .fontCardsMobileContainer .fontCard.newFont .fcReason1 { padding: 6px 0 0 0; } .fontCardsContainer .fcReason1 span, .fontCardsMobileContainer .fcReason1 span { display: inline-block; } .fontCardsContainer .fcReason1 .fcHnfRank, .fontCardsMobileContainer .fcReason1 .fcHnfRank { display: inline; } .fontCardsContainer .fcReason1 .fcReason2, .fontCardsMobileContainer .fcReason1 .fcReason2 { display: none; } .fontCardsContainer .fontCard .fcUpperBot, .fontCardsMobileContainer .fontCard .fcUpperBot { padding-top: 36px; } .fontCardsContainer .fontCard .fcUpperBot > div, .fontCardsMobileContainer .fontCard .fcUpperBot > div { display: inline-block; } .fontCardsContainer .fontCard .fcUpperBot .fcReason1, .fontCardsContainer .fontCard .fcUpperBot .fcReason2, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason1, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason2 { text-align: left; width: initial; height: initial; line-height: initial; } .fontCardsContainer .fontCard .fcUpperBot .fcPriceInfo, .fontCardsMobileContainer .fontCard .fcUpperBot .fcPriceInfo { display: inline-block; float: right; } .fontCardsContainer .fcTitle, .fontCardsMobileContainer .fcTitle { width: 65%; width: calc(100% - 50px); text-align: left; } .fontCardsContainer .fontCard.foundry, .fontCardsMobileContainer .fontCard.foundry { padding-top: 50px; } .fontCardsContainer .fontCard.foundry .fcButtonWrapper, .fontCardsMobileContainer .fontCard.foundry .fcButtonWrapper { float: right; position: absolute; top: 10px; right: 15px; } .fontCardsContainer .fontCard.foundry .fcUpperBtns li.foundryOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-left: 8px; float: right; margin-top: 6px; } .fontCardsContainer .fontCard.foundry .fcUpperBtns .follow, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns .follow { font-size: 13px; width: 73px; height: 26px; } .fontCardsContainer .fontCard.foundry .fcUpper, .fontCardsMobileContainer .fontCard.foundry .fcUpper { margin-bottom: 30px; } .fontCardsContainer .fcReason1, .fontCardsMobileContainer .fcReason1 { clear: both; margin-top: -6px; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .fontCardsContainer .fontCard.newFont .fcReason1, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1, .fontCardsMobileContainer .fontCard.newFont .fcReason1 { padding: 0; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { margin-right: 0; } .fontCardsContainer .fontCard .fcReason1 span, .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .fontCard .fcReason1 span, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { vertical-align: middle; } } @media (min-width: 450px) and (max-width: 767px) { .respHomepage .fontCardsContainer .col1, .respHomepage .fontCardsContainer .col2 { width: 425px; margin: 0 auto; } } @media screen and (min-width: 768px) { .respHomepage .fontCardsContainer .fcTitle { width: 65%; width: calc(100% - 128px); } .respHomepage .fontCardsContainer .album_dropdown { display: block; } .respHomepage .fontCardsContainer .fontCard .fcReason2 { display: inline-block; } .fontCardsContainer .fontCard { width: 100%; } } @media screen and (min-width: 900px) { .respHomepage .fontCardsContainer .fcTitle { font-size: 18px; height: 24px; } } @media screen and (min-width: 1050px) { .fontCardsContainer .fontCard { margin-bottom: 20px; } } @media screen and (min-width: 1100px) { .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(5) img { display: inherit; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(4) { margin-right: 1%; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 0; } .respHomepage .fontCardsContainer .fcTitle { font-size: 20px; height: 26px; } .respHomepage .fontCardsContainer .fontCard .fcReason1 span, .respHomepage .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .respHomepage .fontCardsContainer .fontCard .fcReason2 { font-size: 14px; } .respHomepage .fontCardsContainer .fontCard .fcReason1 span, .respHomepage .fontCardsContainer .newFont .fcReason1:before, .respHomepage .fontCardsContainer .promotion .fcReason1:before, .respHomepage .fontCardsContainer .select .fcReason1:before { vertical-align: bottom; } .respHomepage .fontCardsContainer .bestSeller .fcReason1 span { vertical-align: middle; } .respHomepage .fontCardsContainer .fontCard.hotNewFonts .fcReason1 { top: -2px; } .respHomepage .fontCardsContainer .fontCard.foundry .fcUpperBtns .follow { font-size: 16px; width: 89px; height: 32px; } .respHomepage .fontCardsContainer .fcPriceInfo { font-size: 14px; } .fluid .fontCardsContainer .fontCard .fcUpperBot { font-size: 14px; } } @media screen and (min-width: 1350px) { .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(6) img { display: inherit; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(4), .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 2%; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(6) { margin-right: 0; } .respHomepage .fontCardsContainer .fcLowerFndryExp a { width: 15%; margin-right: 2%; } } @media screen and (min-width: 1984px) { .fontCardsContainer .fontCard { flex: 0 1 calc(50% - 10px); margin-bottom: 20px; width: calc(50% - 10px); } .fontCardsContainer .fontCard:nth-child(odd) { margin-right: 20px; } } div.fc-authenticate { background: white; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); font-size: 14px; padding: 15px; position: absolute; text-align: left; top: 28px; right: 0; width: 275px; z-index: 8; } div.fc-authenticate iframe.dropdown_login_frame { width: 250px; height: 155px; } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape), only screen and (max-width: 450px) { .fontCardsContainer .fontCard, .fontCardsMobileContainer .fontCard { width: 100%; margin: 0 0 16px 0; max-width: none; border: none; border-top: 1px solid #eee; } .fontCardsContainer .fontCard.font, .fontCardsMobileContainer .fontCard.font { padding: 0; } .fontCardsContainer .fontCard.font .fcUpper, .fontCardsMobileContainer .fontCard.font .fcUpper { padding: 14px 8px 0 8px; } .fontCardsContainer .fontCard.font .fcLower, .fontCardsMobileContainer .fontCard.font .fcLower { padding-bottom: 9px; } .fontCardsContainer .fontCard.foundry .fcTitle, .fontCardsMobileContainer .fontCard.foundry .fcTitle { display: none; } .fontCardsContainer .fontCard.bestSeller .fcReason1, .fontCardsMobileContainer .fontCard.bestSeller .fcReason1 { clear: none; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 { line-height: 20px; } .respHomepage .fontCardsContainer .col1, .respHomepage .fontCardsContainer .col2, .respHomepage .fontCardsMobileContainer .col1, .respHomepage .fontCardsMobileContainer .col2 { width: 100%; margin: 0; max-width: none; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { .fontCardsContainer .fontCard.foundry .fcUpper, .fontCardsMobileContainer .fontCard.foundry .fcUpper { margin-bottom: 30px; } .fontCardsContainer .fontCard.foundry .fcUpperBtns li.foundryOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-top: 20px; } .fontCardsContainer .fcLowerFndryExp, .fontCardsMobileContainer .fcLowerFndryExp { width: 69%; margin: 0 auto; } .fontCardsContainer .fcLowerFndryExp a:nth-child(4), .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(4) { margin-right: 2%; } .fontCardsContainer .fcLowerFndryExp a:nth-child(5), .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 0; } .fontCardsContainer .fcLowerFndryExp a:nth-child(5) img, .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(5) img { display: inherit; } .fontCardsContainer .fcLowerFndryExp a, .fontCardsMobileContainer .fcLowerFndryExp a { width: 18%; margin-right: 2%; } .fontCardsContainer .fontCard.font .fcUpper, .fontCardsMobileContainer .fontCard.font .fcUpper { padding: 14px 16px 0 16px; } .fontCardsContainer .fontCard.font .fcLowerImage img, .fontCardsMobileContainer .fontCard.font .fcLowerImage img { padding: 0 16px 14px 16px; } .fontCardsContainer .fcUpperBtns .favorite, .fontCardsMobileContainer .fcUpperBtns .favorite { width: 32px; height: 30px; background-size: 15px 13px; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .fontCardsContainer .fcUpperBtns .favorite { background-image: url("/s/images/font_cards/favorite_md@2x.png"); } .no-touchevents .fontCardsContainer .fcUpperBtns .favorite:hover, .fontCardsContainer .fcUpperBtns div.selected .favorite { background-image: url("/s/images/font_cards/favorite_md_selected@2x.png"); } .fontCardsContainer .fontCard.bestSeller .fcReason1 { background: transparent url("/s/images/iconsets/myfonts/badge_star@2x.png") no-repeat; background-size: 20px; background-position: 0 -1px; } .fontCardsContainer .select .fcReason1:before { background-image: url("/s/images/font_cards/bulb@2x.png"); } } .bb-toggle-view.selected { background-image: url("/s/images/font_cards/favorite_selected.png"); } .bb-toggle-view.follow { background-image: url("/s/images/font_cards/favorite.png"); } .bb-toggle-view { display: block; border-radius: 3px; background-color: #eee; color: #444; font-size: 14px; margin: 0; height: 28px; width: 36px; background-repeat: no-repeat; background-position: center center; float: right; } 

div#addToAlbumMenu { width: 300px; } div#addToAlbumMenuHeader { font-weight: bold; padding: 2px 5px; } div#addToAlbumMenuBody { overflow: auto; height: 216px; margin: 12px 0px; background-color: #F1F1F1; } div#addToAlbumMenuCancel { text-align: center; } div#addToAlbumMenuBody ul li { padding: 6px 12px; } div#addToAlbumMenuBody ul li .unavailable { color: #666; } div#addToAlbumMenuFooter { text-align: center; background-color: #CCC; padding: 3px 0px; } .void { color: #999999; } span.item_added { font-size: 12px; font-weight: bold; padding: 2px 5px; } input.closeAlbumMenu { padding: 2px 5px; float: right; } #addToAlbumConfirmedButtons { text-align: center; } #addToAlbumConfirmedButtons input { margin: 12px; } 

#fontface_embed_modal { padding: 20px 30px; } #fontface_embed_modal textarea { border: 1px solid #ddd; box-sizing: border-box; font-family: monospace; height: 200px; margin: 20px 0; outline: none; padding: 6px; width: 100%; } #fontface_embed_modal textarea:focus { border-color: #09f; } #fontface_embed_modal .buttons { text-align: center; } #fontface_embed_modal .buttons input[type=button] { background: #fff; border: 1px solid #ddd; border-radius: 1px; box-shadow: inset 0px -1px 4px #f5f5f5; cursor: pointer; color: #000 !important; display: inline-block; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; outline: none; padding: 6px 12px; text-decoration: none; -moz-transition: border-color 200ms ease-in-out; -o-transition: border-color 200ms ease-in-out; -webkit-transition: border-color 200ms ease-in-out; transition: border-color 200ms ease-in-out; } #fontface_embed_modal .buttons input[type=button]:hover { border-color: #09f; } 

html, body { margin: 0; padding: 0; } #fontface_error { color: #333; padding: 5px; width: 929px; } #fontface_error h1 { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 30px; font-weight: normal; margin-bottom: 0.5em; } #fontface_error p { font-size: 18px; } #fontface_error #signInPage { margin: 0; padding: 0; } #fontface_error #signInPage h1 { display: none; } .webkit_title { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 24px; font-weight: normal; margin-bottom: 20px; } .webkit_title i { font-weight: bold; font-style: normal; } .webkit_subtitle { margin-bottom: 35px; } #fontface_previews { width: 939px; } #fontface_previews .kit_builder_guide { position: relative; border: 1px solid #E7E7E7; padding: 40px 20px 10px 40px; font-size: 16px; overflow: hidden; } #fontface_previews .kit_builder_guide_inner { display: inline-block; } #fontface_previews .kit_builder_guide_inner h2 { margin: 30px 0; } #fontface_previews .kit_builder_guide_inner ol { line-height: 40px; margin: 70px 0 30px; } #fontface_previews .kit_builder_guide_inner ol li { margin-left: 1em; } #fontface_previews .kit_builder_guide img { float: right; width: 520px; height: 445px; } #fontface_previews .kit_builder_guide .close_x { position: absolute; right: 15px; top: 8px; font-weight: bold; } #fontface_previews .horizontal_line { border: 0; border-top: 1px solid #E7E7E7; margin: 35px 0 45px; height: 1px; } #fontface_previews .preview_tabs { text-align: right; } #fontface_previews .preview_tabs .label { color: #666; display: inline-block; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; } #fontface_previews .preview_tabs .tab { border: 1px solid #ddd; border-radius: 2px; color: #09f; display: inline-block; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 17px; margin-left: 10px; padding: 8px 15px; position: relative; } #fontface_previews .preview_tabs .tab .help_tooltip { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; position: absolute; text-align: center; top: 50px; } #fontface_previews .preview_tabs .tab:first-of-type { margin-left: 15px; } #fontface_previews .preview_tabs .tab:hover { background: #09f; border-color: #006BDC; color: #fff; text-decoration: none; } #fontface_previews .preview_tabs .tab.embed .help_tooltip { left: 50%; margin-left: -75px; width: 120px; } #fontface_previews .preview_tabs .tab.embed .help_tooltip:before { left: 50%; } #fontface_previews .preview_alert { background: #f5dede; color: #792c2c; display: none; font-size: 14px !important; font-weight: bold; padding: 8px; margin-bottom: 20px; } #fontface_previews .preview { position: relative; box-sizing: border-box; -moz-box-sizing: border-box; padding: 15px 0; } #fontface_previews .preview.span-1 { float: left; width: 50%; } #fontface_previews .preview.span-1.span-left { padding-right: 15px; } #fontface_previews .preview.span-1.span-right { padding-left: 15px; } #fontface_previews .preview.span-2 { width: 100%; } #fontface_previews .preview .options { *zoom: 1; } #fontface_previews .preview .options:after { content: ""; display: table; clear: both; } #fontface_previews .preview .options select { width: 200px; float: left; font-size: 16px; } #fontface_previews .preview .options .size_slider_widget { float: left; margin: 2px 20px 0; } #fontface_previews .preview .options a.otfeat { background-position: center center; background-repeat: no-repeat; background-size: 20px 20px; display: none; height: 20px; margin-right: 5px; text-decoration: none !important; width: 20px; } #fontface_previews .preview .options a.otfeat .info { background: #434343; border-radius: 3px; color: #fff; display: none; float: left; font-size: 11px; height: 15px; padding: 4px 5px; position: relative; top: -35px; left: -65px; text-align: center; width: 150px; } #fontface_previews .preview .options a.otfeat .info:after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #434343; position: absolute; top: 23px; left: 69px; } #fontface_previews .preview .options a.otfeat.active { display: inline-block; } #fontface_previews .preview .options a.otfeat:hover .info { display: block; } #fontface_previews .preview .options a.otfeat[data-feat=calt] { background-image: url("/s/w/fontface_previews/calt.png"); } #fontface_previews .preview .options a.otfeat[data-feat=calt]:hover { background-image: url("/s/w/fontface_previews/calt-hover.png"); } #fontface_previews .preview .options a.otfeat[data-feat=calt].selected { background-image: url("/s/w/fontface_previews/calt-active.png"); } #fontface_previews .preview .options a.otfeat[data-feat=liga] { background-image: url("/s/w/fontface_previews/liga.png"); } #fontface_previews .preview .options a.otfeat[data-feat=liga]:hover { background-image: url("/s/w/fontface_previews/liga-hover.png"); } #fontface_previews .preview .options a.otfeat[data-feat=liga].selected { background-image: url("/s/w/fontface_previews/liga-active.png"); } #fontface_previews .preview .options a.otfeat[data-feat=dlig] { background-image: url("/s/w/fontface_previews/dlig.png"); } #fontface_previews .preview .options a.otfeat[data-feat=dlig]:hover { background-image: url("/s/w/fontface_previews/dlig-hover.png"); } #fontface_previews .preview .options a.otfeat[data-feat=dlig].selected { background-image: url("/s/w/fontface_previews/dlig-active.png"); } #fontface_previews .preview .options a.otfeat[data-feat=onum] { background-image: url("/s/w/fontface_previews/onum.png"); } #fontface_previews .preview .options a.otfeat[data-feat=onum]:hover { background-image: url("/s/w/fontface_previews/onum-hover.png"); } #fontface_previews .preview .options a.otfeat[data-feat=onum].selected { background-image: url("/s/w/fontface_previews/onum-active.png"); } #fontface_previews .preview .text { -moz-font-feature-settings: "kern", "liga" 0, "calt" 0; -ms-font-feature-settings: "kern", "liga" 0, "calt" 0; -o-font-feature-settings: "kern", "liga" 0, "calt" 0; -webkit-font-feature-settings: "kern", "liga" 0, "calt" 0; font-feature-settings: "kern", "liga" 0, "calt" 0; min-height: 1em; margin-top: 10px; padding: 5px; word-wrap: break-word; } #fontface_previews .preview .text:hover { background: #fff; outline: 1px dashed #ccc; } #fontface_previews .preview .text:focus { background: #f9f9f9; outline: 1px dashed #bbb; } #fontface_previews .preview .text.loading { color: #ccc; } #fontface_previews .preview .text.loading:before { background: #f6f6f6 url("/s/images/iconsets/myfonts/spinner.gif") center center no-repeat; border: 1px solid #e6e6e6; content: ''; display: block; height: 24px; width: 24px; margin-top: 3px; margin-left: -13px; position: absolute; top: 50%; left: 50%; } #fontface_previews .preview .text.headline { font-size: 60px; } #fontface_previews .preview .text.subheading { font-size: 36px; } #fontface_previews .preview .text.body { font-size: 16px; } #fontface_previews .preview .text.light { font-size: 20px; } #fontface_previews .preview .text.calt { -moz-font-feature-settings: "calt", "liga" 0; -ms-font-feature-settings: "calt", "liga" 0; -o-font-feature-settings: "calt", "liga" 0; -webkit-font-feature-settings: "calt", "liga" 0; font-feature-settings: "calt", "liga" 0; } #fontface_previews .preview .text.dlig { -moz-font-feature-settings: "dlig", "liga" 0; -ms-font-feature-settings: "dlig", "liga" 0; -o-font-feature-settings: "dlig", "liga" 0; -webkit-font-feature-settings: "dlig", "liga" 0; font-feature-settings: "dlig", "liga" 0; } #fontface_previews .preview .text.liga { -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga"; -o-font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; } #fontface_previews .preview .text.onum { -moz-font-feature-settings: "onum", "liga" 0; -ms-font-feature-settings: "onum", "liga" 0; -o-font-feature-settings: "onum", "liga" 0; -webkit-font-feature-settings: "onum", "liga" 0; font-feature-settings: "onum", "liga" 0; } #fontface_previews .preview .text.calt.dlig { -moz-font-feature-settings: "calt", "dlig", "liga" 0; -ms-font-feature-settings: "calt", "dlig", "liga" 0; -o-font-feature-settings: "calt", "dlig", "liga" 0; -webkit-font-feature-settings: "calt", "dlig", "liga" 0; font-feature-settings: "calt", "dlig", "liga" 0; } #fontface_previews .preview .text.calt.liga { -moz-font-feature-settings: "calt", "liga"; -ms-font-feature-settings: "calt", "liga"; -o-font-feature-settings: "calt", "liga"; -webkit-font-feature-settings: "calt", "liga"; font-feature-settings: "calt", "liga"; } #fontface_previews .preview .text.calt.onum { -moz-font-feature-settings: "calt", "onum", "liga" 0; -ms-font-feature-settings: "calt", "onum", "liga" 0; -o-font-feature-settings: "calt", "onum", "liga" 0; -webkit-font-feature-settings: "calt", "onum", "liga" 0; font-feature-settings: "calt", "onum", "liga" 0; } #fontface_previews .preview .text.dlig.liga { -moz-font-feature-settings: "dlig", "liga"; -ms-font-feature-settings: "dlig", "liga"; -o-font-feature-settings: "dlig", "liga"; -webkit-font-feature-settings: "dlig", "liga"; font-feature-settings: "dlig", "liga"; } #fontface_previews .preview .text.dlig.onum { -moz-font-feature-settings: "dlig", "onum", "liga" 0; -ms-font-feature-settings: "dlig", "onum", "liga" 0; -o-font-feature-settings: "dlig", "onum", "liga" 0; -webkit-font-feature-settings: "dlig", "onum", "liga" 0; font-feature-settings: "dlig", "onum", "liga" 0; } #fontface_previews .preview .text.liga.onum { -moz-font-feature-settings: "liga", "onum"; -ms-font-feature-settings: "liga", "onum"; -o-font-feature-settings: "liga", "onum"; -webkit-font-feature-settings: "liga", "onum"; font-feature-settings: "liga", "onum"; } #fontface_previews .preview .text.calt.dlig.liga { -moz-font-feature-settings: "calt", "dlig", "liga"; -ms-font-feature-settings: "calt", "dlig", "liga"; -o-font-feature-settings: "calt", "dlig", "liga"; -webkit-font-feature-settings: "calt", "dlig", "liga"; font-feature-settings: "calt", "dlig", "liga"; } #fontface_previews .preview .text.calt.dlig.onum { -moz-font-feature-settings: "calt", "dlig", "onum", "liga" 0; -ms-font-feature-settings: "calt", "dlig", "onum", "liga" 0; -o-font-feature-settings: "calt", "dlig", "onum", "liga" 0; -webkit-font-feature-settings: "calt", "dlig", "onum", "liga" 0; font-feature-settings: "calt", "dlig", "onum", "liga" 0; } #fontface_previews .preview .text.calt.liga.onum { -moz-font-feature-settings: "calt", "liga", "onum"; -ms-font-feature-settings: "calt", "liga", "onum"; -o-font-feature-settings: "calt", "liga", "onum"; -webkit-font-feature-settings: "calt", "liga", "onum"; font-feature-settings: "calt", "liga", "onum"; } #fontface_previews .preview .text.dlig.liga.onum { -moz-font-feature-settings: "dlig", "liga", "onum"; -ms-font-feature-settings: "dlig", "liga", "onum"; -o-font-feature-settings: "dlig", "liga", "onum"; -webkit-font-feature-settings: "dlig", "liga", "onum"; font-feature-settings: "dlig", "liga", "onum"; } #fontface_previews .preview .text.calt.dlig.liga.onum { -moz-font-feature-settings: "calt", "dlig", "liga", "onum"; -ms-font-feature-settings: "calt", "dlig", "liga", "onum"; -o-font-feature-settings: "calt", "dlig", "liga", "onum"; -webkit-font-feature-settings: "calt", "dlig", "liga", "onum"; font-feature-settings: "calt", "dlig", "liga", "onum"; } #fontface_previews.error .preview_tabs { display: none; } #fontface_previews.error .preview_alert { display: block; } #fontface_previews.error .text.loading:before { background-image: none; color: #792c2c; content: ' ! '; font-size: 21px !important; font-weight: bold; text-align: center; } 

#twf-autobox { display: inline-block; width: 100%; border-top: 1px solid #aaa; padding: 30px 0 0; } #twf-autobox .twf-inner { text-align: center; } 

#mainFooter { color: #555; font-size: 13px; text-align: center; width: 939px; clear: both; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 30px auto 0 auto; padding: 0 0 30px 0; } #mainFooter nav.links { width: 100%; max-width: 810px; margin: 0 auto; } #mainFooter nav.links a { color: #555; padding: 13px; display: inline-block; } #mainFooter nav.links a:hover { color: #222; } #mainFooter nav.social { display: table; margin: 20px auto; width: 300px; } #mainFooter nav.social a { color: #ddd; display: table-cell; font-family: "Social-Network-Icons"; font-size: 28px; font-weight: normal; text-decoration: none; -moz-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } #mainFooter nav.social a:hover { color: #aaa; } #mainFooter .links { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; max-width: 100%; } @media screen and (min-width: 1200px) { #mainFooter .links { flex-direction: row; } } #mainFooter .brands { display: flex; justify-content: center; margin: 25px auto; } @media screen and (min-width: 1368px) { #mainFooter .brands { padding: 0 16%; } } @media screen and (min-width: 768px) and (max-width: 1367px) { #mainFooter .brands { padding: 0 16%; } } #mainFooter .brands img { width: 100%; } #mainFooter .brands_monotype img, #mainFooter .brands_olapic img, #mainFooter .brands_mosaic img, #mainFooter .brands_myfonts img { max-width: 185px; } 

#foundry_page h1 { float: left; margin: 0 30px 10px 0; } #foundry_page .title_wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-align-items: center; justify-content: flex-start; -webkit-justify-content: flex-start; } #foundry_page #foundry_always { margin-top: 18px; } #foundry_page #foundry_info { padding-top: 24px; } #foundry_page .infobox { float: left; width: 224px; margin-right: 24px; } #foundry_page .infobox.infobox_3 { margin-right: 0px; } #foundry_page .infobox ul { margin-top: 8px; border-top: 1px solid #CCC; } #foundry_page .infobox ul li { margin-top: 8px; font-size: smaller; } #foundry_page .title_wrapper .ac-follow-root { position: relative; } #foundry_page .title_wrapper a.fcbtn { padding: 5px; border-radius: 3px; background-color: #eee; color: #4a4a4a; font-size: 14px; margin: 0 0 5px 0; height: 20px; text-decoration: none; text-align: center; width: 68px; float: left; } #foundry_page .title_wrapper a.fcbtn:hover { background: #ddd; } #foundry_font_list { clear: left; padding-top: 24px; } #foundry_font_list .columns { margin-top: 8px; border-top: 1px solid #CCC; padding-top: 24px; } #foundry_font_list #font-testdrive-new #font-options { float: right; } #foundry_font_list #font-testdrive-new .right-options { width: 100%; border-top: 1px solid #dddddd; padding: 0 5px; } #foundry_font_list #font-testdrive-new .back-to-top { float: right; } #foundry_font_list #font-testdrive-new .image_checkbox { margin: 0; margin-top: 18px; float: right !important; } #foundry_font_list #font-testdrive-new #sort-container { padding: 12px 0; position: relative; } #foundry_font_list #font-testdrive-new #color-picker + .dropdown-modal { left: -281px; } #foundry_font_list #font-testdrive-new #advanced-options + .dropdown-modal { left: -430px; } #foundry_font_list #font-testdrive-new #display-options + .dropdown-modal { left: -175px; } #foundry_font_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:before { margin-left: 246px; } #foundry_font_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:after { margin-left: 247px; } #foundry_font_list #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 456px; left: 34px; } #foundry_font_list #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 455px; left: 34px; } #foundry_font_list #font-testdrive-new #font-options .dis-options ul:first-child:before { margin-left: 251px; } #foundry_font_list #font-testdrive-new #font-options .dis-options ul:first-child:after { margin-left: 250px; } #foundry_font_list #font-testdrive-new #font-size #font-slider-wrap, #foundry_font_list #font-testdrive-new #font-size > #fit-width { display: block; } #foundry_designers { clear: left; padding-top: 24px; } #foundry_designers ul { margin-top: 8px; border-top: 1px solid #CCC; padding-top: 24px; } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #foundry_font_list div.search-result-item div.product-image, #foundry_font_list div.search-result-item div.product-image img { max-height: none; } #foundry_font_list #font-testdrive-new #font-size #font-slider-wrap, #foundry_font_list #font-testdrive-new #font-size > #fit-width { display: none; } #foundry_font_list #font-testdrive-new #color-picker + .dropdown-modal, #foundry_font_list #font-testdrive-new #advanced-options + .dropdown-modal, #foundry_font_list #font-testdrive-new #display-options + .dropdown-modal { width: auto !important; left: 630px; } #foundry_font_list #font-testdrive-new #color-toggle .toggle { padding-top: 9px; } #foundry_font_list #font-testdrive-new #display-options + .dropdown-modal .checkbox label { padding-top: 0; padding-bottom: 10px; } #foundry_font_list #font-testdrive-new .adv-options .dropdown-inner { max-height: none !important; } #foundry_font_list #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 169px; } #foundry_font_list #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 168px; } #foundry_font_list #font-testdrive-new #font-options .dis-options ul:first-child:before { margin-left: 221px; } #foundry_font_list #font-testdrive-new #font-options .dis-options ul:first-child:after { margin-left: 220px; } #foundry_font_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:before { margin-left: 198px; } #foundry_font_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:after { margin-left: 199px; } #foundry_font_list #font-testdrive-new #text-selector .dropdown-inner { max-height: none !important; } } 

#foundry_admin_bar { background: #FFF29C; border-top: 1px solid #FFCC00; border-bottom: 1px solid #FFCC00; box-sizing: border-box; font-family: "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; height: 35px; line-height: 1em; overflow: visible; padding: 3px 10px; width: 100%; } #foundry_admin_bar b, #foundry_admin_bar strong { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #foundry_admin_bar i, #foundry_admin_bar em { font-family: "Proxima-Nova-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; } #foundry_admin_bar .fab_inner { margin: 0 auto; max-width: 960px; position: relative; } #foundry_admin_bar .admin_info { line-height: 27px; position: absolute; top: 0px; left: 0px; } #foundry_admin_bar .admin_info .label { display: inline-block; position: relative; top: -10px; } #foundry_admin_bar .admin_info .selected { background: #fefefe; border: 1px solid; border-color: #e2e2e2 #d7d7d7 #d3d3d3 #d7d7d7; border-radius: 2px; display: inline-block; line-height: 15px; margin: 0 10px 0 15px; max-width: 125px; overflow: hidden; padding: 5px; text-overflow: ellipsis; white-space: nowrap; } #foundry_admin_bar .admin_info .selected .foundry_admin_signout { background: #ccc; border-radius: 10px; color: #fff; cursor: pointer; display: inline-block; font-size: 12px; font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; line-height: 12px; height: 12px; padding: 2px; width: 12px; text-align: center; } #foundry_admin_bar .admin_info .selected .foundry_admin_signout:hover { background: #aaa; text-decoration: none; } #foundry_admin_bar #foundry_selector { position: absolute; top: 0px; left: 320px; } #foundry_admin_bar #foundry_selector .loading { background-image: url("/images/foundry/foundry_selector_loading_yellow.gif"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_admin_bar #foundry_selector .loading { background-image: url("/images/foundry/foundry_selector_loading_yellow@2x.gif"); } } 

#foundry_artwork_upload { background: #fff; box-sizing: border-box; box-shadow: 0px 0px 15px #e5e5e5; margin: 0 auto; overflow: auto; padding: 30px; width: 960px; } #foundry_artwork_upload .drop_zone_area { overflow: auto; } #foundry_artwork_upload .drop_zone_area .left_col { float: left; width: 505px; } #foundry_artwork_upload .drop_zone_area .right_col { float: right; width: 365px; } #foundry_artwork_upload .drop_zone_area .legend { color: #666; } #foundry_artwork_upload .drop_zone_area .legend li { margin-top: 20px; overflow: auto; } #foundry_artwork_upload .drop_zone_area .legend p { font-size: 13px; line-height: 17px; margin: 0; } #foundry_artwork_upload .drop_zone_area .legend .thumbnail { float: left; width: 72px; height: 80px; margin-right: 10px; overflow: auto; } #foundry_artwork_upload .drop_zone_area .legend .thumbnail img { float: right; margin-top: 3px; } #foundry_artwork_upload .file_drag_list li .title { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #foundry_artwork_upload .file_drag_list.warning { border: 1px solid #888; background: #adadad; position: relative; } #foundry_artwork_upload .file_drag_list.warning li { border: 1px solid #888; } #foundry_artwork_upload .file_drag_list .warn_msg { display: none; } #foundry_artwork_upload .file_drag_list.warning .warn_msg { background: url("/s/images/foundry/foundry_warn_msg.png") left center/24px 24px no-repeat; color: #fff; display: block; font-size: 14px; line-height: 24px; padding-left: 32px; position: absolute; top: 7px; left: 80px; } #foundry_artwork_upload p#changes_live { color: #666; display: none; font-style: italic; margin-bottom: 10px; } #foundry_artwork_upload p#changes_live.active { display: block; } #foundry_artwork_upload .foundry_button { margin-right: 10px; } .uploadPoster { color: #444; height: 16px; padding-left: 25px; position: absolute; top: 19px; right: 90px; } 

#foundry_datepicker { background: #fff; font-family: "Proxima Nova"; height: 225px; overflow: auto; position: relative; width: 900px; } #foundry_datepicker input[type=text] { font-family: "Proxima Nova"; } #foundry_datepicker .left { float: left; padding: 20px; width: 260px; } #foundry_datepicker .left .label { display: inline-block; line-height: 28px; margin-right: 10px; } #foundry_datepicker .left .foundry_dropdown { display: inline-block; width: 140px; } #foundry_datepicker .left .foundry_dropdown span { width: 90px; } #foundry_datepicker .left .custom_range { margin-top: 20px; } #foundry_datepicker .left .foundry_input { font-size: 12px; width: 100px; } #foundry_datepicker .left .buttons { position: absolute; bottom: 20px; left: 20px; } #foundry_datepicker .left .buttons a#foundry_datepicker_cancel { color: #666; font-size: 15px; margin-left: 20px; } #foundry_datepicker #start_datepicker, #foundry_datepicker #end_datepicker { position: absolute; top: 20px; right: 20px; } #foundry_datepicker #start_datepicker { z-index: 10; } #foundry_datepicker #end_datepicker { z-index: 9; } #foundry_datepicker .ui-datepicker { background: #fff; border: none; border-radius: 0; color: #000; font-family: "Proxima Nova"; font-size: 12px; width: 47em !important; } #foundry_datepicker .ui-datepicker * { background: transparent; border: none; } #foundry_datepicker .ui-datepicker .ui-datepicker-group { border: 1px solid #000; border-left: none; min-height: 175px; width: 33%; } #foundry_datepicker .ui-datepicker .ui-datepicker-group.ui-datepicker-group-last { border-right: none; } #foundry_datepicker .ui-datepicker .ui-datepicker-header { border-bottom: 1px solid #000; border-radius: 0; } #foundry_datepicker .ui-datepicker .ui-datepicker-prev { top: 1px; left: 0; } #foundry_datepicker .ui-datepicker .ui-datepicker-prev .ui-icon-circle-triangle-w { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid black; } #foundry_datepicker .ui-datepicker .ui-datepicker-next { top: 1px; right: -10px; text-align: right; } #foundry_datepicker .ui-datepicker .ui-datepicker-next .ui-icon-circle-triangle-e { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid black; } #foundry_datepicker .ui-datepicker .ui-datepicker-title { color: #000; line-height: 1em; font-size: 12px; } #foundry_datepicker .ui-datepicker .ui-datepicker-unselectable span { color: #666; font-weight: normal; padding: 4px 1px; text-align: center; } #foundry_datepicker .ui-datepicker table td, #foundry_datepicker .ui-datepicker table th { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } #foundry_datepicker .ui-datepicker table td:last-of-type, #foundry_datepicker .ui-datepicker table th:last-of-type { border-right: none; } #foundry_datepicker .ui-datepicker table td { padding: 0px; } #foundry_datepicker .ui-datepicker table td a { color: #000; font-weight: normal; padding: 4px 1px; text-align: center; } #foundry_datepicker .ui-datepicker table td.date-range-selected a, #foundry_datepicker .ui-datepicker table td a.ui-state-active { background: #09f; color: #fff; } #foundry_datepicker .ui-datepicker table th { padding: 4px 1px; } #foundry_datepicker .ui-datepicker table tr:last-of-type td { border-bottom: none; } 

.foundry_dialog { background: #f9f9f9; border: 1px solid #ddd; box-shadow: 0px 2px 5px #ccc; box-sizing: border-box; display: none; font-size: 14px; width: 400px; min-height: 100px; overflow: auto; padding: 15px; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -200px; } .foundry_dialog .message { margin-bottom: 15px; } .foundry_dialog input[type=button], .foundry_dialog input[type=submit] { float: left; margin-right: 5px; } .foundry_dialog input[type=button] { display: none; } 

.foundry_dropdown { border: 1px solid #ddd; cursor: pointer; line-height: 1em; overflow: visible; position: relative; width: 200px; -webkit-transition: border 200ms ease-in-out; -moz-transition: border 200ms ease-in-out; -ms-transition: border 200ms ease-in-out; -o-transition: border 200ms ease-in-out; transition: border 200ms ease-in-out; } .foundry_dropdown:hover, .foundry_dropdown.active { box-shadow: 0px 1px 3px #e6e6e6; } .foundry_dropdown.active { border-color: #09f; } .foundry_dropdown:after { content: ""; width: 0; height: 0; position: absolute; right: 10px; top: 50%; margin-top: -4px; border-width: 7px 7px 0 7px; border-style: solid; border-color: #09f transparent; } .foundry_dropdown span { border-right: 1px solid #ddd; display: inline-block; padding: 7px; width: 152px; } .foundry_dropdown .dropdown { background: #fff; border: 1px solid #ddd; border-top: none; display: none; font-weight: normal; position: absolute; top: 100%; left: 0; right: 0; margin-top: 1px; pointer-events: none; } .foundry_dropdown.active .dropdown { display: block; pointer-events: auto; } .foundry_dropdown .dropdown li a { color: #000 !important; display: block; text-decoration: none; padding: 10px 20px; } .foundry_dropdown .dropdown li:hover a { background: #f6f6f6; } 

#foundry_footer { color: #7e7e7e; font-family: "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-align: center; position: relative; margin-top: -50px; height: 14px; padding: 18px 0; clear: both; } #foundry_footer a { color: #4b4c51; text-decoration: underline; } #foundry_footer a:hover { color: #09f; } #foundry_footer b, #foundry_footer strong { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #foundry_footer i, #foundry_footer em { font-family: "Proxima-Nova-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; } 

@charset "UTF-8"; #foundry_guides { box-sizing: border-box; background: #fff; box-shadow: 0px 0px 15px #e5e5e5; color: #333; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; margin: 0 auto 50px; overflow: hidden; padding: 30px; width: 100%; max-width: 960px; } #foundry_guides p { font-size: 17px; line-height: 28px; margin-top: 1em; } #foundry_guides p + span, #foundry_guides h5 + span { margin-bottom: 0; } #foundry_guides h1, #foundry_guides h2 { color: #0099ff; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_guides h1 { font-size: 56px; line-height: 1.1em; text-align: center; } #foundry_guides h2 { font-size: 25px; margin: 1.5em 0 1em 0; } #foundry_guides h3 { font-size: 20px; margin: 1.5em 0 1em 0; color: #000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_guides h4 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 20px; font-weight: normal; margin: 1em 0 0.6em; text-transform: uppercase; } #foundry_guides h5 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 17px; margin-top: 1.5em; } #foundry_guides h6 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 15px; margin-top: 1.5em; } #foundry_guides h5 + p, #foundry_guides h6 + p { margin-top: 0; } #foundry_guides em { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; font-style: normal; } #foundry_guides h2.center { text-align: center; } #foundry_guides .left-margin { margin-left: 3em; } #foundry_guides .numbers { font-family: "Consolas", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_guides .italics { font-family: "RooneySans-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_guides .margin-none h5 { margin: 0; } #foundry_guides .line-height-reset { line-height: normal; } #foundry_guides .large-margin { margin: 4em 0; } #foundry_guides .container { width: 100%; } #foundry_guides .top-border { border-top: 1px solid #ccc; } #foundry_guides .light { color: #000; font-family: 'St-Marie-Pro-Light', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #foundry_guides .right { text-align: right; } #foundry_guides .small { font-size: 13px; } #foundry_guides .bot-margin-none { margin-bottom: 0; } #foundry_guides .top-margin-none { line-height: normal; margin-top: 0; } #foundry_guides #colophon { border-top: 1px solid #ccc; margin: 60px 0 0; padding: 30px 0 0; } #foundry_guides #colophon p { margin: 2em 0 0 0; line-height: normal; } #foundry_guides #colophon em { font-size: 13px; } #foundry_guides header { border-bottom: 1px solid #ccc; margin: 0 30px 20px; padding-bottom: 20px; } #foundry_guides .sidebar { float: left; padding: 0; width: 200px; margin-left: 20px; height: 1000px; } #foundry_guides .sidebar a { display: block; margin: .5em 25px .5em 0; font-size: 17px; line-height: 22px; color: #000; } #foundry_guides .sidebar a.selected { color: #0099ff; } #foundry_guides .sidebar nav { font-family: "RooneySans-Bold"; font-size: 11px; } #foundry_guides #are-you-ready .sidebar, #foundry_guides #common-errors .sidebar { width: 185px; } #foundry_guides #are-you-ready .sidebar a, #foundry_guides #common-errors .sidebar a { font-family: "RooneySans-Regular"; font-size: 14px; margin: 5px 0; } #foundry_guides .content { padding: 0 15px 0 220px; } #foundry_guides .content ul.bullets { list-style-type: none; text-indent: -1.2em; margin-left: 1em; } #foundry_guides .content ul li:before { content: "●"; font-size: 110%; line-height: 25px; float: left; padding-right: 1.2em; } #foundry_guides .content li { line-height: 28px; margin: 0.3em 0 0.3em 30px; } #foundry_guides .content li ul.address { margin-top: 0.8em; } #foundry_guides .content li ul.address li { margin-top: 0; margin-bottom: 0; } #foundry_guides .content ul.white-circle li:before { content: "○"; font-size: 110%; line-height: 25px; } #foundry_guides .content #what-myfonts-is { margin-top: 30px; } @media (max-width: 767px) { #foundry_guides { padding: 10px; } #foundry_guides #foundry_pages_container .sidebar { float: none; width: 100%; height: initial; margin-left: 0; position: static !important; } #foundry_guides #foundry_pages_container .content { padding: 0; } } #foundry_pages_container { display: none; } #foundry_guides_main { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_guides_main h1 { font-size: 28px; color: #000; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_guides_main a h2:hover { color: #0099ff; } #foundry_guides_main header { border-bottom: none; } #foundry_guides_main .sidebar { display: none; } #foundry_guides_main .content { padding: 0; } #foundry_guides_main a:hover { text-decoration: none; } #foundry_guides_main .guide-links { min-height: 160px; border-bottom: 1px solid #E4E4E4; } #foundry_guides_main .guide-links > div { float: left; width: 32%; margin-right: 1%; height: auto; text-align: center; } #foundry_guides_main .guide-links div:nth-child(3) { margin-right: 0; } #foundry_guides_main .guide-links > div div { margin-top: 1em; } #foundry_guides_main .guide-links .number { background-color: #0096ff; border-radius: 50%; height: 40px; width: 40px; font-size: 30px; color: white; margin: 0 auto; } #foundry_guides_main .guide-links .title { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #5F5F5F; min-height: 45px; } #foundry_guides_main .guide-links .read { margin-top: 0; } #foundry_guides_main .guide-links button { width: 125px; height: 33px; font-size: 18px; font-family: "RooneySans-Light"; letter-spacing: normal; } @media (max-width: 600px) { #foundry_guides_main .guide-links { border-bottom: none; } #foundry_guides_main .guide-links > div { width: 100%; margin-bottom: 25px; } #foundry_guides_main .guide-links button { width: 262px; height: 50px; } #foundry_guides_main .guide-links .number { margin-right: 10px; } #foundry_guides_main .guide-links .number, #foundry_guides_main .guide-links .title { display: inline-block; } } #foundry_guides_main .guide-series { text-align: center; } #foundry_guides_main .guide-series h1 { margin-top: 1em; } #foundry_guides_main .guide-series p { margin-top: 2em; color: #5F5F5F; } #foundry_guides_main .guide-series .section { float: left; width: 260px; height: auto; margin-right: 55px; min-height: 400px; } #foundry_guides_main .guide-series .section span.blue { color: #0099ff; } #foundry_guides_main .guide-series .section .grey { opacity: 0.4; } #foundry_guides_main .guide-series h2 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 20px; color: #000; margin: 20px 0 0 0; } #foundry_guides_main .guide-series p { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #5F5F5F; margin: 1em 0; line-height: 1.3em; font-size: 16px; } #foundry_guides_main .guide-series > div:nth-of-type(3n) { margin-right: 0; } #foundry_guides_main .guide-series .cover { width: 260px; height: 404px; margin: 0 auto; } #foundry_guides_main .guide-series .guide-1 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-1.png"); } #foundry_guides_main .guide-series .guide-2 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-2.png"); } #foundry_guides_main .guide-series .guide-3 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-3.png"); } #foundry_guides_main .guide-series .guide-4 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-4.png"); } #foundry_guides_main .guide-series .guide-5 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-5.png"); } #foundry_guides_main .guide-series .guide-6 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-6.png"); } @media (max-width: 965px) { #foundry_guides_main .guide-series .section { width: 100%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #foundry_guides_main .guide-series .cover { background-size: 260px 404px; } #foundry_guides_main .guide-series .guide-1 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-1@2x.png"); } #foundry_guides_main .guide-series .guide-2 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-2@2x.png"); } #foundry_guides_main .guide-series .guide-3 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-3@2x.png"); } #foundry_guides_main .guide-series .guide-4 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-4@2x.png"); } #foundry_guides_main .guide-series .guide-5 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-5@2x.png"); } #foundry_guides_main .guide-series .guide-6 { background-image: url("/s/images/foundry_guides/FoundryGuides_Cover-6@2x.png"); } } #foundry_pages_container { } #foundry_pages_container table { border-collapse: separate; border-spacing: 3px 3px; color: #333; margin-top: 1em; } #foundry_pages_container table.no-align tr :nth-child(2) { text-align: left; } #foundry_pages_container table.first-wide tr :nth-child(1) { width: 150px; } #foundry_pages_container table.second-wide tr :nth-child(2) { width: 175px; } #foundry_pages_container table.no-width tr :nth-child(2) { width: initial; } #foundry_pages_container table.numbers_1col tr :nth-child(1) { font-family: "Consolas", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_pages_container table.numbers tr { font-family: "Consolas", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_pages_container table.left { float: left; margin-right: 20px; } #foundry_pages_container table.first-right tr td:nth-of-type(1) { text-align: right; } #foundry_pages_container table.second-left tr td:nth-of-type(2) { text-align: left; } #foundry_pages_container table.total tr :nth-child(1) { width: 170px; text-align: right; } #foundry_pages_container table th { background-color: #CFE2F3; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; padding: 8px 11px; } #foundry_pages_container table tr { background-color: #EFEFEF; } #foundry_pages_container table tr.blue { background-color: #CFE2F3; } #foundry_pages_container table tr.center :nth-child(1), #foundry_pages_container table tr.center :nth-child(2) { text-align: center; } #foundry_pages_container table tr :nth-child(1) { text-align: left; width: 100px; } #foundry_pages_container table tr :nth-child(2) { text-align: right; width: 150px; } #foundry_pages_container table td { padding: 8px 11px; } #foundry_pages_container img { width: 100%; max-width: 450px; } #foundry_pages_container .toc-cover { width: 175px; height: 175px; } #foundry_pages_container #foundry-handbook .toc-cover { background-image: url("/s/images/foundry_guides/handbook.png"); } #foundry_pages_container #are-you-ready .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_2.png"); } #foundry_pages_container #common-errors .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_3.png"); } #foundry_pages_container #online-resources .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_4.png"); } #foundry_pages_container #font-pricing .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_5.png"); } #foundry_pages_container #font-licensing .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_6.png"); } @media (max-width: 767px) { #foundry_pages_container h1 { font-size: 1.5em; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #foundry_pages_container .toc-cover { background-size: 175px 175px; } #foundry_pages_container #foundry-handbook .toc-cover { background-image: url("/s/images/foundry_guides/handbook@2x.png"); } #foundry_pages_container #are-you-ready .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_2@2x.png"); } #foundry_pages_container #common-errors .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_3@2x.png"); } #foundry_pages_container #online-resources .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_4@2x.png"); } #foundry_pages_container #font-pricing .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_5@2x.png"); } #foundry_pages_container #font-licensing .toc-cover { background-image: url("/s/images/foundry_guides/MFguide_coverimage_6@2x.png"); } } 

@charset "UTF-8"; #foundry_handbook { background: #fff; box-sizing: border-box; box-shadow: 0px 0px 15px #e5e5e5; color: #333; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; margin: 0 auto 50px; overflow: auto; padding: 30px; width: 100%; max-width: 960px; } #foundry_handbook p { font-size: 17px; line-height: 28px; margin-bottom: 1em; } #foundry_handbook h1, #foundry_handbook h2 { color: #0099ff; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_handbook h1 { font-size: 56px; line-height: 1.1em; text-align: center; } #foundry_handbook h2 { font-size: 25px; margin: 20px 0 10px 0; } #foundry_handbook h2 + p { margin-top: 0; } #foundry_handbook h3 { font-size: 20px; margin: 14px 0 14px 0; color: #000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_handbook h4 { font-size: 20px; font-weight: normal; margin: 1em 0 0.6em; } #foundry_handbook h5 { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 19px; margin: 1em 0 0.6em; } #foundry_handbook em { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; } #foundry_handbook .top-border { border-top: 1px solid #ccc; } #foundry_handbook .light { color: #000; font-family: 'St-Marie-Pro-Light', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #foundry_handbook .right { text-align: right; } #foundry_handbook .ryde { font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #foundry_handbook #colophon { border-top: 1px solid #ccc; margin: 60px 0 0; padding: 30px 0 0; } #foundry_handbook header { border-bottom: 1px solid #ccc; margin: 0 30px 20px; padding-bottom: 20px; } #foundry_handbook .sidebar { float: left; padding: 0; width: 200px; margin-left: 20px; height: 1000px; } #foundry_handbook .sidebar a { display: block; margin: .5em 25px .5em 0; font-size: 17px; line-height: 22px; color: #000; } #foundry_handbook .sidebar a.selected { color: #0099ff; } #foundry_handbook .sidebar h4 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 20px; font-weight: normal; margin: 1em 0 0.6em; text-transform: uppercase; } #foundry_handbook .content { padding: 0 15px 0 220px; } #foundry_handbook .content ul.bullets { list-style-type: none; } #foundry_handbook .content ul li:before { content: "•"; font-size: 200%; padding-right: 5px; line-height: 0.6em; float: left; } #foundry_handbook .content li { line-height: 1.4em; margin: 0.3em 0 0.3em 30px; } #foundry_handbook .content li ul.address { margin-top: 0.8em; } #foundry_handbook .content li ul.address li { margin-top: 0; margin-bottom: 0; } #foundry_handbook .content #what-myfonts-is { margin-top: 30px; } 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } .foundry_button, input[type=button].foundry_button, input[type=submit].foundry_button { background: #111; border: 1px solid #000; border-radius: 2px; box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.25); display: inline-block; color: #fff !important; cursor: pointer; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; letter-spacing: 1px; padding: 5px 10px; text-decoration: none; text-transform: uppercase; -webkit-transition: background 200ms ease-in-out, border 200ms ease-in-out; -moz-transition: background 200ms ease-in-out, border 200ms ease-in-out; -ms-transition: background 200ms ease-in-out, border 200ms ease-in-out; -o-transition: background 200ms ease-in-out, border 200ms ease-in-out; transition: background 200ms ease-in-out, border 200ms ease-in-out; } .foundry_button.big, input[type=button].foundry_button.big, input[type=submit].foundry_button.big { padding: 10px 20px; } .foundry_button.small, input[type=button].foundry_button.small, input[type=submit].foundry_button.small { font-size: 14px; padding: 4px 8px; } .foundry_button.blue, input[type=button].foundry_button.blue, input[type=submit].foundry_button.blue { background: #09f; border-color: #09f; } .foundry_button.grey, input[type=button].foundry_button.grey, input[type=submit].foundry_button.grey { background: #fefefe; border-color: #fefefe; border-color: #e3e3e3 #d9d9d9 #d5d5d5 #d9d9d9; color: #444 !important; } .foundry_button.grey:hover, input[type=button].foundry_button.grey:hover, input[type=submit].foundry_button.grey:hover { background: #fefefe; border-color: #09f; } .foundry_button:hover, input[type=button].foundry_button:hover, input[type=submit].foundry_button:hover { background: #078adb; border-color: #007acb; text-decoration: none; } input[type=text].foundry_input, input[type=password].foundry_input { border: 1px solid #ddd; display: inline-block; font-family: "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 15px; padding: 5px 7px; -webkit-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -moz-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -ms-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -o-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; } input[type=text].foundry_input:focus, input[type=password].foundry_input:focus { border-color: #09f; box-shadow: inset 0px 2px 3px #e6e6e6; outline: none; } .foundry_checkbox { display: none; display: inline-block\9; } .foundry_checkbox + label { display: inline-block; margin-right: 10px; } .foundry_checkbox + label .checkbox_image { background: url("/s/images/foundry/foundry_checkbox.png") center center no-repeat; background-size: 18px 18px; display: inline-block; display: none\9; height: 18px; width: 18px; position: relative; top: 4px; } .foundry_checkbox + label:active .checkbox_image, .foundry_checkbox:checked + label:active .checkbox_image { background-image: url("/s/images/foundry/foundry_checkbox_active.png"); } .foundry_checkbox:checked + label .checkbox_image { background-image: url("/s/images/foundry/foundry_checkbox_checked.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .foundry_checkbox + label .checkbox_image { background: url("/s/images/foundry/foundry_checkbox@2x.png") center center no-repeat; background-size: 18px 18px; } .foundry_checkbox + label:active .checkbox_image, .foundry_checkbox:checked + label:active .checkbox_image { background-image: url("/s/images/foundry/foundry_checkbox_active@2x.png"); } .foundry_checkbox:checked + label .checkbox_image { background-image: url("/s/images/foundry/foundry_checkbox_checked@2x.png"); } } #foundry_wrapper { height: 100%; } body > #foundry_wrapper { background: #f5f5f5; height: auto; min-height: 100%; overflow: auto; } #foundry_main { font-family: "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; padding-bottom: 50px; } #foundry_main a { color: #09f; } #foundry_main b, #foundry_main strong { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #foundry_main i { font-family: "Proxima-Nova-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; } #foundry_main .grey { color: #666; } #foundry_main h2 + p { margin-top: 1em; } #foundry_header { height: 80px; overflow: visible; position: relative; width: 97%; margin-left: 12px; } .foundry_logo { background: url("/s/images/foundry/foundry_logo.png") center center no-repeat; background-size: 100px 50px; height: 50px; width: 100px; position: absolute; top: 22px; left: 0; } .foundry_tools { color: #494c51; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; letter-spacing: 1px; line-height: 14px; text-transform: uppercase; position: absolute; top: 25px; left: 110px; width: 75px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .foundry_logo { background: url("/s/images/foundry/foundry_logo@2x.png") center center no-repeat; background-size: 100px 50px; } } @media (min-width: 1000px) { #foundry_header { width: 960px; margin: 0 auto; } } #foundry_header .navMenu a { color: #333333; } #foundry_header .navMenu a:hover { color: #09f; text-decoration: none; } #foundry_header .navMenu a.toggle { background: url("/s/images/iconsets/myfonts/header_menu_arrow.svg") right center no-repeat; background-image: url("/s/images/iconsets/myfonts/header_menu_arrow.png") \9; padding-right: 15px; text-decoration: none; } #foundry_header .navMenu a.toggle:hover { background-image: url("/s/images/iconsets/myfonts/header_menu_arrow_hover.svg"); background-image: url("/s/images/iconsets/myfonts/header_menu_arrow_hover.png") \9; } #foundry_header .navMenu nav { background: #fff; border: 1px solid #ddd; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); line-height: 1.2em; margin-top: 5px; padding: 5px 0; position: absolute; text-align: left; white-space: nowrap; z-index: 1; } #foundry_header .navMenu nav a { display: block; font-size: 14px; margin: 0; padding: 8px 16px; text-decoration: none; } #foundry_header .navMenu nav a:hover { background: #eee; color: #555; text-decoration: none; } #foundry_header .navMenu { position: absolute; top: 37px; left: 205px; font-family: 'RooneySans-Regular', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } 

#foundry_landing { background: #fff; box-sizing: border-box; box-shadow: 0px 0px 15px #e5e5e5; margin: 0 auto; overflow: auto; padding: 30px; width: 960px; } #foundry_landing .foundry_filter { margin-top: 10px; overflow: visible; width: 100%; } #foundry_landing .filter_status { font-size: 14px; padding: 5px 0 10px 0; } #foundry_landing .filter_status a { font-style: normal; margin-left: 10px; padding-bottom: 2px; } #foundry_landing .filter_status a:hover { border-bottom: 1px solid #09f; text-decoration: none; } #foundry_landing .filter_status a.selected { border-bottom: 1px solid #06c; } #foundry_landing .filter_foundry { padding: 0 0 10px; } #foundry_landing .filter_search { float: left; position: relative; width: 600px; } #foundry_landing .filter_search input[type=text] { background-image: url("/s/images/foundry/foundry_filter.png"); background-position: 5px center; background-repeat: no-repeat; background-size: 17px 17px; margin-top: 5px; padding-left: 30px; width: 495px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_landing .filter_search input[type=text] { background-image: url("/s/images/foundry/foundry_filter@2x.png"); } } #foundry_landing .filter_search .field_clear { background: #ccc; border-radius: 10px; color: #fff; cursor: pointer; float: left; font-size: 12px; font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; line-height: 12px; height: 12px; padding: 2px; position: absolute; left: 510px; top: 12px; width: 12px; text-align: center; } #foundry_landing .filter_search .field_clear:hover { background: #aaa; } #foundry_landing .filter_dropdown { float: right; overflow: visible; padding: 5px 0; width: 300px; } #foundry_landing .filter_dropdown .dropdown_label { float: right; padding: 7px 10px 7px 0; } #foundry_landing .filter_dropdown .foundry_dropdown { float: right; } #foundry_landing .font_list { list-style: none; margin: 0; padding: 10px 0; } #foundry_landing .font_list li { border-bottom: 1px solid #ddd; font-size: 16px; overflow: auto; padding: 10px; } #foundry_landing .font_list .font_name { float: left; font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; padding: 5px 0; } #foundry_landing .font_list .font_status { color: #666; float: right; font-style: italic; padding: 5px 20px 5px 0px; } #foundry_landing .font_list .button { background-position: center center; background-repeat: no-repeat; background-size: 28px 28px; border: none; cursor: pointer; float: right; height: 28px; width: 28px; margin-top: 0; margin-left: 10px; } #foundry_landing .font_list .button.edit { background-image: url("/s/images/foundry/foundry_edit_button.png"); } #foundry_landing .font_list .button.edit.inactive { background-image: url("/s/images/foundry/foundry_edit_button_inactive.png"); } #foundry_landing .font_list .button.stats { background-image: url("/s/images/foundry/foundry_stats_button.png"); } #foundry_landing .font_list .button.stats.inactive { background-image: url("/s/images/foundry/foundry_stats_button_inactive.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_landing .font_list .button.edit { background-image: url("/s/images/foundry/foundry_edit_button@2x.png"); } #foundry_landing .font_list .button.inactive.edit { background-image: url("/s/images/foundry/foundry_edit_button_inactive@2x.png"); } #foundry_landing .font_list .button.stats { background-image: url("/s/images/foundry/foundry_stats_button@2x.png"); } #foundry_landing .font_list .button.stats.inactive { background-image: url("/s/images/foundry/foundry_stats_button_inactive@2x.png"); } } #foundry_landing .font_list .foundry_name { color: #666; clear: both; } 

#foundry_nav { list-style: none; position: absolute; top: 40px; left: 50%; margin-left: -270px; width: 750px; } #foundry_nav li { float: left; height: 40px; margin-left: 40px; font-size: 16px; } @media only screen and (-webkit-max-device-pixel-ratio: 1.49) { #foundry_nav li.selected { background: url("/s/images/foundry/foundry_tab_selected_temp.png") center bottom no-repeat; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #foundry_nav li.selected { background: url("/s/images/foundry/foundry_tab_selected_temp@2x.png") center bottom no-repeat; } } #foundry_nav li a { color: #515458; } #foundry_nav li a:hover { color: #09F; text-decoration: none; } 

#dev_main #dev_404 { background: url("/s/images/dev/dev_404.gif") center center/100% 100% no-repeat !important; color: #fff; font-family: "RooneySans-Medium"; font-size: 80px; height: 525px; position: relative; width: 700px; text-align: center; } #dev_main #dev_404 span { display: inline-block; line-height: 1em; opacity: 0.25; margin-top: 60%; } @media screen and (min-height: 700px) { #dev_main #dev_404 { height: 720px; width: 960px; } } 

#foundry_prospectus { background: #fff; box-sizing: border-box; box-shadow: 0px 0px 15px #e5e5e5; color: #333333; font-family: 'RooneySans-Regular', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 21px; margin: 0 auto 50px; overflow: auto; padding: 30px; max-width: 960px; -webkit-font-smoothing: antialiased; } #foundry_prospectus .section { display: none; } #foundry_prospectus #sell-your-fonts { display: block; } #foundry_prospectus h1 { font-family: 'RooneySans-Light', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 48px; font-weight: normal; text-align: center; } #foundry_prospectus strong { font-family: 'RooneySans-Bold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_prospectus p.intro { font-size: 19px; margin: 0 auto; padding: 10px 0 20px; position: relative; text-align: center; max-width: 660px; font-family: 'RooneySans-Light', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_prospectus p.intro:after { background: #ddd; content: ""; display: block; height: 2px; margin-left: -200px; position: absolute; top: 100%; left: 50%; width: 400px; } #foundry_prospectus .step { display: table; font-size: 21px; line-height: 1.4em; margin-top: 30px; overflow: auto; } #foundry_prospectus .step.less-margin { margin-top: 18px; } #foundry_prospectus .step.small { font-size: 18px; } #foundry_prospectus .step:last-child, #foundry_prospectus .step:last-of-type { margin-bottom: 30px; } #foundry_prospectus .step .number { background: #09f; border-radius: 50%; color: #fff; display: block; float: left; font-family: 'RooneySans-Light', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 38px; height: 52px; width: 52px; line-height: 50px; line-height: 52px\0; margin-right: 20px; text-align: center; } #foundry_prospectus .step .text { display: table-cell; vertical-align: middle; } #foundry_prospectus .step .inner-text { vertical-align: middle; margin-left: 72px; } #foundry_prospectus .step .step-heading { font-size: 21px; font-family: 'RooneySans-Bold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; line-height: 2.5; } #foundry_prospectus ul.bullets { list-style-type: disc; margin-left: 40px; } #foundry_prospectus li { line-height: 1.4em; margin: 0.4em 0 0.4em 30px; } #foundry_prospectus .button-container { width: 700px; margin: 0 auto; } #foundry_prospectus #learn_more_button { display: block; margin: 30px auto 50px; text-align: center; width: 120px; } #foundry_prospectus #sign_up_now_button { display: block; margin: 30px auto 50px; text-align: center; width: 200px; } #foundry_prospectus #foundry_handbook_button { margin: 50px auto 50px; text-align: center; width: 300px; } #foundry_prospectus #submit_now_button { display: block; margin: 50px auto 50px; text-align: center; width: 300px; } @media (max-width: 600px) { #foundry_prospectus .step .inner-text { margin-left: 0; } } 

#foundry_sales_reports { background: #fff; box-sizing: border-box; box-shadow: 0px 0px 15px #e5e5e5; font-family: "Proxima Nova", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; margin: 0 auto; overflow: auto; position: relative; padding: 30px; width: 960px; } #foundry_sales_reports #sales_reports_csv { position: absolute; top: 25px; right: 20px; } #foundry_sales_reports .sales_reports_filter { margin-bottom: 25px; } #foundry_sales_reports .sales_reports_filter .filters { margin-top: 17px; } #foundry_sales_reports .sales_reports_filter .filter_label { margin-right: 10px; margin-bottom: 5px; } #foundry_sales_reports .sales_reports_filter .filter_separator { background: #ccc; float: left; height: 24px; margin: 29px 17px 0 17px; width: 1px; } #foundry_sales_reports .sales_reports_filter .filter_search { position: relative; } #foundry_sales_reports .sales_reports_filter .filter_search input[type=text] { background-image: url("/s/images/magnifying_glass.png"); background-position: 5px center; background-repeat: no-repeat; background-size: 17px 17px; font-style: italic; margin-top: 5px; padding-left: 30px; width: 495px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_sales_reports .sales_reports_filter .filter_search input[type=text] { background-image: url("/s/images/magnifying_glass@2x.png"); } } #foundry_sales_reports .sales_reports_filter .filter_search .field_clear { background: #ccc; border-radius: 10px; color: #fff; cursor: pointer; float: left; font-size: 12px; font-weight: bold; line-height: 12px; height: 12px; padding: 2px; position: absolute; left: 510px; top: 12px; width: 12px; text-align: center; } #foundry_sales_reports .sales_reports_filter .filter_search .field_clear:hover { background: #aaa; } #foundry_sales_reports .sales_reports_filter .filter_date { float: left; position: relative; } #foundry_sales_reports .sales_reports_filter .filter_date #foundry_datepicker_toggle { margin: 12px 20px 0 0; width: 250px; z-index: 10; } #foundry_sales_reports .sales_reports_filter .filter_date #foundry_datepicker_toggle span { width: 202px; } #foundry_sales_reports .sales_reports_filter .filter_date #foundry_datepicker { box-shadow: 0px 1px 10px #e6e6e6; display: none; position: absolute; top: 60px; left: 0px; z-index: 1000; } #foundry_sales_reports .sales_reports_filter .filter_license_type { float: left; overflow: auto; } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license { margin-right: 24px; } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license:last-child { margin-right: 0; } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license input[type=checkbox] { display: none; } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license input[type=checkbox]:checked + label { opacity: 1; } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license input[type=checkbox].selected + label { border-bottom: 2px solid #09f; padding-bottom: 0; } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label { background-position: center center; background-repeat: no-repeat; background-size: 19px 19px; display: inline-block; height: 36px; padding-bottom: 2px; opacity: 0.5; width: 36px; } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.desktop { background-image: url("/s/images/foundry/foundry_license_desktop.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.web { background-image: url("/s/images/foundry/foundry_license_web.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.app { background-image: url("/s/images/foundry/foundry_license_app.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.epub { background-image: url("/s/images/foundry/foundry_license_epub.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.server { background-image: url("/s/images/foundry/foundry_license_server.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.desktop { background-image: url("/s/images/foundry/foundry_license_desktop@2x.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.web { background-image: url("/s/images/foundry/foundry_license_web@2x.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.app { background-image: url("/s/images/foundry/foundry_license_app@2x.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.epub { background-image: url("/s/images/foundry/foundry_license_epub@2x.png"); } #foundry_sales_reports .sales_reports_filter .filter_license_type > span.license label.server { background-image: url("/s/images/foundry/foundry_license_server@2x.png"); } } #foundry_sales_reports .sales_reports_filter .filter_show_only { float: left; margin-top: 22px; overflow: auto; } #foundry_sales_reports .sales_reports_filter .filter_show_only input[type=checkbox] { display: none; } #foundry_sales_reports .sales_reports_filter .filter_show_only input[type=checkbox]:checked + label { opacity: 1; } #foundry_sales_reports .sales_reports_filter .filter_show_only label { background-position: center center; background-repeat: no-repeat; background-size: 25px 23px; display: inline-block; height: 36px; margin-right: 24px; opacity: 0.5; width: 36px; } #foundry_sales_reports .sales_reports_filter .filter_show_only label.selected { border-bottom: 2px solid #09f; } #foundry_sales_reports .sales_reports_filter .filter_show_only label.promotions { background-image: url("/s/images/foundry/foundry_show_promotions.png"); } #foundry_sales_reports .sales_reports_filter .filter_show_only label.reversals { background-image: url("/s/images/foundry/foundry_show_reversals.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_sales_reports .sales_reports_filter .filter_show_only label.promotions { background-image: url("/s/images/foundry/foundry_show_promotions@2x.png"); } #foundry_sales_reports .sales_reports_filter .filter_show_only label.reversals { background-image: url("/s/images/foundry/foundry_show_reversals@2x.png"); } } #foundry_sales_reports .sales_reports_filter .filter_sort_by { float: left; margin-left: 24px; } #foundry_sales_reports .sales_reports_filter .filter_sort_by input[type=radio] { display: none; } #foundry_sales_reports .sales_reports_filter .filter_sort_by input[type=radio]:checked + label { border-bottom: 2px solid #09f; } #foundry_sales_reports .sales_reports_filter .filter_sort_by label { background-position: center center; background-repeat: no-repeat; background-size: 25px 23px; display: inline-block; margin-right: 24px; padding: 10px 5px; } #foundry_sales_reports .toggle_view { float: right; height: 31px; position: relative; top: -20px; } #foundry_sales_reports .toggle_view #toggle_view_chart { background: url("/s/images/foundry/foundry_sales_reports_chart.png") center center/23px 17px no-repeat; border-top-right-radius: 0px; border-bottom-right-radius: 0px; position: absolute; right: 44px; width: 45px; height: 27px; z-index: 1; } #foundry_sales_reports .toggle_view #toggle_view_chart:hover { z-index: 3; } #foundry_sales_reports .toggle_view #toggle_view_list { background: url("/s/images/foundry/foundry_sales_reports_list.png") center center/26px 11px no-repeat; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0; position: absolute; right: 0; width: 45px; height: 27px; z-index: 2; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_sales_reports .toggle_view #toggle_view_chart { background-image: url("/s/images/foundry/foundry_sales_reports_chart@2x.png"); } #foundry_sales_reports .toggle_view #toggle_view_list { background-image: url("/s/images/foundry/foundry_sales_reports_list@2x.png"); } } #foundry_sales_reports .totals_toggle { margin-top: 10px; } #foundry_sales_reports .totals_toggle .arrow { display: inline-block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid #000; margin-left: 5px; position: relative; top: 3px; } #foundry_sales_reports .totals_toggle.expanded .arrow { border-top: 9px solid #000; border-left: 6px solid transparent; border-right: 6px solid transparent; top: 6px; } #foundry_sales_reports table.totals { display: none; font-size: 15px; width: 500px; } #foundry_sales_reports table.totals th { font-weight: 600; text-align: left; } #foundry_sales_reports table.totals th:nth-child(n+2) { text-align: right; } #foundry_sales_reports table.totals td { text-align: left; } #foundry_sales_reports table.totals td:nth-child(n+2) { text-align: right; } #foundry_sales_reports table.totals tr:last-child td { padding-bottom: 25px; } #foundry_sales_reports table.orders { border-spacing: 0px; width: 100%; } #foundry_sales_reports table.orders th { font-size: 11px; font-weight: 600; } #foundry_sales_reports table.orders td { font-size: 15px; } #foundry_sales_reports table.orders th, #foundry_sales_reports table.orders td { padding: 5px; text-align: left; } #foundry_sales_reports table.orders th:nth-child(n+4), #foundry_sales_reports table.orders td:nth-child(n+4) { text-align: right; } #foundry_sales_reports table.orders .order .order_info td { border-top: 2px solid #09f; border-bottom: 1px solid #ddd; font-weight: 600; padding-top: 12px; } #foundry_sales_reports table.orders .order .order_info td:nth-child(n+2) { text-align: right; } #foundry_sales_reports table.orders .order tr:last-child td { padding-bottom: 25px; } 

#foundry_select_page { margin: 30px auto; text-align: center; width: 600px; } #foundry_select_page h2 { color: #4A4C52; font-size: 18px; } #foundry_select_page #foundry_selector { margin: 30px auto 0; text-align: left; } 

#foundry_selector { position: relative; width: 450px; z-index: 10; } #foundry_selector .loading { background-image: url("/images/foundry/foundry_selector_loading_grey.gif"); background-position: center center; background-repeat: no-repeat; background-size: 24px 24px; display: none; height: 24px; margin: 0 auto; position: absolute; width: 450px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #foundry_selector .loading { background-image: url("/images/foundry/foundry_selector_loading_grey@2x.gif"); } } #foundry_selector .error { background: #cc0000; border: 1px solid #990000; color: #fff; display: none; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: normal; margin-bottom: 5px; padding: 2px 7px; position: absolute; text-align: center; top: 30px; width: 434px; } #foundry_selector .field { padding: 4px 7px; width: 434px; } #foundry_selector .dropdown { background: #fff; border: 1px solid #ddd; box-shadow: 0px 2px 6px #e6e6e6; border-top: none; display: none; max-height: 250px; overflow: auto; width: 448px; } #foundry_selector .dropdown .items { position: relative; } #foundry_selector .dropdown ul li { cursor: pointer; font-size: 12px; padding: 8px 12px; } #foundry_selector .dropdown ul li:hover { background: #f6f6f6; } #foundry_selector .dropdown ul li.selected { background: #09f; color: #fff; } 

#foundry_user_menu { color: #4b4c51; font-size: 13px; position: absolute; top: 15px; right: 0px; } #foundry_user_menu .user_name { padding: 0 8px; } #foundry_user_menu a { color: #4b4c51 !important; font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; padding: 0 8px; text-decoration: none; } #foundry_user_menu a:hover { color: #09f !important; } 

div.glyph_details { position: relative; } div.glyph_details div.the_big_glyph { position: relative; float: left; width: 476px; } div.glyph_details div.the_big_glyph div.hider { overflow: hidden; } div.glyph_details div.the_big_glyph span { border: 1px solid blue; font-size: 400px; font-family: "MyFonts-Glyph-Map"; font-weight: normal; } div.glyph_details div.the_big_glyph a { position: absolute; font-size: 12px; top: 0px; right: 0px; } div.glyph_details div.the_big_glyph div.metrics { position: absolute; width: 100%; font-size: 9px; font-style: italic; opacity: 0.75; border-width: 0px; border-top: 1px solid #09F; color: #09F; } div.glyph_details div.the_big_glyph div.metrics.x-height { border-style: dashed; text-align: right; } div.glyph_details div.the_big_glyph div.metrics.ascender, div.glyph_details div.the_big_glyph div.metrics.descender { border-style: none; background-color: black; opacity: 0.1; } div.glyph_details ul.related_glyphs { position: relative; float: right; width: 232px; background-color: white; } div.glyph_details ul.related_glyphs h4 { margin-top: 12px; } div.glyph_details ul.related_glyphs ul.glyph_alts > li { display: inline-block; } div.glyph_details ul.related_glyphs ul.glyph_alts > li.spaced { text-align: center; margin-right: 24px; } div.glyph_details ul.related_glyphs ul.glyph_alts > li a:not(.normal), #popup_box div.glyph_details table.prevnext a.inthefont { color: black; font-family: "MyFonts-Glyph-Map"; font-size: 40px; font-weight: normal; } div.glyph_details ul.related_glyphs ul.glyph_alts > li a:hover, #popup_box div.glyph_details table.prevnext a.inthefont:hover { text-decoration: none; } div.glyph_meta_column ul li { margin-top: 6px; } div.glyph_meta_column ul li .label { font-weight: bold; } #popup_box div.glyph_details { min-width: 605px; min-height: 360px; } #popup_box div.glyph_details div.the_big_glyph { width: 360px; height: 360px; } #popup_box div.glyph_meta_info { position: relative; float: right; width: 232px; min-height: 360px; border-left: 1px solid #999; } #popup_box div.glyph_meta_column { padding: 12px; } #popup_box div.glyph_meta_column + div.glyph_meta_column { border-top: 1px solid #999; } #popup_box div.glyph_meta_info table.prevnext { position: absolute; bottom: 0px; left: 12px; right: 12px; } 

div.glyphmap_widget h1, div.glyphmap_widget h3 { margin-top: 24px; } div.glyphmap_widget .ourfont { font-family: "MyFonts-Glyph-Map"; font-weight: normal; } form#glyphmap_controls { position: relative; background-color: #F5F5F5; border-style: solid; border-width: 1px 0px; border-color: #CCCCCC; padding: 6px; margin-bottom: 12px; width: 720px; z-index: 10; } form#glyphmap_controls > div { float: left; padding: 0px 12px; } form#glyphmap_controls div.label { font-size: 11px; padding-bottom: 2px; } table#glyphmap_legend { float: right; border-collapse: separate; border: 1px solid #CCC; background-color: white; } table#glyphmap_legend td { border: 2px solid white; white-space: nowrap; } table#glyphmap_legend td.color { border: 1px solid #CCC; height: 36px; width: 24px; } table#glyphmap_legend td.master, div.glyphmap_widget ul.glyphlist li.master a { background-color: #9CF; } table#glyphmap_legend td.unicode, div.glyphmap_widget ul.glyphlist li.unicode a { background-color: #DDD; } table#glyphmap_legend td.variant, div.glyphmap_widget ul.glyphlist li.variant a { background-color: none; } div.glyphmap_widget map { display: none; } div.glyphmap_widget ul.glyphlist { font-family: "MyFonts-Glyph-Map"; font-size: 36px; font-weight: normal; } div.glyphmap_widget ul.glyphlist.one_per_line { position: relative; display: block; } div.glyphmap_widget ul.glyphlist li { display: inline-block; list-style-type: none; margin: 0px; padding: 0px; border-style: none; } div.glyphmap_widget ul.glyphlist li a { display: block; margin: 0px; padding: 0.5em; border: 2px solid white; color: black; } div.glyphmap_widget ul.glyphlist li a:hover { border-color: #e58c18; background-color: white; text-decoration: none; z-index: 1; } #glyphmap_highlited_area { position: absolute; display: block; background-color: none; border: 2px solid #e58c18; text-decoration: none; } 

#headcrumbs { list-style-type: none; padding: 0px; margin: 0px; } #headcrumbs li { display: inline; } #headcrumbs li.maincrumb { display: block; padding-top: 0px; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } #headcrumbs li.maincrumb img { margin-top: 12px; } #headcrumbs img.slash { position: relative; width: 8px; height: 16px; top: -1px; } 

#help_docs { padding-top: 30px; } #help_docs .sidebar nav ul { display: none; } #help_docs .sidebar nav ul li { margin-left: 20px; } #help_docs .sidebar nav ul a { font-family: "St-Marie-Pro-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 0.8em; } #help_docs .sidebar nav a.selected + ul { display: block; } #help_docs button { margin: 0 3px; pointer-events: none; } #help_docs code { font-size: .8888em; } #help_docs img { max-width: 100%; } #help_docs table { border: 1px solid #ddd; border-collapse: collapse; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 0.7em; max-width: 100%; } #help_docs table th.heading { border-bottom: 1px solid #ddd; font-size: 1.1666em; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding: 0.5em; text-align: left; } #help_docs table th, #help_docs table td { font-weight: normal; padding: 5px; text-align: left; vertical-align: top; } #help_docs table th:nth-child(even), #help_docs table td:nth-child(even) { background: #f6f6f8; } #help_docs table tr.grey { background: #f6f6f8; } #help_docs table tr.grey th:nth-child(even), #help_docs table tr.grey td:nth-child(even) { background: #ededef; } #help_docs table tr.grey td:nth-child(1) { border-top: 1px solid #ccc; } #help_docs table.opentype td:nth-child(n+2) { font-family: 'VivaliaMediaIcons'; font-size: 2em; line-height: 0.8em; text-align: center; vertical-align: middle; border-bottom: 1px solid #ccc; } #help_docs table.abbrev { border-collapse: collapse; border-bottom: 1px solid #ccc; } #help_docs table.abbrev td { border-bottom: 1px solid #ccc; } #help_docs table.abbrev td:nth-child(3) { border-right: 1px solid #ccc; } #help_docs table.abbrev tr:nth-child(odd) td:nth-child(2) { background: white; } #help_docs table.abbrev tr:nth-child(even) { background: #f6f6f8; } #help_docs h1 { padding-top: 30px; } .contact-textbox { max-width: 500px; float: left; } .contact-textbox p { margin-bottom: 1.4em; } #help_contact { padding-top: 30px; } #help_contact h1 { margin-bottom: 40px; } #help_contact h2.sent { margin: 30px 0 15px; } #help_contact form { display: none; max-width: 500px; } #help_contact form label { margin: 1.5em 0 0.5em; } #help_contact form label.list-label { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 2em 0 0.5em; } #help_contact form input, #help_contact form label { display: block; } #help_contact form input[type=checkbox], #help_contact form input[type=checkbox] + label { display: inline-block; } #help_contact form input[type=file] { display: inline-block; max-width: 215px; } #help_contact form input[type=submit] { margin-top: 3em; } #help_contact form #customSubject { display: none; margin-top: 0.5em; } #help_contact form #fontIssue { display: none; } #help_contact form #messageCounter { display: none; font-size: 12px; } #help_contact form #messageCounter.tooShort { color: #cc0000; } #help_contact form #messageCounter #charCount { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #help_contact form #suggestion { display: none; font-size: 12px; margin-top: 0.5em; } #help_contact form textarea { height: 150px; width: 400px; } #help_contact form ul label { margin: 0; } #help_contact form ul li { float: left; width: 45%; margin: 0.5em 0; padding-right: 5%; position: relative; } #help_contact form ul#attachments button.clearAttachment { background: #ccc; border-radius: 50%; padding: 1px 3px 3px 3px; width: 18px; height: 18px; line-height: 0; margin-left: 10px; position: absolute; top: 0; right: 10px; } #help_contact form ul#attachments button.clearAttachment:hover { background: #bbb; } #help_contact form ul#attachments li { line-height: 30px; margin: 0.3333em 0; } #help_contact form ul#attachments li:first-child button.clearAttachment { display: none; } #taxes { box-sizing: border-box; color: #333; font-family: "St-Marie-Pro-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; } #taxes p { font-size: 18px; word-spacing: 0.07em; } #taxes h1 { color: #333; font-family: "St-Marie-Pro-Black", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 54px; } #taxes h2 { font-size: 34px; padding-right: 35px; } #taxes h3 { font-size: 34px; margin: 0.8em 0 0.5em; } #taxes h2, #taxes h3 { color: #000; font-family: "St-Marie-Pro-Thin", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #taxes h4 { color: #666; font-family: "St-Marie-Pro-Extra-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 21px; font-weight: normal; margin: 1em 0 0.6em; } #taxes h5 { font-family: "St-Ryde-Medium-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 19px; margin: 1em 0 0.6em; } #taxes em { font-family: "St-Ryde-Medium-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; font-size: 19px; } #taxes .light { color: #000; font-family: "St-Marie-Pro-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #taxes .right { text-align: right; } #taxes .ryde { font-family: "St-Ryde-Medium-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #taxes #colophon { border-top: 1px solid #ccc; margin: 60px 0 0; padding: 30px 0 0; } #taxes header { margin-bottom: 20px; } #taxes .sidebar { float: left; padding: 0 15px; margin-top: 10px; width: 200px; } #taxes .sidebar a { display: block; margin: 1em 25px 1em 0; } #taxes .sidebar a.selected { color: #000; } #taxes .content { float: right; padding: 0 15px; width: 640px; } #taxes .content ul.bullets { list-style-type: disc; } #taxes .content li { line-height: 1.4em; margin: 0.8em 0 0.8em 30px; } #taxes .content li ul.address { margin-top: 0.8em; } #taxes .content li ul.address li { margin-top: 0; margin-bottom: 0; } #taxes .content #what-myfonts-is { margin-top: 30px; } #send { float: left; } #send > .spinner { top: 5px; padding-right: 20px; } #send > .status { top: -5px; } #contactus { float: right; margin-right: 20px; width: 40%; } #contactus > h3 { font-size: 13px; margin-bottom: 0; } #contactus > p { font-size: 13px; padding-bottom: 9px; } #contactform { float: left; } #addcontactinfo { margin-bottom: 0; font-size: 15px; } #app-licensing .lic-app { background-image: url("/s/images/licensing/app-sm.png"); display: inline-block; height: 21px; width: 20px; vertical-align: middle; } div.required { font-size: 0.95em; position: relative; left: 22.6em; top: 1.2em; } span.required { color: #f33; } 

.homepageBody, .homepageBody #myfontsContainer, .homepageBody #mainFooter { background-color: #F5F4F3; } .homepageBody #myfontsContainer.fluid { padding: 0; } @media screen and (max-width: 767px) { .homepageBody #myfontsContainer.fluid #myfontsHeader { height: auto; padding: 0 0 15px 10px; margin-bottom: 0; } } .homepageBody #myfontsContainer #myfontsBody { padding-top: 0; } @media screen and (max-width: 767px) { .homepageBody #myfontsContainer #myfontsBody { margin-top: 0; } } .homepageBody #mainFooter { border: none; } .homepage { background-color: #F5F4F3; } .homepage__container { margin-left: auto; margin-right: auto; max-width: 1368px; } .homepage__mainBlock__categoriesWrapper { background-color: #f4f4f4; border: 1px solid #e2e2e2; box-sizing: border-box; padding: 0; padding-top: 4px; padding-bottom: 4px; } @media screen and (max-width: 767px) { .homepage__mainBlock__categoriesWrapper { padding: 10px 12px 20px 12px; } } .homepage__mainBlock__valuePropositionWrapper { background-color: #fff; padding: 60px; color: #4a4a4a; line-height: 30px; text-align: center; } @media screen and (min-width: 1368px) { .homepage__mainBlock__valuePropositionWrapper { display: block; } } .homepage__mainBlock__valuePropositionWrapper__title { font-size: 30px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 5px; } .homepage__mainBlock__valuePropositionWrapper__subtitle { font-size: 24px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } @media screen and (max-width: 767px) { .homepage__mainBlock__valuePropositionWrapper { display: none; } } .homepage__mainBlock__carouselWrapper { border-bottom: 1px solid #CCC; margin-top: 15px; padding: 5px 0; } @media screen and (min-width: 1368px) { .homepage__mainBlock__carouselWrapper { background-color: #fff; margin: 0; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepage__mainBlock__carouselWrapper { background-color: #fff; margin: 0; } } .homepage__specialOffersWrapper { margin: 50px 0 25px 0; } @media screen and (min-width: 1368px) { .homepage__specialOffersWrapper { margin: 75px 0; } } .homepage__bottomBlock { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; } @media screen and (min-width: 1368px) { .homepage__bottomBlock { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepage__bottomBlock { flex-direction: row; flex-wrap: wrap; justify-content: space-around; } } .homepage__bottomBlock__contentWrapper.-solidBox { background-color: #fff; } .homepage__bottomBlock__contentWrapper.-borderBox { border: 1px solid #CCC; } .homepage__bottomBlock__recentFontsWrapper, .homepage__bottomBlock__staffPicksWrapper, .homepage__bottomBlock__adsWrapper { margin-bottom: 50px; } @media screen and (min-width: 1368px) { .homepage__bottomBlock__recentFontsWrapper { width: 344px; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepage__bottomBlock__recentFontsWrapper { width: 344px; } } @media screen and (min-width: 1368px) { .homepage__bottomBlock__staffPicksWrapper { width: 614px; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepage__bottomBlock__staffPicksWrapper { width: 614px; } } @media screen and (max-width: 767px) { .homepage__bottomBlock__staffPicksWrapper { margin-top: 50px; } } .homepage__bottomBlock__adsWrapper__mlsBox, .homepage__bottomBlock__adsWrapper__adBox { width: 300px; } .homepage__bottomBlock__adsWrapper__mlsBox:not(:last-child), .homepage__bottomBlock__adsWrapper__adBox:not(:last-child) { margin-bottom: 50px; } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepage__bottomBlock__adsWrapper__mlsBox, .homepage__bottomBlock__adsWrapper__adBox { display: inline-block; margin-bottom: 0; vertical-align: top; } .homepage__bottomBlock__adsWrapper__mlsBox:not(:first-child), .homepage__bottomBlock__adsWrapper__adBox:not(:first-child) { margin-left: 25px; } .homepage__bottomBlock__adsWrapper__mlsBox:not(:last-child), .homepage__bottomBlock__adsWrapper__adBox:not(:last-child) { margin-right: 25px; } } @media screen and (max-width: 767px) { .homepage__bottomBlock__adsWrapper__mlsBox { width: 100%; } } @media screen and (max-width: 767px) { .homepage__bottomBlock__adsWrapper__adBox { margin-left: auto; margin-right: auto; } } 

.fontCardsContainer, .fontCardsMobileContainer { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; box-sizing: border-box; width: 100%; } #bundles .fontCardsContainer, #bundles .fontCardsMobileContainer { max-width: 1722px; margin: 0 auto; justify-content: space-between; } .fontCardsContainer *, .fontCardsMobileContainer * { box-sizing: border-box; } .fontCardsContainer #fontCardTemplate, .fontCardsMobileContainer #fontCardTemplate { display: none; } .fontCardsContainer .fontCard, .fontCardsMobileContainer .fontCard { width: 425px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #fff; border: 1px solid #eee; padding: 12px 15px 15px 15px; box-shadow: 0 1px 1px -1px #ddd; } .fontCardsContainer .fontCard .fcUpperBot, .fontCardsMobileContainer .fontCard .fcUpperBot { padding-top: 36px; font-size: 12px; } .fontCardsContainer .fontCard .fcUpperBot > div, .fontCardsMobileContainer .fontCard .fcUpperBot > div { display: inline-block; } .fontCardsContainer .fontCard .fcUpperBot .fcReason1, .fontCardsContainer .fontCard .fcUpperBot .fcReason2, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason1, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason2 { text-align: left; width: initial; height: initial; line-height: initial; } .fontCardsContainer .fontCard .fcUpperBot .fcPriceInfo, .fontCardsMobileContainer .fontCard .fcUpperBot .fcPriceInfo { display: inline-block; float: right; } #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { min-width: 370px; max-width: 560px; margin: 0 0 20px; width: 32.5%; } @media screen and (max-width: 1183px) { #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { width: calc(49% - 20px); width: 49%; } } @media screen and (max-width: 800px) { #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { margin: 0 auto 20px; float: none; width: 100%; } } @media screen and (max-width: 390px) { #bundles .fontCardsContainer .fontCard, #bundles .fontCardsMobileContainer .fontCard { min-width: 0; } } .fontCardsContainer .floaty, .fontCardsMobileContainer .floaty { float: left; } .fontCardsContainer .fcTitle, .fontCardsMobileContainer .fcTitle { padding-bottom: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 20px; font-size: 16px; } .fontCardsContainer .fcReason1, .fontCardsMobileContainer .fcReason1 { padding: 10px 0 10px 45px; background-repeat: no-repeat; background-position: left center; background-size: 30px; color: #333; position: relative; } .fontCardsContainer .fontCard.newFont .fcReason1, .fontCardsMobileContainer .fontCard.newFont .fcReason1 { padding: 0; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before { height: 15px; border-radius: 3px; color: white; font-size: 10px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; line-height: 15px; padding: 2px 5px; display: inline-block; padding-bottom: 3px; text-align: center; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before { background-color: #0090ff; content: "NEW"; } .fontCardsContainer .promotion .fcReason1, .fontCardsMobileContainer .promotion .fcReason1 { clear: left; } .fontCardsContainer .promotion .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before { background-color: #ff00c8; content: "SALE"; } .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { background-image: url("/s/images/font_cards/bulb.png"); background-repeat: no-repeat; content: ""; width: 22px; height: 21px; display: inline-block; vertical-align: middle; background-size: 22px 21px; } .fontCardsContainer .fontBundle .fcReason1:before, .fontCardsMobileContainer .fontBundle .fcReason1:before { background-image: url("/s/images/font_cards/icon-bundle.png"); background-repeat: no-repeat; content: ""; width: 19px; height: 21px; display: inline-block; vertical-align: middle; background-size: 19px 21px; position: relative; right: -3px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .fontCardsContainer .fontBundle .fcReason1:before, .fontCardsMobileContainer .fontBundle .fcReason1:before { background-image: url("/s/images/font_cards/icon-bundle@2x.png"); background-size: 19px 21px; } } .fontCardsContainer .fontCard .fcReason1 span, .fontCardsMobileContainer .fontCard .fcReason1 span { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; vertical-align: middle; } .fontCardsContainer .fontCard .fcReason1 span:first-child, .fontCardsMobileContainer .fontCard .fcReason1 span:first-child { margin-left: 5px; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1 span, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 span { margin-left: 0; vertical-align: super; } .fontCardsContainer .fontCard.bestSeller .fcReason1, .fontCardsMobileContainer .fontCard.bestSeller .fcReason1 { color: #111111; float: left; background: transparent url("/s/images/iconsets/myfonts/badge_star.png") no-repeat; padding-left: 20px; line-height: 0%; background-position: 0 -1px; clear: left; vertical-align: super; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 { background: none; padding: 6px 0 0 0; font-size: 11px; top: -1px; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1 .fcHnfRank, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 .fcHnfRank { float: left; display: inline; background-color: #0096ff; border-radius: 50%; height: 30px; min-width: 30px; font-size: 16px; color: white; text-align: center; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-top: -2px; width: 30px; padding-top: 4px; margin-top: -5px; } .fontCardsContainer .fontCard.select .fcReason1, .fontCardsMobileContainer .fontCard.select .fcReason1 { padding: 6px 0 0 0; } .fontCardsContainer .fcReason2, .fontCardsMobileContainer .fcReason2 { padding: 0; height: 21px; line-height: 21px; color: #333; } .fontCardsContainer .fcUpperLeft, .fontCardsMobileContainer .fcUpperLeft { width: 75%; } .fontCardsContainer .fcUpperRight, .fontCardsMobileContainer .fcUpperRight { width: 25%; } .fontCardsContainer .fcUpperBtns, .fontCardsMobileContainer .fcUpperBtns { float: right; width: 100%; } .fontCardsContainer .fcUpperBtns .follow.fcbtn, .fontCardsMobileContainer .fcUpperBtns .follow.fcbtn { display: none; } .fontCardsContainer .fcUpperBtns .favorite, .fontCardsMobileContainer .fcUpperBtns .favorite { background-image: url("/s/images/font_cards/favorite_md.png"); background-repeat: no-repeat; background-position: center center; background-color: #eee; background-size: 16px 14px; width: 30px; height: 28px; float: right; border-radius: 3px; } .fontCardsContainer .fcUpperBtns .favorite:hover, .fontCardsMobileContainer .fcUpperBtns .favorite:hover { background-image: url("/s/images/font_cards/favorite_md_selected.png"); } .fontCardsContainer .fcUpperBtns div.selected .favorite, .fontCardsMobileContainer .fcUpperBtns div.selected .favorite { background-image: url("/s/images/font_cards/favorite_md_selected.png"); } .fontCardsContainer .fcUpperBtns > li > div > a.follow:hover, .fontCardsMobileContainer .fcUpperBtns > li > div > a.follow:hover { background: #ddd; text-decoration: none; } .fontCardsContainer .fcUpperBtns > li, .fontCardsMobileContainer .fcUpperBtns > li { position: relative; float: none; } .fontCardsContainer .fcUpperBtns > li > div > a, .fontCardsMobileContainer .fcUpperBtns > li > div > a { float: right; margin-bottom: 8px; } .fontCardsContainer .fcUpperBtns .albumList, .fontCardsMobileContainer .fcUpperBtns .albumList { display: none; } .fontCardsContainer .fcUpperBtns .albumList a, .fontCardsMobileContainer .fcUpperBtns .albumList a { display: block; padding: 6px 10px; color: #555; } .fontCardsContainer .fcUpperBtns .albumList a:hover, .fontCardsMobileContainer .fcUpperBtns .albumList a:hover { display: block; text-decoration: none; background: #eee; } .fontCardsContainer .fcUpperBtns li:hover .albumList, .fontCardsMobileContainer .fcUpperBtns li:hover .albumList { display: block; background: #fff; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); line-height: 1.2em; padding: 5px 0; position: absolute; right: 0; text-align: left; white-space: nowrap; max-height: 150px; max-width: 164px; overflow: auto; } .fontCardsContainer .fontCard.foundry .fcUpperBtns .follow, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns .follow { display: inline-block; float: none; width: 85px; height: 30px; font-size: 16px; } .fontCardsContainer .fcPriceInfo, .fontCardsMobileContainer .fcPriceInfo { clear: right; text-align: right; display: none; } .fontCardsContainer .album_dropdown, .fontCardsMobileContainer .album_dropdown { display: none; } .fontCardsContainer .fcbtn, .fontCardsMobileContainer .fcbtn { display: block; padding: 5px 6px; border-radius: 3px; background-color: #eee; color: #444; font-size: 14px; margin: 0; height: 28px; } .fontCardsContainer .fontCard.font .fcUpperBtns > li.foundryOnly, .fontCardsMobileContainer .fontCard.font .fcUpperBtns > li.foundryOnly { display: none; } .fontCardsContainer .fontCard.foundry .fcUpperBtns > li.fontOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns > li.fontOnly { display: none; } .fontCardsContainer .fcLowerImage img, .fontCardsMobileContainer .fcLowerImage img { display: block; width: 100%; margin: 0 auto; } .fontCardsContainer .fontCard.foundry .fcLowerImage img, .fontCardsMobileContainer .fontCard.foundry .fcLowerImage img { max-height: 140px; } .fontCardsContainer .fcLowerFndryExp, .fontCardsMobileContainer .fcLowerFndryExp { margin-top: 4px; } .fontCardsContainer .fcLowerFndryExp a, .fontCardsMobileContainer .fcLowerFndryExp a { width: 22%; margin-right: 4%; float: left; } .fontCardsContainer .fcLowerFndryExp a img, .fontCardsMobileContainer .fcLowerFndryExp a img { display: block; width: 100%; } .fontCardsContainer .fcLowerOpt, .fontCardsMobileContainer .fcLowerOpt { margin-top: 10px; display: block; font-size: 12px; } .fontCardsContainer .fontCard.following .fcLowerOpt, .fontCardsMobileContainer .fontCard.following .fcLowerOpt { display: none; } .fontCardsContainer .fcRecChoice, .fontCardsMobileContainer .fcRecChoice { display: inline-block; padding: 1px 5px 3px 5px; margin-left: 0; border-radius: 3px; border: 1px solid #fff; background: #fff; -moz-transition: border 0.25s ease-in-out; -o-transition: border 0.25s ease-in-out; -webkit-transition: border 0.25s ease-in-out; transition: border 0.25s ease-in-out; } .fontCardsContainer .fcRecChoice.selected, .fontCardsContainer .fcRecChoice:hover, .fontCardsMobileContainer .fcRecChoice.selected, .fontCardsMobileContainer .fcRecChoice:hover { border: 1px solid #09f; text-decoration: none; } .fontCardsContainer .fcTitle, .fontCardsContainer .fcReason1, .fontCardsMobileContainer .fcTitle, .fontCardsMobileContainer .fcReason1 { width: 100%; float: left; text-align: center; margin-bottom: 5px; } .fontCardsContainer .fcReason1, .fontCardsContainer .fcReason2, .fontCardsMobileContainer .fcReason1, .fontCardsMobileContainer .fcReason2 { width: initial; text-align: left; position: relative; padding: 0; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before { height: 16px; font-size: 12px; margin-right: 5px; } .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { margin-right: 5px; } .fontCardsContainer .fcReason1 span, .fontCardsMobileContainer .fcReason1 span { display: none; } .fontCardsContainer .fcButtonWrapper, .fontCardsMobileContainer .fcButtonWrapper { float: right; text-align: center; } .fontCardsContainer button.add_to_album_toggle_client.only, .fontCardsMobileContainer button.add_to_album_toggle_client.only { padding: 5px 11px; height: 28px; } .fontCardsContainer button.add_to_album_toggle_client.only span, .fontCardsMobileContainer button.add_to_album_toggle_client.only span { font-size: 13px; line-height: normal; margin-right: 2px; } .fontCardsContainer button.add_to_album_toggle_client.only::-moz-focus-inner, .fontCardsMobileContainer button.add_to_album_toggle_client.only::-moz-focus-inner { padding: 0; border: 0; } .fontCardsContainer .fontCard.foundry, .fontCardsMobileContainer .fontCard.foundry { position: relative; padding: 27px 11px 22px 11px; } .fontCardsContainer .fontCard.foundry .fcReason1, .fontCardsContainer .fontCard.foundry .fcReason2, .fontCardsMobileContainer .fontCard.foundry .fcReason1, .fontCardsMobileContainer .fontCard.foundry .fcReason2 { display: none; } .fontCardsContainer .fontCard.foundry .fcButtonWrapper, .fontCardsMobileContainer .fontCard.foundry .fcButtonWrapper { float: none; } .fontCardsContainer .fontCard.foundry .fcUpperBtns li.foundryOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-left: 0; float: none; margin-top: 10px; } .fontCardsContainer .fontCard.foundry .fcTitle, .fontCardsMobileContainer .fontCard.foundry .fcTitle { display: none; } .fontCardsContainer .fontCard.foundry .fcUpper, .fontCardsMobileContainer .fontCard.foundry .fcUpper { margin-bottom: 24px; } .fontCardsContainer .fcLowerFndryExp a:nth-child(4), .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(4) { margin-right: 0; } .fontCardsContainer .fcLowerFndryExp a:nth-child(5) img, .fontCardsContainer .fcLowerFndryExp a:nth-child(6) img, .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(5) img, .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(6) img { display: none; } .fcUpper.clearfix { margin-bottom: 10px; } /* removed until Recommendations release -> make this not use an image .fontCardsContainer .fontCard.recommended .fcReason1 { background-image: url("/s/images/font_cards/reason_recommend.png"); background-size: 20px; } */ .ie .fontCardsContainer .fcUpperRight { display: block; width: 35%; } .ie .fontCardsContainer .fcUpperLeft { width: 65%; } .ie .fontCardsContainer .fcTitle { font-size: 24px; } @media screen and (min-width: 320px) { .fontCardsContainer .fcUpperRight, .fontCardsMobileContainer .fcUpperRight { display: block; width: 35%; } .fontCardsContainer .promotion .fcReason1, .fontCardsMobileContainer .promotion .fcReason1 { padding: 0; } .fontCardsContainer .fcUpperBtns > li, .fontCardsMobileContainer .fcUpperBtns > li { position: relative; float: right; margin-left: 8px; } .fontCardsContainer .fcUpperBtns > li > div > a, .fontCardsMobileContainer .fcUpperBtns > li > div > a { margin-bottom: 0; float: none; } .fontCardsContainer .fcUpperLeft, .fontCardsMobileContainer .fcUpperLeft { width: 65%; } .fontCardsContainer .fcLowerOpt, .fontCardsMobileContainer .fcLowerOpt { font-size: 14px; } .fontCardsContainer .fcRecChoice, .fontCardsMobileContainer .fcRecChoice { margin-left: 10px; } .fontCardsContainer .fcPriceInfo, .fontCardsMobileContainer .fcPriceInfo { display: block; } .fontCardsContainer .fontCard .fcReason1, .fontCardsMobileContainer .fontCard .fcReason1 { margin-bottom: 0; } .fontCardsContainer .fontCard.select .fcReason1, .fontCardsMobileContainer .fontCard.select .fcReason1 { padding: 0; } .fontCardsContainer .fontCard.newFont .fcReason1, .fontCardsMobileContainer .fontCard.newFont .fcReason1 { padding: 6px 0 0 0; } .fontCardsContainer .fcReason1 span, .fontCardsMobileContainer .fcReason1 span { display: inline-block; } .fontCardsContainer .fcReason1 .fcHnfRank, .fontCardsMobileContainer .fcReason1 .fcHnfRank { display: inline; } .fontCardsContainer .fcReason1 .fcReason2, .fontCardsMobileContainer .fcReason1 .fcReason2 { display: none; } .fontCardsContainer .fontCard .fcUpperBot, .fontCardsMobileContainer .fontCard .fcUpperBot { padding-top: 36px; } .fontCardsContainer .fontCard .fcUpperBot > div, .fontCardsMobileContainer .fontCard .fcUpperBot > div { display: inline-block; } .fontCardsContainer .fontCard .fcUpperBot .fcReason1, .fontCardsContainer .fontCard .fcUpperBot .fcReason2, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason1, .fontCardsMobileContainer .fontCard .fcUpperBot .fcReason2 { text-align: left; width: initial; height: initial; line-height: initial; } .fontCardsContainer .fontCard .fcUpperBot .fcPriceInfo, .fontCardsMobileContainer .fontCard .fcUpperBot .fcPriceInfo { display: inline-block; float: right; } .fontCardsContainer .fcTitle, .fontCardsMobileContainer .fcTitle { width: 65%; width: calc(100% - 50px); text-align: left; } .fontCardsContainer .fontCard.foundry, .fontCardsMobileContainer .fontCard.foundry { padding-top: 50px; } .fontCardsContainer .fontCard.foundry .fcButtonWrapper, .fontCardsMobileContainer .fontCard.foundry .fcButtonWrapper { float: right; position: absolute; top: 10px; right: 15px; } .fontCardsContainer .fontCard.foundry .fcUpperBtns li.foundryOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-left: 8px; float: right; margin-top: 6px; } .fontCardsContainer .fontCard.foundry .fcUpperBtns .follow, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns .follow { font-size: 13px; width: 73px; height: 26px; } .fontCardsContainer .fontCard.foundry .fcUpper, .fontCardsMobileContainer .fontCard.foundry .fcUpper { margin-bottom: 30px; } .fontCardsContainer .fcReason1, .fontCardsMobileContainer .fcReason1 { clear: both; margin-top: -6px; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .fontCardsContainer .fontCard.newFont .fcReason1, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1, .fontCardsMobileContainer .fontCard.newFont .fcReason1 { padding: 0; } .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { margin-right: 0; } .fontCardsContainer .fontCard .fcReason1 span, .fontCardsContainer .newFont .fcReason1:before, .fontCardsContainer .promotion .fcReason1:before, .fontCardsContainer .select .fcReason1:before, .fontCardsMobileContainer .fontCard .fcReason1 span, .fontCardsMobileContainer .newFont .fcReason1:before, .fontCardsMobileContainer .promotion .fcReason1:before, .fontCardsMobileContainer .select .fcReason1:before { vertical-align: middle; } } @media (min-width: 450px) and (max-width: 767px) { .respHomepage .fontCardsContainer .col1, .respHomepage .fontCardsContainer .col2 { width: 425px; margin: 0 auto; } } @media screen and (min-width: 768px) { .respHomepage .fontCardsContainer .fcTitle { width: 65%; width: calc(100% - 128px); } .respHomepage .fontCardsContainer .album_dropdown { display: block; } .respHomepage .fontCardsContainer .fontCard .fcReason2 { display: inline-block; } .fontCardsContainer .fontCard { width: 100%; } } @media screen and (min-width: 900px) { .respHomepage .fontCardsContainer .fcTitle { font-size: 18px; height: 24px; } } @media screen and (min-width: 1050px) { .fontCardsContainer .fontCard { margin-bottom: 20px; } } @media screen and (min-width: 1100px) { .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(5) img { display: inherit; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(4) { margin-right: 1%; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 0; } .respHomepage .fontCardsContainer .fcTitle { font-size: 20px; height: 26px; } .respHomepage .fontCardsContainer .fontCard .fcReason1 span, .respHomepage .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .respHomepage .fontCardsContainer .fontCard .fcReason2 { font-size: 14px; } .respHomepage .fontCardsContainer .fontCard .fcReason1 span, .respHomepage .fontCardsContainer .newFont .fcReason1:before, .respHomepage .fontCardsContainer .promotion .fcReason1:before, .respHomepage .fontCardsContainer .select .fcReason1:before { vertical-align: bottom; } .respHomepage .fontCardsContainer .bestSeller .fcReason1 span { vertical-align: middle; } .respHomepage .fontCardsContainer .fontCard.hotNewFonts .fcReason1 { top: -2px; } .respHomepage .fontCardsContainer .fontCard.foundry .fcUpperBtns .follow { font-size: 16px; width: 89px; height: 32px; } .respHomepage .fontCardsContainer .fcPriceInfo { font-size: 14px; } .fluid .fontCardsContainer .fontCard .fcUpperBot { font-size: 14px; } } @media screen and (min-width: 1350px) { .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(6) img { display: inherit; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(4), .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 2%; } .respHomepage .fontCardsContainer .fcLowerFndryExp a:nth-child(6) { margin-right: 0; } .respHomepage .fontCardsContainer .fcLowerFndryExp a { width: 15%; margin-right: 2%; } } @media screen and (min-width: 1984px) { .fontCardsContainer .fontCard { flex: 0 1 calc(50% - 10px); margin-bottom: 20px; width: calc(50% - 10px); } .fontCardsContainer .fontCard:nth-child(odd) { margin-right: 20px; } } div.fc-authenticate { background: white; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); font-size: 14px; padding: 15px; position: absolute; text-align: left; top: 28px; right: 0; width: 275px; z-index: 8; } div.fc-authenticate iframe.dropdown_login_frame { width: 250px; height: 155px; } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape), only screen and (max-width: 450px) { .fontCardsContainer .fontCard, .fontCardsMobileContainer .fontCard { width: 100%; margin: 0 0 16px 0; max-width: none; border: none; border-top: 1px solid #eee; } .fontCardsContainer .fontCard.font, .fontCardsMobileContainer .fontCard.font { padding: 0; } .fontCardsContainer .fontCard.font .fcUpper, .fontCardsMobileContainer .fontCard.font .fcUpper { padding: 14px 8px 0 8px; } .fontCardsContainer .fontCard.font .fcLower, .fontCardsMobileContainer .fontCard.font .fcLower { padding-bottom: 9px; } .fontCardsContainer .fontCard.foundry .fcTitle, .fontCardsMobileContainer .fontCard.foundry .fcTitle { display: none; } .fontCardsContainer .fontCard.bestSeller .fcReason1, .fontCardsMobileContainer .fontCard.bestSeller .fcReason1 { clear: none; } .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .fontCardsMobileContainer .fontCard.hotNewFonts .fcReason1 { line-height: 20px; } .respHomepage .fontCardsContainer .col1, .respHomepage .fontCardsContainer .col2, .respHomepage .fontCardsMobileContainer .col1, .respHomepage .fontCardsMobileContainer .col2 { width: 100%; margin: 0; max-width: none; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { .fontCardsContainer .fontCard.foundry .fcUpper, .fontCardsMobileContainer .fontCard.foundry .fcUpper { margin-bottom: 30px; } .fontCardsContainer .fontCard.foundry .fcUpperBtns li.foundryOnly, .fontCardsMobileContainer .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-top: 20px; } .fontCardsContainer .fcLowerFndryExp, .fontCardsMobileContainer .fcLowerFndryExp { width: 69%; margin: 0 auto; } .fontCardsContainer .fcLowerFndryExp a:nth-child(4), .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(4) { margin-right: 2%; } .fontCardsContainer .fcLowerFndryExp a:nth-child(5), .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 0; } .fontCardsContainer .fcLowerFndryExp a:nth-child(5) img, .fontCardsMobileContainer .fcLowerFndryExp a:nth-child(5) img { display: inherit; } .fontCardsContainer .fcLowerFndryExp a, .fontCardsMobileContainer .fcLowerFndryExp a { width: 18%; margin-right: 2%; } .fontCardsContainer .fontCard.font .fcUpper, .fontCardsMobileContainer .fontCard.font .fcUpper { padding: 14px 16px 0 16px; } .fontCardsContainer .fontCard.font .fcLowerImage img, .fontCardsMobileContainer .fontCard.font .fcLowerImage img { padding: 0 16px 14px 16px; } .fontCardsContainer .fcUpperBtns .favorite, .fontCardsMobileContainer .fcUpperBtns .favorite { width: 32px; height: 30px; background-size: 15px 13px; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .fontCardsContainer .fcUpperBtns .favorite { background-image: url("/s/images/font_cards/favorite_md@2x.png"); } .no-touchevents .fontCardsContainer .fcUpperBtns .favorite:hover, .fontCardsContainer .fcUpperBtns div.selected .favorite { background-image: url("/s/images/font_cards/favorite_md_selected@2x.png"); } .fontCardsContainer .fontCard.bestSeller .fcReason1 { background: transparent url("/s/images/iconsets/myfonts/badge_star@2x.png") no-repeat; background-size: 20px; background-position: 0 -1px; } .fontCardsContainer .select .fcReason1:before { background-image: url("/s/images/font_cards/bulb@2x.png"); } } .bb-toggle-view.selected { background-image: url("/s/images/font_cards/favorite_selected.png"); } .bb-toggle-view.follow { background-image: url("/s/images/font_cards/favorite.png"); } .bb-toggle-view { display: block; border-radius: 3px; background-color: #eee; color: #444; font-size: 14px; margin: 0; height: 28px; width: 36px; background-repeat: no-repeat; background-position: center center; float: right; } .homepageCarousel__mobile { display: none; } @media screen and (max-width: 767px) { .homepageCarousel__mobile { display: block; } } .homepageCarousel__mobile__item { width: 100%; } .homepageCarousel__desktop { position: relative; } @media screen and (max-width: 767px) { .homepageCarousel__desktop { display: none; } } .homepageCarousel__desktop-hidden { display: none; } .homepageCarousel__desktop__angleLeft, .homepageCarousel__desktop__angleRight { background-color: #fff; box-sizing: initial; cursor: pointer; height: 80px; opacity: 0.7; position: absolute; top: calc(50% - 60px); width: 40px; z-index: 10; } .homepageCarousel__desktop__angleLeft { border-bottom-right-radius: 80px; border-top-right-radius: 80px; } .homepageCarousel__desktop__angleRight { border-bottom-left-radius: 80px; border-top-left-radius: 80px; right: 0; } .homepageCarousel__desktop__svgRight, .homepageCarousel__desktop__svgLeft { height: 30px; padding-top: 26px; width: 15px; } .homepageCarousel__desktop__svgRight { padding-left: 15px; } .homepageCarousel__desktop__svgLeft { padding-left: 10px; } .homepageCarousel__desktop .owl-item:nth-child(3n+2) { margin-left: 5px; margin-right: 5px; } .homepageCarousel__desktop .owl-item:nth-child(3n+3) { margin-right: -10px; } .homepageCarousel__desktop .owl-theme .owl-controls .owl-page { display: inline-block !important; } .homepageCarousel__desktop .owl-theme .owl-controls .owl-page span { height: 24px; width: 24px; border: 1px solid #CCC; background-color: #f4f4f4; } .homepageCarousel__desktop .owl-theme .owl-controls .owl-page.active span { background-color: #CCC; } .homepageCarousel .fontCardsContainer .fontCard { margin-left: 0; margin-right: 0; padding: 10px; } @media screen and (min-width: 767px) and (max-width: 1200px) { .homepageCarousel .fontCardsContainer .fontCard .fcUpper .fcUpperBot > div { display: block; float: none; text-align: left; } .homepageCarousel .fontCardsContainer .fcPriceInfo { display: block; float: none; } } @media screen and (max-width: 767px) { .homepageCarousel .fontCardsMobileContainer .fontCard { width: 100%; } } @media screen and (min-width: 768px) { .homepageCarousel .fontCardsContainer .fcTitle { height: 29px; width: 65%; width: calc(100% - 126px); } .homepageCarousel .fontCardsContainer .fontBundle .fcTitle { width: 100%; } .homepageCarousel .fontCardsContainer .album_dropdown { display: block; } .homepageCarousel .fontCardsContainer .fontCard .fcReason2 { display: inline-block; } .homepageCarousel .fontCardsContainer .fontCard { width: 98%; } } @media (min-width: 450px) and (max-width: 767px) { .homepageCarousel .fontCardsMobileContainer .col1, .homepageCarousel .fontCardsMobileContainer .col2 { width: 425px; margin: 0 auto; } } @media screen and (min-width: 900px) { .homepageCarousel .fontCardsContainer .fcTitle { font-size: 16px; height: 29px; } } @media screen and (min-width: 1100px) { .homepageCarousel .fontCardsContainer .fcLowerFndryExp a:nth-child(5) img { display: inherit; } .homepageCarousel .fontCardsContainer .fcLowerFndryExp a:nth-child(4) { margin-right: 1%; } .homepageCarousel .fontCardsContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 0; } .homepageCarousel .fontCardsContainer .fcTitle { font-size: 16px; height: 26px; } .homepageCarousel .fontCardsContainer .fontCard .fcReason1 span, .homepageCarousel .fontCardsContainer .fontCard.hotNewFonts .fcReason1, .homepageCarousel .fontCardsContainer .fontCard .fcReason2 { font-size: 14px; } .homepageCarousel .fontCardsContainer .fontCard .fcReason1 span, .homepageCarousel .fontCardsContainer .newFont .fcReason1:before, .homepageCarousel .fontCardsContainer .promotion .fcReason1:before, .homepageCarousel .fontCardsContainer .select .fcReason1:before { vertical-align: bottom; } .homepageCarousel .fontCardsContainer .bestSeller .fcReason1 span { vertical-align: middle; } .homepageCarousel .fontCardsContainer .fontCard.hotNewFonts .fcReason1 { top: -2px; } .homepageCarousel .fontCardsContainer .fontCard.foundry .fcUpperBtns .follow { font-size: 16px; width: 89px; height: 32px; } .homepageCarousel .fontCardsContainer .fcPriceInfo { font-size: 14px; } } @media screen and (min-width: 1050px) { .homepageCarousel .fontCardsContainer .fontCard { margin-bottom: 0; } } @media screen and (min-width: 1350px) { .homepageCarousel .fontCardsContainer .fcLowerFndryExp a:nth-child(6) img { display: inherit; } .homepageCarousel .fontCardsContainer .fcLowerFndryExp a:nth-child(4), .homepageCarousel .fontCardsContainer .fcLowerFndryExp a:nth-child(5) { margin-right: 2%; } .homepageCarousel .fontCardsContainer .fcLowerFndryExp a:nth-child(6) { margin-right: 0; } .homepageCarousel .fontCardsContainer .fcLowerFndryExp a { width: 15%; margin-right: 2%; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape), only screen and (max-width: 450px) { .homepageCarousel .fontCardsMobileContainer .col1, .homepageCarousel .fontCardsMobileContainer .col2 { width: 100%; margin: 0; max-width: none; } } 

.homepageFontCategoriesWidget { display: flex; padding: 11px 0 10px 0; flex-wrap: wrap; justify-content: center; } @media screen and (max-width: 767px) { .homepageFontCategoriesWidget { padding: 12px 0 0 0; flex-direction: column; align-items: center; } } .homepageFontCategoriesWidget__text { margin-right: 60px; display: flex; justify-content: center; flex-direction: column; } @media screen and (max-width: 767px) { .homepageFontCategoriesWidget__text { align-items: center; flex-direction: row; margin-bottom: 11px; margin-right: 0; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepageFontCategoriesWidget__text { align-items: center; flex-direction: row; margin-bottom: 11px; margin-right: 0; } } .homepageFontCategoriesWidget__text h2 { margin: 0; color: #4a4a4a; font-size: 24px; font-weight: 500; line-height: 30px; } .homepageFontCategoriesWidget__text span { color: #4a4a4a; } @media screen and (max-width: 767px) { .homepageFontCategoriesWidget__text span { font-size: 24px; font-weight: 500; line-height: 30px; margin-left: 6px; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepageFontCategoriesWidget__text span { font-size: 24px; font-weight: 500; line-height: 30px; margin-left: 6px; } } .homepageFontCategoriesWidget__category { display: flex; } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepageFontCategoriesWidget__category { justify-content: center; flex-wrap: wrap; } } .homepageFontCategoriesWidget__category__first, .homepageFontCategoriesWidget__category__second { display: flex; flex-wrap: wrap; justify-content: center; } @media screen and (max-width: 767px) { .homepageFontCategoriesWidget__category__first, .homepageFontCategoriesWidget__category__second { flex-direction: column; } } .homepageFontCategoriesWidget__category__card { margin-left: 15px; } @media screen and (max-width: 767px) { .homepageFontCategoriesWidget__category__card { margin: 2.5px; } } @media screen and (min-width: 768px) and (max-width: 1367px) { .homepageFontCategoriesWidget__category__card { margin: 2.5px; } } .homepageFontCategoriesWidget__category__card a { display: flex; justify-content: center; align-items: center; height: 49px; width: 175px; border-radius: 4px; background-color: #fff; } @media screen and (max-width: 365px) { .homepageFontCategoriesWidget__category__card a { width: 153px; } } .homepageFontCategoriesWidget__category__cardImage--category1 { width: 119px; } @media screen and (min-width: 1368px) { .homepageFontCategoriesWidget__category__cardImage--category1 { margin: 0; } } @media screen and (max-width: 365px) { .homepageFontCategoriesWidget__category__cardImage--category1 { width: 106px; } } .homepageFontCategoriesWidget__category__cardImage--category2 { width: 128px; } @media screen and (max-width: 365px) { .homepageFontCategoriesWidget__category__cardImage--category2 { width: 112px; } } .homepageFontCategoriesWidget__category__cardImage--category3 { width: 75px; } @media screen and (max-width: 365px) { .homepageFontCategoriesWidget__category__cardImage--category3 { width: 68px; } } .homepageFontCategoriesWidget__category__cardImage--category4 { width: 113px; } @media screen and (max-width: 365px) { .homepageFontCategoriesWidget__category__cardImage--category4 { width: 120px; } } .homepageFontCategoriesWidget__category__cardImage--category5 { width: 130px; } @media screen and (max-width: 365px) { .homepageFontCategoriesWidget__category__cardImage--category5 { width: 114px; } } .homepageFontCategoriesWidget__category__cardImage--category6 { width: 80px; } @media screen and (max-width: 365px) { .homepageFontCategoriesWidget__category__cardImage--category6 { width: 72px; } } 

 #homepagePrototype { display: flex; font-size: 16px; } #homepagePrototype > * { box-sizing: border-box; margin: 0 0.5em; min-height: 100px; } #homepagePrototype > * .item { background: #fff; border: 1px solid #ddd; padding: 1em; } #homepagePrototype > * .item + .item { margin-top: 1em; } #homepagePrototype > * .item header { margin-bottom: 1em; position: relative; } #homepagePrototype > * .item header nav { position: absolute; top: 0; right: 0; text-align: right; } #homepagePrototype > * .item .listNumber { background: #09f; border-radius: 50%; box-sizing: border-box; color: #fff; display: inline-block; text-align: center; } #homepagePrototype a:hover { text-decoration: none; } #homepagePrototype #leftSidebar, #homepagePrototype #favoritesWidget { flex: 0 0 17.5em; } #homepagePrototype #leftSidebar > h3 { margin: 2em 0 1em; } #homepagePrototype #leftSidebar .item img.flag { height: 75px; width: 75px; margin: 10px 2px 0; } #homepagePrototype #leftSidebar .item button { margin-top: 0; } #homepagePrototype #sideFooter { position: relative; } #homepagePrototype #sideFooter nav.links a { color: #666; display: block; font-size: 14px; margin: 2.5em 0 0 1em; } #homepagePrototype #sideFooter nav.links a:hover { color: #444; } #homepagePrototype #sideFooter nav.social { display: table; margin: 3em 0 2em; text-align: center; width: 100%; } #homepagePrototype #sideFooter nav.social a { color: #ddd; display: table-cell; font-family: "Social-Network-Icons"; font-size: 28px; font-weight: normal; text-decoration: none; } #homepagePrototype #sideFooter nav.social a:hover { color: #aaa; } #homepagePrototype #sideFooter .copyright { color: #888; font-size: 12px; margin: 3em 0 0 1em; } #homepagePrototype #favoritesWidget .listNumber { font-size: 0.9em; width: 1.4em; height: 1.4em; } #homepagePrototype #favoritesWidget .item a { color: #444; display: block; font-size: 18px; } #homepagePrototype #favoritesWidget .item a + a { margin-top: 0.75em; } #homepagePrototype #favoritesWidget .backToTop { color: #888; display: block; margin: 0.5em 0.25em; } #homepagePrototype #favoritesWidget .backToTop img { height: 25px; width: 25px; position: relative; top: 0.5em; left: -0.25em; } #homepagePrototype #mainContent { flex: 1; } #homepagePrototype #mainContent .item .listNumber { width: 2.5em; height: 2.5em; padding: 0.5em; } #homepagePrototype #mainContent .item img.poster { width: 100%; } 

#jobs .content { float: right; } #jobs .sidebar { width: 25%; float: left; position: fixed; padding: 5px; font-family: "St-Ryde-Medium-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #jobs { padding-top: 30px; } #jobs .sidebar nav ul { display: none; } #jobs .sidebar nav ul a { background-color: green; font-family: 'St-Marie-Pro-Regular', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 0.8em; } #jobs .sidebar nav ul li { margin-left: 20px; } #jobs .sidebar nav a.selected + ul { display: block; } #jobs button { margin: 0 3px; pointer-events: none; } #jobs code { font-size: .8888em; } #jobs img { max-width: 100%; } #jobs table { border: 1px solid #ddd; border-collapse: collapse; font-family: 'RooneySans'; font-size: 0.7em; max-width: 100%; } #jobs table th.heading { border-bottom: 1px solid #ddd; font-size: 1.1666em; font-weight: bold; padding: 0.5em; text-align: left; } #jobs table th, #jobs table td { font-weight: normal; padding: 5px; text-align: left; vertical-align: top; } #jobs table th:nth-child(even), #help_docs table td:nth-child(even) { background: #f6f6f8; } #jobs table tr.grey { background: #f6f6f8; } #jobs table tr.grey th:nth-child(even), #help_docs table tr.grey td:nth-child(even) { background: #ededef; } #jobs table tr.grey td:nth-child(1) { border-top: 1px solid #ccc; } #jobs table td:nth-child(n+2) { font-family: 'VivaliaMediaIcons'; font-size: 2em; line-height: 0.8em; text-align: center; vertical-align: middle; border-bottom: 1px solid #ccc; } 

#licensing p { margin: 1.25em 0; line-height: 1.9; } #licensing h1, #licensing h2, #licensing h3 { color: #444; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #licensing h2 { font-size: 28px; margin: 1em 0 0.5em; } #licensing h3 { font-size: 18px; } #licensing #headcrumbs { margin-bottom: 20px; } #licensing .license-header, #licensing .license-short { background-position: top left; background-repeat: no-repeat; position: relative; width: 940px; } #licensing .license-header h1, #licensing .license-short h1 { color: rgba(255, 255, 255, 0.9); font-size: 60px; position: absolute; top: 18px; left: 110px; } #licensing .license-header { height: 358px; } #licensing .license-short { height: 115px; margin: 10px 0; } #licensing .lic-app-paygo { background-image: url("/s/images/licensing/app-paygo-sm.png"); display: inline-block; height: 24px; width: 19px; vertical-align: middle; } #licensing .lic-app { background-image: url("/s/images/licensing/app-sm.png"); display: inline-block; height: 21px; width: 20px; vertical-align: middle; } #licensing #desktop .license-header { background-image: url("/s/images/licensing/desktop-header.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #desktop .license-header { background-image: url("/s/images/licensing/desktop-header@2x.jpg"); background-size: 940px 358px; } } #licensing #desktop .license-short { background-image: url("/s/images/licensing/desktop-short.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #desktop .license-short { background-image: url("/s/images/licensing/desktop-short@2x.jpg"); background-size: 940px 115px; } } #licensing #webfont .license-header { background-image: url("/s/images/licensing/webfont-header.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #webfont .license-header { background-image: url("/s/images/licensing/webfont-header@2x.jpg"); background-size: 940px 358px; } } #licensing #webfont .license-short { background-image: url("/s/images/licensing/webfont-short.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #webfont .license-short { background-image: url("/s/images/licensing/webfont-short@2x.jpg"); background-size: 940px 120px; } } #licensing #digital-ads .license-header { background-image: url("/s/images/licensing/digital-ads-header.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #digital-ads .license-header { background-image: url("/s/images/licensing/digital-ads-header@2x.png"); background-size: 940px 358px; } } #licensing #digital-ads .license-short { background-image: url("/s/images/licensing/digital-ads-short.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #digital-ads .license-short { background-image: url("/s/images/licensing/digital-ads-short@2x.png"); background-size: 939px 116px; } } #licensing #app .license-header { background-image: url("/s/images/licensing/app-header.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #app .license-header { background-image: url("/s/images/licensing/app-header@2x.jpg"); background-size: 940px 358px; } } #licensing #app .license-short { background-image: url("/s/images/licensing/app-short.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #app .license-short { background-image: url("/s/images/licensing/app-short@2x.jpg"); background-size: 940px 120px; } } #licensing #ebook .license-header { background-image: url("/s/images/licensing/ebook-header.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #ebook .license-header { background-image: url("/s/images/licensing/ebook-header@2x.jpg"); background-size: 940px 358px; } } #licensing #ebook .license-short { background-image: url("/s/images/licensing/ebook-short.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #ebook .license-short { background-image: url("/s/images/licensing/ebook-short@2x.jpg"); background-size: 940px 120px; } } #licensing #server .license-header { background-image: url("/s/images/licensing/server-header.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #server .license-header { background-image: url("/s/images/licensing/server-header@2x.jpg"); background-size: 940px 358px; } } #licensing #server .license-short { background-image: url("/s/images/licensing/server-short.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing #server .license-short { background-image: url("/s/images/licensing/server-short@2x.jpg"); background-size: 940px 120px; } } #licensing .license-thumb { background-position: top left; background-repeat: no-repeat; width: 195px; height: 115px; margin: 10px 0; position: relative; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transition: opacity 200ms ease-in; -o-transition: opacity 200ms ease-in; -webkit-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; } #licensing .license-thumb h2 { color: rgba(255, 255, 255, 0.9); font-size: 24px; margin: 0; position: absolute; top: 12px; left: 52px; } #licensing .license-thumb:hover { filter: none; -webkit-filter: grayscale(0); } #licensing .license-thumb.desktop { background-image: url("/s/images/licensing/desktop-thumb.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .license-thumb.desktop { background-image: url("/s/images/licensing/desktop-thumb@2x.jpg"); background-size: 195px 115px; } } #licensing .license-thumb.webfont { background-image: url("/s/images/licensing/webfont-thumb.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .license-thumb.webfont { background-image: url("/s/images/licensing/webfont-thumb@2x.jpg"); background-size: 195px 115px; } } #licensing .license-thumb.digital-ads { background-image: url("/s/images/licensing/digital-ads-thumb.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .license-thumb.digital-ads { background-image: url("/s/images/licensing/digital-ads-thumb@2x.png"); background-size: 195px 115px; } } #licensing .license-thumb.app { background-image: url("/s/images/licensing/app-thumb.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .license-thumb.app { background-image: url("/s/images/licensing/app-thumb@2x.jpg"); background-size: 195px 115px; } } #licensing .license-thumb.ebook { background-image: url("/s/images/licensing/ebook-thumb.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .license-thumb.ebook { background-image: url("/s/images/licensing/ebook-thumb@2x.jpg"); background-size: 195px 115px; } } #licensing .license-thumb.server { background-image: url("/s/images/licensing/server-thumb.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .license-thumb.server { background-image: url("/s/images/licensing/server-thumb@2x.jpg"); background-size: 195px 115px; } } #licensing .content .description { min-height: 640px; } #licensing .content .side_column { margin-top: 20px; } #licensing .searchresultsWidget { clear: both; } #licensing #font-testdrive-new #font-options { float: right; } #licensing #font-testdrive-new .right-options { width: 100%; border-top: 1px solid #dddddd; padding: 0 5px; } #licensing #font-testdrive-new .image_checkbox { float: right; } #licensing .digital-ads-landing { text-align: center; color: #333; margin: 0 -10px -30px; } @media screen and (min-width: 768px) { #licensing .digital-ads-landing { margin: 0 -20px -30px; } } @media screen and (min-width: 1200px) { #licensing .digital-ads-landing { margin: 0 -2% -30px; margin: 0 calc(-2% - 1px) -30px; } } #licensing .digital-ads-landing .slice.gray { background-color: #f4f4f4; } #licensing .digital-ads-landing img { max-width: 100%; } #licensing .digital-ads-landing h1 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; max-width: 15em; margin: 0 auto 20px; font-size: 44px; } @media screen and (max-width: 640px) { #licensing .digital-ads-landing h1 { font-size: 36px; } } #licensing .digital-ads-landing h2 { font-size: 26px; margin-bottom: 40px; } #licensing .digital-ads-landing h3 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 0 auto 22px; font-size: 35px; } #licensing .digital-ads-landing h3 + p.intro { max-width: 27em; } #licensing .digital-ads-landing h4 { font-size: 17px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 4px; font-weight: 400; } #licensing .digital-ads-landing p { line-height: 1.4; margin: 0 auto 25px; font-size: 18px; } @media screen and (max-width: 640px) { #licensing .digital-ads-landing p { font-size: 16px; } } #licensing .digital-ads-landing p.intro { font-size: 24px; line-height: 1.4; max-width: 36em; margin: 0 auto 50px; } @media screen and (max-width: 640px) { #licensing .digital-ads-landing p.intro { font-size: 20px; } } #licensing .digital-ads-landing .content { max-width: 940px; margin: 0 auto; padding: 56px 15px; } #licensing .digital-ads-landing .content p.intro:first-child { max-width: 27em; } #licensing .digital-ads-landing .da-icon { float: left; margin-right: 12px; width: 50px; height: 50px; background: transparent url("/s/images/family/license-types-sprite.png?v=2") -315px 0px no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .digital-ads-landing .da-icon { background-image: url("/s/images/family/license-types-sprite@2x.png?v=2"); background-size: 475px 120px; } } @media screen and (max-width: 640px) { #licensing .digital-ads-landing .da-icon { float: none; margin: 0 auto 3px; } } #licensing .digital-ads-landing .bubble-holder { max-width: 57em; margin: 0 auto 40px; } @media screen and (max-width: 640px) { #licensing .digital-ads-landing .bubble-holder { margin-bottom: 0; } } #licensing .digital-ads-landing .bubble { padding: 18px; background-color: #fff; border: 1px dashed #979797; box-shadow: 3px 3px 10px rgba(51, 51, 51, 0.1); border-radius: 10px; position: relative; } #licensing .digital-ads-landing .bubble p { font-size: 14px; } #licensing .digital-ads-landing .bubble p:last-child { margin: 0; } #licensing .digital-ads-landing .bubble.left { text-align: left; float: left; margin-right: 20px; width: 49%; } #licensing .digital-ads-landing .bubble.left:after { content: ''; position: absolute; right: -12px; top: 50%; width: 12px; height: 27px; transform: translateY(-50%); background: transparent url("/s/images/licensing/bubble-dink.png") 0 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .digital-ads-landing .bubble.left:after { background-image: url("/s/images/licensing/bubble-dink.png"); background-size: 12px 27px; } } #licensing .digital-ads-landing .bubble.left + p { padding-top: 20px; } @media screen and (max-width: 640px) { #licensing .digital-ads-landing .bubble.left { width: auto; float: none; margin-right: 0; text-align: center; } #licensing .digital-ads-landing .bubble.left:after { bottom: -19px; top: auto; left: 50%; right: auto; transform: rotate(90deg) translateY(3px); } } #licensing .digital-ads-landing .bubble.bottom { width: 82%; margin: 0 auto 30px; box-shadow: 0 4px 11px rgba(51, 51, 51, 0.1); } #licensing .digital-ads-landing .bubble.bottom:after { content: ''; position: absolute; bottom: -19px; left: 50%; width: 12px; height: 27px; transform: rotate(90deg) translateY(3px); background: transparent url("/s/images/licensing/bubble-dink.png") 0 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #licensing .digital-ads-landing .bubble.bottom:after { background-image: url("/s/images/licensing/bubble-dink.png"); background-size: 12px 27px; } } #licensing .digital-ads-landing .bubble.bottom h4 { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; } #licensing .digital-ads-landing .bubble.bottom p { font-size: 30px; max-width: 10em; margin-bottom: 8px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #licensing .digital-ads-landing .bubble.bottom .border { border-top: 2px #eee solid; margin: 19px auto 0; padding-bottom: 40px; width: 85%; } #licensing .digital-ads-landing .bubble.with-badge:before { content: ''; background: transparent url("/s/images/licensing/badge.svg?v=2") 0 0 no-repeat; width: 99px; height: 99px; position: absolute; top: 60px; right: -35px; } #licensing .digital-ads-landing .two-col { max-width: 58em; margin: 0 auto; } #licensing .digital-ads-landing .two-col > div, #licensing .digital-ads-landing .two-col > li { display: inline-block; width: 49%; vertical-align: middle; } #licensing .digital-ads-landing .two-col.with-line > div:first-child { border-right: 1px solid #ccc; } #licensing .digital-ads-landing .two-col.with-bubbles > div, #licensing .digital-ads-landing .two-col.with-bubbles > li { vertical-align: top; } @media screen and (max-width: 640px) { #licensing .digital-ads-landing .two-col > div { width: 100%; display: block; margin-top: 20px; } #licensing .digital-ads-landing .two-col.with-line > div:first-child { border: none; } } #licensing .digital-ads-landing .three-col { margin: 0 auto; } #licensing .digital-ads-landing .three-col > div, #licensing .digital-ads-landing .three-col > li { display: inline-block; width: 33%; vertical-align: top; } #licensing .digital-ads-landing .three-col h4 { font-size: 21px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 5px; } #licensing .digital-ads-landing .three-col p { max-width: 16em; } @media screen and (max-width: 640px) { #licensing .digital-ads-landing .three-col > div, #licensing .digital-ads-landing .three-col > li { display: block; width: 100%; margin-top: 20px; } } #licensing .digital-ads-landing ol { list-style: none; } #licensing .digital-ads-landing ol.with-numbers { } #licensing .digital-ads-landing ol.with-numbers li:before { content: attr(data-number); color: #fff; background-color: #666; border-radius: 50%; line-height: 18px; font-size: 18px; width: 18px; height: 18px; padding: 5px; text-align: center; margin: 0 auto 10px; display: block; } #licensing .digital-ads-landing ol > li { margin: 0; } #licensing .digital-ads-landing a.button.large { font-size: 19px; padding: 9px 24px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #licensing .digital-ads-landing small { display: block; font-size: 15px; max-width: 20.8em; margin: 4px auto; } #licensing .digital-ads-landing ul.with-images { text-align: left; margin: 0 auto; display: inline-block; } #licensing .digital-ads-landing ul.with-images li > div { display: inline-block; vertical-align: middle; } #licensing .digital-ads-landing ul.with-images li > div:first-child { margin-right: 11px; } #licensing .digital-ads-landing ul.with-images li > div:last-child { max-width: 470px; } #licensing .digital-ads-landing ul.with-images h4 { font-size: 22px; } @media screen and (max-width: 780px) { #licensing .digital-ads-landing ul.with-images { display: block; text-align: center; } #licensing .digital-ads-landing ul.with-images li > div { display: block; margin: 0 auto; } #licensing .digital-ads-landing ul.with-images li > div:first-child { margin-right: auto; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixe1l-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #licensing .lic-app-paygo { background-image: url("/s/images/iconsets/myfonts/app-paygo.png"); display: inline-block; height: 33px; width: 26px; vertical-align: middle; } #licensing .lic-app { background-image: url("/s/images/iconsets/myfonts/app-paygo.png"); display: inline-block; height: 27px; width: 26px; vertical-align: middle; } } 

.minibrowser .character_gallery { position: relative; width: 100%; height: 52px; margin: 0px auto; z-index: 10; overflow: hidden; } .minibrowser .character_tile { position: absolute; height: 48px; width: 48px; } .minibrowser .character_tile img { width: 100%; height: 100%; border: 0px; } .minibrowser .what { padding-bottom: 6px; } .minibrowser .scrollbar { position: relative; width: 100%; height: 20px; margin: 2px auto; cursor: default; } .minibrowser .scrollbar .scroll_prev { position: absolute; left: 0px; top: 0px; width: 15px; height: 18px; cursor: default; } .minibrowser .scrollbar .scroll_next { position: absolute; right: 0px; top: 0px; width: 15px; height: 18px; cursor: default; } .minibrowser .scrollbar .scrollbar_background { position: absolute; left: 20px; right: 20px; top: 7px; height: 4px; background-color: #CCCCCC; cursor: default; } .minibrowser .scrollbar .gnubbel { position: absolute; width: 0%; height: 6px; top: -2px; background-color: #6699CC; font-size: 1px; border-width: 1px; border-style: solid; border-color: #99CCFF #336699 #336699 #99CCFF; cursor: default; } .minibrowser .browse_all { width: 100%; text-align: center; } .minibrowser .overlay { background-color: white; border: 1px solid black; position: absolute; display: inline; padding: 4px; font-size: smaller; text-align: center; overflow: hidden; z-index: 11; left: -2000px; } 

.mlsCard, .mlsCard__link, .mlsCard__image { width: 100%; height: auto; } 

div.album_block { float: left; width: 175px; margin: 24px; } div.album_tile { width: 158px; height: 158px; background: url(/s/w/my_albums/album_bg-blank.png) no-repeat; padding: 10px; cursor: pointer; } div.album_tile .album_inner { overflow: hidden; width: 150px; height: 150px; } div.album_tile .album_inner .album_letter { float: left; overflow: hidden; width: 48px; height: 48px; text-align: center; background-color: #f5f5f5; border: 1px solid #ffffff; } div.album_block .album_title { font-size: 16px; } div.album_block .font_count { font-size: 11px; clear: left; } div.album_block .edit_link { font-size: 11px; } span.delete_album { float: right; } div.album_title.fresh { color: gray; } 

#cart_page form.choose_currency { float: right; } #cart_page .pack_list { padding-top: 6px; clear: right; } #cart_page_header, #cart_page_footer { min-height: 180px; } #cart_message { border: 1px solid red; padding: 12px; margin: 24px 0px; background-color: #F5F5F5; } #cart_page_footer ul li img { position: relative; top: -1px; vertical-align: middle; margin-right: 6px; } #cart_page_footer h3.subtotal { float: right; text-align: right; } #cart_page_footer h3.subtotal { font-weight: normal; } #cart_page_footer span.cart_subtotal { font-size: 24px; } #cart_page_footer div.checkout { clear: right; text-align: right; float: right; margin-top: 25px; } #cart_params_form input.users { text-align: center; width: 3em; } #cart_giftcert_form { clear: left; } #cart_giftcert_form input[type=text] { width: 10em; } 

.privacylink { color: #0099ff; cursor: pointer; } #favorites .flField { margin-top: 15px; } @media screen and (min-width: 768px) { #favorites .flField { margin: 15px 0; } } 

table.my_orders_table { width: 100%; margin-bottom: 1em; } table.my_orders_table th { text-align: left; } table.my_orders_table td.failed { color: red; } table.my_orders_table th td.packagelist { padding-left: 1em; padding-bottom: 10em; } .my_orders_head input[type=submit] { height: 25px; } tr.my_orders_sublist td:first-child { padding: 0 0 2px 25px; } tr.my_orders_sublist td { padding: 0 0 2px 0; margin: 0 0 0 0; background-color: #EEEEEE; } td.my_order_redownload { margin: 0 0 0 0; height: 100%; } tr.my_orders_head td:first-child { padding: 4px 0 0 15px; } tr.my_orders_head td { background-color: #EEEEEE; border-top-style: solid; border-top-width: 4px; border-top-color: white; } tr.my_orders_head p { font-size: smaller; color: #666; } /* form.license_upgrade_form input.users_box { text-align: center; width: 4em; } */ form.license_upgrade_form ul li.note, form.license_upgrade_form p.note { font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: italic; color: #666; } table.license_upgrade_price_list { border: 1px solid #09F; } table.license_upgrade_price_list tr td { background-color: inherit; border-style: none; } table.license_upgrade_price_list tr th { background-color: inherit; border-style: none; text-align: right; font-weight: normal; } .downloadwebfontkit h2.first { margin-top: 0px; padding-top: 0px; } .downloadwebfontkit_title { font-size: 17px; line-height: 17px; font-weight: bold; color: #666666; } #Configure_kit_btn { background-color: #eca235; border-color: #ba8029; font-size: 14px; } #Configure_kit_btn:hover { background-color: #d4922f; } #Configure_kit_btn:active { background-color: #be7c19; } #Configure_kit_btn_digital_ads { background-color: #eca235; border-color: #ba8029; font-size: 14px; } #Configure_kit_btn_digital_ads:hover { background-color: #d4922f; } #Configure_kit_btn_digital_ads:active { background-color: #be7c19; } .downloadwebfontkit .option_text { font-size: 11px; padding-top: 5px; color: #666666; } #vieworder .vieworder_section { clear: both; } #vieworder h2.download img { vertical-align: middle; padding: 20px 5px 20px; } .kitformtxt { padding-bottom: 5px; } #vieworder .vieworder_section + .vieworder_section, .vwordwebconfigov { margin-top: 10px; padding-top: 15px; padding-bottom: 15px; border-top: 0px solid #999; background-color: #f5f5f5; } .votop { padding-top: 0px; margin-top: 0px; } .installertext { width: 550px; } #vieworder .vieworder_section_installer { clear: both; } #vieworder .vieworder_section_installer + .vieworder_section_installer { margin-top: 10px; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid #999; background-color: #ffffff; } #customize_webfont_kit_builder { display: none; } #customize_webfont_kit_builder_digital_ads { display: none; } #vieworder .main_column .hr { clear: right; width: 100%; height: 1px; border-top: 1px solid #999999; } #vieworder h3.vieworder { padding-top: 1em; clear: right; } .download_box { background: url("/s/images/iconsets/myfonts/box-web-74.png") 0 0 no-repeat; margin-right: 3px; float: right; margin-top: 8px; padding: 0 10px 0 85px; width: 310px; min-height: 82px; line-height: 16px; } .download_box_warning { padding-bottom: 8px; } .download_box:hover { text-decoration: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .download_box { background-image: url("/s/images/iconsets/myfonts/box-web-74@2x.png"); -moz-background-size: 74px 78px; -o-background-size: 74px 78px; -webkit-background-size: 74px 78px; background-size: 74px 78px; } } #vieworder .download_box_installer { margin-right: 3px; float: left; width: 190px; padding-right: 10px; margin-top: 8px; } #vieworder div.download_box div.installer_link, #vieworder div.download_box_installer div.installer_link { clear: left; } #vieworder div.download_box div.installer_link.multiple, #vieworder div.download_box_installer div.installer_link.multiple { padding-top: 12px; } #vieworder div.download_box div.installer_link.multiple a, #vieworder div.download_box_installer div.installer_link.multiple a { font-size: 20px; } #vieworder .download_box a, #vieworder .download_box a:visited, #vieworder .download_box a:hover , #vieworder .download_box_installer a, #vieworder .download_box_installer a:visited, #vieworder .download_box_installer a:hover { text-decoration: none; color: #3c0; font-size: 24px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .downloadwebfontkit { padding-left: 17px; padding-top: 5px; } #vieworder .download_box .warning { color: #cc0000; padding-left: 90px; font-size: 11px; vertical-align: top; } .download_box_warning { color: #000000; padding-left: 90px; font-size: 11px; vertical-align: top; } .redtxt { color: #b20000; font-weight: bold; } #vieworder .download_box img.box, #vieworder .download_box_installer img.box { width: 150px; height: 158px; padding-left: 16px; padding-bottom: 12px; } #vieworder .download_box div.installer_link img.arrow, #vieworder .download_box_installer div.installer_link img.arrow { width: 32px; height: 32px; float: left; position: relative; top: 11px; } #vieworder .download_box div.installer_link.multiple img.arrow, #vieworder .download_box_installer div.installer_link.multiple img.arrow { top: -2px; } #vieworder .download_box div.label, #vieworder .download_box_installer div.label { float: left; padding-left: 8px; } #vieworder .download_box p, #vieworder .download_box_installer p { clear: both; } ol#download_steps { margin-bottom: 20px; } ol#download_steps li { font-size: 15px; font-family: "RooneySans-Bold", "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding-bottom: 12px; } ol#download_steps li p { font-family: "RooneySans-Regular", "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } ol#download_steps li p b { font-family: "RooneySans-Bold", "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } ol#download_steps li + p:first-child { margin-top: 5px; } #vieworder div.order_updates { clear: right; border: 2px solid #09F; background-color: #E0F0FF; padding: 12px; margin-bottom: 12px; } #vieworder div.order_updates h3 { margin-top: 0; padding-top: 0; } #vieworder div.order_updates .pack_list_widget { width: 100%; } #order_receipt { font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } #receipt_itemization { width: 100%; border-style: solid; border-color: #999999; border-width: 1px 0px; margin-bottom: 8px; } #receipt_itemization td { vertical-align: top; } .subReceipt td.packname { width: 70px; } #receipt_itemization td.packname { font-weight: bold; padding-top: 8px; } #receipt_itemization td.price { text-align: right; padding-top: 8px; } #receipt_itemization td.itemization_details { font-size: smaller; } #receipt_totals { width: 100%; } #receipt_totals td { width: 50%; text-align: right; } #receipt_totals td.total { font-weight: bold; padding: 6px 0; } #receipt_totals td.payment_detail { font-size: smaller; word-break: break-all; } #printable_receipt { padding-top: 12px; text-align: right; } #personal_note_save { text-align: right; padding-top: 4px; } #personal_note_textarea { width: 100%; box-sizing: border-box; height: 8em; border: 1px solid black; background-color: white; } #installer_platform_check { font-size: larger; } .orderdetailrow { clear: left; background-color: #f5f5f5; padding: 5px 10px 5px 10px; margin-bottom: 6px; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } .orderquotenum { float: left; width: 500px; clear: left; border: solid 0px red; } .ordupdateavailable { float: right; width: 135px; margin-right: 115px; border: solid 0px red; background: url("/s/images/iconsets/myfonts/uparrow.png") center right no-repeat; } .ordernumlink { font-size: 14px; color: #0096FF; } .ordstat { padding-top: 1px; } .orderdateprice .failed { color: red; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .orderfontname { padding-top: 0px; font-weight: 600; width: 250px; float: left; border: solid 0px red; } .skulisctypes { float: left; width: 150px; border: solid 0px red; white-space: nowrap; } .skuliscrow { clear: left; padding-top: 10px; } .orderspecialmessage { float: left; width: 150px; clear: left; } .orderdateprice { float: right; width: 190px; text-align: right; border: solid 0px red; } #vieworder .fltleftpacklist.licensetypesm-classic, #vieworder .fltleftpacklist.licensetypesm-creative, #vieworder .fltleftpacklist.licensetypesm-business { float: none; margin: 0; } #vieworder .fltleftpacklist.licensetypesm-classic + .fltlefstdcart, #vieworder .fltleftpacklist.licensetypesm-creative + .fltlefstdcart, #vieworder .fltleftpacklist.licensetypesm-business + .fltlefstdcart { clear: left; margin-left: 0; } #vieworder .fltleftpacklist.licensetypesm-classic { width: 42px; height: 36px; } #vieworder .fltleftpacklist.licensetypesm-creative { width: 50px; height: 42px; } #vieworder .fltleftpacklist.licensetypesm-business { width: 108px; height: 36px; } #vieworder .cl-order h3 { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-top: 16px; } #vieworder .cl-order .asorderheader { display: none; } #vieworder .cl-order .fltlefstdcart { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-top: 6px; margin-left: 0; line-height: 20px; } #vieworder .cart_list .pack_header_row > .formats { vertical-align: top; padding-top: 25px; width: 100px; } #vieworder .cart_list .pack_header_row > .formats.cl-order { padding-top: 6px; } #my_orders_list .order-summary { font-size: 13px; width: 939px; padding-top: 13px; } #my_orders_list .order-view { padding: 8px 0px 0px 0px; font-size: 12px; } #my_orders_list #font-testdrive-new #font-options { float: right; } #my_orders_list .two_column_layout .main_column { width: 100%; } #my_orders_list.two_column_layout .side_column { float: right; } #my_orders_list #font-testdrive-new .right-options { width: 100%; border-top: 1px solid #dddddd; padding: 0 5px; } #my_orders_list #font-testdrive-new .image_checkbox { float: right; } #my_orders_list #font-testdrive-new .back-to-top { float: right; } #my_orders_list #font-testdrive-new #color-picker + .dropdown-modal { left: -281px; } #my_orders_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:before { margin-left: 246px; } #my_orders_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:after { margin-left: 247px; } #my_orders_list #font-testdrive-new #advanced-options + .dropdown-modal { left: -430px; } #my_orders_list #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 456px; left: 34px; } #my_orders_list #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 455px; left: 34px; } #my_orders_list #font-testdrive-new #display-options + .dropdown-modal { left: -175px; } #my_orders_list #font-testdrive-new #font-options .dis-options ul:first-child:before { margin-left: 251px; } #my_orders_list #font-testdrive-new #font-options .dis-options ul:first-child:after { margin-left: 250px; } #my_orders_list #font-testdrive-new #cust-text { width: 138px; } #my_orders_list #font-testdrive-new #font-slider { width: 85px; } #my_orders_list #font-testdrive-new #fit-width { width: 105px; padding: 0; padding-top: 7px; margin-left: 12px; } #my_orders_list #font-testdrive-new #font-size { margin-left: 0; } #my_orders_list #font-testdrive-new #font-options { margin-left: 0; } #my_orders_list #font-testdrive-new #fit-width.checkbox label { font-size: 14px; padding-left: 28px; background-position: -7px -103px; } #my_orders_list #font-testdrive-new #fit-width.checkbox label.checked { background-position: -7px -81px; } #my_orders_list #font-testdrive-new #sort-container { display: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #my_orders_list #font-testdrive-new #fit-width.checkbox label { background-position: -3px -198px; } #my_orders_list #font-testdrive-new #fit-width.checkbox label.checked { background-position: -3px -161px; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #my_orders_list #font-testdrive-new #font-slider { width: 88%; } #my_orders_list #font-testdrive-new .image_checkbox_mobile { display: none; } #my_orders_list #font-testdrive-new #display-options + .dropdown-modal ul li.option:nth-child(2) { border-top-style: solid; } #my_orders_list #font-testdrive-new #font-size #font-slider-wrap, #my_orders_list #font-testdrive-new #font-size > #fit-width { display: none; } #my_orders_list #font-testdrive-new #color-picker + .dropdown-modal { width: 325px !important; left: 0; } #my_orders_list #font-testdrive-new #advanced-options + .dropdown-modal { width: 300px !important; } #my_orders_list #font-testdrive-new #display-options + .dropdown-modal { width: 300px !important; left: 100px; } #my_orders_list #font-testdrive-new #text-selector .dropdown-inner { max-height: none !important; } #my_orders_list #font-testdrive-new .adv-options .dropdown-inner { max-height: none !important; } #my_orders_list #font-testdrive-new #font-options .dis-options ul:first-of-type:before { margin-left: 164px; } #my_orders_list #font-testdrive-new #font-options .dis-options ul:first-of-type:after { margin-left: 163px; } #my_orders_list #font-testdrive-new #cust-text { width: 100%; } } 

ul#my_quotes_list > li + li { padding-top: 24px; margin-top: 24px; border-top: 1px solid #999; } ul#my_quotes_list .expires_soon { color: #CC0000; } ul#my_quotes_list div.quote_total { text-align: right; font-size: 14px; } ul#my_quotes_list div.quote_total span.total_price { font-weight: bold; } ul#my_quotes_list form + a, ul#my_quotes_list form { display: inline-block; margin-left: 12px; } 

.recurring-billing-mgmt h2 { margin-bottom: 10px; padding-top: 20px; } .recurring-billing-mgmt h3 { padding-top: 20px; } .recurring-billing-mgmt button.button.red, .recurring-billing-mgmt button.button.red:hover { background-color: #C00; } .recurring-billing-mgmt .order { clear: both; margin: 0 0 10px; display: table; width: 100%; background: #F4F4F4; } .recurring-billing-mgmt .order:first-child { margin-top: 15px; } .recurring-billing-mgmt .order .row { display: table-row; } .recurring-billing-mgmt .order .cell { display: table-cell; padding: 15px; box-sizing: border-box; font-size: 16px; vertical-align: top; } .recurring-billing-mgmt .order .cell:nth-of-type(1) { width: 20%; } .recurring-billing-mgmt .order .cell:nth-of-type(2) { width: 55%; border-left: 2px solid #fff; border-right: 2px solid #fff; } .recurring-billing-mgmt .order .cell:nth-of-type(3) { width: 25%; text-align: right; vertical-align: bottom; } .recurring-billing-mgmt .order .cell span, .recurring-billing-mgmt .order .cell strong { display: block; } .my-renewals div.slice { background: #f4f4f4; padding: 25px 27px; margin-top: 20px; } .my-renewals div.slice > *:last-child { margin-bottom: 0; } .my-renewals div.slice h2 { font-size: 18px; margin-bottom: 26px; padding: 0; } .my-renewals div.slice p { font-size: 14px; } .my-renewals div.slice hr { border: none; margin: 20px 0; outline: none; display: block; clear: both; height: 1px; background-color: #d3d3d3; } .my-renewals div.slice h3.accordian { display: inline-block; cursor: pointer; margin-top: 16px; } .my-renewals div.slice h3.accordian:before { content: ' '; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #4a4a4a; margin-right: 6px; transition: transform 200ms; } .my-renewals div.slice h3.accordian.open:before { border-width: 10px 5px 0 5px; border-color: #4a4a4a transparent transparent transparent; } .my-renewals div.slice h3.accordian + ul { margin: 12px 0 0 15px; } .my-renewals div.slice h3.accordian + ul li { margin-bottom: 10px; } .cancel-sub { padding: 15px 30px 20px; } .cancel-sub textarea { resize: vertical; width: 100%; box-sizing: border-box; height: 75px; margin: 8px 0 12px; } .cancel-sub h2 { margin-bottom: 15px; } .cancel-sub p { font-size: 14px; } .cancel-sub p.cta { margin: 10px 0 20px; } .cancel-sub p.cta button { margin-right: 6px; } .cancel-sub p.cta button:last-child { margin-right: 0; } .cancel-sub ul.reasons { padding: 0; list-style: none; margin: 16px 0 8px; } .cancel-sub ul.reasons li { padding: 0 0 20px; } .cancel-sub ul.reasons input[type=checkbox] ~ textarea { display: none; } .cancel-sub ul.reasons input[type=checkbox]:checked ~ textarea { display: block; margin: 6px 0 0 26px; width: 95%; width: calc(100% - 26px); height: 120px; } .cancel-sub ul.reasons span.checkbox { width: 20px; position: absolute; } .cancel-sub ul.reasons label { cursor: pointer; position: relative; padding: 1px 0 0 26px; } 

#my_settings_table { width: 100%; color: #202020; font-size: 16px; margin-top: 50px; } #my_settings_table tr td { vertical-align: top; } #my_settings_table tr td.label { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-align: right; padding: 12px 0px 40px 0px; width: 250px; } #my_settings_table tr td.info { padding: 12px 0px 40px 70px; width: 410px; } #my_settings_table p.listHeader { margin-bottom: 20px; } #my_settings_table tr td.edit { text-align: right; padding: 0px 0px 40px 0px; width: 268px; } #my_settings_table a.button { text-align: center; display: block; background: #eee; width: 71px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 7px; color: inherit; margin-left: 20px; margin-top: 6px; position: relative; } #my_settings_table a.button.addcard { float: none; margin-top: 0px; margin-left: 0px; } #my_settings_table a.button.addcard.cards_present { margin-top: 10px; } #my_settings_table #my_settings_payments .edit_payment a.button { float: left; margin-top: 0px; margin-bottom: 0px; } #my_settings_table a#my_settings_delete_account.button { width: 240px; float: none; top: -6px; margin-left: 0px; } #my_settings_table a.button:hover, #my_settings_table a#my_settings_delete_account.button:hover, #my_settings_table input[type="reset"].cancel:hover, form.my_settings_popupform input[type="reset"]:hover { text-decoration: none; background: #ccc; } #my_settings_table input[type="reset"].cancel, form.my_settings_popupform input[type="reset"] { background: #eee; } #my_settings_table .error { color: red; } #my_settings_table div.floaty { float: left; padding-right: 12px; margin-bottom: 12px; } #my_settings_table div.floaty input { width: 120px; } #my_settings_table div.cleary { clear: left; margin-bottom: 12px; } #my_settings_table div.cleary input[type="text"] { width: 100%; max-width: 375px; } #my_settings_table div.cleary input[type="submit"] { margin: 10px 5px 0 0; } #my_settings_table div.cleary input[type="reset"] { margin: 10px 0 0 5px; } #my_settings_table div.floaty.cardNumber, #my_settings_table div.floaty.securityCode { margin-top: 5px; } #my_settings_table div.floaty.cardNumber input { width: 14em; } #my_settings_table div.floaty.securityCode input { width: 3em; } #my_settings_table div.cleary.name { padding-top: 12px; } #my_settings_table tr td ul { list-style-type: none; padding: 0px; margin: 0px; padding-left: 1em; } #my_settings_table tr li { padding-bottom: 7px; } #my_settings_table tr#my_settings_payments li { padding-bottom: 12px; } #my_settings_table tr#my_settings_payments .original_value, #my_settings_table tr#my_settings_payments .edit_payment { float: left; } #my_settings_table tr#my_settings_payments .original_value { width: 285px; } #my_settings_table tr#my_settings_payments .edit_payment { width: 354px; } #my_settings_table tr td ul li input[type="checkbox"] { margin-right: 20px; } #my_settings_table tr td ul li.addcard { position: relative; list-style-type: none; left: -1em; } #my_settings_table .my_settings_check, #my_settings_table #my_settings_payments ul { padding-left: 0px; } #my_settings_table form div.label { margin-bottom: 5px; } #my_settings_table tr#my_settings_newsletters a { font-style: italic; } #my_settings_delete_account { color: red; } form.my_settings_popupform a, form.my_settings_popupform input[type="submit"] { margin-right: 6px; } form.my_settings_popupform input[type="reset"] { margin-left: 6px; } #profile_picture_edit { text-align: right; } #my_settings_vat_id .warning { display: none; } #my_settings_vat_id.vat_warning .warning { display: block; } #my_settings_skyfonts_machines a.button { float: right; margin-top: -5px; } 

.confirmation h1.thanks { color: #333; font-size: 50px; margin: 30px 0 25px; text-align: center; } .confirmation #headcrumbs li.maincrumb { display: inline; } .confirmation #headcrumbs li.maincrumb h1 { color: #333; display: inline; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 12px; } .mlsMessage { text-align: center; width: 642px; margin: 35px auto 75px; } .mlsMessage button { background: #0096FF; border-radius: 5px; width: 195px; height: 50px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; letter-spacing: normal; margin: 20px 0; } .mlsMessage button:hover { background: #078adb; } .mlsMessage p { color: #393939; } .mlsMessage .title { width: 558px; margin: 0 auto; } .mlsMessage .mls-logo { width: 27px; height: 27px; background-size: 27px 27px; float: left; margin-right: 10px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .mlsMessage .mls-logo { background-image: url("/s/images/logo/MLS-icon@2x.png"); background-size: 27px 27px; } } .mlsMessage .tiles { position: absolute; } .mlsMessage .tiles.left { width: 254px; height: 385px; bottom: 120px; left: 0; background: transparent url("/s/images/sub_info/tiles-left.png") no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .mlsMessage .tiles.left { background-image: url("/s/images/sub_info/tiles-left@2x.png"); background-size: 254px 385px; } } .mlsMessage .tiles.right { width: 261px; height: 387px; bottom: 120px; right: 0; background: transparent url("/s/images/sub_info/tiles-right.png") no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .mlsMessage .tiles.right { background-image: url("/s/images/sub_info/tiles-right@2x.png"); background-size: 261px 387px; } } .digital-ad-confirmation { background-color: #f4f4f4; padding: 30px; text-align: center; margin-bottom: 40px; } .digital-ad-confirmation:before { content: ''; display: block; margin: 0 auto 6px; width: 50px; height: 50px; background: transparent url("/s/images/family/license-types-sprite.png?v=2") -315px 0px no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .digital-ad-confirmation:before { background-image: url("/s/images/family/license-types-sprite@2x.png?v=2"); background-size: 475px 120px; } } .digital-ad-confirmation h3 { font-size: 25px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 6px; } .digital-ad-confirmation p.sub { font-size: 14px; margin-bottom: 25px; } .digital-ad-confirmation ol { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; list-style: none; margin-bottom: 20px; text-align: left; max-width: 49em; margin: 0 auto 20px; justify-content: space-between; } .digital-ad-confirmation ol li { margin: 0; font-size: 14px; width: 44%; } #myfontsContainer.fluid-mls { width: 100%; padding: 0; } #myfontsContainer.fluid-mls .mls-middle { margin: 0 auto; } #myfontsContainer.fluid-mls #myfontsHeader { padding: 10px 2.8% 0; } #myfontsContainer.fluid-mls #headerContainer { right: 30px; } .header-img { background: url(/s/images/sub_info/o-c-bg.png) center/cover no-repeat; width: 100%; height: 772px; position: relative; margin-bottom: 4rem; } .mls-e-logo--icon { background: url(/s/images/sub_info/logo.png) no-repeat; } .left-header { color: #fff; position: absolute; top: 152px; left: 186px; font-family: 'Harmonia-Sans-Regular'; } .left-header .mls-e-logo--icon { width: 30px; display: inline-block; margin: 0 1rem 0 0; height: 30px; } .left-header .thanks-msg { font-size: 1.3rem; letter-spacing: 0.04rem; line-height: 1; margin: 1.6rem 0 1.1rem 0; } .left-header .thanks-msg span { vertical-align: middle; color: #f0e9ec; text-shadow: 0 -1px 2px #727272; font-size: 1.22rem; margin-top: -0.158rem; } .left-header h1 { font-size: 4.1rem; text-transform: uppercase; line-height: 1.2; color: #fff; font-family: 'Wolpe-Tempest-Black'; } .left-header ul > li { margin: 4px 0; padding: 0; } .left-header .b-button__item { font-size: 1rem; line-height: 1.24rem; font-family: 'Harmonia-Sans-Semibold'; color: #fff; background: #fb748b; margin: 0; padding: 1.2rem 3rem 1rem; border: 0; cursor: pointer; -webkit-transition: .2s; transition: .2s; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; width: fit-content; text-transform: uppercase; border-radius: 2px; position: relative; letter-spacing: 0.1rem; } .left-header .b-button__item:disabled { background: #fb748b; color: #fff7; } .left-header .b-button__item:hover { background: #fb748b; } .left-header .b-button__item[disabled]:focus, .left-header .b-button__item[disabled]:hover { background: #fb748b; color: #fff7; } .left-header .button-grp { position: relative; margin: 3rem 0 1rem; } .left-header .b-button__item.button-webfont-kit { color: #fff; border: 1px solid #fff; background: 0 0; padding: 1.16rem 2rem 0.9rem; margin-left: 1.5rem; } .left-header .b-button__item.button-webfont-kit:hover { text-decoration: none; } .left-header .b-button__item--download { color: #fff; text-decoration: none; } .left-header .control { display: block; position: relative; padding-left: 22px; margin-bottom: 10px; cursor: pointer; font-size: 0.85rem; color: #fff; line-height: 1; } .left-header .control input { position: absolute; z-index: -1; opacity: 0; } .left-header .control__indicator { position: absolute; top: 0; left: 0; height: 12px; width: 13px; background: transparent; border: 1px solid #fff; border-radius: 2px; } .left-header .control--radio .control__indicator { border-radius: 50%; } .left-header .control:hover input ~ .control__indicator { background: transparent; } .left-header .control input:focus ~ .control__indicator { background: transparent; } .left-header .control input:checked ~ .control__indicator { background: #fb748b; border: 1px solid #fb748b; } .left-header .control:hover input:not([disabled]):checked ~ .control__indicator { background: #fb748b; } .left-header .control input:checked:focus ~ .control__indicator { background: #fb748b; } .left-header .control input:disabled ~ .control__indicator { background: #e6e6e6; opacity: 0.6; pointer-events: none; } .left-header .control__indicator:after { content: ''; position: absolute; display: none; } .left-header .control input:checked ~ .control__indicator:after { display: block; } .left-header .control.uncheck input[type="checkbox"]:not(:checked) ~ span { color: #fb748b; } .left-header .control.uncheck input[type="checkbox"]:not(:checked) ~ span a { color: #fb748b; } .left-header .control input[type="checkbox"]:checked ~ span { color: #fff; } .left-header .control input[type="checkbox"]:checked ~ span a { color: #fff; } .left-header .control--checkbox .control__indicator:after { left: 0.2rem; top: 0; width: 4px; height: 8px; border: solid #3c3636; border-width: 0 2px 2px 0; transform: rotate(45deg); } .left-header ul { list-style-type: none; padding: 0; margin: 20px 0; } .left-header ul li a { color: #fff; text-decoration: underline; } .left-header ul li a:hover { color: #fff; text-decoration: underline; } .left-header .windows-text { font-size: 0.8rem; margin-top: 1rem; position: relative; line-height: 18px; padding-left: 0; color: #fefefe; } .left-header .windows-text a { color: #fb748b; text-decoration: underline; cursor: pointer; } .left-header .windows-text .mac-icon { background: url("/s/images/sub_info/apple.png") no-repeat; display: inline-block; width: 21px; height: 27px; } .left-header .windows-text .windows-icon { background: url("/s/images/sub_info/windows.png") no-repeat; display: inline-block; width: 22px; height: 24px; margin: 0 0.8rem 0 0.7rem; } .left-header .windows-text .content-app { display: inline-block; line-height: 18px; } @media screen and (max-width: 1430px) { .left-header { color: #fff; position: absolute; top: 130px; left: 75px; } .left-header h1 { font-size: 3.75rem; } } @media screen and (max-width: 990px) { .left-header .b-button__item.button-webfont-kit { padding: 0.7rem 1.8rem; margin-left: 0; display: block; } } @media screen and (max-width: 870px) { .header-img { height: 674px; } .left-header h1 { font-size: 2.5rem; } .left-header .b-button__item.button-webfont-kit { padding: 0.8rem 2.1rem 0.6rem; margin-left: 0; display: block; margin-top: 1rem; } } @media screen and (max-width: 638px) { .left-header { left: 30px; } .left-header h1 { font-size: 2.4rem; } } @media screen and (max-width: 320px) { .left-header { left: 15px; } } 

.mysubs_page h2 { font-size: 18px; margin-bottom: 1em; } .mysubs_page .sub_detail_row { background-color: #f5f5f5; padding: 20px 28px; } .mysubs_page .sub_detail_row h3 { font-size: 18px; margin-bottom: 1.2em; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .mysubs_page .sub_detail_row p { font-size: 14px; padding: 0; margin-bottom: 1.2em; } 

div.mytags table td { vertical-align: top; padding: 3px; line-height: 1.5; } div.mytags table td.letter { text-align: center; border-right: 1px solid #999999; } div.mytags table td.tags { text-align: left; } #update_tag_form input, #update_tag_form select { margin-top: 1ex; margin-left: 1ex; } ul.tag_alpha_list { margin: 0px; padding: 0px; list-style-type: none; } ul.tag_alpha_list li { display: inline; padding: 0px; padding-right: 1ex; white-space: nowrap; } 

#my_webfonts div.test_sample_settings { float: left; font-size: 36px; } #my_webfonts div.sample_listings { padding-bottom: 6px; } 

#newsletters .issue { float: left; margin-bottom: 12px; text-align: center; padding-right: 12px; } #newsletters .issue img { width: 232px; height: 232px; } input#newsletter_signup_email { width: 165px; } input#newsletter_signup_submit { width: 100%; } .newsletterWidget h3 { color: #333; } #newsletterLinks { padding: 10px 10px 8px 0; } .newsletterLabel { font-family: "RooneySans-Regular"; padding: 10px 0 14px 11px; float: left; } #newsletterLinks > a, #newsletterLinks .newsletterSubscribed { display: inline-block; padding-right: 0px; padding-left: 10px; font-size: 16px; border-left: 1px solid #333; } #newsletterLinks .newsletterSubscribed { display: none; } #newsletterLinks .newsletterSubscribed a { font-size: 12px; border-right: none; } #newsletterLinks > a:first-child { border-left: none; float: right; } .newsletterSidebar img { width: 100%; max-width: 100%; } #newsletterPreview .newsletterImage2x { display: none; } @media (min-width: 768px) { .newsletterLabel { padding: 0; margin-bottom: 18px; } #newsletterLinks > a, #newsletterLinks .newsletterSubscribed { font-size: 12px; } #newsletterLinks { padding: 4px 0 0 0; } } @media (min-width: 900px) { .newsletterLabel { line-height: 19px; } #newsletterLinks { line-height: 24px; padding: 0; } } @media (min-width: 1200px) { #sidebarLeft .newsletterWidget h3 { font-family: "RooneySans-Light"; } } @media (min-width: 1500px) { #responsiveHomepage h3.newsletterLabel { font-size: 20px; } } @media (max-width: 736px) { #newsletterLinks > a:first-child { padding-top: 10px; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) { #newsletterLinks > a:first-child { padding: 10px 4px 10px 0; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { .newsletterSidebar img { max-width: 305px; margin: 0 auto; } #newsletterPreview { text-align: center; clear: both; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #newsletterPreview .newsletterImage1x { display: none; } #newsletterPreview .newsletterImage2x { display: block; } } 

/* form.pack_list_filters { border-bottom: 1px solid #999; padding-bottom: 12px; } table.pack_list_filters { width: 100%; } table.pack_list_filters tr td:first-child { font-weight: bold; } table.pack_list_filters tr td { padding: 3px; vertical-align: top; } table.pack_list_filters ul li { display: inline; padding-right: 16px; white-space: nowrap; } table.pack_list_filters ul li img { position: relative; top: 3px; } */ div.side_column div.pack_filters h4 { margin-top: 12px; } div.side_column div.pack_filters ul { padding-left: 3px; } div.side_column div.autobox.whoa_box { background-color: #FFFFDD; border: 1px solid #E58C17; } div.pack_list { clear: both; } div.pack_list hr { margin-bottom: 20px; } table.pack_list { width: 100%; clear: both; } table.pack_list th { padding-top: 18px; background-color: white; font-weight: bold; } table.pack_list th, table.pack_list td { padding: 6px; text-align: left; vertical-align: middle; } table.pack_list th.remove, table.pack_list td.remove { text-align: center; } table.pack_list th.price, table.pack_list td.price { text-align: right; } table.pack_list td { background-color: #f4f4f4; border-top: solid 8px white; } table.pack_list tr.octopus_leg td { border-top: 1px solid #cccccc; } table.pack_list tr.octopus_head + tr.octopus_leg td, table.pack_list tr.octopus_leg.mefirst td { border-top: solid 8px white; } table.pack_list tr.octopus_head + tr.octopus_leg td { border-top: solid 8px white; } table.pack_list td.pack_header { vertical-align: top; } table.pack_list td.pack_header .pack_name { font-size: 16px; } table.pack_list td.pack_header .pack_id, table.pack_list td.pack_header .style_count, table.pack_list .usage_label, table.pack_list span.promo_tag, table.pack_list .notforsale { font-size: 12px; white-space: nowrap; color: #666666; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } table.pack_list td.pack_header .sku_list { font-size: 10px; color: #666666; } table.pack_list td.webfont_desc { text-align: right; } table.pack_list td.expando span.hackhackhack, table.pack_list td.license a, table.pack_list td.formats a { font-size: 10px; } table.pack_list td.license { padding-left: 0px; width: 120px; } table.pack_list a.change { visibility: hidden; } table.pack_list form input.users { width: 5em; } table.pack_list form div.submit_hint { position: absolute; z-index: 100; padding: 3px; background-color: white; border: 1px solid black; } table.pack_list tr.pack_webfont_row td, table.pack_list tr.pack_details_row td { border-top-style: none; } table.pack_list tr.pack_details_row td.pack_details { padding-right: 6px; border-top: 1px solid #E8E8E8; } table.pack_list div.style_listing_group_heading { font-weight: bold; margin-top: 12px; } table.pack_list div.style_listing { position: relative; overflow: hidden; padding-top: 12px; font-size: 10px; line-height: 18px; } table.pack_list div.style_listing div.style_icons { float: right; } table.pack_list div.style_listing div.style_icons img { margin-left: 4px; vertical-align: middle; } table.pack_list tr.warning td { background-color: #FFFFCC; } table.pack_list td.warning { font-weight: bold; color: red; } table.pack_list td.expando { text-align: center; vertical-align: top; padding-top: 0.7em; padding-right: 0; color: #666666; width: 1em; font-size: 13px; cursor: default; } /* table.pack_list ul.charsets { display: block; margin-top: 12px; } */ table.pack_list ul.charsets li { display: inline; margin: 0; padding: 0; padding-right: 2px; } table.pack_list ul.special_charsets li img { position: relative; top: 2px; } table.pack_list td.formats ul + form { margin-top: 6px; } table.pack_list td.formats ul li { white-space: nowrap; } table.pack_list td.download { white-space: nowrap; font-size: smaller; vertical-align: middle; } table.pack_list td.download a { color: black; text-decoration: none; } table.pack_list td.download a.nodownload:hover { text-decoration: underline; } table.pack_list td.download img.download { width: 18px; height: 18px; float: left; padding-top: 3px; padding-right: 2px; } table.pack_list td.addtocart { vertical-align: middle; } table.pack_list .add_to_cart img { vertical-align: middle; } table.pack_list td.desktop_plus_webfont { vertical-align: middle; } table.pack_list td.desktop_plus_webfont .caption { padding: 6px 0px; font-size: 85%; color: #333; } table.pack_list td.curly * { position: relative; top: -6px; font-size: 64px; color: #CCC; } table.pack_list td.addtocart ul.add_options li { display: inline-block; padding-right: 12px; } table.pack_list td.addtocart button.add_to_cart_button { min-width: 100px; } table.pack_list a.add_to_cart_client { float: none; } table.pack_list .album_dropdown { display: none; } table.pack_list td.addtocart button.add_to_cart_button, table.pack_list td.addtocart button.add_to_album_toggle { margin-top: 10px; } table.pack_list button.add_to_cart_button { border-radius: 3px; } table.pack_list td.addtocart .add_to_album_dropdown { top: 31px; right: 18px; } .fltleftpacklist { float: left; width: 25px; height: 25px; margin-top: 7px; margin-right: 3px; margin-bottom: 7px; } .fltlefstd { float: left; line-height: 14px; margin-top: 5px; margin-left: 8px; } .pklstfontsheader { width: 200px; } #family #packs_tab .cart_button_wrapper { float: none; margin-left: 0; } 

#myfontsContainer #package .header { margin: 0 auto 10px; } @media screen and (max-width: 600px) { #myfontsContainer #package .header { text-align: center; } } #myfontsContainer #package .header .title-info { float: left; padding-left: 0; margin-bottom: 10px; } @media screen and (max-width: 600px) { #myfontsContainer #package .header .title-info { float: none; width: 100%; text-align: center; } } #myfontsContainer #package .header .title-info h4 { display: inline-block; margin-right: 10px; } #myfontsContainer #package .header .title-info h4 + div { display: inline-block; } #myfontsContainer #package .header .title-info h1 { margin-bottom: 18px; line-height: 29px; font-size: 35px; } #myfontsContainer #package .header .title-info h1 + p { font-size: 18px; } #myfontsContainer #package .header .title-info h1 + p span.regular-price, #myfontsContainer #package .header .title-info h1 + p span.regularprice, #myfontsContainer #package .header .title-info h1 + p span.sale-price, #myfontsContainer #package .header .title-info h1 + p span.saleprice { font-weight: normal; } @media screen and (max-width: 900px) { #myfontsContainer #package .header .title-info h1 { font-size: 25px; margin-bottom: 10px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .header .title-info h1 { font-size: 18px; margin-bottom: 0; } } #myfontsContainer #package .header .title-info .subTitle { font-size: 14px; } @media screen and (max-width: 900px) { #myfontsContainer #package .header .title-info .subTitle { margin-top: 5px; font-size: 12px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .header .title-info .subTitle { font-size: 16px; } } #myfontsContainer #package .header .title-info .subTitle .author { float: left; margin-top: 3px; } @media screen and (max-width: 600px) { #myfontsContainer #package .header .title-info .subTitle .author { float: none; } } #myfontsContainer #package .header .title-info .subTitle .ac-follow-root { display: inline-block; line-height: 22px; margin-left: 6px; } @media screen and (max-width: 900px) { #myfontsContainer #package .header .title-info .subTitle .ac-follow-root { font-size: 12px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .header .title-info .subTitle .ac-follow-root { font-size: 10px; } } #myfontsContainer #package .header .title-info .subTitle .ac-follow-root a { line-height: 18px; padding: 2px 10px; width: initial; margin: 0; } @media screen and (max-width: 900px) { #myfontsContainer #package .header .title-info .subTitle .ac-follow-root a { line-height: 18px; font-size: 12px; height: 20px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .header .title-info .subTitle .ac-follow-root a { float: none; } } #myfontsContainer #package .header .bundle-info { width: 100%; text-align: right; margin-bottom: 10px; font-size: 16px; } @media screen and (max-width: 900px) { #myfontsContainer #package .header .bundle-info { font-size: 14px; margin-bottom: 8px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .header .bundle-info { font-size: 12px; text-align: center; } } #myfontsContainer #package .cart-buttons { float: right; width: auto; height: auto; } @media screen and (max-width: 600px) { #myfontsContainer #package .cart-buttons { float: none; } } #myfontsContainer #package .cart-buttons .cart_button_wrapper { margin: 0; } #myfontsContainer #package .cart-buttons .add_to_cart_button { font-size: 14px; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; padding: 11px 16px 13px; white-space: nowrap; } #myfontsContainer #package .package-detail { clear: both; position: relative; overflow: hidden; margin: 0 auto 15px; font-size: 14px; line-height: 20px; max-width: 775px; padding: 0 1.5rem; } @media screen and (max-width: 600px) { #myfontsContainer #package .package-detail { font-size: 12px; line-height: 16px; } } #myfontsContainer #package .package-detail h2 { font-size: 18px; } @media screen and (max-width: 600px) { #myfontsContainer #package .package-detail h2 { font-size: 16px; } } #myfontsContainer #package .package-detail p { max-width: 630px; } #myfontsContainer #package .package-detail img { max-width: 100%; margin: 0 auto 25px; display: block; } #myfontsContainer #package .package-detail .read-more-state { display: none; } #myfontsContainer #package .package-detail .fadeout { position: relative; bottom: 4em; height: 4em; background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, white 100%); } #myfontsContainer #package .package-detail .read-more-state:checked ~ .fadeout { display: none; } #myfontsContainer #package .package-detail .read-more-wrap { max-height: 8.5rem; transition: max-height 200ms ease; overflow: hidden; } #myfontsContainer #package .package-detail .read-more-state:checked ~ .read-more-wrap { max-height: 999em; padding-bottom: 4em; } #myfontsContainer #package .package-detail .read-more-state ~ .read-more-trigger:before { content: 'Read more...'; } #myfontsContainer #package .package-detail .read-more-state:checked ~ .read-more-trigger:before { content: ''; } #myfontsContainer #package .package-detail .read-more-trigger { background: none; border: none; color: #06c; cursor: pointer; margin-top: -4em; display: block; } @media screen and (max-width: 900px) { #myfontsContainer #package .package-detail .read-more-trigger { font-size: 14px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .package-detail .read-more-trigger { margin-top: -5em; font-size: 12px; } } #myfontsContainer #package .carousel { position: relative; overflow: hidden; white-space: nowrap; font-size: 0; margin-bottom: 20px; } #myfontsContainer #package .carousel li { float: none; display: inline-block; transition: all .5s ease-in-out; margin-right: 15px; } #myfontsContainer #package .carousel li:first-child { margin-left: -800px; margin-right: 0; } @media screen and (max-width: 900px) { #myfontsContainer #package .carousel li:first-child { margin-left: -600px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .carousel li:first-child { margin-left: -400px; } } #myfontsContainer #package .carousel li img { width: 800px; height: 400px; } @media screen and (max-width: 900px) { #myfontsContainer #package .carousel li img { width: 600px; height: 300px; } } @media screen and (max-width: 600px) { #myfontsContainer #package .carousel li img { width: 400px; height: 200px; } } #myfontsContainer #package .carousel .next, #myfontsContainer #package .carousel .previous { width: 34px; height: 64px; position: absolute; top: calc(50% - 32px); cursor: pointer; } @media screen and (max-width: 900px) { #myfontsContainer #package .carousel .next, #myfontsContainer #package .carousel .previous { width: 26px; height: 48px; top: calc(50% - 26px); } } @media screen and (max-width: 600px) { #myfontsContainer #package .carousel .next, #myfontsContainer #package .carousel .previous { width: 17px; height: 32px; top: calc(50% - 17px); } } #myfontsContainer #package .carousel .next { left: calc(100% - 32px); background: transparent url(/s/images/sub_discovery/carousel-right.png) 0 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #myfontsContainer #package .carousel .next { background-image: url("/s/images/sub_discovery/carousel-right@2x.png"); background-size: 32px 64px; } } @media screen and (max-width: 900px) { #myfontsContainer #package .carousel .next { left: calc(100% - 26px); background: transparent url(/s/images/sub_discovery/carousel-right.png) 0 0/26px 48px no-repeat; } } @media only screen and (max-width: 900px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 900px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 900px) and (min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min-resolution: 144dpi), only screen and (max-width: 900px) and (min-resolution: 2dppx) { #myfontsContainer #package .carousel .next { background-image: url("/s/images/sub_discovery/carousel-right@2x.png"); background-size: "26px 48px"; } } @media screen and (max-width: 600px) { #myfontsContainer #package .carousel .next { left: calc(100% - 17px); background: transparent url(/s/images/sub_discovery/carousel-right.png) 0 0/17px 32px no-repeat; } } @media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 600px) and (min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 144dpi), only screen and (max-width: 600px) and (min-resolution: 2dppx) { #myfontsContainer #package .carousel .next { background-image: url("/s/images/sub_discovery/carousel-right@2x.png"); background-size: "17px 32px"; } } #myfontsContainer #package .carousel .previous { background: transparent url(/s/images/sub_discovery/carousel-left.png) -1px 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #myfontsContainer #package .carousel .previous { background-image: url("/s/images/sub_discovery/carousel-left@2x.png"); background-size: 32px 64px; } } @media screen and (max-width: 900px) { #myfontsContainer #package .carousel .previous { background: transparent url(/s/images/sub_discovery/carousel-left.png) -1px 0/26px 48px no-repeat; } } @media only screen and (max-width: 900px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 900px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 900px) and (min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min-resolution: 144dpi), only screen and (max-width: 900px) and (min-resolution: 2dppx) { #myfontsContainer #package .carousel .previous { background-image: url("/s/images/sub_discovery/carousel-left@2x.png"); background-size: "26px 48px"; } } @media screen and (max-width: 600px) { #myfontsContainer #package .carousel .previous { background: transparent url(/s/images/sub_discovery/carousel-left.png) -1px 0/17px 32px no-repeat; } } @media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 600px) and (min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 144dpi), only screen and (max-width: 600px) and (min-resolution: 2dppx) { #myfontsContainer #package .carousel .previous { background-image: url("/s/images/sub_discovery/carousel-left@2x.png"); background-size: "17px 32px"; } } #myfontsContainer #package .package-samples { margin: 0 auto; max-width: 1160px; } #myfontsContainer #package .package-samples > li { padding: 20px 0; border-bottom: 1px solid #ddd; } #myfontsContainer #package .package-samples > li:first-child { border-top: 1px solid #ddd; } #myfontsContainer #package .package-samples > li:last-child { border-bottom: none; } #myfontsContainer #package .package-samples > li span { display: inline-block; margin-bottom: 10px; } #myfontsContainer #package .package-samples h4 { margin-bottom: 15px; } #myfontsContainer #package .package-samples .sample { overflow-x: hidden; display: block; position: relative; text-decoration: none; outline: none; } #myfontsContainer #package .package-samples .sample:after { position: absolute; right: 0; top: 0; bottom: 0; width: 32px; content: ""; } #myfontsContainer #package .package-samples .sample img { max-height: 64px; } #myfontsContainer #package .cart_button_wrapper { float: right; margin-left: 10px; } #myfontsContainer .ac-follow-root { position: relative; } #myfontsContainer .ac-follow-root .fcbtn { padding: 5px; border-radius: 3px; background-color: #eee; color: #4a4a4a; font-size: 12px; margin: 0 0 5px 0; height: 18px; text-decoration: none; text-align: center; width: 68px; float: left; } #myfontsContainer .ac-follow-root .fcbtn:hover { background: #ddd; } #popup_box .buying-choices { min-height: initial; height: initial; } #popup_box .buying-choices .licenses { padding: 1.3em 1.5em; background-color: #f5f5f5; float: left; } #popup_box .buying-choices .licenses .buying-choices li { display: inline-block; float: left; width: 100%; } #popup_box .buying-choices .licenses .buying-choices li .licensing-info { float: none; } #popup_box .buying-choices .licenses .buying-choices li .licensing-info .dropdown li { display: list-item; } #popup_box .buying-choices .web-desktop-combo { margin-bottom: 27px; } @media screen and (max-width: 600px) { .fluid ~ #popup_box .buying-choices .web-desktop-combo > :first-child, .fluid ~ #popup_box .buying-choices .web-desktop-combo > :last-child { border-right: none; border-bottom: 2px solid #fff; float: none; width: auto; } .fluid ~ #popup_box .buying-choices .web-desktop-combo > :last-child { text-align: center; } .fluid ~ #popup_box .buying-choices .web-desktop-combo > :last-child .price { font-size: 20px; } .fluid ~ #popup_box .buying-choices .web-desktop-combo button { max-width: 225px; margin: 0 auto; } } @media screen and (max-width: 450px) { .fluid ~ #popup_box .buying-choices .web-desktop-combo > :first-child { text-align: center; } .fluid ~ #popup_box .buying-choices .web-desktop-combo > :first-child h2 { font-size: 18px; margin-bottom: 4px; } .fluid ~ #popup_box .buying-choices .web-desktop-combo > :first-child h2 + p { font-size: 15px; } .fluid ~ #popup_box .buying-choices .web-desktop-combo .combo-icon { margin: 0 auto; float: none; } } @media screen and (max-width: 450px) { .fluid ~ #popup_box .buying-choices .buying-choices { padding: 0; position: relative; } .fluid ~ #popup_box .buying-choices .buying-choices label { float: none; width: 100%; } .fluid ~ #popup_box .buying-choices .buying-choices .custom-select { width: auto; float: none; } .fluid ~ #popup_box .buying-choices .buying-choices .custom-select .current-value { text-align: center; } .fluid ~ #popup_box .buying-choices .buying-choices .custom-select .dropdown { left: 0; right: auto; min-width: 300px; width: 75vw; } .fluid ~ #popup_box .buying-choices .buying-choices .select-font-format { position: absolute; top: -9px; left: 160px; } .fluid ~ #popup_box .buying-choices .buying-choices .licensing-info { width: auto; } .fluid ~ #popup_box .buying-choices .buying-choices .license-quantity-unlimited { float: none; width: auto; margin-top: 0; } .fluid ~ #popup_box .buying-choices .buying-choices > li { display: block; margin-bottom: 20px; } .fluid ~ #popup_box .buying-choices .buying-choices p { font-size: 13px; } .fluid ~ #popup_box .buying-choices .summary > :first-child { float: none; width: 100%; text-align: center; border-right: none; border-bottom: 2px solid #fff; } .fluid ~ #popup_box .buying-choices .font-cart { float: none; width: 100%; text-align: center; box-shadow: none; } .fluid ~ #popup_box .buying-choices .font-cart .price { font-size: 20px; padding-bottom: 0; } .fluid ~ #popup_box .buying-choices .font-cart .button { max-width: 225px; margin: 0 auto; } } @media screen and (max-width: 375px) { .fluid ~ #popup_box .buying-choices { padding: 10px; } .fluid ~ #popup_box .buying-choices p { font-size: 14px; } } #popup_box .buying-choices .accordian.open .contents { max-height: 200px; } #popup_box .buying-choices .accordian .contents { transition: max-height .5s linear; max-height: 0; margin-top: 15px; } #popup_box .buying-choices .summary { margin-top: 10px; background-color: #f5f5f5; display: inline-block; width: 100%; } #popup_box .buying-choices .summary * { box-sizing: border-box; } #popup_box .buying-choices .summary div:not(.pricingGetQuoteBlock__contentWrapper):first-child { border-right: 2px solid #fff; width: 72%; float: left; padding: 1.3em 1.5em; } #popup_box .buying-choices .summary .font-cart:not(.pricingGetQuoteBlock) .font-price-info { width: 100%; } #popup_box .buying-choices .summary .pricingGetQuoteBlock__button { font-size: 20px; } /* version b // Global SASS @import "../../s/css/global-sass"; // Package SASS #package { .header { margin: 0 auto; padding: 0 10px 20px; margin-bottom: 60px; border-bottom: 1px solid #f1f1f1; } .title-info { float: left; padding-left: 10px; @include rwd(767,max) { float: none; text-align: center; } h4 { display: inline-block; margin-right: 10px; & + div { display: inline-block; } } h1 + p { font-size: 18px; span.regular-price, span.regularprice, span.sale-price, span.saleprice { font-weight: normal; } } } #cart_buttons { float: right; padding-right: 10px; margin-top: 13px; width: auto; height: auto; @include rwd(767,max) { clear: both; text-align: center; float: none; .cart_buttons_buyit_button { float: none; text-align: center; display: inline-block; } .cart_button_wrapper { margin-left: 0; } } } .package-detail { clear:both; position: relative; max-width: 850px; max-height: 1130px; overflow: hidden; margin: 0 auto; will-change: height; transition: max-height 200ms; p { margin: 0 auto 25px; max-width: 630px; } img { max-width: 100%; margin: 0 auto 25px; display: block; } .read-more { text-indent: -999em; font-family: $RooneySans-Medium; position: absolute; top: 1022px; left: 0; right: 0; text-decoration: none; outline: none; padding: 70px 0 20px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, white 66%, white 100%); &:before { content:' '; position: absolute; background: transparent url("/s/images/package/read-more.png") 0 0 no-repeat; @include retina("/s/images/package/read-more@2x.png", 64px, 34px); cursor: pointer; width: 64px; height: 34px; bottom: 20px; left: 50%; margin-left: -32px; } } &.show-all { max-height: 100%; .read-more { display: none; } } } .package-samples { margin: 40px auto; & > li { padding: 20px 0; border-bottom: 1px solid #ddd; &:last-child { border-bottom: none; } } h4 { margin-bottom: 15px; } .sample { overflow-x: hidden; display: block; position: relative; text-decoration: none; outline: none; &:after { position: absolute; right: 0; top: 0; bottom: 0; width: 32px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); content: ""; } img { max-height: 64px; } } } .cart_button_wrapper { float: right; margin-left: 10px; } } */ 

#performanceWidget { max-height: 300px; max-width: 350px; position: fixed; bottom: 0px; left: 0px; border: 1px solid #000000; padding: 3px; background-color: #FFFFAA; z-index: 400; font-size: smaller; overflow: auto; } #performanceWidget .title { cursor: default; font-weight: bold; margin-right: 2em; } #performanceWidget table { margin: 1px; padding: 0px; } #performanceWidget table tr th { margin: 0px; padding: 0px 3px; text-align: left; border-left: 1px solid black; } #performanceWidget table tr td { margin: 0px; padding: 0px 3px; border-left: 1px solid black; white-space: nowrap; } #performanceWidget .minimize { font-family: sans-serif; font-weight: bold; cursor: default; position: absolute; padding: 1px; margin: 2px; top: 0px; right: 0px; } #performanceWidget .minimize:hover { color: red; } 

#person_page h1 { float: left; margin: 0 30px 0 0; height: 60px; } #person_page .title_wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; -webkit-align-items: center; justify-content: flex-start; -webkit-justify-content: flex-start; } #person_page #person_always { margin-top: 18px; } #person_page #person_info { padding-top: 24px; } #person_page .fc-authenticate { top: 45px; } #person_page .infobox { float: left; width: 224px; margin-right: 24px; } #person_page .infobox.infobox_3 { margin-right: 0px; } #person_page .infobox ul { margin-top: 8px; border-top: 1px solid #CCC; } #person_page .infobox ul li { margin-top: 8px; font-size: smaller; } #person_font_list { clear: both; padding-top: 24px; } #person_font_list .columns { margin-top: 8px; border-top: 1px solid #CCC; padding-top: 24px; } #person_font_list #font-testdrive-new .right-options { width: 100%; border-top: 1px solid #dddddd; padding: 0 5px; } #person_font_list #font-testdrive-new #font-options { float: right; } #person_font_list #font-testdrive-new .image_checkbox { float: right; } #person_font_list #font-testdrive-new .back-to-top { float: right; } #person_font_list #font-testdrive-new #color-picker + .dropdown-modal { left: -281px; } #person_font_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:before { margin-left: 246px; } #person_font_list #font-testdrive-new #font-options .dropdown-modal #color-toggle:after { margin-left: 247px; } #person_font_list #font-testdrive-new #advanced-options + .dropdown-modal { left: -430px; } #person_font_list #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 456px; left: 34px; } #person_font_list #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 455px; left: 34px; } #person_font_list #font-testdrive-new #display-options + .dropdown-modal { left: -175px; } #person_font_list #font-testdrive-new #font-options .dis-options ul:first-child:before { margin-left: 251px; } #person_font_list #font-testdrive-new #font-options .dis-options ul:first-child:after { margin-left: 250px; } #person_page .title_wrapper .ac-follow-root { position: relative; } #person_page .title_wrapper a.fcbtn { padding: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #eee; color: #4A4A4A; font-size: 14px; height: 20px; text-decoration: none; text-align: center; width: 68px; float: left; margin-top: 15px; } #person_page .title_wrapper a.fcbtn:hover { background: #ddd; } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #person_font_list #font-testdrive-new .dropdown-modal { left: 0; } #person_font_list #font-testdrive-new #color-picker + .dropdown-modal, #person_font_list #font-testdrive-new #advanced-options + .dropdown-modal, #person_font_list #font-testdrive-new #display-options + .dropdown-modal { left: 0; } } 

#popDesignList li.topDesigner { display: block; padding: 10px; border: 1px solid #eee; margin-bottom: 15px; background: #fff; box-shadow: 0px 1px 1px -1px #ddd; } #popDesignList li.topDesigner .topDesignerTop { margin-bottom: 10px; } #popDesignList li.topDesigner .topDesignerTop a { padding: 4px 0; display: inline-block; } #popDesignList li.topDesigner .topDesignerTop .followButton { float: right; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #eee; color: #444; padding: 4px 6px; } #popDesignList li.topDesigner .topDesignerTop .followButton:hover { text-decoration: none; background: #ddd; } #popDesignList li.topDesigner .designerExamples img { width: 32%; margin-left: 1%; } 

#popDesignListResp { margin: 15px 6px 8px 6px; } #popDesignListResp li.topDesigner { border: 1px solid #eee; margin-bottom: 15px; background: #fff; box-shadow: 0 1px 1px -1px #ddd; position: relative; } #popDesignListResp li.topDesigner .topDesignerTop { position: absolute; float: left; padding: 15px 0 10px 15px; } #popDesignListResp li.topDesigner .topDesignerTop .followButton { margin-top: 20px; position: relative; width: 100px; float: left; } #popDesignListResp li.topDesigner .topDesignerTop a { padding: 4px 0; display: inline-block; } #popDesignListResp li.topDesigner .topDesignerTop a.fcbtn { padding: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #eee; color: #444; font-size: 13px; margin: 0; height: 25px; text-decoration: none; text-align: center; width: 68px; line-height: 15px; } #popDesignListResp li.topDesigner .topDesignerTop a.fcbtn:hover { background: #ddd; } #popDesignListResp li.topDesigner .designerExamples img { width: 24.25%; margin-left: 1%; } #popDesignListResp li.topDesigner .designerExamples { position: absolute; clear: both; z-index: 4; padding: 14px 14px 12px 14px; } #popDesignListResp .headshot { background-repeat: no-repeat; background-position: right; background-size: 60%; height: 100%; width: 100%; float: right; } #popDesignListResp h3 { font-size: 16px; display: inline-block; margin-right: 3px; line-height: 120%; font-family: "RooneySans-Medium"; } #popDesignListResp .fc-authenticate { left: 0; top: 23px; } #popDesignListResp li.topDesigner .designerExamples a:first-child img { margin-left: 0; } #popDesignListResp .topDesigner { position: relative; width: 100%; border: 1px solid #000; } #popDesignListResp .topDesignerWrapper { top: 0; bottom: 0; right: 0; left: 0; position: absolute; } #popDesignListResp li.topDesigner .topDesignerName a { padding: 0; color: #333; } #popDesignListResp li.topDesigner .topDesignerName a:hover { color: #09f; } #popDesignListResp .headshotWrapper { float: right; position: relative; width: 75%; padding-right: 14px; height: 83%; z-index: 3; } #popDesignListResp .topDesigner:after { padding-top: 65%; display: block; content: ''; } .popDesignLabel { margin-left: 13px; font-family: "RooneySans-Regular"; } @media (min-width: 450px) { #popDesignListResp li.topDesigner .topDesignerTop .followButton { margin-top: 41px; } } @media (min-width: 768px) { #popDesignListResp li.topDesigner .designerExamples a:nth-child(4) img { display: none; } #popDesignListResp li.topDesigner .designerExamples img { width: 32.65%; margin-left: 1%; } .popDesignLabel { margin-left: 0; } #popDesignListResp { margin: 15px 0 0 0; } #popDesignListResp .topDesigner:after { padding-top: 80%; } #popDesignListResp .headshot { background-size: 75%; } #popDesignListResp li.topDesigner .topDesignerTop { padding: 14px 0 14px 14px; } #popDesignListResp li.topDesigner .topDesignerTop .followButton { margin-top: 12px; } #popDesignListResp .topDesigner h3 { font-size: 13px; line-height: 75%; } #popDesignListResp li.topDesigner .topDesignerTop a.fcbtn { width: 56px; height: 23px; font-size: 11px; padding: 1px; line-height: 21px; } } @media (min-width: 900px) { #popDesignListResp .topDesigner h3 { font-size: 15px; line-height: 100%; } #popDesignListResp li.topDesigner .topDesignerTop a.fcbtn { width: 66px; height: 23px; font-size: 12px; padding: 4px; line-height: 16px; } } @media (min-width: 1000px) { #popDesignListResp .topDesigner:after { padding-top: 65%; } } @media (min-width: 1000px) { #popDesignListResp li.topDesigner .designerExamples a:nth-child(4) img { display: inherit; } #popDesignListResp li.topDesigner .designerExamples img { width: 24.25%; margin-left: 1%; } #popDesignListResp li.topDesigner .topDesignerTop .followButton { margin-top: 20px; } #popDesignListResp .headshot { background-size: 60%; background-position: right top; } } @media (min-width: 1200px) { #popDesignListResp .fc-authenticate { top: 27px; } #popDesignListResp li.topDesigner .topDesignerTop { padding: 20px 0 10px 15px; } #popDesignListResp li.topDesigner .topDesignerTop a.fcbtn { width: 74px; height: 27px; font-size: 14px; padding: 5px; } #popDesignListResp .topDesigner h3 { font-size: 18px; } } @media (min-width: 1500px) { #popDesignListResp .fc-authenticate { top: 32px; } #popDesignListResp .topDesigner h3 { font-size: 20px; line-height: 113%; } #popDesignListResp li.topDesigner .topDesignerTop a.fcbtn { font-size: 18px; width: 89px; height: 32px; padding: 8px; } #responsiveHomepage h3.popDesignLabel { font-size: 20px; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) { #popDesignListResp { margin: 0; } .popDesignLabel { margin-bottom: 15px; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #popDesignListResp li.topDesigner .topDesignerTop .followButton { margin-top: 20px; } } 

#popup_login_table td { padding: 3px; } #popup_login_table td.info { font-size: smaller; white-space: nowrap; vertical-align: top; } #popup_login_table td.fieldname { text-align: right; padding-right: 1em; white-space: nowrap; } #popup_login_table #login_message, #popup_login_table .errormsg { font-size: larger; padding: 4px 1px; } 

.promo-page { font-smooth: auto; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; font-size: 16px; background-color: #fff; margin: 1rem 0 0; clear: both; } .promo-page img { max-width: 100%; } .promo-page .p-offer--mls img { max-width: 100%; } .promo-page .family-name { font-size: 20px; margin-top: 20px; } .promo-page .style--foundary { color: #585858; height: 44px; } .promo-page .discount { color: #fc06fc; margin-bottom: 20px; height: 18px; } .promo-page .top-banner-section { margin: 0 0 80px 0; text-align: center; } .promo-page .top-banner-section h2 { margin: 30px 0; } .promo-page .top-banner-section p { color: #636363; font-size: 1.2rem; line-height: 1.5; text-align: center; max-width: 840px; margin: 0 auto; padding: 0 0 30px 0; word-wrap: break-word; } .promo-page .promo-banner { background: #fff; padding: 0; text-align: center; width: 960px; position: relative; } .promo-page p { margin-top: 0px; margin-bottom: 0.6em; font-size: 16px; line-height: 1.4; } .promo-page p.family-name { font-size: 20px; } .promo-page .add--cart { display: table; padding: 14px 62px; background: #0099ff; color: #fff; margin: 0 auto; border-radius: 5px; text-transform: uppercase; } .promo-page .add--cart:hover, .promo-page .add--cart:active { text-decoration: none; } .promo-page .img--header { margin: 32px 0 80px; } .promo-page .sub-section { text-align: center; } .promo-page .sub-section h2 { font-size: 24px; margin-bottom: 6px; } .promo-page .sub-section .img--header { margin: 32px 0 80px; } .promo-page .sub-section .img--header .img--header_banner { width: 720px; } .promo-page .small-feature-section { width: 840px; margin: 0 auto; border-top: 1px solid #dadada; padding-top: 80px; } .promo-page .small-feature-section .small-feature__list { width: 240px; text-align: center; display: inline-block; margin-right: 54px; margin-bottom: 80px; vertical-align: top; } .promo-page .small-feature-section .small-feature__list .add--cart { padding: 14px 34px; } .promo-page .small-feature-section .small-feature__list .img--header_banner { width: 240px; height: 120px; margin: 0 0 20px 0; } .promo-page .small-feature-section .small-feature__list:nth-child(3n) { margin-right: 0; } .promo-page .small-feature-section.l-t-3 { text-align: center; } .promo-page .small-feature-section.l-t-3 .small-feature__list:nth-child(1) { margin-right: 0; } .promo-page .small-feature-section.l-t-3 .small-feature__list:nth-child(1) + :nth-child(2) { margin-left: 54px; margin-right: 0; } .promo-page .medium-feature-section { text-align: center; border-top: 1px solid #dadada; padding-top: 80px; width: 840px; margin: 0 auto; } .promo-page .medium-feature-section .img--header { margin: 0 0 80px; } .promo-page .medium-feature-section .img--header_banner { width: 540px; margin: 0 0 20px 0; } .promo-page .stay-tuned-section { text-align: center; border-top: 1px solid #dadada; padding-top: 80px; width: 840px; margin: 0 auto; } .promo-page .stay-tuned-section p { margin: 30px 0; word-wrap: break-word; } .promo-page .stay-tuned-section .img--header_banner { margin: 20px 0; width: 840px; } @media screen and (max-width: 899px) { .promo-page .small-feature-section, .promo-page .medium-feature-section, .promo-page .stay-tuned-section { width: 768px; } .promo-page .small-feature-section .small-feature__list { margin-right: 18px; } .promo-page .top-banner-section p, .promo-page .stay-tuned-section p { margin: 0 30px; } } @media screen and (max-width: 768px) { .promo-page .stay-tuned-section .img--header_banner { width: 720px; } } @media screen and (max-width: 767px) { .promo-page .small-feature-section, .promo-page .medium-feature-section, .promo-page .stay-tuned-section { width: 100%; } .promo-page .small-feature-section .small-feature__list { width: 44%; margin: 20px 20px 0 0; } .promo-page .small-feature-section .small-feature__list:nth-child(2n) { margin-right: 0; } .promo-page .small-feature-section .small-feature__list:nth-child(3n) { margin-right: 20px; } } @media screen and (max-width: 480px) { .promo-page .small-feature-section, .promo-page .medium-feature-section, .promo-page .stay-tuned-section { width: 100%; } .promo-page .top-banner-section { margin: 0 0 40px 0; } .promo-page .top-banner-section h2 { margin: 20px 0 0; } .promo-page .top-banner-section p { font-size: 1rem; } .promo-page .add--cart { padding: 12px 62px; border-radius: 5px; } .promo-page .small-feature-section .small-feature__list .add--cart { padding: 12px 62px; border-radius: 5px; } .promo-page .sub-section .family-name { margin: 15px 0 5px; } .promo-page .small-feature-section .small-feature__list { width: 100%; margin: 80px 0 0; } .promo-page .small-feature-section .small-feature__list:nth-child(1) { margin: 0; } .promo-page .small-feature-section .small-feature__list:nth-child(2n) { margin-right: 0; } .promo-page .small-feature-section .small-feature__list:nth-child(3n) { margin-right: 0; } .promo-page .small-feature-section .small-feature__list .img--header_banner { width: 100%; height: auto; } .promo-page .medium-feature-section { margin-top: 80px; } } 

.recentFontsWidget { padding: 20px; color: #4a4a4a; } .recentFontsWidget__title { font-size: 24px; line-height: 30px; margin-bottom: 16px; } .recentFontsWidget__card { margin-bottom: 23px; } .recentFontsWidget__card__image { width: 100%; height: auto; } .recentFontsWidget__card__description { margin-top: 2px; font-size: 14px; line-height: 18px; font-weight: 500; } .recentFontsWidget__card__description a { color: #00ACFF; } .recentFontsWidget__card__description a:hover { text-decoration: none; } .recentFontsWidget__card__description__fontDetails, .recentFontsWidget__card__description__priceInfo { display: block; } .recentFontsWidget__card__description__price { font-weight: bold; } .recentFontsWidget__card:last-child { margin-bottom: 0; } 

a.vote_against { color: red; } span.time_ago { color: #999; } #recent_ratings ul li { border-top: 1px solid #CCC; padding: 3px 0px; } #recent_ratings ul li.vote_against { background-color: #FFDDDD; } #recent_ratings ul li.private { background-color: #FFFFDD; } 

a.vote_against { color: red; } span.time_ago { color: #999; } #recent_shorturls ul li { border-top: 1px solid #CCC; padding: 3px 0px; } #recent_shorturls ul li.vote_against { background-color: #FFDDDD; } #recent_shorturls ul li.private { background-color: #FFFFDD; } 

a.vote_against { color: red; } span.time_ago { color: #999; } #recent_tags ul li { border-top: 1px solid #CCC; padding: 3px 0px; } #recent_tags ul li.vote_against { background-color: #FFDDDD; } #recent_tags ul li.private { background-color: #FFFFDD; } 

#related_albums ul { overflow: hidden; } 

.related_tags ul { overflow: hidden; } 

.related_tags { width: 100%; padding: 24px 0; } .p-related-tags h3 { font-size: 16px; line-height: 120%; color: #111111; text-align: left; font-family: "rooneysans-regular"; padding-bottom: 4px; } .p-related-tags ul { margin: 0; padding: 0; list-style-type: none; } .p-related-tags li { display: inline-block; background-color: #eeeeee; height: 27px; -moz-border-radius: 2%; -webkit-border-radius: 2%/7%; border-radius: 2%/7%; font-size: 14px; line-height: 25px; color: #333333; text-align: center; margin-bottom: 10px; } .p-related-tags li a { padding: 0px 14px; color: #000; } span.p-more-tags { cursor: pointer; margin-left: 5px; display: inline-block; } .p-related-tags li span { display: inline-block; vertical-align: middle; } 

@-webkit-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #responsiveHomepage { color: #333; min-height: 1000px; box-sizing: border-box; } #responsiveHomepage * { box-sizing: border-box; } #responsiveHomepage h1 { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 20px; font-weight: normal; margin: 1em 0 1em; text-align: center; } #responsiveHomepage #content { width: 100%; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #responsiveHomepage .rhTitle { font-size: 14px; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 20px 0 20px; } #responsiveHomepage #content noscript { position: relative; top: -100px; } #responsiveHomepage #loadMore { background: #fff; border-top: 1px solid #ccc; display: none; height: 40px; margin-bottom: -72px; position: relative; text-align: center; top: -40px; z-index: 3; } #responsiveHomepage #loadMore button { background: white; border: 1px solid #ddd; border-radius: 50%; color: #ccc; display: inline-block; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 40px; position: relative; top: -45px; height: 80px; width: 80px; -moz-transition: border-color 200ms ease-in-out, color 200ms ease-in-out; -o-transition: border-color 200ms ease-in-out, color 200ms ease-in-out; -webkit-transition: border-color 200ms ease-in-out, color 200ms ease-in-out; transition: border-color 200ms ease-in-out, color 200ms ease-in-out; } #responsiveHomepage #loadMore button:hover { border-color: #aaa; color: #999; } #responsiveHomepage #loadMore button.loading { animation-name: rotate; animation-delay: 1s; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -moz-animation-name: rotate; -moz-animation-delay: 1s; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-animation-name: rotate; -webkit-animation-delay: 1s; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } #responsiveHomepage .main_column { width: 100%; display: block; order: 1; } #responsiveHomepage .sidebar { min-height: 50px; width: 100%; max-width: 425px; margin-left: auto; margin-right: auto; order: 2; } #responsiveHomepage .sidebar .widget { width: 100%; max-width: 425px; background: #fff; border: 1px solid #eee; margin-bottom: 20px; box-shadow: 0 1px 1px -1px #ddd; padding: 1em; } #responsiveHomepage .sidebar .widget h3 { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 1em; } #responsiveHomepage .sidebar .widget li.sample img { width: initial; max-height: 25px; } @media screen and (min-width: 950px) { #responsiveHomepage .sidebar .widget li.sample img { max-height: 35px; } } @media screen and (min-width: 1050px) { #responsiveHomepage .sidebar .widget li.sample img { max-height: 70px; } } #responsiveHomepage .sidebar .widget li.sample img.lazy2x { display: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #responsiveHomepage .sidebar .widget li.sample img.lazy1x { display: none; } #responsiveHomepage .sidebar .widget li.sample img.lazy2x { display: block; } } #responsiveHomepage .sidebar .widget > ul > li { border-top: 1px solid #EFEFEF; padding: 1.5em 0; } @media screen and (max-width: 1000px) { #responsiveHomepage .sidebar .widget > ul > li { padding: 1em 0; } } #responsiveHomepage .sidebar .widget > ul > li.sample:last-child { padding-bottom: .5em; } @media screen and (max-width: 1000px) { #responsiveHomepage .sidebar .widget > ul > li.sample:last-child { padding-bottom: 0; } } #responsiveHomepage .sidebar .widget > ul > li ul { margin-top: 14px; } #responsiveHomepage .sidebar .widget > ul > li ul li { display: inline; } #responsiveHomepage .sidebar .widget > ul > li ul li:after { content: ", "; color: #09f; } #responsiveHomepage .sidebar .widget > ul > li ul li:last-child:after { content: ""; } #responsiveHomepage .sidebar .widget > ul > li ul li a { font-size: 12px; } #responsiveHomepage .sidebar .newsletterWidget { border: 1px solid #eee; background: #fff; } #responsiveHomepage .fcFilter { position: relative; top: 0; } #responsiveHomepage .fcFilter li { padding: 8px 0; } #responsiveHomepage .fcFilter .fcType { font-size: 16px; color: #666; position: relative; padding-bottom: 3px; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; -webkit-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } #responsiveHomepage .fcFilter .fcType:hover { text-decoration: none; color: #09F; } #responsiveHomepage .fcFilter .fcType.fcFilterType.filterOn { border-bottom: 2px solid #09F; } #responsiveHomepage .fcFilter .fcType .fcNum { position: absolute; top: -18px; right: -30px; text-align: center; display: block; width: 30px; height: 30px; font-size: 14px; line-height: 25px; background-image: url("/s/images/font_cards/follow_bubble.png"); background-repeat: no-repeat; color: #fff; } #responsiveHomepage .fcFilter .fcEdit { font-size: 12px; color: #999; float: right; padding: 3px 0; } #responsiveHomepage .backToTop { background: url("/s/images/font_cards/back-to-top.png") left center no-repeat; background-size: 30px 30px; display: block; } #responsiveHomepage #backToTop { padding: 10px 0 10px 40px; color: #999; font-size: 14px; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; -webkit-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } #responsiveHomepage #backToTop:hover { color: #666; text-decoration: none; } #responsiveHomepage #backToTopMobile { display: none; position: fixed; bottom: 10px; right: 5px; width: 30px; height: 30px; } #responsiveHomepage #sideBarFooter nav.social a { color: #ddd; display: table-cell; font-family: "Social-Network-Icons"; font-size: 25px; font-weight: normal; text-decoration: none; -moz-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; padding: 18px 12px; } #responsiveHomepage #sideBarFooter nav.social a:hover { color: #aaa; } #responsiveHomepage #sideBarFooter nav.social a:first-child { padding-left: 0; } #responsiveHomepage #sideBarFooter .links, #responsiveHomepage #sideBarFooter .social { padding-left: 10px; } #responsiveHomepage #sideBarFooter .copyright { font-size: 10px; color: #545454; padding: 18px 10px; } #responsiveHomepage .salesmapLabel { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; float: left; } #responsiveHomepage .seeallMaps { float: right; font-size: 16px; display: none; } #responsiveHomepage #salesmap > a { font-size: 11px; } #responsiveHomepage #maps { padding-top: 15px; } #responsiveHomepage #maps > div { padding: 14px; border: 1px solid #eee; margin-bottom: 15px; background: #fff; box-shadow: 0 1px 1px -1px #ddd; } #responsiveHomepage p.salesCR { text-align: right; font-size: 12px; } #responsiveHomepage #sideBarFooter .links a { display: block; padding: 18px 0; color: #545454; -moz-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } #responsiveHomepage #sideBarFooter nav.links a:hover { color: #09f; text-decoration: none; } #responsiveHomepage #salesmap .wide { display: none; width: 100%; } #responsiveHomepage #salesmap .narrow { width: 100%; display: block; } #responsiveHomepage #popDesignListResp li.topDesigner .designerExamples { bottom: -2px; } #responsiveHomepage .sidebar .newsletterWidget { width: 100%; max-width: 425px; background: #fff; border: 1px solid #eee; margin: 0 auto 46px auto; box-shadow: 0px 1px 1px -1px #ddd; } #responsiveHomepage.ie h1 { font-size: 24px; } #responsiveHomepage.ie #content .item { padding: 12px; } #responsiveHomepage.ie #content .item .ribbon { display: none; } #responsiveHomepage #carbonads { display: block; overflow: hidden; padding: 1em; line-height: 1.5; } #responsiveHomepage #carbonads span { position: relative; display: block; overflow: hidden; } #responsiveHomepage #carbonads .carbon-img { float: left; margin-right: 1em; } #responsiveHomepage #carbonads .carbon-img img { display: block; } #responsiveHomepage #carbonads .carbon-text { display: block; float: left; max-width: calc(100% - 130px - 1em); text-align: left; } #responsiveHomepage #carbonads .carbon-poweredby { position: absolute; right: 0; bottom: 0; display: block; font-size: .8em; text-transform: uppercase; line-height: 1; letter-spacing: 1px; } .bundles-promo-alt { padding: 50px 20px 90px; text-align: center; background-size: contain; background: transparent url("/s/images/bundles/bundles-promo2-bg.png") center bottom no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .bundles-promo-alt { background-image: url("/s/images/bundles/bundles-promo2-bg@2x.png"); background-size: contain; } } .bundles-promo-alt .site-logo { text-indent: -999em; width: 138px; height: 68px; background: transparent url("/s/images/logo/header_logo.svg") center no-repeat; background-size: contain; margin: 0 auto 20px; } .bundles-promo-alt h2 { margin-bottom: 17px; font-size: 28px; } .bundles-promo-alt p { max-width: 20em; margin: 0 auto 20px; font-size: 19px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bundles-promo-alt input[type=email] { width: 286px; font-size: 18px; padding: 9px 10px; margin-right: 8px; } .bundles-promo-alt a.button { font-size: 15px; padding: 11px 19px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); } .bundles-promo-alt a.button.large { font-size: 18px; } .ie #responsiveHomepage #categoryNav { font-size: 15px; } .ie #responsiveHomepage #content .item { padding: 14px; } .ie #responsiveHomepage #content .item .ribbon { height: 132px; width: 120px; right: 8px; top: 8px; } .ie #responsiveHomepage #content .item .ribbon span { font-size: 17px; } .ie #responsiveHomepage .main_column { width: 70%; padding-left: 10px; } .ie #responsiveHomepage .sidebar#sidebarLeft { width: 30%; padding-right: 10px; display: block; } .ie #responsiveHomepage .sidebar#sidebarLeft .autobox.newsletterWidget { width: 100%; padding: 10px; margin-bottom: 30px; box-shadow: 0px 1px 1px -1px #ddd; } @media screen and (min-width: 480px) { #responsiveHomepage #categoryNav { padding: 0; } } @media screen and (min-width: 720px) { #responsiveHomepage h1 { font-size: 24px; } #responsiveHomepage #content .item { padding: 12px; } #responsiveHomepage #content .item .ribbon { right: 7px; top: 7px; } } @media screen and (min-width: 768px) { #responsiveHomepage #categoryNav { font-size: 15px; } #responsiveHomepage #content .item { padding: 14px; } #responsiveHomepage #content .item .ribbon { height: 132px; width: 120px; right: 8px; top: 8px; } #responsiveHomepage #content .item .ribbon span { font-size: 17px; } #responsiveHomepage #content { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } #responsiveHomepage .sidebar { order: 1; width: 31.7%; margin-left: 0; margin-right: 1.7%; max-width: 405px; } #responsiveHomepage .main_column { order: 2; width: 66%; } #responsiveHomepage .sidebar#sidebarLeft .autobox.newsletterWidget { width: 100%; padding: 14px 14px 10px 14px; margin-bottom: 20px; box-shadow: 0px 1px 1px -1px #ddd; } #responsiveHomepage .sidebar .autobox.designerWidget { margin-bottom: 20px; } #responsiveHomepage h3 { font-size: 16px; } #responsiveHomepage .seeallMaps { font-size: 12px; padding-top: 4px; } } @media screen and (min-width: 900px) { #responsiveHomepage .seeallMaps { padding-top: 5px; } #responsiveHomepage h3 { font-size: 18px; } } @media screen and (min-width: 1500px) { #responsiveHomepage h3.salesmapLabel { font-size: 20px; } } @media screen and (min-width: 1600px) { #responsiveHomepage h1 { font-size: 32px; } #responsiveHomepage #categoryNav { padding: 0 12px; } #responsiveHomepage #content .item { padding: 16px; } #responsiveHomepage #content .item .ribbon { right: 9px; top: 9px; } } @media screen and (min-width: 1800px) { #responsiveHomepage h1 { font-size: 46px; } } @media screen and (min-width: 2000px) { #responsiveHomepage h1 { margin-top: 0; } } @media screen and (min-width: 1800px) { .fluid #responsiveHomepage #categoryNav a { display: inline-block; padding: .8em 1.7%; } } #myfontsContainer.respHomepage { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 40%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(40%, #f6f6f6)); background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 40%); background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 40%); background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 40%); background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 40%); } #myfontsContainer.mobileHomepage { padding: 0; } #myfontsContainer.mobileHomepage #myfontsBody { padding-top: 50px; } #myfontsContainer.mobileHomepage #myfontsHeader.collapsed + #myfontsBody { padding-top: 390px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) { height: auto; padding: 75px 0 0; position: relative; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerLogotype { float: none; width: 150px; height: 84px; margin: 0 auto 48px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerLogotype a { background-size: 150px 84px; width: 150px; height: 84px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerLogin { display: none; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerCart i { opacity: 0.6; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerSearchForm { clear: both; display: block; margin: 0 auto; position: relative; width: 285px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerSearchForm #searchBox { border-color: #ddd; border-radius: 3px 0 0 3px; box-shadow: none; box-sizing: content-box; height: 35px; line-height: 35px; width: 210px; -webkit-appearance: none; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerSearchForm #searchBox:focus { border-color: #09f; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerSearchForm #searchButton { border-radius: 0 3px 3px 0; font-family: "ProximaNovaSoft-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 22px; width: auto; height: 47px; position: absolute; padding: 1px 12px; right: 0; top: 0; width: 59px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage { display: block; padding: 0; text-align: center; width: 100%; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage > a { display: block; text-align: center; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage > a.label { background: #111; color: #fff; font-size: 14px; line-height: 1.2em; margin: 0; padding: 10px; text-align: left; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage > a.signIn { margin: 30px auto 0; width: 150px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage > a.wtfMobile { margin: 50px auto 20px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage > a button { background: #eee; color: #333; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; padding: 10px 25px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage .swipe { width: 100%; overflow: hidden; position: relative; white-space: nowrap; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage .swipe:last-of-type { border-bottom: 36px solid #111; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage .swipe .swipeInner { display: inline; float: left; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage .swipe .item { display: inline-block; float: none; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobileHomepage .swipe .item img { width: 100%; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobile { position: absolute; top: 0px; left: 10px; right: 10px; } #myfontsContainer.mobileHomepage #myfontsHeader:not(.collapsed) #headerNavMobile button.icon { padding: 16px 12px; } @media screen and (min-width: 600px) { .no-touchevents #responsiveHomepage .rhTitle { display: none; } } @media screen and (min-width: 767px) { #responsiveHomepage .rhTitle { display: none; } } @media screen and (max-width: 767px) { #responsiveHomepage #popDesignListResp li.topDesigner { width: 100%; max-width: 425px; background: #fff; border: 1px solid #eee; margin: 0 auto 20px auto; box-shadow: 0px 1px 1px -1px #ddd; } } @media screen and (min-width: 857px) { #responsiveHomepage #salesmap .narrow { display: none; } #responsiveHomepage #salesmap .wide { display: block; } } @media screen and (min-width: 1150px) { #responsiveHomepage #content { width: 99%; margin: 0 auto; max-width: 1200px; } } @media screen and (min-width: 1984px) { #responsiveHomepage #content { width: 100%; max-width: none; } #responsiveHomepage .main_column { width: 100%; } #responsiveHomepage .sidebar { margin-right: 20px; } } @media screen and (min-width: 2400px) { #responsiveHomepage #content { width: 2300px; margin: 0 auto; } } @media (min-width: 450px) and (max-width: 767px) { .popDesignLabel { display: none; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #responsiveHomepage #popDesignListResp li.topDesigner { max-width: 307px; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape), only screen and (max-width: 450px) { #myfontsContainer.respHomepage { padding: 0; } #responsiveHomepage .sidebar { margin-top: 20px; } #responsiveHomepage .sidebar .newsletterWidget { border: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } #responsiveHomepage #maps { padding-top: 40px; } #responsiveHomepage h3.salesmapLabel { float: left; } #responsiveHomepage h3.salesmapLabel { padding-left: 10px; } #responsiveHomepage a.seeallMaps { padding-right: 10px; } #responsiveHomepage a.seeallMaps { float: right; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape), only screen and (max-width: 767px) { #responsiveHomepage #maps > div { float: left; width: 49%; padding: 5px; } #responsiveHomepage #maps div:nth-child(2n+1) { margin-right: 2%; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #responsiveHomepage .rhTitle { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 20px; display: block; } #responsiveHomepage .sidebar .newsletterWidget { max-width: none; } #responsiveHomepage .sidebar { max-width: none; } #responsiveHomepage #popDesignListResp li.topDesigner { max-width: 307px; } #salesmap .narrow { display: none; } #salesmap .wide { display: block; } } 

div.rollover_buttons { position: relative; height: 27px; float: right; padding-right: 5px; } div.rollover_buttons a { float: right; } div.rollover_buttons .mouseshow { visibility: hidden; } 

div.scrollbarWidget { position: relative; height: 20px; z-index: 10; } div.scrollbarWidget div.bar { position: relative; top: 12px; height: 7px; width: 80%; margin: auto; cursor: pointer; background-color: #D0D0D0; } div.scrollbarWidget div.handle { cursor: pointer; width: 10%; top: -3px; border-width: 1px; height: 11px; position: absolute; left: 0%; background-color: #f54141; border-style: solid; border-color: #ff9999 #aa2222 #aa2222 #ff9999; } div.scrollbarWidget div.handle div.range { position: absolute; white-space: nowrap; text-align: center; bottom: 105%; font-size: 8pt; width: 300%; left: -100%; } 

/* #search_page h1 { float: left; font-weight: normal; } #search_page #searchfilter_widget { float: right; width: 602px; margin-right: 218px; margin-top: 8px; } */ #search_page span.results-number { font-size: 9px; } #search_page span.results-number:before { content: "("; } #search_page span.results-number:after { content: ")"; } #search_page div.searchresults { position: relative; } 

#searchfilter_widget { margin-bottom: 12px; } #searchfilter_criteria .prototype { display: none; } #searchfilter_criteria { width: 100%; } #searchfilter_criteria .criterium { position: relative; background-color: #fbfbfb; border: 1px solid #dddddd; padding: 6px; margin: 0px; margin-bottom: 6px; clear: both; margin-bottom: 3px; padding: 15px; margin-bottom: 3px; width: 100%; box-sizing: border-box; } #searchfilter_criteria select { margin-right: 1px; -webkit-appearance: initial; border: 0; background: url("/s/images/searchfilter/downarrow.png") center no-repeat; background-position: right 7px top 6px; font-family: "rooneysans-medium"; font-size: 16px; width: 180px; -moz-appearance: none; } #searchfilter_criteria .criterium_value { width: 360px; } #searchfilter_criteria input[type=text] { font-size: 16px; padding: 2px 4px; width: 308px; border-color: #bbbbbb; } #searchfilter_criteria a.criterium_remove, #searchfilter_criteria a.criterium_add { float: right; } #searchfilter_criteria a.criterium_remove img, #searchfilter_criteria a.criterium_add img { vertical-align: middle; width: 26px; height: 26px; margin-right: 5px; } #searchfilter_refresh { float: right; text-transform: lowercase; font-size: 16px; } #param_width_tmp, #operator_width_temp { display: none; } #searchfilter_widget { display: none; } #searchfilter_widget.open { display: block; } #search_page .open-searchfilter { cursor: pointer; padding-bottom: 15px; } #searchfilter_widget .filter-buttons { float: right; } #searchfilter_widget #searchfilter_anyorall { float: left; margin: 10px; font-size: 16px; } #searchfilter_widget #searchfilter_anyorall select { width: 53px; font-family: "rooneysans-bold"; } #search_page .autobox-with-tabs .local-tabs .local-tab:first-child { margin-left: 0; } #search_page .open-searchfilter { padding: 10px 0; color: #555; font-size: 14px; width: 30%; } #search_page .open-searchfilter:hover { color: #09f; } #search_page .arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid #555; float: left; margin-right: 9px; margin-top: 4px; } #search_page .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #555; float: left; margin-right: 9px; margin-top: 4px; } @media only screen and (min-width: 768px) and (max-width: 904px) { #searchfilter_criteria input[type=text], #searchfilter_criteria .criterium_value { margin-right: 130px; margin-top: 10px; } } @media only screen and (max-width: 500px) { #searchfilter_criteria input[type=text] { width: 200px; } #searchfilter_criteria .criterium_value { width: 200px; } } @media only screen and (max-device-width: 768px) and (min-device-width: 320px) { #searchfilter_criteria .criterium { background-color: #fff; border-style: none; } input#criterium_value_0 { display: block; float: left; padding: 7px 4px !important; } #search_page .open-searchfilter { width: 100%; } .no-touchevents #search_page .open-searchfilter:hover { color: #555; } #searchfilter_criteria .criterium { width: inherit; padding: 0; } #searchfilter_criteria input[type=text] { width: 66%; margin-bottom: 10px; margin-top: 0; } #searchfilter_criteria a.criterium_remove img, #searchfilter_criteria a.criterium_add img { margin: 3px 10px; } .criterium_param { } #searchfilter_widget { width: 100%; } #searchfilter_last_row { text-align: center; display: block; } #searchfilter_refresh { letter-spacing: 0.11em; font-size: 16px; width: 100%; margin: 0; text-transform: uppercase; } #searchfilter_criteria select { border: 0 !important; -moz-appearance: none; -webkit-appearance: none; background: url("/s/images/iconsets/myfonts/header_menu_arrow.svg") center no-repeat; background-position: right 9px center; margin-bottom: 10px; width: 49%; font-size: 13px; font-family: "rooneysans-regular"; background-color: #eeeeee; padding: 5px; } #searchtext { display: block; font-size: 19px; padding-bottom: 15px; } #search_page h1 { font-size: 13px !important; } #searchfilter_criteria .criterium_value { background-position: right 9px center; width: 69%; overflow: visible; padding: 7px 4px !important; margin-top: 0; } #searchfilter_criteria #searchfilter_anyorall select { background-position: right 8px center; width: 45px; } #searchfilter_criteria .searchfilter_refresh_outer { margin-left: auto; margin-right: auto; width: 91px; } #searchfilter_widget #searchfilter_anyorall span.anyorall { display: none; } #search_page .autobox-with-tabs .local-tabs .local-tab:first-child { margin-left: 12px; } #search_page .open-searchfilter { padding: 0; padding-bottom: 15px; } #searchfilter_widget #searchfilter_anyorall { margin: 0; } } @media only screen and (max-device-width: 320px) { #searchfilter_criteria select { background-position: right 9px center; } } 

div.searchresultsWidget { position: relative; left: 0px; top: 0px; z-index: 0; } div.searchresultsWidget .errormsg { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #c00; } div.searchresultsWidget table.navigation { clear: both; width: 100%; margin: 12px 0px; } div.searchresultsWidget table.navigation tr td { padding: 8px; font-size: 14px; width: 18px; text-align: center; } div.searchresultsWidget table.navigation tr td.prev { width: auto; text-align: right; } div.searchresultsWidget table.navigation tr td.next { width: auto; text-align: left; } div.searchresultsWidget table.navigation tr td.current_page { background-color: #E0E0E0; color: #999; } div.searchresultsWidget .search-result-item + form.pagination table.navigation { border-top: 1px solid #AAA; padding-top: 12px; } #searchresults_progress { margin: 0px auto; border: 1px solid black; width: 50%; height: 12pt; background-color: white; } #searchresults_progress_inner { background-color: #BBBBBB; width: 50%; height: 100%; } span.searchresults_tab_number { font-weight: normal; color: #999; } #listpage_view_options ul li { margin-top: 12px; } #listpage_view_mode img { height: 24px; vertical-align: middle; } #listpage_view_mode img.view-list { width: 85px; } #listpage_view_mode img.view-gallery { width: 86px; } div.didyoumean { margin: 8px 0px; font-weight: bold; font-size: larger; } div.search-result-item { position: relative; clear: both; border-top: 1px solid #AAA; padding: 12px 0px; min-height: 110px; } div.search-result-item .index { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } div.search-result-item .item-heading { float: left; margin-bottom: 10px; position: relative; width: 100%; } div.search-result-item .leftstuff { float: left; width: 70%; } div.search-result-item .rightstuff { float: right; width: 30%; } div.search-result-item h4 { font-weight: normal; margin: 0px; padding: 1px 0px 1px; } div.search-result-item a.thumbs_down { color: #999; text-decoration: none; } div.search-result-item .subtitle { font-size: smaller; white-space: nowrap; padding-top: 2px; } div.search-result-item img { position: relative; border-style: none; } div.search-result-item div.product-image { float: left; margin-right: 3.1%; background-color: white; width: 438px; max-height: 217px; text-align: right; clear: none; max-height: 360px; } div.search-result-item div.product-image img { max-width: 100%; max-height: 100%; } div.search-result-item div.item-details { float: right; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; text-align: right; } div.search-result-item .long-description { float: left; font-size: 11px; padding-top: 2px; } div.search-result-item .order_link { float: right; margin-top: 4px; } div.search-result-item div.rating_stars { float: right; } div.search-result-item .rollover_buttons, div.search-result-item a.removeFromAlbum { float: right; margin-left: 6px; } div.search-result-item .blurb { clear: left; position: relative; padding-top: 4px; line-height: 1.3; } div.search-result-item .blurb235th_space { clear: left; position: relative; margin-top: 4px; line-height: 1.3; padding-right: 105px; } div.search-result-item .sample { position: relative; padding-top: 16px; overflow: hidden; clear: left; padding-bottom: 14px; } div.search-result-item .sample ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } div.search-result-item .sample ul li { margin-right: 16px; } div.search-result-item .sample ul li a { display: inline-block; } div.search-result-item div.topfonts { margin: 8px auto; position: relative; text-align: left; } div.search-result-item div.topfonts img { border-style: none; position: relative; margin: 0px 4px; width: 75px; height: 75px; } div.search-result-item div.comment.fresh { color: #CCC; } div.search-result-item div.comment.inplaceedit { margin-top: 12px; cursor: pointer; } div.search-result-item form.inplaceeditor-form { display: inline; } div.search-result-item .availablelisctext { white-space: normal; } div.search-result-item div.newsletter .news-image img { max-width: 232px; } * html div.search-result-item { height: 110px; } div.search-result-item-notopline { border-top: 0px; } #start_of_the_search_results input.next_results_submit, #end_of_the_search_results input.next_results_submit, #searchresults_loader { display: block; clear: both; font-size: larger; width: 100%; padding-top: 12px; padding-bottom: 12px; border-width: 2px; } #searchresults_loader { text-align: center; } div.search-results-gallery-square { position: relative; float: left; text-align: center; width: 110px; height: 110px; margin-left: 0px; margin-bottom: 12px; overflow: hidden; } div.search-results-gallery-square + div.search-results-gallery-square { margin-left: 12px; } div.search-results-gallery-square img.product-image { max-height: 100%; max-width: 100%; } div.search-results-gallery-square h4 { position: relative; margin-top: 30%; } div.search-results-gallery-square h4 a { color: black; } div.search-results-gallery-square .subtitle { position: absolute; width: 100%; text-align: center; color: #999999; } html div.search-results-gallery-noflag { width: 108px; height: 108px; border: 1px solid #888888; } div.searchfooter form { margin: 2em 0px; text-align: center; } div.searchfooter li { line-height: 2em; } div.searchfooter input { vertical-align: middle; } div.search-result-item.draggable { cursor: move; } div.search-result-item.draggable div.drag_handle { cursor: move; position: absolute; width: 24px; height: 100%; left: -27px; top: 0px; } div.search-result-item.draggable div.drag_handle img { margin-top: auto; margin-bottom: auto; } .availablelisctext { float: left; font-size: 11px; white-space: nowrap; } .descPeople { float: left; width: 600px; } div.search-result-item h4 { padding: 0px; } div.search-result-item h4 a { font-size: 20px; line-height: 120%; color: #0090ff; text-align: left; } div.search-result-item .long-description { font-size: 20px; line-height: 120%; color: #000; text-align: left; padding-top: 0px; margin-left: 5px; } div.search-result-item .long-description a { color: #0090ff; } div.search-result-item .clearboth { clear: both; } div.search-result-item span.discount { background-color: #f400b7; width: 67px; height: 23px; -moz-border-radius: 5%; border-radius: 5%/17%; color: white; font-size: 14px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding: 2px 8px; margin-left: 5px; display: inline-block; box-sizing: border-box; } div.search-result-item div.newbadge { background-color: #0090ff; height: 23px; -moz-border-radius: 5%; -webkit-border-radius: 5%/17%; border-radius: 5%/17%; color: white; font-size: 16px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; line-height: 140%; padding: 1px 9px; display: inline-block; margin: -1px 0 0 10px; } div.search-result-item div.badge { color: #111111; margin-left: 15px; float: left; background: transparent url("/s/images/iconsets/myfonts/badge_star.png") no-repeat; padding-left: 24px; line-height: 203%; background-position: 0 2px; } div.search-result-item div.badge.bundle { background-image: url("/s/images/font_cards/icon-bundle.png"); margin-left: 10px; width: 19px; height: 23px; vertical-align: middle; background-size: 19px 21px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.search-result-item div.badge.bundle { background-image: url("/s/images/font_cards/icon-bundle@2x.png"); background-size: 19px 21px; } } div.search-result-item div.font-rank { float: left; background-color: #0096ff; border-radius: 50%; height: 30px; min-width: 30px; font-size: 16px; color: white; text-align: center; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-top: -2px; margin-right: 10px; } div.search-result-item div.font-rank span { float: left; line-height: 175%; margin: 0 auto; width: 30px; } div.search-result-item div.newsletter .news-image { float: left; width: 250px; } div.search-result-item div.newsletter .news-right { margin-left: 250px; } div.search-result-item .leftstuff .num-ff { color: #0090ff; } div.search-result-item a.add_to_cart, div.search-result-item .buying_choices { float: right; } div.search-result-item .SkyFontsDownload { float: right; } div.search-result-item .SkyFontsDownload button { font-size: 11px; margin-left: 4px; } div.search-result-item .SkyFontsDownload *:hover > .help_tooltip { display: none; } div.search-result-item .cart_button_wrapper button.add_to_album_toggle { margin-left: 4px; margin-bottom: 0; } div.search-result-item .ac-favorite-root { float: right; } div.search-result-item .favorite { width: 23px; height: 23px; float: right; margin-left: 0px; border-radius: 3px; } div.search-result-item .fc-authenticate { top: 23px; right: 64px; } .leftstuff_name { float: left; } .availablelisctext { font-size: 14px; color: #111111; text-align: left; } div.release { float: left; } @-moz-document url-prefix() { div.search-result-item .SkyFontsDownload button { line-height: 1; } } .no-touchevents div.search-result-item .favorite:hover, div.search-result-item .selected .favorite { background-image: url("/s/images/font_cards/favorite_selected.png"); } @media screen and (min-width: 2431px) { div.search-result-item div.product-image { width: 19.6%; margin-right: .4%; } } @media screen and (max-width: 2430px) { div.search-result-item .product-container div:nth-child(5) { display: none; } div.search-result-item .product-container div:nth-child(4) { margin-right: 0; } div.search-result-item .product-container div:first-child + div + div + div + div { display: none; } div.search-result-item .product-container div:first-child + div + div + div { margin-right: 0; } div.search-result-item div.product-image { width: 24.4%; margin-right: .8%; } } @media screen and (max-width: 1945px) { div.search-result-item .product-container div:nth-child(4) { display: none; } div.search-result-item .product-container div:nth-child(3) { margin-right: 0; } div.search-result-item .product-container div:first-child + div + div + div { display: none; } div.search-result-item .product-container div:first-child + div + div { margin-right: 0; } div.search-result-item div.product-image { width: 32.6%; margin-right: 1.1%; } } @media screen and (max-width: 1200px) { div.search-result-item .product-container div:nth-child(3) { display: none; } div.search-result-item .product-container div:nth-child(2) { margin-right: 0; } div.search-result-item .product-container div:first-child + div + div { display: none; } div.search-result-item .product-container div:first-child + div { margin-right: 0; } div.search-result-item div.product-image { width: 49%; margin-right: 2%; } } @media screen and (max-width: 720px) { div.search-result-item .product-container div:nth-child(2) { display: none; } div.search-result-item .product-container div:first-child + div { display: none; } div.search-result-item .product-container div:first-child { margin-right: 0; } div.search-result-item div.product-image { width: 100%; } div.search-result-item div.product-image img { max-height: none; margin: 0 auto; } #search_page h1:first-child { font-size: 26px; color: #4A4A4A; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } } @media screen and (max-width: 1024px) { div.search-result-item div.badge, div.search-result-item div.newbadge, div.search-result-item span.discount, div.search-result-item div.font-rank { display: none; } div.search-result-item div.item-details { margin-top: 2px; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { div.search-result-item div.badge { background: transparent url("/s/images/iconsets/myfonts/badge_star@2x.png") no-repeat; background-size: 20px; background-position: 0 2px; } .search-result-item .favorite { background-image: url("/s/images/font_cards/favorite@2x.png"); } .no-touchevents .search-result-item a.favorite:hover, .search-result-item div.selected .favorite { background-image: url("/s/images/font_cards/favorite_selected@2x.png"); } } @media screen and (max-width: 500px) { div.search-result-item .long-description { font-size: 13px; } div.search-result-item h4 a { font-size: 15px; } div.search-result-item div.item-details .description, div.search-result-item .availablelisctext { display: none; } div.search-result-item .rightstuff, div.search-result-item .leftstuff { width: 50%; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { div.search-result-item .long-description { clear: both; margin-left: 0; } .availablelisctext { display: none; } div.search-result-item div.sample { min-width: initial; padding-top: 0; } div.search-result-item div.item-details { text-align: right; } div.search-result-item h4 a, div.search-result-item .long-description, div.search-result-item div.item-details { font-size: 13px; } div.search-result-item div.newsletter .news-right { margin-left: 0; margin-top: 10px; } .search-result-item .fc-authenticate { left: -100px; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait) { div.search-result-item div.newsletter .news-right { float: left; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { div.search-result-item div.newsletter .news-right { float: none; } div.search-result-item div.newsletter .news-right p { -webkit-text-size-adjust: none; } div.search-result-item div.newsletter .news-image { width: inherit; margin-right: 10px; } } 

 #admin_login { background: #fff; margin: 0px auto 0; padding: 20px; width: 400px; } #admin_login h2 { color: #494c53; margin-bottom: 20px; } #admin_login h3.admin_login_error { color: #cc0000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: normal; margin-bottom: 5px; } #admin_login input[type=text], #admin_login input[type=password] { display: block; margin-top: 10px; width: 350px; } #admin_login input[type=submit].admin_button { margin-top: 20px; padding: 10px 20px; cursor: pointer; } #admin_login a.register { font-size: 16px; margin-left: 20px; } 

#secure_affiliate_admin div.structure_box { background-color: #F5F5F5; padding: 12px; margin-bottom: 12px; } #secure_affiliate_admin div.structure_box p { font-size: 11px; } #secure_affiliate_admin table { width: 100%; } #secure_affiliate_admin .note { color: #333; font-size: 11px; } ol.affiliate_list { margin-bottom: 12px; } ol.list_with_examples li, ul.list_with_examples li { padding-top: 3px; padding-bottom: 3px; } #secure_affiliate_admin .example { font-family: Courier, "Courier New", monospace; font-weight: bold; background-color: #FFFF99; padding: 6px; } #secure_affiliate_admin a .example { font-family: inherit; font-weight: inherit; padding-left: 2px; } ol.affiliate_list a.change { font-size: 10px; } ol.affiliate_list ul { font-size: 10px; } ol.affiliate_list ul li:before { content: "\00BB\0020"; font-size: 10px; } #secure_affiliate_admin img.silk { vertical-align: middle; position: relative; top: -2px; width: 16px; height: 16px; padding-right: 3px; } #secure_affiliate_admin h1 { padding-bottom: 12px; } #secure_affiliate_admin h3 { padding-top: 12px; } #affiliate_refby_status { font-size: 11px; color: #333; padding-left: 1em; padding-right: 1em; } 

#checkout_page div.indent { padding-left: 33px; } #checkout_page li { line-height: normal; } #checkout_page h2, #checkout_page h3, #checkout_page h4, #checkout_page h5 { margin-top: 1ex; clear: left; } #checkout_page h2.almostdone { margin-top: 0px; } #checkout_page h2.bigstep { clear: both; margin-top: 2em; } .warning { color: red; } ul.checkout_error_list { border: 1px solid red; background-color: #FFF0F0; padding: 1em; } ul.checkout_happy_list { border: 1px solid #008800; background-color: #F0FFF0; padding: 1em; } ul.checkout_error_list li { margin-left: 1em; color: black; } .account_description { font-weight: bold; } #checkout_page table.checkout_table { width: 99%; } #checkout_page table.checkout_table td, #checkout_page table.checkout_table th { vertical-align: top; text-align: left; } #checkout_page table.checkout_table th { font-weight: bold; font-size: 120%; padding-bottom: 1em; padding-top: 1em; } #billing_address_head, #promo_head, #billing_address_cell, #promo_cell, #shipping_address_head, #shipping_address_cell { border-left: 1px solid #999999; padding-left: 20px; } #billing_address_cell, #promo_cell { padding-bottom: 20px; } #promo_head, #promo_cell, #shipping_address_head, #shipping_address_cell { width: 33%; } #promo_cell p { font-size: 12px; } #promo_cell p.note { font-size: 11px; color: #666; } #gift_cert_input { width: 50%; } #checkout_page .checkout_table th.or { text-align: center; padding-left: 20px; padding-right: 20px; } #checkout_page .checkout_table th#new_card_label { position: relative; } #checkout_page .checkout_table img.cards_europe { clip: rect(0px, 149px, 21px, 74px); position: absolute; } #checkout_page .checkout_table td.one_of_these { width: 33%; } #checkout_page li.disabled, #checkout_page .one_of_these .account_note { color: #999999; } #payment_method_list li, #shipping_address_list li { margin-bottom: 3em; } th#new_card_label { white-space: nowrap; } th#new_card_label img { width: 149px; height: 21px; vertical-align: bottom; margin-left: 1em; } div.info_entry { margin-top: 1ex; } div.info_entry span.required { font-weight: bold; } div.info_entry input { width: 90%; } div.info_entry.cardNumber { float: left; } div.info_entry.cardNumber input { width: 12em; } div.info_entry.cardSecurityCode { float: left; margin-left: 1em; } div.info_entry.cardSecurityCode input { width: 3em; } div.info_entry.expirationDate { clear: left; width: auto; margin-bottom: 2em; } form.cc_entry_form, form.address_entry_form { clear: left; } div.info_entry.city, div.info_entry.state, div.info_entry.postCode { float: left; } div.info_entry.state, div.info_entry.postCode { margin-left: 1em; } div.info_entry.city input { width: 8em; } div.info_entry.state input, div.info_entry.postCode input { width: 5em; } div.info_entry.countryCode { clear: left; } div.info_entry.remember input { width: auto; } div.info_entry.stateNote { clear: left; font-size: smaller; } div.info_entry.cc_submit, div.info_entry.address_submit { text-align: center; } div.info_entry.cc_submit input, div.info_entry.address_submit input { width: auto; padding: 1em; } div.paypal_button { padding-left: 5em; } #totals_box { border-top: 1px solid black; text-align: right; padding-right: 6px; } #totals_box .vat_box { clear: both; padding-top: 15px; } #totals_table td.subtotal_header { border-top-style: none; padding-top: 0px; padding-bottom: 0px; padding-right: 18px; text-align: right; vertical-align: middle; } #totals_table td.subtotal_cell { border-top-style: none; padding-top: 0px; padding-bottom: 2px; text-align: right; vertical-align: middle; font-weight: bold; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } #totals_table td.total_header { font-size: larger; padding-top: 4px; padding-bottom: 2px; padding-right: 18px; border-top-style: none; vertical-align: middle; text-align: right; } #totals_table td.total_cell { font-size: larger; border-top: 1px solid black; text-align: right; vertical-align: middle; font-weight: bold; font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; } div.place_my_order { margin-top: 25px; } div.place_my_order input[type=submit] { float: right; } div.place_my_order a.process_order.disabled img { opacity: 0.5; filter: alpha(opacity=50); } p.return_to_cart { margin: 1em auto; } p#read_eula_error { color: red; font-weight: bold; } div#read_eula_error_img { position: relative; float: left; height: 20px; width: 33px; text-align: center; } div#read_eula_input { position: relative; float: left; } div#convert_balance_error { color: red; font-size: 14px; font-weight: bold; margin-top: 10px; } 

#payment_addendum table.contract_info tr td input[type=text] { width: 24em; } #payment_addendum table.contract_info tr td input.city { width: 10em; margin-right: 1em; } #payment_addendum table.contract_info tr td input.state { width: 5em; margin-right: 1em; } #payment_addendum table.contract_info tr td input.zip { width: 5em; } #payment_addendum .sign_input { padding-left: 10px; padding-right: 100px; } #payment_addendum .sign_input input[type=text] { width: 24em; } #payment_addendum .contract { padding-bottom: 24px; } #payment_addendum .sign_prefill { font-style: italic; } #payment_addendum form input.error { background-color: #FFE0E0; } 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } .contract_button, a.contract_button, input[type=button].contract_button, input[type=submit].contract_button { background: #0096FF; border: none; border-radius: 2px; box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.2), inset -2px -2px 5px rgba(0, 0, 0, 0.1); color: #fff !important; font-size: 16px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; letter-spacing: 1px; padding: 8px 20px; text-decoration: none; text-transform: uppercase; -webkit-transition: background 200ms ease-in-out; -moz-transition: background 200ms ease-in-out; -ms-transition: background 200ms ease-in-out; -o-transition: background 200ms ease-in-out; transition: background 200ms ease-in-out; } .contract_button.big, a.contract_button.big, input[type=button].contract_button.big, input[type=submit].contract_button.big { font-size: 18px; padding: 12px 24px; } .contract_button.small, a.contract_button.small, input[type=button].contract_button.small, input[type=submit].contract_button.small { padding: 8px 12px; } .contract_white_button, a.contract_white_button, input[type=button].contract_white_button, input[type=submit].contract_white_button { background: #fff; border: 1px solid #ddd; border-radius: 1px; box-shadow: inset 0px -1px 4px #f5f5f5; cursor: pointer; color: #444 !important; float: right; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 13px; margin: 0 0 0 5px; padding: 3px 8px; text-decoration: none; -moz-transition: border-color 200ms ease-in-out; -o-transition: border-color 200ms ease-in-out; -webkit-transition: border-color 200ms ease-in-out; transition: border-color 200ms ease-in-out; } .contract_white_button:hover, a.contract_white_button:hover, input[type=button].contract_white_button:hover, input[type=submit].contract_white_button:hover { border-color: #09f; } .contract_white_button.big, a.contract_white_button.big, input[type=button].contract_white_button.big, input[type=submit].contract_white_button.big { letter-spacing: 1px; padding: 5px 10px; text-transform: uppercase; } .contract_button:hover, input[type=button].contract_button:hover, input[type=submit].contract_button:hover { background: #0076DF; } input[type=text].contract_input, input[type=password].contract_input, textarea.contract_input { border: 1px solid #ddd; display: inline-block; font-size: 14px; padding: 5px 7px; -webkit-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -moz-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -ms-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; -o-transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out; } input[type=text].contract_input:focus, input[type=password].contract_input:focus, textarea.contract_input:focus { border-color: #09f; box-shadow: inset 0px 2px 3px #e6e6e6; outline: none; } #contract_wrapper { height: 100%; } body > #contract_wrapper { background: #404040; height: auto; min-height: 100%; } #contract_main { font-family: "Proxima-Nova-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; padding-bottom: 50px; } #contract_main a { color: #09f; } #contract_main b, #contract_main strong { font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #contract_main i, #contract_main em { font-family: "Proxima-Nova-Italic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; } #contract_main .grey { color: #666; } #contract_main h2 + p { margin-top: 1em; } #contract_wrapper + #myfontsLegal { color: #fff; text-align: center; position: relative; margin-top: -50px; height: 14px; padding: 18px 0; clear: both; } #contract_wrapper + #myfontsLegal a { color: #fff; text-decoration: underline; } #contract_wrapper + #myfontsLegal a:hover { color: #09f; } #contract_header { height: 90px; margin: 0 auto; overflow: hidden; position: relative; width: 960px; } #contract_header h1 { clear: none; } .contract_logo { background: url("/s/images/dev/dev_logo.png") center center no-repeat; background-size: 100px 50px; height: 50px; width: 100px; position: absolute; top: 32px; left: 0; } .contract_tools { color: #ccc; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; letter-spacing: 1px; line-height: 14px; text-transform: uppercase; position: absolute; top: 35px; left: 110px; width: 130px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .contract_logo { background: url("/s/images/dev/dev_logo@2x.png") center center no-repeat; background-size: 100px 50px; } } #contract_nav { list-style: none; position: absolute; top: 50px; left: 50%; margin-left: -240px; width: 750px; } #contract_nav li { float: left; height: 40px; margin-left: 40px; font-size: 14px; } #contract_nav li a { color: #fff; display: block; font-family: 'Proxima-Nova-Semibold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; height: 100%; padding-bottom: 4px; text-decoration: none; } #contract_nav li a:hover { color: #ddd; } @media only screen and (-webkit-max-device-pixel-ratio: 1.49) { #contract_nav li a.selected { background: url("/s/images/dev/dev_tab_selected.png") center bottom no-repeat; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #contract_nav li a.selected { background: url("/s/images/dev/dev_tab_selected@2x.png") center bottom no-repeat; background-size: 21.33337px 10px; } } #contract_user_menu { color: #fff; font-size: 12px; position: absolute; top: 6px; right: 0px; } #contract_user_menu .user_name { padding: 0 8px; } #contract_user_menu a { color: #fff; padding-bottom: 3px; margin: 0 8px; text-decoration: none; } #contract_user_menu a:hover { border-bottom: 1px solid #fff; color: #fff; } #contract_main .page { background: #fff; box-sizing: border-box; margin: 0 auto; overflow: auto; padding: 30px; position: relative; width: 960px; } #contract_main .page .sidebar { box-sizing: border-box; float: left; text-align: right; width: 10%; } #contract_main .page .sidebar a { display: block; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; margin-bottom: 12px; } #contract_main .page .sidebar a.selected { color: #000; } #contract_main .page .sidebar a.contract_button, #contract_main .page .sidebar a.contract_white_button { font-size: 14px; margin-bottom: 16px; } #contract_main .page .content { box-sizing: border-box; float: left; padding: 0; width: 80%; } #contract_main .page .content.full { width: 100%; } #contract_main .page .content hr { background: #ddd; border: none; height: 1px; margin-bottom: 10px; } #contract_main .page .content p { margin-bottom: 14px; } #contract_main .page .content ol { counter-reset: li; margin-left: 0; margin-bottom: 1em; padding-left: 0; } #contract_main .page .content ol li { position: relative; margin: 2px 0 2px 1.5em; list-style: none; } #contract_main .page .content ol li:before { content: counter(li) "."; counter-increment: li; position: absolute; top: -2px; left: -1.5em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 1.5em; margin-right: 8px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; text-align: center; } #contract_main .page .content .wide { width: 118%; } .contract_checkbox { display: none; display: inline-block \9; } .contract_checkbox + label { display: inline-block; margin-right: 10px; } .contract_checkbox + label .checkbox_image { background: url("/s/images/dev/dev_checkbox.png") center center no-repeat; background-size: 18px 18px; display: inline-block; display: none \9; height: 18px; width: 18px; position: relative; top: 4px; } .contract_checkbox + label:active .checkbox_image, .contract_checkbox:checked + label:active .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_active.png"); } .contract_checkbox:checked + label .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_checked.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .contract_checkbox + label .checkbox_image { background: url("/s/images/dev/dev_checkbox@2x.png") center center no-repeat; background-size: 18px 18px; } .contract_checkbox + label:active .checkbox_image, .contract_checkbox:checked + label:active .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_active@2x.png"); } .contract_checkbox:checked + label .checkbox_image { background-image: url("/s/images/dev/dev_checkbox_checked@2x.png"); } } #contract_dashboard { -webkit-font-smoothing: antialiased; } #contract_dashboard #contract_dashboard_tabs { float: left; width: 60%; } #contract_dashboard #contract_dashboard_tabs a { color: #777; display: inline-block; font-family: 'Proxima-Nova-Semibold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; margin-right: 20px; } #contract_dashboard #contract_dashboard_tabs a.selected { color: #000; font-size: 18px; } #contract_dashboard #contract_dashboard_search { width: 40%; float: right; position: relative; top: -15px; text-align: right; } #contract_dashboard #contract_dashboard_search input[type=text] { color: #666; font-family: 'Proxima-Nova-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 14px; width: 250px; } #contract_dashboard .contract_white_button { float: none; } #contract_dashboard .contract_white_button:hover { background: #fff; } #contract_dashboard .section { clear: both; width: 100%; } #contract_dashboard .section.loading { background: url("/s/images/iconsets/myfonts/spinner.gif") center center no-repeat; padding: 100px 0; } #contract_dashboard .section table { border-collapse: collapse; border-spacing: 0; width: 100%; } #contract_dashboard .section tr.contract td { border-top: 1px solid #ccc; vertical-align: top; padding: 20px 0; } #contract_dashboard ul.steps li { font-size: 16px; list-style: none; line-height: 24px; position: relative; } #contract_dashboard ul.steps li:before { background: #fff; border: 1px solid #999; border-radius: 50%; content: ''; position: absolute; top: 4px; left: -25px; width: 13px; height: 13px; } #contract_dashboard ul.steps li.passed, #contract_dashboard ul.steps li.attention, #contract_dashboard ul.steps li.failed { font-family: 'Proxima-Nova-Semibold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #contract_dashboard ul.steps li.passed:before { background: #009900; border-color: green; } #contract_dashboard ul.steps li.attention:before { background: #FFD24D; border-color: #FF8000; } #contract_dashboard ul.steps li.failed:before { background: #D93600; border-color: #8C0000; } #contract_dashboard #invite input[type=submit].foundry_button.big { position: relative; left: 365px; } #contract_dashboard #invite h2 { font-family: 'Proxima-Nova-Semibold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 22px; } #contract_dashboard #invite table.invite { margin-bottom: 30px; width: 530px; } #contract_dashboard #invite table.invite label { float: right; font-size: 16px; } #contract_dashboard #invite table.invite input[type=text] { width: 220px; } #contract_dashboard #invite table.invite td { padding: 5px 10px 5px 0; } #contract_dashboard #invite table.commission { font-size: 12px; } #contract_dashboard #invite table.commission tr:nth-child(even) { background: #f9f9f9; } #contract_dashboard #invite table.commission th { text-align: left; padding: 5px 5px 5px 10px; } #contract_dashboard #invite table.commission input[type=text] { width: 70px; text-align: right; } #contract_dashboard #invite table.commission td { padding: 5px; } #contract_dashboard #invite table.invited { font-size: 12px; } #contract_dashboard #invite table.invited tr:nth-child(even) { background: #f9f9f9; } #contract_dashboard #invite table.invited th { text-align: left; padding: 5px 5px 5px 10px; } #contract_dashboard #invite table.invited td { padding: 15px; } #contract_dashboard #invite table.invited td.link { padding: 12px 12px 10px 10px; } #contract_dashboard #invite #invite_foundry_selector { position: relative; z-index: 10; } #contract_dashboard #invite #invite_foundry_selector .loading { background-image: url("/s/images/foundry/foundry_selector_loading_grey.gif"); background-position: center center; background-repeat: no-repeat; background-size: 24px 24px; display: none; height: 24px; margin: 0 auto; position: absolute; width: 450px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #contract_dashboard #invite #invite_foundry_selector .loading { background-image: url("/s/images/foundry/foundry_selector_loading_grey@2x.gif"); } } #contract_dashboard #invite #invite_foundry_selector .error { background: #cc0000; border: 1px solid #990000; color: #fff; display: none; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: normal; margin-bottom: 5px; padding: 2px 7px; position: absolute; text-align: center; top: 30px; width: 250px; } #contract_dashboard #invite #invite_foundry_selector .dropdown { background: #fff; border: 1px solid #ddd; box-shadow: 0px 2px 6px #e6e6e6; border-top: none; display: none; max-height: 250px; overflow: auto; position: absolute; width: 234px; } #contract_dashboard #invite #invite_foundry_selector .dropdown .items { position: relative; } #contract_dashboard #invite #invite_foundry_selector .dropdown ul li { cursor: pointer; font-size: 12px; padding: 8px 12px; } #contract_dashboard #invite #invite_foundry_selector .dropdown ul li:hover { background: #f6f6f6; } #contract_dashboard #invite #invite_foundry_selector .dropdown ul li.selected { background: #09f; color: #fff; } #contract_dashboard .case-nav { background: #fff; height: 90px; padding: 25px 25px 0 25px; } #contract_dashboard .case-nav a { color: #000; font-size: 16px; padding: 8px 0; margin: 10px 20px 10px 0; text-decoration: none; } #contract_dashboard .case-nav a:hover, #contract_dashboard .case-nav a.selected { border-bottom: 2px solid #1990FF; } #contract_dashboard .case-nav a.selected { font-weight: bold; } #contract_dashboard .case-nav a#back-to-dash { float: right; padding: 8px 12px; } #contract_dashboard .case-nav a#back-to-dash:hover { border-bottom-width: 1px; } #contract_dashboard .case-nav h1 { font-family: 'Proxima-Nova-Semibold', 'Lucida Grande', 'Lucida Sans Unicode', 'Trebuchet MS', sans-serif; font-size: 22px; margin-bottom: 10px; clear: none; } #contract_dashboard .case-nav .new_foundry { font-size: 14px; font-style: italic; color: #1990FF; } #contract_dashboard .case a { color: #000; } #contract_dashboard .case a.add-document, #contract_dashboard .case a.add-comment { background-position: left center; background-repeat: no-repeat; display: inline-block; line-height: 20px; margin-top: 10px; margin-right: 20px; } #contract_dashboard .case a.add-document { background-image: url("/s/images/contract_dashboard/add-document.png"); padding-left: 20px; } #contract_dashboard .case a.add-comment { background-image: url("/s/images/contract_dashboard/add-comment.png"); padding-left: 24px; } #contract_dashboard .case a.add-comment.foundry_button { padding-left: 30px; background-position: 6px center; } #contract_dashboard .case h3 { font-size: 17px; } #contract_dashboard .case h3.inline { display: inline-block; } #contract_dashboard .case .custom-radio { display: none; display: inline-block \9 ; } #contract_dashboard .case .custom-radio + label { display: inline-block; margin-right: 10px; padding-left: 25px; position: relative; } #contract_dashboard .case .custom-radio + label .radio-image { border: 1px solid #888; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-size: 9px 9px; display: inline-block; display: none \9 ; height: 15px; width: 15px; position: absolute; top: 0; left: 0; } #contract_dashboard .case .custom-radio + label:active .radio-image { background-image: url("/s/images/contract_dashboard/radio-selected.png"); } #contract_dashboard .case .custom-radio:checked + label .radio-image { background-image: url("/s/images/contract_dashboard/radio-selected.png"); } #contract_dashboard .case .loading, #contract_dashboard .case .save-success, #contract_dashboard .case .save-error { font-weight: bold; display: inline-block; position: relative; left: 15px; height: 20px; } #contract_dashboard .case .loading { background: url("/s/images/iconsets/myfonts/spinner.gif") center center no-repeat; top: 5px; width: 20px; } #contract_dashboard .case .save-success { color: #006600; } #contract_dashboard .case .save-error { color: #cc0000; } #contract_dashboard .case .dropzone { margin: 10px 0; } #contract_dashboard .case .dropzone .target { background: #fcfcfc; border: 2px dashed #ccc; border-radius: 5px; height: 150px; text-align: center; width: 430px; } #contract_dashboard .case .dropzone .target.hover, #contract_dashboard .case .dropzone .target:active { border-color: #09f; } #contract_dashboard .case .dropzone .target .attach { background: url("/s/images/contract_dashboard/add-document.png") 8px 2px no-repeat; margin: 62px 0; padding-left: 30px; } #contract_dashboard .case .dropzone.active .target { background-image: url("/s/images/iconsets/myfonts/spinner.gif"); background-position: center 100px; background-repeat: no-repeat; } #contract_dashboard .case .dropzone .cancel { display: inline-block; margin-top: 5px; } #contract_dashboard .case textarea { border: 1px solid #ccc; margin-top: 5px; outline: none; padding: 5px; -webkit-transition: border-color 200ms ease-in-out; -moz-transition: border-color 200ms ease-in-out; -ms-transition: border-color 200ms ease-in-out; -o-transition: border-color 200ms ease-in-out; transition: border-color 200ms ease-in-out; } #contract_dashboard .case textarea:focus { border-color: #09f; } #contract_dashboard .case .item { margin: 20px 0; } #contract_dashboard .case .item h3 input[type=button] { margin-left: 10px; } #contract_dashboard .case .item textarea { display: block; height: 100px; width: 420px; } #contract_dashboard .case .item .description { display: inline-block; max-width: 700px; } #contract_dashboard .case .foundry-info { margin: 15px 0 30px; } #contract_dashboard .case .foundry-info label { display: inline-block; font-family: 'Proxima-Nova-Semibold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 5px; } #contract_dashboard .case .foundry-info p { margin: 0; } #contract_dashboard .case .editable .buttons, #contract_dashboard .case .editing .buttons { margin-top: 10px; overflow: auto; width: 410px; } #contract_dashboard .case .editable .buttons.loading, #contract_dashboard .case .editing .buttons.loading { background: url("/s/images/iconsets/myfonts/spinner.gif") left top no-repeat; } #contract_dashboard .case .editable .buttons .error-msg, #contract_dashboard .case .editing .buttons .error-msg { color: red; } #contract_dashboard .case .editable .buttons .foundry_button, #contract_dashboard .case .editing .buttons .foundry_button { float: right; margin-left: 10px; } #contract_dashboard .case .editable input[type=text], #contract_dashboard .case .editing input[type=text] { margin-right: 5px; } #contract_dashboard .case .editable textarea, #contract_dashboard .case .editing textarea { display: block; width: 400px; height: 80px; } #contract_dashboard .case .editable textarea.error, #contract_dashboard .case .editing textarea.error { border-color: red; } #contract_dashboard .case .document { background: url("/s/images/contract_dashboard/document.png") left top no-repeat; margin: 15px 0; padding-left: 20px; } #contract_dashboard .case .document a { color: black; text-decoration: none; } #contract_dashboard .case .document a:hover { text-decoration: underline; } #contract_dashboard .case .document h4, #contract_dashboard .case .document span { display: inline-block; margin: 3px 10px 3px 0; } #contract_dashboard .case .document .comment { margin: 0; } #contract_dashboard .case .document #file_type { margin: 3px 5px; } #contract_dashboard .case span.document { display: inline-block; line-height: 22px; margin: 0; } #contract_dashboard .case .comment { margin: 15px 0; } #contract_dashboard .case .comment h4 { font-family: 'Proxima-Nova-Semibold', 'Lucida Grande', 'Lucida Sans Unicode', 'Trebuchet MS', sans-serif; } #contract_dashboard .case .comment h4, #contract_dashboard .case .comment span { display: inline-block; font-weight: normal; margin: 3px 10px 3px 0; } #contract_dashboard .case .comment p { font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 13px; margin: 3px 0; } #contract_dashboard .case .changelog .deleted { opacity: 0.6; } #contract_dashboard .case .changelog td { border-top: 1px solid #eee; padding: 10px; } #contract_dashboard .case .changelog tr:first-child td { border-top: none; } #contract_dashboard .case .changelog .comment { display: block; font-style: italic; margin: 5px 0 0 0; } #contract_dashboard .case .changelog .document { display: block; margin: 5px 0 0 0; padding: 2px 0 2px 20px; } #contract_dashboard .case .questions h3 { margin: 10px 0; } #contract_dashboard .case .questions li { padding-bottom: 20px; } #contract_dashboard .case .questions input[type=radio] + label { margin-bottom: 5px; } #contract_dashboard .new_foundry { font-style: italic; font-size: 12px; } 

 #dev_login { background: #fff; margin: 50px auto 0; padding: 20px; width: 400px; } #dev_login h2 { color: #494c53; margin-bottom: 20px; } #dev_login h3.dev_login_error { color: #cc0000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: normal; margin-bottom: 5px; } #dev_login input[type=text], #dev_login input[type=password] { display: block; margin-top: 10px; width: 350px; } #dev_login input[type=submit].dev_button { margin-top: 20px; padding: 10px 20px; cursor: pointer; } #dev_login a.register { font-size: 16px; margin-left: 20px; } 

 #dev_newuser { background: #fff; margin: 50px auto 0; width: 400px; padding: 20px; } #dev_newuser h2 { color: #494c53; margin-bottom: 20px; } #dev_newuser h3.dev_newuser_error { color: #cc0000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: normal; margin-bottom: 5px; } #dev_newuser label { display: block; font-family: "Proxima-Nova-Semibold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-top: 10px; } #dev_newuser input[type=text], #dev_newuser input[type=password] { display: block; margin-top: 5px; width: 350px; } #dev_newuser input[type=submit].dev_button { margin-top: 20px; padding: 10px 20px; cursor: pointer; } #dev_newuser select { margin: 5px 0 10px; } 

#foundry_admin form + h4 { margin-top: 12px; } #foundry_admin p#ask_about_new_user { border: 2px solid red; padding: 1em; } #permissions_description { float: right; border: 1px solid black; padding: 1em; width: 360px; } ul.permlist { padding-bottom: 0.5em; } ul.permlist > li { padding-left: 0.5em; display: inline; } ul.permlist > li.disabled { color: #999; } 

#foundry_contract { background: #fff; box-sizing: border-box; box-shadow: 0px 0px 15px #e5e5e5; font-family: 'Proxima-Nova-Regular', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 0 auto 50px; overflow: visible; padding: 30px; width: 960px; } #foundry_contract h2, #foundry_contract h3, #foundry_contract strong { font-family: 'Proxima-Nova-Semibold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #foundry_contract h2 { font-size: 19px; } #foundry_contract h3.foundry_name { font-size: 19px; margin-top: 20px; } #foundry_contract form label { display: block; font-size: 16px; margin: 15px 0 5px; } #foundry_contract form input[type=text].error { border-color: #cc0000; } #foundry_contract form select { display: block; } #foundry_contract form input[type=submit].foundry_button { margin-top: 10px; } #foundry_contract #contract_body { color: #444; margin-top: 50px; } #foundry_contract #contract_body h1 { font-size: 18px; } #foundry_contract #contract_body p { margin: 1.5em 0; font-size: 16px; } #foundry_contract #contract_body th, #foundry_contract #contract_body td { padding: 10px; font-size: 14px; } #foundry_contract #contract_body #pricing { font-size: 16px; margin: 0.5em 0; } #foundry_contract #overview { margin-top: 30px; } #foundry_contract #overview td { padding: 10px; } #foundry_contract #print_contract { float: right; } 

 #foundry_login { margin: 50px auto 0; width: 400px; } #foundry_login h2 { color: #494c53; margin-bottom: 20px; } #foundry_login h3.foundry_login_error { color: #cc0000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: normal; margin-bottom: 5px; } #foundry_login input[type=text], #foundry_login input[type=password] { display: block; margin-top: 10px; width: 350px; } #foundry_login input[type=submit].foundry_button { margin-top: 20px; padding: 10px 20px; cursor: pointer; } 

 #giftcert_widget p.error { border: 1px solid #C00; background-color: #fdd; padding: 12px; } table.giftcert_entry.error, #giftcert_payment.error, #giftcert_about_you.error { background-color: #fdd; } table.giftcert_entry th.error, #giftcert_payment .error, #giftcert_about_you .error { text-align: left; color: #C00; } table.giftcert_entry.success { background-color: #dfd; } table.giftcert_entry th.success { text-align: left; color: black; } table.giftcert_entry, #giftcert_payment, #giftcert_about_you, #giftcert_success { background-color: #f4f4f4; margin-bottom: 6px; } #giftcert_payment, #giftcert_about_you, #giftcert_success { background-color: #f4f4f4; padding: 12px; margin-bottom: 24px; } table.giftcert_entry thead th { text-align: left; } table.giftcert_entry th { padding-left: 12px; padding-top: 6px; padding-bottom: 6px; padding-right: 3px; border-style: none; text-align: right; font-weight: normal; white-space: nowrap; } table.giftcert_entry th.required { font-weight: bold; } table.giftcert_entry td { border-style: none; padding-top: 6px; padding-bottom: 6px; } table.giftcert_entry ul.preset_amounts { display: inline; } table.giftcert_entry ul.preset_amounts li { display: inline; padding-right: 1em; } table.giftcert_entry input[type=number] { width: 6em; } table.giftcert_entry input[type=email] { width: 32em; } table.giftcert_entry textarea { width: 32em; height: 6em; } table.giftcert_entry td.note { font-size: 92%; color: #666; vertical-align: top; padding-left: 12px; padding-right: 12px; } table.giftcert_entry a.remove { position: relative; top: -3px; padding: 3px; display: block; float: right; } table.giftcert_entry a.remove:hover { background-color: white; } #giftcert_about_you span.sender_email { font-style: italic; } #giftcert_about_you input { width: 33%; } ul#giftcert_payment_methods li { padding-bottom: 6px; } 

.login_errormsg { font-weight: bold; color: #cc0000; } #signInPage { box-sizing: border-box; color: #333; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 0 auto; max-width: 665px; padding: 10px 20px; -webkit-font-smoothing: antialiased; } #signInPage form { display: block; max-width: 380px; } #signInPage h1, #signInPage h2, #signInPage input[type=submit] { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #signInPage h1 { font-size: 30px; } #signInPage h2 { font-size: 16px; margin: 10px 0 25px; } #signInPage label { display: block; font-size: 20px; } #signInPage input[type=text], #signInPage input[type=password] { box-sizing: border-box; margin-top: 10px; width: 100%; } #signInPage input[type=text].error, #signInPage input[type=password].error { border-color: #c00; color: #000; } #signInPage input[type=text].error:focus, #signInPage input[type=password].error:focus { border-color: #09f; } #signInPage input[type=submit] { font-size: 20px; padding: 10px 45px; text-transform: uppercase; } #signInPage input[type=checkbox] { display: inline-block\9; float: left; margin: 5px 10px 0 0; } #signInPage .checkbox_image { margin-right: 5px; } #signInPage .error { color: #cc0000; font-size: 16px; font-weight: normal; } #signInPage .field { margin: 15px 0; } #signInPage #reset_password_link { font-size: 14px; float: right; line-height: 24px; } @media (min-width: 640px) { #signInPage { padding: 30px; } #signInPage h2 { font-size: 20px; margin: 10px 0 35px; } #signInPage .field { margin: 25px 0; } } 

table.newsletterTable thead tr th { text-align: center; padding-right: 35px; } table.newsletterTable tbody tr td { text-align: center; padding-right: 35px; } table.newsletterTable tbody tr td a { text-decoration: none; } input.newsletterAddButton { margin-left: 50px; } .newsletterManagerLabel { padding-top: 15px; padding-left: 9px; } label.newsletterManagerLabel { padding-left: 10px; padding-right: 10px; } 

#newuser_page .error { color: red; } div.newuser_field .explanation { font-size: smaller; } div.newuser_field { margin-bottom: 1em; } div.newuser_field input { box-sizing: border-box; width: 100%; } p.newuser_desc { clear: left; font-size: small; } #newuser_firstname, #newuser_password { float: left; width: 15em; } #newuser_lastname, #newuser_confirm { float: left; margin-left: 1em; width: 15em; } #newuser_name, #newuser_email, #newuser_country, #newuser_submit, #newuser_question, #newuser_answer { clear: left; width: 31em; } 

#partner_admin table#new_partner tr td { padding: 3px; } #partner_admin table#new_partner tr td:first-child { text-align: right; } #partner_admin .hidden { visibility: none; } #partner_admin table.results { margin-bottom: 24px; width: 100%; } #partner_admin table.results tr th, #partner_admin table.results tr td { text-align: left; vertical-align: top; border-bottom: 1px solid black; padding: 6px; } #partner_admin table.results tr th { background-color: #999; color: white; } 

 #payments_admin a.cancel { color: red; } #payments_admin .old_browser { border: 3px solid red; background-color: #FFF0F0; padding: 1em; } #manual_payment_form table tr td { padding: 0.5em; } #manual_payment_form table tr td:first-child { text-align: right; } div.page_section { margin-bottom: 1em; border-bottom: 1px solid black; padding-bottom: 1em; } ul.payments_to_approve li { padding-bottom: 0.5em; } ul.payment_plan_include li { display: inline; padding-right: 1em; } div.replace_to_process { display: inline; } div.replace_to_process iframe { width: 360px; height: 24px; border-style: none; } /* #current_payees { float: left; } */ #current_payees > li { margin-bottom: 1em; } #current_payees > li.error { padding: 1em; border: 1px solid red; background-color: #FFF0F0; } #current_payees > li.error div.error { font-weight: bold; color: red; } /* #current_payees > li:hover { background-color: #F8F8F8; } */ ul li form.account_linkup { padding-left: 0.5em; } #add_existing_account { margin-bottom: 24px; } #payments_admin table.add_payee_account tr th { border-top: 1px solid black; padding: 1em 3px; text-align: left; } #payments_admin table.add_payee_account tr td { padding: 3px; } #payments_admin table.add_payee_account tr td:first-child { text-align: right; } #payments_admin form input.error { background-color: #FFE0E0; } #payments_admin form select.error { color: red; } #payments_admin table.add_payee_account tr td input[type=text] { width: 24em; } #payments_admin table.add_payee_account tr td input.city { width: 10em; margin-right: 1em; } #payments_admin table.add_payee_account tr td input.state { width: 5em; margin-right: 1em; } #payments_admin table.add_payee_account tr td input.zip { width: 5em; } div.payment_methods_terms { border: 1px solid #E58C18; background-color: #FFFFF0; float: right; padding: 12px; } div.payment_methods_terms ul { font-weight: bold; } div.payment_methods_terms ul ul { font-weight: normal; padding-left: 0.5em; } #minimum_payment_method, #minimum_payment_amount { font-weight: bold; } table.royalties { margin-bottom: 24px; width: 100%; } #payments_admin div.income_statement { float: right; } table.form1099 { margin-bottom: 24px; border-collapse: collapse; } table.form1099 td { border: 2px solid black; vertical-align: top; padding: 2px 6px 12px; font-family: Courier, monospace; font-size: large; } table.form1099 label { display: block; font-size: x-small; font-family: sans-serif; white-space: nowrap; } table.form1099 label:first-child { margin-bottom: 12px; } table.form1099 label .boxnum { padding-right: 1ex; } table.form1099 #idType label { display: inline-block; margin: 0 5px 0 10px; } table.form1099 #idType label:first-child { margin-left: 0; } table.form1099 input.foundry_button.blue:disabled { background-color: #999; border-color: #999; } table.form1099 h1 { font-family: sans-serif; font-weight: bold; font-size: xx-large; text-align: center; margin: 0; padding: 12px; } table.form1099 td.disclaimer { font-family: sans-serif; font-size: small; border-top-style: none; border-right-style: none; } 

#payments_trans table.trans_search tr td { padding: 3px; } #payments_trans table.trans_search tr td:first-child { text-align: right; } #payments_trans table.search_results { margin-bottom: 24px; width: 100%; } #payments_trans table.search_results tr th, #payments_trans table.search_results tr td { text-align: left; vertical-align: top; border-bottom: 1px solid black; padding: 6px; } #payments_trans table.search_results tr th { background-color: #999; color: white; } #payments_trans .error { font-weight: bold; color: red; } 

#pdf_receipts h3 { padding: 12px 0; } #pdf_receipts input[type=search] { width: 24em; } 

#secure_reports form input[name=url] { width: 32em; } div#scan_results { margin-top: 12px; border: 1px solid black; padding: 12px; } #webfont_scan_filters p { display: inline-block; padding-right: 24px; } table#user_webfont_sites { border-collapse: collapse; } table#user_webfont_sites tr th, table#user_webfont_sites td { vertical-align: top; text-align: left; border: 1px solid black; padding: 3px; } table#user_webfont_sites input[type=number] { width: 2em; } table#user_webfont_sites textarea { width: 16em; height: 3em; } #affiliate_report_form { display: inline-block; border: 1px solid black; padding: 12px; margin-bottom: 24px; } #affiliate_report_form div.select { display: inline-block; padding-right: 12px; } #affiliate_report_table tr th a { color: inherit; } #affiliate_report_table td.number.negative { color: #C00; } 

#webfontbuild tr td { font-size: 0.9em; padding: 10px; text-align: center; } #webfontbuild tr th { font-size: 1.1em; padding: 10px; } #webfontbuild { margin-left:auto; margin-right:auto; } #formelementscontain { margin-left:auto; margin-right:auto; } #webfont_build_search_form .buildSearch { width: 20%; } 

div#secure_webfonts_admin table { width: 60%; } div#secure_webfonts_admin table tr td { padding-bottom: 6px; font-size: 14px; white-space: nowrap; } 

#secure_webfonts_pricing table.pretty_table td { text-align: right; } .invalid { border: 1px #d14646 solid; background-color: #ff9595; padding-bottom: 5px; padding-left: 5px; height: 22px; } .suggestedvalue { border: 1px #878d59 solid; background-color: #e6edad; padding-bottom: 5px; padding-left: 5px; height: 22px; margin-top: 5px; } .comparebtn { height: 30px; background-color: #499709; color: #ffffff; } #resettierdefaults { text-decoration: none; color: #0099ff; font-size: 12px; line-height: 12px; } #secure_webfonts_pricing input[type=radio] { vertical-align: middle; } .jqplot-target { position: absolute; color: #666666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 1em; /* height: 300px; width: 400px;*/ } .jqplot-axis { font-size: 0.75em; } .jqplot-xaxis { margin-top: 10px; } .jqplot-x2axis { margin-bottom: 10px; } .jqplot-yaxis { margin-right: 10px; } .jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px; margin-right: 10px; } .jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { position: absolute; white-space: pre; } .jqplot-xaxis-tick { top: 0px; left: 15px; vertical-align: top; } .jqplot-x2axis-tick { bottom: 0px; left: 15px; vertical-align: bottom; } .jqplot-yaxis-tick { right: 0px; top: 15px; text-align: right; } .jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0px; padding: 1px 5px 1px 5px; z-index: 2; font-size: 1.5em; } .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0px; top: 15px; text-align: left; } .jqplot-yMidAxis-tick { text-align: center; white-space: nowrap; } .jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute; } .jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute; } .jqplot-yaxis-label { margin-right: 10px; font-size: 11pt; position: absolute; } .jqplot-yMidAxis-label { font-size: 11pt; position: absolute; } .jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { font-size: 11pt; margin-left: 10px; position: absolute; } .jqplot-meterGauge-tick { font-size: 0.75em; color: #999999; } .jqplot-meterGauge-label { font-size: 1em; color: #999999; } table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; } table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255, 255, 255, 0.6); border: 1px solid #69AF33; position: absolute; font-size: 0.75em; } td.jqplot-table-legend { vertical-align: middle; } /* These rules could be used instead of assigning element styles and relying on js object properties. */ /* td.jqplot-table-legend-swatch { padding-top: 0.5em; text-align: center; } tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { padding-top: 0px; } */ td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer; } .jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through; } div.jqplot-table-legend-swatch-outline { border: 1px solid #cccccc; padding: 1px; } div.jqplot-table-legend-swatch { width: 0px; height: 0px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; } .jqplot-title { top: 0px; left: 0px; padding-bottom: 0.5em; font-size: 1.2em; } table.jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; } .jqplot-cursor-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208, 208, 208, 0.5); padding: 1px; } .jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #cccccc; font-size: 0.75em; white-space: nowrap; background: rgba(208, 208, 208, 0.5); padding: 1px; } .jqplot-point-label { font-size: 0.75em; z-index: 2; } td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center; } div.jqplot-cursor-legend-swatch { width: 1.2em; height: 0.7em; } .jqplot-error { text-align: center; } .jqplot-error-message { position: relative; top: 46%; display: inline-block; } div.jqplot-bubble-label { font-size: 0.8em; padding-left: 2px; padding-right: 2px; color: #333333; } div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(230, 230, 230, 0.7); } div.jqplot-noData-container { text-align: center; background-color: rgba(245, 245, 245, 0.3); } .optionselected { background-color: #d7ecc5; } .optionnotselected { background-color: #f5f5f5; } .grayheader { background-color: #7a7a7a; border-right: solid 1px white; color: #ffffff; text-align: center; width: 110px; height: 25px; font-size: 13px; } .greenheader { background-color: #69af33; color: #ffffff; text-align: center; width: 100px; font-size: 13px; } .drkgray { background-color: #e2e2e2; border-right: solid 1px white; text-align: right; padding-right: 10px; height: 22px; } .npdrkgreen { background-color: #d7ecc5; text-align: right; padding-right: 10px; } .ltgray { background-color: #f5f5f5; border-right: solid 1px white; text-align: right; padding-right: 10px; height: 22px; } .npltgreen { background-color: #eef7e6; text-align: right; padding-right: 10px; } .stdgrayheader { background-color: #f5f5f5; border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc; padding: 5px 10px 5px 10px; margin-top: 10px; margin-bottom: 15px; } .stdgrayheaderttl { font-size: 14px; width: 150px; float: left; margin-top: 4px; } .stdgrayheaderdata { font-size: 12px; width: 300px; float: left; text-align: left; color: #666666; line-height: 40px; } .tieredrowsreadonly { clear: left; padding: 0px; margin: 0px; } .tieredrows { clear: both; padding-top: 6px; } .tieredrows div, .tieredrowsreadonly div { float: left; text-align: left; color: #545454; } .removetier { width: 30px; cursor: pointer; } .addtier { width: 30px; cursor: pointer; } .emptyminustier { width: 30px; } .tierfactor { width: 50px; } .moreinfolink { margin-right: 10px; text-decoration: none; color: #0099ff; } .planheader { font-size: 18px; width: 150px; float: left; margin-top: 3px; line-height: 40px; } #secure_webfonts_pricing_unlimited { padding-top: 6px; } .pageviewmonth { font-size: 12px; width: 125px; float: left; text-align: left; color: #000000; padding-top: 6px; line-height: 30px; } .pageviewfactor { font-size: 12px; width: 150px; float: left; text-align: left; color: #000000; padding-top: 6px; line-height: 30px; } #modalchangessaved { text-align: left; } .messagebox { background-color: #F5F5F5; padding: 5px; margin: 10px 0px; border: 1px solid #DBDBDB; text-align: left; } .confirmbox { background-color: #F2FFDB; color: #151515; border: 1px solid #9C6; margin: 10px 0px; padding: 5px; text-align: left; } .tiermessageholder div { float: left; margin-top: -5px; } .tiermessagepointer { width: 9px; height: 35px; background-image: url("/s/images/iconsets/myfonts/tierleftpointergreen.jpg"); background-repeat: no-repeat; background-position: center left; } .tiermessage { height: 30px; width: 330px; background-color: #ffffdd; border-top: solid 1px #8ac25f; border-bottom: solid 1px #8ac25f; border-right: solid 1px #8ac25f; padding-left: 5px; padding-top: 4px; line-height: 12px; } .tiermessageholderred div { float: left; margin-top: -5px; } .tiermessagepointerred { width: 9px; height: 27px; background-image: url("/s/images/iconsets/myfonts/tierleftpointerred.jpg"); background-repeat: no-repeat; background-position: center left; } .tiermessagered { height: 20px; width: 270px; background-color: #ffffdd; border-top: solid 1px #fe5955; border-bottom: solid 1px #fe5955; border-right: solid 1px #fe5955; padding-left: 5px; padding-top: 6px; line-height: 12px; } .stderror { height: 20px; width: 350px; background-color: #ffffdd; border-left: solid 1px #fe5955; border-top: solid 1px #fe5955; border-bottom: solid 1px #fe5955; border-right: solid 1px #fe5955; padding-left: 5px; padding-top: 6px; line-height: 12px; } .inputboxerror { background-color: #fe5955; } 

table.remove_whitelist_table thead tr th { text-align: left; padding-left: 25px; } table.remove_whitelist_table tbody tr td { text-align: center; padding-right: 35px; } 

.mls-send-page { text-align: center; margin: 0 -10px -30px; color: #969696; } @media screen and (min-width: 768px) { .mls-send-page { margin: 0 -20px -30px; } } @media screen and (min-width: 1200px) { .mls-send-page { margin: 0 -2% -30px; margin: 0 calc(-2% - 1px) -30px; } } .mls-send-page .content { max-width: 990px; margin: 0 auto; padding: 4em 1em; } @media screen and (max-width: 640px) { .mls-send-page .content { padding: 3em 1.5em; } } .mls-send-page .content.first { padding-top: 1em; } .mls-send-page h2 { font-size: 40px; margin-bottom: 12px; color: #4a4a4a; } .mls-send-page h2 + p { font-size: 18px; max-width: 45em; margin: 0 auto; } .mls-send-page h2 + p.expired { max-width: 32em; } @media screen and (max-width: 640px) { .mls-send-page h2 { font-size: 28px; line-height: 1.1; margin-bottom: 18px; } } .mls-send-page h3 { font-size: 30px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 36px; } .mls-send-page .site-logo { margin: 30px auto; } .mls-send-page .slice { color: rgba(150, 150, 150, 0.9); } .mls-send-page .slice.gray { background-color: #f4f4f4; } .mls-send-page .slice.darkgray { background-color: #4a4a4a; color: #fff; } .mls-send-page .slice .content { padding: 4em 1em; } @media screen and (max-width: 640px) { .mls-send-page .slice .content { padding: 3em 1.5em; } } .mls-send-page .slice h4 { font-size: 30px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; margin-bottom: 40px; } .mls-send-page .cta small { display: block; margin-top: 5px; margin-bottom: 10px; } .mls-send-page .cta button { padding: 12px 35px; margin: 0; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .mls-send-page .cta input[name="accept-marketing"] { margin-top: 15px; } .mls-send-page .cta .SkyFontsDownload button, .mls-send-page .cta .SkyFontsDownloadAll button, .mls-send-page .cta .SkyFontsTrial button { background-color: #09f; font-size: 17px; padding: 12px 35px; } .mls-send-page .cta .SkyFontsDownload button:hover, .mls-send-page .cta .SkyFontsDownloadAll button:hover, .mls-send-page .cta .SkyFontsTrial button:hover { background-color: #078adb; } .mls-send-page .cta .SkyFontsTrial:hover button { background-color: #078adb; } .mls-send-page .cta .SkyFontsTrial div.help .help_tooltip { position: absolute; left: 50%; margin-left: 0; transform: translateX(-50%); top: 100%; margin-top: 10px; } .mls-send-page .cta .SkyFontsTrial.InProgress button { background: #4a4a4a; padding: 5px 10px; } .mls-send-page .cta .SkyFontsTrial.InProgress button .progress-radial { float: none; top: 0; left: 0; margin: 0 auto; } .mls-send-page .cta .SkyFontsTrial.InProgress:hover button { background: #000; } .mls-send-page .cta .terms { font-size: 12px; } .mls-send-page .cta .terms a { color: rgba(150, 150, 150, 0.9); text-decoration: underline; } .mls-send-page .cta .terms a:hover { text-decoration: none; } .mls-send-page .font-info { margin-bottom: 50px; } .mls-send-page .font-info li { display: inline-block; font-size: 14px; } .mls-send-page .font-info li + li:before { content: '|'; display: inline-block; margin: 0 8px; } .mls-send-page .font-info li span { color: #4a4a4a; } .mls-send-page .content.expired .sample { opacity: 0.2; } .mls-send-page .slice.expired { position: relative; z-index: 1; height: 332px; margin-bottom: -332px; margin-top: -66px; background: transparent url("/s/images/send/expired-footer.jpg") no-repeat; background-size: cover; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .mls-send-page .slice.expired { background-image: url("/s/images/send/expired-footer@2x.jpg"); background-size: cover; } } .mls-send-page .slice.expired .content { display: none; } .mls-send-page .sample { display: block; margin: 0 auto 40px; max-width: 100%; max-height: 50px; } .mls-send-page .or { margin: 15px auto; position: relative; } .mls-send-page .or span { display: inline-block; padding: 3px 6px; z-index: 1; background: #fff; position: relative; } .mls-send-page .or:before { content: ' '; border-bottom: 1px solid #ccc; position: absolute; height: 1px; width: 100%; max-width: 500px; margin: 0 auto; left: 50%; margin-left: -250px; top: 12px; } .mls-send-page .mls-logo-before:before { width: 15px; height: 15px; } .mls-send-page .mls-logo-before + p { max-width: 37em; margin: 0 auto 20px; } .mls-send-page .three-col { margin: 0 auto; } .mls-send-page .three-col > div, .mls-send-page .three-col > li { display: inline-block; width: 33%; vertical-align: top; } .mls-send-page .three-col h4 { font-size: 16px; color: #4a4a4a; text-transform: uppercase; letter-spacing: 0.08em; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 10px; font-weight: 700; } .mls-send-page .three-col p { font-size: 17px; max-width: 17em; margin: 0 auto 25px; } @media screen and (max-width: 640px) { .mls-send-page .three-col > div, .mls-send-page .three-col > li { display: block; width: 100%; margin-top: 20px; } } .mls-send-page ol { list-style: none; } .mls-send-page ol.with-numbers { } .mls-send-page ol.with-numbers li:before { content: attr(data-count); color: #09f; font-size: 33px; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-align: center; margin: 0 auto 16px; display: block; } .mls-send-page ol > li { margin: 0; } .mls-send-page .faqs { margin: 0 auto 50px; text-align: left; color: rgba(255, 255, 255, 0.72); } .mls-send-page .faqs > div { display: inline-block; vertical-align: top; margin-right: 2.5%; width: 45%; } .mls-send-page .faqs > div:last-child { margin-right: 0; margin-left: 2.5%; } @media screen and (max-width: 640px) { .mls-send-page .faqs > div { width: auto; display: block; margin-right: 0; } .mls-send-page .faqs > div:last-child { margin-left: 0; } } .mls-send-page .faqs h5 { text-transform: uppercase; letter-spacing: 0.03em; font-size: 15px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; margin-bottom: 8px; } .mls-send-page .faqs p { font-size: 15px; margin-bottom: 25px; } .mls-send-page .faqs a { color: #fff; } 

 div.size_slider_widget { position: relative; background-image: url(/s/w/testdrive/slider-bg.gif); background-repeat: no-repeat; width: 96px; height: 18px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { div.size_slider_widget { background-image: url(/s/w/testdrive/slider-bg@2x.gif); background-size: 96px 18px; } } * html div.size_slider_widget { top: 1px; } div.size_slider_track { position: absolute; left: 16px; top: 0px; width: 60px; overflow: visible; } div.size_slider_shoutout { position: absolute; background-color: #FFFFCC; border: 1px solid #808080; color: #666666; text-align: center; font-size: smaller; left: 40%; bottom: 20px; padding: 1px; overflow: visible; } div.size_slider_shoutout .pointy { position: absolute; background-image: url(/s/w/testdrive/pointy.gif); background-repeat: no-repeat; background-position: top center; left: 40%; top: 95%; width: 10px; height: 10px; } div.size_slider_ball { background: #09f; border-radius: 50%; display: inline-block; position: absolute; left: 0px; top: 4px; width: 12px; height: 12px; cursor: ew-resize; } @media only screen and (max-device-width: 1024px) { div.size_slider_ball { width: 20px; height: 20px; top: 0px; } } 

table#skuset_table tr th { background-color: #333; color: white; font-size: larger; padding: 1em; } table#skuset_table tr td { padding: 3px; } table#skuset_table tr td.styleheader { background-color: #CCC; font-weight: bold; padding: 0.5em; } #skuset_lmg_form a.merger { visibility: hidden; } table#skuset_table tr td.problem a { color: red; } 

.SkyFontsDownload, .SkyFontsDownloadAll, .SkyFontsTrial { display: inline-block; position: relative; } .SkyFontsDownload a.downloadbtn, .SkyFontsDownloadAll a.downloadbtn, .SkyFontsTrial a.downloadbtn { background: #0CB9FF; border-color: #0a95cc; padding: 5px 8px; } .SkyFontsDownload a.downloadbtn:hover, .SkyFontsDownloadAll a.downloadbtn:hover, .SkyFontsTrial a.downloadbtn:hover { background: #079fdb; text-decoration: none; } .SkyFontsDownload a.downloadbtn:active, .SkyFontsDownloadAll a.downloadbtn:active, .SkyFontsTrial a.downloadbtn:active { background: #0092cc; } .SkyFontsDownload button, .SkyFontsDownloadAll button, .SkyFontsTrial button { margin: 0; background: #4B4B4B; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .SkyFontsDownload.hidden, .SkyFontsDownloadAll.hidden, .SkyFontsTrial.hidden { display: none; } .SkyFontsDownload:hover button, .SkyFontsDownloadAll:hover button, .SkyFontsTrial:hover button { background: #000; } .SkyFontsDownload:hover, .SkyFontsDownloadAll:hover, .SkyFontsTrial:hover { cursor: pointer; } .SkyFontsDownload div.help, .SkyFontsDownloadAll div.help, .SkyFontsTrial div.help { overflow: visible; position: absolute; top: 0; right: 0; left: 0; bottom: 0; text-decoration: none; border: 0; height: inherit; width: inherit; } .SkyFontsDownload div.help .help_tooltip, .SkyFontsDownloadAll div.help .help_tooltip, .SkyFontsTrial div.help .help_tooltip { font-size: 14px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; position: relative; top: 36px; left: 50%; margin-left: -185px; width: 340px; } .SkyFontsDownload div.help .help_tooltip:before, .SkyFontsDownloadAll div.help .help_tooltip:before, .SkyFontsTrial div.help .help_tooltip:before { top: -9px; } .SkyFontsDownload div.help .help_tooltip:after, .SkyFontsDownloadAll div.help .help_tooltip:after, .SkyFontsTrial div.help .help_tooltip:after { content: ""; position: absolute; display: block; width: 100%; height: 20px; top: -20px; left: 0; } .SkyFontsTrial .progress-radial { display: none; } .SkyFontsTrial button { background: #4a4a4a; } .SkyFontsTrial div.help .help_tooltip { font-size: 16px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #FFFFFF; width: 246px; background: #000; text-align: center; } .SkyFontsTrial div.help .help_tooltip a { text-decoration: underline; color: #FFFFFF; } .SkyFontsTrial div.help .help_tooltip:before { border-bottom: 10px solid #000; } .SkyFontsTrial.InProgress button { width: 52px; height: 40px; background: #4a4a4a; } .SkyFontsTrial.InProgress button .progress-radial { display: block; top: -5px; left: -2px; } .SkyFontsTrial.InProgress div.help .help_tooltip { width: 149px; margin-left: 0; text-align: center; } .SkyFontsTrial.InProgress:hover { cursor: default; } .SkyFontsTrial.InProgress:hover button { background: #000; } .SkyFontsTrial.InProgress:hover .progress-radial { border-color: #000; } .SkyFontsTrial.TrialEnded button { background: #9B9B9B; } .SkyFontsTrial.TrialEnded:hover { cursor: default; } .SkyFontsTrial.TrialEnded:hover button { background: #000; } /* ------------------------------------- * Radial container * ------------------------------------- */ .progress-radial { float: left; position: relative; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4a4a4a; } /* ------------------------------------- * Mixin for progress-% class * ------------------------------------- */ .progress-0 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(90deg, #fff 50%, #848484 51%, #848484); } .progress-5 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(108deg, #fff 50%, #848484 51%, #848484); } .progress-10 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(126deg, #fff 50%, #848484 51%, #848484); } .progress-15 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(144deg, #fff 50%, #848484 51%, #848484); } .progress-20 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(162deg, #fff 50%, #848484 51%, #848484); } .progress-25 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(180deg, #fff 50%, #848484 51%, #848484); } .progress-30 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(198deg, #fff 50%, #848484 51%, #848484); } .progress-35 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(216deg, #fff 50%, #848484 51%, #848484); } .progress-40 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(234deg, #fff 50%, #848484 51%, #848484); } .progress-45 { background-image: linear-gradient(90deg, #848484 50%, transparent 51%, transparent), linear-gradient(252deg, #fff 50%, #848484 51%, #848484); } .progress-50 { background-image: linear-gradient(-90deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-55 { background-image: linear-gradient(-72deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-60 { background-image: linear-gradient(-54deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-65 { background-image: linear-gradient(-36deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-70 { background-image: linear-gradient(-18deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-75 { background-image: linear-gradient(0deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-80 { background-image: linear-gradient(18deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-85 { background-image: linear-gradient(36deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-90 { background-image: linear-gradient(54deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-95 { background-image: linear-gradient(72deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } .progress-100 { background-image: linear-gradient(90deg, #fff 50%, transparent 51%, transparent), linear-gradient(270deg, #fff 50%, #848484 51%, #848484); } #SkyFontsDialog #DownloadSkyFonts { background: #0CB9FF; padding: 6px 18px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; margin-bottom: 15px; } #SkyFontsDialog #LearnMore { color: #00B6FF; display: block; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; } #SkyFontsDialog #SkyFontsHead { background: url("/s/images/logo/skyfonts-logo.png") center 10px no-repeat; background-size: 84px 84px; padding: 105px 0 15px; text-align: center; width: 100%; } #SkyFontsDialog #SkyFontsHead p { margin: 1em; } #SkyFontsDialog #SkyFontsBody { padding: 30px 0; text-align: center; } #SkyFontsDialog #SkyFontsSelectAll { color: #999; display: none; font-size: 11px; font-weight: bold; padding: 4px 5px; position: relative; top: -4px; } #SkyFontsDialog #SkyFontsSelectAll:hover { color: #777; text-decoration: none; } #SkyFontsDialog #SkyFontsMachines { background: #f6f6f6; } #SkyFontsDialog #SkyFontsMachines .SkyFontsMachine { background-position: 30px center; background-repeat: no-repeat; background-size: 24px 24px; cursor: pointer; padding: 8px; } #SkyFontsDialog #SkyFontsMachines .SkyFontsMachine.mac { background-image: url("/s/images/logo/apple-logo.png"); } #SkyFontsDialog #SkyFontsMachines .SkyFontsMachine.windows { background-image: url("/s/images/logo/windows-logo.png"); } #SkyFontsDialog #SkyFontsMachines .SkyFontsMachine.selected { background-color: #ffffcc; } #SkyFontsDialog #SkyFontsMachines .SkyFontsMachine input[type=checkbox] { margin-right: 40px; } #SkyFontsDialog #SkyFontsMachines .SkyFontsMachine label { cursor: pointer; } #SkyFontsDialog #SkyFontsMachines input[type=submit] { cursor: pointer; display: block; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; padding: 6px 0; width: 100%; } .skyfonts--modal { box-sizing: border-box; } .skyfonts--modal div, .skyfonts--modal span, .skyfonts--modal applet, .skyfonts--modal object, .skyfonts--modal iframe, .skyfonts--modal h1, .skyfonts--modal h2, .skyfonts--modal h3, .skyfonts--modal h4, .skyfonts--modal h5, .skyfonts--modal h6, .skyfonts--modal p, .skyfonts--modal blockquote, .skyfonts--modal pre, .skyfonts--modal a, .skyfonts--modal abbr, .skyfonts--modal acronym, .skyfonts--modal address, .skyfonts--modal big, .skyfonts--modal cite, .skyfonts--modal code, .skyfonts--modal del, .skyfonts--modal dfn, .skyfonts--modal em, .skyfonts--modal img, .skyfonts--modal ins, .skyfonts--modal kbd, .skyfonts--modal q, .skyfonts--modal s, .skyfonts--modal samp, .skyfonts--modal small, .skyfonts--modal strike, .skyfonts--modal strong, .skyfonts--modal sub, .skyfonts--modal sup, .skyfonts--modal tt, .skyfonts--modal var, .skyfonts--modal b, .skyfonts--modal u, .skyfonts--modal i, .skyfonts--modal center, .skyfonts--modal dl, .skyfonts--modal dt, .skyfonts--modal dd, .skyfonts--modal ol, .skyfonts--modal ul, .skyfonts--modal li, .skyfonts--modal fieldset, .skyfonts--modal form, .skyfonts--modal label, .skyfonts--modal legend, .skyfonts--modal table, .skyfonts--modal caption, .skyfonts--modal tbody, .skyfonts--modal tfoot, .skyfonts--modal thead, .skyfonts--modal tr, .skyfonts--modal th, .skyfonts--modal td, .skyfonts--modal article, .skyfonts--modal aside, .skyfonts--modal canvas, .skyfonts--modal details, .skyfonts--modal embed, .skyfonts--modal figure, .skyfonts--modal figcaption, .skyfonts--modal footer, .skyfonts--modal header, .skyfonts--modal hgroup, .skyfonts--modal menu, .skyfonts--modal nav, .skyfonts--modal output, .skyfonts--modal ruby, .skyfonts--modal section, .skyfonts--modal summary, .skyfonts--modal time, .skyfonts--modal mark, .skyfonts--modal audio, .skyfonts--modal video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: inherit; } .skyfonts--modal article, .skyfonts--modal aside, .skyfonts--modal details, .skyfonts--modal figcaption, .skyfonts--modal figure, .skyfonts--modal footer, .skyfonts--modal header, .skyfonts--modal hgroup, .skyfonts--modal menu, .skyfonts--modal nav, .skyfonts--modal section { display: block; } .skyfonts--modal svg, .skyfonts--modal img { height: auto; max-width: 100%; vertical-align: middle; border: 0; } .skyfonts--modal { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #333; } .skyfonts--modal a { color: #37A0F3; text-decoration: none; } .skyfonts--modal a:hover { text-decoration: underline; } .skyfonts--modal .skyfonts--modal-main { text-align: center; padding: 52px; } .skyfonts--modal .skyfonts--modal-main h3 { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 32px; font-weight: 300; margin: 0 auto 21px; } .skyfonts--modal .skyfonts--modal-main p { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; margin: 0 0 18px 0; font-weight: 400; } .skyfonts--modal .skyfonts--modal-main p:last-of-type { margin: 0; } .skyfonts--modal .skyfonts--modal-main p.small-footer { font-size: 14px; margin-top: 24px; margin-bottom: 0; } .skyfonts--modal .skyfonts--modal-main p.small-footer + p { margin: 0; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button-contain { margin-top: 32px; margin-bottom: -26px; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; color: white; text-decoration: none; display: inline-block; vertical-align: middle; border-radius: 3px; background: #37A0F3; padding: 10px 12px; position: relative; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button.skyfonts--button-logo span { display: inline-block; vertical-align: middle; height: 23px; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button.skyfonts--button-logo span:before { position: relative; display: inline-block; vertical-align: middle; width: 12px; content: url("/s/images/skyfonts/skyfonts-logo-white.svg"); margin-right: 12px; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button + p { margin-top: 8px; } .skyfonts--modal .skyfonts--modal-main .skyfonts--specs { font-size: 12px; color: #aaa; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .skyfonts--modal .skyfonts--modal-footer { text-align: center; border-top: 1px solid #e7e7e7; padding: 25px; } .skyfonts--modal .skyfonts--modal-footer p { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #6B6B6B; font-size: 12px; margin: 0 0 12px 0; } .skyfonts--modal .skyfonts--modal-footer p:last-of-type { margin: 0; } .skyfonts--modal .skyfonts--modal-footer h4 { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 16px; margin-bottom: 16px; color: #333; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos { margin-bottom: 10px; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos li { display: inline-block; vertical-align: middle; margin: 0 12px; position: relative; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos .google { width: 110px; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos .fontscom { width: 84px; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos .myfonts { width: 70px; top: 4px; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos .linotype { width: 94px; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos .membership { width: 92px; } .skyfonts--modal .skyfonts--modal-footer .skyfonts--channel-logos.skyfonts--gray-logos img { -webkit-filter: grayscale(1); filter: grayscale(1); opacity: 0.4; } .skyfonts--modal .skyfonts--install-process { list-style: none; *zoom: 1; max-width: 600px; margin: 40px auto -28px; } .skyfonts--modal .skyfonts--install-process:after { content: ""; display: table; clear: both; } .skyfonts--modal .skyfonts--install-process li { float: left; width: 164px; margin: 0 14px; } .skyfonts--modal .skyfonts--install-process li figure { margin-bottom: 14px; border: 1px solid #d2d2d2; border-radius: 2px; } .skyfonts--modal .skyfonts--install-process li figure img { display: block; } .skyfonts--modal .skyfonts--install-process li p { font-size: 13px; color: #6B6B6B; margin: 0 auto; font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .skyfonts--modal .skyfonts--install-process li.step-2 figure { position: relative; } .skyfonts--modal .skyfonts--install-process li.step-2 figure .sync-animation { position: absolute; left: 50%; margin-left: -15px; bottom: 44px; } .skyfonts--modal .skyfonts--onboarding-animation { margin: -10px auto; max-width: 420px; } .skyfonts--modal .sync-animation { background-position: 0; background-repeat: no-repeat; } .skyfonts--modal .sync-animation.animate { animation-duration: 1s; animation-timing-function: steps(30); animation-iteration-count: infinite; } .skyfonts--modal .sync-animation.sync-animation--32 { width: 30px; height: 32px; background-image: url("/s/images/skyfonts/animation/sync-animation-32@2x.png"); background-size: 900px 32px; } .skyfonts--modal .sync-animation.sync-animation--32.animate { animation-name: sync-32; } .skyfonts--modal .skyfonts--modal-main input[type="checkbox"] + span { vertical-align: middle; margin-left: 5px; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button:hover { background-color: #078adb; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button.gray { background-color: #CCC; color: #444; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button.gray:hover { background-color: #bbb; } .skyfonts--modal .skyfonts--modal-main .skyfonts--button + button { margin-left: 12px; } #family .SkyFontsDownload, #family .SkyFontsDownloadAll, #family .SkyFontsTrial, #stylepage .SkyFontsDownload, #stylepage .SkyFontsDownloadAll, #stylepage .SkyFontsTrial { float: right; } #family .SkyFontsDownload:hover div.help .help_tooltip, #family .SkyFontsDownloadAll:hover div.help .help_tooltip, #family .SkyFontsTrial:hover div.help .help_tooltip, #stylepage .SkyFontsDownload:hover div.help .help_tooltip, #stylepage .SkyFontsDownloadAll:hover div.help .help_tooltip, #stylepage .SkyFontsTrial:hover div.help .help_tooltip { display: block; } #family div.help span:first-child, #stylepage div.help span:first-child { display: none; } #family .cart_button_wrapper .SkyFontsDownload, #family .cart_button_wrapper .SkyFontsDownloadAll, #family .cart_button_wrapper .SkyFontsTrial, #stylepage .cart_button_wrapper .SkyFontsDownload, #stylepage .cart_button_wrapper .SkyFontsDownloadAll, #stylepage .cart_button_wrapper .SkyFontsTrial { margin-left: 6px; } #family #add_family_to_cart .SkyFontsDownload button, #family #add_family_to_cart .SkyFontsDownloadAll button, #family #add_family_to_cart .SkyFontsTrial button, #stylepage #add_family_to_cart .SkyFontsDownload button, #stylepage #add_family_to_cart .SkyFontsDownloadAll button, #stylepage #add_family_to_cart .SkyFontsTrial button { padding: 13px 16px; font-size: 14px; line-height: 1em; } #family #add_family_to_cart .SkyFontsDownload:hover div.help .help_tooltip, #family #add_family_to_cart .SkyFontsDownloadAll:hover div.help .help_tooltip, #stylepage #add_family_to_cart .SkyFontsDownload:hover div.help .help_tooltip, #stylepage #add_family_to_cart .SkyFontsDownloadAll:hover div.help .help_tooltip { top: 51px; left: 50%; } #family #add_family_to_cart .SkyFontsTrial:hover div.help .help_tooltip, #stylepage #add_family_to_cart .SkyFontsTrial:hover div.help .help_tooltip { top: 58px; left: 87px; } #family #add_family_to_cart .SkyFontsTrial.InProgress div.help .help_tooltip, #stylepage #add_family_to_cart .SkyFontsTrial.InProgress div.help .help_tooltip { top: 58px; left: -64px; } #family #add_family_to_cart .SkyFontsTrial.TrialEnded div.help .help_tooltip, #stylepage #add_family_to_cart .SkyFontsTrial.TrialEnded div.help .help_tooltip { left: 73px; } #family .search-result-item .SkyFontsDownload button, #family .search-result-item .SkyFontsDownloadAll button, #family .search-result-item .SkyFontsTrial button, #stylepage .search-result-item .SkyFontsDownload button, #stylepage .search-result-item .SkyFontsDownloadAll button, #stylepage .search-result-item .SkyFontsTrial button { margin: 6px 0; padding: 4px 9px; font-size: 12px; } #family .search-result-item .SkyFontsDownload:hover div.help .help_tooltip, #family .search-result-item .SkyFontsDownloadAll:hover div.help .help_tooltip, #stylepage .search-result-item .SkyFontsDownload:hover div.help .help_tooltip, #stylepage .search-result-item .SkyFontsDownloadAll:hover div.help .help_tooltip { top: 40px; left: 50%; } #family .search-result-item .SkyFontsDownload div.help, #family .search-result-item .SkyFontsDownloadAll div.help, #stylepage .search-result-item .SkyFontsDownload div.help, #stylepage .search-result-item .SkyFontsDownloadAll div.help { left: 0; } #family .search-result-item .SkyFontsTrial button, #stylepage .search-result-item .SkyFontsTrial button { width: 62px; } #family .search-result-item .SkyFontsTrial:hover div.help .help_tooltip, #stylepage .search-result-item .SkyFontsTrial:hover div.help .help_tooltip { top: 47px; left: 77px; } #family .search-result-item .SkyFontsTrial.InProgress button, #stylepage .search-result-item .SkyFontsTrial.InProgress button { height: 23px; width: 36px; background-size: 12px 12px; background-position: center 4px; } #family .search-result-item .SkyFontsTrial.InProgress button .progress-radial, #stylepage .search-result-item .SkyFontsTrial.InProgress button .progress-radial { width: 12px; height: 12px; top: 0px; left: 1px; } #family .search-result-item .SkyFontsTrial.InProgress:hover div.help .help_tooltip, #stylepage .search-result-item .SkyFontsTrial.InProgress:hover div.help .help_tooltip { left: -71px; } #family .search-result-item .SkyFontsTrial.TrialEnded button, #stylepage .search-result-item .SkyFontsTrial.TrialEnded button { width: 36px; } #family .search-result-item .SkyFontsTrial.TrialEnded div.help .help_tooltip, #stylepage .search-result-item .SkyFontsTrial.TrialEnded div.help .help_tooltip { left: 65px; } @keyframes sync-32 { from { background-position: 0; } to { background-position: -900px; } } .skyfonts--modal .skyfonts--install-process figure .step-image { width: 162px; height: 162px; background-position: 0 0; background-repeat: no-repeat; } .skyfonts--modal .skyfonts--install-process.mac li.step-1 .step-image { background-image: url("/s/images/skyfonts/skyfonts-mac-installation-step-1.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .skyfonts--modal .skyfonts--install-process.mac li.step-1 .step-image { background-image: url("/s/images/skyfonts/skyfonts-mac-installation-step-1@2x.png"); background-size: 162px 162px; } } .skyfonts--modal .skyfonts--install-process.mac li.step-2 .step-image { background-image: url("/s/images/skyfonts/skyfonts-mac-installation-step-2.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .skyfonts--modal .skyfonts--install-process.mac li.step-2 .step-image { background-image: url("/s/images/skyfonts/skyfonts-mac-installation-step-2@2x.png"); background-size: 162px 162px; } } .skyfonts--modal .skyfonts--install-process.mac li.step-3 .step-image { background-image: url("/s/images/skyfonts/skyfonts-mac-installation-step-3.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .skyfonts--modal .skyfonts--install-process.mac li.step-3 .step-image { background-image: url("/s/images/skyfonts/skyfonts-mac-installation-step-3@2x.png"); background-size: 162px 162px; } } .skyfonts--modal .skyfonts--install-process.windows li.step-1 .step-image { background-image: url("/s/images/skyfonts/skyfonts-win-installation-step-1.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .skyfonts--modal .skyfonts--install-process.windows li.step-1 .step-image { background-image: url("/s/images/skyfonts/skyfonts-win-installation-step-1@2x.png"); background-size: 162px 162px; } } .skyfonts--modal .skyfonts--install-process.windows li.step-2 .step-image { background-image: url("/s/images/skyfonts/skyfonts-win-installation-step-2.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .skyfonts--modal .skyfonts--install-process.windows li.step-2 .step-image { background-image: url("/s/images/skyfonts/skyfonts-win-installation-step-2@2x.png"); background-size: 162px 162px; } } .skyfonts--modal .skyfonts--install-process.windows li.step-3 .step-image { background-image: url("/s/images/skyfonts/skyfonts-win-installation-step-3.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .skyfonts--modal .skyfonts--install-process.windows li.step-3 .step-image { background-image: url("/s/images/skyfonts/skyfonts-win-installation-step-3@2x.png"); background-size: 162px 162px; } } 

#skyfonts_trial_landing { color: #444; text-align: center; } #skyfonts_trial_landing h1 { font-size: 53px; margin: 0.575em 0; } #skyfonts_trial_landing p { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 27px; line-height: 35px; margin: 2em 1em; } #skyfonts_trial_landing p:first-of-type { margin-top: 0; } #skyfonts_trial_landing img.animation { margin: 2em auto; } #skyfonts_trial_landing div.trial { margin: 0 auto; background-repeat: no-repeat; } #skyfonts_trial_landing div.trial.sample1 { background-image: url("/s/images/skyfonts_trial_landing/1.png"); width: 756px; height: 150px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #skyfonts_trial_landing div.trial.sample1 { background-image: url("/s/images/skyfonts_trial_landing/1@2x.png"); background-size: 756px 150px; } } #skyfonts_trial_landing div.trial.sample2 { background-image: url("/s/images/skyfonts_trial_landing/2.png"); width: 366px; height: 146px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #skyfonts_trial_landing div.trial.sample2 { background-image: url("/s/images/skyfonts_trial_landing/2@2x.png"); background-size: 366px 146px; } } #skyfonts_trial_landing div.trial.sample3 { background-image: url("/s/images/skyfonts_trial_landing/3.png"); width: 215px; height: 266px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #skyfonts_trial_landing div.trial.sample3 { background-image: url("/s/images/skyfonts_trial_landing/3@2x.png"); background-size: 215px 266px; } } #skyfonts_trial_landing .foundry_button { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 17px; letter-spacing: 1px; padding: 13px 26px; } #skyfonts_trial_landing .sample { background: #fff; margin: 90px 0; padding: 10px; text-align: left; } #skyfonts_trial_landing .sample a.name { float: left; font-weight: normal; } #skyfonts_trial_landing .sample button.add_to_cart_button, #skyfonts_trial_landing .sample button.add_to_album_toggle { margin-top: 0px; } #skyfonts_trial_landing .sample .price-listing { margin-top: 3px; } #skyfonts_trial_landing .sample .add_to_album_dropdown { color: #000; top: 22px; } #skyfonts_trial_landing #arrow { background: url("/s/images/skyfonts_trial_landing/arrow.png") right center no-repeat; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 15px; height: 22px; line-height: 22px; padding-right: 30px; position: absolute; right: 80px; top: 190px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #skyfonts_trial_landing #arrow { background-image: url("/s/images/skyfonts_trial_landing/arrow@2x.png"); background-size: 19px 22px; } } #skyfonts_trial_landing #trial_demo_zone { background: #344666; color: #fff; height: 500px; margin: 50px 10px; padding: 40px 60px; position: relative; } #skyfonts_trial_landing #trial_demo_zone a.learn_more { color: #fff; } 

.slideshowWidget { position: relative; margin-bottom: 24px; width: 720px; height: 360px; overflow: hidden; } .slideshowWidget.slideshowWidget_promo_poster { width: 600px; height: 375px; } .slideshowWidget .slide_tray { position: relative; width: 720px; height: 360px; } .slideshowWidget .slide_tray.slide_tray_promo_poster { position: relative; width: 600px; height: 375px; } .slideshowWidget .slide_tray .slide { position: absolute; top: 0px; left: 0px; } .slideshowWidget .slide_tray .slide img { width: 720px; height: 360px; } .slideshowWidget .slide_tray.slide_tray_promo_poster .slide img { width: 600px; height: 375px; } .slideshowWidget .slideshow_controls { position: absolute; right: 0px; bottom: 0px; height: 26px; padding: 0px 6px 4px; } .slideshowWidget .slideshow_controls.slideshow_controls_promo_poster { height: 44px; } .slideshowWidget .slideshow_controls .transparent_background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #F5F5F5; opacity: 0.9; filter: alpha(opacity=90); } .slideshowWidget .slideshow_controls .slideshow_navbutton { position: relative; float: left; width: 38px; padding-top: 4px; padding-left: 1px; margin-left: 3px; text-align: center; } .slideshowWidget .slideshow_controls .slideshow_navbutton.active { background-image: url(/s/w/slideshow/pointy.gif); background-position: top center; background-repeat: no-repeat; } .slideshowWidget .slideshow_controls .slideshow_navbutton img { margin: 1px; padding: 1px; cursor: pointer; width: 36px; height: 18px; } .slideshowWidget .slideshow_controls.slideshow_controls_promo_poster .slideshow_navbutton img { cursor: pointer; width: 36px; height: 36px; } .slideshowWidget .slideshow_controls .slideshow_navbutton.active img { margin: 0px; border: 1px solid #09f; } .slideshowWidget .slideshow_controls .play_pause_frame { position: relative; float: left; margin-left: 12px; padding-top: 6px; } .slideshowWidget .slideshow_controls.slideshow_controls_promo_poster .play_pause_frame { padding-top: 15px; } .slideshowWidget .slideshow_controls .play_pause_frame img:hover { opacity: 0; filter: alpha(opacity=0); } .slideshowWidget .slideshow_controls .play_pause_frame a { display: block; float: left; width: 18px; height: 18px; } .slideshowWidget .slideshow_controls .play_pause_frame a.previous { background-image: url(/s/w/slideshow/previous-hover.gif); } .slideshowWidget .slideshow_controls .play_pause_frame a.play { background-image: url(/s/w/slideshow/play-hover.gif); } .slideshowWidget .slideshow_controls .play_pause_frame a.pause { background-image: url(/s/w/slideshow/pause-hover.gif); } .slideshowWidget .slideshow_controls .play_pause_frame a.next { background-image: url(/s/w/slideshow/next-hover.gif); } .slideshowWidget + .cl-value { margin-top: -24px; margin-bottom: 24px; } .cl-value { background: #f4f4f4; border: 1px solid #dadada; padding: 10px 18px; } .cl-value p { margin-bottom: 0; font-size: 14px; line-height: 22px; } .cl-value p:first-of-type { font-size: 16px; } .cl-value img { float: left; width: 48px; margin-right: 15px; } .cl-value .medium { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } 

.mf-ribbon { display: inline-block; background: #008fff; height: 1.9em; padding: 0 30px; margin: 0 -20px; line-height: 1.95em; position: relative; filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.5)); color: white; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 24px; font-weight: 500; } .mf-ribbon:before { content: ''; position: absolute; width: 0; height: 0; left: 0; top: 100%; border-width: 6px 10px; border-style: solid; border-color: #03518d #03518d transparent transparent; } .mf-ribbon:after { position: absolute; content: ''; top: 0; right: -1.2em; display: block; width: 0; height: 0; border: 0.95em solid #008fff; border-right: .6em solid transparent; } .specialOffers__header { margin: 0; position: relative; z-index: 1; } .specialOffers__headerTextContainer { display: inline-block; position: relative; width: calc(100% - 277px); margin-left: 50px; } @media screen and (max-width: 1041px) { .specialOffers__headerTextContainer { display: block; position: absolute; top: 2px; right: 9px; } } @media screen and (max-width: 767px) { .specialOffers__headerTextContainer { display: block; position: static; margin: 15px 10px; width: calc(100% - 20px); } } .specialOffers__headerDescription { font-size: 12px; } @media screen and (min-width: 768px) { .specialOffers__headerDescription { font-size: calc(12px + 8 * ((100vw - 768px) / 362)); } } @media screen and (min-width: 1130px) { .specialOffers__headerDescription { font-size: 20px; } } @media screen and (max-width: 767px) { .specialOffers__headerDescription { font-size: 20px; } } .specialOffers__headerViewAll { text-align: right; position: absolute; right: 0; top: 3px; } .specialOffers__headerViewAll { font-size: 12px; } @media screen and (min-width: 768px) { .specialOffers__headerViewAll { font-size: calc(12px + 4 * ((100vw - 768px) / 362)); } } @media screen and (min-width: 1130px) { .specialOffers__headerViewAll { font-size: 16px; } } @media screen and (max-width: 767px) { .specialOffers__headerViewAll { font-size: 16px; } } @media screen and (max-width: 1041px) { .specialOffers__headerViewAll { display: inline-block; position: static; } } .specialOffers__header h2.mf-ribbon { width: 190px; } .specialOffers__content { display: flex; justify-content: space-between; flex-flow: wrap; } .specialOffers__contentCard { flex-basis: 16%; } @media screen and (max-width: 767px) { .specialOffers__contentCard { flex-basis: 100%; } } .specialOffers__contentCard img { display: block; width: 100%; height: auto; margin-bottom: 20px; cursor: pointer; transition: all 0.15s ease; transform-origin: 50% 0; } .specialOffers__contentCard img:hover { transform: scale(1.05); } .specialOffers__contentError { display: block; min-height: 75px; width: calc(100% - 20px); padding: 0 10px; text-align: center; border: 1px solid #CCC; background-color: #fff; color: black; } .specialOffers__contentError span { display: inline-block; margin-top: 25px; line-height: 25px; } .specialOffers__contentError span:last-child { margin-top: 0; margin-bottom: 25px; } 

.imgHover { display: inline; position: relative; } .imgHover .hover { display: none; position: absolute; right: 7px; bottom: 9px; z-index: 2; width: 27px; height: 23px; background-color: #ffffff; -moz-box-shadow: 0px 0px 4px 0px #999; -webkit-box-shadow: 0px 0px 4px 0px #999; box-shadow: 0px 0px 4px 0px #999; } #specials-graybar { background-color: #f5f5f5; border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc; padding: 8px; margin-top: 10px; margin-bottom: 14px; } .specials-graybartext { font-size: 12px; width: 500px; float: left; color: #545454; line-height: 14px; } .specials-graybarslideshow { width: 150px; float: right; text-align: right; height: 24px; cursor: pointer; padding-top: 0px; border: solid 0px red; } .slideshowtextheader { font-size: 14px; width: 110px; float: right; text-align: right; color: #545454; line-height: 24px; height: 24px; cursor: pointer; padding-top: 0px; border: solid 0px red; } .slideshowiconheader { float: right; width: 27px; border: solid 0px red; margin-left: 5px; } .specials-enddate, .specials-foundryname { font-size: 14px; color: #000000; text-align: left; line-height: 25px; vertical-align: baseline; height: 23px; } .fader { position: absolute; top: 0; right: 0; height: 100%; width: 30px; } .specials-enddate-attention { color: red; font-weight: bold; font-size: 14px; text-align: left; line-height: 25px; vertical-align: baseline; height: 23px; border: solid 0px red; } .specials-promoname { margin-top: 5px; white-space: nowrap; position: relative; overflow: hidden; line-height: 18px; } .specials-promoname a { color: #0099ff; font-size: 15px; font-weight: bold; line-height: 25px; white-space: nowrap; } #specials_page .poster { margin-bottom: 0px; } #specials_page .lazyloadposter { margin-bottom: 0px; width: 298px; height: 149px; } #specials_page .lazyloadposter4col { margin-bottom: 0px; width: 216px; height: 108px; } #specials_page .thumbnail { margin-bottom: 12px; width: 75px; height: 75px; } #specials_page .promo_entry { margin-top: 12px; clear: left; } #specials_page .text_list img { float: left; margin-right: 12px; } .rss_box img { width: 36px; height: 20px; vertical-align: middle; } .specposters { float: left; margin-bottom: 20px; width: 298px; margin-left: 7px; margin-right: 7px; border: solid 0px red; } .specposters a { font-size: 14px; font-weight: bold; } #lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 9999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); opacity: 0.85; display: none; } #lightbox { vertical-align: middle; position: fixed; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-weight: normal; } #lightbox img { width: auto; height: auto; cursor: pointer; } #lightbox a img { border: none; } .lb-outerContainer { position: relative; background-color: white; *zoom: 1; width: 740px; height: 436px; margin: 0 auto; background-image: url(/s/images/lightbox/loading.gif); background-repeat: no-repeat; background-position: center center; /*-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;*/ } .lb-outerContainer:after { content: ""; display: table; clear: both; } .lb-container { padding: 10px; } .lb-loader { position: absolute; top: 30%; left: 0%; height: 25%; width: 90%; text-align: center; line-height: 0; } .lb-nav { /*position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;*/ } .lb-container > .nav { } .lb-nav a { } .lb-prev, .lb-next { /*width: 49%; height: 100%;*/ /*background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); Trick IE into showing hover display: block;*/ cursor: pointer; font-size: 14px; font-weight: bold; text-decoration: none; } .lb-prev a:hover, .lb-next a:hover { text-decoration: none; } .lb-prev { height: 32px; float: left; width: 32px; } .lb-next { width: 32px; float: right; height: 32px; } .lb-dataContainer { margin: 0 auto; padding-top: 5px; *zoom: 1; width: 740px; background-color: #ffffff; height: 110px; /*-moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;*/ } .lb-dataContainer:after { content: ""; display: table; clear: both; } .lb-data { padding: 0 10px; color: #000000; } .lb-data .lb-details { width: 100%; text-align: left; line-height: 1.1em; } .lb-data .lb-caption { font-size: 15px; font-weight: bold; line-height: 15px; color: #0099ff; height: 15px; } .lb-data .lb-number { display: none; clear: left; padding-bottom: 1em; font-size: 11px; } .lb-closeContainer { position: absolute; bottom: 10px; width: 715px; } .lb-closeContainer a { text-decoration: none; } .lb-data .lb-close { position: relative; left: 140; padding-bottom: 0.7em; outline: none; } .lb-close input { height: 34px; background-color: #cccccc; color: #000000; width: 70px; border-color: #e9e9e9 #686868 #2e2e2e #dadada; } .lb-data .lb-close:hover, .lb-rev { cursor: pointer; text-decoration: none; } .lb-rev { color: #0099ff; font-size: 18px; font-weight: bold; float: left; width: 500px; line-height: 18px; } .lb-enddate { width: 200px; float: right; text-align: right; font-size: 16px; padding-top: 3px; height: 15px; } .lb-foundry { font-size: 16px; margin-top: 10px; height: 15px; padding-top: 8px; clear: both; } .lb-image { width: 720px; height: 360px; } .clearfloat { clear: both; } 

.mf-ribbon { display: inline-block; background: #008fff; height: 1.9em; padding: 0 30px; margin: 0 -20px; line-height: 1.95em; position: relative; filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.5)); color: white; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 24px; font-weight: 500; } .mf-ribbon:before { content: ''; position: absolute; width: 0; height: 0; left: 0; top: 100%; border-width: 6px 10px; border-style: solid; border-color: #03518d #03518d transparent transparent; } .mf-ribbon:after { position: absolute; content: ''; top: 0; right: -1.2em; display: block; width: 0; height: 0; border: 0.95em solid #008fff; border-right: .6em solid transparent; } .staffPicks { padding: 60px 20px; position: relative; } @media screen and (max-width: 767px) { .staffPicks { padding: 20px; } } .staffPicks__title { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 24px; left: -1px; position: absolute; top: -10px; width: 190px; } @media screen and (max-width: 767px) { .staffPicks__title { top: -60px; } } .staffPicks__noFontsMessage { text-align: center; color: #4a4a4a; } .staffPicks__fontContainer { overflow: hidden; } .staffPicks__fontContainer:not(:last-child) { margin-bottom: 35px; } .staffPicks__fontContainer:last-child { margin-bottom: 7px; } .staffPicks__fontContainer__sampleImage { display: block; height: 35px; width: auto; } .staffPicks__fontContainer__fontDetails { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; } .staffPicks__fontContainer__fontDetails__name, .staffPicks__fontContainer__fontDetails__priceInfo { color: #4a4a4a; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; line-height: 18px; } .staffPicks__fontContainer__fontDetails__name a { color: #00ACFF; } .staffPicks__fontContainer__fontDetails__price { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: bold; } 

input.state_field.warning { border: 1px solid #900; background-color: #FEE; } 

#styleheader { position: relative; width: 768px; margin-bottom: 10px; } #styleheader h1 { display: inline; } #styleheader .huge_slash { font-size: 72pt; color: #000000; font-family: "Helvetica Neue",Helvetica,Verdana,sans-serif; } #title_unreadable_link { position: absolute; right: 0px; top: 0px; } #style_buttons { float: left; margin-left: 12px; width: 180px; } #styleheader h1 { margin-bottom: 0px; } #styleheader .price-tag { position: absolute; top: 35%; right: 8px; } .style_waterfall_row { clear: left; padding-top: 0px; margin-top: 24px; } .style_waterfall_full_cell { overflow: hidden; width: 720px; color: gray; } .style_waterfall_half_cell { overflow: hidden; width: 348px; float: left; color: gray; } .style_waterfall_half_cell_right { margin-left: 24px; } .style_subset_cell { width: 350px; padding-bottom: 20px; color: gray; } .style_subset_column { width: 350px; float: left; } .style_waterfall_cell_right { margin-left: 20px; } .style_waterfall_row .style_waterfall_cell { width: 350px; float: left; } .style_subset { width: 720px; position: relative; } /* #columns { clear: both; position: relative; margin-top: 8px; } #main_column { position: relative; width: 700px; } #side_column { position: absolute; top: 0px; left: 710px; width: 200px; } */ #wide_bottom { width: 700px; clear: both; } #stylepage h4.styleBreadcrumb { color: #333; font-weight: normal; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-left: 6px; } #stylepage #language_meta_groups ul li { padding-bottom: 12px; } div#specs_pane ul li { overflow: hidden; padding-bottom: 2em; } div#specs_pane ul li ul li { padding-bottom: 0; } div#specs_pane div.add_version_to_cart { float: right; } div#specs_pane div.add_version_to_cart img { vertical-align: middle; padding-left: 1em; } #stylepage .local-tab { z-index: 1; } 

#monotype-mls { } #monotype-mls.discovery { margin: 0 -10px -30px; padding-bottom: 10px; } @media screen and (min-width: 768px) { #monotype-mls.discovery { margin: 0 -20px -30px; } } @media screen and (min-width: 1200px) { #monotype-mls.discovery { margin: 0 -2% -30px; margin: 0 calc(-2% - 1px) -30px; } } #monotype-mls.discovery .top-strip { padding: 20px; margin: 0 1.5rem; } #monotype-mls.discovery .top-strip p { margin: 0; font-size: 19px; line-height: 36px; display: inline-block; } #monotype-mls.discovery .top-strip p.mls-logo-before:before { display: inline-block; vertical-align: middle; position: relative; top: 0; margin: 0 15px 0 0; background: transparent url("/s/images/logo/MLS-icon-sml.png") center no-repeat; width: 44px; height: 44px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls.discovery .top-strip p.mls-logo-before:before { background-image: url("/s/images/logo/MLS-icon-sml@2x.png"); background-size: 44px 44px; } } @media screen and (max-width: 926px) { #monotype-mls.discovery .top-strip { display: none; } } #monotype-mls.discovery .sticky_header a.button { background-color: transparent; color: #000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; border-bottom: 2px solid #09f; padding: 0 18px 0 0; border-radius: 0; position: relative; font-size: 15px; } #monotype-mls.discovery .sticky_header a.button:before { content: ''; position: absolute; right: -3px; background: transparent url("/s/images/iconsets/myfonts/expand-right-dark.svg") 100% 50% no-repeat; background-size: 23px; width: 20px; height: 17px; transform: rotate(-90deg); } #monotype-mls.discovery .sticky_header a.button:hover { border-color: #fff; } #monotype-mls.discovery .sticky_header .title p:first-of-type { margin-top: 5px; } #monotype-mls.discovery .ac-favorite-root { float: left; margin-right: 6px; } #monotype-mls.discovery .favorite { width: 40px; height: 40px; float: left; background-size: 22px 20px; background-image: url("/s/images/font_cards/favorite_lg.png"); border-radius: 3px; min-height: 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls.discovery .favorite { background-image: url("/s/images/font_cards/favorite_lg@2x.png"); background-size: 20px 18px; } } #monotype-mls.discovery .selected .favorite { background-image: url("/s/images/font_cards/favorite_lg_selected.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls.discovery .selected .favorite { background-image: url("/s/images/font_cards/favorite_lg_selected@2x.png"); background-size: 20px 18px; } } #monotype-mls.discovery .subList { padding: 0 20px; } #monotype-mls.discovery .subList .tabLine .mls-tabs { margin-bottom: 0; width: 100%; } #monotype-mls.discovery .subList .tabLine .mls-tabs .mls-tab { border-color: #F5F4F3; } #monotype-mls.discovery .subList .tabLine .mls-tabs .mls-tab.active { border-color: #09f; } #monotype-mls .loader { padding: 20px; background: transparent url("/s/images/iconsets/myfonts/spinner.svg") 50% 50% no-repeat; min-height: 48px; min-width: 48px; text-indent: -999em; display: inline-block; margin: 0 auto; } #monotype-mls .mls-discovery-hero { text-align: center; background: #000 url("/s/images/sub_discovery/carousel-bg.jpg") center center no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls .mls-discovery-hero { background-image: url("/s/images/sub_discovery/carousel-bg@2x.jpg"); background-size: cover; } } #monotype-mls .mls-discovery-hero a { display: block; } #monotype-mls .mls-discovery-hero a img { margin: 0 auto; max-width: 100%; vertical-align: bottom; } #monotype-mls .mls-discovery-hero .SkyFontsDownload, #monotype-mls .mls-discovery-hero .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .SkyFontsTrial { position: absolute; bottom: 19%; left: 50%; transform: translateX(-50%); } @media screen and (max-width: 540px) { #monotype-mls .mls-discovery-hero .SkyFontsDownload, #monotype-mls .mls-discovery-hero .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .SkyFontsTrial { display: none; } } @media screen and (max-width: 860px) { #monotype-mls .mls-discovery-hero .SkyFontsDownload, #monotype-mls .mls-discovery-hero .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .SkyFontsTrial { pointer-events: none; } } #monotype-mls .mls-discovery-hero .SkyFontsDownload button, #monotype-mls .mls-discovery-hero .SkyFontsDownloadAll button, #monotype-mls .mls-discovery-hero .SkyFontsTrial button { font-size: 20px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding: 7px 15px; background-color: #e46f57; } @media screen and (max-width: 720px) { #monotype-mls .mls-discovery-hero .SkyFontsDownload button, #monotype-mls .mls-discovery-hero .SkyFontsDownloadAll button, #monotype-mls .mls-discovery-hero .SkyFontsTrial button { font-size: 14px; padding: 5px 11px; } } #monotype-mls .mls-discovery-hero .SkyFontsDownload *:hover > .help_tooltip, #monotype-mls .mls-discovery-hero .SkyFontsDownloadAll *:hover > .help_tooltip, #monotype-mls .mls-discovery-hero .SkyFontsTrial *:hover > .help_tooltip { display: none; } #monotype-mls .mls-discovery-hero .SkyFontsTrial.InProgress button { padding: 13px 16px; } #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(2) .SkyFontsDownload, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(2) .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(2) .SkyFontsTrial { bottom: 10%; } #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(3) .SkyFontsDownload, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(3) .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(3) .SkyFontsTrial { bottom: 19%; } #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(4) .SkyFontsDownload, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(4) .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(4) .SkyFontsTrial { bottom: 12%; } #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(5) .SkyFontsDownload, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(5) .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(5) .SkyFontsTrial { margin-left: -598px; transform: none; } @media screen and (max-width: 1440px) { #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(5) .SkyFontsDownload, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(5) .SkyFontsDownloadAll, #monotype-mls .mls-discovery-hero .owl-item:nth-of-type(5) .SkyFontsTrial { left: 0; margin-left: 8.5%; } } #monotype-mls .mls-discovery-hero .fc-authenticate { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 860px) { #monotype-mls .mls-discovery-hero .fc-authenticate { display: none; } } #monotype-mls .mls-discovery-lists { position: relative; } #monotype-mls .mls-discovery-lists .row--cards { padding: 20px; position: relative; background-color: #f5f5f5; } #monotype-mls .mls-discovery-lists .row--cards:first-child { padding-top: 0; } @media screen and (max-width: 375px) { #monotype-mls .mls-discovery-lists .row--cards { padding-bottom: 0; } } #monotype-mls .mls-discovery-lists .row--cards h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0; line-height: 40px; height: 40px; } #monotype-mls .mls-discovery-lists .row--cards h2 a { color: #666; text-decoration: none; } #monotype-mls .mls-discovery-lists .row--cards h2 a:hover { color: #333; } #monotype-mls .mls-discovery-lists .row--cards .items-scroll { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; will-change: transform; transition: transform 400ms ease-out; } #monotype-mls .mls-discovery-lists .row--cards .items-scroll.clicking { transition: transform 150ms ease-out; } @media screen and (min-width: 376px) { #monotype-mls .mls-discovery-lists .row--cards .items-scroll { flex-wrap: nowrap; } } #monotype-mls .mls-discovery-lists .row--cards .item { margin-bottom: 20px; -webkit-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none; display: none; width: 100%; } @media screen and (max-width: 375px) { #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+3) { display: block; } } @media screen and (min-width: 376px) { #monotype-mls .mls-discovery-lists .row--cards .item { margin-bottom: 0; width: 49.5%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+1) { margin-right: 1%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+2) { display: block; } } @media screen and (min-width: 800px) { #monotype-mls .mls-discovery-lists .row--cards .item { width: 32.66%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+2) { margin-right: 1%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+3) { display: block; } } @media screen and (min-width: 1100px) { #monotype-mls .mls-discovery-lists .row--cards .item { width: 24.25%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+3) { margin-right: 1%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+4) { display: block; } } @media screen and (min-width: 1400px) { #monotype-mls .mls-discovery-lists .row--cards .item { width: 19.2%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+4) { margin-right: 1%; } #monotype-mls .mls-discovery-lists .row--cards .item:nth-child(-n+5) { display: block; } } #monotype-mls .mls-discovery-lists .vertical-scrolling .item--font-card { transition-delay: 500ms; } #monotype-mls .mls-discovery-lists .vertical-scrolling .item--font-card:before { transition-delay: 500ms; } #monotype-mls .mls-discovery-lists .item--font-card { position: relative; will-change: transform; transition: transform 200ms ease-out; background: #fff; } #monotype-mls .mls-discovery-lists .item--font-card.preceeding { transform: translateX(-4px); } @media screen and (max-width: 375px) { #monotype-mls .mls-discovery-lists .item--font-card.preceeding { transform: translateX(0); } } #monotype-mls .mls-discovery-lists .item--font-card.following { transform: translateX(4px); } @media screen and (max-width: 375px) { #monotype-mls .mls-discovery-lists .item--font-card.following { transform: translateX(0); } } #monotype-mls .mls-discovery-lists .item--font-card:before { content: ''; background-color: #fff; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; position: absolute; transition: transform 200ms ease-out; } #monotype-mls .mls-discovery-lists .item--font-card:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.item-active:before { transform: scale(1.05); } #monotype-mls .mls-discovery-lists .item--font-card:hover .font-preview img, #monotype-mls .mls-discovery-lists .item--font-card.item-active .font-preview img { -webkit-filter: invert(1); max-width: 100%; } #monotype-mls .mls-discovery-lists .item--font-card:hover .font-preview:after, #monotype-mls .mls-discovery-lists .item--font-card.item-active .font-preview:after { background-image: none; } #monotype-mls .mls-discovery-lists .item--font-card:hover a.button.small, #monotype-mls .mls-discovery-lists .item--font-card.item-active a.button.small { opacity: 1; bottom: 20px; } #monotype-mls .mls-discovery-lists .item--font-card .peek-hint { position: absolute; display: none; font-size: 12px; bottom: 6px; left: 0; right: 0; color: rgba(255, 255, 255, 0.9); text-align: center; text-transform: uppercase; letter-spacing: 1px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #monotype-mls .mls-discovery-lists .item--font-card .peek-hint span { display: inline-block; padding-right: 19px; background: transparent url("/s/images/iconsets/myfonts/expand-down.svg") 100% 50% no-repeat; background-size: 19px 19px; } #monotype-mls .mls-discovery-lists .item--font-card.item-active, #monotype-mls .mls-discovery-lists .item--font-card:hover { position: relative; z-index: 1; } #monotype-mls .mls-discovery-lists .item--font-card.item-active .peek-hint, #monotype-mls .mls-discovery-lists .item--font-card:hover .peek-hint { display: block; } #monotype-mls .mls-discovery-lists .item--font-card.color1:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.color1.item-active:before { background-color: #77AB97; } #monotype-mls .mls-discovery-lists .item--font-card.color2:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.color2.item-active:before { background-color: #363637; } #monotype-mls .mls-discovery-lists .item--font-card.color3:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.color3.item-active:before { background-color: #3f4e57; } #monotype-mls .mls-discovery-lists .item--font-card.color4:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.color4.item-active:before { background-color: #b1748f; } #monotype-mls .mls-discovery-lists .item--font-card.color5:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.color5.item-active:before { background-color: #e46f57; } #monotype-mls .mls-discovery-lists .item--font-card.color6:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.color6.item-active:before { background-color: #e1cd6d; } #monotype-mls .mls-discovery-lists .item--font-card.color7:hover:before, #monotype-mls .mls-discovery-lists .item--font-card.color7.item-active:before { background-color: #87b8c2; } #monotype-mls .mls-discovery-lists .item--font-card a.link--font-card { display: block; position: relative; width: 100%; padding-top: 56.25%; text-decoration: none; color: #333; } #monotype-mls .mls-discovery-lists .item--font-card a.button.small { opacity: 0; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 17px; font-size: 1.3rem; transition: opacity 200ms ease-out, bottom 200ms ease-out; color: #fff; background: #6cb5d9; } #monotype-mls .mls-discovery-lists .item--font-card a.button.small:hover { color: #6cb5d9; background: #fff; } #monotype-mls .mls-discovery-lists .item--font-card .font-preview { position: absolute; z-index: 2; left: 30px; right: 30px; top: 50%; transform: translateY(-50%); text-align: center; transition: filter 200ms ease-out; overflow: hidden; } #monotype-mls .mls-discovery-lists .item--font-card .font-preview:after { position: absolute; right: 0; top: 0; bottom: 0; width: 16px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); content: ""; } #monotype-mls .mls-discovery-lists .item--font-card .font-preview img { max-height: 60px; max-width: none; margin: 0 auto; } #monotype-mls .mls-discovery-lists .item--font-card .release-date, #monotype-mls .mls-discovery-lists .item--font-card .top-100-position { position: absolute; right: 20px; top: 20px; z-index: 1; font-size: 14px; line-height: 1; color: rgba(74, 74, 74, 0.3); } @media screen and (min-width: 800px) { #monotype-mls .mls-discovery-lists .item--font-card .release-date, #monotype-mls .mls-discovery-lists .item--font-card .top-100-position { font-size: 17px; } } @media screen and (min-width: 1000px) { #monotype-mls .mls-discovery-lists .item--font-card .release-date, #monotype-mls .mls-discovery-lists .item--font-card .top-100-position { font-size: 20px; } } #monotype-mls .mls-discovery-lists .item-peek { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; margin: 20px 0 0; min-height: 361px; } @media screen and (max-width: 376px) { #monotype-mls .mls-discovery-lists .item-peek { display: block; text-align: center; position: fixed; overflow: scroll; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; display: block; margin: 0; padding: 20px; background-color: rgba(51, 51, 51, 0.8); } #monotype-mls .mls-discovery-lists .item-peek .loader { background-color: #fff; display: block; } } #monotype-mls .mls-discovery-lists .item-peek .item-close { position: absolute; right: 20px; top: 2px; cursor: pointer; color: #b3b3b3; font-size: 28px; } @media screen and (max-width: 376px) { #monotype-mls .mls-discovery-lists .item-peek .item-close { top: 15px; right: 30px; } } #monotype-mls .mls-discovery-lists .item-peek a { color: #000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-decoration: underline; } #monotype-mls .mls-discovery-lists .item-peek a:hover { color: #000; text-decoration: none; } #monotype-mls .mls-discovery-lists .item-peek .font-info { padding: 20px 20px 20px 25px; border-right: 2px solid #F5F4F3; background-color: #fff; order: 1; color: #666; box-sizing: border-box; width: 20.2%; } @media screen and (max-width: 1400px) { #monotype-mls .mls-discovery-lists .item-peek .font-info { width: 25.5%; } } @media screen and (max-width: 1100px) { #monotype-mls .mls-discovery-lists .item-peek .font-info { width: 33.66%; } } @media screen and (max-width: 800px) { #monotype-mls .mls-discovery-lists .item-peek .font-info { width: 50%; } } @media screen and (max-width: 376px) { #monotype-mls .mls-discovery-lists .item-peek .font-info { width: 100%; border: none; } } #monotype-mls .mls-discovery-lists .item-peek .font-info img { max-height: 18px; max-width: none; } #monotype-mls .mls-discovery-lists .item-peek .font-info ul { margin: 16px 0 10px -3px; overflow: hidden; } #monotype-mls .mls-discovery-lists .item-peek .font-info ul li { position: relative; min-height: 37px; margin-bottom: 6px; } #monotype-mls .mls-discovery-lists .item-peek .font-info ul li div { overflow: hidden; } #monotype-mls .mls-discovery-lists .item-peek .font-info ul li div:after { position: absolute; right: 0; top: 0; bottom: 0; width: 25px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); content: ""; } #monotype-mls .mls-discovery-lists .item-peek .font-info ul li div img { max-width: none; } #monotype-mls .mls-discovery-lists .item-peek .font-info a.see-all { display: inline-block; padding-right: 16px; background: transparent url("/s/images/iconsets/myfonts/expand-right-dark.svg") 100% 50% no-repeat; background-size: 17px 17px; } #monotype-mls .mls-discovery-lists .item-peek .family-info { padding: 3% 2%; flex-grow: 2; box-sizing: border-box; background-color: #fff; color: #666; order: 2; } @media screen and (max-width: 1100px) { #monotype-mls .mls-discovery-lists .item-peek .family-info { padding: 30px 25px; } } @media screen and (max-width: 800px) { #monotype-mls .mls-discovery-lists .item-peek .family-info { width: 50%; } } @media screen and (max-width: 376px) { #monotype-mls .mls-discovery-lists .item-peek .family-info { width: 100%; padding: 20px 25px; } } #monotype-mls .mls-discovery-lists .item-peek .family-info > span:first-child { display: block; margin-top: -1%; font-size: 15px; } @media screen and (max-width: 376px) { #monotype-mls .mls-discovery-lists .item-peek .family-info > span:first-child { margin-top: 0; } } #monotype-mls .mls-discovery-lists .item-peek .family-info .container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; height: 100%; justify-content: center; } #monotype-mls .mls-discovery-lists .item-peek .family-info .description { display: none; font-size: 14px; line-height: 1.6; color: #666; max-width: 48em; margin-top: 25px; } @media screen and (max-width: 376px) { #monotype-mls .mls-discovery-lists .item-peek .family-info .description { margin-bottom: 15px; } } #monotype-mls .mls-discovery-lists .item-peek .family-info .font-preview { position: relative; overflow: hidden; height: 120px; margin-top: 30px; } #monotype-mls .mls-discovery-lists .item-peek .family-info .font-preview:after { position: absolute; right: -1px; top: 0; bottom: 0; width: 32px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white); content: ""; } #monotype-mls .mls-discovery-lists .item-peek .family-info .font-preview img { max-height: 120px; max-width: none; position: absolute; } @media screen and (max-width: 376px) { #monotype-mls .mls-discovery-lists .item-peek .family-info .font-preview img { position: static; } } #monotype-mls .mls-discovery-lists .item-peek .actions { margin-top: 15px; } #monotype-mls .mls-discovery-lists .item-peek .SkyFontsDownload, #monotype-mls .mls-discovery-lists .item-peek .SkyFontsDownloadAll, #monotype-mls .mls-discovery-lists .item-peek .SkyFontsTrial { margin: 0; } #monotype-mls .mls-discovery-lists .item-peek .SkyFontsDownload *:hover .help_tooltip, #monotype-mls .mls-discovery-lists .item-peek .SkyFontsDownloadAll *:hover .help_tooltip, #monotype-mls .mls-discovery-lists .item-peek .SkyFontsTrial *:hover .help_tooltip { display: none; left: 0; top: 40px; margin-left: -102px; } #monotype-mls .mls-discovery-lists .item-peek .SkyFontsDownload button, #monotype-mls .mls-discovery-lists .item-peek .SkyFontsDownloadAll button, #monotype-mls .mls-discovery-lists .item-peek .SkyFontsTrial button { font-size: 20px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding: 7px 15px; } #monotype-mls .mls-discovery-lists .item-peek .SkyFontsTrial.InProgress button { padding: 13px 16px; } #monotype-mls .mls-discovery-lists .item-peek.color1 button { background-color: #77AB97; } #monotype-mls .mls-discovery-lists .item-peek.color2 button { background-color: #363637; } #monotype-mls .mls-discovery-lists .item-peek.color3 button { background-color: #3f4e57; } #monotype-mls .mls-discovery-lists .item-peek.color4 button { background-color: #b1748f; } #monotype-mls .mls-discovery-lists .item-peek.color5 button { background-color: #e46f57; } #monotype-mls .mls-discovery-lists .item-peek.color6 button { background-color: #e1cd6d; } #monotype-mls .mls-discovery-lists .item-peek.color7 button { background-color: #87b8c2; } #monotype-mls .mls-discovery-lists .item-peek div.fc-authenticate { position: static; } #monotype-mls .monotype-mls-modal-bg { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 9998; background: rgba(0, 0, 0, 0.5); overflow-y: auto; } #monotype-mls .monotype-mls-modal { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 50px 30px; position: absolute; top: 16px; left: 16px; right: 16px; text-align: center; } @media screen and (max-width: 667px) { #monotype-mls .monotype-mls-modal { padding: 33px 20px; } } @media screen and (min-width: 800px) { #monotype-mls .monotype-mls-modal { width: 680px; left: 50%; top: 70px; right: auto; margin-left: -340px; } } #monotype-mls .monotype-mls-modal .close-modal { position: absolute; height: 15px; width: 13px; font-size: 15px; right: 10px; top: 10px; color: rgba(0, 0, 0, 0.3); text-decoration: none; cursor: pointer; } #monotype-mls .monotype-mls-modal .close-modal:hover { color: #333; } #monotype-mls .monotype-mls-modal h3.welcome { font-size: 54px; text-transform: none; color: #333; margin-bottom: 0.2em; } @media screen and (max-width: 667px) { #monotype-mls .monotype-mls-modal h3.welcome { font-size: 46px; } } #monotype-mls .monotype-mls-modal figure { margin: 0 auto 30px; max-width: 46px; } @media screen and (max-width: 667px) { #monotype-mls .monotype-mls-modal figure { margin-bottom: 10px; } } #monotype-mls .monotype-mls-modal figure img { display: block; max-width: 100%; height: auto; } #monotype-mls .monotype-mls-modal p { font-size: 24px; line-height: 31px; margin: 0 auto 1.618em; max-width: 16em; } @media screen and (max-width: 667px) { #monotype-mls .monotype-mls-modal p { font-size: 20px; margin-bottom: 20px; max-width: 20em; } } #monotype-mls .monotype-mls-modal a.button:hover { background-color: #6cb5d9; color: #fff; } #monotype-mls .owl-carousel .owl-item { box-sizing: border-box; } #monotype-mls .owl-theme .owl-controls { margin: 0; } #monotype-mls .owl-theme .owl-controls .owl-buttons div { position: absolute; top: 50%; left: -2px; opacity: 1; background: transparent url("/s/images/sub_discovery/carousel-left.png") 0 0 no-repeat; cursor: pointer; width: 34px; height: 64px; padding: 0; margin: -42px 0 0 0; display: block; border-radius: 0; text-indent: -999em; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls .owl-theme .owl-controls .owl-buttons div { background-image: url("/s/images/sub_discovery/carousel-left@2x.png"); background-size: 32px 64px; } } #monotype-mls .owl-theme .owl-controls .owl-buttons div + div { left: auto; right: -2px; background-image: url("/s/images/sub_discovery/carousel-right.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls .owl-theme .owl-controls .owl-buttons div + div { background-image: url("/s/images/sub_discovery/carousel-right@2x.png"); background-size: 32px 64px; } } @media screen and (max-width: 600px) { #monotype-mls .owl-theme .owl-controls .owl-buttons div { transform: scale(0.9); left: -3px; margin-top: -36px; } #monotype-mls .owl-theme .owl-controls .owl-buttons div + div { right: -3px; } } @media screen and (max-width: 400px) { #monotype-mls .owl-theme .owl-controls .owl-buttons div { transform: scale(0.8); left: -5px; margin-top: -34px; } #monotype-mls .owl-theme .owl-controls .owl-buttons div + div { right: -5px; } } #monotype-mls .owl-theme .owl-controls .owl-page { display: inline-block !important; } #monotype-mls .owl-theme .owl-controls .owl-pagination { position: absolute; bottom: -26px; z-index: 1; left: 50%; transform: translateX(-50%); } #monotype-mls .owl-theme .owl-controls .owl-page span { width: 9px; height: 9px; margin: 5px 6px; } 

#monotype-mls.landing { text-align: center; margin: 0 -10px -30px; } @media screen and (min-width: 768px) { #monotype-mls.landing { margin: 0 -20px -30px; } } @media screen and (min-width: 1200px) { #monotype-mls.landing { margin: 0 -2% -30px; margin: 0 calc(-2% - 1px) -30px; } } #monotype-mls .slice { clear: both; } #monotype-mls .slice.grey { background: #F5F4F3; } #monotype-mls .slice.grey.bg-img { background: transparent url("/s/images/sub_info/MF-search.png") center no-repeat; background-size: cover; position: relative; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls .slice.grey.bg-img { background-image: url("/s/images/sub_info/MF-search@2x.png"); background-size: 100% 84px; } } #monotype-mls .slice.grey.bg-img .mls-text { font-size: 0.8rem; color: #fff; position: absolute; top: 1.5rem; line-height: 1; font-family: 'Harmonia-Sans-Regular'; } #monotype-mls .slice.grey.bg-img .mls-offer-content { color: #fff; position: absolute; bottom: 1.1rem; left: 4.9rem; line-height: 1; font-family: 'Harmonia-Sans-Bold'; font-size: 1.5rem; } #monotype-mls .slice.grey.bg-img .btn-mls-new { background-color: #fb748b; border: 0; border-radius: 3px; box-sizing: border-box; color: #fff; padding: 15px 30px 14px; margin: 0; cursor: pointer; text-decoration: none; text-transform: uppercase; text-align: center; width: auto; position: absolute; right: 20px; top: 1.3rem; font-size: 14px; letter-spacing: .15em; line-height: 1; font-family: 'Harmonia-Sans-Regular'; } #monotype-mls .slice.grey .content { background: #F5F4F3; } #monotype-mls .slice.darkgrey { background: #404040; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #monotype-mls .slice.darkgrey .content { padding: 50px 0; background: #404040; } #monotype-mls .slice.darkgrey h3, #monotype-mls .slice.darkgrey h4 { color: #fff; } #monotype-mls .slice.darkgrey h4 { font-size: 22px; margin-bottom: 0; } #monotype-mls .slice.skyfonts { text-align: center; } #monotype-mls .content { max-width: 952px; margin: 0 auto; padding: 75px 15px; text-align: center; } @media screen and (max-width: 450px) { #monotype-mls .content { padding: 50px 15px; } } #monotype-mls .content.first { padding: 46px 15px 40px; } #monotype-mls h1 { font-size: 19px; margin-bottom: 30px; margin-top: -10px; } #monotype-mls h1 + h2 { font-size: 56px; margin: 0 auto 25px; max-width: 11em; line-height: 1.1; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } @media screen and (max-width: 450px) { #monotype-mls h1 + h2 { font-size: 26px; max-width: 290px; } } #monotype-mls h3 { font-size: 32px; margin-bottom: 30px; } @media screen and (max-width: 450px) { #monotype-mls h3 { font-size: 22px; } } #monotype-mls h3 + h3 { margin-top: -15px; } #monotype-mls h3.want-more { text-align: center; padding: 60px 0 80px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 26px; margin: 0 20px; } @media screen and (max-width: 600px) { #monotype-mls h3.want-more { font-size: 22px; } } #monotype-mls h4 { font-size: 20px; } #monotype-mls h5 { font-size: 17px; } #monotype-mls p.intro { font-size: 23px; margin: 0 auto; max-width: 35em; color: #4a4a4a; } @media screen and (max-width: 450px) { #monotype-mls p.intro { font-size: 17px; } } #monotype-mls p.intro span { color: #000; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #monotype-mls .plans-link { color: #4a4a4a; text-decoration: underline; } #monotype-mls .plans-link:hover { text-decoration: none; } #monotype-mls p.sub-head { font-size: 23px; margin: -7px auto 15px; max-width: 37em; } @media screen and (max-width: 450px) { #monotype-mls p.sub-head { font-size: 17px; } } #monotype-mls span.underline { text-decoration: underline; } #monotype-mls img { max-width: 100%; margin-bottom: 0; display: inline; } #monotype-mls .sub_video .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 30px auto 20px; } #monotype-mls .sub_video .embed-container iframe, #monotype-mls .sub_video .embed-container object, #monotype-mls .sub_video .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #monotype-mls .sticky_header { *zoom: 1; box-sizing: border-box; margin: 0 auto; text-align: left; position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding: 20px; border-bottom: 1px solid #ebebeb; background-color: #fff; will-change: transform; transform: translateY(-100%); transition: transform 200ms ease-in-out; } #monotype-mls .sticky_header:after { content: ""; display: table; clear: both; } @media screen and (max-width: 700px) { #monotype-mls .sticky_header { display: none; } } #monotype-mls .sticky_header.fixed { transform: translateY(0); box-shadow: 0 3px 9px rgba(51, 51, 51, 0.1); } #monotype-mls .sticky_header *, #monotype-mls .sticky_header *:before, #monotype-mls .sticky_header *:after { box-sizing: border-box; } #monotype-mls .sticky_header .title { position: relative; float: left; white-space: nowrap; } @media screen and (max-width: 900px) { #monotype-mls .sticky_header .title { float: none; width: 100%; } } #monotype-mls .sticky_header .title h2 { font-size: 21px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #monotype-mls .sticky_header .title h2 ~ p { display: inline-block; } #monotype-mls .sticky_header .title p { font-size: 15px; } @media screen and (max-width: 1024px) { #monotype-mls .sticky_header .title h2 { font-size: 18px; } #monotype-mls .sticky_header .title p { font-size: 13px; } } #monotype-mls .sticky_header .sub_brand { float: left; margin-right: 15px; width: 52px; height: 52px; } @media screen and (max-width: 1024px) { #monotype-mls .sticky_header .sub_brand { width: 47px; height: 47px; } } #monotype-mls .sticky_header p { padding: 0; margin: 0; font-size: 14px; } #monotype-mls .sticky_header .cta, #monotype-mls .sticky_header .cta-new { margin: 10px 0 0; float: right; text-align: right; } @media screen and (max-width: 1024px) { #monotype-mls .sticky_header .cta, #monotype-mls .sticky_header .cta-new { margin: 2px 0 0; } } @media screen and (max-width: 900px) { #monotype-mls .sticky_header .cta, #monotype-mls .sticky_header .cta-new { width: 100%; float: none; text-align: left; padding-left: 61px; } } #monotype-mls .sticky_header .cta .subscribed, #monotype-mls .sticky_header .cta-new .subscribed { padding-right: 10px; text-align: center; float: right; text-align: right; border: none; padding: 0; margin: 15px 0 0; } #monotype-mls .sticky_header .cta .subscribed span, #monotype-mls .sticky_header .cta-new .subscribed span { font-size: 14px; display: block; } #monotype-mls .sticky_header button, #monotype-mls .sticky_header a.button { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; border-radius: 4px; letter-spacing: 0; font-size: 18px; padding: 6px 12px; margin-left: 18px; } @media screen and (max-width: 1024px) { #monotype-mls .sticky_header button, #monotype-mls .sticky_header a.button { font-size: 16px; } } @media screen and (max-width: 900px) { #monotype-mls .sticky_header button, #monotype-mls .sticky_header a.button { font-size: 13px; } } #monotype-mls .sticky_header .sub_price { color: #444; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 20px; margin-left: 18px; } @media screen and (max-width: 1024px) { #monotype-mls .sticky_header .sub_price { font-size: 16px; } } #monotype-mls .sticky_header .sub_price_switcher { display: inline-block; position: relative; } @media screen and (max-width: 1024px) { #monotype-mls .sticky_header .sub_price_switcher select.mf-dropdown.alt { font-size: 12px; padding-right: 28px; padding-left: 6px; height: 30px; background-position: right 10px center; } } #monotype-mls form { margin: 0; position: relative; background: rgba(51, 51, 51, 0); } #monotype-mls form > a:hover, #monotype-mls form > a:focus { background-color: transparent; } #monotype-mls form div.close { display: none; } #monotype-mls form fieldset { margin: 0; padding: 0; border: 0; } #monotype-mls form fieldset input[type=text] { width: 100%; max-width: 396px; box-sizing: border-box; margin-right: 4px; padding: 7px 10px; } #monotype-mls form fieldset input[type=submit], #monotype-mls form fieldset a.button { position: relative; top: -1px; font-size: 21px; padding: 10px 25px 12px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #monotype-mls form fieldset input[type=text], #monotype-mls form fieldset input[type=submit] { display: inline-block; vertical-align: middle; line-height: 1; } @media screen and (max-width: 600px) { #monotype-mls form fieldset input[type=text], #monotype-mls form fieldset input[type=submit] { margin: 12px auto 0; width: 100%; max-width: 220px; display: block; } } #monotype-mls form fieldset label { display: block; max-width: 564px; margin: 0 auto; text-align: left; font-size: 13px; cursor: pointer; color: #333; } @media screen and (max-width: 600px) { #monotype-mls form fieldset label { max-width: 216px; text-align: center; } } #monotype-mls form fieldset label a { color: #333; text-decoration: underline; } #monotype-mls form fieldset label a:hover { text-decoration: none; } #monotype-mls form fieldset label span { vertical-align: middle; } #monotype-mls form fieldset small { text-align: center; display: block; font-size: 11px; color: #797878; } @media screen and (max-width: 600px) { #monotype-mls form fieldset small { margin: 6px auto; } } #monotype-mls form:target { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; background: rgba(51, 51, 51, 0.8); transition: background 200ms; } #monotype-mls form:target div.close { display: block; position: absolute; top: 0; right: 0; } #monotype-mls form:target div.close a { display: inline-block; padding: 2px 6px; } #monotype-mls form:target > a { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 101; text-decoration: none; background-color: transparent; } #monotype-mls form:target fieldset { padding: 40px; background-color: #fff; position: absolute; z-index: 102; top: 50%; left: 50%; width: 100%; max-width: 676px; margin: 0 auto; transform: translate(-50%, -50%); } @media screen and (max-width: 672px) { #monotype-mls form:target fieldset { transform: translate(0, -50%); left: 0; right: 0; width: auto; padding-left: 0; padding-right: 0; } } #monotype-mls form:target + .brace { height: 61px; } #monotype-mls span.a, #monotype-mls span.z { display: inline-block; padding: 0 3px; color: #fff; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #monotype-mls span.a { background-color: #E46F57; } #monotype-mls span.z { background-color: #74AC97; } #monotype-mls .three-col, #monotype-mls .two-col { margin: 75px auto 50px; max-width: 875px; } #monotype-mls .three-col h4, #monotype-mls .two-col h4 { margin-bottom: 15px; } #monotype-mls .three-col li, #monotype-mls .two-col li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } #monotype-mls .three-col p, #monotype-mls .two-col p { font-size: 17px; } #monotype-mls .three-col div, #monotype-mls .two-col div { height: 250px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } #monotype-mls .three-col { column-count: 3; column-gap: 21px; } #monotype-mls .two-col { column-count: 2; } #monotype-mls .two-col.small li { width: 300px; margin: 0 auto; } @media screen and (max-width: 450px) { #monotype-mls .three-col, #monotype-mls .two-col { column-count: 1; max-width: 290px; margin-bottom: 15px; } } #monotype-mls .font-strip { background: transparent url("/s/images/sub_info/font-strip-2.png") center repeat-x; height: 195px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls .font-strip { background-image: url("/s/images/sub_info/font-strip-2@2x.png"); background-size: 966px 195px; } } #monotype-mls .font-wall { background: transparent url("/s/images/sub_info/font-wall.jpg") center repeat-x; height: 519px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #monotype-mls .font-wall { background-image: url("/s/images/sub_info/font-wall@2x.jpg"); background-size: 923px 519px; } } #monotype-mls .send-screens { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; padding-bottom: 75px; } @media screen and (max-width: 768px) { #monotype-mls .send-screens { flex-wrap: wrap; } } #monotype-mls .send-screens img { max-height: 540px; } #monotype-mls .send-screens img:nth-child(2) { margin: 0 80px; } #monotype-mls ul, #monotype-mls li { list-style: none; padding: 0; margin: 0; } #monotype-mls .webfont-views { position: relative; height: 400px; } #monotype-mls .webfont-views img { position: absolute; } #monotype-mls .webfont-views img:nth-child(1) { top: 0; left: 0; } #monotype-mls .webfont-views img:nth-child(2) { top: 50px; right: 148px; } #monotype-mls .webfont-views img:nth-child(3) { top: 137px; right: 36px; } #monotype-mls ul.plans { margin: 30px auto 60px; max-width: 900px; font-size: 15px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; } @media screen and (max-width: 720px) { #monotype-mls ul.plans { max-width: 400px; } } @media screen and (max-width: 450px) { #monotype-mls ul.plans { max-width: 330px; } } #monotype-mls ul.plans h5 { font-size: 20px; font-weight: bold; margin-bottom: 5px; } #monotype-mls ul.plans li { -webkit-box-flex: 0 33%; -webkit-flex: 0 33%; -ms-flex: 0 33%; flex: 0 33%; } @media screen and (max-width: 720px) { #monotype-mls ul.plans li { -webkit-box-flex: 0 100%; -webkit-flex: 0 100%; -ms-flex: 0 100%; flex: 0 100%; } } #monotype-mls ul.plans li .plan { background: #fff; padding: 30px 20px; margin-bottom: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #monotype-mls ul.plans li .plan .subscribed span { display: block; } #monotype-mls ul.plans li .plan small { display: block; color: rgba(255, 255, 255, 0.9); font-size: 12px; margin-top: 16px; } #monotype-mls ul.plans li .plan small a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; } #monotype-mls ul.plans li .plan small a:hover { text-decoration: none; } #monotype-mls ul.plans li .plan h4 { font-size: 18px; } #monotype-mls ul.plans li .plan p { font-size: 16px; } #monotype-mls ul.plans li .plan > ul > li { border-bottom: 1px solid #DDDDDD; padding: 15px 0; } #monotype-mls ul.plans li .plan > ul > li h4 { text-transform: capitalize; } #monotype-mls ul.plans li .plan > ul > li:last-child { border-bottom: 0; } #monotype-mls ul.plans li .plan span.pageviews-dropdown-custom-button { text-decoration: underline; font-size: 13px; } #monotype-mls ul.plans li .plan span.pageviews-dropdown-custom-button:hover { text-decoration: none; cursor: pointer; } #monotype-mls ul.plans li .plan .custom-select { background: none; color: inherit; border: none; padding: 0; margin: 0; font-size: 15px; } #monotype-mls ul.plans li .plan .custom-select .dropdown { top: 69px; right: -84px; left: 0; } #monotype-mls ul.plans li .plan .custom-select .dropdown li > div { text-align: left; } #monotype-mls ul.plans li .plan .custom-select .dropdown p.star { font-size: 13px; } #monotype-mls ul.plans li:nth-of-type(2) .plan { background-color: #333; color: #fff; box-sizing: border-box; min-height: 275px; padding: 30px 30px; } @media screen and (max-width: 720px) { #monotype-mls ul.plans li:nth-of-type(2) .plan { min-height: 0; } } #monotype-mls ul.plans li:nth-of-type(2) .plan h4, #monotype-mls ul.plans li:nth-of-type(2) .plan h5 { color: #fff; } #monotype-mls ul.plans li:nth-of-type(2) .plan > ul > li { border-bottom: 1px solid #6E6E6E; } #monotype-mls ul.plans li:nth-of-type(2) .plan > ul > li:last-child { border-bottom: 0; } @media screen and (max-width: 450px) { #monotype-mls ul.plans li:first-child, #monotype-mls ul.plans li:last-child { max-width: none; padding-top: 0; } } #monotype-mls ul.plans li:first-child .plan, #monotype-mls ul.plans li:last-child .plan { box-shadow: 0 0 8px 1px rgba(51, 51, 51, 0.2); } #monotype-mls ul.plans li a.button { margin-bottom: 6px; margin-top: 16px; font-size: 13px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; padding: 8px 16px 9px; } #monotype-mls div.press { text-align: left; } #monotype-mls div.press div.image { width: 36%; text-align: center; padding-left: 68px; padding-top: 33px; box-sizing: border-box; vertical-align: top; display: inline-block; } @media screen and (max-width: 820px) { #monotype-mls div.press div.image { display: block; text-align: center; padding-left: 0; width: auto; } } #monotype-mls div.press blockquote { width: 48%; } @media screen and (max-width: 820px) { #monotype-mls div.press blockquote { width: 100%; } } #monotype-mls ul.testimonials.two-col { margin-top: 0; } @media screen and (max-width: 640px) { #monotype-mls ul.testimonials.two-col { column-count: 1; } } #monotype-mls ul.testimonials.two-col div.avatar { display: inline-block; margin-right: 20px; vertical-align: middle; } #monotype-mls ul.testimonials.two-col blockquote { max-width: 277px; } @media screen and (max-width: 640px) { #monotype-mls ul.testimonials.two-col blockquote { max-width: 388px; margin-top: -20px; } } #monotype-mls blockquote { text-align: left; border: none; margin: 0; padding: 0; font-style: normal; display: inline-block; vertical-align: middle; } #monotype-mls blockquote p { font-size: 17px; } @media screen and (max-width: 820px) { #monotype-mls blockquote { display: block; width: auto; max-width: 369px; margin: 0 auto; } } #monotype-mls blockquote:before { content: '\201C'; display: block; font-size: 60px; line-height: 1; position: relative; bottom: -24px; left: -4px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #monotype-mls blockquote p.author { text-transform: uppercase; letter-spacing: 1px; font-size: 15px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #969696; margin-top: 11px; } #monotype-mls .two-col blockquote p { font-size: 17px; } #monotype-mls .two-col blockquote p.author { font-size: 15px; } #monotype-mls .mls-icon { display: inline-block; width: 23px; height: 23px; vertical-align: bottom; } #monotype-mls button.mls-install { font-size: 11px; margin: 0; background: #4B4B4B; display: inline-block; vertical-align: bottom; cursor: default; padding: 5px 10px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } #monotype-mls ul.faqs { text-align: left; max-width: none; column-gap: 40px; } @media screen and (max-width: 1024px) { #monotype-mls ul.faqs { padding: 0 16px; } } #monotype-mls ul.faqs li { margin-bottom: 20px; } #monotype-mls ul.faqs li p { font-size: 16px; } #monotype-mls ul.faqs li h4 { font-size: 17px; margin-bottom: 4px; } #monotype-mls + footer#mainFooter { border-top: none; } 

.subList * { box-sizing: border-box; } .subList .nowrap { white-space: nowrap; } .subList header { *zoom: 1; clear: both; position: relative; margin: 0 auto; border-bottom: 1px solid #ebebeb; } .subList header:after { content: ""; display: table; clear: both; } @media screen and (min-width: 1000px) { .subList header { padding-bottom: 22px; } } .subList header .title { position: relative; padding-left: 63px; min-height: 68px; } @media screen and (min-width: 480px) { .subList header .title { padding-left: 81px; } } @media screen and (min-width: 1000px) { .subList header .title { float: left; width: 60%; } } .subList header .sub_brand { position: absolute; left: 0; top: 1px; width: 50px; height: 50px; background-image: url("/s/images/logo/MLS-icon.png"); background-repeat: no-repeat; background-size: cover; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .subList header .sub_brand { background-image: url("/s/images/logo/MLS-icon@2x.png"); background-size: 50px 50px; } } @media screen and (min-width: 480px) { .subList header .sub_brand { width: 65px; height: 65px; } } @media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 480px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 480px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-width: 480px) and (min-device-pixel-ratio: 2), only screen and (min-width: 480px) and (min-resolution: 144dpi), only screen and (min-width: 480px) and (min-resolution: 2dppx) { .subList header .sub_brand { background-image: url("/s/images/logo/MLS-icon@2x.png"); background-size: 65px 65px; } } .subList header h1 { line-height: 1; padding: 0; margin: 0 0 4px; font-size: 20px; } @media screen and (min-width: 700px) { .subList header h1 { font-size: 24px; } } @media screen and (min-width: 1000px) { .subList header h1 { font-size: 28px; } } .subList header p { padding: 0; margin: 0; font-size: 12px; display: inline; } @media screen and (min-width: 480px) { .subList header p { font-size: 14px; } } @media screen and (min-width: 600px) { .subList header p { display: block; } } @media screen and (min-width: 700px) { .subList header p { max-width: 80%; } } @media screen and (min-width: 850px) { .subList header p { max-width: 100%; } } .subList header .cta-hide { display: none; } .subList header .cta { padding: 0 0 10px; margin: 10px 0; text-align: center; } .subList header .cta > span:first-child { font-size: 14px; margin-top: 16px; display: block; padding-right: 10px; } @media screen and (max-width: 1000px) { .subList header .cta > span:first-child { position: absolute; right: 0; top: 12px; } } @media screen and (max-width: 700px) { .subList header .cta > span:first-child { position: static; margin-bottom: 15px; margin-top: 0; } } @media screen and (max-width: 480px) { .subList header .cta > span:first-child { font-size: 12px; text-align: left; margin-left: 63px; } } @media screen and (min-width: 480px) { .subList header .cta { text-align: left; padding-left: 81px; } } @media screen and (min-width: 1000px) { .subList header .cta { float: right; text-align: right; width: 40%; padding: 0; margin: 15px 0 0; } } .subList header button { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; background: #f0f; font-size: 13px; border-radius: 4px; margin-left: 10px; letter-spacing: 0; } .subList header button:hover { background: #d900d9; } @media screen and (min-width: 480px) { .subList header button { margin: 0 0 0 10px; } } @media screen and (min-width: 700px) { .subList header button { font-size: 16px; } } @media screen and (min-width: 1000px) { .subList header button { font-size: 18px; padding: 6px 12px; margin-left: 18px; } } .subList header .sub_price { color: #444; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-left: 10px; font-size: 13px; } @media screen and (min-width: 700px) { .subList header .sub_price { font-size: 16px; } } @media screen and (min-width: 1000px) { .subList header .sub_price { font-size: 20px; margin-left: 18px; } } .subList header .sub_price_switcher { display: inline-block; position: relative; } .subList header .sub_price_switcher select { border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; outline: none; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #4a4a4a; font-size: 12px; border: 1px solid rgba(155, 155, 155, 0.2); padding: 6px 28px 6px 6px; background: #fff; } @media screen and (min-width: 1000px) { .subList header .sub_price_switcher select { padding: 10px 44px 10px 14px; font-size: 14px; } } .subList header .sub_price_switcher select:focus { outline: none; } .subList header .sub_price_switcher:after { position: absolute; z-index: 2; right: 12px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); width: 10px; height: 8px; background: url("/s/w/sub_info/select_menu_arrow.svg") 0 0 no-repeat; background-image: url("/s/w/sub_info/select_menu_arrow@2x.png") \9 ; background-size: 10px 8px; content: ""; pointer-events: none; } .subList header .sub_price_switcher select::-ms-expand { display: none; } .subList .container { width: 100%; margin: 0 auto; } .subList .subSearch .related_tags { display: none; } .subList .tabLine { padding-top: 30px; } .subList .tabLine .local-tabs { float: left; margin-top: 30px; } .subList .tabLine .mls-search-form { float: left; } @media screen and (max-width: 1060px) { .subList .tabLine .mls-search-form { margin-bottom: 0px; float: none; } } .subList .tabLine .mls-search-form .filter { display: none; } .subList .tabLine .mls-search-form .goButton { flex: inherit; } .subList .tabLine .mls-tabs { overflow: auto; padding: 10px 0; margin-bottom: -20px; width: 100%; float: right; -webkit-font-smoothing: antialiased; } @media screen and (max-width: 1060px) { .subList .tabLine .mls-tabs { float: none; width: 100%; } } .subList .tabLine .mls-tabs .local-tab { font-size: 14px; margin: 0 12px; } .subList .tabLine .mls-tabs .mls-tab { border-bottom: 3px solid white; color: #555; position: relative; top: 1px; padding: 5px 0; margin: 0 12px; float: left; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 17px; font-weight: normal; } @media screen and (max-width: 1060px) { .subList .tabLine .mls-tabs .mls-tab:first-child { margin-left: 0; } } .subList .tabLine .mls-tabs .mls-tab.active { border-width: 2px; margin-bottom: 1px; border-color: #0af; color: #000; } .subList .tabLine .mls-tabs .mls-tab.inactive { color: #CCCCCC; } .subList .tabLine .mls-tabs .mls-tab a { color: #555; -moz-transition: color 200ms ease-in-out; -o-transition: color 200ms ease-in-out; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; } .subList .tabLine .mls-tabs .mls-tab a:hover { text-decoration: none; color: #09f; } .subList .tabLine #subSearchForm #searchBox { width: 285px; } .subList .subSearchFilter { margin-bottom: 12px; } 

.subPromo * { box-sizing: border-box; } .subPromo .nowrap { white-space: nowrap; } .subPromo .couponDisclaimerWrapper { padding: 12px; margin: 12px auto; width: 700px; } .subPromo .couponDisclaimerWrapper h2 { text-align: center; } 

.mls-starter-pack { background: #F8F8F8; margin: 0 -10px -30px; } @media screen and (min-width: 768px) { .mls-starter-pack { margin: 0 -20px -30px; } } @media screen and (min-width: 1200px) { .mls-starter-pack { margin: 0 -2% -30px; margin: 0 calc(-2% - 1px) -30px; } } .mls-starter-pack .content { max-width: 1440px; margin: 0 auto; text-align: center; padding: 50px 0; } .mls-starter-pack h1 { font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 49px; margin-bottom: 30px; padding: 0 1em; } @media screen and (max-width: 846px) { .mls-starter-pack h1 { font-size: 38px; } } .mls-starter-pack h2 { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #585858; max-width: 36em; margin: 0 auto 40px; padding: 0 1em; font-size: 24px; } @media screen and (max-width: 846px) { .mls-starter-pack h2 { font-size: 20px; line-height: 1.4; } } .mls-starter-pack form.starter-pack-signup .cta { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin: 0 auto 0; text-align: center; max-width: 600px; padding: 0 14px; } @media screen and (max-width: 450px) { .mls-starter-pack form.starter-pack-signup .cta { flex-direction: column; } } .mls-starter-pack form.starter-pack-signup.hidden { display: none; } .mls-starter-pack form.starter-pack-signup div:first-child { -webkit-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding-right: 10px; width: 100%; } @media screen and (max-width: 450px) { .mls-starter-pack form.starter-pack-signup div:first-child { padding: 0; } } .mls-starter-pack form.starter-pack-signup div:last-child { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .mls-starter-pack form.starter-pack-signup input[type=text], .mls-starter-pack form.starter-pack-signup input[type=email], .mls-starter-pack form.starter-pack-signup input[type=submit] { font-size: 16px; border-radius: 4px; } .mls-starter-pack form.starter-pack-signup input[type=text], .mls-starter-pack form.starter-pack-signup input[type=email] { width: 100%; padding: 13px 20px; border: 2px solid #ddd; } .mls-starter-pack form.starter-pack-signup input[type=text]::-webkit-input-placeholder, .mls-starter-pack form.starter-pack-signup input[type=email]::-webkit-input-placeholder { font-size: 18px; } .mls-starter-pack form.starter-pack-signup input[type=text]:-moz-placeholder, .mls-starter-pack form.starter-pack-signup input[type=email]:-moz-placeholder { font-size: 18px; } .mls-starter-pack form.starter-pack-signup input[type=text]::-moz-placeholder, .mls-starter-pack form.starter-pack-signup input[type=email]::-moz-placeholder { font-size: 18px; } .mls-starter-pack form.starter-pack-signup input[type=text]:-ms-input-placeholder, .mls-starter-pack form.starter-pack-signup input[type=email]:-ms-input-placeholder { font-size: 18px; } .mls-starter-pack form.starter-pack-signup input[type=text].valid, .mls-starter-pack form.starter-pack-signup input[type=email].valid { border-color: #09f; } .mls-starter-pack form.starter-pack-signup input[type=text].invalid, .mls-starter-pack form.starter-pack-signup input[type=email].invalid { border: 2px #c00 solid; background-color: inherit; padding: 13px 20px; height: inherit; } .mls-starter-pack form.starter-pack-signup:target input[type=text], .mls-starter-pack form.starter-pack-signup:target input[type=email] { border-color: #09f; } .mls-starter-pack form.starter-pack-signup:target input[type=text].invalid, .mls-starter-pack form.starter-pack-signup:target input[type=email].invalid { border-color: #c00; } .mls-starter-pack form.starter-pack-signup .disclaimer { margin-bottom: 50px; } .mls-starter-pack form.starter-pack-signup input[type=submit] { padding: 15px 32px; margin: 0; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; letter-spacing: 0; } @media screen and (max-width: 450px) { .mls-starter-pack form.starter-pack-signup input[type=submit] { margin: 15px 0; } } .mls-starter-pack form.starter-pack-signup .error { margin-top: 10px; font-size: 13px; height: 16px; } .mls-starter-pack form.starter-pack-signup .error:empty { margin: 0; height: auto; } .mls-starter-pack .disclaimer { max-width: 600px; text-align: left; margin: 12px auto 0; padding: 0 14px; } .mls-starter-pack .disclaimer label { font-size: 12px; line-height: 20px; color: #666; display: block; cursor: pointer; } .mls-starter-pack .disclaimer label span.checkbox { position: relative; top: -1px; min-width: 18px; } .mls-starter-pack .disclaimer label.error { margin-top: 0; font-size: 12px; height: auto; } .mls-starter-pack .disclaimer label.error .text { color: #cc0000; } .mls-starter-pack small { display: block; color: #666; font-size: 10px; margin-top: 4px; } .mls-starter-pack a + small { margin-bottom: 15px; } .mls-starter-pack .install-pack { margin-bottom: 50px; } .mls-starter-pack .install-pack button { padding: 12px 24px; font-size: 18px; background: #09F; } .mls-starter-pack .install-pack button:hover { background-color: #078adb; } .mls-starter-pack .install-pack.hidden { display: none; } .mls-starter-pack .header-cta a.button { padding: 15px 32px; margin: 0 0 50px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; letter-spacing: 0; font-size: 16px; border-radius: 4px; } .mls-starter-pack .header-cta a.button.hidden { display: none; } .mls-starter-pack *, .mls-starter-pack *:before, .mls-starter-pack *:after { box-sizing: border-box; } .signup-modal { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin: 0 auto; max-width: 665px; padding: 40px 20px 40px; -webkit-font-smoothing: antialiased; text-align: center; box-sizing: border-box; color: #333; } .signup-modal h1 { font-size: 22px; margin: 30px 0; } .signup-modal h2 { font-size: 18px; } .signup-modal form { display: block; max-width: 300px; margin: 0 auto; } .signup-modal form label { font-size: 18px; text-align: left; display: block; margin-bottom: 18px; } .signup-modal form input[type=text], .signup-modal form input[type=email], .signup-modal form input[type=password] { width: 100%; box-sizing: border-box; margin-top: 8px; } .signup-modal form input[type=submit] { font-size: 16px; border-radius: 4px; padding: 13px 70px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; letter-spacing: 0; margin: 60px 0 0; } .signup-modal form input[type=password].invalid { border: 1px #c00 solid; background-color: inherit; height: inherit; } .signup-modal form .error { color: #c00; margin-top: 15px; } .signup-modal form .field { margin-bottom: 18px; } .signup-modal a#resetPassword { font-size: 14px; float: right; line-height: 24px; } .font-packs { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; margin-bottom: 30px; } .font-packs .font-pack { position: relative; text-align: left; background: #ededed; margin-bottom: 40px; } .font-packs .font-pack img { display: block; max-width: 100%; } .font-packs .font-pack .button { padding: 12px 24px; font-size: 18px; background: #4B4B4B; margin: 0 15px; } .font-packs .font-pack .button.hidden { display: none; } .font-packs .font-pack.free:before { content: "Free"; position: absolute; color: #fff; font-size: 24px; top: 0; left: 0; text-transform: uppercase; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; transform: rotate(-45deg); z-index: 1; width: 112px; height: 112px; padding: 13px; text-align: center; } .font-packs .font-pack.free:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 112px 112px 0 0; border-color: rgba(51, 51, 51, 0.4) transparent transparent transparent; } .font-packs .font-pack .description { float: left; width: 66%; font-size: 20px; line-height: 1.2; color: #666; max-width: 40em; } @media screen and (max-width: 600px) { .font-packs .font-pack .description { width: 100%; float: none; max-width: none; } } .font-packs .font-pack .description:before { display: inline-block; vertical-align: middle; margin: 0 30px 0 0; width: 68px; height: 68px; } .font-packs .font-pack .description p { font-size: 20px; line-height: 1.2; display: inline-block; width: calc(100% - 110px); vertical-align: middle; } @media screen and (max-width: 1024px) { .font-packs .font-pack .description:before { width: 40px; height: 40px; position: absolute; top: -67px; left: 25px; opacity: 1.8; } .font-packs .font-pack .description p { width: 100%; font-size: 18px; } } @media screen and (max-width: 600px) { .font-packs .font-pack .description:before { display: none; } } .font-packs .font-pack .description p:last-child { margin-bottom: 0; } .font-packs .font-pack .description strong { color: #000; } .font-packs .font-pack .cta { float: right; width: 33%; text-align: right; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 600px) { .font-packs .font-pack .cta { transform: none; position: static; width: 100%; text-align: Center; padding-top: 20px; float: none; } } .font-packs .font-pack .cta > div { display: inline-block; vertical-align: middle; } .font-packs .font-pack .cta > div.weights { font-size: 22px; color: #666; } @media screen and (max-width: 1024px) { .font-packs .font-pack .cta > div.weights { font-size: 18px; display: block; margin-bottom: 7px; } } @media screen and (max-width: 600px) { .font-packs .font-pack .cta > div.weights { font-size: 16px; } } .font-packs .font-pack .cta .SkyFontsDownload, .font-packs .font-pack .cta .SkyFontsDownloadAll, .font-packs .font-pack .cta .SkyFontsTrial { margin-left: 16px; } .font-packs .font-pack .cta .SkyFontsDownload button, .font-packs .font-pack .cta .SkyFontsDownloadAll button, .font-packs .font-pack .cta .SkyFontsTrial button { font-size: 18px; padding: 10px 26px; background: #09F; } .font-packs .font-pack .cta .SkyFontsDownload button:hover, .font-packs .font-pack .cta .SkyFontsDownloadAll button:hover, .font-packs .font-pack .cta .SkyFontsTrial button:hover { background-color: #078adb; } @media screen and (max-width: 1024px) { .font-packs .font-pack .cta .SkyFontsDownload, .font-packs .font-pack .cta .SkyFontsDownloadAll, .font-packs .font-pack .cta .SkyFontsTrial { margin-left: 0; } .font-packs .font-pack .cta .SkyFontsDownload button, .font-packs .font-pack .cta .SkyFontsDownloadAll button, .font-packs .font-pack .cta .SkyFontsTrial button { font-size: 17px; } } .font-packs .font-pack .cta .SkyFontsDownload.hidden, .font-packs .font-pack .cta .SkyFontsDownloadAll.hidden, .font-packs .font-pack .cta .SkyFontsTrial.hidden { display: none; } .font-packs .font-pack figcaption { padding: 30px; position: relative; } @media screen and (max-width: 600px) { .font-packs .font-pack figcaption { padding: 25px; } } 

#superuser_bar { background-color: #FFC; border-style: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; padding: 2px 10px; } #superuser_bar > div { float: left; padding: 1px 3px; } #superuser_bar > div:last-child { float: right; padding: 1px 2px; } #superuser_bar input[type=text] { font-size: 13px; padding: 2px 2px; } #superuser_bar input[type=submit] { margin: 0; padding: 4px 6px; font-size: 13px; line-height: 1; } @media print { #superuser_bar { display: none; } } 

#tag_admin_table tr th { text-align: left; font-size: larger; padding-top: 1ex; } #tag_admin_table form { white-space: nowrap; } #tag_admin_table form input[type=text] { width: 300px; } #tag_admin_table form .status { color: red; background-color: #FFFF99; } #tag_admin_table tr td:first-child { text-align: right; } #tag_admin_table tr:hover { background-color: #FFEECC; } 

ul.tag_cloud_widget li.xtra_link { padding-top: 12px; } ul.tag_cloud_list { margin: 0px; padding: 0px; list-style-type: none; text-align: justify; font-family: "Helvetica Neue", "Neue Helvetica", Arial, Helvetica, sans-serif; line-height: 18pt; } ul.tag_cloud_list li { display: inline; padding-right: 12px; } 

div.tag_description { position: relative; } div.tag_description a.edit { position: absolute; bottom: 0px; right: 0px; } 

#tag_game form { border: 1px solid #999; text-align: center; } #tag_game .do_you_agree { color: #999; font-size: 24px; margin: 24px auto; } #tag_game #tag_game_the_quoted_tag { color: #999; font-size: 48px; font-family: Georgia, serif; } #tag_game #tag_game_the_tag_description { color: #999; width: 640px; margin: 12px auto; text-align: left; } #tag_game #tag_game_previous_details { color: #666; font-size: 18px; padding-bottom: 24px; } #tag_game form input.button { margin: 24px 12px; font-size: 18px; padding-right: 24px; padding-left: 24px; border-width: 3px; } #tag_game form input.yes_button { background-color: #093; border-color: #9cffa8 #186821 #093410 #58d560; } #tag_game form input.yes_button:active, #tag_game form input.yes_button.active { background-color: #060; border-color: #093410 #58d560 #9cffa8 #186821; } #tag_game form input.skip_button { color: #444; background-color: #CCC; border-color: #f2f2f2 #666666 #333333 #e5e5e5; } #tag_game form input.skip_button:active, #tag_game form input.skip_button.active { color: #000; background-color: #666; border-color: #333333 #e5e5e5 #f2f2f2 #666666; } #tag_game form input.no_button { background-color: #cc0000; border-color: #f5919b #4b0000 #320000 #db5464; } #tag_game form input.no_button:active, #tag_game form input.no_button.active { background-color: #660000; border-color: #320000 #db5464 #f5919b #4b0000; } 

div.tags_widget div.mytags { float: right; } div.tags_widget ul { overflow: hidden; } div.tags_widget li.none { font-style: italic; } div.taginput { margin: 6px 0px; } div.instructions { font-size: smaller; } img.taggit { width: 63px; height: 25px; } div.tags_widget form div.tag_input_controls { white-space: nowrap; } div.tags_widget form input.tags_input { margin-right: 6px; } 

.p-team--mls { font-smooth: auto; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; /* ------------------------------------------------------------ Breakpoint Variables ------------------------------------------------------------ */ /* ------------------------------------------------------------ Spacing Variables ------------------------------------------------------------ */ /* ------------------------------------------------------------ Color Variables ------------------------------------------------------------ */ /* ------------------------------------------------------------ Font Variables ------------------------------------------------------------ */ /* ------------------------------------------------------------ * * Animations & Transitions * ------------------------------------------------------------ */ /* ------------------------------------------------------------ * Miscellaneous * ------------------------------------------------------------ */ font-size: 16px; background-color: #fff; margin: 1rem 0 0; clear: both; } .p-team--mls :root { --mt-breakpoint: "xs"; --mt-breakpoint--px: $mt-breakpoint--px; --mt-breakpoint--xs: $mt-breakpoint--xs; --mt-breakpoint--s: $mt-breakpoint--s; --mt-breakpoint--m: $mt-breakpoint--m; --mt-breakpoint--r: $mt-breakpoint--r; --mt-breakpoint--l: $mt-breakpoint--l; } @media (min-width: 30rem) { .p-team--mls :root { --mt-breakpoint: "s"; } } @media (min-width: 40rem) { .p-team--mls :root { --mt-breakpoint: "m"; } } @media (min-width: 48rem) { .p-team--mls :root { --mt-breakpoint: "r"; } } @media (min-width: 64rem) { .p-team--mls :root { --mt-breakpoint: "l"; } } .p-team--mls .mt-u-text--uppercase { text-transform: uppercase; } .p-team--mls .mt-u-flex-row-reverse { flex-direction: row-reverse; } .p-team--mls .mt-u-flex-column-reverse { flex-direction: column-reverse; } @supports (--css: variables) { .p-team--mls .mt-b-banner { background-color: var(--mt-banner-bg-color, #fff); } } .p-team--mls .mt-b-banner .mt-b-banner__content { color: #1e1e1e; position: absolute; right: 0; left: 0; margin: auto; top: 112px; } .p-team--mls .mt-b-banner .mt-b-banner__content a, .p-team--mls .mt-b-banner .mt-b-banner__content button { color: currentColor; margin: 16px auto 6px; max-width: 182px; } .p-team--mls .mt-b-banner .mt-b-banner__content button { fill: currentColor; } @supports (--css: variables) { .p-team--mls .mt-b-banner .mt-b-banner__content { color: var(--mt-banner-color, #1e1e1e); } } .p-team--mls .mt-b-banner .mt-e-button { background: transparent; border-color: currentColor; color: currentColor; display: inline-block; margin: 0.375rem; } .p-team--mls .mt-b-banner h1 { font-size: 1.875rem; line-height: 1; margin-bottom: 0.75rem; text-transform: uppercase; } .p-team--mls .mt-b-banner h1:last-child { margin-bottom: 0; } .p-team--mls .mt-b-banner p { font-size: 1rem; margin-bottom: 1.5rem; } .p-team--mls .mt-b-banner p:last-child { margin-bottom: 0; } .p-team--mls .mt-b-banner--inline { height: auto; } .p-team--mls .mt-b-banner--inline .mt-b-banner__content { align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; } .p-team--mls .mt-b-banner--inline .mt-b-banner__content h1 { -webkit-flex: 1 0 0; -ms-flex: 1 0 0; flex: 1 0 0; font-size: 48px; } @media (min-width: 40rem) { .p-team--mls .mt-b-banner h1 { font-size: 3.75rem; } .p-team--mls .mt-b-banner p { font-size: 1.5rem; } } .p-team--mls .mt-b-typer { color: #1e1e1e; font-family: "Kootenay Pro1277143", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 60px; line-height: 1.4; overflow: hidden; position: relative; word-wrap: break-word; padding-right: 0.1em; } .p-team--mls .mt-b-typer[data-mt-html] a[href] { cursor: pointer; border-bottom: 1px solid currentColor; } .p-team--mls .mt-b-typer[data-mt-html] a[href]:focus, .p-team--mls .mt-b-typer[data-mt-html] a[href]:hover { border-color: #0099ff; } .p-team--mls .mt-b-typer__editable { cursor: text; display: block; max-width: 100%; } .p-team--mls .mt-b-typer__editable:focus { outline: none; } .p-team--mls .mt-b-typer__clone { pointer-events: none; position: absolute; visibility: hidden; width: 100%; width: calc(100% - 0.1em); } @keyframes mt-b-typer__caret { 50% { opacity: 0; } } .p-team--mls .mt-b-typer__caret { animation: mt-b-typer__caret 1.25s step-start 0s infinite; display: inline-block; height: 0; position: relative; vertical-align: top; visibility: visible; width: 0; } .p-team--mls .mt-b-typer__caret::after { background-color: #0099ff; content: ""; display: block; height: 1.4em; left: 0.33em; min-width: 2px; max-width: 8px; position: absolute; top: 50%; width: 0.07em; } @supports (--css: variables) { .p-team--mls .mt-b-typer__caret::after { background-color: var(--typer-caret-color, #0099ff); } } .p-team--mls .mt-b-subtitle { font-size: 72px; line-height: 72px; font-family: "Malabar ET W08 Regular", Georgia, Times, "Times New Roman", serif; margin-top: 0.375rem; } @media (max-width: 63.9375rem) { .p-team--mls .mt-b-subtitle { font-size: 1.5rem; line-height: 2.0625rem; } } @media (max-width: 47.9375rem) { .p-team--mls .mt-b-subtitle { font-size: 1.25rem; line-height: 1.6875rem; } } .p-team--mls .mt-b-subtitle a { border-bottom: 1px solid #1e1e1e; transition: border-bottom linear 220ms; } .p-team--mls .mt-b-subtitle a:hover { border-bottom: 1px solid #73b4da; } .p-team--mls .title-mls { font-size: 72px; line-height: 72px; font-family: 'HarmoniaSans W01 Light'; width: 530px; } @media screen and (max-width: 1200px) { .p-team--mls .title-mls { width: 724px; text-align: center; margin-bottom: 20px; } } @media screen and (max-width: 767px) { .p-team--mls .title-mls { font-size: 50px; line-height: 48px; width: 100%; text-align: center; margin-bottom: 20px; } } @media screen and (max-width: 500px) { .p-team--mls .title-mls { font-size: 3.4rem; line-height: 1.15; width: 100%; text-align: center; margin-bottom: 20px; } } .p-team--mls .mt-b-list { list-style-type: none; margin: 0; padding: 0; } .p-team--mls .mt-b-list__image { align-self: center; opacity: 0.8; } @media screen and (min-width: 1201px) { .p-team--mls .mt-b-list__image { max-width: 80%; } } @supports (--custom: variables) { .p-team--mls .mt-b-list__content { background-color: var(--list-bg-color, rgba(255, 255, 255, 0.1)); } .p-team--mls .mt-b-list__text { color: var(--list-text-color, #1e1e1e); } .p-team--mls .mt-b-list__image { align-self: center; opacity: 0.8; } } .p-team--mls .mt-b-list--grid { width: 530px; } @media screen and (max-width: 1200px) { .p-team--mls .mt-b-list--grid { width: 724px; } } @media screen and (max-width: 767px) { .p-team--mls .mt-b-list--grid { width: 100%; margin: 0 auto; } } .p-team--mls .mt-b-list--grid li { display: inline-block; margin-bottom: 18px; margin-right: 14px; width: 156px; } @media screen and (max-width: 1200px) { .p-team--mls .mt-b-list--grid li { margin-bottom: 21px; margin-right: 16px; width: 225px; height: 204px; } } .p-team--mls .mt-b-list--grid li:nth-child(3n) { margin-right: 0; } @media screen and (max-width: 767px) { .p-team--mls .mt-b-list--grid li { margin-bottom: 8px; margin-right: 8px; width: 31%; height: auto; } .p-team--mls .mt-b-list--grid li:nth-child(2n) { margin-right: 8px; } .p-team--mls .mt-b-list--grid li:nth-child(3n) { margin-right: 0; } } @media screen and (max-width: 500px) { .p-team--mls .mt-b-list--grid li { width: 47%; height: auto; } .p-team--mls .mt-b-list--grid li:nth-child(3n) { margin-right: 8px; } .p-team--mls .mt-b-list--grid li:nth-child(2n) { margin-right: 0; } } @media screen and (max-width: 380px) { .p-team--mls .mt-b-list--grid li { margin-bottom: 8px; margin-right: 8px; } .p-team--mls .mt-b-list--grid li:nth-child(3n) { margin-right: 8px; } .p-team--mls .mt-b-list--grid li:nth-child(2n) { margin-right: 0; } } .p-team--mls .mt-b-list--grid .mt-b-list__item { position: relative; } .p-team--mls .mt-b-list--grid .mt-b-list__item::before { display: block; content: ""; padding-top: 100%; position: relative; } .p-team--mls .mt-b-list--grid .mt-b-list__item > .mt-b-list__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .p-team--mls .mt-b-list--pellucid .mt-b-list__content { background: transparent; } .p-team--mls .mt-b-list__content { align-content: center; background-color: rgba(255, 255, 255, 0.09); box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: space-around; border-radius: 6px; padding: 12px 6px; } @media screen and (min-width: 900px) { .p-team--mls .mt-b-list__content { padding: 18px 12px; } } .p-team--mls .mt-b-banner .mls, .p-team--mls .mt-b-banner .mt-b-subtitle { font-family: 'HarmoniaSans W01 Light'; } .p-team--mls .mt-b-banner .mt-b-subtitle { font-family: 'HarmoniaSans W01 Light'; letter-spacing: .08em; line-height: 28px; max-width: 560px; margin: -10px auto 40px; } .p-team--mls .mt-b-banner .mt-b-banner__content a, .p-team--mls .mt-b-banner .mt-b-banner__content button { color: #fff; } .p-team--mls .mt-b-banner .mt-b-banner__content a:hover, .p-team--mls .mt-b-banner .mt-b-banner__content button:hover { text-decoration: none; } .p-team--mls .mt-b-banner .mt-b-banner__content a.browse-mls, .p-team--mls .mt-b-banner .mt-b-banner__content button.browse-mls { text-decoration: underline; } .p-team--mls .mt-b-banner h1 { font: 0/0 a; background-image: url("/s/images/team/banner/title.png"); background-size: 55%; height: 114px; margin: auto; background-repeat: no-repeat; background-position: center center; width: 100%; } @media screen and (min-width: 1600px) { .p-team--mls .mt-b-banner h1 { background-size: 41%; margin-bottom: 1rem; } } @media screen and (max-width: 1200px) { .p-team--mls .mt-b-banner h1 { background-size: 73%; height: 114px; } } @media screen and (max-width: 1024px) { .p-team--mls .mt-b-banner h1 { background-size: 77%; height: 114px; } } @media screen and (max-width: 767px) { .p-team--mls .mt-b-banner h1 { background-size: 96%; height: 114px; } } @media screen and (max-width: 500px) { .p-team--mls .mt-b-banner h1 { background-size: 96%; height: 92px; } } @media screen and (min-width: 768px) and (max-width: 850px) { .p-team--mls .mt-b-banner h1 { background-size: 98%; } } .p-team--mls .mt-b-banner--fullscreen { height: 73rem; position: relative; width: 100%; } @media screen and (max-width: 767px) { .p-team--mls .mt-b-banner--fullscreen { height: 62rem; } } @media screen and (max-width: 500px) { .p-team--mls .mt-b-banner--fullscreen { height: 50rem; } } .p-team--mls .mt-b-banner--MEL { background: #fff; background-image: url("/s/images/team/banner/backgroundman.jpeg"); background-position: top center; background-repeat: no-repeat; background-size: cover; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 0; text-align: center; overflow: hidden; } @media screen and (min-width: 2500px) { .p-team--mls .mt-b-banner--MEL { background-position: center center; } } @media screen and (max-width: 767px) { .p-team--mls .mt-b-banner--MEL { background-size: inherit; } } .p-team--mls .mt-b-banner--MEL:before { background: linear-gradient(160deg, rgba(204, 64, 127, 0.6), rgba(55, 139, 148, 0.2)); background-size: cover; content: ''; height: 73rem; position: absolute; top: 0; width: 100%; left: 0; } @media screen and (max-width: 767px) { .p-team--mls .mt-b-banner--MEL:before { height: 62rem; } } @media screen and (max-width: 500px) { .p-team--mls .mt-b-banner--MEL:before { height: 50rem; } } .p-team--mls .mt-b-banner--MEL .mt-b-banner__content .mls { color: #fff; font-size: 18px; position: relative; background-image: url("/s/images/team/banner/logo.png"); background-repeat: no-repeat; background-position: top center; padding-top: 80px; font-family: 'HarmoniaSans W01'; } .p-team--mls .mt-b-banner--MEL .mt-b-banner__content .mls .b-text { font-family: 'HarmoniaSans W01 Bold'; text-transform: uppercase; } .p-team--mls .mt-b-banner--MEL .mt-b-subtitle { color: #fff; font-size: 1.125em; } @media screen and (min-width: 768px) { .p-team--mls .mt-b-banner--MEL .mt-b-subtitle { max-width: 720px; margin: 0 auto 40px; font-size: 1.4em; line-height: 32px; } } @media screen and (max-width: 767px) { .p-team--mls .mt-b-banner--MEL .mt-b-subtitle { padding: 0 30px; font-size: 1.1rem; line-height: 26px; } } .p-team--mls .browse-mls { font-family: 'HarmoniaSans W01'; margin-top: 12px; text-decoration: underline; } .p-team--mls .mt-x-appscreen { bottom: -120px; position: absolute; } .p-team--mls #quotes-section { background-color: #f8f8f8; background-image: url("/s/images/team/quotes/quote.png"); background-repeat: no-repeat; background-position: center 60px; padding-top: 50px; width: 100%; } .p-team--mls .mt-b-quote__footer { align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .p-team--mls .mt-b-carousel .mt-b-carousel__item .mt-b-quote__logo { width: auto; } .p-team--mls .mt-b-quote__logo { margin-top: 12px; height: 36px; } .p-team--mls .mt-b-carousel { height: auto; margin: 0 auto; } .p-team--mls .mt-b-carousel-inner { position: relative; overflow: hidden; margin: 0 auto; text-align: center; width: 100%; } @media screen and (min-width: 2048px) { .p-team--mls .mt-b-carousel-inner { width: 36%; } } .p-team--mls .mt-b-quote__text { font-family: 'Between_2 W01 ExtraLight Italic'; color: #636363; font-size: 1.2rem; line-height: 1.5; text-align: center; max-width: 800px; margin: 0 auto; padding: 100px 0 20px; } @media screen and (max-width: 767px) { .p-team--mls .mt-b-quote__text { padding: 100px 30px 20px; } } @media screen and (max-width: 500px) { .p-team--mls .mt-b-quote__text { padding: 86px 30px 20px; } } .p-team--mls .mt-b-quote__credit { font-family: 'HarmoniaSans W01 Bold'; text-transform: uppercase; margin-top: 0.5rem; } .p-team--mls .mt-b-carousel .mt-b-carousel__nav { background: transparent; } .p-team--mls .mt-b-carousel .mt-b-carousel__nav:hover { background-color: #fb748b; } .p-team--mls .mt-b-carousel .mt-b-carousel__nav .mls-e-icon { fill: #1e1e1e; } .p-team--mls .content-mls { box-sizing: border-box; padding: 48px; width: 530px; } @media screen and (max-width: 1200px) { .p-team--mls .content-mls { width: 716px; } } @media screen and (max-width: 767px) { .p-team--mls .content-mls { width: 100%; } } .p-team--mls #library-section { background-color: #fff; overflow: hidden; } .p-team--mls #library-section svg { fill: red; } .p-team--mls #library-section p { color: #1e1e1e; } .p-team--mls #library-section .mt-b-btn { max-width: 182px; } @media screen and (max-width: 1200px) { .p-team--mls #library-section .mt-b-btn { margin: 16px auto 6px; } } .p-team--mls #library-section a:visited, .p-team--mls #library-section a:link { color: #fff; } .p-team--mls #library-section .mt-g-container { height: 100%; } .p-team--mls #library-section .left-at-large { width: 70vw; max-width: 100%; right: -20vw; position: absolute; bottom: 0; opacity: 1; } @media screen and (max-width: 1200px) { .p-team--mls #library-section .left-at-large { display: none; } } .p-team--mls #library-section .content-mls { padding: 244px 0 244px 3%; position: relative; } @media screen and (min-width: 1201px) { .p-team--mls #library-section .content-mls { width: 100%; } } @media screen and (min-width: 1600px) { .p-team--mls #library-section .content-mls { padding: 244px 0 244px 9%; } } @media screen and (min-width: 1850px) { .p-team--mls #library-section .content-mls { padding: 244px 0 244px 13%; } } @media screen and (min-width: 2048px) { .p-team--mls #library-section .content-mls { padding: 244px 0 244px 20%; width: 100%; } } @media screen and (min-width: 2560px) { .p-team--mls #library-section .content-mls { padding: 244px 0 244px 26%; width: 100%; } } @media screen and (max-width: 1200px) { .p-team--mls #library-section .content-mls { padding: 160px 0 135px 0; margin: 0 auto; display: block; } } @media screen and (max-width: 767px) { .p-team--mls #library-section .content-mls { padding: 160px 30px 135px; margin: auto; } } @media screen and (max-width: 500px) { .p-team--mls #library-section .content-mls { padding: 112px 30px 135px; } } .p-team--mls #library-section .content-mls .title-mls { color: #000; } .p-team--mls #library-section .mt-b-list__content { background-color: rgba(0, 0, 0, 0.05); } @media screen and (min-width: 1850px) { .p-team--mls #desktop-section { padding: 4% 0 0; } } .p-team--mls #desktop-section .mt-b-btn { background-color: #fff; color: #fb748b; max-width: 182px; } @media screen and (max-width: 1200px) { .p-team--mls #desktop-section .mt-b-btn { margin: 16px auto 6px; } } .p-team--mls #desktop-section .content-mls { position: absolute; right: 10%; top: 288px; } @media screen and (min-width: 1600px) { .p-team--mls #desktop-section .content-mls { right: 20%; } } @media screen and (min-width: 1850px) { .p-team--mls #desktop-section .content-mls { right: 26%; } } @media screen and (min-width: 2048px) { .p-team--mls #desktop-section .content-mls { right: 30%; } } @media screen and (min-width: 2560px) { .p-team--mls #desktop-section .content-mls { right: 38%; } } @media screen and (max-width: 1200px) { .p-team--mls #desktop-section .content-mls { padding: 200px 0 66px; display: block; margin: 0 auto; position: static; } } @media screen and (max-width: 767px) { .p-team--mls #desktop-section .content-mls { padding: 200px 30px 66px; display: block; margin: 0 auto; position: static; } } @media screen and (max-width: 500px) { .p-team--mls #desktop-section .content-mls { padding: 134px 30px 66px; } } .p-team--mls #desktop-section .content-mls p { color: #fff; } .p-team--mls #desktop-section .content-mls .title-mls { width: 434px; } @media screen and (max-width: 1200px) { .p-team--mls #desktop-section .content-mls .title-mls { width: 724px; } } @media screen and (max-width: 767px) { .p-team--mls #desktop-section .content-mls .title-mls { width: 100%; } } .p-team--mls #desktop-section .right-at-large { height: 660px; padding: 250px 0; } @media screen and (min-width: 1850px) { .p-team--mls #desktop-section .right-at-large { height: 724px; margin-top: -25px; } } @media screen and (min-width: 2048px) { .p-team--mls #desktop-section .right-at-large { height: 814px; margin-top: -80px; } } @media screen and (max-width: 1400px) { .p-team--mls #desktop-section .right-at-large { margin-left: -16%; } } @media screen and (max-width: 1200px) { .p-team--mls #desktop-section .right-at-large { padding: 0 0 250px 0; margin-left: 0; } } @media screen and (max-width: 767px) { .p-team--mls #desktop-section .right-at-large { height: auto; } } @media screen and (max-width: 500px) { .p-team--mls #desktop-section .right-at-large { display: none; } } @media screen and (min-width: 1850px) { .p-team--mls #webfonts-section { padding: 4% 0 0; } } .p-team--mls #webfonts-section .content-mls { padding: 0 0 0 3%; display: inline-block; } @media screen and (min-width: 1600px) { .p-team--mls #webfonts-section .content-mls { padding: 0 0 0 9%; } } @media screen and (min-width: 1850px) { .p-team--mls #webfonts-section .content-mls { padding: 0 0 0 13%; } } @media screen and (min-width: 2048px) { .p-team--mls #webfonts-section .content-mls { padding: 0 0 0 20%; width: 100%; } } @media screen and (min-width: 2560px) { .p-team--mls #webfonts-section .content-mls { padding: 0 0 0 26%; width: 100%; } } @media screen and (max-width: 1200px) { .p-team--mls #webfonts-section .content-mls { padding: 0; margin: 0 auto; display: block; } } @media screen and (max-width: 767px) { .p-team--mls #webfonts-section .content-mls { padding: 0 30px; margin: 0 auto; display: block; } } @media screen and (max-width: 500px) { .p-team--mls #webfonts-section .content-mls { padding: 134px 30px 66px; } } .p-team--mls #webfonts-section .content-mls p { color: #fff; } @media screen and (max-width: 1200px) { .p-team--mls #webfonts-section .content-mls .title-mls { font-size: 52px; line-height: 52px; } } @media screen and (max-width: 500px) { .p-team--mls #webfonts-section .content-mls .title-mls { font-size: 40px; line-height: 48px; } } .p-team--mls #webfonts-section .mt-b-list__content { background-color: rgba(255, 255, 255, 0.09); } .p-team--mls #webfonts-section .mt-b-btn { background-color: #fff; color: #fb748b; max-width: 182px; } @media screen and (max-width: 1200px) { .p-team--mls #webfonts-section .mt-b-btn { margin: 16px auto 6px; } } .p-team--mls #webfonts-section .right-at-large { display: inline-block; height: 796px; overflow: hidden; position: absolute; right: -248px; top: -24px; } @media screen and (min-width: 1850px) { .p-team--mls #webfonts-section .right-at-large { height: 120%; top: -114px; right: -288px; } } @media screen and (max-width: 1480px) { .p-team--mls #webfonts-section .right-at-large { right: -28%; } } @media screen and (max-width: 1330px) { .p-team--mls #webfonts-section .right-at-large { right: -32%; } } @media screen and (max-width: 1300px) { .p-team--mls #webfonts-section .right-at-large { right: -36%; } } @media screen and (max-width: 1260px) { .p-team--mls #webfonts-section .right-at-large { right: -41%; } } @media screen and (max-width: 1200px) { .p-team--mls #webfonts-section .right-at-large { position: relative; left: 0; right: 0; max-width: 100%; top: 0; bottom: 0; height: auto; margin-top: 70px; } } @media screen and (max-width: 500px) { .p-team--mls #webfonts-section .right-at-large { display: none; } } .p-team--mls #pricing-container { --list-bg-color: orange; --list-text-color: $mt-color__white; --list-image-color: $mt-color__white; justify-content: center; } .p-team--mls #pricing-container .mt-g-container { position: relative; justify-content: center; } .p-team--mls #pricing-container .mt-b-pricing-card { justify-content: center; } .p-team--mls #pricing-container .mt-b-pricing-card .mt-b-btn { margin: 18px 0 0; } @media screen and (min-width: 1024px) { .p-team--mls #pricing-container .mt-b-pricing-card { height: 100vh; } } .p-team--mls #pricing-container .mt-b-smalltext { color: #b7b7b7; margin: 0; } .p-team--mls #pricing-container .content-mls > p { font-family: 'HarmoniaSans W01'; margin-bottom: 24px; } .p-team--mls #monthly-plans-box .plan-selector-yearly { display: none; } .p-team--mls #annual-plans-box .plan-selector-monthly { display: none; } .p-team--mls .mt-b-pricing-card__price { font-family: 'HarmoniaSans W01'; line-height: 1; margin: 0 0 24px 0; position: relative; } .p-team--mls .mt-b-pricing-card__price #price { color: #1e1e1e; font-size: 96px; font-family: 'HarmoniaSans W01 Bold'; } .p-team--mls .mt-b-pricing-card__price span { color: grey; font-size: 18px; } .p-team--mls .mt-b-pricing-card__price .billed-details { display: block; text-align: center; color: #1e1e1e; font-size: 0.9rem; } .p-team--mls .plans-details .mt-b-pricing-card__price #price { color: grey; font-size: 18px; } .p-team--mls #pricing-container .plans .plans-details .custom-select .dropdown { top: 52px; left: -90px; border: 1px solid #1e1e1e; } .p-team--mls .plan-selector-monthly.open, .p-team--mls .plan-selector-yearly.open { height: auto; background: none; } .p-team--mls .plan-selector-monthly.open ul li, .p-team--mls .plan-selector-yearly.open ul li { cursor: pointer; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; border-left: 3px solid transparent; margin: 0; } .p-team--mls .plan-selector-monthly.open ul li:hover, .p-team--mls .plan-selector-yearly.open ul li:hover { border-color: #fb748b; background-color: rgba(208, 208, 206, 0.2); } .p-team--mls .plan-selector-monthly.open li.selected, .p-team--mls .plan-selector-yearly.open li.selected { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; background-color: rgba(208, 208, 206, 0.2); border-color: #fb748b; color: #fb748b; } .p-team--mls #pricing-container .mt-b-pricing-card__info a.js-add-to-cart { margin: 18px 0 6px; font-size: 14px; letter-spacing: .25em; background-color: #fb748b; border: 0; border-radius: 3px; box-sizing: border-box; color: #fff; padding: 18px 48px; cursor: pointer; text-decoration: none; text-transform: uppercase; text-align: center; font-family: HarmoniaSans W01; } .p-team--mls #pricing-container .mt-b-pricing-card__info a.js-add-to-cart.added-cart { background: #02cebf; } .p-team--mls .mt-b-pricing-card__currency { left: -12px; position: absolute; top: 12px; } .p-team--mls .mt-b-pricing-card__frequency { right: -24px; position: absolute; bottom: 12px; } .p-team--mls .mt-b-pricing-card { color: grey; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; max-width: 420px; } @media screen and (min-width: 768px) { .p-team--mls .mt-b-pricing-card { width: 100%; } } .p-team--mls .mt-b-pricing__info { margin-bottom: 3px; text-align: center; } .p-team--mls .mt-b-pricing__link { color: var(--pricing-link-color, #1e1e1e); font-family: 'HarmoniaSans W01'; text-align: center; text-decoration: underline; } .p-team--mls .mt-b-pricing__info { font-family: 'HarmoniaSans W01'; } .p-team--mls .mt-b-btn { font-family: 'HarmoniaSans W01'; } .p-team--mls .mt-b-smalltext { color: inherit; font-size: 14px; margin: 12px 0 0; } .p-team--mls .mt-b-pricing-card__info { align-items: center; box-shadow: 0 0 18px 3px rgba(30, 30, 30, 0.3); display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: center; margin-bottom: 24px; padding: 48px 0; position: relative; height: 400px; } .p-team--mls .mt-b-pricing-card__info span.price-head { color: #1e1e1e; font-size: 96px; font-family: 'HarmoniaSans W01 Bold'; font-weight: normal; } .p-team--mls .mt-b-pricing-card__info span.price-head span { left: -12px; position: absolute; top: 12px; } .p-team--mls .plan-selector-monthly, .p-team--mls .plan-selector-yearly { background-color: transparent; fill: inherit; height: 44px; border: 1px solid grey; border-radius: 3px; box-sizing: border-box; color: #1e1e1e; font-size: 16px; margin-bottom: 24px; padding: 0; width: 84%; text-align: left; cursor: pointer; position: relative; background-position: calc(100% - 12px) 50%; background-repeat: no-repeat; background-size: 12px 12px; overflow-y: hidden; background-image: url("/s/w/sub_info/dropdown-arrow.svg"); } .p-team--mls .plan-selector-monthly ul li, .p-team--mls .plan-selector-yearly ul li { font-family: HarmoniaSans W01; padding: 12px 0 12px 12px; display: none; } .p-team--mls .plan-selector-monthly ul li.selected, .p-team--mls .plan-selector-yearly ul li.selected { display: block; color: #1e1e1e; } .p-team--mls .pageviews-dropdown .license-quantity-placeholder .custom-select { background: none; border: none; padding-left: 0; padding-right: 0; } .p-team--mls #mySelect { display: none; } .p-team--mls .selectr-label { display: block; font-family: 'HarmoniaSans W01'; padding: 12px 0 12px 12px; } .p-team--mls .selectr-label p { margin: 0 !important; } .p-team--mls .mt-b-pricing__option { background-color: transparent; fill: inherit; height: 44px; border: 1px solid grey; border-radius: 3px; box-sizing: border-box; color: #1e1e1e; font-size: 16px; margin-bottom: 24px; padding: 0; width: 84%; text-align: left; cursor: pointer; position: relative; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.89 15.45' id='sort' width='100%25' height='100%25'%3E%3Ctitle%3Esort%3C/title%3E%3Cpath fill-rule='evenodd' d='M1.154 5.716l3.793-3.514L8.74 5.755l1.154-1.12L4.947 0 0 4.635l1.154 1.08zm0 4.017l3.793 3.554L8.74 9.733l1.154 1.082-4.947 4.635L0 10.815l1.154-1.082z'%3E%3C/path%3E%3C/svg%3E"); background-position: calc(100% - 12px) center; background-repeat: no-repeat; background-size: 12px 12px; } .p-team--mls .mt-b-pricing__option > span { color: grey; } .p-team--mls .mt-b-pricing__option svg { height: 12px; width: 12px; position: absolute; right: 9px; top: 14px; } .p-team--mls [aria-expanded="true"] { box-shadow: 0 0 9px 0 rgba(30, 30, 30, 0.3); border: 1px solid grey; } .p-team--mls .selectr-options { box-sizing: border-box; border-radius: 3px; background-color: #fff; font-family: 'HarmoniaSans W01'; list-style-type: none; margin: 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: absolute; width: 100%; left: 0; top: -2px; } .p-team--mls .selectr-options .selected { order: -1; background-color: rgba(208, 208, 206, 0.2); border-color: #fb748b; color: #fb748b; } .p-team--mls .selectr-options li { cursor: pointer; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; border-left: 3px solid transparent; margin: 0; padding: 0px 8px; } .p-team--mls .selectr-options li:hover { border-color: #fb748b; background-color: rgba(208, 208, 206, 0.2); } .p-team--mls .selectr-options li p { display: block; line-height: 1; vertical-align: middle; position: relative; } .p-team--mls .selectr-options li p > span:not(.commitment) { font-size: 14px; } .p-team--mls .selectr-options li .price { font-size: 14px; position: relative; top: 3px; } .p-team--mls .hide { opacity: 0; } .p-team--mls img { max-width: 100%; } .p-team--mls .mt-b-smalltext { color: #fff; font-family: 'HarmoniaSans W01 Italic'; font-size: 12px; letter-spacing: 0.03em; text-align: left; } .p-team--mls .is-hidden { display: none; } .p-team--mls .subscribed { text-align: center; width: 80%; color: #333333; font-family: 'HarmoniaSans W01'; font-size: 1.4rem; } .p-team--mls .subscribed .subs-img { align-self: center; max-width: 100%; width: 34%; } .p-team--mls .subscribed span { display: block; } .p-team--mls .subscribed .mt-b-btn { color: #fff; font-size: 16px; } .p-team--mls .subscribed .get-desktop-app { color: var(--pricing-link-color, #1e1e1e); font-family: 'HarmoniaSans W01'; text-align: center; text-decoration: underline; font-size: 1.1rem; margin-top: 1rem; display: block; } .p-team--mls .img-banner-btm { position: absolute; bottom: -8rem; width: 45%; left: 0; right: 0; margin: 0 auto; } @media screen and (min-width: 2049px) { .p-team--mls .img-banner-btm { width: 34%; bottom: -7rem; } } @media screen and (min-width: 2560px) { .p-team--mls .img-banner-btm { width: 37%; bottom: -7rem; } } @media screen and (min-width: 2880px) { .p-team--mls .img-banner-btm { width: 37%; bottom: -17rem; } } @media screen and (max-width: 2048px) { .p-team--mls .img-banner-btm { width: 43%; bottom: -8rem; } } @media screen and (max-width: 1920px) { .p-team--mls .img-banner-btm { width: 45%; bottom: -9rem; } } @media screen and (max-width: 1815px) { .p-team--mls .img-banner-btm { width: 51%; bottom: -9rem; } } @media screen and (max-width: 1750px) { .p-team--mls .img-banner-btm { width: 56%; bottom: -10rem; } } @media screen and (max-width: 1600px) { .p-team--mls .img-banner-btm { width: 59%; bottom: -9rem; } } @media screen and (max-width: 1440px) { .p-team--mls .img-banner-btm { width: 70%; bottom: -10rem; } } @media screen and (max-width: 1280px) { .p-team--mls .img-banner-btm { width: 78%; bottom: -8rem; } } @media screen and (max-width: 1024px) { .p-team--mls .img-banner-btm { bottom: -5rem; width: 84%; } } @media screen and (max-width: 768px) { .p-team--mls .img-banner-btm { bottom: 0; width: 84%; } } .p-team--mls h3 { color: #fff; font-size: 36px; font-family: 'HarmoniaSans W01 Light'; line-height: 1.15; margin-bottom: 9px; } .p-team--mls .mt-g-fullwidth { position: relative; overflow: hidden; } .p-team--mls .mt-e-paragraph { font-family: 'HarmoniaSans W01 Light'; margin: 0 0 36px 0; font-size: 1rem; letter-spacing: .06em; line-height: 30px; width: 530px; } @media screen and (max-width: 1200px) { .p-team--mls .mt-e-paragraph { width: 724px; text-align: center; } } @media screen and (max-width: 767px) { .p-team--mls .mt-e-paragraph { width: 100%; text-align: center; } } .p-team--mls .mt-e-paragraph strong { font-family: 'HarmoniaSans W01'; } .p-team--mls .features-block { background: #89a4c8; background: linear-gradient(345deg, #BF89C8 5%, #2e9ead 35%, #50ada2 70%, #89a4c8 100%); } .p-team--mls .features-block .our-library .mt-b-btn { max-width: 182px; } @media screen and (max-width: 1200px) { .p-team--mls .features-block .our-library .mt-b-btn { margin: 16px auto 6px; } } .p-team--mls .features-mls { position: relative; } @media screen and (max-width: 700px) { .p-team--mls .features-mls { transform: unset; top: 0; } } .p-team--mls .features-mls .content-mls { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; justify-content: center; } .p-team--mls .features-mls img { align-self: center; } .p-team--mls .features-block { background: linear-gradient(345deg, #f46792 5%, #f25d99 35%, #fc9f65 65%); } .p-team--mls .section-title { font-size: 18px; margin-left: -120px; margin-bottom: 18px; position: relative; text-transform: uppercase; } .p-team--mls .mt-b-btn { background-color: #fb748b; border: 0; border-radius: 3px; box-sizing: border-box; color: #fff; display: block; font-size: 17px; padding: 16px 32px; margin: 16px 0 6px; cursor: pointer; text-decoration: none; letter-spacing: 0.08em; text-align: center; line-height: 1; } .p-team--mls .mt-b-btn:hover { box-shadow: 0 0 6px 0 rgba(30, 30, 30, 0.3); text-decoration: none; } .p-team--mls .mt-b-list__content { padding: 25px 12px 12px; } .p-team--mls .mt-b-list__text { font-family: 'HarmoniaSans W01 Light'; font-size: 13px; letter-spacing: .07em; line-height: 20px; text-align: center; } .p-team--mls .mt-b-list__content { padding: 25px 20px 12px; } .p-team--mls .mt-b-subtitle { font-family: 'HarmoniaSans W01 Light'; letter-spacing: .08em; } .p-team--mls .button-mls { font-family: 'HarmoniaSans W01 Light'; letter-spacing: .08em; } .p-team--mls #pricing-container .content-mls > p { font-family: 'HarmoniaSans W01 Light'; letter-spacing: .08em; } .p-team--mls .help a, .p-team--mls .help p { font-family: 'HarmoniaSans W01 Light'; letter-spacing: .08em; } .p-team--mls .mt-b-list--icons .mt-b-list__item p { font-family: 'HarmoniaSans W01 Light'; letter-spacing: .08em; padding: 0 0 0 35px; margin: 10px 0px; } .p-team--mls .browse-mls { font-family: 'HarmoniaSans W01 Light'; letter-spacing: .08em; } .p-team--mls .mt-b-list__content { padding: 25px 15px 12px; } @media screen and (min-width: 1024px) { .p-team--mls .mt-b-carousel__item blockquote { margin-left: unset; } } .p-team--mls #quotes-section { padding-top: 60px; padding-bottom: 64px; } @media screen and (min-width: 1024px) { .p-team--mls .mt-b-carousel__item blockquote { margin-left: unset; } } .p-team--mls .mt-b-list__text { font-size: 13px; } @media screen and (max-width: 1200px) { .p-team--mls .mt-b-list__text { font-size: 16px; line-height: 1.5; width: 71%; margin: 0 auto; } } @media screen and (max-width: 767px) { .p-team--mls .mt-b-list__text { font-size: 14px; line-height: 1.5; width: 100%; margin: 0 auto; } } @media screen and (max-width: 500px) { .p-team--mls .mt-b-list__text { font-size: 12px; width: 82%; } } @media screen and (max-width: 380px) { .p-team--mls .mt-b-list__text { width: 100%; } } .p-team--mls .mt-b-list__content { padding: 25px 12px 12px; } .p-team--mls .mt-b-carousel__item { margin-left: 0; } @media (min-width: 768px) { .p-team--mls .mt-g-container { padding: 0; } .p-team--mls .mt-g-container .content { max-width: 100%; padding: 0; } } @media screen and (max-width: 768px) { .p-team--mls .mt-b-spread--centered .mt-b-typer { font-size: 54px; } } .p-team--mls .mt-b-spread--centered { position: relative; } .p-team--mls .testers { text-align: center; } .p-team--mls .testers .mt-b-spread__text { font-size: 1rem; padding: 30px 0 10px; max-width: 700px; margin: 0 auto; } @media screen and (max-width: 1200px) { .p-team--mls .testers .mt-b-spread__text { padding: 0 0 10px; } } @media (min-width: 1200px) { .p-team--mls .mt-b-spread .content { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .p-team--mls .features-block .mt-b-spread__subtitle { font-family: 'HarmoniaSans W01'; margin-bottom: 40px; letter-spacing: 4px; font-size: .8em; padding: 0; text-transform: uppercase; } .p-team--mls .mt-b-typer { color: #1e1e1e; font-family: 'HarmoniaSans W01'; font-size: 60px; line-height: 1.4; overflow: hidden; position: relative; word-wrap: break-word; padding-right: 0.1em; } .p-team--mls .mt-b-typer__clone { pointer-events: none; position: absolute; visibility: hidden; width: 100%; width: calc(100% - 0.1em); } @-webkit-keyframes mt-b-typer__caret { 50% { opacity: 0; } } @keyframes mt-b-typer__caret { 50% { opacity: 0; } } .p-team--mls .mt-b-typer__caret { -webkit-animation: mt-b-typer__caret 1.25s step-start 0s infinite; animation: mt-b-typer__caret 1.25s step-start 0s infinite; display: inline-block; height: 0; position: relative; vertical-align: top; visibility: visible; width: 0; } .p-team--mls .mt-b-typer__caret::after { background-color: #fff; content: ""; display: block; height: 1.4em; left: 0.33em; min-width: 2px; max-width: 8px; position: absolute; top: 50%; width: 0.07em; } @supports (--css: variables) { .p-team--mls .mt-b-typer__caret::after { background-color: var(--typer-caret-color, #fff); } } .p-team--mls .mt-b-typer__editable { cursor: text; display: block; max-width: 100%; } .p-team--mls .mt-b-typer .mt-b-typer__editable { color: #fff; } .p-team--mls .mt-b-typer__family { margin-bottom: 18px; text-align: center; text-transform: uppercase; margin-top: 0.5em; color: rgba(255, 255, 255, 0.5) !important; font-size: 0.2em; letter-spacing: 0.25em; } .p-team--mls .testers { padding: 300px 20px 230px; } @media screen and (max-width: 1200px) { .p-team--mls .testers { padding: 18rem 0 12rem 0; } } @media screen and (max-width: 767px) { .p-team--mls .testers { padding: 16rem 30px 6rem; } } @media screen and (max-width: 500px) { .p-team--mls .testers { padding: 12rem 30px 7rem; } } .p-team--mls .testers .mt-b-btn { background-color: #fff; color: #fb748b; max-width: 182px; margin: 2rem auto 0; } .p-team--mls .mt-b-typer:last-of-type { margin-bottom: 48px; } .p-team--mls .mt-b-spread__text { color: #fff; font-family: 'HarmoniaSans W01 Light'; font-size: 1rem; line-height: 30px; letter-spacing: .08em; margin: 30px 0 50px; } .p-team--mls #team-form { background: #9c3161; background: -moz-linear-gradient(-45deg, #9c3161 0%, #973260 3%, #93325f 5%, #82335a 10%, #6f3354 19%, #633350 44%, #413042 68%, #20272f 99%, #9c3161 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, #9c3161), color-stop(3%, #973260), color-stop(5%, #93325f), color-stop(10%, #82335a), color-stop(19%, #6f3354), color-stop(44%, #633350), color-stop(68%, #413042), color-stop(99%, #20272f), color-stop(100%, #9c3161)); background: -webkit-linear-gradient(-45deg, #9c3161 0%, #973260 3%, #93325f 5%, #82335a 10%, #6f3354 19%, #633350 44%, #413042 68%, #20272f 99%, #9c3161 100%); background: -o-linear-gradient(-45deg, #9c3161 0%, #973260 3%, #93325f 5%, #82335a 10%, #6f3354 19%, #633350 44%, #413042 68%, #20272f 99%, #9c3161 100%); background: -ms-linear-gradient(-45deg, #9c3161 0%, #973260 3%, #93325f 5%, #82335a 10%, #6f3354 19%, #633350 44%, #413042 68%, #20272f 99%, #9c3161 100%); background: linear-gradient(135deg, #9c3161 0%, #973260 3%, #93325f 5%, #82335a 10%, #6f3354 19%, #633350 44%, #413042 68%, #20272f 99%, #9c3161 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c3161', endColorstr='#9c3161', GradientType=1 ); padding: 10rem 0; margin: unset; max-width: none; text-align: center; } @media screen and (max-width: 1200px) { .p-team--mls #team-form { padding: 7rem 10px; } } @media screen and (max-width: 767px) { .p-team--mls #team-form { padding: 7rem 30px; } } .p-team--mls #team-form .mt-b-spread__title { font-weight: normal; font-size: 3.4rem; color: #fff; max-width: 460px; margin: 0 auto; font-family: 'HarmoniaSans W01 Light'; } .p-team--mls #team-form .mt-b-spread__text { font-size: 1rem; line-height: 30px; letter-spacing: .06em; margin: 30px 0 10px; } .p-team--mls #team-form .team-form-inner { background: rgba(255, 255, 255, 0.05); padding: 45px 75px 25px; border-radius: 6px; margin: 5rem 0 1rem; } @media screen and (max-width: 500px) { .p-team--mls #team-form .team-form-inner { padding: 17px 20px 4px; } } .p-team--mls #team-form .inner-t--f { position: relative; overflow: hidden; max-width: 600px; margin: 0 auto 6rem; padding: 0; } .p-team--mls #team-form .inner-t--f a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; } .p-team--mls #team-form .inner-t--f .mt-b-btn { background-color: #fb748b !important; color: #fff !important; width: max-content; margin: 0 auto 3rem; width: 100%; padding: 1rem; border: 0 none; } .p-team--mls #team-form .inner-t--f .mt-b-btn:focus { background-color: #fb748b !important; color: #fff !important; width: max-content; margin: 0 auto 3rem; width: 100%; padding: 1rem; border: 0 none; outline: none; } .p-team--mls #team-form .inner-t--f .mt-b-btn:disabled { opacity: .6; } .p-team--mls #team-form .open { padding-top: 11px !important; } .p-team--mls #team-form .open .mt-e-label { position: relative; font-size: 14px; -webkit-transform: unset; transform: unset; -webkit-transition: -webkit-transform 150ms ease-in; transition: -webkit-transform 150ms ease-in; transition: transform 150ms ease-in; transition: transform 150ms ease-in, -webkit-transform 150ms ease-in; left: -1px; } .p-team--mls #team-form .open label { color: white; border-color: white; } .p-team--mls #team-form .country_select, .p-team--mls #team-form .mt-b-imput__select { float: none; border-radius: 3px; margin-left: 0; background-position: 98%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 16px; background: transparent url("/s/images/team/dd-arrow.png"); background-repeat: no-repeat; background-position: center left 95%; width: 100%; color: #fff; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; border: 1px solid #a28e9c; } .p-team--mls #team-form .country_select::-ms-expand, .p-team--mls #team-form .mt-b-imput__select::-ms-expand { display: none; } .p-team--mls #team-form .country_select option, .p-team--mls #team-form .mt-b-imput__select option { background: #653351; } .p-team--mls #team-form #country_select_error { position: absolute; right: 0; bottom: -24px; color: rgba(255, 255, 255, 0.6); font-family: "HarmoniaSans W01 Light", Arial, "Helvetica Neue", Helvetica, sans-serif; letter-spacing: 1px; font-size: 13px; opacity: 0.6; font-weight: normal; margin: 0; display: none; } .p-team--mls #team-form .mt-e-label, .p-team--mls #team-form .country_select, .p-team--mls #team-form .mt-b-imput__select { font-family: "HarmoniaSans W01 Light", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; letter-spacing: 1px; } @media screen and (max-width: 500px) { .p-team--mls #team-form .mt-e-label, .p-team--mls #team-form .country_select, .p-team--mls #team-form .mt-b-imput__select { font-size: 14px; } } .p-team--mls #team-form .mt-e-input__text { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; padding: 3px 60px 3px 0; border: 0; border-bottom: 1px solid #1e1e1e; width: 100%; font-family: "HarmoniaSans W01 Light"; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 500px) { .p-team--mls #team-form .mt-e-input__text { padding: 3px 10px 3px 0; } } .p-team--mls #team-form input { color: white; border-color: white; border-color: rgba(255, 255, 255, 0.2); padding-bottom: 0.8em; } .p-team--mls #team-form label { color: white; border-color: white; text-align: left; cursor: pointer; } .p-team--mls #team-form .mt-e-label { margin-bottom: unset; position: absolute; -webkit-transform: translateY(3px); transform: translateY(3px); -webkit-transition: -webkit-transform 150ms ease-in; transition: -webkit-transform 150ms ease-in; transition: transform 150ms ease-in; transition: transform 150ms ease-in, -webkit-transform 150ms ease-in; } .p-team--mls #team-form .mt-b-form__field { padding-top: 27px; position: relative; margin-bottom: 12px; } .p-team--mls #team-form .error-message { position: absolute; right: 0; bottom: -24px; color: #fb748b; font-family: "HarmoniaSans W01", "Kootenay Pro1277143", Arial, "Helvetica Neue", Helvetica, sans-serif; letter-spacing: 1px; font-size: 13px; } @media screen and (max-width: 500px) { .p-team--mls #team-form .error-message { bottom: -20px; font-size: 12px; } } .p-team--mls .contact-team-designer { width: 100%; margin: 0 auto; } @media screen and (min-width: 1360px) { .p-team--mls .contact-team-designer { width: 1300px; } } @media screen and (max-width: 1200px) { .p-team--mls .contact-team-designer { width: 92%; } } @media screen and (max-width: 767px) { .p-team--mls .contact-team-designer { width: 100%; } } .p-team--mls .contact-team-designer.mt-b-list--grid { display: block; } @media screen and (min-width: 961px) { .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item { margin-bottom: 18px; margin-right: 14px; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(3n) { margin-right: 14px; } } @media screen and (max-width: 1200px) { .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item { margin-bottom: 18px; margin-right: 14px; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(3n) { margin-right: 14px; } } @media screen and (max-width: 767px) { .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item { margin-bottom: 8px; margin-right: 8px; width: 31%; height: auto; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(2n) { margin-right: 8px; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(3n) { margin-right: 0; } } @media screen and (max-width: 500px) { .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item { width: 47%; height: auto; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(3n) { margin-right: 8px; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(2n) { margin-right: 0; } } @media screen and (max-width: 380px) { .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item { margin-bottom: 8px; margin-right: 8px; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(3n) { margin-right: 8px; } .p-team--mls .contact-team-designer.mt-b-list--grid li.mt-b-list__item:nth-child(2n) { margin-right: 0; } } .p-team--mls .contact-team-designer.mt-b-list--grid .mt-b-list__text { color: #fff; } @media screen and (max-width: 1200px) { .p-team--mls .contact-team-designer.mt-b-list--grid .mt-b-list__text { color: #fff; font-size: 16px; line-height: 1.5; width: 71%; margin: 0 auto; } } @media screen and (max-width: 767px) { .p-team--mls .contact-team-designer.mt-b-list--grid .mt-b-list__text { color: #fff; font-size: 14px; line-height: 1.5; width: 100%; margin: 0 auto; } } @media screen and (max-width: 380px) { .p-team--mls .contact-team-designer.mt-b-list--grid .mt-b-list__text { color: #fff; font-size: 12px; width: 100%; } } .p-team--mls .ind-subs { background: #fb936e; padding-top: 50px; width: 100%; margin: unset; max-width: none; text-align: center; } .p-team--mls .ind-subs .ind-subs--inner { position: relative; overflow: hidden; width: 90%; margin: 0 auto; font-family: 'HarmoniaSans W01 Light'; } .p-team--mls .ind-subs .ind-subs--inner .mt-b-btn { background-color: #fff; color: #fb748b; max-width: 182px; margin: 2rem auto 3rem; } .p-team--mls .ind-subs .ind-subs--inner h3 { margin: 0; font-family: 'HarmoniaSans W01 Light'; } .p-team--mls .ind-subs .ind-subs--inner p { color: #fff; letter-spacing: .06em; } .p-team--mls #teampage_form .teampage_form_element label { display: block; } .p-team--mls #teampage_form .teampage_form_element input, .p-team--mls #teampage_form .teampage_form_element input:focus { border: none; border-bottom: 1px solid #a28e9c; padding-bottom: 0.8em; box-shadow: none; background: transparent; color: #fff; } .p-team--mls input[type="submit"]:hover:disabled { cursor: no-drop; } 

#terms { box-sizing: border-box; color: #333; font-family: 'St-Marie-Pro-Regular', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 18px; } #terms p { font-size: 18px; word-spacing: 0.07em; } #terms h1 { color: #333; font-family: 'St-Marie-Pro-Black', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 54px; } #terms h2 { color: #333; font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 34px; font-weight: normal; margin: 0.8em 0 0.5em; padding-right: 35px; } #terms h3 { color: #000; font-family: 'St-Marie-Pro-Thin', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 34px; font-weight: normal; margin: 0.8em 0 0.5em; } #terms h4 { font-family: 'St-Marie-Pro-Extra-Bold', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 19px; font-weight: normal; margin: 1em 0 0.6em; } #terms h5 { font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; font-size: 19px; margin: 1em 0 0.6em; } #terms em { font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-style: normal; font-size: 19px; } #terms .light { color: #000; font-family: 'St-Marie-Pro-Light', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #terms .right { text-align: right; } #terms .ryde { font-family: 'St-Ryde-Medium-Italic', "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-weight: normal; } #terms .smallcaps { font-variant: small-caps; text-transform: lowercase; } #terms .smallcaps span.shrink { font-size: 0.75em; } #terms #colophon { border-top: 1px solid #ccc; margin: 60px 0 0; padding: 30px 0 0; } #terms header { margin-top: 20px; } #terms .sidebar { float: left; padding: 0 15px; margin-top: 10px; width: 200px; } #terms .sidebar a { display: block; margin: 1em 25px 1em 0; } #terms .sidebar a.selected { color: #000; } #terms .content { float: right; padding: 0 15px; width: 640px; } #terms .content ul { list-style-type: disc; } #terms .content li { line-height: 1.4em; margin: 0.8em 0 0.8em 30px; } #terms .content li h3 { line-height: initial; } #terms .content li ul.address { margin-top: 0.8em; } #terms .content li ul.address li { margin-top: 0; margin-bottom: 0; } #terms .content #what-myfonts-is { margin-top: 30px; } 

 #testdrive_controls { position: relative; background-color: #F5F5F5; border-style: solid; border-width: 1px 0px; border-color: #CCCCCC; padding: 0px; width: 720px; height: 35px; margin: 0px auto; top: 1px; z-index: 1; clear: both; } #testdrive_controls_loading { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; opacity: 0.80; } #testdrive_controls_loading div { opacity: 1.0; color: #333; text-align: center; padding-top: 11px; } /* #testdrive_switch { position: absolute; top: -1px; right: 720px; cursor: default; margin: 0px; padding: 0px 6px; width: 22px; height: 35px; font-family: Verdana, sans-serif; font-weight: normal; font-size: 9px; background-color: #F5F5F5; border-width: 1px 0px 1px 1px; border-color: #CCCCCC; border-style: solid; } #testdrive_switch #testdrive_switch_bg { position: absolute; right: 4px; top: 6px; height: 23px; width: 10px; border: 1px solid #666666; background-color: #999999; } #testdrive_switch #testdrive_switch_fg { position: absolute; left: 0px; width: 8px; height: 8px; border: 1px solid #666; background-color: #FFFFFF; } #testdrive_switch #testdrive_switch_fg.w { top: 0px; bottom: auto; } #testdrive_switch #testdrive_switch_fg.d { top: auto; bottom: 0px; } #testdrive_switch #testdrive_switch_label_w { position: absolute; text-align: right; right: 13px; top: -2px; background-color: #09F; color: white; padding: 1px; } #testdrive_switch #testdrive_switch_label_d { position: absolute; text-align: right; right: 14px; padding: 1px; bottom: -2px; } */ ul#testdrive_switch li { font-family: Verdana; font-size: 9px; cursor: default; } ul#testdrive_switch li.selected { font-weight: bold; } ul#testdrive_switch li.selected span.radio { font-weight: normal; color: #06C; } #testdrive_controls .punchdown { top: 4px; } * html #testdrive_controls .punchdown { top: 0px; } #testdrive_webfont_controls, #testdrive_desktop_controls { float: left; padding: 0; margin: 0; } #testdrive_switch, #testdrive_label, #testdrive_sampletext_cell, #testdrive_slider_cell, #testdrive_fit_cell, #testdrive_webfont_controls > div { position: relative; float: left; padding: 4px 0px 4px 12px; height: 22px; margin: 0px; } #testdrive_fit_cell { padding-top: 4px; } #testdrive_controls #testdrive_label { top: 6px; } * html #testdrive_controls #testdrive_label { top: 4px; } #testdrive_controls .menu_trigger { position: absolute; top: 0px; padding: 6px; padding-bottom: 4px; height: 24px; font-size: smaller; margin: 0px; line-height: 1; cursor: pointer; } #testdrive_controls #testdrive_goodies { left: 672px; padding-right: 12px; } #testdrive_controls #testdrive_goodies.menu_active { left: 671px; } #testdrive_controls #testdrive_opentype { left: 630px; } #testdrive_controls #testdrive_opentype.menu_active { left: 629px; } #testdrive_controls #testdrive_color_squares { left: 596px; } #testdrive_controls #testdrive_color_squares.menu_active { left: 595px; } #testdrive_controls .menu_trigger img.img_button { padding: 2px; } #testdrive_controls .menu_trigger.menu_active { border: 1px solid #333333; background-color: white; z-index: 503; top: -1px; } #testdrive_controls img.menu_icon { height: 18px; width: 30px; padding-top: 1px; } #testdrive_controls img.menu_item_icon { height: 18px; width: 18px; padding-top: 1px; } #testdrive_controls .menu_pane { display: none; position: absolute; cursor: default; top: 35px; right: -1px; background-color: white; border: 1px solid #333333; margin: 0px; white-space: nowrap; z-index: 502; padding: 0px; opacity: 0.97; filter: alpha(opacity=97); } #testdrive_controls .menu_pane.colormenu { opacity: 1; filter: alpha(opacity=100); } #testdrive_controls .menu_active .menu_pane { display: block; } #testdrive_controls .menu_pane .borderdiv { position: absolute; background-color: #F5F5F5; border-style: solid; border-color: white; border-width: 2px 4px; right: 0px; top: -3px; width: 0px; height: 1px; font-size: 1px; overflow: hidden; z-index: 504; } #testdrive_controls .menu_pane ul, #testdrive_controls .menu_pane table { margin: 4px; } #testdrive_controls .menu_pane ul li { margin-top: 4px; margin-bottom: 4px; } #testdrive_controls .menu_pane ul#testdrive_ot_feature_list li { font-weight: bold; margin-top: 8px; margin-bottom: 8px; } #testdrive_controls .menu_pane ul#testdrive_ot_feature_list li ul li { font-weight: normal; margin-top: 4px; margin-bottom: 4px; } #testdrive_controls .menu_pane ul li.divider { margin-top: 6px; padding-top: 4px; } #testdrive_controls .menu_pane table tr td { padding: 4px 2px; vertical-align: middle; white-space: nowrap; } #testdrive_controls .menu_pane table tr td.icon { text-align: center; } /* #testdrive_controls .menu_pane table tr:first-child td { border-top: 0px none #F3F3F3; } */ #sampletext_dropdown { width: 190px; } #testdrive_desktop_controls .testdrive_spinner { position: absolute; left: 564px; padding: 8px 6px; } #testdrive_webfont_controls .testdrive_spinner { position: absolute; left: 640px; padding: 8px 6px; } #testdrive_spinner img { width: 16px; height: 16px; } .shuffle_arrow { font-family: "Arial Unicode MS", "MS PGothic", "Free Serif"; } #testdrive_color_squares { width: 22px; height: 22px; } #testdrive_controls .color_square { position: absolute; border: 1px solid #808080; width: 14px; height: 14px; cursor: pointer; } #testdrive_colorwheel { padding: 4px; } #testdrive_controls #testdrive_fg_square { position: absolute; background-color: black; left: 6px; top: 6px; } #testdrive_controls #testdrive_bg_square { position: absolute; background-color: white; right: 6px; bottom: 6px; } div.fontsample { position: relative; overflow: hidden; } div.fontsample img.overlay { position: relative; background-color: white; } div.fontsample img.overlay + img.overlay { position: absolute; top: 0px; padding-left: 12px; padding-right: 50%; } table.fontsample { width: 100%; border-collapse: collapse; } table.fontsample tr td { vertical-align: top; border-style: none; } table.fontsample tr td + td { border-left: 12px solid white; } table.fontsample tr td div { overflow-x: hidden; } .sample1x { display: block; } .sample2x { display: none; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .sample1x { display: none; } .sample2x { display: block; } } 

#font-testdrive-new, #font-testdrive-new * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'RooneySans-Regular', 'Trebuchet MS', sans-serif; padding: 0px; margin: 0px; } #font-testdrive-new #font-options .dropdown-modal ul:first-child:after , #font-testdrive-new #font-options .dropdown-modal ul:first-child:before , #font-testdrive-new #font-options .dis-options ul:first-of-type:before, #font-testdrive-new #font-options .dis-options ul:first-of-type:after { bottom: 100%; left: 37px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #font-testdrive-new #font-options .adv-options ul:first-child:before { border-bottom-color: #fbfbfb; border-width: 12px; margin-left: -15px; z-index: 1; } #font-testdrive-new #font-options .adv-options ul:first-child:after { border-bottom-color: #dddddd; border-width: 13px; margin-left: -16px; } #font-testdrive-new #font-options .dis-options ul:first-of-type:before { border-bottom-color: #fbfbfb; border-width: 12px; margin-left: -15px; z-index: 1; } #font-testdrive-new #font-options .dis-options ul:first-of-type:after { border-bottom-color: #dddddd; border-width: 13px; margin-left: -16px; } #font-testdrive-new { width: 100%; background: #fbfbfb; margin-bottom: -1px; } .font-testdrive-inner { border: 1px solid #dddddd; } #font-testdrive-new ul { list-style-type: none; } #font-testdrive-new a { text-decoration: none; color: inherit; } #font-testdrive-new .clear { clear: both; } #font-testdrive-new .left { float: left; } #font-testdrive-new .right { float: right; } #font-testdrive-new .blue { background: #09f; color: #fff; } #font-testdrive-new .tools-section { height: 60px; padding: 12px 0; margin-left: 5px; } #font-testdrive-new .dropdown-anchor, #font-testdrive-new .dropdown { position: relative; } #font-testdrive-new .dropdown { z-index: 1000; } #font-testdrive-new .dropdown.selected + .dropdown-modal { display: block; } #font-testdrive-new .dropdown-modal { display: none; /* border: 1px solid #7d7d7d; background: #fff; */ padding: 10px 0px 20px 0px; position: absolute; z-index: 1001; color: #333; background-color: #fbfbfb; border-color: #dddddd; border-width: 1px; border-style: solid; -moz-box-shadow: 2px 7px 4px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 2px 7px 4px rgba(0, 0, 0, 0.08); box-shadow: 2px 7px 4px rgba(0, 0, 0, 0.08); -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=7,Color=#14000000,Positive=true)"; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=7,Color=#14000000,Positive=true); } #font-testdrive-new #dropdown-box .arrow-down { border-top: 10px solid #fff; margin-top: 7px; margin-left: 2px; } #font-testdrive-new .dropdown-modal label { display: block; } #font-testdrive-new #font-text .dropdown-modal { width: 522px; top: 34px; padding: 20px; } #font-testdrive-new #font-text .dropdown-modal .left, #advanced-options + .dropdown-modal .left { width: 50%; } #font-testdrive-new .dropdown-modal ul { padding: 0px 0px 20px 0px; } #font-testdrive-new .dropdown-modal .option-group { font-weight: bold; padding-bottom: 3px; } #font-testdrive-new .dropdown-modal .option { font-weight: normal; padding: 2px 0 2px 15px; } #font-testdrive-new input[type="radio"], #font-testdrive-new input[type="checkbox"] { display: none; } #font-testdrive-new #font-text label:hover, #font-testdrive-new .checkbox label:hover { cursor: pointer; } #font-testdrive-new #font-text label:hover { color: #09f; } #font-testdrive-new #text-selector .blue { padding: 6px 7px; margin-left: 1px; -webkit-border-radius: 3px; border-radius: 3px; } #font-testdrive-new #font-box { text-align: center; width: 117px; height: 33px; overflow: hidden; -moz-border-radius: 2%; -webkit-border-radius: 1%/6%; border-radius: 1%/6%; } #font-testdrive-new #font-box span { overflow: hidden; display: block; white-space: nowrap; font-size: 16px; } #font-testdrive-new #dropdown-box { cursor: pointer; background-color: #0096ff; width: 31px; height: 33px; -moz-border-radius: 10%; -webkit-border-radius: 9%/9%; border-radius: 9%/9%; } #font-testdrive-new #font-text input[type="text"] { padding: 7px; border: 1px solid #7d7d7d; outline: none; margin-left: 10px; margin-right: 10px; background-color: white; width: 140px; height: 33px; font-size: 14px; border-color: #aaaaaa; border-width: 1px; -moz-border-radius: 1%; -webkit-border-radius: 0%/2%; border-radius: 0%/2%; border-style: solid; } ::-webkit-input-placeholder { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } :-moz-placeholder { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } ::-moz-placeholder { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } :-ms-input-placeholder { font-family: "RooneySans-Light", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } #font-testdrive-new #font-slider { width: 130px; margin: 13px 0; } #font-testdrive-new #font-slider.ui-slider-horizontal { height: 8px; background: #ccc; -webkit-border-radius: 4px; border-radius: 4px; } #font-testdrive-new #font-slider.ui-slider-horizontal .ui-slider-handle { background: #09f; -webkit-border-radius: 50%; border-radius: 50%; width: 14px; height: 14px; cursor: ew-resize; margin-left: -7px; top: -3px; outline: none; border: none; } #font-testdrive-new .ui-widget-content { border: none; } #font-testdrive-new .ui-widget-header { background: none; } #font-testdrive-new .ui-slider-handle.ui-state-hover, #font-testdrive-new .ui-slider-handle.ui-state-focus { border: none; } #font-testdrive-new #font-size .text { line-height: 22px; margin: 6px 5px; color: #7d7d7d; } #font-testdrive-new #font-size #font-slider { position: relative; } #font-testdrive-new #font-size #font-slider #font-size-tag { font-size: 11px; display: block; position: absolute; top: -30px; left: 0%; padding: 2px 0; width: 24px; height: 24px; text-align: center; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/s/images/testdrive_new/font-tag.png',sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/s/images/testdrive_new/font-tag.png',sizingMethod='scale')"; background-image: url("/s/images/testdrive_new/font-tag.png"); background-repeat: no-repeat; background-size: 100%; background-position: center center; } #font-testdrive-new #font-size .small { font-size: 12px; } #font-testdrive-new #font-size #font-slider-wrap-mobile .small { margin-right: 1px; } #font-testdrive-new #font-size .large { font-size: 22px; } #font-testdrive-new #fit-width { width: 130px; font-size: 14px; padding: 7px; margin-left: 0px; } /********************* #FONT-OPTIONS *********************/ #font-options { margin-right: 1px; } #font-testdrive-new #font-options .dropdown { width: 50px; height: 44px; text-align: center; padding: 0px 4px; margin-right: 0px; border: none; top: 0px; left: 0px; cursor: pointer; } #font-testdrive-new #font-options.tools-section { padding: 9px 0; } #font-testdrive-new #font-options .dropdown.selected { /* border: 1px solid #7d7d7d; border-bottom: none; */ top: 0px; left: 0px; } #font-testdrive-new #font-options .dropdown-modal { top: 60px; } #font-options .dropdown-modal #color-toggle:after , #font-options .dropdown-modal #color-toggle:before { bottom: 100%; left: 45px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #font-options .dropdown-modal #color-toggle:after { border-bottom-color: #fbfbfb; border-width: 12px; margin-left: -26px; } #font-options .dropdown-modal #color-toggle:before { border-bottom-color: #dddddd; border-width: 13px; margin-left: -27px; } #font-testdrive-new #progress .loading { margin: 0 auto; margin-top: 22px; margin-left: 20px; width: 70px; display: none; } #font-testdrive-new #progress .loading div { width: 15px; height: 15px; background-color: #0096ff; display: inline-block; border-radius: 10px 10px; margin-right: 3px; -webkit-animation: opacity 1.5s infinite; -moz-animation: opacity 1.5s infinite; -o-animation: opacity 1.5s infinite; animation: opacity 1.5s infinite; } #font-testdrive-new #progress .loading div:nth-of-type(1) { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -o-animation-delay: .1s; animation-delay: .1s; } #font-testdrive-new #progress .loading div:nth-of-type(2) { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; } #font-testdrive-new #progress .loading div:nth-of-type(3) { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; } @-webkit-keyframes opacity { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @-moz-keyframes opacity { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @-o-keyframes opacity { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes opacity { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } #font-testdrive-new #color-picker { position: relative; background-position: 4px -3px; margin-right: 10px !important; } #font-testdrive-new #color-picker + .dropdown-modal { left: -9px; width: 335px; } .color-container { width: 33px; height: 40px; background-color: #fbfbfb; } .no-touchevents #font-testdrive-new #color-picker:hover, #font-testdrive-new #color-picker.selected { background-position: 4px -38px; } #font-testdrive-new #color-picker .icon { border: 1px solid #7d7d7d; width: 16px; height: 16px; position: absolute; } #font-testdrive-new #color-picker #foreground-color { top: 6px; left: 10px; background: #000; z-index: 100; } #font-testdrive-new #color-picker #background-color { top: 14px; left: 18px; background: #fff; z-index: 90; } #font-testdrive-new #color-toggle { margin-bottom: 20px; } #font-testdrive-new #color-toggle .toggle { display: block; width: 140px; height: 50px; border: 1px solid #fff; -webkit-border-radius: 3px; border-radius: 3px; text-decoration: none; padding: 10px 8px; margin: 0 10px; } #font-testdrive-new #color-toggle .toggle.active { border: 1px solid #09f; } #font-testdrive-new #color-toggle span { color: #333; display: block; height: 30px; line-height: 30px; } #font-testdrive-new #color-toggle .swatch { width: 30px; height: 30px; border: 1px solid #333; } #font-testdrive-new #color-toggle .fground .swatch { background: #000; } #font-testdrive-new #color-toggle .bground .swatch { background: #fff; } #font-testdrive-new .ui-slider-vertical { height: 235px; border: 1px solid #333; margin: 0px 13px; -webkit-border-radius: 1px; border-radius: 1px; } #font-testdrive-new #hue, #font-testdrive-new #bhue { width: 125px; } #font-testdrive-new #hue.ui-slider-vertical .ui-slider-handle, #font-testdrive-new #bhue.ui-slider-vertical .ui-slider-handle { width: 141px; } #font-testdrive-new .ui-slider-vertical .ui-slider-handle { background: transparent; -webkit-border-radius: 1px; border-radius: 1px; width: 76px; height: 14px; margin-bottom: -7px; cursor: ns-resize; left: -9px; outline: none; border: 1px solid #fff; -webkit-box-shadow: 0px 2px 5px -2px #666; box-shadow: 0px 2px 5px -2px #666; } #font-testdrive-new #saturation, #font-testdrive-new #luminosity, #font-testdrive-new #bsaturation, #font-testdrive-new #bluminosity { width: 60px; } #font-testdrive-new #hue.ui-slider-vertical, #font-testdrive-new #bhue.ui-slider-vertical { background-image: -webkit-linear-gradient(top, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff, blue, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff, magenta, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b, red); background-image: -moz-linear-gradient(top, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff, blue, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff, magenta, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b, red); background-image: -ms-linear-gradient(top, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff, blue, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff, magenta, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b, red); background-image: -o-linear-gradient(top, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff, blue, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff, magenta, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b, red); background-image: linear-gradient(top, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff, blue, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff, magenta, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b, red); } #font-testdrive-new #hue, #font-testdrive-new #bhue { background: url("/s/images/testdrive_new/color_spectrum.png") no-repeat; } #font-testdrive-new #ie-sat { width: 60px; } #font-testdrive-new .shade { height: 20px; cursor: pointer; } #font-testdrive-new .black, #font-testdrive-new .white { width: 40px; height: 40px; border: 1px #000 solid; cursor: pointer; } #font-testdrive-new .black { background: black; } #font-testdrive-new .white { background: white; } #font-testdrive-new .hue-section { height: 16%; } #font-testdrive-new .hue-1 { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#FFFF00',GradientType=0); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFF00', endColorStr='#FFFFFF', GradientType=0); } #font-testdrive-new .hue-2 { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#2BFF00',GradientType=0); } #font-testdrive-new .hue-3 { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2BFF00', endColorstr='#0055FF',GradientType=0); } #font-testdrive-new .hue-4 { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0055FF', endColorstr='#FF00FF',GradientType=0); } #font-testdrive-new .hue-5 { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF00FF', endColorstr='#FF002B',GradientType=0); } #font-testdrive-new #saturation.ui-slider-vertical, #font-testdrive-new #bsaturation.ui-slider-vertical { background-image: -webkit-linear-gradient(top, gray, #996666, #b34d4d, #cc3333, #e61a1a, red); background-image: -moz-linear-gradient(top, gray, #996666, #b34d4d, #cc3333, #e61a1a, red); background-image: -ms-linear-gradient(top, gray, #996666, #b34d4d, #cc3333, #e61a1a, red); background-image: -o-linear-gradient(top, gray, #996666, #b34d4d, #cc3333, #e61a1a, red); background-image: linear-gradient(top, gray, #996666, #b34d4d, #cc3333, #e61a1a, red); } #font-testdrive-new #luminosity.ui-slider-vertical, #font-testdrive-new #bluminosity.ui-slider-vertical { background-image: -webkit-linear-gradient(top, black, #660000, #cc0000, #ff3333, #ff9999, white); background-image: -moz-linear-gradient(top, black, #660000, #cc0000, #ff3333, #ff9999, white); background-image: -ms-linear-gradient(top, black, #660000, #cc0000, #ff3333, #ff9999, white); background-image: -o-linear-gradient(top, black, #660000, #cc0000, #ff3333, #ff9999, white); background-image: linear-gradient(top, black, #660000, #cc0000, #ff3333, #ff9999, white); } #font-testdrive-new #foreground { display: block; } #font-testdrive-new #background { display: none; } #font-testdrive-new .icons { background: transparent url("/s/images/testdrive_new/fonttools_icon_sprite.png") no-repeat; background-size: 320px 250px; } /* #font-testdrive-new .icons.selected { background: #fff url('/s/images/testdrive_new/fonttools_icon_sprite.png') no-repeat; } */ #font-testdrive-new #advanced-options { background-position: -5px -3px; } #font-testdrive-new #advanced-options + .dropdown-modal { padding: 20px 15px; left: 42px; width: 450px; } .no-touchevents #font-testdrive-new #advanced-options:hover, #font-testdrive-new #advanced-options.selected { background-position: -5px -38px; } #font-testdrive-new #display-options { background-repeat: no-repeat; background-position: -62px -2px; } #font-testdrive-new #display-options + .dropdown-modal { padding: 20px 20px; left: 92px; width: 330px; } #font-testdrive-new #advanced-options + .dropdown-modal .option { padding-left: 0px; } #font-testdrive-new #display-options + .dropdown-modal ul { padding-bottom: 5px; } #font-testdrive-new #display-options + .dropdown-modal .option { padding: 5px 0 10px 0; } .no-touchevents #font-testdrive-new #display-options:hover, #font-testdrive-new #display-options.selected { background-position: -62px -37px; } #font-testdrive-new .checkbox { display: block; } #font-testdrive-new .quickset div { cursor: pointer; } #font-testdrive-new .checkbox label, #font-testdrive-new .quickset div { background: url("/s/images/testdrive_new/fonttools_icon_sprite.png") no-repeat; padding-left: 32px; } #font-testdrive-new .dis-options .checkbox div { background: url("/s/images/testdrive_new/fonttools_icon_sprite.png") no-repeat; padding-left: 39px; line-height: 160%; } #font-testdrive-new .dis-options .checkbox label, #font-testdrive-new .dis-options .quickset div { padding-left: 42px; } #font-testdrive-new #display-options + .dropdown-modal .checkbox label, #font-testdrive-new .quickset div { padding-top: 3px; padding-bottom: 3px; } #font-testdrive-new .checkbox label { background-position: -7px -104px; } #font-testdrive-new #display-options + .dropdown-modal .checkbox label { background-position: -7px -103px; } #font-testdrive-new #fit-width.checkbox label { background-position: -7px -102px; font-size: 16px; line-height: 120%; color: #545454; text-align: left; } #font-testdrive-new .checkbox label.checked { background-position: -7px -82px; } #font-testdrive-new #display-options + .dropdown-modal .checkbox label.checked { background-position: -7px -81px; } #font-testdrive-new #fit-width.checkbox label.checked { background-position: -7px -81px; } #font-testdrive-new #reset { background-position: -8px -157px; } #font-testdrive-new #shuffle { background-position: -12px -187px; } #font-testdrive-new #permalink { background-position: -12px -127px; } #font-testdrive-new .right-options { float: right; } #font-testdrive-new .checkbox_label { margin-top: 3px; margin-right: 5px; font-size: 16px; color: #525252; padding-left: 32px; display: inline-block; cursor: pointer; background: url("/s/images/testdrive_new/fonttools_icon_sprite.png") no-repeat; background-position: -7px -102px; line-height: 120%; } #font-testdrive-new .image_checkbox label.checked { background-position: -7px -81px; } #font-testdrive-new .image_checkbox { margin: 18px 15px; } /* #font-testdrive-new .image_checkbox input[type="checkbox"] { display: inline-block; } */ #font-testdrive-new .sort-by { color: #525252; margin-top: 9px; font-size: 16px; line-height: 120%; } #font-testdrive-new #sort-container { padding: 12px 0; position: relative; } #font-testdrive-new #sort-container div { float: left; vertical-align: middle; } #font-testdrive-new .sortby_dropdown .arrow-down { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #000; margin: 6px 5px 0 14px; } #font-testdrive-new .relevance { font-weight: bold; color: #222222; font-size: 16px; font-weight: bold; line-height: 120%; } #font-testdrive-new .sort-options .dropdown { width: 50px; height: 45px; text-align: center; padding: 0px 4px; margin-right: 0px; border: none; position: relative; top: 1px; left: 1px; } #font-testdrive-new #sort-options { background-position: -5px -2px; } #font-testdrive-new .arrow-down { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #000; margin: 5px 5px 0 14px; } #font-testdrive-new .sortby_dropdown { margin-top: 9px; position: relative; z-index: 2; margin-left: 14px; cursor: pointer; } /* #font-testdrive-new #sort-container .dropdown-modal { padding: 30px 0 0 7px; right: 32px; width: 153px; top: 13px; z-index: 1; } */ #font-testdrive-new #sort-container .dropdown-modal { padding: 28px 0 0 12px; left: 59px; width: 180px; top: 7px; z-index: 1; } #font-testdrive-new ul.sort-options { list-style-type: none; font-family: "RooneySans-Regular"; font-size: 16px; line-height: 120%; color: #444444; } #font-testdrive-new #sort-container .sort-options li { margin-top: 16px; cursor: pointer; } #font-testdrive-new .back-to-top { float: right; padding: 20px 10px; height: 60px; font-family: "RooneySans-Regular"; color: #525252; } /* #font-testdrive-new .back-to-top .topBtn:hover { background-position: -129px -44px; } */ #font-testdrive-new .back-to-top .top-hoverOn { background-position: -129px -44px; } #font-testdrive-new .top-txtOn { color: #0099ff; } #font-testdrive-new .back-to-top div { float: left; } #font-testdrive-new .topBtn { width: 22px; height: 28px; background: url("/s/images/testdrive_new/top_icons.png") no-repeat -3px -7px; } .no-touchevents #font-testdrive-new .topBtn:hover { background-position: -29px -7px; } #font-testdrive-new #display-layout { width: 420px; display: none; } .fluid #font-testdrive-new #display-layout { display: block; } #font-testdrive-new .dropdown-modal .sample_toggle { display: none; } #font-testdrive-new.sticky { position: fixed; z-index: 100; opacity: .25; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } #font-testdrive-new.sticky.show { opacity: 1; transition: opacity 500ms; -webkit-transition: opacity 500ms; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } #font-slider-wrap-mobile { display: none; } #font-testdrive-new #font-text .cust-text-mobile #cust-text { padding: 0; margin: 0; width: 100%; padding-left: 5px; margin-bottom: 15px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #font-testdrive-new .icons { background: transparent url("/s/images/testdrive_new/fonttools_icon_sprite@2x.png") no-repeat; background-size: 320px 250px; } #font-testdrive-new #advanced-options { background-position: -1px 2px; } .no-touchevents #font-testdrive-new #advanced-options:hover, #font-testdrive-new #advanced-options.selected { background-position: -1px -34px; } #font-testdrive-new #color-picker { background-position: 7px 2px; } .no-touchevents #font-testdrive-new #color-picker:hover, #font-testdrive-new #color-picker.selected { background-position: 7px -34px; } #font-testdrive-new #display-options { background-position: -54px 2px; } .no-touchevents #font-testdrive-new #display-options:hover, #font-testdrive-new #display-options.selected { background-position: -54px -34px; } #font-testdrive-new #fit-width.checkbox label { background-position: -3px -197px; } #font-testdrive-new #fit-width.checkbox label.checked { background-position: -3px -161px; } #font-testdrive-new .checkbox label, #font-testdrive-new .quickset div { background: url("/s/images/testdrive_new/fonttools_icon_sprite@2x.png") no-repeat; padding-left: 32px; background-position: -3px -197px; background-size: 320px 250px; } #font-testdrive-new .checkbox label.checked { background-position: -3px -161px; } #font-testdrive-new .image_checkbox label { background: url("/s/images/testdrive_new/fonttools_icon_sprite@2x.png") no-repeat; background-size: 320px 250px; background-position: -3px -197px; } #font-testdrive-new .image_checkbox label.checked { background-position: -3px -161px; } #font-testdrive-new .topBtn { background: url("/s/images/testdrive_new/top_icons@2x.png") no-repeat -2px -7px; background-size: 100px 100px; } .no-touchevents #font-testdrive-new .topBtn:hover { background-position: -28px -7px; } #font-testdrive-new .dis-options .checkbox div { background: url("/s/images/testdrive_new/fonttools_icon_sprite@2x.png") no-repeat; background-size: 320px 250px; } #font-testdrive-new #reset { background-position: -130px -5px; } #font-testdrive-new #permalink { background-position: -3px -226px; } } @media (max-width: 1023px) { #font-testdrive-new .right-options { width: 100%; border-top: 1px solid #dddddd; padding: 0 5px; } #font-testdrive-new .image_checkbox { float: right !important; } #font-testdrive-new .back-to-top { float: right; } #font-testdrive-new .image_checkbox { margin: 0; margin-top: 18px; } #font-testdrive-new #font-options { float: right; } #font-testdrive-new #color-picker + .dropdown-modal { left: -281px; } #font-testdrive-new #font-options .dropdown-modal #color-toggle:before { margin-left: 246px; } #font-testdrive-new #font-options .dropdown-modal #color-toggle:after { margin-left: 247px; } #font-testdrive-new #advanced-options + .dropdown-modal { left: -296px; } #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 328px; left: 34px; } #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 327px; left: 34px; } #font-testdrive-new #display-options + .dropdown-modal { left: -175px; } #font-testdrive-new #font-options .dis-options ul:first-child:before { margin-left: 251px; } #font-testdrive-new #font-options .dis-options ul:first-child:after { margin-left: 250px; } } @media (max-width: 1100px) { #font-testdrive-new .image_checkbox { margin-right: 5px; margin-left: 5px; } #font-testdrive-new .back-to-top { margin-left: 0; } #font-testdrive-new #font-slider { width: 100px; } #font-testdrive-new #fit-width { width: 125px; padding: 7px 4px; } #font-testdrive-new #font-options { margin: 0; } } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { body { -webkit-text-size-adjust: none; } .noScroll { overflow: hidden; } .sample1x { display: block; } .sample2x { display: none; } #font-testdrive-new .tools-section { padding: 0; margin-top: 5px; margin-left: 2px; } #font-testdrive-new { background-color: #fbfbfb; width: 100%; height: 45px; border-color: #dddddd; padding: 0; position: relative; } #font-testdrive-new .tools-section { height: initial; } #font-testdrive-new #dropdown-box span { font-family: "RooneySans-Medium"; font-size: 16px; line-height: 120%; color: #222222; text-align: left; margin-left: 7px; } #font-testdrive-new #dropdown-box { background-color: #cccccc; width: 111px; height: 32px; -moz-border-radius: 2%; -webkit-border-radius: 1%/6%; border-radius: 1%/6%; } #font-testdrive-new #dropdown-box .arrow-down { display: none; } #font-testdrive-new #font-options { float: left; } #font-testdrive-new #font-options .dropdown { width: 47px; } #font-testdrive-new #font-options.tools-section { padding: 0; margin: 0; } #font-testdrive-new .dropdown-anchor, #font-testdrive-new .dropdown { position: static; } #font-testdrive-new .dropdown.selected + .dropdown-container .dropdown-modal { display: block; } #font-testdrive-new .dropdown-modal .option { padding: 0; background-color: transparent; border-color: #dddddd; border-width: 1px; border-style: solid; border-bottom-style: none; background-color: white; } #font-testdrive-new .dropdown-modal ul li.option:nth-child(2) { border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; } #font-testdrive-new .dropdown-modal ul li.option:last-child { border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-style: solid; } #font-testdrive-new .dropdown-modal .option-group { font-family: "RooneySans-Bold"; font-size: 16px; font-weight: normal; line-height: 120%; color: #111111; text-align: left; margin-bottom: 7px; } #font-testdrive-new .dropdown-modal label { display: inline-block; font-family: "RooneySans-regular"; font-size: 16px; line-height: 120%; color: #111111; text-align: left; width: 100%; padding: 13px 12px; padding-right: 3px; } #font-testdrive-new .dropdown-modal span.mobileChecked { font-family: "Social-Network-Icons"; font-size: 24px; line-height: 30%; color: #0099ff; text-align: left; position: relative; top: 4px; float: right; } #font-testdrive-new .right-options { display: none; } #font-testdrive-new .menu-handle-outer { padding: 20px 0; } #font-testdrive-new .menu-handle-inner { display: table; width: 100%; background-color: #ededed; } #font-testdrive-new #font-box { display: none; } #font-testdrive-new #font-size { cursor: pointer; } #font-testdrive-new #font-text .dropdown-modal { left: 0; right: 0; width: initial; top: 187px; } #font-testdrive-new #font-text .dropdown-modal .left { width: 100%; } #font-testdrive-new #font-text .dropdown-modal { padding: 10px; } #font-testdrive-new .dropdown-modal .dropdown-inner { overflow-y: scroll; } #font-testdrive-new .dropdown-modal .menu-handle { height: 21px; margin-top: 15px; display: table; margin: 0 auto; vertical-align: middle; } #font-testdrive-new .menu-handle .handle-circle { display: inline-block; background: #aaaaaa; width: 8px; height: 8px; border-radius: 50%; margin: 1px; margin-top: 7px; } #font-testdrive-new #font-text .dropdown-modal:after , #font-testdrive-new #font-text .dropdown-modal:before { bottom: 100%; left: 45px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #font-testdrive-new #font-text .dropdown-modal:after { border-bottom-color: #fbfbfb; border-width: 12px; margin-left: -1px; } #font-testdrive-new #font-text .dropdown-modal:before { border-bottom-color: #dddddd; border-width: 13px; margin-left: -2px; } #font-testdrive-new #font-slider-wrap { display: none; } #font-testdrive-new #font-slider-wrap-mobile { display: block; } #font-testdrive-new #font-slider-wrap-mobile + .dropdown-modal { left: 0; right: 0; width: initial; top: 187px; padding: 20px 0; } #font-testdrive-new #font-text input[type="text"] { margin-left: 0px; margin-bottom: 15px; background-color: #fbfbfb; height: 45px; border-color: #dddddd; border-width: 1px; -moz-border-radius: 1%; -webkit-border-radius: 1%/6%; border-radius: 1%/6%; border-style: solid; font-family: "RooneySans-Regular"; font-size: 16px; line-height: 120%; text-align: left; } #font-testdrive-new #font-slider.ui-slider-horizontal .ui-slider-handle { width: 28px; height: 28px; top: -11px; } #font-testdrive-new #fit-width.checkbox label { width: inherit; background: url("/s/images/testdrive_new/fonttools_icon_sprite.png") no-repeat; background-position: -7px -105px; padding: 0 0 0 32px; } #font-testdrive-new *::-webkit-input-placeholder { color: #000000; font-size: 16px; font-family: "rooneysans-regular"; } #font-testdrive-new *:-moz-placeholder { color: #000000; font-size: 16px; font-family: "rooneysans-regular"; } #font-testdrive-new *::-moz-placeholder { color: #000000; font-size: 16px; font-family: "rooneysans-regular"; } #font-testdrive-new *:-ms-input-placeholder { color: #000000; font-size: 16px; font-family: "rooneysans-regular"; } #font-testdrive-new #font-size .dropdown-modal:after , #font-testdrive-new #font-size .dropdown-modal:before { bottom: 100%; left: 42px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #font-testdrive-new #font-size .dropdown-modal:after { border-bottom-color: #fbfbfb; border-width: 12px; margin-left: 84px; } #font-testdrive-new #font-size .dropdown-modal:before { border-bottom-color: #dddddd; border-width: 13px; margin-left: 83px; } #font-testdrive-new #font-slider { width: 75%; } #font-testdrive-new #font-slider-mobile .small { font-size: 18px; line-height: 21px; padding-right: 7px; padding-left: 8px; } #font-testdrive-new #font-slider-mobile .large { font-size: 28px; padding-left: 5px; } #font-testdrive-new #font-size #font-slider #font-size-tag { display: none; } #font-testdrive-new #fit-width { margin-top: 40px; } #font-testdrive-new #color-picker { background-position: 5px -2px; margin-right: 0 !important; } #font-testdrive-new #color-picker #foreground-color { left: 18px; } #font-testdrive-new #color-picker #background-color { left: 26px; } #font-testdrive-new #color-toggle .toggle { width: 42%; } #font-testdrive-new .ui-slider { margin: 0px 10px; } #font-testdrive-new #color-picker:hover, #font-testdrive-new #color-picker.selected { background-position: 7px -40px; } #font-testdrive-new .color-container { height: 39px; width: 44px; } #font-testdrive-new #color-picker.dropdown, #font-testdrive-new #color-picker.dropdown.selected { top: 3px; background: none; } #font-testdrive-new #color-picker + .dropdown-modal { left: 0; right: 0; width: initial; top: 187px; } #font-testdrive-new #color-picker .dropdown-modal .left { width: 100%; } #font-testdrive-new #color-picker .dropdown-modal { padding: 10px; } #font-testdrive-new #font-options .dropdown-modal #color-toggle:after, #font-options .dropdown-modal #color-toggle:before { left: -73px; } #font-testdrive-new #advanced-options { background-position: 10px -81px; } #font-testdrive-new #advanced-options.selected { background-position: 1px -40px; } #font-testdrive-new #advanced-options + .dropdown-modal { left: 0; right: 0; width: initial; top: 187px; padding: 10px; } #font-testdrive-new #advanced-options + .dropdown-modal .left { width: 100%; } #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 184px; } #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 185px; } .no-touchevents #font-testdrive-new #advanced-options:hover, #font-testdrive-new #advanced-options.selected { background-position: 10px -117px; } #font-testdrive-new #display-options { background-repeat: no-repeat; background-position: -45px -80px; } .no-touchevents #font-testdrive-new #display-options:hover, #font-testdrive-new #display-options.selected { background-position: -45px -116px; } #font-testdrive-new #display-options + .dropdown-modal { left: 0; right: 0; width: initial; top: 187px; } #font-testdrive-new #font-options .dis-options ul:first-of-type:before { margin-left: 221px; left: 41px; } #font-testdrive-new #font-options .dis-options ul:first-of-type:after { margin-left: 220px; left: 41px; } #font-testdrive-new .dropdown-modal .option.quickset { border: none; } #font-testdrive-new #display-options + .dropdown-modal .left { width: 100%; } #font-testdrive-new #display-options + .dropdown-modal { padding: 10px; } #font-testdrive-new #display-options + .dropdown-modal ul li.option:nth-child(1) { border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; } #font-testdrive-new #display-options + .dropdown-modal ul li.option:nth-child(2) { border-top-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; } #font-testdrive-new #display-options + .dropdown-modal ul li.option:last-child { border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-style: solid; } #font-testdrive-new #display-options + .dropdown-modal .checkbox label, #font-testdrive-new #display-options + .dropdown-modal .checkbox a div { margin: 0; padding: 13px 12px; padding-right: 3px; width: 100%; } #font-testdrive-new .checkbox_label span { float: right; } #font-testdrive-new .dis-options ul { clear: both; } #font-testdrive-new .dis-options .half { float: left; width: 45%; border-color: #dddddd; border-width: 1px; border-style: solid; border-radius: 5px 5px; } #font-testdrive-new .dropdown-modal.dis-options label { width: 90%; } #font-testdrive-new .dis-options .checkbox div { background: none; padding-left: 0; line-height: 100%; } #font-testdrive-new #display-options + .dropdown-modal .option { padding: 0; height: 45px; } #font-testdrive-new .dis-options .option a { display: block; width: 100%; height: 100%; line-height: 200%; font-family: "RooneySans-regular"; font-size: 16px; color: #111111; } #font-testdrive-new .dropdown-modal .sample_toggle { display: block; } #font-testdrive-new .dis-options .image_checkbox_mobile { width: 100%; border-bottom-style: solid; } #font-testdrive-new .dis-options .left .checkbox_label { background: none; } #font-testdrive-new #display-options + .dropdown-modal .left { width: 100%; } #font-testdrive-new .image_checkbox { margin: 0; float: left !important; } #font-testdrive-new #fit-width.checkbox label { background-position: -3px -102px; } #font-testdrive-new #fit-width.checkbox label.checked { background-position: -3px -81px; } #font-testdrive-new .checkbox label { background: none; } } @media screen and (max-width: 620px) { .no-touchevents #progress { display: none !important; } } @media screen and (max-width: 551px) { #font-testdrive-new #font-size #font-slider-wrap, #font-testdrive-new #font-size > #fit-width { display: none; } } @media only screen and (min-width: 321px) { } @media only screen and (max-width: 320px) { #font-testdrive-new #hue, #font-testdrive-new #bhue { width: 118px; } #font-testdrive-new #hue.ui-slider-vertical .ui-slider-handle, #font-testdrive-new #bhue.ui-slider-vertical .ui-slider-handle { width: 133px; } } #font-testdrive-new input, textarea { color: #000; } #font-testdrive-new .placeholder { border: 1px solid #000000; } #font-testdrive-new input .placeholder:focus { border: 1px solid #000000; } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px) and (min-device-width: 320px) { #font-testdrive-new #fit-width.checkbox label { background: url("/s/images/testdrive_new/fonttools_icon_sprite@2x.png") no-repeat; background-size: 320px 250px; background-position: -3px -197px; } #font-testdrive-new #fit-width.checkbox label.checked { background-position: -3px -161px; } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px) and (min-device-width: 375px) { #font-testdrive-new #font-options .dropdown { width: 59px; } #font-size { width: 59px; } #font-slider-wrap-mobile { padding-left: 10px; } #font-testdrive-new #font-size .dropdown-modal::before { margin-left: 91px; } #font-testdrive-new #font-size .dropdown-modal::after { margin-left: 92px; } #font-testdrive-new #color-picker #foreground-color { left: 18px; } #font-testdrive-new #color-picker #background-color { left: 26px; } #font-testdrive-new #font-options .dropdown-modal #color-toggle:after, #font-options .dropdown-modal #color-toggle:before { left: -51px; } #font-testdrive-new #font-options .adv-options ul:first-child:before { margin-left: 216px; } #font-testdrive-new #font-options .adv-options ul:first-child:after { margin-left: 215px; } #font-testdrive-new #font-options .dis-options ul:first-of-type:before { margin-left: 265px; } #font-testdrive-new #font-options .dis-options ul:first-of-type:after { margin-left: 264px; } #font-testdrive-new #fit-width.checkbox label { background-position: -3px -198px; } #font-testdrive-new #fit-width.checkbox label.checked { background-position: -3px -162px; } } @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { #font-testdrive-new .ui-slider-vertical { height: 125px; } } @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { #font-testdrive-new .ui-slider-vertical { height: 125px; } } @media screen and (device-aspect-ratio: 40 / 71) { #font-testdrive-new .ui-slider-vertical { margin-right: 4px; } #font-testdrive-new #color-toggle span { width: 72px; position: relative; } #font-testdrive-new .dropdown-modal label { width: 100%; } #font-testdrive-new #color-picker #foreground-color { left: 15px; } #font-testdrive-new #color-picker #background-color { left: 23px; } #font-testdrive-new #font-slider-wrap-mobile { padding-left: 4px; } #font-testdrive-new #font-options .dis-options ul:first-of-type:before, #font-testdrive-new #font-options .dis-options ul:first-of-type:after { left: 44px; } #font-testdrive-new #color-toggle .swatch { width: 27px; height: 27px; } } 

div.tracWidget { width: 200px; max-height: 300px; position: fixed; bottom: 0px; right: 0px; border: 1px solid #000000; padding: 3px; background-color: #FFFFAA; z-index: 400; font-size: smaller; overflow: auto; opacity: .85; } div.tracWidget .title { cursor: default; font-weight: bold; margin-right: 2em; } div.tracWidget ul { margin: 0px; padding: 0px; } div.tracWidget ul li { margin: 0px; padding: 1px; } div.tracWidget .minimize { font-family: sans-serif; font-weight: bold; cursor: default; position: absolute; padding: 1px; margin: 2px; top: 0px; right: 0px; } div.tracWidget .minimize:hover { color: red; } 

div.done_message { border: 1px solid #0C0; background-color: #EFE; padding: 12px; font-weight: bold; margin: 24px 0px; } div.user_edited_article_section + div.user_edited_article_section { clear: both; padding-top: 24px; } div.article_diff { padding-bottom: 12px; } #user_edited_article div.original_article, #user_edited_article div.edited_article { width: 440px; border: 1px solid black; padding: 12px; } #user_edited_article div.original_article { float: left; } #user_edited_article div.edited_article { float: right; } #user_edited_article span.deleted { padding: 2px; text-decoration: line-through; background-color: #FCC; } #user_edited_article span.added { padding: 2px; background-color: #9F9; font-weight: bold; } 

#popup_box .eula-acceptance input[type=button] { padding: 10px 18px; margin: 0; } #popup_box .eula-acceptance input[type=button].grey { background-color: #CCC; color: #444; } #popup_box .eula-acceptance input[type=button].grey:hover { background-color: #BBB; } #popup_box .eula-acceptance input[type=button].grey:active { background-color: #999; color: #333; } #popup_box .eula-acceptance label { display: block; margin: 20px 0; } #popup_box .eula-acceptance .content { overflow: hidden; } #popup_box .eula-acceptance .content h2 { margin-bottom: 20px; } #popup_box .eula-acceptance .content p { font-size: 14px; } #popup_box .eula-acceptance .content .fltleft { float: left; margin-top: 10px; } #popup_box .eula-acceptance .content .print { float: right; } #popup_box .eula-acceptance .content .print input[type=button] { padding: 8px 14px; } #popup_box .eula-acceptance .error { background-color: #FFE55B; background-image: url("/s/images/checkout/warning.png"); background-repeat: no-repeat; background-position: 14px 50%; width: 100%; margin-bottom: 20px; } #popup_box .eula-acceptance .error span { padding: 0 14px 0 55px; display: inline-block; margin: 13px 0; font-size: 14px; } #popup_box .eula-acceptance .eula { width: 100%; height: 200px; overflow-y: scroll; overflow-x: hidden; word-wrap: break-word; border: 1px solid #DDD; padding: 5px 7px; margin-top: 20px; box-sizing: border-box; } .webfont_kit table.options { border-collapse: collapse; width: 100%; border-spacing: 0; } .webfont_kit table.options tr { border-bottom: 1px solid #CCCCCC; } .webfont_kit table.options tr.mls-subscription { border-bottom: 0; } .webfont_kit table.options tr:first-child td { border-top: 1px solid #CCCCCC; } .webfont_kit table.options tr td { vertical-align: top; padding: 12px 0px; font-size: larger; } .webfont_kit table.options tr td:first-child { font-weight: bold; padding-right: 10px; } .webfont_kit table.options tr td.subhead { float: none; font-weight: 300; display: block; margin: 0; } .webfont_kit table.options tr td .mls .query { margin-bottom: 12px; } .webfont_kit table.options tr td .mls .query input { width: 600px; padding: 18px 18px; font-size: 16px; box-sizing: border-box; background: #fff url("/s/images/magnifying_glass.png") no-repeat right 21px center; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .webfont_kit table.options tr td .mls .query input { background-image: url("/s/images/magnifying_glass@2x.png"); background-size: 17px 17px; } } .webfont_kit table.options tr td .mls .query input::-webkit-input-placeholder { font-size: 16px; } .webfont_kit table.options tr td .mls .query input::-moz-placeholder { font-size: 16px; } .webfont_kit table.options tr td .mls .query input:-ms-input-placeholder { font-size: 16px; } .webfont_kit table.options tr td .mls .query #auto_complete_results { border: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; box-sizing: border-box; } .webfont_kit table.options tr td .mls .query #auto_complete_results li { padding: 9px 20px; } .webfont_kit table.options tr td .mls .query #auto_complete_results li:hover span { color: #fff; } .webfont_kit table.options tr td .mls .query #auto_complete_results li span { color: #0099ff; font-size: 18px; } .webfont_kit table.options tr td .mls .query #auto_complete_results li .foundry-name { margin-left: 4px; text-transform: none; color: #4a4a4a; } .webfont_kit table.options tr td .mls .query #auto_complete_results li button { padding: 4px 13px; color: #4a4a4a; } .webfont_kit table.options tr td div a { word-break: break-all; } .webfont_kit table.options tr td div.note { font-size: 11px; } .webfont_kit table.options tr td span.horizontal_option { padding-right: 12px; } .webfont_kit table.options #Custom_kit_selected_placeHolder { font-weight: light; color: #666; font-size: larger; } .webfont_kit table.options #Custom_kit_selected_fonts li.odd { background-color: #666; } .webfont_kit table.options tr#Custom_kit_adv_opt_toggle { cursor: pointer; } .webfont_kit table.options tr#Custom_kit_adv_opt_toggle td { border-bottom: none; border-top: none; } .webfont_kit table.options span#Custom_kit_expand { padding-right: 4px; color: #666; } .webfont_kit table.options span.Custom_kit_style_cont span { font-size: smaller; padding-right: 4px; } .webfont_kit table.options .Custom_kit_style_cont { color: #666; cursor: pointer; } .webfont_kit .Custom_kit_Family_Control { display: inline-block; font-weight: light; width: 100%; padding-left: 4px; padding-top: 2px; padding-bottom: 2px; position: relative; left: -15px; margin-bottom: 5px; font-size: larger; color: #666; background-color: whiteSmoke; } .webfont_kit tbody#Custom_kit_adv_opt, .webfont_kit table.options li.Custom_kit_style { margin-left: 20px; } .webfont_kit tbody#Custom_kit_adv_opt tr:first-child td { border-top: none; } .webfont_kit .Custom_kit_checkbox_wrap { float: right; margin-right: 15px; } .webfont_kit .Custom_kit_checkbox_text { float: left; font-size: small; padding-top: 2px; padding-right: 5px; } .webfont_kit_wrapper { clear: both; } .webfontkitbuilder_title { font-size: 17px; padding-top: 3px; float: left; width: 500px; color: #000000; } #Cancel_Configure_kit_btn, #Cancel_Configure_kit_btn_digital_ads { background-color: #888888; border-color: #777; float: right; width: 100px; margin-right: 20px; font-size: 14px; } #Cancel_Configure_kit_btn:hover, #Cancel_Configure_kit_btn_digital_ads:hover { background-color: #777; } #Custom_kit_form { margin-top: 30px; } #Custom_kit_form_sub { color: #ffffff; } ul.Custom_kit_cus_expando { padding-left: 9px; } ul#Custom_kit_cus_inc, ul#Custom_kit_cus_rem { padding-top: 2px; padding-bottom: 2px; } li.Custom_kit_Options_Pop_Item { padding-left: 8px; } span.Custom_kit_Options_Pop_Warning { position: absolute; left: 65px; display: block; width: 135px; margin-top: -5px; float: left; clear: right; padding-left: 3px; padding-top: 2px; padding-bottom: 2px; background-color: #FFD; border: 1px solid #E58C17; font-size: 12px; line-height: 1.4; } .Custom_kit_Sample_img span { position: relative; } li.Custom_kit_Options_Pop_Header { font-weight: bold; font-size: bigger; padding-top: 3px; padding-bottom: 5px; } .Custom_kit_Options_Pop_Item input { padding: 5px; margin-right: 5px; } .Custom_kit_Options_Control { background-color: whiteSmoke; margin-top: 10px; clear: left; } .Custom_kit_Options_Openable { cursor: pointer; } .Custom_kit_Options_Openable:hover { background-color: rgba(118, 173, 252, 0.1); } #kitonradio { margin-right: 5px; margin-left: 5px; vertical-align: middle; } #kitoffradio { margin-right: 5px; margin-left: 15px; vertical-align: middle; } .kitradiolbl { font-size: 12px; color: #000000; } .Custom_kit_checkbox { display: block; width: 85px; float: right; overflow: hidden; border-radius: 6px; text-align: center; line-height: 18px; height: 20px; cursor: pointer; -webkit-user-select: none; right: 2px; top: 5px; } .Custom_kit_checkbox > input[type="checkbox"] { display: none; } .Custom_kit_checkbox .Custom_kit_checkbox_thumb { border-radius: 7px; position: relative; top: -20px; z-index: 3; border: solid 1px #919191; } .Custom_kit_checkbox .Custom_kit_checkbox_thumb span { display: block; height: 17px; width: 34px; border-top: solid 1px #efefef; border-radius: 6px; background: #cecece; background: linear-gradient(to bottom, #cecece 0%, #fbfbfb 100%); border-top: solid 1px #efefef; position: relative; } .Custom_kit_checkbox .Custom_kit_checkbox_on { display: block; color: #295ab2; background: #76adfc; background: linear-gradient(to bottom, #295ab2 0%, #76adfc 100%); width: 48px; padding-right: 4px; border: solid 1px #093889; border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-right: -6px; height: 18px; position: relative; } .Custom_kit_checkbox .Custom_kit_checkbox_off { color: #666; top: -40px; left: 38px; background: #cecece; background: linear-gradient(to bottom, #b5b5b5 0%, #cecece 100%); display: block; width: 48px; padding-left: 4px; border: solid 1px #a1a1a1; border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-left: -6px; height: 18px; position: relative; } .Custom_kit_Sample { cursor: pointer; float: left; width: 70%; overflow: hidden; } .Custom_kit_Sample img { width: 95%; } .Custom_kit_Sample_Container { border-top: solid 1px #cfcfcf; clear: both; min-height: 75px; padding-right: 15px; padding-bottom: 10px; } .Custom_kit_Sample_img { vertical-align: middle; } .Custom_kit_Link_UI { clear: right; float: right; margin-top: 3px; } .Custom_kit_Link_UI .Custom_kit_Link_Clicked { background-color: #76adfc; position: relative; top: 1px; } .Custom_kit_Link_UI input[type="button"] { color: #08233e; width: 28px; font-size: 22px; font-family: 'times new roman' sans-serif; padding-top: 3px; padding-bottom: 3px; margin: 2px; background-color: whiteSmoke; border: 1px solid grey; border-bottom: 1px solid grey; cursor: pointer; } .Custom_kit_Link_UI input[type="button"][disabled], .Custom_kit_Link_UI input[type="button"][disabled]:hover, .Custom_kit_Link_UI input[type="button"][disabled]:active { background-color: #ababab; color: #696969; position: relative; top: 0; cursor: default; } .Custom_kit_Link_UI input[type="button"]:hover { background-color: rgba(72, 182, 255, 0.2); color: #009bfb; } .Custom_kit_Link_UI input[type="button"]:active { position: relative; top: 2px; } .Custom_kit_Link_UI input[type="button"][value='B'] { font-weight: bold; } .Custom_kit_Link_UI input[type="button"][value='R'] { font-weight: normal; } .Custom_kit_Link_UI input[type="button"][value='I'] { font-style: italic; font-weight: regular; } .Custom_kit_Link_UI input[type="button"][name='BI'] { font-weight: bold; font-style: italic; } input[type="button"].Custom_kit_Link_Clicked { background-color: #ffffff; } input[type="button"].Custom_kit_Link_Clicked:hover { background-color: rgba(118, 173, 252, 0.8); } #kithoverbtn { width: 30px; text-align: center; padding-left: 7px; } .kitmsg { font-size: 10px; width: 130px; float: right; padding-right: 5px; padding-top: 5px; } .webfont_kit_wrapper .kit_builder_guide { position: relative; border: 1px solid #E7E7E7; padding: 40px 20px 10px 40px; font-size: 16px; overflow: hidden; } .webfont_kit_wrapper .kit_builder_guide_inner { display: inline-block; } .webfont_kit_wrapper .kit_builder_guide_inner ol { line-height: 40px; margin: 40px 0 30px; } .webfont_kit_wrapper .kit_builder_guide_inner ol > li { margin: 0; padding: 0 0 0 1.3em; text-indent: -2em; list-style-type: none; counter-increment: item; } .webfont_kit_wrapper .kit_builder_guide_inner ol > li:before { display: inline-block; width: 1.5em; padding-right: 0.3em; font-weight: bold; text-align: right; content: counter(item) "."; } .webfont_kit_wrapper .kit_builder_guide img { width: 520px; height: 445px; } .webfont_kit_wrapper .kit_builder_guide .close_x { position: absolute; right: 15px; top: 8px; font-weight: bold; } 

#webfont_landing { color: #444; text-align: center; } #webfont_landing h1 { font-size: 53px; margin: 0.575em 0 0.25em; } #webfont_landing p { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 27px; line-height: 35px; margin: 1em; } #webfont_landing p:first-of-type { margin-top: 0; } #webfont_landing .foundry_button { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 17px; letter-spacing: 1px; padding: 13px 26px; } #webfont_landing #webfont_banner_one { background: url("/s/images/webfont_landing/webfont_banner_one.gif") center center no-repeat; background-size: 885px 575px; height: 575px; margin: 0 auto; padding: 25px 0; position: relative; width: 885px; } #webfont_landing #webfont_banner_two { background: url("/s/images/webfont_landing/webfont_banner_two.gif") center center no-repeat; background-size: 885px 575px; height: 575px; margin: 0 auto; padding: 25px 0; position: relative; width: 885px; } 

 /* #webfont_preview_controls #webfont_preview_label #webfont_compare_label { padding-top: 10px; padding-bottom:4px; } * html #webfont_preview_controls #webfont_preview_label #webfont_compare_label { top: 4px; } */ #webfont_preview_container { position: relative; overflow: hidden; } #webfont_preview_container_left { width: 348px; } #webfont_preview_browser0 { position: relative; } #webfont_preview_container_right { position: absolute; top: 0px; left: 348px; width: 348px; padding-left: 24px; background-color: white; overflow: hidden; } #webfont_preview_container select + button { visibility: hidden; } #webfont_preview_browser1 { position: relative; background-color: white; } #webfont_preview_container div.wfpspinner { position: absolute; top: 40%; left: 10%; padding: 12px; border: 1px solid #999; background-color: white; } #webfont_preview_container div.browser_tile { margin-bottom: 12px; } #webfont_preview_container div.browser_tile + div.browser_tile h3 { padding-top: 12px; margin-top: 12px; border-top: 1px solid #999; } 

a.mfPreviewButton { background: #fefefe; border: 1px solid; border-color: #e3e3e3 #d9d9d9 #d5d5d5 #d9d9d9; border-radius: 1px; box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.15); display: inline-block; color: #444 !important; font-size: 16px; letter-spacing: 2px; line-height: 24px; margin: 0px 5px; padding: 6px 15px; text-decoration: none; text-transform: uppercase; -webkit-transition: background 200ms ease-in-out, border 200ms ease-in-out; -moz-transition: background 200ms ease-in-out, border 200ms ease-in-out; -ms-transition: background 200ms ease-in-out, border 200ms ease-in-out; -o-transition: background 200ms ease-in-out, border 200ms ease-in-out; transition: background 200ms ease-in-out, border 200ms ease-in-out; } a.mfPreviewButton:hover { color: #07c !important; } a.mfPreviewButton.blue { background: #09f; border-color: #09f; box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(255, 255, 255, 0.25); color: #fff !important; } a.mfPreviewButton.blue:hover { background: #078adb; border-color: #007acb; } div#mfPreviewBarShow { background: #09f; color: #fff; cursor: pointer; font-family: 'mfPreviewClose'; font-size: 30px; height: 30px; line-height: 36px; width: 30px; border-radius: 50%; position: absolute; top: 17px; right: 17px; text-align: center; } div#mfPreviewBarShow:hover { background: #06c; } #mfPreviewBar { background: #0092F5; box-sizing: content-box; color: #fff; font-family: "mfPreviewBar", Helvetica, Arial, sans-serif; font-size: 16px; height: 38px; line-height: 38px; overflow: hidden; padding: 12px 0px; position: static; top: 0px; right: 0px; left: 0px; text-align: left; z-index: 999; } #mfPreviewBar * { box-sizing: content-box; } #mfPreviewBar span#mfPreviewBarText { display: block; float: left; margin: 0px 10px 0 20px; max-width: 425px; } #mfPreviewBar a#mfPreviewBarLogo { background-image: url("/s/images/webfont_preview_bar/logo.png"); background-position: center center; background-repeat: no-repeat; background-size: 71px 35px; display: block; float: left; height: 35px; margin-right: 20px; position: relative; top: 5px; width: 71px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #mfPreviewBar a#mfPreviewBarLogo { background-image: url("/s/images/webfont_preview_bar/logo@2x.png"); } } #mfPreviewBar a#mfPreviewBarLearn { color: #fff; font-size: 14px; margin: 0px 20px; padding: 0; text-decoration: none; } #mfPreviewBar a#mfPreviewBarClose { border: 2px solid #005492; border-radius: 14px; color: #005492; font-family: 'mfPreviewClose'; font-size: 24px; height: 24px; line-height: 24px; position: absolute; top: 17px; right: 17px; text-align: center; text-decoration: none; width: 24px; } #mfPreviewBar a#mfPreviewBarClose:hover { border-color: #04284C; color: #04284C; } #mfPreviewBar.expired, #mfPreviewBar.pvlimit, #mfPreviewBar.nflimit, #mfPreviewBar.invalidkey { background: #FFDC73; color: #444; } #mfPreviewBar.expired span#mfPreviewBarText, #mfPreviewBar.pvlimit span#mfPreviewBarText, #mfPreviewBar.nflimit span#mfPreviewBarText, #mfPreviewBar.invalidkey span#mfPreviewBarText { height: 38px; line-height: 19px; } #mfPreviewBar.expired a#mfPreviewBarLogo, #mfPreviewBar.pvlimit a#mfPreviewBarLogo, #mfPreviewBar.nflimit a#mfPreviewBarLogo, #mfPreviewBar.invalidkey a#mfPreviewBarLogo { background-image: url("/s/images/webfont_preview_bar/logo_dark.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #mfPreviewBar.expired a#mfPreviewBarLogo, #mfPreviewBar.pvlimit a#mfPreviewBarLogo, #mfPreviewBar.nflimit a#mfPreviewBarLogo, #mfPreviewBar.invalidkey a#mfPreviewBarLogo { background-image: url("/s/images/webfont_preview_bar/logo_dark@2x.png"); } } #mfPreviewBar.expired a#mfPreviewBarLearn, #mfPreviewBar.pvlimit a#mfPreviewBarLearn, #mfPreviewBar.nflimit a#mfPreviewBarLearn, #mfPreviewBar.invalidkey a#mfPreviewBarLearn { color: #444; } #mfPreviewBar.expired a#mfPreviewBarClose, #mfPreviewBar.pvlimit a#mfPreviewBarClose, #mfPreviewBar.nflimit a#mfPreviewBarClose, #mfPreviewBar.invalidkey a#mfPreviewBarClose { display: none; } #mfPreviewBar.adContent { background: rgba(255, 255, 255, 0.75); border: 1px solid #000; color: #000; position: absolute; top: 50%; left: 50%; width: 150px; height: 280px; margin-left: -75px; margin-top: -140px; text-align: center; line-height: 32px; } #mfPreviewBar.adContent span#mfPreviewBarText { font-size: 23px; margin: 15px 0; } #mfPreviewBar.adContent a#mfPreviewBarLogo { background-image: url("/s/images/webfont_preview_bar/logo_dark.png"); display: inline-block; float: none; margin: 18px 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #mfPreviewBar.adContent a#mfPreviewBarLogo { background-image: url("/s/images/webfont_preview_bar/logo_dark@2x.png"); } } #mfPreviewBar.adContent a#mfPreviewBarClose { border: none; color: #000; top: 5px; right: 5px; } @media (min-width: 300px) { #mfPreviewBar.adContent { width: 280px; height: 140px; margin-left: -140px; margin-top: -70px; } #mfPreviewBar.adContent span#mfPreviewBarText { font-size: 23px; } #mfPreviewBar.adContent a#mfPreviewBarLogo { margin: 10px 0; } } @media (min-width: 600px) { #mfPreviewBar.adContent { width: 570px; margin-left: -295px; height: 35px; padding: 20px 0 20px 20px; text-align: left; } #mfPreviewBar.adContent a#mfPreviewBarLogo { display: block; float: left; margin: 0 5px 0 0; } } /* Old modal stuff - could be recycled elsewhere // Overlay #mfPreviewOverlay { background: #444; background: rgba(0,0,0,0.3); position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index:1000; } // Modal #mfPreviewModal { background: #fff; box-sizing: content-box; color: #444; font-family: "mfPreviewBar", Helvetica, Arial, sans-serif; height: 120px; padding: 40px 50px; position: fixed; top: 50%; left: 50%; margin-top: -105px; margin-left: -225px; text-align: left; width: 470px; * { box-sizing: content-box; } label { display: inline; float: none; margin: 0; padding: 0; width: 300px; } #mfPreviewModalClose { color: #444; font-family: 'mfPreviewClose'; position: absolute; top: 5px; right: 10px; text-decoration: none; } #mfPreviewModalHead { font-size: 24px; margin-bottom: 20px; } .mfPreviewButton { margin-top: 20px; } #mfPreviewModalConfirm { margin-left: 0px; } } */ 

.wfStatus_style { font-style: bold; } .wfStatus_style_container { padding-bottom: 6px; } 

#webfont_tracking_tree ul { background-color: #FFFFFF; list-style: disc outside none; padding: 5px 5px 5px 20px; } 

.webfont_usage_wrapper { width: 939px; clear: both; } .webfont_usage_wrapper h3 { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; margin-bottom: 20px; margin-top: 20px; font-size: 18px; } .webfont_usage_wrapper .subtext { color: #848484; font-size: 14px; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .webfont_usage_wrapper .subtext strong { color: #4a4a4a; } .webfont_usage_usagerowheader { padding-top: 14px; background-color: white; font-weight: bold; padding-left: 5px; } .webfont_usage_usagerow { background-color: #f4f4f4; border-top: 4px solid white; padding: 6px; clear: both; } .webfont_usage_fontname { float: left; width: 300px; border: solid 0px red; } .webfont_usage_urls { float: left; width: 200px; } .webfont_usage_pvstats { float: left; width: 400px; border: solid 0px red; } .webfont_usage_buymore { float: right; margin-top: 0px; text-align: right; border: solid 0px red; } .webfont_usage_buymore .pageViews, .webfont_usage_buymore .payAsYouGoPageViews { float: left; } .webfont_usage_buymore .license_upgrade_button { padding: 10px 25px 9px; margin: 0; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } .webfont_usage_buymore .license-quantity-placeholder { margin-right: 10px; } .webfont_usage_buymore .custom-select .dropdown { left: -139px; } .webfont_usage_buymore .expand_details { display: inline-block; margin-right: 10px; } .webfont_usage_details { border-top: 1px solid #bbb; display: none; margin-top: 8px; } .expanded .webfont_usage_details { display: block; } .webfont_build_container { margin-bottom: 15px; position: relative; } .webfont_build_container.red:before, .webfont_build_container.orange:before { height: 15px; width: 15px; border-radius: 50%; content: "!"; position: absolute; top: -7px; left: -7px; color: #fff; text-align: center; line-height: 14px; font-size: 14px; } .webfont_build_container.red:before, .webfont_build_container.red .meter > span { background-color: #FC381D; } .webfont_build_container.orange:before, .webfont_build_container.orange .meter > span { background-color: #F7A35D; } .webfont_build_container.green:before, .webfont_build_container.green .meter > span { background-color: #7CD346; } .webfont_build_container .meter { height: 5px; background-color: #DCDCDC; } .webfont_build_container .meter > span { display: block; height: 100%; } .webfont_build_row { background: #f4f4f4; padding: 10px 15px; } .webfont_build_row h2, .webfont_build_row h3, .webfont_build_row h4 { margin-bottom: 0; } .webfont_build_row h4 { font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; color: #4a4a4a; float: left; font-size: 16px; font-weight: normal; } .webfont_build_row .mls-logo { width: 27px; height: 27px; background-size: 27px 27px; margin-right: 10px; } .webfont_build_row .flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; } .webfont_build_row .flex .webfont_usage_buymore { margin-left: auto; } .webfont_build_row .fltleftpacklist { margin-right: 10px; } .webfont_self_hosted .webfont_build_row { margin-bottom: 15px; padding: 20px 15px; } .webfont_build_row .webfont_build_pvstats { overflow: auto; width: 100%; } .webfont_build_row .webfont_build_pvstats h4 { color: #444; float: left; width: 290px; } .webfont_build_row .webfont_build_pvstats .progressbar { float: left; width: 400px; } .usagelabel { float: right; } .webfont_build_row .webfont_build_domains { border-top: 1px solid #ccc; margin-top: 5px; padding-top: 8px; list-style: none; font-size: 12px; line-height: 16px; } .notforsale { margin-top: 10px; } .webfont_usage_buymore a:hover { text-decoration: none; } .webfont_usage_clearfloat { clear: both; } .webfont_usage_usagerow .webfont_usage_fontname { margin-top: 0; font-size: 16px; } .webfont_usage_usagerow .foundryname { margin-top: 0; font-size: 10px; } .webfont_usage_usagerow .webfont_usage_urls { margin-top: 10px; } .webfont_usage_usagerow .webfont_usage_pvstats { margin-top: 5px; } .webfont_usage_wrapper h2 { margin-top: 25px; } .greybtn { background-color: #cccccc; color: #000000; width: 70px; border-color: #e9e9e9 #686868 #2e2e2e #dadada; } .ui-progressbar { position: relative; } .pblabel { position: absolute; width: 100%; text-align: center; line-height: 1.9em; } .ui-progressbar.beginning .ui-progressbar-value { border-right: 0; background: url("/s/images/progressbars/webusegeprogressbar.png") no-repeat left center; } .ui-progressbar.beginning2x .ui-progressbar-value { border-right: 0; background-size: 398px 28px; background: url("/s/images/progressbars/webusegeprogressbar@2x.png") no-repeat left center; } .adjustForm input[type="text"] { width: 80px; } .adjustForm { margin-top: -3px; } .adjustSuccess { width: 150px; float: right; margin-right: 50px; } .adjustError { width: 150px; float: right; margin-right: 30px; color: red; } 

#what_is_skyfonts { color: #444; text-align: center; } #what_is_skyfonts h1 { font-size: 53px; margin: 0.575em 0 0.25em; } #what_is_skyfonts p { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 27px; line-height: 35px; margin: 1em; } #what_is_skyfonts p:first-of-type { margin-top: 0; } #what_is_skyfonts .foundry_button { font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 17px; letter-spacing: 1px; padding: 13px 26px; } #what_is_skyfonts #skyfonts_banner_one { background: url("/s/images/what_is_skyfonts/skyfonts_banner_one.png") center center no-repeat; height: 208px; margin: 0 auto; padding: 50px 0; position: relative; width: 894px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #what_is_skyfonts #skyfonts_banner_one { background-image: url("/s/images/what_is_skyfonts/skyfonts_banner_one@2x.png"); background-size: 894px 208px; } } #what_is_skyfonts #skyfonts_banner_one .a_icon { opacity: 0; position: absolute; transition: all 300ms ease-in-out; } #what_is_skyfonts #skyfonts_banner_one #a_left { background: url("/s/images/what_is_skyfonts/a_left.png") center center no-repeat; height: 41px; width: 41px; top: 112px; left: 106px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #what_is_skyfonts #skyfonts_banner_one #a_left { background-image: url("/s/images/what_is_skyfonts/a_left@2x.png"); background-size: 41px 41px; } } #what_is_skyfonts #skyfonts_banner_one #a_center { background: url("/s/images/what_is_skyfonts/a_center.png") center center no-repeat; height: 46px; width: 46px; top: 110px; left: 442px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #what_is_skyfonts #skyfonts_banner_one #a_center { background-image: url("/s/images/what_is_skyfonts/a_center@2x.png"); background-size: 46px 46px; } } #what_is_skyfonts #skyfonts_banner_one #a_right { background: url("/s/images/what_is_skyfonts/a_right.png") center center no-repeat; height: 37px; width: 37px; top: 118px; left: 764px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #what_is_skyfonts #skyfonts_banner_one #a_right { background-image: url("/s/images/what_is_skyfonts/a_right@2x.png"); background-size: 37px 37px; } } #what_is_skyfonts #skyfonts_banner_two { background: url("/s/images/what_is_skyfonts/skyfonts_banner_two.png") center center no-repeat; height: 545px; margin: 0 auto; padding: 50px 0; position: relative; width: 753px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #what_is_skyfonts #skyfonts_banner_two { background-image: url("/s/images/what_is_skyfonts/skyfonts_banner_two@2x.png"); background-size: 753px 545px; } } #what_is_skyfonts #skyfonts_banner_two .sync_icon { position: absolute; } #what_is_skyfonts #skyfonts_banner_two #sync_left { background: url("/s/images/what_is_skyfonts/sync_left.png") center center no-repeat; height: 84px; width: 84px; top: 321px; left: 117px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #what_is_skyfonts #skyfonts_banner_two #sync_left { background-image: url("/s/images/what_is_skyfonts/sync_left@2x.png"); background-size: 84px 84px; } } #what_is_skyfonts #skyfonts_banner_two #sync_right { background: url("/s/images/what_is_skyfonts/sync_right.png") center center no-repeat; height: 65px; width: 65px; top: 322px; left: 551px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { #what_is_skyfonts #skyfonts_banner_two #sync_right { background-image: url("/s/images/what_is_skyfonts/sync_right@2x.png"); background-size: 65px 65px; } } :root * > #what_is_skyfonts #skyfonts_banner_one .a_icon { margin-top: -40px; } 

#whatsnew_widget .header { float: left; margin-bottom: 12px; } #whatsnew_widget h3.subtitle { color: #666666; font-size: 11pt; font-weight: bold; margin-bottom: 1pt; margin-left: 10px; margin-top: 0px; } #whatsnew_widget #searchfilter_widget { float: right; width: 535px; margin-right: 192px; } .bhvr_whats_new_191 { background: none; border: none; font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 15px; } .bhvr_whats_new_191 > span { font-size: 13px; } .subhead { font-size: 16px; font-weight: normal; margin-left: 10px; margin-bottom: 4px; margin-top: 8px; float: right; } select#whatsnewtime { margin-right: 1px; -webkit-appearance: initial; border: 0; background: url("/s/images/searchfilter/downarrow.png") center no-repeat; background-position: right 7px top 6px; font-family: "rooneysans-medium"; font-size: 16px; width: 160px; margin-left: 5px; } @media only screen and (max-device-width: 414px) and (min-device-width: 320px) and (orientation: portrait), only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { .subhead { float: left; margin: 10px 5px; } } 

.wtf_grid .main_column { width: 615px; } .wtf_grid .side_column { width: 300px; padding-top: 16px; } .wtf_grid .carbon { height: 600px; width: 300px; } .album_headline { font-size: 14pt; } .subheading { font-size: 11pt; margin: 3px 0px 5px 0px; } .upload_div { background-color: #F1F1F1; height: 94px; } .wtf_upload_method { font-weight: bold; font-size: 11pt; line-height: 47px; vertical-align: middle; padding-left: 10px; } .wtf_attention_getting_text { font-weight: bold; font-size: 11pt; } div#wtf_progress { float: right; margin-right: 333px; margin-top: 15px; } div#main_box .left { float: left; } div#main_box .right { padding: 10px 10px 10px 25px; float: right; text-align: right; } div#arrowdiv { margin-top: 0; float: right; padding: 10px 10px 10px 20px; } img#wtf_search { margin-top: 10px; } div.char_field { margin-top: 10px; } .wtf-bundles-ad { background: url("/s/images/WhatTheFont/wtf-bundles-ad.png") no-repeat; height: 611px; display: block; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .wtf-bundles-ad { background-image: url("/s/images/WhatTheFont/wtf-bundles-ad@2x.png"); background-size: 193px 611px; } } 

 #wtf_solved_filter { float: right; padding-top: 2px; } #wtf_list_options { float: left; } #wtf_forum_index table { width: 720px; } #wtf_forum_index table tr th, #wtf_forum_index table tr td { clear: both; text-align: left; padding: 12px 6px; } #wtf_forum_index table tr th { font-weight: bold; vertical-align: bottom; } #wtf_forum_index table tr td { border-top: 1px solid #CCCCCC; vertical-align: middle; } #wtf_forum_index table.searchresults_table tr td { border-top: none; } #wtf_forum_index table tr td ul { padding: 0px; margin: 0px; } #wtf_forum_index table tr th.replies, #wtf_forum_index table tr td.replies { text-align: center; } #wtf_forum_index table tr th.img, #wtf_forum_index table tr td.img { text-align: center; padding-left: 0px; } #wtf_forum_index tr td .when_started { color: #999; font-size: smaller; } #wtf_forum_index table tr td.status { white-space: nowrap; padding-right: 0px; } #wtf_forum_index table tr td .dot { position: relative; font-size: xx-large; top: 5px; } #wtf_forum_index table tr td.status .solved_Y.dot, #wtf_forum_index table tr td.status .solved_NotFont.dot { color: #CCCCCC; } #wtf_forum_index table tr td.status .solved_N.dot { color: red; } #wtf_forum_index table tr td.status .solved_Partly.dot { color: #FFCC00; } #wtf_forum_index table a.external { color: #E58C18; } #wtf_forum_index table tr#wtf_first_row td, #wtf_forum_index table tr#wtf_last_row td { text-align: center; vertical-align: middle; padding: 0px; padding-top: 12px; } #wtf_forum_index table tr#wtf_first_row td a, #wtf_forum_index table tr#wtf_last_row td a, #wtf_forum_index table #wtf_loader { display: block; border: 1px solid #999999; background-color: #EEEEEE; padding: 24px 0px; text-align: center; font-size: larger; } #wtf_forum_index table tr#wtf_first_row td a:hover, #wtf_forum_index table tr#wtf_last_row td a:hover, #wtf_forum_index table #wtf_first_row:hover { background-color: white; } #wtf_search_input { width: 110px; } #wtf_search_submit { font-size: smaller; } #wtf_stats_box ul li { padding-top: 6px; } div#wtf_newthread_block { margin-top: 24px; } div.form_row { margin: 12px 0px 36px 0px; padding: 5px 0px 5px 0px; overflow: hidden; } div.form_row div { } .form_row .left_col { clear: left; float: left; width: 80px; text-align: right; } .form_row .mid_col { width: 355px; float: left; margin-left: 12px; } .form_row .mid_col input.text { width: 355px; } .form_row .right_col { width: 240px; float: left; margin-left: 12px; } div.styleSelect { border: 1px solid #000000; padding: 3px; background-color: #FFFFAA; opacity: .85; } 

#wtf_right_column { position: relative; width: 245px; float: right; margin-left: 12px; z-index: 20; } #wtf_status_field { float: left; padding: 4px; padding-left: 0px; } #wtf_change_status, #wtf_close_status_menu { float: left; padding: 4px; } div.wtf_status { float: left; padding: 4px; } #wtf_change_status_menu { float: left; } #wtf_change_status_menu .wtf_status { margin-left: 4px; } div.wtf_status a, div.wtf_status a:hover { text-decoration: none; color: black; } div.wtf_status.part_solved, div.wtf_in_post_id span.similar { background-color: #FFCC00; } div.wtf_status.unsolved, div.wtf_status.unsolved a { background-color: #CC3333; color: white; } div.wtf_status.solved, div.wtf_in_post_id span.exact { background-color: #33CC33; } div.wtf_status.not_font, div.wtf_status.not_font a { background-color: #999999; color: white; } #wtf_image { clear: left; padding: 12px 0px; } #wtf_image img { border: 1px solid #999999; } #wtf_posted_by { position: relative; height: 55px; } div.wtf_user_avatar { position: absolute; top: 0; left: 0; } div.wtf_forum_post:not(:first-child) { clear: left; margin-bottom: 12px; border-bottom: 1px solid #CCC; padding-bottom: 12px; position: relative; } div.wtf_forum_post h3 { padding-top: 12px; padding-bottom: 12px; } div.wtf_forum_post .msg_body { padding-top: 6px; } div.wtf_in_post_id span.status { padding: 4px; } div.wtf_message_meta { margin-top: 12px; } div.wtf_forum_time_ago { color: #b4b4b4; font-size: 7pt; } div.wtf_message_admin { float: right; font-size: 7pt; } div.wtf_forum_post form { text-align: right; } div.wtf_forum_post form textarea { width: 100%; margin-bottom: 4px; } div.wtf_forum_post form input.cancel_button { font-size: smaller; } div.wtf_forum_post form input.submit_button { font-size: larger; } div#wtf_font_ids { margin-top: 10px; background-color: #f5f5f5; padding: 12px; } div.wtf_idfont { margin-top: 10px; border-top: solid 1px #CCCCCC; padding-top: 10px; } div.wtf_idfont .identified_by { font-size: smaller; } div.wtf_id_links { font-size: smaller; margin-top: 6px; } div.wtf_id_links .disputed { color: #990000; } .wtf_dispute_form { padding: 5px; } .wtf_dispute_form textarea { width: 100%; height: 36px; } .wtf_dispute_form .dispute_submit { text-align: right; } form.wtf_change_sample_text { width: 300px; } div.wtf_id_links form.wtf_change_sample_text { display: none; } form.wtf_change_sample_text div { margin-bottom: 6px; } form.wtf_change_sample_text input.size_select { width: 2em; } form.wtf_change_sample_text input.text_select { width: 12em; } a.dispute { font-size: smaller; } #wtf_identify_header { margin: 0px; padding: 0px; } #wtf_identify_header div.wtf_check_float { float: left; padding: 6px 12px; margin-right: 24px; } #wtf_identify_header div.wtf_check_float.on { background-color: #F0F0F0; } #wtf_identify_table .required { color: #CC3333; } #wtf_identify_table { position: relative; clear: left; margin: 0px; padding: 0px; border-style: none; background-color: #F0F0F0; width: 100%; } #wtf_identify_table td { font-size: smaller; padding: 6px; } #wtf_identify_table td.label { text-align: right; white-space: nowrap; } #wtf_identify_table td input { width: 98%; } #wtf_identify_table td.required_note { text-align: right; vertical-align: bottom; font-size: xx-small; } #wtf_additional_comment { margin-top: 12px; } #wtf_reply_form textarea { width: 100%; margin: 6px 0px; border-style: inset; border-width: 2px; border-color: #666666; } #wtf_stylelist_popup { position: absolute; border: 2px solid black; padding: 12px; background-color: white; z-index: 200; } #wtf_popup_img { float: right; padding-left: 6px; padding-bottom: 6px; } #wtf_style_list { height: 400px; overflow: auto; border: 1px solid gray; } #wtf_style_list ul li { margin-top: 12px; } #wtf_search_input { width: 110px; } #wtf_search_submit { font-size: smaller; } 

.newcase_warning { color: red; } 

#wtf_iphone_page .two_column_layout .side_column .autobox div { margin-top: 6px; } #wtf_iphone__content img { position: relative; top: -1px; float: right; width: 240px; height: 512px; margin-left: 12px; } #wtf_iphone_screenshots_content div.screenshot_box { float: left; width: 322px; margin-right: 24px; margin-bottom: 24px; } #wtf_iphone_screenshots_content div.screenshot_box.sideways { width: 720px; } #wtf_iphone_screenshots_content img { margin-top: 6px; border: 1px solid black; width: 320; height: 460; } #wtf_iphone_screenshots_content img.sideways { border-style: none; width: 742px; height: 386px; } ul#wtf_support_main_list li { clear: both; margin-bottom: 12px; } ul#wtf_support_main_list li:before { content: "\25B8\0020"; } ul#wtf_support_main_list li.active:before { content: "\25BE\0020"; } ul#wtf_support_main_list li em { text-decoration: underline; font-weight: bold; font-style: normal; } ul#wtf_support_main_list li p, ul#wtf_support_main_list li ul { font-size: inherit; display: none; padding-left: 1em; } ul#wtf_support_main_list li p img { float: right; margin-left: 12px; } ul#wtf_support_main_list li.active p, ul#wtf_support_main_list li.active ul { display: inherit; } ul#wtf_support_main_list li ul li { clear: none; margin-bottom: 0px; } ul#wtf_support_main_list li ul li:before { content: "\2022\0020"; } 

@-webkit-keyframes slide-right { 0% { opacity: 0; -moz-transform: translateX(-100px); -o-transform: translateX(-100px); -ms-transform: translateX(-100px); -webkit-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slide-right { 0% { opacity: 0; -moz-transform: translateX(-100px); -o-transform: translateX(-100px); -ms-transform: translateX(-100px); -webkit-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slide-right { 0% { opacity: 0; -moz-transform: translateX(-100px); -o-transform: translateX(-100px); -ms-transform: translateX(-100px); -webkit-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slide-right { 0% { opacity: 0; -moz-transform: translateX(-100px); -o-transform: translateX(-100px); -ms-transform: translateX(-100px); -webkit-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slide-left { 0% { opacity: 0; -moz-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slide-left { 0% { opacity: 0; -moz-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slide-left { 0% { opacity: 0; -moz-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slide-left { 0% { opacity: 0; -moz-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); -webkit-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } .carousel { position: relative; overflow: hidden; white-space: nowrap; font-size: 0; margin-bottom: 20px; } .carousel li { float: none; display: inline-block; transition: all .5s ease-in-out; margin-right: 15px; } .carousel li:first-child { margin-left: -800px; margin-right: 0; } @media screen and (max-width: 900px) { .carousel li:first-child { margin-left: -600px; } } @media screen and (max-width: 600px) { .carousel li:first-child { margin-left: -400px; } } .carousel li img { width: 800px; height: 400px; } @media screen and (max-width: 900px) { .carousel li img { width: 600px; height: 300px; } } @media screen and (max-width: 600px) { .carousel li img { width: 400px; height: 200px; } } .carousel .next, .carousel .previous { width: 34px; height: 64px; position: absolute; top: calc(50% - 32px); cursor: pointer; } @media screen and (max-width: 900px) { .carousel .next, .carousel .previous { width: 26px; height: 48px; top: calc(50% - 26px); } } @media screen and (max-width: 600px) { .carousel .next, .carousel .previous { width: 17px; height: 32px; top: calc(50% - 17px); } } .carousel .next { left: calc(100% - 32px); background: transparent url(/s/images/sub_discovery/carousel-right.png) 0 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .carousel .next { background-image: url("/s/images/sub_discovery/carousel-right@2x.png"); background-size: 32px 64px; } } @media screen and (max-width: 900px) { .carousel .next { left: calc(100% - 26px); background: transparent url(/s/images/sub_discovery/carousel-right.png) 0 0/26px 48px no-repeat; } } @media only screen and (max-width: 900px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 900px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 900px) and (min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min-resolution: 144dpi), only screen and (max-width: 900px) and (min-resolution: 2dppx) { .carousel .next { background-image: url("/s/images/sub_discovery/carousel-right@2x.png"); background-size: "26px 48px"; } } @media screen and (max-width: 600px) { .carousel .next { left: calc(100% - 17px); background: transparent url(/s/images/sub_discovery/carousel-right.png) 0 0/17px 32px no-repeat; } } @media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 600px) and (min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 144dpi), only screen and (max-width: 600px) and (min-resolution: 2dppx) { .carousel .next { background-image: url("/s/images/sub_discovery/carousel-right@2x.png"); background-size: "17px 32px"; } } .carousel .previous { background: transparent url(/s/images/sub_discovery/carousel-left.png) -1px 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .carousel .previous { background-image: url("/s/images/sub_discovery/carousel-left@2x.png"); background-size: 32px 64px; } } @media screen and (max-width: 900px) { .carousel .previous { background: transparent url(/s/images/sub_discovery/carousel-left.png) -1px 0/26px 48px no-repeat; } } @media only screen and (max-width: 900px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 900px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 900px) and (min-device-pixel-ratio: 2), only screen and (max-width: 900px) and (min-resolution: 144dpi), only screen and (max-width: 900px) and (min-resolution: 2dppx) { .carousel .previous { background-image: url("/s/images/sub_discovery/carousel-left@2x.png"); background-size: "26px 48px"; } } @media screen and (max-width: 600px) { .carousel .previous { background: transparent url(/s/images/sub_discovery/carousel-left.png) -1px 0/17px 32px no-repeat; } } @media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 600px) and (min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 144dpi), only screen and (max-width: 600px) and (min-resolution: 2dppx) { .carousel .previous { background-image: url("/s/images/sub_discovery/carousel-left@2x.png"); background-size: "17px 32px"; } } .wtf-mobile { margin: 0 -10px -30px; text-align: center; } @media screen and (min-width: 768px) { .wtf-mobile { margin: 0 -20px -30px; } } @media screen and (min-width: 1200px) { .wtf-mobile { margin: 0 -2% -30px; margin: 0 calc(-2% - 1px) -30px; } } .wtf-mobile h1 { font-size: 18px; line-height: 23px; font-family: "RooneySans-Bold", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; } @media screen and (min-width: 550px) { .wtf-mobile h1 { font-size: 32px; line-height: 40px; } } .wtf-mobile .carousel { margin-bottom: 0; } .wtf-mobile .slice--grey { background-color: #F5F4F3; } .wtf-mobile .slice__content { padding: 17px 10px; } @media screen and (min-width: 550px) { .wtf-mobile .slice__content { padding: 50px 15px; } } .wtf-mobile .slice__content--small { max-width: 750px; margin: 0 auto; } .wtf-mobile .slice:nth-child(1) .slice__content { padding: 25px 15px 0 15px; } @media screen and (min-width: 600px) { .wtf-mobile .flex-container { display: flex; align-items: center; } } @media screen and (min-width: 600px) { .wtf-mobile .flex-container > div:nth-child(1) { width: 50%; justify-content: flex-start; display: flex; } } .wtf-mobile .flex-container > div:nth-child(2) { text-align: center; } @media screen and (min-width: 600px) { .wtf-mobile .flex-container > div:nth-child(2) { width: 50%; text-align: left; } } .wtf-mobile .margin--bottom { margin-bottom: 20px; } @media screen and (min-width: 550px) { .wtf-mobile .margin--bottom { margin-bottom: 40px; } } .wtf-mobile .margin--auto { margin-left: auto; margin-right: auto; } .wtf-mobile .margin--right { margin-right: 40px; } .wtf-mobile .is-hidden { visibility: hidden; } .icon__wtf { background: transparent url(/s/images/WhatTheFont/wtf-icon.png) 0 0 no-repeat; width: 160px; height: 160px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .icon__wtf { background-image: url("/s/images/WhatTheFont/wtf-icon@2x.png"); background-size: 160px 160px; } } .icon__wtf--borderless { background: transparent url(/s/images/WhatTheFont/wtf-icon-borderless.png) 0 0 no-repeat; width: 60px; height: 57px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .icon__wtf--borderless { background-image: url("/s/images/WhatTheFont/wtf-icon-borderless@2x.png"); background-size: 60px 57px; } } .badge__apple { background: transparent url(/s/images/badges/apple-app-badge.svg) 0 0 no-repeat; width: 135px; height: 40px; display: inline-block; } .badge__google { background: transparent url(/s/images/badges/google-play-badge.png) 0 0 no-repeat; width: 160px; height: 51px; display: inline-block; background-size: cover; } .wtf-video-container { position: relative; background: transparent url(/s/images/WhatTheFont/iphone.png) 0 0 no-repeat; background-size: 275px 470px; width: 275px; height: 470px; margin: 0 auto; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .wtf-video-container { background-image: url("/s/images/WhatTheFont/iphone@2x.png"); background-size: 275px 470px; } } .wtf-video { position: absolute; width: 190px; top: 50px; left: 40px; } .timeline { position: relative; background: transparent url(/s/images/WhatTheFont/blue-path.png) 0 0 no-repeat; margin: 0 auto; background-position: 7% 54px; height: 733px; width: 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .timeline { background-image: url("/s/images/WhatTheFont/blue-path@2x.png"); background-size: 174px 643px; } } @media screen and (min-width: 550px) { .timeline { height: 1400px; background-position: 15% 54px; } } @media only screen and (min-width: 550px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 550px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 550px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-width: 550px) and (min-device-pixel-ratio: 2), only screen and (min-width: 550px) and (min-resolution: 144dpi), only screen and (min-width: 550px) and (min-resolution: 2dppx) { .timeline { background-image: url("/s/images/WhatTheFont/blue-path@2x.png"); background-size: 328px 1191px; } } @media screen and (min-width: 1030px) { .timeline { width: 900px; background-position: 332px 54px; } } .timeline__block { position: relative; } .timeline__block:nth-child(1) .timeline__content { left: -40px; top: 82px; } @media screen and (max-width: 550px) { .timeline__block:nth-child(1) .timeline__content, .timeline__block:nth-child(1) .timeline__icon { top: 49px; } } .timeline__block:nth-child(2) .timeline__content { top: 166px; left: 616px; } @media screen and (max-width: 550px) { .timeline__block:nth-child(2) .timeline__content, .timeline__block:nth-child(2) .timeline__icon { top: 89px; } } .timeline__block:nth-child(3) .timeline__content { top: 246px; left: 113px; } @media screen and (max-width: 550px) { .timeline__block:nth-child(3) .timeline__content, .timeline__block:nth-child(3) .timeline__icon { top: 129px; } } .timeline__block:nth-child(4) .timeline__content { top: 310px; left: 617px; } @media screen and (max-width: 550px) { .timeline__block:nth-child(4) .timeline__content, .timeline__block:nth-child(4) .timeline__icon { top: 169px; } } .timeline__block:nth-child(5) .timeline__content { top: 376px; left: 87px; } @media screen and (max-width: 550px) { .timeline__block:nth-child(5) .timeline__content, .timeline__block:nth-child(5) .timeline__icon { top: 209px; } } .timeline__block:nth-child(6) .timeline__content { top: 476px; left: 618px; } @media screen and (max-width: 550px) { .timeline__block:nth-child(6) .timeline__content, .timeline__block:nth-child(6) .timeline__icon { top: 249px; } } @media screen and (min-width: 768px) { .timeline__block:nth-child(odd) .timeline__icon.bounce-in { -webkit-animation: slide-right 0.6s; -moz-animation: slide-right 0.6s; -ms-animation: slide-right 0.6s; -o-animation: slide-right 0.6s; animation: slide-right 0.6s; } .timeline__block:nth-child(even) .timeline__icon.bounce-in { -webkit-animation: slide-left 0.6s; -moz-animation: slide-left 0.6s; -ms-animation: slide-left 0.6s; -o-animation: slide-left 0.6s; animation: slide-left 0.6s; } } @media screen and (max-width: 1030px) { .timeline__block:nth-child(n) .timeline__content { left: 55%; max-width: 263px; } } @media screen and (max-width: 550px) { .timeline__block:nth-child(n) .timeline__content { max-width: 115px; } } .timeline__content { background-color: #F5F4F3; border-radius: 3px; padding: 12px 18px; display: inline-block; position: absolute; } @media screen and (min-width: 768px) { .timeline__content--left.bounce-in { -webkit-animation: slide-right 0.6s; -moz-animation: slide-right 0.6s; -ms-animation: slide-right 0.6s; -o-animation: slide-right 0.6s; animation: slide-right 0.6s; } } .timeline__content--left:after { content: ''; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 10px solid #F5F4F3; position: absolute; right: -10px; top: 13px; } @media screen and (max-width: 1030px) { .timeline__content--left:after { content: none; } } @media screen and (min-width: 768px) { .timeline__content--right.bounce-in { -webkit-animation: slide-left 0.6s; -moz-animation: slide-left 0.6s; -ms-animation: slide-left 0.6s; -o-animation: slide-left 0.6s; animation: slide-left 0.6s; } } .timeline__content--right:after { content: ''; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 10px solid #F5F4F3; position: absolute; left: -10px; top: 13px; } @media screen and (max-width: 1030px) { .timeline__content--right:after { content: none; } } .timeline__text { position: relative; } .timeline__icon { background-color: #F5F4F3; width: 80px; height: 80px; border-radius: 50%; position: relative; left: 12%; } .timeline__icon--tap { background-image: url(/s/images/WhatTheFont/icon-tap.png); top: 39px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .timeline__icon--tap { background-image: url("/s/images/WhatTheFont/icon-tap@2x.png"); background-size: 80px 80px; } } .timeline__icon--multiple { background-image: url(/s/images/WhatTheFont/icon-multiple.png); top: 115px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .timeline__icon--multiple { background-image: url("/s/images/WhatTheFont/icon-multiple@2x.png"); background-size: 80px 80px; } } .timeline__icon--scripts { background-image: url(/s/images/WhatTheFont/icon-scripts.png); top: 190px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .timeline__icon--scripts { background-image: url("/s/images/WhatTheFont/icon-scripts@2x.png"); background-size: 80px 80px; } } .timeline__icon--enter { background-image: url(/s/images/WhatTheFont/icon-enter.png); top: 256px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .timeline__icon--enter { background-image: url("/s/images/WhatTheFont/icon-enter@2x.png"); background-size: 80px 80px; } } .timeline__icon--ai { background-image: url(/s/images/WhatTheFont/icon-ai.png); top: 320px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .timeline__icon--ai { background-image: url("/s/images/WhatTheFont/icon-ai@2x.png"); background-size: 80px 80px; } } .timeline__icon--fast { background-image: url(/s/images/WhatTheFont/icon-fast.png); top: 422px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 2dppx) { .timeline__icon--fast { background-image: url("/s/images/WhatTheFont/icon-fast@2x.png"); background-size: 80px 80px; } } @media screen and (min-width: 550px) { .timeline__icon { width: 150px; height: 150px; background-size: 150px 150px; left: 15%; } } @media screen and (min-width: 1030px) { .timeline__icon { left: 380px; } } @media screen and (min-width: 768px) { .timeline__content.bounce-in, .timeline__icon.bounce-in { visibility: visible; } } #wtf_iphone_page .two_column_layout .side_column .autobox div { margin-top: 6px; } #wtf_iphone__content img { position: relative; top: -1px; float: right; width: 240px; height: 512px; margin-left: 12px; } #wtf_iphone_screenshots_content div.screenshot_box { float: left; width: 322px; margin-right: 24px; margin-bottom: 24px; } #wtf_iphone_screenshots_content div.screenshot_box.sideways { width: 720px; } #wtf_iphone_screenshots_content img { margin-top: 6px; border: 1px solid black; width: 320; height: 460; } #wtf_iphone_screenshots_content img.sideways { border-style: none; width: 742px; height: 386px; } ul#wtf_support_main_list li { clear: both; margin-bottom: 12px; } ul#wtf_support_main_list li:before { content: "\25B8\0020"; } ul#wtf_support_main_list li.active:before { content: "\25BE\0020"; } ul#wtf_support_main_list li em { text-decoration: underline; font-weight: bold; font-style: normal; } ul#wtf_support_main_list li p, ul#wtf_support_main_list li ul { font-size: inherit; display: none; padding-left: 1em; } ul#wtf_support_main_list li p img { float: right; margin-left: 12px; } ul#wtf_support_main_list li.active p, ul#wtf_support_main_list li.active ul { display: inherit; } ul#wtf_support_main_list li ul li { clear: none; margin-bottom: 0px; } ul#wtf_support_main_list li ul li:before { content: "\2022\0020"; } 

#wtfpage_view_options ul li { margin-top: 12px; }