* { 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; } form.inplaceeditor-form { display: inline; } body { position: relative; font-family: "RooneySans-Regular", "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; } 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; } .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 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; } .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; } .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: #666666; background-color: white; z-index: 500; } 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: 11px; color: black; text-align: left; line-height: 1.2em; } 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; } #popup_box .close_x { position: absolute; right: 3px; top: 3px; } #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 { 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].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.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@2x.png'); -moz-background-size:125px 32px; -ie-background-size:125px 32px; -o-background-size:125px 32px; -webkit-background-size:125px 32px; background-size:125px 32px; } } .licensetypesm-web { background-position:0px 0; } .licensetypesm-server { background-position:-25px 0; } .licensetypesm-epub { background-position:-50px 0; } .licensetypesm-desktop, .licensetypesm-library_subscription { background-position:-75px 0; } .licensetypesm-app { background-position: -100px 0; } .license-printview { margin: 11px; } /************************************* * 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; } .mls-logo { display: inline-block; width: 65px; height: 65px; background: transparent url('/s/images/logo/MLS-icon.png') 50% 50% no-repeat; } .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: 18px; margin-bottom: 2px; } .mls-slice p { padding:0 0 15px; } .mls-slice .mls-logo { margin: 3px 14px 0 0; float: left; } @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-logo { background-image: url('/s/images/logo/MLS-icon@2x.png'); background-size: 65px; } } 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::-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; } } 

#fontCards { box-sizing: border-box; width: 100%; } .flexbox #fontCards { display: -webkit-box; display: -webkit-flex; display: flex; display: -ms-flexbox; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #fontCards * { box-sizing: border-box; } #fontCards .col1, #fontCards .col2 { width: 100%; margin: 0; } #fontCards #fontCardTemplate { display: none; } #fontCards .fontCard { background: #fff; border: 1px solid #eee; padding: 12px 15px 15px 15px; width: 100%; margin: 0 auto 20px auto; box-shadow: 0 1px 1px -1px #ddd; } #fontCards .floaty { float: left; } #fontCards .fcTitle { font-size: 20px; padding-bottom: 0; width: 100%; } #fontCards .fcReason1 { padding: 10px 0 10px 45px; background-repeat: no-repeat; background-position: left center; background-size: 30px; color: #333; position: relative; } #fontCards .fontCard.newFont .fcReason1 { padding: 0; } #fontCards .newFont .fcReason1:before, #fontCards .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; } #fontCards .newFont .fcReason1:before { background-color: #0090ff; content: "NEW"; } #fontCards .promotion .fcReason1 { clear: left; } #fontCards .promotion .fcReason1:before { background-color: #ff00c8; content: "SALE"; } #fontCards .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; } #fontCards .fontCard .fcReason1 span { margin-left: 5px; font-family: "RooneySans-Regular", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; font-size: 12px; vertical-align: middle; } #fontCards .fontCard.hotNewFonts .fcReason1 span { margin-left: 0; vertical-align: super; } #fontCards .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; } #fontCards .fontCard.hotNewFonts .fcReason1 { background: none; padding: 6px 0 0 0; font-size: 11px; top: -1px; } #fontCards .fontCard.hotNewFonts .fcReason1 .fcHnfRank { 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; width: 30px; padding-top: 4px; margin-top: -5px; } #fontCards .fontCard.select .fcReason1 { padding: 6px 0 0 0; } #fontCards .fcReason2 { padding: 0; font-size: 12px; height: 21px; line-height: 21px; color: #333; } #fontCards .fcUpperLeft { width: 75%; } #fontCards .fcUpperRight { width: 25%; } #fontCards .fcUpperBtns { float: right; width: 100%; } #fontCards .fcUpperBtns .follow.fcbtn { display: none; } #fontCards .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; } #fontCards .fcUpperBtns div.selected .favorite { background-image: url("/s/images/font_cards/favorite_md_selected.png"); } #fontCards .fcUpperBtns > li > div > a.follow:hover { background: #ddd; text-decoration: none; } #fontCards .fcUpperBtns > li > div > a.favorite:hover { background-image: url("/s/images/font_cards/favorite_md_selected.png"); } #fontCards .fcUpperBtns > li { position: relative; float: none; } #fontCards .fcUpperBtns > li > div > a { float: right; margin-bottom: 8px; } #fontCards .fcUpperBtns .albumList { display: none; } #fontCards .fcUpperBtns .albumList a { display: block; padding: 6px 10px; color: #555; } #fontCards .fcUpperBtns .albumList a:hover { display: block; text-decoration: none; background: #eee; } #fontCards .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; } #fontCards .fontCard.foundry .fcUpperBtns .follow { display: inline-block; float: none; width: 85px; height: 30px; font-size: 16px; } #fontCards .fcPriceInfo { clear: right; text-align: right; display: none; font-size: 12px; } #fontCards .album_dropdown { display: none; } #fontCards .fcbtn { display: block; padding: 5px 6px; border-radius: 3px; background-color: #eee; color: #444; font-size: 14px; margin: 0; height: 28px; } #fontCards .fontCard.font .fcUpperBtns > li.foundryOnly { display: none; } #fontCards .fontCard.foundry .fcUpperBtns > li.fontOnly { display: none; } #fontCards .fcLowerImage img { display: block; width: 100%; margin: 0 auto; } #fontCards .fontCard.foundry .fcLowerImage img { max-height: 140px; } #fontCards .fcLowerFndryExp { margin-top: 4px; } #fontCards .fcLowerFndryExp a { width: 22%; margin-right: 4%; float: left; } #fontCards .fcLowerFndryExp a img { display: block; width: 100%; } #fontCards .fcLowerOpt { margin-top: 10px; display: block; font-size: 12px; } #fontCards .fontCard.following .fcLowerOpt { display: none; } #fontCards .fcRecChoice { display: inline-block; padding: 1px 5px 3px 5px; margin-left: 0; border-radius: 3px; border: 1px solid #fff; background: #fff; -webkit-transition: border 0.25s ease-in-out; -moz-transition: border 0.25s ease-in-out; -ms-transition: border 0.25s ease-in-out; -o-transition: border 0.25s ease-in-out; transition: border 0.25s ease-in-out; } #fontCards .fcRecChoice.selected, #fontCards .fcRecChoice:hover { border: 1px solid #09f; text-decoration: none; } #fontCards .fcTitle, #fontCards .fcReason1 { width: 100%; float: left; text-align: center; margin-bottom: 5px; } #fontCards .fcReason1, #fontCards .fcReason2 { width: initial; text-align: left; position: relative; padding: 0; } #fontCards .newFont .fcReason1:before, #fontCards .promotion .fcReason1:before { height: 16px; font-size: 12px; margin-right: 5px; } #fontCards .select .fcReason1:before { margin-right: 5px; } #fontCards .fcReason1 span { display: none; } #fontCards .fcButtonWrapper { float: right; text-align: center; } #fontCards button.add_to_album_toggle_client.only { padding: 5px 11px; height: 28px; } #fontCards button.add_to_album_toggle_client.only span { font-size: 13px; line-height: normal; margin-right: 2px; } #fontCards .fontCard.foundry { position: relative; padding: 27px 11px 22px 11px; } #fontCards .fontCard.foundry .fcReason1, #fontCards .fontCard.foundry .fcReason2 { display: none; } #fontCards .fontCard.foundry .fcButtonWrapper { float: none; } #fontCards .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-left: 0; float: none; margin-top: 10px; } #fontCards .fontCard.foundry .fcTitle { display: none; } #fontCards .fontCard.foundry .fcUpper { margin-bottom: 24px; } #fontCards .fcLowerFndryExp a:nth-child(4) { margin-right: 0; } #fontCards .fcLowerFndryExp a:nth-child(5) img, #fontCards .fcLowerFndryExp a:nth-child(6) img { display: none; } .fcUpper.clearfix { margin-bottom: 10px; } /* removed until Recommendations release -> make this not use an image #fontCards .fontCard.recommended .fcReason1 { background-image: url("/s/images/font_cards/reason_recommend.png"); background-size: 20px; } */ .ie #fontCards .fcUpperRight { display: block; width: 35%; } .ie #fontCards .fcUpperLeft { width: 65%; } .ie #fontCards .fcTitle { font-size: 24px; } @media screen and (min-width: 450px) { #fontCards .fcUpperRight { display: block; width: 35%; } #fontCards .promotion .fcReason1 { padding: 0; } #fontCards .fcUpperBtns > li { position: relative; float: right; margin-left: 8px; } #fontCards .fcUpperBtns > li > div > a { margin-bottom: 0; float: none; } #fontCards .fcUpperLeft { width: 65%; } #fontCards .fcLowerOpt { font-size: 14px; } #fontCards .fcRecChoice { margin-left: 10px; } } @media screen and (min-width: 768px) { #fontCards .fcPriceInfo, #fontCards .album_dropdown { display: block; } #fontCards .fontCard .fcReason1 { margin-bottom: 0; } #fontCards .fontCard.select .fcReason1 { padding: 0; } #fontCards .fontCard.newFont .fcReason1 { padding: 6px 0 0 0; } #fontCards .fcReason1 span { display: inline-block; } #fontCards .fontCard { margin: 0 20px 10px 0; } #fontCards .fontCard .fcUpperBot > div { display: inline-block; } #fontCards .fontCard .fcReason1, #fontCards .fontCard .fcReason2 { float: left; text-align: left; width: initial; height: initial; line-height: initial; } #fontCards .fontCard .fcPriceInfo { display: inline-block; float: right; } #fontCards .fontCard .fcUpperBot { padding-top: 36px; } #fontCards .fcTitle { width: 65%; text-align: left; } #fontCards .fontCard.foundry { padding-top: 50px; } #fontCards .fontCard.foundry .fcButtonWrapper { float: right; position: absolute; top: 10px; right: 15px; } #fontCards .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-left: 8px; float: right; margin-top: 6px; } #fontCards .fontCard.foundry .fcUpperBtns .follow { font-size: 13px; width: 73px; height: 26px; } #fontCards .fontCard.foundry .fcUpper { margin-bottom: 30px; } #fontCards .fcReason1 { clear: both; margin-top: -3px; } #fontCards .fontCard.hotNewFonts .fcReason1, #fontCards .fontCard.newFont .fcReason1 { padding: 0; } #fontCards .newFont .fcReason1:before, #fontCards .promotion .fcReason1:before, #fontCards .select .fcReason1:before { margin-right: 0; } #fontCards .fontCard .fcReason1 span, #fontCards .newFont .fcReason1:before, #fontCards .promotion .fcReason1:before, #fontCards .select .fcReason1:before { vertical-align: middle; } } @media (min-width: 450px) and (max-width: 767px) { #fontCards .col1, #fontCards .col2 { width: 425px; margin: 0 auto; } #fontCards .fontCard { border: 1px solid #eee; } } @media screen and (min-width: 900px) { #fontCards .fcTitle { font-size: 18px; } } @media screen and (min-width: 1050px) { #fontCards .fontCard { margin: 0 20px 20px 0; } } @media screen and (min-width: 1100px) { #fontCards .fcLowerFndryExp a:nth-child(5) img { display: inherit; } #fontCards .fcLowerFndryExp a:nth-child(4) { margin-right: 1%; } #fontCards .fcLowerFndryExp a:nth-child(5) { margin-right: 0; } #fontCards .fcTitle { font-size: 20px; } #fontCards .fontCard .fcReason1 span, #fontCards .fontCard.hotNewFonts .fcReason1, #fontCards .fontCard .fcReason2 { font-size: 14px; } #fontCards .fontCard .fcReason1 span, #fontCards .newFont .fcReason1:before, #fontCards .promotion .fcReason1:before, #fontCards .select .fcReason1:before { vertical-align: bottom; } #fontCards .bestSeller .fcReason1 span { vertical-align: middle; } #fontCards .fontCard.hotNewFonts .fcReason1 { top: -2px; } #fontCards .fontCard.foundry .fcUpperBtns .follow { font-size: 16px; width: 89px; height: 32px; } #fontCards .fcPriceInfo { font-size: 14px; } } @media screen and (min-width: 1350px) { #fontCards .fcLowerFndryExp a:nth-child(6) img { display: inherit; } #fontCards .fcLowerFndryExp a:nth-child(4), #fontCards .fcLowerFndryExp a:nth-child(5) { margin-right: 2%; } #fontCards .fcLowerFndryExp a:nth-child(6) { margin-right: 0; } #fontCards .fcLowerFndryExp a { width: 15%; margin-right: 2%; } } @media screen and (min-width: 1984px) { .flexbox #fontCards .col1, #fontCards .col2 { width: 49.3%; } .flexbox #fontCards .col1 { 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) { #fontCards .fontCard { width: 100%; margin: 0 0 16px 0; max-width: none; border: none; border-top: 1px solid #eee; } #fontCards .fontCard.font { padding: 0; } #fontCards .fontCard.font .fcUpper { padding: 14px 8px 0 8px; } #fontCards .fontCard.font .fcLower { padding-bottom: 9px; } #fontCards .fontCard.foundry .fcTitle { display: none; } #fontCards .fontCard.bestSeller .fcReason1 { clear: none; } #fontCards .fontCard.hotNewFonts .fcReason1 { line-height: 20px; } #fontCards .col1, #fontCards .col2 { width: 100%; margin: 0; max-width: none; } } @media only screen and (max-device-width: 736px) and (min-device-width: 320px) and (orientation: landscape) { #fontCards .fontCard.foundry .fcUpper { margin-bottom: 30px; } #fontCards .fontCard.foundry .fcUpperBtns li.foundryOnly { margin-top: 20px; } #fontCards .fcLowerFndryExp { width: 69%; margin: 0 auto; } #fontCards .fcLowerFndryExp a:nth-child(4) { margin-right: 2%; } #fontCards .fcLowerFndryExp a:nth-child(5) { margin-right: 0; } #fontCards .fcLowerFndryExp a:nth-child(5) img { display: inherit; } #fontCards .fcLowerFndryExp a { width: 18%; margin-right: 2%; } #fontCards .fontCard.font .fcUpper { padding: 14px 16px 0 16px; } #fontCards .fontCard.font .fcLowerImage img { padding: 0 16px 14px 16px; } #fontCards .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) { #fontCards .fcUpperBtns .favorite { background-image: url("/s/images/font_cards/favorite_md@2x.png"); } .no-touch #fontCards .fcUpperBtns .favorite:hover, #fontCards .fcUpperBtns div.selected .favorite { background-image: url("/s/images/font_cards/favorite_md_selected@2x.png"); } #fontCards .fontCard.bestSeller .fcReason1 { background: transparent url("/s/images/iconsets/myfonts/badge_star@2x.png") no-repeat; background-size: 20px; background-position: 0 -1px; } #fontCards .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; } 

@-webkit-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-ms-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 { position: relative; width: 100%; } #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; -webkit-transition: border-color 200ms ease-in-out, color 200ms ease-in-out; -moz-transition: border-color 200ms ease-in-out, color 200ms ease-in-out; -ms-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; 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; float: left; min-height: 50px; position: relative; } #responsiveHomepage .sidebar { min-height: 50px; width: 100%; max-width: 425px; margin: 0 auto; } #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; -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; -o-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; -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; -o-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; -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; 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; -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; 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; } .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 .main_column { padding-left: 33.5%; } #responsiveHomepage .sidebar#sidebarLeft { width: 33.5%; padding-right: 1.7%; display: block; position: absolute; left: 0; } #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; } #responsiveHomepage .sidebar#sidebarLeft { max-width: 425px; } #responsiveHomepage .sidebar#sidebarRight { width: 19%; display: block; padding-left: 10px; } } @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-touch #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 .main_column { padding-left: 425px; } } @media screen and (min-width: 1984px) { #responsiveHomepage #content { width: 100%; max-width: none; } #responsiveHomepage .main_column { padding-left: 425px; } #responsiveHomepage .sidebar#sidebarLeft { padding-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; } } 

#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-transition: left 200ms ease-in-out, transform 200ms ease-in-out; -moz-transition: left 200ms ease-in-out, transform 200ms ease-in-out; -ms-transition: left 200ms ease-in-out, transform 200ms ease-in-out; -o-transition: left 200ms ease-in-out, transform 200ms ease-in-out; transition: left 200ms ease-in-out, transform 200ms ease-in-out; -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; -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; 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; max-width: 125px; overflow: hidden; text-align: right; vertical-align: middle; } #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: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 .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 { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #headerLogin a { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #headerSearchForm { clear: none; display: block; float: left; margin: 22px 20px 0 0; width: 400px; } #headerSearchForm #searchBox { box-sizing: border-box; height: 37px; line-height: 20px; width: 100%; border-color: #d5d5d5; vertical-align: middle; } #headerSearchForm #searchBox:focus { border-color: #09f; } #headerSearchForm #searchButton { height: 37px; margin: 0 0; padding: 1px 7px 1px; width: 100%; border-color: #111; box-shadow: none; box-sizing: border-box; vertical-align: middle; } #headerSearchForm #searchButton:hover { border-color: #09f; } #headerSearchForm .searchBoxInput { float: none; width: auto; overflow: hidden; } #headerSearchForm .searchBoxGo { width: 38px; float: right; margin-left: 3px; } #headerSearchForm #searchBoxFilter { position: relative; padding: 8px 5px 2px 10px; border-radius: 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; height: 37px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; } #headerSearchForm #searchBoxFilter div:hover { cursor: pointer; } #headerSearchForm #searchBoxFilter .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; } #headerSearchForm #searchBoxFilter .hidden { display: none; } #headerSearchForm #searchBoxFilter .dropdown_holder { position: absolute; left: 0; top: 103%; background: #FFFFFF; border: 1px solid #ACACAC; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); } #headerSearchForm #searchBoxFilter .dropdown_holder ul { text-align: left; } #headerSearchForm #searchBoxFilter .dropdown_holder ul li { padding: 1em 1.5em 1em 1.2em; box-sizing: border-box; } #headerSearchForm #searchBoxFilter .dropdown_holder ul li:hover { background: #EEE; } #headerSearchForm #searchBoxFilter .dropdown_holder ul li:not(:last-child) { border-bottom: 1px solid #F4F4F4; } #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; } #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; } #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: 180px; z-index: 101; -webkit-transition: left 200ms ease-in-out; -moz-transition: left 200ms ease-in-out; -ms-transition: left 200ms ease-in-out; -o-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; } .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; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -ms-transition: opacity 500ms; -o-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 #headerSearchForm { clear: both; float: none; margin: 0 auto; position: relative; top: 8px; height: auto; } #myfontsContainer.fluid #headerSearchForm #searchBox { box-sizing: border-box; height: 37px; line-height: 20px; width: 100%; } #myfontsContainer.fluid #headerSearchForm #searchButton { height: 37px; margin: 0 0; padding: 1px 7px 1px; width: 100%; } #myfontsContainer.fluid #headerSearchForm .searchBoxInput { float: none; width: auto; overflow: hidden; } #myfontsContainer.fluid #headerSearchForm .searchBoxGo { width: 38px; float: right; margin-left: 3px; } #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-touch #myfontsContainer.fluid #headerNav { display: block; text-align: center; width: 100%; margin-bottom: 10px; } .no-touch #myfontsContainer.fluid #headerNav a { font-size: 13px; margin: 0 12px 0 0; } .no-touch #myfontsContainer.fluid #headerNav .navMenu nav { left: -50px; } .no-touch #myfontsContainer.fluid #headerNavMobile { display: none; } .no-touch #myfontsContainer.fluid #headerSearchForm { width: 539px; left: -5px; } #myfontsContainer.fluid #myfontsHeader { height: 53px; padding: 0; } #myfontsContainer.respHomepage #myfontsHeader, #myfontsContainer.fluid #myfontsHeader.fixHeader { height: 53px; padding: 0 0 10px 10px; } #myfontsContainer.fluid #headerSearchForm { width: 425px; left: -5px; } #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 (min-width: 550px) { .no-touch #myfontsContainer.fluid #mobileHeaderSearchForm { margin-left: 0; width: initial; } } @media screen and (max-width: 599px) { #myfontsContainer.fluid #headerSearchForm { text-align: center; width: 425px; } } @media screen and (max-width: 767px) { #myfontsContainer.fluid #headerLogin { top: 10px; line-height: 0; } } @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 #headerSearchForm { clear: none; display: block; float: left; margin: 8px 20px 0 0; top: 0; width: 400px; } #myfontsContainer.fluid #headerSearchForm #searchBox { line-height: 20px; } #myfontsContainer.fluid #headerLogin { top: 1px; right: -65px; } #myfontsContainer.fluid #headerLogin a#headerLoginLink { top: 10px; } #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: 1em; } #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; } #myfontsContainer.fluid #headerSearchForm { margin: 22px 35px 0 0; } #myfontsContainer.fluid #headerSearchForm #searchBox { line-height: 24px; } } @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.fluid #headerSearchForm { margin-right: 40px; } } footer#mainFooter { border-top: 1px solid #ddd; color: #555; font-size: 13px; margin: 30px auto 0; padding: 30px 0; text-align: center; width: 939px; clear: both; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } footer#mainFooter nav.links { width: 100%; max-width: 810px; margin: 0 auto; } footer#mainFooter nav.links a { color: #555; padding: 13px; display: inline-block; } footer#mainFooter nav.links a:hover { color: #222; } footer#mainFooter nav.social { display: table; margin: 20px auto; width: 300px; } footer#mainFooter nav.social a { color: #ddd; display: table-cell; font-family: "Social-Network-Icons"; font-size: 28px; font-weight: normal; text-decoration: none; -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; transition: color 200ms ease-in-out; } footer#mainFooter nav.social a:hover { color: #aaa; } #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: 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) { #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 #headerSearchForm { width: 100%; } #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 #mobileHeaderSearchForm { float: left; } #myfontsContainer.fluid #headerSearchForm { width: 100%; } #myfontsContainer.fluid #headerSearchForm #searchBox { width: 76%; } #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; } } 

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 { } 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: rgb(0,0,0); } 

 #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; } .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'); } } 

#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; } } 

#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; } }