html{ -webkit-text-size-adjust: none; } img{ border:none; } .viewport_no_horizontal_scroll{ overflow: hidden; /* when sidebar menu is showing in small. Menu scrolls in its own element */ } input{font-size:14px;} textarea{font-size:14px;} #small input{font-size:16px;} #small textarea{font-size:17px;} input[type="search"]::-webkit-search-cancel-button{ display: none; } /* CSS for textarea that auto-rezies its height with input. Also needs JS*/ .expanding_area { position: relative; background: white; border: solid 2px lightgray; border-radius: 2px; } .expanding_area.focus, .expanding_area:hover{ border-color: #b3c1f7; } .expanding_area textarea, .expanding_area pre { /* first reset */ margin: 0; padding: 0; outline: 0; border: 0; box-sizing: border-box; white-space: pre-wrap; word-wrap: break-word; background: transparent; /* width, padding, line-height, font, font-size must be the same for textarea and pre */ /* Oerwritten further down */ width:100%; padding: 2px; font-family: 'open sans'; } #not_small #mob .expanding_area textarea, #not_small #mob .expanding_area pre { font-size:14px; line-height:26px; } #not_small #not_mob .expanding_area textarea, #not_small #not_mob .expanding_area pre { font-size:15px; line-height:26px; } #small .expanding_area textarea, #small .expanding_area pre { font-size:17px; line-height:26px; } .expanding_area textarea { width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; resize: none; } .expanding_area pre { display: block; visibility: hidden; } .expanding_area span::after{ content: attr(ta_repl); /* explained in js resize_expanding_ta() */ } #not_small .not_small_popup_menu{ background: white; position: fixed; top: 50px; left: 30%; min-height: 100px; margin-left: -3px; padding-bottom: 15px; text-align:left; z-index:950; box-shadow:2px 2px 10px black } #not_small .not_small_popup_menu .not_small_menu_scroll{ height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior-block: contain; } #not_small div.ui-datepicker { font-size: 16.5px; /* if change, also change in js set_datepicker_style_android() */ } #small div.ui-datepicker { font-size: 18px; /* if change, also change in js set_datepicker_style_android() */ } /* The checkbox container */ .cb_container { display: block; position: relative; padding-left: 35px; /* shift label text past the box to the right */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #recipe_u .cb_container{ margin-top: 4px; } #ingreds_shopping_list_div .cb_container{ display:inline-block; margin-bottom:15px; padding-left: 24px; } #ingreds_shopping_list_div #sl_check_allnone_wrapper.cb_container{ display:inline-block; margin-bottom:10px; padding-left:30px; } #mealplan #copy_move_div .cb_container, #mealplan #showimage_div .cb_container { width: 60px; /* prevent contents overflowing if device font is bigger */ overflow: hidden; white-space: nowrap; height:0px; padding:17px 0; } #mealplan .mp_more_trigger_label{ overflow: hidden; white-space: nowrap; height: 0px; padding: 17px 0; line-height:0; white-space: nowrap; word-wrap:break-word; float: left; margin-left: 8px; } #mealplan #showimage_div .cb_container { padding-left:20px; /* shift text over */ } #mealplan .mp_more_option_showimage .cb_container { padding-left:24px; /* shift text over */ } /* Hide the browser's default checkbox */ .cb_container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .cb_container .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: white; border:1px solid lightgray; } .cb_container.smaller .checkmark { height: 14px; width: 14px; } #mealplan #showimage_div .cb_container .checkmark{ top:9px; margin-left:2px; } #mealplan .mp_more_option_showimage .cb_container .checkmark{ top:11px; margin-left:2px; } /* When the checkbox is checked, add a colored background */ .cb_container input:checked ~ .checkmark { background-color: #8e9396; } /* On mouse-over, add indicator */ #not_mob .cb_container:hover input ~ .checkmark { border:1px solid black; } /* Create the checkmark/indicator (hidden when not checked) */ .cb_container .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .cb_container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .cb_container .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; /* color of checkmark */ border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .cb_container.smaller .checkmark:after { left: 4px; top: 0px; width: 5px; height: 9px; border-width: 0 2px 2px 0; } /* Create a custom checkbox. Version without input element*/ #recipe_u .cb_cont { display: block; position: relative; padding-left: 35px; cursor: pointer; height: 22px; margin-top:4px; } #recipe_u .cb_cont .checkmark { position: absolute; top: 0; left: 0; height: 19px; width: 18px; border:1px solid #5e6163; border-radius: 2px; } /* checked, is default */ #recipe_u .cb_cont .checkmark { background-color: #8e9396; } /* unchecked */ #recipe_u .not_ingred .cb_cont .checkmark, #recipe_u .not_step .cb_cont .checkmark, #recipe_u .not_note .cb_cont .checkmark { background-color: white; } /* On mouse-over, add indicator */ #not_mob #recipe_u .cb_cont:hover .checkmark { border:1px black solid; box-shadow:#999999 0px 1px 2px; } /* Style the checkmark/indicator */ #recipe_u .cb_cont .checkmark .tick{ position:absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; /* color of checkmark */ border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* The radio button container */ .radio_container { display: inline-block; float: left; position: relative; padding: 17px 0px 17px 20px; line-height:0; white-space: nowrap; word-wrap:break-word; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .radio_container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */ .radio_container .checkmark{ position: absolute; top: 0; left: 0; height: 15px; width: 15px; background-color: white; border-radius: 50%; border:1px solid #8e9396; } #not_small #mealplan .radio_container{ margin: 0 4px 0 4px; } #small #mealplan .radio_container{ margin: 0 2px 0 2px; } #mealplan .radio_container .checkmark{ top:8px; } /* On mouse-over, add indicator */ #not_mob .radio_container:hover input ~ .checkmark { border:1px solid black; } /* Create the indicator (the dot/circle - hidden when not checked) */ .radio_container .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .radio_container input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .radio_container .checkmark:after { top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: #8e9396; } body { color: black; -webkit-tap-highlight-color:transparent; font-family: 'open sans', verdana, arial; font-size: 15px; line-height: 23px; /* text selection turned where relevant (recipe text, shopping list )*/ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } input[type="search"], input[type="text"], input[type="submit"]{ -webkit-appearance: none; border-radius: 0; -webkit-border-radius:0; } html.nopagescroll, body.nopagescroll{ /* added in meal_plan js mobile */ height:100%; overflow:hidden; } html.nopage_y_scroll, body.nopage_y_scroll{ /* added in meal_plan js non mobile */ height:100%; overflow-y:hidden; overflow-x:auto; } .selectable { -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } .textcopy_div.withcss .trigger_textcopy{ height:40px; line-height:40px; width:150px; border:1px gray solid; border-radius:4px; text-align:center; margin-top:5px; curor:pointer; } .textcopy_div.withcss .textcopy_inner_div{ position:relative;height:30px;margin-top:5px; } .textcopy_div.withcss .textcopy_input{ height:10px;width:10px;color:white; } .textcopy_div.withcss .copytext_success, .textcopy_div.withcss .copytext_intitial{ position:absolute;height:100%;width:100%;top:0;left:0;line-height:30px;color:#CC003F; } .textcopy_div.withcss .spacer{ position:absolute;height:100%;width:100%;background:white;top:0;left:0; } body, #recipes, #recipes_shared, #recipe, #recipe_u{ background:#eef2f4; } @media screen and (min-width : 1025px){ body#not_small{margin:0px;padding: 0px 0px;} } @media screen and (max-width : 1024px){ body#not_small{margin:0px;padding: 0px 0px;min-width:100%;} } body#small{ font-size:17px; line-height: 24.6px; margin:0; padding:0; } /* use mobile (instead of using max-width) to prevent font suddenly changing on laptop as screen becomes smaller */ #not_small #mob #info, #not_small #mob #button_mobile{ font-size:17px; line-height: 24.6px; } #recipes .ui-priority-secondary, #recipes .ui-widget-content .ui-priority-secondary, #recipes .ui-widget-header .ui-priority-secondary, #recipe .ui-priority-secondary, #recipe .ui-widget-content .ui-priority-secondary, #recipe .ui-widget-header .ui-priority-secondary, #ui-datepicker-div .ui-priority-secondary, #ui-datepicker-div .ui-widget-content .ui-priority-secondary, #ui-datepicker-div .ui-widget-header .ui-priority-secondary{ /* the dates from the other months. Also "today" button so that's changed below. */ opacity:.5; } #ui-datepicker-div button.ui-datepicker-current, #ui-datepicker-div .ui-widget-content button.ui-priority-secondary {font-size:14px; opacity: .9; font-weight: bold; } #ui-datepicker-div button.ui-datepicker-close {font-size:14px; opacity: 1; font-weight: bold; } .tap_opacity{ /* added/removed by js when tap to divs with js_button_opacity */ opacity: 0.6; } .hover_opacity{ /* added/removed by js on hover to divs with js_button_opacity */ opacity: 0.9; } #header_navis_wrapper{ margin:0 0px; position: relative; height:50px; background:#A80739; width:100%; min-width:580px; } @media screen and (min-width : 1025px){ #header_navis{ width:980px; margin:0 auto; } } @media screen and (max-width : 1024px){ #header_navis{ width:100%; } } .header_navi_not_logged_in{ cursor: pointer; height:50px; line-height:50px; padding:0px; font-family: arial; width:580px; margin:0 auto; text-align: center; } .header_navi_not_logged_in:hover{ background:#CC003F; } .header_navi_not_logged_in_a{ display:block; color:white; text-decoration:none; font-size:16px; font-weight:bold; margin:0px 5px; } .header_navi, .header_navi_chosen{ float: left; cursor: pointer; height:1px; /* small necessary to prevent "new recipe" from falling down on narrow screen when "more" menu opens. */ padding:0px; font-family: arial; } .header_navi_first{margin-left:3px;} .header_navi_a{ padding: 13px 14px; display:block; color:white; text-decoration:none; font-size:14px; font-weight:bold; margin:0px 5px; line-height:24px; height:24px; } @media only screen and (max-width : 620px) /*also account for scroobar width*/ { .header_navi_a{ padding: 13px 10px; } } .header_navi_chosen .header_navi_a, .header_navi:hover .header_navi_a { color:white; background: #CC0C47; -webkit-transition: background 100ms ease-out; -moz-transition: background 100ms ease-out; -ms-transition: background 100ms ease-out; -o-transition: background 100ms ease-out; transition: background 100ms ease-out; } .header_navi_right{float:right;margin-right:13px;} .submenu_wrapper{ border: 1px solid gray; margin:0; padding:2px 3px 5px 3px; background:white; position:relative; z-index:100; } .submenu_option{ list-style:none; padding:0px; } .submenu_option_first{ border-top:solid white 2px; } .submenu_option li{ list-style:none; padding:0px; background:white; text-align:left; overflow:hidden; } .submenu_option_a{ list-style:none; color:rgb(79, 79, 79); font-weight:bold; text-decoration:none; display: block; width:100%; background:white; height: 42px; line-height:42px; border-bottom: 1px gray solid; font-size:14px; font-family: arial; box-sizing: border-box; padding-left: 5px; padding-right: 5px; font-size:14px; } .submenu_option_a_chosen, .submenu_option a:hover{ color:#CC003F; } .submenu_option a:hover{ background:lightgray; } #small .navi_back_button{ margin-top:7px; margin-right:10px; margin-left:3px; height:28px; padding:14px 0; line-height:0px; display:inline-block; float:left; background:white; font-size:14px; width:110px; background:#F2F2F2; text-align:center; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } #small .navi_back_symbol { font-size: 28px; vertical-align: middle; position: relative; margin-top: -9px; display: inline-block; } #small .more_navi_label{ display: table-cell; vertical-align: middle;height:32px;cursor:pointer;} .more_navi_option_wrapper {padding-top:3px;overflow:hidden;clear:both;} #small #small_main_navi{ background: white; height:44px; /* overflow:hidden hides share menu */ } #not_small #recipes #content_top, #not_small #recipes_shared #content_top{ margin-top:10px; } #outer, #recipes #results_set, #recipes_shared #results_set, #recipes #content_top, #recipes_shared #content_top{ position:relative; margin-left:auto; margin-right:auto; text-align:left; } #mealplan #outer{ position:static; } #recipes #results_set, #recipes_shared #results_set, #recipes #content_top, #recipes_shared #content_top{ text-align:center;/* centers recipes */ } @media screen and (min-width : 1000px){ #outer, #recipes #content_top, #recipes_shared #content_top{ width:980px; } } #recipe_u #outer{ max-width:940px; } #recipe #outer{ max-width:940px; } @media screen and (max-width : 1000px){ #outer, #recipes #results_set, #recipes_shared #results_set, #recipes #content_top, #recipes_shared #content_top{ width:100%; } #not_small #outer, #not_small #recipes #results_set, #not_small #recipes_shared #results_set, #not_small #recipes #content_top, #not_small #recipes_shared #content_top{ min-width:580px; } } @media screen and (max-width : 1000px){ #recipes #outer.mp_quickview #results_set{ min-width:300px; /* not used. was to be for split my recipes view */ } } #small #outer{ width:100%; overflow:hidden; box-sizing:border-box; } #s_side_menu{ width:250px; /* must match left_for_side_menu */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:300; /* Necessary because of #small #mealplan #navi issue. Also to sit on top of small_navi_menu_overlay */ } @media screen and (min-width : 360px){ #s_side_menu{ width:280px; } } @media screen and (min-width : 375px){ #s_side_menu { width:295px; } } @media screen and (min-width : 411px){ #s_side_menu { width:330px; } } #s_side_menu_inner{ overflow-y:scroll; height:100%; } #s_side_menu .button_href{ text-decoration:none; } .s_side_menu_login_signup_button{ height: 32px; line-height:32px; margin-top:6px; width:180px; margin-left:14px; background:#CC0C47; border-radius:3px; text-align:center; border:solid #C1C1C1 1px; } .s_side_menu_button{ border-top:#881539 solid 1px; line-height:44px; vertical-align:middle; padding-left:4px; background: #A80739; color: white; font-size: 17px; padding: 12px 0 12px 20px; line-height: 20px; } .s_side_menu_button.clicked{ background:#881539; } .s_side_menu_button_main{ font-weight:bold; } .s_side_menu_button_inactive{ color:#C1C1C1; /* when not logged in */ } #small #home #outer{ padding: 4px; } .footer{ color:rgb(82, 82, 82); font-size:15px; margin-top:27px; margin-bottom:45px; text-align: center; } .footer { -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } .footer a{ color:rgb(82, 82, 82); text-decoration:None; } .footer a:hover{ text-decoration:underline; } #small .footer{ margin-bottom:10px; } #not_small .home_page_content{ max-width:980px; background:white; margin:0 auto; text-align:center; padding-top:25px; padding-bottom:52px; width:100%; } #small .home_page_content{ max-width: 980px; width: 100%; background: white; margin: 0 auto; text-align: center; padding-top: 10px; padding-bottom:52px; } .content{ position:relative; background: white; min-height:500px; overflow:visible; /* was this so tag serach list could extend down and past?? */ text-align:left; background: transparent; padding-top: 5px; } #small .content{ padding:0px 0px 30px 0px; background: white;} #content_inner{ background:white; overflow:hidden; text-align:left; padding: 0 50px 30px 50px; min-height:450px; } @media screen and (max-width : 600px){ #content_inner{ padding: 0 20px 30px 20px; } } #small #content_inner{ padding:0 10px 30px 10px; } #full_page_overlay, #all_overlay, #main_content_overlay, #small_navi_menu_overlay{ display:none; /* tried to just make it height:0 always, but caused issues on different devices */ } #full_page_overlay.transparent_glass, #full_page_overlay.clear_glass, #all_overlay.transparent_glass, #all_overlay.clear_glass, #main_content_overlay.transparent_glass, #main_content_overlay.clear_glass, #main_content_overlay.thick_transparent_glass{ display:block; /* tried to just make it height:0 always, but caused issues on different devices */ } @media print{ #full_page_overlay, #all_overlay, #main_content_overlay{ display:none; } } #small #small_navi_menu_overlay.showing{ position: absolute; background-color: gray; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity:.6; top: 0; left: 0; width: 100%; min-height: 100%; z-index:299; /* less than s_side_menu */ display:block; } .transparent_glass{ position: absolute; background-color: white; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity:.6; top: 0; left: 0; width: 100%; min-height: 100%; z-index:900; display:block; } .clear_glass{ position: absolute; background-color: transparent; top: 0; left: 0; width: 100%; min-height: 100%; z-index:900; } .thick_transparent_glass{ position: absolute; background-color: #e5e5e5; opacity:.8; top: 0; left: 0; width: 100%; min-height: 100%; z-index:900; display:block; } .ok_button{float:right;} .hidden{display:None} .clear{clear:both;} .no_visibility{visibility:hidden} #review_ratings_container .review_ratings_button{ border:1px solid gray; height:0px; padding: 16px 10px; line-height:0px; width:90px; border-radius: 2px; cursor:pointer; } #review_ratings_container .review_ratings_button.inactive{ color:gray; } #review_ratings_container .review_ratings_button.left{ float:left; margin-left:10px; } #review_ratings_container .review_ratings_button.right{ float:right; margin-right:10px; } .generic_popup.type2{ text-align:left; font-size: 16px; } @media screen and (min-width : 600px){ .generic_popup.type2{ width:380px; } } .type2_popup_button{ margin-top: 15px; width: 120px; height: 40px; padding: 20px 0; line-height: 0; border: 1px gray solid; border-radius: 5px; cursor: pointer; text-align: center; display: inline-block; white-space: nowrap; word-wrap: break-word; box-sizing: border-box; } .type2_popup_button:hover{ background:cornsilk; } .type2_popup_button.clicked{ background:lightgray; } #view_in_app_popup{ position:fixed; bottom:0; width:100%; height:100px; background:white; box-shadow: 0px 0px 10px #333232; z-index: 1000; } #not_small #view_in_app_popup{ height:110px; } #view_in_app_popup #questionmsg{ text-align:center; margin-top:10px; color:black; font-size:17px; font-weight:bold; } #not_small #view_in_app_popup #questionmsg{ margin-top:20px; } #view_in_app_popup #questionbuttonwrapper{ margin: 10px auto 0 auto; width: 280px; xbackground: yellow; text-align: center; overflow: hidden; } #view_in_app_popup .questionbutton{ width: 100px; margin: 0 20px 0 20px; height: 40px; padding:20px 0; line-height: 0px; background: #a80739; color: white; float: left; border-radius: 5px; white-space: nowrap; word-wrap: break-word; box-sizing: border-box; overflow: hidden; } #view_in_app_popup .questionbutton.no{ color: #a80739; background: white; } #view_in_app_popup .questionyesrhref{ text-decoration:none; } #small .small_fullscreen_popup_menu{ box-sizing:border-box; overflow:hidden; overflow-y: scroll; z-index:950; background:white; position: fixed; padding-bottom:44px; /* required for app because toggle-buttons hide the bottom. must match scroll_menu_inner */ height:100%; width:100%; top:0; left:0; } #small .small_fullscreen_popup_menu table{ border-collapse: collapse; width:100%; } .menu_header{ width:100%; background:#CC0C47; color:white; font-size:19px; text-align:left; box-sizing:border-box; line-height: 44px; height:44px; overflow: hidden; } .menu_label{ display: inline-block; float: left; margin-top: 2px; height: 40px; line-height: 0px; padding: 20px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; padding-left: 10px; max-width:220px; } .menu_close_x{ display: inline-block; width: 50px; float: right; cursor: pointer; text-align: center; margin-top: 2px; height: 40px; line-height: 0px; padding: 20px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #small .edit_buttons{ background: rgb(228, 228, 228); } #recipe_edit .edit_page_button { background:#464646; color:white; display: inline-block; font-family: arial; font-size: 15px; cursor: pointer; margin: 2px 5px 0 5px; height: 38px; padding: 19px 18px; border: 1px gray solid; line-height: 0px; border-radius: 5px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #small #recipe_edit .edit_page_button { height: 40px; padding: 20px 18px; border:none; font-weight: bold; } #small #recipe_edit .edit_page_button.save, #not_small #recipe_edit .edit_page_button.save { background:green; } #not_mob #recipe_edit .edit_page_button:hover{ background:#5c5c5c; } #not_mob #recipe_edit .edit_page_button.save:hover{ background:#03a703; } #small #recipe_edit .edit_page_button.button_submitted, #not_small #recipe_edit .edit_page_button.button_submitted{ background:#a80739; } #small #recipe_edit .edit_page_button.attention, #not_small #recipe_edit .edit_page_button.attention{ background:yellow; color:#393939; } .button, .next_prev_button { color:#000; font-size: 15px; padding: 5px 18px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: white; margin:2px 5px; cursor:pointer; outline: none; } .next_prev_button{ width:80px; display:inline-block; text-decoration:none; /* element has to be div, not button because is surrounded by a href (IE cant handle a around button)*/ } #not_mob .next_prev_button:hover{ background: #a70839; color:#fff; } #mob .next_prev_button.clicked{ background: #a70839; color:#fff; } #recipe_u .delete_button_on_confirm, #recipe_u .confirm_button { float: left; color: white; font-family: arial; font-weight: bold; font-size: 15px; cursor: pointer; margin: 2px 5px 0 5px; height: 40px; padding:20px 18px; line-height: 0px; border-radius: 5px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow: hidden; } #small #recipe_u .delete_button_on_confirm, #small #recipe_u .confirm_button { max-width: 110px; /* because grows with device font-size */ } #recipe_u .delete_button_on_confirm { background:#464646; } #recipe_u .delete_button_on_confirm.clicked{ background:black; } #recipe_u .confirm_button { background:green; } #recipe_u .confirm_button.clicked { background:#005b00; } #not_mob .button:hover{ background:cornsilk;} .button:active{background:lightgray;} #mealplan .nextprev_button_wrapper{ position:relative; overflow:hidden; background:white; float:left; margin-right:3px; border:solid 1px rgb(160, 160, 160); border-radius: 2px; vertical-align:middle; text-align:center; cursor:pointer; width:38px; height:36px; padding-top: 3px; box-sizing:border-box; cursor: pointer; } #mealplan .nextprev_button_wrapper.clicked{ background:rgb(126, 126, 126); } #mealplan .calendar_action_icon{ /* uses sprite_ic */ height: 28px; width: 28px; margin: 0 auto; opacity: .7; } #not_small .navi_action_icons{ height: 44px; margin-top: 2px; margin-bottom: 2px; } #not_small #recipe .back_to_results_button, #not_small #recipe_u .back_to_results_button{ background:#b1b8bc; font-family:arial; float:left; width:170px; height:42px; padding:21px 0; line-height:0px; font-size:14px; font-weight:bold; cursor:pointer; margin: 1px 3px 0px 3px; text-align:center; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } @media screen and (max-width : 740px){ #not_small #recipe .back_to_results_button, #not_small #recipe_u .back_to_results_button{ width:110px; } } @media screen and (max-width : 670px){ #not_small #recipe .back_to_results_button, #not_small #recipe_u .back_to_results_button{ width:78px; } } @media screen and (max-width : 599px){ #not_small #recipe .back_to_results_button, #not_small #recipe_u .back_to_results_button{ width:74px; } } #small #recipe_u .back_to_results_button{ float: left; width: 60px; padding: 18px 0 22px 0; line-height:0px; text-align: center; font-size: 40px; background: #dedddd; margin-right: 10px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } #not_small #recipe .back_to_results_button .back_to_results_chevron_wrapper, #not_small #recipe_u .back_to_results_button .back_to_results_chevron_wrapper{ float:left; padding:11px 8px 0px 12px; margin-top:-20px; } @media screen and (max-width : 670px){ #not_small #recipe .back_to_results_button .back_to_results_chevron_wrapper, #not_small #recipe_u .back_to_results_button .back_to_results_chevron_wrapper{ float:left; padding:11px 2px 0px 12px; } } #small #recipe_u .back_to_results_button.clicked{ background:#848d8e; } #not_small #recipe .back_to_results_button.clicked, #not_small #recipe_u .back_to_results_button.clicked{ background:#848d8e; } #not_small #recipe .back_to_results_button span, #not_small #recipe_u .back_to_results_button span{ color:white; text-decoration:none; } #not_small #page_header{ background:white; overflow:hidden; width:100%; min-width:580px; } #not_small .page_header_inside{ width: 980px; margin: 0 auto; } @media screen and (min-width : 1025px){ #not_small .page_header_inside{ width: 980px; margin: 0 auto; } } @media screen and (max-width : 1024px){ #not_small .page_header_inside{ width: 100%; margin: 0 auto; } } #small #page_header{ /* only used when not logged in */ background:white; overflow:hidden; width:100%; } #small .page_header_inside{ width: 100%; margin: 0; } #not_small .site_category_navi_div{ float:left; height:45px; line-height:45px; } #not_small .site_category_navi{ font-family:arial; font-weight:bold; font-size:15px; color:rgb(61, 61, 61); cursor:pointer; display:inline-block; margin-right:50px; } #not_small .site_category_navi:hover{ color:#CC003F; } #not_small .site_category_navi_active{ color:#CC003F; } @media screen and (min-width : 1025px){ #not_small .site_category_navi_div{ margin-left:120px; } } @media screen and (max-width : 1024px){ #not_small .site_category_navi_div{ margin-left:40px; } } @media screen and (max-width : 880px){ .profile_links_trigger .username{ overflow:hidden; max-width:150px; } #not_small .site_category_navi{ margin-right:25px; } } @media screen and (max-width : 675px){ #not_small .site_category_navi{ margin-right:15px; } } @media screen and (max-width : 650px){ #not_small .site_category_navi_div{ margin-left:20px; } .profile_links_trigger .username{ overflow:hidden; max-width:140px; } #not_small .site_category_navi{ margin-right:20px; } } @media screen and (max-width : 630px){ #not_small .site_category_navi_div{ margin-left:15px; } .profile_links_trigger .username{ overflow:hidden; max-width:120px; } #not_small .site_category_navi{ margin-right:15px; } } #not_small .profile_image_header{ border-radius: 200px; width: 31px; margin-top: 7px; margin-right: 4px; } #not_small .main_section_navi_link{ display:inline-block; height: 45px; line-height: 45px; font-size: 18px; color: black; margin-left: 100px; cursor:pointer; text-decoration:none; } #not_small .main_section_navi_link:hover{ color:rgb(82, 82, 82); } .username{float:right; } #not_small .profile_links_trigger{ font-size:11px; font-weight:bold; float:right; height:45px; line-height:45px; cursor:pointer; color:rgb(82, 82, 82); margin-right:13px; } #not_small .profile_links_trigger:hover{ color:black; } #not_small #profile_options{ border:1px solid gray; position:absolute; top:-5px; right:3px; z-index:10; background:white; box-sizing: border-box; padding-left: 5px; padding-right: 5px; font-weight:bold; padding-bottom:5px; text-align:left; } #not_small .profile_link{ display: block; text-decoration: none; padding-left: 5px; width: 136px; min-height: 42px; line-height: 42px; margin: 0px 5px; border-bottom: 1px solid gray; color: rgb(82, 82, 82); cursor: pointer; font-size: 14px; } #not_small .profile_link:hover{ background:rgb(230, 230, 230); } #small .profile_links{ padding-right:10px; font-size:13px; font-weight:normal; float:right; } .public_recipe_header_links{ font-family: arial; float:right; font-weight:bold; text-align:right; position:absolute; top:10px; right:10px; } .public_recipe_header_link{ } .public_recipe_header_link_view_more{ color:#920732; font-size: 17px; text-decoration:none; cursor:pointer; float: right; } #small .public_recipe_header_link_view_more{ font-size: 14px; margin-top:3px; } .public_recipe_header_link_home{ text-decoration:none; cursor:pointer; color:#920732; font-size:14px; } #small .public_recipe_header_links{ top:5px;right:0; margin-right:15px; } #small .profile_links{ font-size:11px; font-weight:bold; float:right; } #small .profile_links{ padding-right:10px; font-size:13px; font-weight:normal; float:right; } #small #recipes .starred, #recipe_u .star{ /* old sprite sheet. Only star is still used so renamed to star name. */ /* is the single star, not the rating star */ background-image: url('https://cdn.copymethat.com/static/sprite_sheet_yellow_star.png?v=1'); } #small .navi_icon{ /* only still used for the burger menu icon (#small menu_navi_icon) */ background-image: url('https://cdn.copymethat.com/static/sprite_navi_32.png?v=12'); border:0; height:32px; width:32px; cursor:pointer; float:left; margin:6px 14px; margin-right:20px; } #small #menu_navi_icon{ /* uses sprite_navi_32.png */ background-position:-480px -0px; } #info_link{font-family:"Times New Roman"; font-size:18px;} .page_title{text-align:center; color:rgb(82, 82, 82); font-weight:bold; font-size:14px; margin-bottom:5px; margin-top:5px;} .page_title_small{ text-align:center; background:#920732; color:white; font-size:11px; font-family:ariel; white-space:nowrap; word-wrap:break-word; overflow:hidden; } #link_to_either_shared_or_mine{text-decoration:underline;color:gray;margin-left:3px;font-size:11px;} .light_input{ color:#aba9a9; font-family:arial; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#aba9a9; font-family:open sans, arial; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#aba9a9; opacity: 1; font-family:open sans, arial; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#aba9a9; font-family:open sans, arial; } input:focus { outline: none; } input[type="radio"]:focus-visible { /* when receive focus via tab */ outline-offset: 2px; outline: -webkit-focus-ring-color auto 1px; } #small #home .content{ padding-top:10px; background: white; } #small #home #login_box{ right:10px; padding:10px 10px 10px 10px; } #small #home .tag_line{ font-size:26px; margin-bottom:8px; } #small #home .tag_line_small{ font-size:13px; line-height:15px; margin-bottom:8px; } #small #home .main_illustration{ margin-top: 20px; margin-bottom:30px; } #small #home .main_illustration img{ width:300px; } #small #home .illustration_div { overflow:hidden; width:230px; margin:0 0 20px 0px; } #small #home .smaller_illustration { margin-top: 0px; } /* #newuser : some are with login section */ #not_app #new_user_box{ z-index:950; background:white; position:absolute; text-align:center; top:110px; border: #a1a2a3 solid 1px; width:260px; padding:32px 40px 32px 40px; margin:0 auto; left: 50%; margin-left: -171px; } #small #not_app #new_user_box{ top: 45px; width: 260px; padding: 40px 25px 40px 25px; margin-left: -156px; } @media screen and (max-height:480px) { #small #not_app #new_user_box{ top: 2px; } } #not_app #new_user_box .content{ border:None; background:transparent; } #not_app #new_user_box .or_line { width: 100%; text-align: center; border-bottom: 1px solid #9d9d9d; line-height: 2px; margin: 20px 0 20px 0; } #not_app #new_user_box .or_line span { background:#fff; padding:0 10px; color: #9d9d9d; } #not_app #new_user_box .label_div{ text-align:left; margin-top:10px; overflow: hidden; } #not_app #new_user_box #user_agreement_agree_div{ font-size:14px; margin-top:15px; text-align:center; } #not_app #new_user_box .checkbox_div{ text-align:left; } #not_app #new_user_box .checkbox_div_remember_me{ text-align:left; margin-top:5px; } #not_app #new_user_box .label{ font-family:arial, sans-serif; font-size:12px; font-weight:bold; } #small #not_app #new_user_box .label{font-size:15px;} #not_app #new_user_box .description{ font-weight:normal; font-size:12px; font-style:italic; } #small #not_app #new_user_box .description{ font-size:14px;} #not_app #new_user_box .error_msg{color:rgb(255, 0, 163); width:100%;padding:6px 3px 0px 3px;text-align:center;} #small #not_app #new_user_box .error_msg{font-size:17px;} #not_app #user_agreement_show{ text-decoration:underline;cursor:pointer} #not_app #new_user_box .cancel_button{float:right} #not_app #user_agreement_wrapper{ width: 96%; position: absolute; left: 50%; top: 55px; margin: 0 0 0 -48%; z-index: 1000; } #not_small #user_agreement{width:570px; margin:30px auto 0px auto;} #not_app #user_agreement_wrapper .info{ display: table; margin: auto; max-width:750px; background:white; border: #a1a2a3 solid 1px; padding:10px 10px 5px 10px; } #not_app #login_box{ z-index:950; background:white; position:fixed; text-align:center; top:110px; border: #a1a2a3 solid 1px; width:260px; padding:32px 40px 53px 40px; margin:0 auto; left: 50%; margin-left: -171px; } #small #not_app #login_box{ top: 45px; width: 260px; padding: 32px 25px 40px 25px; margin-left: -156px; } @media screen and (max-height:480px) { #small #not_app #login_box{ top: 2px; } } #not_app #login_box #login_button, #not_app #new_user_box #signup_button{ background:#a70839; width:260px; height:36px; line-height:36px; border-bottom:solid 5px #7d062b; border-top:solid 5px #a70839; text-align:center; margin:0 auto; color:white; font-size:17px; cursor:pointer; font-family: arial; } #not_app #new_user_box #signup_button:hover, #not_app #login_box #login_button:hover { } #not_app #login_box #login_button.login_button_clicked, #not_app #new_user_box #signup_button_clicked{ } #not_app #login_box #facebook_login, #not_app #login_box .apple_loginsignup_button, #not_app #new_user_box #facebook_signup_button{ width:220px; box-sizing: border-box; line-height:0px; padding: 20px 0; border-radius: 5px; text-align:center; margin:0 auto; color:white; font-size:17px; cursor:pointer; font-family: arial; margin:0 auto; } #not_app #login_box #facebook_login, #not_app #new_user_box #facebook_signup_button{ background:#1877F2; margin:0px auto 20px auto; } #not_app #login_box .apple_loginsignup_button{ background:black; margin:-5px auto 20px auto; } #not_app #login_box .or_line { width: 100%; text-align: center; border-bottom: 1px solid #9d9d9d; line-height: 2px; margin: 20px 0 20px 0; } #not_app #login_box .or_line span { background:#fff; padding:0 10px; color: #9d9d9d; } #not_app #login_box #login_box_x, #not_app #new_user_box #signup_box_x{ float:right; top:3px; right:3px; color:#a1a2a3; font-size:17px; font-weight:bold; cursor:pointer; padding:10px; } #user_agreement_wrapper .user_agreement_x{ float:right; top:3px; right:3px; color:#a1a2a3; font-size:17px; font-weight:bold; cursor:pointer; padding:10px; background: #dedede; border-radius: 3px; } #not_app #login_box #login_box_x, #not_app #new_user_box #signup_box_x{ position:absolute; } #not_app #login_box #login_box_x:hover, #user_agreement_wrapper .user_agreement_x:hover, #not_app #new_user_box #signup_box_x:hover{ color:black } #not_app #login_box #login_form{ margin:0px; padding:0px; } #not_app #login_box .error_msg{ text-align:left; font-family: verdana; color:rgb(255, 0, 163); font-size:12px; margin-bottom:4px; } #not_app #login_box .pw_show_hide, #not_app #new_user_box .pw_show_hide{ width: 56px; position: absolute; height: 36px; line-height: 36px; right: 0; top: 0; font-size: 13px; font-weight: bold; color: #9c9999; text-align: center; cursor:pointer; } #not_app #login_box .login_input, #not_app #new_user_box .newuser_input{ width:260px; box-sizing:border-box; height:36px; border:#9d9d9d solid 1px; font-size:16px; color:#5c5c5c; padding:0 5px 0 5px; margin:0px; } #not_app #login_box .login_input.pw_input, #not_app #new_user_box .newuser_input.pw_input{ padding-right:52px; } #not_app #login_box .input_label, #not_app #new_user_box .input_label{ color:#5c5c5c; font-size:11px; line-height:20px; height:20px; font-family: verdana; text-align:left; } #not_app #login_box #login_input_username{ margin-bottom:12px; } #not_app #login_box #login_input_password{ margin-bottom:5px; } #not_app #new_user_box input[type=checkbox]{margin-left:0px} #not_app #login_box .remember_me, #not_app #new_user_box .remember_me{ float:left; font-size:12px; font-family: verdana; color: #5c5c5c; } #not_app #login_box .forgot_password{ margin-top:10px; } #not_app #login_box .forgot_password a{ font-size:14px; font-family: verdana; color: gray; text-decoration:none; cursor:pointer; } #not_app #login_box .forgot_password a:hover{ text-decoration:underline; } #not_app #login_box .signup_link_heading, #not_app #login_box .signup_link, #not_app #new_user_box .login_link_heading, #not_app #new_user_box .login_link{ color:#5c5c5c; font-size:15px; line-height:20px; height:20px; font-family: verdana; float:left; margin-top:20px; } #not_app #login_box .signup_link , #not_app #new_user_box .login_link{ margin-left:10px; } #not_app #login_box .signup_link a, #not_app #new_user_box .login_link a{ color:#a70839; cursor:pointer; text-decoration:none; } #not_app #login_box .signup_link a:hover, #not_app #new_user_box .login_link a:hover{ text-decoration:underline; } #not_app #login_box .checkbox_fake{ margin-left:-4px; height: 15px; display: inline-block; line-height: 15px; width:15px; background-repeat: no-repeat; background-position: 0px 0px; font-size: 15px; vertical-align: middle; cursor: pointer; background-image: url('https://cdn.copymethat.com/static/page_landing/checkbox.png'); } #not_app #login_box .checkbox_fake_checked{ background-position: 0px -15px; } #app_home #login_box, #app_home #signup_box{ background:white; text-align:center; width:290px; box-sizing:border-box; padding:1px 5px 7px 5px; margin:13px auto; } @media only screen and (min-height:667px) { #app_home #login_box, #app_home #signup_box{ margin:50px auto; } } #app_home #newuserForm .pw_show_hide, #app_home #login_form .pw_show_hide{ width: 56px; position: absolute; height: 40px; line-height: 40px; right: 0; top: 0; font-size: 13px; font-weight: bold; color: #9c9999; text-align: left; } #app_home .error_msg{ text-align:left; font-family: verdana; color:rgb(255, 0, 163); font-size:14px; margin-bottom:8px; } #app_home .login_input, #app_home .newuser_input{ width:268px; box-sizing: border-box; height:40px; border:#9d9d9d solid 1px; font-size:16px; color:#5c5c5c; padding:0 0 0 4px; margin:0px auto; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; } #app_home .input_label, #app_home .input_label{ color:#5c5c5c; font-size:11px; line-height:20px; height:20px; font-family: verdana; float:left; } #app_home #login_input_username, #app_home #email, #app_home #password{ margin-bottom:12px; } #app_home #login_input_password{ margin-bottom:5px; } #app_home .forgot_password{ text-align:center; margin-top:14px; } #app_home .forgot_password a{ font-size:16px; font-family: verdana; color: #5c5c5c; text-decoration:none; cursor:pointer; } #app_home #open_signup_form, #app_home #open_login_form{ text-align:center; color:black; font-size:17px; line-height:26px; text-decoration:none; margin-top:5px; } #app_home #open_login_form{ margin-top:18px; margin-bottom:5px; } #app_home #open_signup_form .signupline, #app_home #open_login_form .loginline{ color:#a70839; } #app_home #login_button, #app_home .signup_button { background:#a70839; width:268px; box-sizing: border-box; min-height:46px; line-height:20px; padding: 8px 0; border-bottom:solid 5px #7d062b; border-top:solid 5px #a70839; text-align:center; margin:0 auto; color:white; font-size:17px; cursor:pointer; font-family: arial; margin:0 auto; } #app_home #login_button{ margin:10px auto 0px auto; } #app_home .fb_login_button, #app_home .fb_signup_button, #app_home .apple_loginsignup_button { width:220px; box-sizing: border-box; line-height:0px; padding: 20px 0; border-radius: 5px; text-align:center; margin:0 auto; color:white; font-size:17px; cursor:pointer; font-family: arial; margin:0 auto; } #app_home .fb_login_button, #app_home .fb_signup_button{ background:#1877F2; margin:0px auto 20px auto; } #app_home .apple_loginsignup_button { background:black; margin:-5px auto 20px auto; } #app_home .or_line { width: 100%; text-align: center; border-bottom: 1px solid #9d9d9d; line-height: 2px; margin: 20px 0 20px 0; } #app_home .or_line span { background:#fff; padding:0 10px; color: #9d9d9d; } #app_home #logo{ height: 30px; width: 130px; margin: 12px auto 10px auto; } #app_home #user_agreement_show{ font-size: 14px; margin-bottom: 10px; cursor:pointer; margin-top:5px; } #app_home #user_agreement_wrapper{ width: 96%; position: absolute; left: 50%; top: 55px; margin: 0 0 0 -48%; z-index: 1000; } #not_small #app_home #user_agreement{width:570px; margin:30px auto 0px auto;} #app_home #user_agreement_wrapper .info{ margin: auto; max-width:750px; background:white; border: #a1a2a3 solid 1px; padding:10px 10px 5px 10px; } #info_more .what_label{font-weight:normal;font-size:15px;font-weight:bold;color:darkorange;margin-bottom:10px;} #info_more .sub_label{text-decoration:none;color:darkorange} #info_more #top_msg{font-weight:bold;color:red;font-size:14px;} #info #about_founder_link{position:absolute;bottom:20px;right:30px;cursor:pointer;} #info #about_founder_link_a{text-decoration:none;font-weight:bold;font-size:11px;color:#47008F;font-style:italic;} #info #about_founder_link_a:hover{text-decoration:underline;} #info #content_inner{padding-top:5px;} #small #info #info_outer{max-width:600px;} /* **************** ******************************** */ #not_small #ask_login_popup{ width:320px; text-align:center; } #small #ask_login_popup{ text-align:center; } #ask_login_popup #login_popup_x{ float:right; top:3px; right:3px; color:#a1a2a3; font-size:17px; font-weight:bold; cursor:pointer; padding:10px; position:absolute; } #not_small #ask_login_popup .not_small_menu_scroll{ max-height:430px; } @media screen and (max-height : 670px){ #not_small #ask_login_popup .not_small_menu_scroll{ max-height:330px; } } @media screen and (max-height : 570px){ #not_small #ask_login_popup .not_small_menu_scroll{ max-height:230px; } } /* ************ profile popup form *************** */ #not_small #profile_popup{ width:320px; text-align:center; } #small #profile_popup{ text-align:center; } #not_small #profile_popup .not_small_menu_scroll{ max-height:430px; } @media screen and (max-height : 670px){ #not_small #profile_popup .not_small_menu_scroll{ max-height:330px; } } @media screen and (max-height : 570px){ #not_small #profile_popup .not_small_menu_scroll{ max-height:230px; } } #profile_popup #submit_button{ background:#a70839; width:240px; height:36px; line-height:36px; text-align:center; border: 1px #b6b6b6 solid; margin:10px auto 0 auto; color:white; font-size:15px; cursor:pointer; z-index:950; border-radius:5px; } #profile_popup #submit_button:hover { } #profile_popup #submit_button.clicked{ } #profile_popup #profile_popup_x{ float:right; top:3px; right:3px; color:#a1a2a3; font-size:17px; font-weight:bold; cursor:pointer; padding:10px; position:absolute; } #profile_popup #profile_popup:hover{ color:black } #profile_popup #popup_form{ margin:0px; padding:0px; } #profile_popup .error_msg{ text-align:left; color:rgb(255, 0, 163); font-size:14px; margin-bottom:4px; margin-top:14px; } #profile_popup .display_name_input, #profile_popup .textarea_input{ width:258px; border:#9d9d9d solid 1px; font-size:16px; color:#5c5c5c; padding:0px; margin:0px; padding-left: 1px; resize: none; height:36px; } #profile_popup .textarea_input{ height:110px; } #profile_popup .input_label{ font-size:16px; line-height:22px; height:22px; margin-top:10px; } #small #profile_popup .input_label{ font-size:17px; } /********* add_button */ #button_mobile .step_header{margin-bottom:9px;margin-top:20px} #button_mobile .step_header_first{margin-bottom:9px;margin-top:10px} #button_mobile .step_detail{margin-left:18px;} #button_mobile #bm_script{margin:12px 10px 12px 20px; font-size:12px;word-wrap:break-word;line-height:10px} #button_mobile .how_to_copy_paste_link{text-decoration:underline;cursor:pointer} #button_mobile table{ border-collapse: collapse; width:100%; } #button_mobile .bo_info_header{ font-weight:bold; font-size:18px; margin:0 0 10px 0px; color:#353535; } #not_small #button_mobile .bo_info_header{ margin:30px 0 10px 0; } #small #button_mobile .bo_info_header{ margin-top:15px; } #button_mobile .bo_cb_col{ vertical-align:top; text-align:left; padding:7px 0; color: #444444; font-weight: bold; } #button_mobile .bo_cb_col_sizer{ width:22px; } #button_mobile .bo_option_col{ width:99%; padding:7px 0; } #button_mobile .label_for_radio_option{ display:block; min-height:42px; line-height:42px; } #small #button_mobile #bo_button_header{ background: #a80739; overflow: hidden; padding: 0 5px; } #small #button_mobile .bo_button{ width:135px; width:50%; height:38px; line-height:38px; color:white; text-align:center; float:left; } #small #button_mobile .bo_button.active{ background:#CC0C47; } #not_small #button_mobile .bo_button{ width:150px; height:38px; line-height:38px; color:#a80739; font-weight:bold; text-align:center; float:left; margin-right:15px; } #not_small #button_mobile .bo_button.active{ background:#efecec; } #add_button_directions, #use_button_directions{ padding-top: 10px; border-top: 1px gray dotted; margin-top: 1px; } #button_mobile .button_open_in_safari, #button_mobile .button_open_in_chrome{ width: 270px; height: 40px; line-height: 40px; background: #cc0c47; color: white; text-align: center; font-weight: bold; border-radius: 3px; margin-top:10px; } #button_mobile .notsafari_header{ font-weight:bold; color:#cc0c47; color:#A80739; } #button_mobile .whatscmt_header{ font-weight:bold; margin:15px auto 0 auto; } #button_mobile .whatscmt_text{ margin:15px auto 0 auto; } #button_mobile .whatscmt_close{ width:150px; height:40px; line-height:40px; background:white; border:1px gray solid; border-radius:5px; margin:25px auto; text-align:center; font-weight:bold; } #button_mobile .notsafari_single{ max-width: 370px; margin: 20px auto 0 auto; } #button_mobile .ei_number_col{ vertical-align:top; text-align:left; padding:7px 0; color: #444444; font-weight: bold; } #button_mobile .ei_number_col_sizer{ width:22px; } #button_mobile .ei_info_col{ width:99%; padding:7px 0; } #button_mobile .ei_info_header{ font-weight:bold; font-size:18px; margin:10px 0; } #button_mobile .ei_info_next_link{ color: black; font-size: 18PX; text-decoration: none; margin-top: 10px; } #not_small #button_not_mobile .subheader{ color:#920732; font-size:30px; line-height:36px; margin-bottom:13px; } #not_small #button_not_mobile .info_line{ font-size:16px; line-height:24px; max-width:600px; margin:0 auto; } #not_small #button_not_mobile .info_line a{ text-decoration:underline; color:#920732; } #not_small #button_not_mobile #add_chrome_button, #not_small #button_not_mobile #add_safari_button{ background:#a70839; color:white; border:solid 5px #a70839; border-bottom:solid 5px #7d062b; width:239px; height:36px; line-height:36px; text-align: center; margin: 40px auto 0 auto; font-family:arial; font-size:20px; cursor:pointer; } #not_small #button_not_mobile #add_chrome_button:hover, #not_small #button_not_mobile #add_safari_button:hover { border-bottom:solid 5px #a70839; } #not_small #button_not_mobile .info_have_added_button{ margin-top:38px; color:black; font-size:16px; line-height:24px; } #not_small #button_not_mobile .help_link{ color:#920732; font-size:16px; line-height:24px; text-decoration:underline; margin:0px auto; cursor:pointer; } #not_small #button_not_mobile .help_info{ width:600px; padding:10px; border:solid 1px #a1a2a3; margin:10px auto; line-height:18px; } #not_small #button_not_mobile .how_to_img{ margin-top:20px; margin-bottom:20px; } #not_small #button_not_mobile .button_to_drag{ background-image: url('https://cdn.copymethat.com/static/page_add_button/button_non_chrome.png'); height:51px; width:185px; margin:60px auto 30px auto; } #not_small #button_not_mobile .button_to_drag a{ display:block; height:51px; width:185px; color:transparent; } #not_small #button_not_mobile .button_to_drag .dashed_line{ position:absolute; top:-115px; left:-205px; } #not_small #button_not_mobile .button_to_drag .dashed_line_note{ position:absolute; top:-24px; left:-168px; color:#920732; font-size:14px; line-height:16px; } #info, #cookie_info{ -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #info #what_is_label{float:right;margin-top:-10px} #small #info #what_is_label{margin-bottom:0px;} #info #what_is_label_a{text-decoration:underline;color:darkorange;font-weight:bold;font-size:11px;} #info #get_button_link{text-decoration:underline;color:blue;} #info .number{color:orange;font-size:22px;font-weight:bold;margin-right:10px;} #info .activation_msg{margin-top:20px;} #info .activate_highlight{font-weight:bold;font-size:115%;color:red;} #info .contact_msg{margin-top:20px;} #info .divider_border{height:2px;background:#920732;margin:20px 5px 0px 5px;} #info .space_within_step{height:6px;} #info .small_space{height:5px;} #info #show_where_button{text-decoration:underline; cursor:pointer;} #info .link_as_link{color:blue;text-decoration:underline} #info .plain_link{color:black;text-decoration:underline} #info .plain_link:visited{color:black;} #not_small #info .subsub_header{ font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px; padding-top: 10px; color:rgb(50, 50, 50); border-top: 1px dotted gray; } #small #info .subsub_header{font-weight:bold;font-size:16px; color:#3B1E00;margin-left:5px;margin-top:15px;margin-bottom:2px;border-top: 1px solid gray;padding-top: 6px;} #small #info .subsubsub_header{font-weight:bold;font-size:16px; color:#3B1E00;} #not_small #info .subsubsub_header{font-weight:bold;color:rgb(50, 50, 50);} #not_small #info .subsub_header_info_start{font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px; padding-top: 3px;} #small #info .subsub_header_info_start{font-weight:bold;font-size:14px; color:#3B1E00;margin-left:5px;margin-top:15px;margin-bottom:2px;} #info .show_more_link_style{text-decoration:underline;cursor:pointer;} #not_mob #info .show_more_link_style:hover{font-weight:bold} #info .text_line, #info .text_line_non_indent{ list-style-type: none; padding-left: 15px; padding-top:13px; } #info .text_line_non_indent{padding-left: 5px;} #info .a_href{color:blue;text-decoration:None} #info .chrome_ext_link_a{color:blue;text-decoration:None;font-size:14px;} #info .text_line_extra_indent{ padding-left: 25px; } #small #info .text_line{ padding-left: 15px; } #info .link_msg, #info .welcome{margin-top:15px;font-size:18px;color:#920732;font-weight:bold;} #info #recipe_links_div{margin-left:0px;margin-top:10px;} #info .recipe_link_single{margin-top:7px;} #info .recipe_link{display:table-cell;width:90px;} #info .recipe_link_a{text-decoration:none} #info .recipe_link_description{display:table-cell; /*overwritten by small*/} #small #info .recipe_link_description{display:block;} #info .highlight{font-weight:bold;} #info .contact_hlight{} #switch_view_button{margin-top:4px; border: 1px solid rgb(82, 82, 82); color: rgb(82, 82, 82); } #not_small #recipes #share_options_trigger{ float: right; width: 42px; height: 42px; padding-top: 6px; box-sizing: border-box; cursor: pointer; margin-left: 10px; margin-right: 10px; z-index: 2; background: white; border: 1px #D7D7D7 solid; } #not_small #recipes #share_options_trigger .recipes_share_icon{ /* uses sprite_ic sheet */ opacity: .5; height: 28px; width:28px; margin:0 auto; } #small #recipes #share_options_trigger{ float: right; box-sizing: border-box; width: 48px; height: 40px; padding-top: 8px; position: relative; cursor: pointer; } #small #recipes #share_options_trigger .recipes_share_icon{ /* uses sprite_ic sheet */ opacity: .6; height: 24px; width: 24px; margin:0 auto; } #recipes #share_options_menu{ padding-top:5px; border:1px solid gray; position:absolute; top:42px; right:0; z-index:10; background:white; box-sizing: border-box; padding-left: 5px; padding-right: 5px; padding-bottom:5px; overflow:hidden; text-align:left; } #small #recipes #share_options_menu{ right: 5px; left: auto; top: 80px; } #recipes #new_recipes_msg, #recipes #new_recipes_loading_msg{ background: #FFE082; padding: 5px 0; margin-bottom: 5px; font-size: 14px; font-weight: bold; text-align:center; } #recipes .share_menu_item{ width:260px; height:40px; line-height:40px; display:block; text-decoration:none; padding-left:5px; white-space: nowrap; margin:0px 5px; border-bottom:1px solid gray; color:rgb(82, 82, 82); cursor:pointer; font-family: arial; font-size: 15px; } #recipes .share_menu_item.first_row{ border-top:1px solid gray; } #small #recipes .share_menu_item{ font-size: 14px; font-weight:bold; } #not_mob #recipes .share_menu_item:hover{ background:rgb(230, 230, 230); } #recipes #share_options_link_input{ width:260px; height: 22px; margin-left: -5px; border:none; } #recipes #share_options_menu #android_get_recipebox_link.active_input{ height:110px; } #small #recipes #share_options_link_input{ font-size:14px; } #recipes #share_options_link_href{ width:95%; height: 30px; display:block; text-decoration:None; color:rgb(82, 82, 82); } #small #recipes #share_options_link_href{ width: 95%; height: 30px; } #not_small #sort_div #sort_select_options { text-align: left; width: 220px; margin:0px 0px 2px 0px; padding: 0 5px; border: 1px solid #505050; background: #FFFFFF; clear: both; overflow: hidden; position: absolute; right: 0px; z-index: 100; top: 38px; } #not_small #not_mob #recipes_view_top #sort_select_options{ font-size:13px; width: 198px; margin-top: 3px; right:auto; left: 0; top: 36px; } #not_small #sort_div #sort_trigger{ height:36px; /* if change height see sort_trigger_wrapper margin-bottom */ line-height:36px; background:white; } #not_small #sort_div .sort_trigger_wrapper{ border-bottom:1px #D7D7D7 solid; border-top:1px #D7D7D7 solid; margin-top:2px; margin-bottom:6px; /* margin top + margin bottom + height of sort_trigger = height recipes_column_top*/ } #not_small #sort_div #sort_trigger_expand, #not_small #sort_div #sort_trigger_collapse{ float:right; margin-right:10px; color:gray; } #not_small #sort_div #sort_label_col, #not_small #sort_div #sort_label_col div{ width: 56px; height:36px; line-height:36px; cursor:pointer; box-sizing:border-box; padding-left:3px; overflow:hidden; font-weight: bold; color: #6f6f6f; font-size: 12px; } #not_small #sort_div .sort_trigger_icon, #not_small #sort_div .sort_trigger_icon div{ width: 16px; height:36px; line-height:36px; cursor:pointer; box-sizing:border-box; } #not_small #sort_div #sort_chosen_col, #not_small #sort_div #sort_chosen_col #sort_chosen{ width: 100%; height:36px; line-height:36px; overflow:hidden; word-break: break-all; cursor:pointer; box-sizing:border-box; font-weight: bold; color: #6f6f6f; font-size: 12px; background:white; } #not_small #sort_div #sort_chosen{ display:block; padding-left:5px; height:28px; line-height:28px; } #not_small #sort_trigger{ font-size:13px; text-align:left; } #not_small #sort_select_div{float:left;} #not_small .sort_option{ height:36px; line-height:36px; border-bottom:1px dotted gray; padding-left:5px; color:gray; } #not_small .sort_option.enabled{ color:black; cursor:pointer; } #not_small #not_mob .sort_option.enabled:hover{ background:#f4f4f4; } #not_small .sort_option.last{ border-bottom:none } /* not small search called vertical_search_ (used to be a vertical pane on the left side) */ /* small_search_filter_menu is the small filters search menu (used to be called advanced search) */ /* small_search_tags_menu is the small tags search menu */ #not_small #recipes .vertical_search_trigger{ width: 100px; float: left; background: white; box-sizing:border-box; height: 43px; line-height: 43px; border: 1px #D7D7D7 solid; border-radius: 0px; cursor: pointer; font-weight: bold; color: #6f6f6f; font-size: 13px; } #not_small #recipes .vertical_search_trigger.left{ margin-left:6px; } #not_small #recipes #vertical_search_tags, #not_small #recipes #vertical_search_filter { text-align:left; box-sizing:border-box; padding-bottom:0; text-align:left; left: 50%; } #not_small #recipes #vertical_search_tags{ width:354px; /* tagmenu_table + 20 vertical_search_inner padding */ margin-left: -177px; } #not_small #recipes #vertical_search_filter{ width:354px; /* same as vertical_search_tags, but doesn't have to be */ margin-left: -177px; } #not_small #recipes #vertical_search_tags .scroll_menu_inner, #not_small #recipes #vertical_search_filter .scroll_menu_inner, #not_small #recipes #list_view_info_popup .scroll_menu_inner{ padding:10px 10px 20px 10px; overflow-y: auto; max-height:480px; /* changed in js */ box-sizing:border-box; } #not_small #recipes #vertical_search_filter .scroll_menu_inner{ padding:20px 10px 20px 20px; } #small #small_search_filter_menu .scroll_menu_inner, #small #small_search_tags_menu .scroll_menu_inner, #small #list_view_info_popup .scroll_menu_inner{ overflow-y: auto; padding-top: 5px; box-sizing: border-box; padding-bottom:44px; /* must match small_fullscreen_popup_menu */ } #not_small #recipes #vertical_search_tags .tagmenu_table{ border-collapse: separate; border-spacing: 2px 5px; /* this is space between cells. We add the visible border to cells.*/ table-layout: fixed; /* all cells will have same width */ width:334px; /* use same as for two columns.*/ } #not_small #recipes #vertical_search_tags.two_column_tags .tagmenu_table{ width:334px; /* desired width of column (164) x 2 + border-spacing x 3 */ } #not_small #recipes #vertical_search_tags.three_column_tags .tagmenu_table{ width:500px; /* desired width of column (164) x 3 + border-spacing x 4 */ } #not_small #recipes #vertical_search_tags.two_column_tags{ width:354px; /* tagmenu_table + 20 vertical_search_inner padding. Added extra to make room for any/all line */ margin-left: -177px; } #not_small #recipes #vertical_search_tags.three_column_tags{ width:540px; /* tagmenu_table + 20 vertical_search_inner padding + 20px for scrollbar */ /* only 3 columns will ever have scrollbar. if 1 or 2 don't fite, use more columns */ margin-left: -270px; } #not_small #mob #recipes #vertical_search_tags.three_column_tags{ width:520px; /* no scroll bar width */ margin-left: -260px; } #not_small #recipes #vertical_search_tags .tag_in_search, #small #recipes #small_search_tags_menu .tag_in_search{ /* this is also the td */ padding:0; /* must not have border. Used to and then aria-label was ignored by iOS voiceover screenreader. */ } #not_small #recipes #vertical_search_tags .tag_in_search.selected, #small #recipes #small_search_tags_menu .tag_in_search.selected, #not_small #recipes #vertical_search_tags .tag_in_search.selected_not, #small #recipes #small_search_tags_menu .tag_in_search.selected_not{ background: #e0e0e0; } #not_small #recipes #vertical_search_tags .tag_in_search.selected_not, #small #recipes #small_search_tags_menu .tag_in_search.selected_not{ text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-style: solid; text-decoration-color: rgb(168, 7, 57); } #not_small #not_mob #recipes #vertical_search_tags .tag_in_search.hover{ box-shadow: 1px 1px 0px 0 rgba(0,0,0,.25); } #not_small #recipes #vertical_search_tags .tag_in_search_inner, #small #recipes #small_search_tags_menu .tag_in_search_inner{ cursor: pointer; overflow: hidden; box-sizing: border-box; word-break: break-word; padding: 10px 4px 10px 8px; line-height: 20px; max-height:80px; /* 3 lines of text + padding */ border: 1px #cacaca solid; } #small #recipes #small_search_tags_menu .tagmenu_table{ border-collapse: separate; border-spacing: 2px 4px; /* this is space between cells. We add the visible border to cells.*/ table-layout: fixed; /* all cells will have same width */ width:100%; } #not_small #not_mob #vertical_search_tags .tag_in_search_inner{ line-height: 18px; max-height:74px; /* 3 lines of text + padding */ } #small #small_search_tags_menu .label_for_tags_all_any{ display:inline-block; } @media screen and (max-width : 359px){ #small #small_search_tags_menu .label_for_tags_all_any{ margin-left:-6px; } } #small.android_font_5plus #small_search_tags_menu .label_for_tags_all_any{ display:block; } #small_search_tags_menu .label_for_tags_not_in_col, #not_small #vertical_search_tags .label_for_tags_not_in_col{ float:left; margin-left:8px; width:270px; } @media only screen and (min-width : 360px) { #small_search_tags_menu .label_for_tags_not_in_col, #not_small #vertical_search_tags .label_for_tags_not_in_col{ width:300px; } } #not_small #vertical_search_tags #search_tag_untagged, #small #small_search_tags_menu #search_tag_untagged, #not_small #vertical_search_tags #search_tag_exclude_select, #small #small_search_tags_menu #search_tag_exclude_select { line-height:38px; min-height:38px; padding:0; cursor:pointer; display:inline-block; margin-bottom: 2px; } #not_small #vertical_search_tags #search_tag_untagged .checkbox_wrapper, #small #small_search_tags_menu #search_tag_untagged .checkbox_wrapper, #not_small #vertical_search_tags #search_tag_exclude_select .checkbox_wrapper, #small #small_search_tags_menu #search_tag_exclude_select .checkbox_wrapper, #recipe #imadethis_wrapper .checkbox_wrapper{ position:relative; width: 24px; } #not_small #vertical_search_tags #search_tag_untagged .checkbox_border, #small #small_search_tags_menu #search_tag_untagged .checkbox_border, #not_small #vertical_search_tags #search_tag_exclude_select .checkbox_border, #small #small_search_tags_menu #search_tag_exclude_select .checkbox_border, #recipe #imadethis_wrapper .checkbox_border{ position:absolute; box-sizing:border-box; background:white; height:24px; width:24px; top:6px; /* to vertically center*/ border:2px solid #cfcfcf; /* color of checkbox border. Visible border determined by height/width (extra px so background doesn't show)*/ border-radius:1px; } #not_small #vertical_search_tags #search_tag_untagged.hover .checkbox_border, #not_small #vertical_search_tags #search_tag_exclude_select.hover .checkbox_border, #recipe #imadethis_wrapper.hover .checkbox_border{ border:2px solid #a2a2a2; /* checkbox border color hover*/ } #not_small #vertical_search_tags #search_tag_untagged .checkbox_image_check, #small #small_search_tags_menu #search_tag_untagged .checkbox_image_check, #not_small #vertical_search_tags #search_tag_exclude_select .checkbox_image_check, #small #small_search_tags_menu #search_tag_exclude_select .checkbox_image_check, #recipe #imadethis_wrapper .checkbox_image_check{ display:block; position:absolute; top:7px; left:1px; height:22px; width:22px; background:white; } #not_small #vertical_search_tags #search_tag_untagged.selected .checkbox_image_check, #small #small_search_tags_menu #search_tag_untagged.selected .checkbox_image_check, #not_small #vertical_search_tags #search_tag_exclude_select.selected .checkbox_image_check, #small #small_search_tags_menu #search_tag_exclude_select.selected .checkbox_image_check{ background: #CC0C47; /* color of checkmark */ } #recipe #imadethis_wrapper.selected .checkbox_image_check{ background: #7eb348; /* color of checkmark */ } #not_small #vertical_search_tags #search_tag_untagged.selected .checkbox_image_check, #small #small_search_tags_menu #search_tag_untagged.selected .checkbox_image_check, #not_small #vertical_search_tags #search_tag_exclude_select.selected .checkbox_image_check, #small #small_search_tags_menu #search_tag_exclude_select.selected .checkbox_image_check, #recipe #imadethis_wrapper.selected .checkbox_image_check, #recipe #imadethis_wrapper .checkbox_image_check{ background-image: url(https://cdn.copymethat.com/static/checkbox_36_checked_transparent.png); background-position: center center; background-size: cover; } #small #small_search_tags_menu #search_tag_exclude_select_desc{ margin-left:2px; color: gray; line-height: 16px; /* moves it closer to checkbox above. */ margin-bottom: 14px; } #small.android_font_5plus #small_search_tags_menu #search_tag_exclude_select_desc{ line-height: 20px; /* bigger than normal so multi-lines dont' overlap */ } @media only screen and (max-width : 320px) { #small #small_search_tags_menu #search_tag_exclude_select_desc, #small #small_search_tags_menu .label_for_radio_option{ font-size:15px; } } /* android_font_5plus set in base.js */ #small.android_font_5plus #recipes #small_search_tags_menu .label_for_radio{ display: block; } #not_small #vertical_search_filter .vertical_search_submit, #not_small #vertical_search_tags .vertical_search_submit{ background: white; color: #3e3e3e; width: 120px; text-align: center; cursor: pointer; font-size: 15px; line-height: 0px; float: left; text-align: center; border-radius: 30px; margin-top: 2px; margin-left: 10px; font-weight: bold; padding: 19px 8px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow: hidden; } #not_small #vertical_search_tags .vertical_search_submit.clicked, #not_small #vertical_search_filter .vertical_search_submit.clicked{ background: #EEEEEE; } #not_small #vertical_search_tags #clear_search_tags, #not_small #vertical_search_tags #switch_to_filter_trigger, #not_small #vertical_search_filter #clear_search_filter, #not_small #vertical_search_filter #switch_to_tags_trigger{ height: 44px; line-height: 44px; text-align: center; cursor: pointer; text-align: center; float: left; font-size: 15px; margin-left: 14px; padding: 0 5px; } #not_small #vertical_search_tags #switch_to_filter_trigger, #not_small #vertical_search_filter #switch_to_tags_trigger{ text-decoration: underline; } #not_small #recipes #search_form_div_new #search_input_double_wrapper{ width: 443px; /* search_input_double + search_double_submit and its border */ margin: 0 auto; } #not_small #recipes #search_form_div_new #search_input_double { display: inline-block; vertical-align: middle; font-size: 14px; line-height: 18px; height: 43px; padding: 11px 48px 11px 10px; /*padding right leaves room for delete x button*/ border: 1px solid #D7D7D7; box-sizing: border-box; width: 391px; font-family: open sans; } @media screen and (max-width : 900px){ #not_small #recipes #search_form_div_new #search_input_double { width: 371px; } #not_small #recipes #search_form_div_new #search_input_double_wrapper{ width: 423px; /* has to be so big for some reason.. */ } #not_small #recipes .vertical_search_trigger{ width: 84px; } } @media screen and (max-width : 799px){ #not_small #recipes #search_form_div_new #search_input_double { width: 301px; } #not_small #recipes #search_form_div_new #search_input_double_wrapper{ width: 353px; } } @media screen and (max-width : 768px){ #not_small #recipes #search_form_div_new #search_input_double { width: 296px; } #not_small #recipes #search_form_div_new #search_input_double_wrapper{ width: 348px; } #not_small #recipes .vertical_search_trigger{ width: 84px; } } @media screen and (max-width : 767px){ #not_small #recipes #search_form_div_new #search_input_double { width: 171px; } #not_small #recipes #search_form_div_new #search_input_double_wrapper{ width: 223px; } #not_small #recipes .vertical_search_trigger{ width: 80px; } } #not_small #recipes #search_form_div_new .delete_x_button{ top: 0; position: absolute; height: 43px; line-height: 43px; width: 44px; right: 0px; text-align:right; padding-right:12px; box-sizing:border-box; cursor:pointer; color:gray; font-size:18px; } #not_small #recipes #search_form_div_new.no_delete_x .delete_x_button{ display:none; } #small #search_wrapper_small .search_table{ width:100%; box-sizing:border-box; border-collapse:collapse; background:transparent; } #small #search_wrapper_small .search_table td{ padding:0; } #small #search_wrapper_small .search_table .extra_margin{ width:6px; background:transparent; } #small #search_wrapper_small .search_table .extra_border{ width:2px; background:rgb(213, 213, 213); } #small #search_wrapper_small input[type="search"]{ width:100%; height: 40px; /* if change this, look at all searchbar-height-dependent */ line-height: 40px; /* searchbar-height-dependent */ box-sizing: border-box; padding: 0 5px; margin:0; -webkit-border-radius:0px; border:none; background:white; } #small #search_wrapper_small .extra_border_top{ height:2px; background:rgb(213, 213, 213);; } #small #search_wrapper_small .extra_border_top.cancel_show{ background:transparent; } #small #search_wrapper_small .search_table #submit_button_wrapper { width:44px; padding-left:1px; box-sizing:border-box; } #small #search_wrapper_small .search_table.not_showing_all_following .onlyifshow_allfollowing{ display:none; } #small .search_table.no_cancel .cancel_show{ display:none; } #search_wrapper_small .search_button { color: white; background: #A53D53; border-radius: 5px 5px 5px 5px; height: 30px; width: 42px; font-size: 11px; display: inline-block; cursor: pointer; padding: 0; margin: 0px 0px 0px 0px; border: solid lightgray 1px; line-height: 20px; text-align: center; float: left; } #small #small_search_filter_menu .search_button, #small #small_search_tags_menu .search_button{ background: white; color: #3e3e3e; height:40px; line-height: 0px; padding: 20px 0px; padding-right:5px; padding-left:5px; text-align: center; font-size: 16px; float: left; border-radius: 10px; margin-top: 2px; font-weight: bold; margin-left: 10px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow: hidden; max-width:180px; } #small #small_search_filter_menu .small_search_clear, #small #small_search_tags_menu .small_search_clear{ height: 40px; line-height: 0px; padding: 20px 0px; text-align: center; font-size: 16px; float: left; margin-top: 2px; margin-left: 20px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow: hidden; max-width:90px; } @media screen and (max-width : 359px){ #small #small_search_filter_menu .small_search_clear, #small #small_search_tags_menu .small_search_clear{ margin-left: 10px; max-width:70px; } #small #small_search_filter_menu .search_button, #small #small_search_tags_menu .search_button{ max-width:170px; } } #small #small_search_filter_menu #search_input{ float:left; width:262px; margin:10px; height:24px; line-height:24px; padding:7px 4px; -webkit-appearance: none; border-radius: 0; -webkit-border-radius:0; border:#A9A9A9 solid 1px; } #small #small_search_filter_menu #sort_select_options{ margin:5px 15px 0 15px; } #recipes .search_filter_menu .label_for_sb_radio_option{ display:block; min-height:36px; line-height:36px; border-bottom:1px gray dotted; } #recipes .search_filter_menu .label_for_sb_radio_option.disabled{ color:gray; } #recipes .search_filter_menu .label_for_sb_radio_option.first{ border-top:1px gray dotted; } #recipes .search_filter_menu .label_for_sb_radio_option.last{ border-bottom:none; } #recipes .search_filter_menu #sort_trigger{ min-height:40px; line-height:40px; } #recipes .search_filter_menu .sort_trigger_wrapper{ border-top:dotted 1px gray; } #recipes .search_filter_menu #sort_trigger_expand, #recipes .search_filter_menu #sort_trigger_collapse{ float:right; margin-right:10px; color:gray; } #recipes .search_filter_menu .checkbox_filter, #recipes .search_filter_menu .radio_filter{ width:125px; min-height:40px; line-height:40px; } #recipes .search_filter_menu .checkbox_filter{ width:auto; } #recipes .search_filter_menu .radio_filter_first{ border-top: gray dotted 1px; } #recipes .search_filter_menu .radio_filter{ border-bottom: gray dotted 1px; width:100%; } #recipes .search_filter_menu .label_for_radio{ width:105px; display: inline-block; white-space: nowrap; } #recipes .search_filter_menu .label_for_radio_option, #small #small_search_tags_menu .label_for_radio_option, #recipes .search_filter_menu .label_for_checkbox{ min-height:38px; display:inline-block; } #recipes .search_filter_menu .label_for_radio_option, #small #small_search_tags_menu .label_for_radio_option{ margin-right:3px; } /* android_font_5plus set in base.js */ #small.android_font_5plus #recipes .search_filter_menu .label_for_radio{ display: block; line-height: 18px; /*otherwise space between label and radio buttons is huge */ margin-top:4px; } #recipes .search_filter_menu .label_for_dropdown{ font-weight:bold; } #small.android_font_5plus #recipes .search_filter_menu .label_for_radio{ display: block; } #recipes .search_filter_menu .meal_plan_search_label{ text-align:left; margin-top:5px; margin-bottom:10px; color:rgb(50, 50, 50); } #recipes .search_filter_menu .mp_search_date{ display:inline-block; text-align:left; width:100px; border:rgb(161, 161, 161) 1px solid; background:white; font-size:16px; float:left; margin-left:10px; margin-bottom:8px; height: 36px; line-height: 0px; padding: 17px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; padding-left: 5px } @media screen and (max-width : 359px){ #recipes .search_filter_menu .mp_search_date{ width:100px; } } #not_small #recipes .search_filter_menu .mp_search_date{ font-size:15px; width:90px; } #recipes .search_filter_menu .mp_date_hyphen{ float: left; display: inline-block; text-align: center; height: 36px; width: 8px; margin-left: 10px; line-height: 0px; padding: 18px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #recipes .search_filter_menu .mp_dates_clear{ display:inline-block; text-align:center; width:80px; background:white; border:gray 1px solid; cursor:pointer; float:left; margin-left:5px; border-radius:5px; height: 36px; line-height: 0px; padding: 17px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #not_small #recipes .search_filter_menu .mp_dates_clear{ width:60px; } #recipes .search_filter_menu .stars .ratings_label{ width: 45px; display: inline-block; height: 40px; line-height: 0px; padding: 20px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #small.android_font_5plus #recipes .search_filter_menu .stars .ratings_label{ display: block; width:auto; } #recipes .search_filter_menu .star_wrapper .star_image { display: block; background: url('https://copymethat.blob.core.windows.net/static/searchform_images/stars.png') no-repeat 0 -12px; width: 12px; height: 12px; display:inline-block; margin-top:-6px; } #recipes .search_filter_menu .star_wrapper.action .star_image, #recipes .search_filter_menu .star_wrapper.done .star_image { background-position: 0 0; } #recipes .search_filter_menu .stars .star_wrapper{ width: 40px; display: inline-block; text-align: center; height: 40px; line-height: 0px; padding: 20px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #small #search_wrapper_small #search_options_all_following{ /* all/following cancel*/ width:44px; text-align:center; font-size:11px; font-weight:bold; color:gray; background:white; } #small #recipes_shared #search_wrapper_small .delete_x_button, #small #recipes #search_wrapper_small .delete_x_button{ width: 42px; font-size: 14px; font-weight: bold; color: #6d5353; background: white; line-height: 32px; height: 100%; text-align: center; padding-left: 10px; box-sizing: border-box; } #small #recipes_shared .search_table.no_delete_x .deletexonly, #small #recipes .search_table.no_delete_x .deletexonly { display:none; } #small #search_wrapper_small #small_tags_menu_trigger{ width:52px; /* if change, look at search_options_cancel */ /* also look at inline style in recipes_search_small.html */ text-align:center; font-size:13px; font-weight:bold; color:gray; background:white; } #small #search_wrapper_small #small_filter_menu_trigger{ width:52px; /* if change, look at search_options_cancel */ text-align:center; font-size:13px; font-weight:bold; color:gray; background:white; } #small #search_wrapper_small #search_options_cancel { position: absolute; right: 0; background: white; top: 0; line-height: 45px; /* searchbar-height-dependent */ height: 45px; /* searchbar-height-dependent */ width: 113px; /* must cover small_filter_menu_trigger and small_tags_menu_trigger */ text-align: center; color: gray; } #small #search_wrapper_small #small_filter_menu_trigger.usesfilter, #small #search_wrapper_small #small_tags_menu_trigger.usesfilter{ color:#A80739; } #recipes .filter_image, #recipes_shared .filter_image{ background-image:url('https://cdn.copymethat.com/static/searchform_images/search_filter.png'); width: 13px; height: 12px; float: left; } #recipes_shared #user_search_results{ padding:5px 5px 5px 5px; z-index:1000; margin:0px; background:white; width:300px; border:solid black 1px; overflow:hidden; } #recipes_shared .search_user_result{ display: block; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size:12px; font-weight:bold; height: auto; list-style-type: none; height:52px; padding-left:60px; padding-bottom:3px; padding-top:3px; text-align:left; } #recipes_shared .search_user_result:hover{ background:cornsilk; cursor:pointer; } #recipes_shared .search_result_display_name{ padding-top:2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #recipes_shared .search_result_img{height: 50px;width: 50px;position:absolute;left:6px;} #not_small #recipes .content, #not_small #recipes_shared .content, #not_small #follower_ing .content{ padding:7px 0px 20px 0px; border:none; margin-top:0; text-align:center; /* centers recipes */ } #small #recipes .content, #small #recipes_shared .content, #small #follower_ing .content{ text-align:center; /* centers recipes */ padding:0; } #follower_ing .all_follower_ing{ margin:20px 0 0 0; } #small #recipes #count_msg_div{ left: 3px; top: -22px; } #not_small #recipes #count_msg_div{ position: absolute; top: 0; left: 20px; top: -25px; } #not_small #recipes .recipe_count_msg{ color:black; margin-left:0px; float:left; font-size:13px; width: 110px; text-align: left; padding-left:40px; /* leave room for the list view check box*/ } #not_small #recipes #no_copied_recipes_yet{color:black;margin-top:10px;margin-bottom:25px;font-size:14px;} #not_small #recipes #no_copied_recipes_yet a{font-weight:bold;color:#a70839;} #not_small #recipes .gallery_view_icon{ height:8px;width:8px;overflow:hidden; padding:0; margin:0; background:#a70839; display:inline-block; float:left; } #small #ios #search_saved_searches{ padding-bottom:300px; /* to account for keyboard. Not necessary on Android because height already subtracts keyboard*/ } #small #ios #small_search_tags_menu{ padding-bottom:300px; /* to account for keyboard. Not necessary on Android because height already subtracts keyboard*/ } #small #small_search_tags_menu .tag_option{ padding:0px 10px; height:38px; line-height:38px; border-bottom: dotted gray 1px; } #small #small_search_tags_menu .tag_option.first{ border-top: dotted gray 1px; } #not_small #recipes_shared #search_form_div{ margin: 0 auto; color: #212121; text-align: center; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-size: 14px; line-height: 18px; width:755px; } #not_small #recipes_shared #search_form_div #search_input, #not_small #recipes_shared #search_form_div #search_input_pb { display: inline-block; vertical-align:middle; font-size: 14px; line-height: 18px; height: 43px; padding: 11px 10px 11px 10px; border: 1px solid #D7D7D7; box-sizing: border-box; font-family: open sans; width: 380px; } @media screen and (max-width : 768px){ #not_small #recipes_shared #search_form_div{ width:650px; } #not_small #recipes_shared #search_form_div #search_input, #not_small #recipes_shared #search_form_div #search_input_pb { width: 285px; } } @media screen and (max-width : 660px){ #not_small #recipes_shared #search_form_div{ width:580px; } #not_small #recipes_shared #search_form_div #search_input, #not_small #recipes_shared #search_form_div #search_input_pb { width: 270px; } } #not_small #recipes_shared #search_form_div .delete_x_button{ top: 0; position: absolute; height: 43px; line-height: 43px; width: 44px; right: 0px; text-align:right; padding-right:12px; box-sizing:border-box; cursor:pointer; color:gray; font-size:18px; } #not_small #recipes_shared #search_form_div.no_delete_x .delete_x_button{ display:none; } #not_small #recipes_shared #search_form_div .search_button, #not_small #recipes #search_form_div_new .search_button{ width: 85px; background: white; font-weight: bold; color: #484848; font-size: 12px; box-sizing: border-box; height: 43px; line-height: 17px; padding-top: 3px; text-align: center; border: 1px solid #DBDBDB; border-left:none; cursor: pointer; overflow: hidden; display: inline-block; vertical-align: middle; position: relative; background: #f6f6f6; } #not_small #not_mob #recipes_shared #search_form_div .search_button:hover , #not_small #not_mob #recipes #search_form_div_new .search_button:hover{ background: #f1f1f1; } #not_small #recipes_shared #search_form_div .search_button.tagoption{ line-height: 33px; border-radius: 0 6px 6px 0; } #not_small #recipes_shared #search_form_div .search_button.alloption{ width:72px; } #not_small #recipes_shared #search_form_div .search_button.onlyoption, #not_small #recipes #search_form_div_new .search_button.onlyoption{ width:52px; border-radius: 0 6px 6px 0; } #not_small #recipes_shared #search_form_div .go_search_icon, #not_small #recipes #search_form_div_new .go_search_icon{ height: 28px; width: 28px; opacity: .7; float: left; margin-top: 4px; margin-left: 3px; margin-right: -10px; } #not_small #recipes_shared #search_form_div .search_button.onlyoption .go_search_icon, #not_small #recipes #search_form_div_new .search_button.onlyoption .go_search_icon{ margin-left:10px; } #not_small #recipes_shared #search_form_div #following_div, #not_small #recipes_shared #search_form_div #madethis_div, #not_small #recipes_shared #search_form_div #pb_madethis_div{ background: white; font-weight: bold; font-size: 12px; color: #484848; box-sizing: border-box; height: 43px; line-height: 15px; padding: 0 2px; text-align: center; border: 1px solid #DBDBDB; border-left: none; border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; position:relative; cursor: pointer; } #not_small #recipes_shared #search_form_div #search_saved_searches{ max-height:400px; background: #FFFFFF; clear: both; overflow: hidden; border: 1px solid #DBDBBD; margin-top: 3px; position: absolute; top: 42px; left: 0; width:300px; z-index:100; padding-bottom:5px; text-align:left; padding-left:10px; box-sizing:border-box; } #not_small #recipes_shared #search_form_div .not_small_menu_scroll{ max-height:400px; height:100%; overflow-y:auto; overflow-x:hidden; } @media screen and (max-height : 400px){ #not_small #recipes_shared #search_form_div #search_saved_searches, #not_small #recipes_shared #search_form_div .not_small_menu_scroll { max-height:200px; } } @media screen and (max-height : 579px){ #not_small #recipes_shared #search_form_div #search_saved_searches, #not_small #recipes_shared #search_form_div .not_small_menu_scroll { max-height:300px; } } #small #recipes_shared #searchtype_wrapper, #small #recipes_shared #searchtype_wrapper_pb{ height:48px; /* match padding-top search_saved_searches and be less than margin-top small #recipes_shared .people */ width:100%; background:white; box-sizing:border-box; border-bottom: 1px #e0e0e0 solid; padding-top:3px; } #small #recipes_shared #searchtype_wrapper_pb.doubleheight{ height:92px; /* match padding-top search_saved_searches doubleheight */ } #small #recipes_shared #searchtype_wrapper_pb #search_doubleheight_split{ display:none; } #small #recipes_shared #searchtype_wrapper_pb.doubleheight #search_doubleheight_split{ display:block; clear:both; } #small #recipes_shared #search_wrapper_small #pb_madethis_div, #small #recipes_shared #search_wrapper_small #madethis_div{ font-weight: bold; font-size: 14px; display: inline-block; line-height: 0px; height: 40px; padding: 0; color:#262626; overflow:hidden; /* if not, shifts since buttons are overflow:hidden . also keeps text inside (cuts off) if user makes font huge */ background: #f0f0f0; border-radius: 2px; max-width: 76px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } #small #recipes_shared #search_wrapper_small .searchtype_button{ width: 100px; padding:19px 0; line-height: 0px; text-align: center; border-radius: 10px; display: inline-block; background: #f0f0f0; font-weight: bold; font-size: 14px; margin-left: 5px; margin-right: 5px; margin-top: 0px; color:#262626; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow:hidden; } @media screen and (max-width : 359px){ #small #recipes_shared #search_wrapper_small .searchtype_button{ width:90px; } } #small #recipes_shared #search_wrapper_small .searchtype_button[searchtype="tag"]{ min-width: 100px; max-width:130px; width:auto; padding-left:5px; padding-right:5px; } @media screen and (max-width : 359px){ #small #recipes_shared #search_wrapper_small .searchtype_button[searchtype="tag"]{ min-width: 90px; max-width:130px; width:auto; } } #small #recipes_shared #search_wrapper_small .searchtype_button.selected{ border:1px solid black; /* shows default search(enter) and where is now */ padding:18px auto; } #small #recipes_shared #search_wrapper_small .searchtype_button.notselectable{ color:#b9b9b9; } #small #search_saved_searches{ text-align:left; } #small #recipes_shared #search_saved_searches{ z-index:100; /* less than content top */ padding-top:48px; /* match height searchtype_wrapper */ background:white; } #small #recipes_shared #search_saved_searches.doubleheight{ padding-top:92px; /* match height searchtype_wrapper doubleheight */ } #not_small #search_form_div_new #search_saved_searches{ max-height:400px; background: #FFFFFF; clear: both; overflow: hidden; border: 1px solid #DBDBBD; margin-top: 3px; position: absolute; top: 42px; left: 0; width:300px; /* reset in js */ z-index:100; padding-bottom:5px; text-align:left; box-sizing: border-box; } #not_small #search_form_div_new .not_small_menu_scroll{ max-height:400px; height:100%; overflow-y:auto; overflow-x:hidden; } @media screen and (max-height : 400px){ #not_small #search_form_div_new #search_saved_searches, #not_small #search_form_div_new .not_small_menu_scroll { max-height:200px; } } @media screen and (max-height : 579px){ #not_small #search_form_div_new #search_saved_searches, #not_small #search_form_div_new .not_small_menu_scroll { max-height:300px; } } #not_small #search_saved_searches .ss_wrapper, #small #search_saved_searches .ss_wrapper{ border-bottom: dotted 1px gray; overflow: hidden; display: table; table-layout: fixed; } #not_small #search_saved_searches .ss_row, #small #search_saved_searches .ss_row{ display: table-row; width: 100%; } #not_small #search_saved_searches .ss_cell, #small #search_saved_searches .ss_cell{ display: table-cell; } #not_small #search_saved_searches .ss_saved_search_option, #small #search_saved_searches .ss_saved_search_option{ display: table-cell; width: 99%; word-break: break-word; } #not_small #search_saved_searches .ss_str, #small #search_saved_searches .ss_str{ line-height:22px; padding:9px 0; padding-left:10px; cursor:pointer; } #not_small #not_mob #search_saved_searches .ss_str:hover{ background:#f4f4f4; } #not_small #search_saved_searches .ss_delete, #small #search_saved_searches .ss_delete{ width:46px; height:36px; line-height:36px; text-align:center; } #not_small #not_mob #search_saved_searches .ss_delete:hover{ color:red; cursor:pointer; } #not_small #recipes .next_prev_bottom_page{ margin-right: 15px; padding-top: 15px; padding-bottom: 10px; text-align:center; } #not_small #recipes .next_prev_top_page{ margin-left:10px;font-size:14px;float:left; } #not_small #recipes .next_prev_top_page .previous_page, #not_small #recipes .next_prev_top_page .next_page{ color:black;text-decoration:none; } #not_small #recipes .next_prev_top_page .previous_page:hover, #not_small #recipes .next_prev_top_page .next_page:hover{ text-decoration:underline; } #small #recipes .content{overflow:hidden} #small #recipes .recipe_count_msg{margin: 10px 0 4px 6px;color:#1f1f1f;font-size:14px;float:left;} #small #recipes #no_copied_recipes_yet{font-weight:normal;color:black;margin:10px;} #small #recipes #no_copied_recipes_yet a{font-weight:bold;color:#a70839;} #small #recipes .next_prev_bottom_page{padding-top:10px;padding-bottom:10px} #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ overflow:hidden; margin:5px 3px 5px 3px; width:152px; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); display: inline-block; background:white; } #small #recipes .single_recipe.clicked, #small #recipes_shared .single_recipe.clicked { box-shadow: 5px 6px 6px 0px rgba(0, 0, 0, 0.35); } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image { display: block; width: 152px; height: 122px; margin-top:0px; background-position: center center; background-size: cover; } #small #recipes .single_recipe .recipe_title, #small #recipes_shared .single_recipe .recipe_title{ text-align:center; font-size:14px; /* if change MUST change in set_recipes_title_height(). which handles Android resizing */ line-height:21px; /* em no longers works to change height w/Android resizing. Went back to px */ height:42px; overflow: hidden; padding:5px 2px 0px 2px; font-weight:bold; /* android resizes font,line-height: 15.4, 23.1 ; 18.2, 27.3 ; 21, 31.5 (cmt sise is used notch befre middle size ) */ } #small #recipes .single_recipe .recipe_title_a, #small #recipes_shared .single_recipe .recipe_title_a{ display: inline-block; text-decoration:none; box-sizing:border-box; color:rgb(72, 72, 72); width:100%; } /* 4 med: 736- (736 iphone 6+ L) 170 margin: 5px 6px 5px 6px; (4 small might be better, then fits 2 in height on 6+) 4 small: 667- (667 iphone 6 L) 152 margin: 5px 6px 5px 6px; (could also fit 3 med/large) 3 med: 568- (568 iphone 5 L 640 popular android L) 170 margin: 5px 6px 5px 6px; 3 small: 480- (480 iphone 4 L) 152 margin:5px 3px 5px 3px; 2 large: 414- (414 iphone 6+) 190 margin: 5px 6px 5px 6px; 2 medium 375- (375 iphone 6, 384 nexus 4) 170 margin: 5px 6px 5px 6px; 2 medium: 360- (360 popular android ) 170 margin:5px 3px 5px 3px; 2 small: 320- (320 iphone 4/5) 152 margin:5px 3px 5px 3px; Pixel is 376, Pixel 2 is 411 */ #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:152px; margin:5px 3px 5px 3px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 152px; height: 122px; } @media only screen and (min-width : 360px) { #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:170px; margin:5px 3px 5px 3px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 170px; height: 136px; } } @media only screen and (min-width : 375px) { #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:170px; margin: 5px 6px 5px 6px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 170px; height: 136px; } } @media only screen and (min-width : 411px) /* iphone 6+, Google Pixel 2, Nexus 6 */ { #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:190px; margin: 5px 6px 5px 6px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 190px; height: 155px; } } @media only screen and (min-width : 480px) { #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:152px; margin:5px 3px 5px 3px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 152px; height: 122px; } } @media only screen and (min-width : 568px) { #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:170px; margin: 5px 6px 5px 6px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 170px; height: 136px; } } @media only screen and (min-width : 667px) { #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:152px; margin: 5px 6px 5px 6px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 152px; height: 122px; } } @media only screen and (min-width : 732px) /* landscape iphone 6+, Google Pixel?, Nexus 6 */ { #small #recipes .single_recipe, #small #recipes_shared .single_recipe{ width:170px; margin: 5px 6px 5px 6px; } #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{ width: 170px; height: 136px; } } #small #recipes .single_recipe .star{float:left; margin-right:3px;height:16px;width:16px; cursor:pointer; } #small #recipes .single_recipe .starred{ /*uses sprite sheet sprite_sheet_for_star_only */ background-position:-262px -2px; } #small #recipes .single_recipe .orig_recipe_link, #small #recipes_shared .single_recipe .orig_recipe_link{ margin-top:5px; margin-bottom:2px; font-size:12px; text-align:center; line-height: 15px; min-height: 15px; overflow: hidden; white-space: nowrap; margin-right:2px; margin-left:2px; text-decoration:none; padding-bottom:1px; text-decoration:none; } #small #recipes .single_recipe .orig_recipe_link_a, #small #recipes_shared .single_recipe .orig_recipe_link_a{ text-decoration:none;color:gray;} #small #recipes .single_recipe .orig_recipe_link_clicked, #small #recipes_shared .single_recipe .orig_recipe_link_clicked{ background:#A80739; color:white; text-decoration:none; } #not_small #recipes .single_recipe .small_menu_items, #not_small #recipes_shared .single_recipe .small_menu_items{ width: 100%; height: 25px; margin-top: 6px; } #not_small #recipes .single_recipe .additional-ico, #not_small #recipes_shared .single_recipe .additional-ico{ float: left; overflow:auto; text-align: left; padding-left: 2%; } #not_small #recipes .single_recipe .stars-ico, #not_small #recipes_shared .single_recipe .stars-ico{ float: right; overflow:auto; text-align: right; padding-right: 2%; } #not_small #recipes_shared .single_tag { display: inline-block; cursor: pointer; background: #fff; width: 182px; margin: 0 5px 14px; position: relative; -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.25); -moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,.25); box-shadow: 0 1px 6px 0 rgba(0,0,0,.25); text-align: center; } #not_small #not_mob #recipes_shared .single_tag:hover{ -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); } #not_small #recipes_shared .single_tag .tag_name{ overflow: hidden; font-size: 17px; font-weight: 400; color: #000; text-decoration: None; text-align: center; max-height:42px; min-height:42px; line-height: 21px; box-sizing: border-box; width: 100%; } #not_small #recipes_shared .single_tag .tag_count{ overflow: hidden; font-size: 14px; font-weight: 400; color: gray; text-decoration: None; text-align: center; padding:10px 3px; line-height: 0px; width: 100%; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow:hidden; } #not_small #recipes_shared .single_tag .tag_images{ margin-top:6px; height:92px; text-decoration: none; font-size:0; /* font and line-height 0 removes space between inline images*/ line-height: 0px; } #not_small #recipes_shared .single_tag .tag_thumbnail{ display: inline-block; background-position: center center; background-size: cover; margin:2px 1px; } #not_small #not_mob #recipes_shared .single_tag { width: 180px; margin: 0 4px 14px; } #not_small #not_mob #recipes_shared .single_tag .tag_thumbnail{ height: 82px; width: 56px; } #not_small #mob #recipes_shared .single_tag { width: 180px; margin: 0 4px 14px; } #not_small #mob #recipes_shared .single_tag .tag_thumbnail{ height: 82px; width: 56px; } @media only screen and (max-width : 760px) { #not_small #mob #recipes_shared .single_tag { width: 180px; margin: 0 4px 14px; } #not_small #mob #recipes_shared .single_tag .tag_thumbnail{ height: 82px; width: 56px; } } @media screen and (min-width : 601px) and (max-width: 602px){ /* Kindle HD 8 is 601. For some reason needed to say 601, at least in emulator*/ #not_small #mob #recipes_shared .single_tag{ width: 186px; margin: 0px 6px 14px 6px; } #not_small #mob #recipes_shared .single_tag .tag_thumbnail{ height: 82px; width: 58px; } } @media screen and (min-width: 800px) and (max-width: 849px){ #not_small #mob #recipes_shared .single_tag { width: 186px; margin: 0px 6px 14px 6px; } #not_small #mob #recipes_shared .single_tag .tag_thumbnail{ height: 82px; width: 58px; } } @media screen and (min-width : 850px) and (max-width : 1000px) { #not_small #mob #recipes_shared .single_tag{ width: 194px; margin: 0px 6px 14px 6px; } #not_small #mob #recipes_shared .single_tag .tag_thumbnail{ height: 82px; width: 60px; } } @media screen and (min-width : 961px) and (max-width: 963px){ /* Kindle HD 8 landscape width is 962. For some reason needs 1px bigger, at least in emulator */ #not_small #mob #recipes_shared .single_tag{ width: 180px; margin: 0px 4px 14px 4px; } #not_small #mob #recipes_shared .single_tag .tag_thumbnail{ height: 82px; width: 56px; } } #small #recipes_shared .single_tag{ overflow:hidden; margin:5px 3px 5px 3px; width:152px; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); display: inline-block; background:white; margin:5px 3px 5px 3px; } #small #recipes_shared .single_tag .tag_name{ overflow: hidden; font-size: 17px; font-weight: 400; color: #000; text-decoration: None; display: inline-block; text-align: center; max-height:36px; min-height:36px; line-height: 18px; box-sizing: border-box; margin-top:10px; width: 100%; } #small #recipes_shared .single_tag .tag_count{ overflow: hidden; font-size: 14px; font-weight: 400; color: gray; text-decoration: None; display: inline-block; text-align: center; padding:10px 3px; line-height: 0px; width: 100%; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow:hidden; } #small #recipes_shared .single_tag .tag_images{ margin-top:4px; font-size:0; /* font and line-height 0 removes space between inline images*/ line-height: 0px; height: 71px; /* same as .single_tag .tag_thumbnail in case no images */ } #small #recipes_shared .single_tag .tag_thumbnail{ display: inline-block; background-position: center center; background-size: cover; margin:1px 1px; height: 71px; width: 46px; } @media only screen and (min-width : 360px) { #small #recipes_shared .single_tag{ width:170px; margin:5px 3px 5px 3px; } #small #recipes_shared .single_tag .tag_thumbnail{ height: 81px; width: 53px; } #small #recipes_shared .single_tag .tag_images{ height: 81px; } } @media only screen and (min-width : 375px) { #small #recipes_shared .single_tag{ width:170px; margin: 5px 6px 5px 6px; } #small #recipes_shared .single_tag .tag_thumbnail{ height: 81px; width: 54px; } #small #recipes_shared .single_tag .tag_images{ height: 81px; } } @media only screen and (min-width : 411px) /* iphone 6+, Google Pixel 2, Nexus 6 */ { #small #recipes_shared .single_tag{ width:190px; margin: 5px 6px 5px 6px; } #small #recipes_shared .single_tag .tag_thumbnail{ height: 91px; width: 60px; } #small #recipes_shared .single_tag .tag_images{ height: 91px; } } @media only screen and (min-width : 480px) { #small #recipes_shared .single_tag{ width:152px; margin:5px 3px 5px 3px; } #small #recipes_shared .single_tag .tag_thumbnail{ height: 71px; width: 48px; } #small #recipes_shared .single_tag .tag_images{ height: 71px; } } @media only screen and (min-width : 568px) { #small #recipes_shared .single_tag{ width:170px; margin: 5px 6px 5px 6px; } #small #recipes_shared .single_tag .tag_thumbnail{ height: 81px; width: 54px; } #small #recipes_shared .single_tag .tag_images{ height: 81px; } } @media only screen and (min-width : 667px) { #small #recipes_shared .single_tag{ width:152px; margin: 5px 6px 5px 6px; } #small #recipes_shared .single_tag .tag_thumbnail{ height: 71px; width: 48px; } #small #recipes_shared .single_tag .tag_images{ height: 71px; } } @media only screen and (min-width : 732px) /* landscape iphone 6+, Google Pixel?, Nexus 6 */ { #small #recipes_shared .single_tag{ width:170px; margin: 5px 6px 5px 6px; } #small #recipes_shared .single_tag .tag_thumbnail{ height: 81px; width: 54px; } #small #recipes_shared .single_tag .tag_images{ height: 81px; } } /* RELATED TO MY RECIPES LIST VIEW */ #small #recipes .results_page_set table{ border-collapse: collapse; table-layout: fixed; white-space: normal; word-wrap: break-word; border-spacing: 0; width: 100%; } #small #recipes .results_page_set td, #small #recipes .results_page_set tr { padding:0; margin:0; vertical-align:top; } #not_small #fixed_recipes_header{ height:30px; /* must match set_menu_multi_options_topfix(), set_recipes_fixed_header_height(), #recipes_column_top.fixed */ background:#A80739; position:fixed; top:0; left:0; z-index:4; cursor:pointer; /* width set in js. */ } #not_small #recipes #recipes_view_trigger { float: right; text-align:left; width: 76px; background: white; box-sizing: border-box; height: 43px; line-height: 43px; border: 1px #D7D7D7 solid; border-radius: 0px; cursor: pointer; color: #6f6f6f; overflow:hidden; } #small #recipes #recipes_view_trigger { float: right; width: 42px; height: 36px; margin-right: 8px; cursor: pointer; overflow:hidden; line-height:0px; margin-top:10px; } #recipes #recipes_view_trigger .listview_trigger_text{ color: #6f6f6f; float: left; font-weight: normal; line-height: 14px; margin-top: 6px; padding-left: 5px; margin-right: 5px; text-align: center; font-size: 12px; } #small #recipes #recipes_view_trigger .listview_trigger_text{ display:none; } #recipes #recipes_view_trigger .icon_listview{ /* from saeedalipoor.github.io/icono/ */ color:#a80739; /* color dots and lines */ box-sizing: border-box; display: inline-block; vertical-align: middle; position: relative; width: 4px; /* dot width */ margin: 0; margin-right:26px; /* make it line width + (dot-width + space-width between line and dot) to prevent next ele overlapping */ margin-top: -3px; } #small #recipes #recipes_view_trigger .icon_listview{ margin-top: 10px; color: #656565; margin-left:7px; } #recipes #recipes_view_trigger .icon_listviewt:after, #recipes #recipes_view_trigger .icon_listview:before { content: ""; } #recipes #recipes_view_trigger .icon_listview, #recipes #recipes_view_trigger .icon_listview:before { height: 4px; /* dot/line height */ box-shadow: inset 0 0 0 32px, 0 -8px 0 0, 0 8px 0 0; /* line-height + height between lines */ } #recipes #recipes_view_trigger .icon_listview:before { width: 19px; /* line width */ left: 7px; /* dot-width + space-width between line and dot */ position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #recipes #recipes_view_trigger .icon_gridview:after, #recipes #recipes_view_trigger .icon_gridview:before { content: ''; } #recipes #recipes_view_trigger .icon_gridview { /*
*/ color:#a80739; /* grid dot color */ display: inline-block; width: 5px; /* grid dot width */ height: 5px; /* grid dot height */ box-shadow: 0 -8px 0, -8px -8px 0, 8px -8px 0, 0 0 0 32px inset, -8px 0 0, 8px 0 0, 0 8px 0, -8px 8px 0, 8px 8px 0; /* space between grid dots*/ vertical-align: middle; margin: 0px; margin-right:5px; /* make it grid-dot width to prevent next ele overlapping */ margin-top: -3px; /* help vertically center in parent */ margin-left: 11px; /**/ } #small #recipes #recipes_view_trigger .icon_gridview{ margin-top: 10px; color: #656565; margin-left: 18px; } #not_small #recipes #list_view_info_popup{ width:600px; left:50%; margin-left:-300px } #recipes #list_view_info_popup .header{ font-weight:bold; margin:10px 0; } #recipes #list_view_info_popup .premiumlink{ font-weight:bold;margin:5px 0 0 0;text-decoration:underline;color:blue; } #recipes #list_view_info_popup .bullets_wrapper{ margin-bottom:15px; line-height:24px; } #not_small #recipes #list_view_info_popup img{ width:560px; } #small #recipes #list_view_info_popup img{ width:100%; } #recipes #recipes_column_top{ height:46px; /* wraps actions related to multi-update*/ background:#eef2f4; } #recipes #recipes_column_top.fixed{ position: fixed; /**/ top: 30px; /* height of fixed_recipes_header. */ z-index: 10000; /* tine set this correctly */ box-sizing: border-box; /* left and width set in js */ /* padding-left set in js*/ } .recipes_multiupdate_div #multiupdate_menu{ float:left; text-align:center; } #small .recipes_multiupdate_div #multiupdate_menu{ background:white; width:100%; padding-top:5px; background:#CC0C47; border-radius: 4px; } #not_small .recipes_multiupdate_div #multiupdate_menu .menu_option{ float:left; height:46px; line-height:46px; margin-left:8px; font-size:15px; } #small .recipes_multiupdate_div #multiupdate_menu .menu_option{ margin-top: 12px; font-size: 15px; width: 104px; margin-left: 10px; } #small .recipes_multiupdate_div #multiupdate_menu .menu_option_cancel{ color: white; font-weight: bold; text-decoration: underline; font-size: 15px; height: 46px; line-height: 46px; padding: 22px 0px; line-height: 0px; cursor: pointer; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; text-align: center; margin-top: 10px; margin-bottom: 10px; } #small .recipes_multiupdate_div #multiupdate_menu .menu_option #multi_delete_recipes_confirm{ position:absolute; height:100%; width:110px; top:0; left:0; } #not_small .recipes_multiupdate_div #multiupdate_menu .menu_option #multi_delete_recipes_confirm{ position:absolute; height:100%; width:150px; top:0; left:0; } #not_small .recipes_multiupdate_div #multiupdate_menu .menu_option_inner, #not_small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{ padding:17px 7px; line-height: 0px; margin-top: 5px; border: solid #d2d2d2 1px; border-radius: 4px; cursor:pointer; background:white; min-width: 60px; max-width:106px; /* todo this is still too big for soem screen widths.. need better handle if user increases font */ box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow: hidden; } #small .recipes_multiupdate_div #multiupdate_menu .menu_option_inner, #small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{ padding:22px 0px; line-height: 0px; border-radius: 4px; cursor:pointer; background:white; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow: hidden; text-align:center; } #small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{ background: #881539; color:white; } #not_small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{ background: #cc0c47; color:white; } #not_small .recipes_multiupdate_div #multiupdate_menu #multi_delete_recipes_confirm.clicked #delete_confirm_inner, #small .recipes_multiupdate_div #multiupdate_menu #multi_delete_recipes_confirm.clicked #delete_confirm_inner{ background: gray; color:white; } #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu .menu_option:not(.inactive):hover .menu_option_inner{ border: solid black 1px; } #not_small .recipes_multiupdate_div #multiupdate_menu .menu_option.clicked .menu_option_inner, #small .recipes_multiupdate_div #multiupdate_menu .menu_option.clicked .menu_option_inner{ color:#A80739; } #not_small .recipes_multiupdate_div #multiupdate_menu .menu_option.inactive .menu_option_inner, #small .recipes_multiupdate_div #multiupdate_menu .menu_option.inactive .menu_option_inner { cursor:default; color:gray; } #not_small .recipes_multiupdate_div #multiupdate_menu #multiupdate_more_menu{ position: absolute; background: #eef2f4; right: 0; width: 110px; padding-left: 3px; z-index: 2; border: #e4dfdf 1px solid; border-top: none; } @media screen and (max-width : 700px){ #not_small #mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{ display:none; } #not_small #mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{ float:left; } #not_small #mob .recipes_multiupdate_div #multiupdate_menu .menu_option_inner{ xxpadding: 17px 0px; } } @media screen and (min-width : 701px){ #mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{ float:left; } #mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{ display:none; } } @media screen and (max-width : 660px){ #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu .menu_option_inner{ padding: 0 4px; } #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu .menu_option{ margin-left:4px; } } @media screen and (max-width : 799px){ /* diffferent split for non_mob than mob because vertical search bar is wider on non_mob*/ #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{ display:none; } #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{ float:left; } } @media screen and (min-width : 800px){ #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{ float:left; } #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{ display:none; } } #not_small .tags_menu.not_small_popup_menu{ width:382px; /* same as for 2 column */ text-align:left; box-sizing:border-box; padding-bottom:0; text-align:left; left: 50%; margin-left: -178px; } #not_small #multiupdate_tag_menu.tags_menu{ top:75px; } #not_small .tags_menu.two_column_tags{ width:362px; /* (166+margin 10)*2 + 10 tag_menu_inner padding */ /* never a scrollbar because if has one, will switch to 3 columns */ margin-left: -181px; } #not_small .tags_menu.three_column_tags{ width:558px; /* (166+margin 10)*3 + 10 tag_menu_inner padding + 20px for scrollbar */ margin-left: -279px; } #not_small #mob .tags_menu.three_column_tags{ width:538px; /* no scroll bar width on mobile */ margin-left: -264px; } #not_small .tags_menu .tag_menu_inner { padding: 5px 0px 25px 10px; /* right space comes from .cb_tag margin-right*/ max-height: 810px; /* changed in js */ overflow-y: auto; box-sizing:border-box; } #small .tags_menu { /* scroll is on inner instead. is this necessary to set? */ overflow-y: hidden; text-align:left; } #small .tags_menu .menu_label{ max-width:130px; } @media screen and (min-width : 360px){ #small .tags_menu .menu_label{ max-width:164px; } } #small .tags_menu .tag_menu_inner { /* inner scrolling so close and save buttons stay on top */ overflow-y: auto; padding: 5px 0px 25px 10px; box-sizing:border-box; /* height set in js */ } #not_small .tags_menu.two_column_tags .cb_tag, #not_small .tags_menu.three_column_tags .cb_tag{ float:left; width:164px; } .tags_menu .tags_action{ text-align: center; font-size: 16px; font-weight: bold; cursor: pointer; float: left; margin-top: 2px; height: 40px; line-height: 0px; padding: 20px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } .tags_menu .tags_action.save { background: white; width: 80px; border-radius: 3px; color: #505050; } .tags_menu .tags_action.save.disabled { /* not class=hidden because want voiceover to say it's a disabled button */ background: transparent; color: transparent; } .tags_menu .tags_action.save.attention { background:yellow; } .tags_menu .tags_action.save.clicked { background: aliceblue; color: #777777; } .tags_menu .tags_action.cancel { width: 80px; margin-right: 10px; margin-left: 12px; background: transparent; color: white; } .tags_menu #newtag_div{ margin:5px 0; overflow:hidden; } .tags_menu #newtaginput{ width: 160px; box-sizing: border-box; border: solid gray 1px; margin: 0 0 0 0; height: 36px; line-height: 36px; padding: 0 2px; float:left; } #small .tags_menu #newtaginput{ width: 150px; } @media screen and (min-width : 360px){ #small .tags_menu #newtaginput{ width: 180px; } } .tags_menu #newtag_trigger{ text-align:center; height: 36px; line-height: 36px; box-sizing: border-box; border: 1px gray solid; border-radius:4px; float:left; margin-left:10px; padding:0 5px; cursor:pointer; } .tags_menu #newtag_submit, .tags_menu #newtag_ok, .tags_menu #newtag_button_next{ text-align: center; border: 1px gray solid; /* border adds extra height, even with border-box, if padding takes up the full height */ border-radius: 4px; float: left; margin-left: 10px; cursor: pointer; height: 34px; line-height: 0px; padding: 17px 0px; padding-left: 5px; padding-right: 5px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } .tags_menu #newtag_submit.clicked, .tags_menu #newtag_button_next.clicked{ color:#A80739; } .tags_menu #newtag_submit.disabled, .tags_menu #newtag_button_next.disabled{ color:lightgray; border: 1px lightgray solid; } .tags_menu #newtag_submit.hidden, .tags_menu #newtag_button_next.hidden{ display: none; } .tags_menu .cb_tag{ min-height:38px; line-height: 38px; border-bottom: 1px #cdcdcd dotted; white-space: nowrap; overflow: hidden; cursor:pointer; margin-right:10px; /* if change, also update js where calculate cb_width for tag menu column view */ } .tags_menu #archive_recipe{ border: none; margin-left: 0px; margin-bottom: 0; width: 110px; background: #ff000017; background:aliceblue; min-height: 38px; line-height: 38px; white-space: nowrap; overflow: hidden; cursor: pointer; margin-right: 10px; padding-left:3px; } .tags_menu.two_column_tags .cb_tag{ float:left; /* width set in js */ } .tags_menu .cb_tag.not_a_match{ display:none; } .recipes_multiupdate_div #listview_cookbook_picker_div{ position:absolute; font-size:15px; z-index:100; padding:6px; border-radius:3px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.48); background: white; border: solid 2px #eeeeee; min-width: 140px; text-align: left; line-height: 26px; /* msg if must edit */ top:45px; right:5px; } .recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_can_add, .recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_added{ border: solid 1px gray; padding: 5px; min-height: 26px; line-height: 26px; margin: 3px 0; border-radius: 3px; overflow:hidden; } .recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_can_add:hover{ background:#eeeeee; cursor: pointer; } .recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_can_add .is_added{ display:none; } .recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_added .is_added{ display:inline-block; } #small #mealplan_others .line{ white-space: nowrap; } #mealplan_others .line_wrapper { margin:4px 0; border-bottom: 1px #e1e1e1 solid; overflow:hidden; } #mealplan_others #submit_mp_others { height: 42px; line-height: 42px; border-radius: 3px; border: 1px gray solid; padding:0 5px; cursor: pointer; float: left; text-align: center; margin-right:6px; margin-bottom: 10px; font-size: 16px; margin: 10px 0 5px 15px; } #small #mealplan_others #submit_mp_others { margin: 0; } #mealplan_others .cb_container{ line-height: 18px; /* height of checkmark */ margin: 12px 0; } #not_small #mealplan_others.not_small_popup_menu{ max-height: 390px; overflow: hidden; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 300px; padding:15px; } @media screen and (min-height : 600px){ #not_small #mealplan_others.not_small_popup_menu{ max-height: 520px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 400px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 300px; } } @media screen and (min-height : 700px){ #not_small #mealplan_others.not_small_popup_menu{ max-height: 620px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 500px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 400px; } } @media screen and (min-height : 800px){ #not_small #mealplan_others.not_small_popup_menu{ max-height: 720px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 600px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 500px; } } @media screen and (min-height : 900px){ #not_small #mealplan_others.not_small_popup_menu{ max-height: 840px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 700px; } #not_small #mealplan_others.not_small_popup_menu .not_small_menu_scroll{ max-height: 600px; } } #not_small .menu_with_mp_quickview /* recipe #mealplan_options and recipes #multiupdate_mp_menu */ { /* for multiupdate_mp_menu: top set in js and is fixed menu */ /* for mealplan_options: top set below here */ background-color: #A80739; padding: 15px 10px 5px 10px; text-align: left; width:600px; height: 400px; border-radius: 3px; margin-left:-310px; /* half width + padding*/ left:50%; } #not_small #mealplan_options.menu_with_mp_quickview { position: absolute; top: 40px; right: 50px; left: auto; } #small .menu_with_mp_quickview .multiupdate_mp_menu_action{ width: 80px; margin-right: 10px; float: right; box-sizing: border-box; margin-top: 4px; min-height: 36px; line-height: 36px; text-align: center; font-size: 16px; font-weight: bold; cursor:pointer; } .menu_with_mp_quickview .mp_menu_cant_add_div{ color:white; padding:20px; } #not_small .menu_with_mp_quickview .mp_menu_cant_add_div{ float:left; width:230px; } #not_small .menu_with_mp_quickview .mp_menu_chooser_div{ float:left; } #small .menu_with_mp_quickview .mp_menu_chooser_div{ padding-top:15px; } #small .menu_with_mp_quickview{ background-color:#A80739; padding:0px 0px 5px 0px; } .menu_with_mp_quickview .js_mp_quickview_showmore{ background: #f0b2c5; text-align:center; } .menu_with_mp_quickview .js_mp_quickview_showmore .text{ display: inline-block; vertical-align: top; height: 40px; line-height: 0px; padding: 20px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } .menu_with_mp_quickview .js_mp_quickview_showmore .ic_upchevron, .menu_with_mp_quickview .js_mp_quickview_showmore .ic_downchevron{ opacity: .6; height: 40px; width: 40px; display: inline-block; } .menu_with_mp_quickview .showing_less_div, .menu_with_mp_quickview .showing_more_div{ overflow: hidden; max-height: 40px; } .menu_with_mp_quickview .js_mp_quickview_showmore.showing_more .showing_less_div{ display: none; } .menu_with_mp_quickview .js_mp_quickview_showmore.showing_less .showing_more_div{ display:none; } .menu_with_mp_quickview #mp_quickview{ background: white; padding-bottom: 15px; text-align: left; overflow:hidden; overflow-y: scroll; text-align:center; z-index: 950; } #small .menu_with_mp_quickview #mp_quickview{ border: 2px solid #A80739; } #not_small .menu_with_mp_quickview #mp_quickview{ border-radius: 4px; margin-left: 2px; float:left; height:380px; width:306px; overscroll-behavior-block: contain; } @media only screen and (max-width : 619px) { #not_small #mob .menu_with_mp_quickview{ width:560px; margin-left:-290px; /* half width + padding*/ } #not_small #mob .menu_with_mp_quickview #mp_quickview{ width:260px; } #not_small #mob #mealplan_options.menu_with_mp_quickview{ margin:auto; } } @media only screen and (width : 768px) { #not_small #mob #mealplan_options.menu_with_mp_quickview{ right:74px } } @media only screen and (max-width : 767px) { #not_small #mob #mealplan_options.menu_with_mp_quickview{ right:10px; } } @media only screen and (max-width : 599px) { #not_small #mob #mealplan_options.menu_with_mp_quickview{ right:0px; } } #small .menu_with_mp_quickview .mp_quickview_datepicker{ height:315px; } .menu_with_mp_quickview .multi_add_to_mp_wrapper{ position:relative; } .menu_with_mp_quickview .recipe_mp_add_to_queue { text-align:center; background:rgb(247, 247, 247); border:rgb(170, 170, 170) solid 1px; /* border adds extra height, even with border-box, if padding takes up the full height */ border-radius:4px; font-weight:bold; cursor:pointer; width:281px; margin: 0 auto; /* if make taller, check that calendar doesn't get pushed below its section, also with Android large font.*/ height: 36px; line-height: 0px; padding: 18px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } .menu_with_mp_quickview .recipe_mp_add_to_queue.inactive{ color: #bdbdbd; cursor: default; background: #e2e2e2; } .menu_with_mp_quickview .recipe_mp_add_to_queue.clicked{ background:#CC0C47; } .menu_with_mp_quickview .ui-datepicker{ margin:0 auto; } .menu_with_mp_quickview .or_line{ text-align: center; border-bottom: 1px solid rgb(218, 218, 218); line-height: 2px; margin: 20px auto 20px auto; width:281px; } .menu_with_mp_quickview .or_line span{ background: #A80739; padding: 0 10px; color: rgb(218, 218, 218); } #not_small .recipes_multiupdate_div{ } #small #recipes .recipes_multiupdate_div{ position:fixed; z-index:900; top: 54px; width:124px; right:60px; } #not_small .recipes_multiupdate_div.fixed{ position: fixed; top: 30px; z-index: 10000; box-sizing: border-box; background: #eef2f4; } #not_small #multiupdate_done_msg, #not_small #multiupdate_deleted_done_msg{ height: 40px; line-height: 36px; padding: 0 10px; box-sizing: border-box; background: #FFFDE7; overflow: hidden; text-align: left; z-index: 1; position: relative; margin: 0 0 0 20px; } #not_small #multiupdate_done_msg.fixed, #not_small #multiupdate_deleted_done_msg.fixed{ z-index: 900; position: fixed; top: 30px; /* beneath #fixed_recipes_header */ width: 100%; } #small #recipes #multiupdate_done_msg{ margin-top: 4px; box-sizing: border-box; background: #FFFDE7; overflow: hidden; text-align:center; padding: 0; height:auto; min-height: 36px; line-height: 26px; padding-top: 3px; z-index: 900; position: fixed; top: 44px; width: 100%; } #not_small .recipes_multiupdate_div #check_all_none_wrapper { float:left; height: 46px; line-height: 46px; margin-left: 13px; padding-right:10px; padding-left:7px; } #small .recipes_multiupdate_div #check_all_none_wrapper { position: fixed; right: 0; top: 54px; height: 46px; padding-right: 10px; padding-left: 8px; background: white; } #not_small .recipes_multiupdate_div #check_all_none_border { float: left; box-sizing: border-box; height: 32px; border: 1px #D0CFCF solid; border-radius: 2px; padding: 0 4px; cursor: pointer; margin-top: 7px; } #small .recipes_multiupdate_div #check_all_none_border { float: left; box-sizing: border-box; height: 32px; border: 1px #6c6c6c solid; border-radius: 2px; padding: 0 4px; cursor: pointer; margin-top: 4px; } #recipes #results_set.view_list{ text-align:left; } #not_small #recipes #results_set.view_list{ font-family:arial; } #not_small #recipes #results_set.view_list .results_page_set{ margin-left:10px; /* space between vertical search and recipes */ background:white; margin-right:10px; /* space to right of recipes */ } #small #recipes #results_set.view_list .results_page_set{ margin-left:5px; background:white; margin-right:5px; } #recipes .recipe_border_bottom{ height:0px; padding-top:2px; margin-bottom:2px; border-bottom:1px gray dotted; } #recipes .recipe_border_topfirst{ height:0px; margin-bottom:2px; } #recipes .single_list_recipe .recipe_col { cursor:pointer; } #recipes .single_list_recipe .recipe_cb { vertical-align: top; text-align: center; cursor: pointer; } #recipes .single_list_recipe .recipe_cb, #recipes .single_list_recipe .recipe_cb .col_width { width: 47px; } #small #recipes .single_list_recipe .recipe_cb, #small #recipes .single_list_recipe .recipe_cb .col_width { width: 30px; } #not_small #recipes .single_list_recipe .col_spacer, #not_small #recipes .single_list_recipe .col_spacer div{ width:3px; background:transparent; height:63px; } #small #recipes .single_list_recipe .col_spacer, #small #recipes .single_list_recipe .col_spacer div{ width:3px; background:transparent; height:58px; } #not_small #recipes .single_list_recipe .col_confirmed_indicator{ height:63px; width:2px; } #not_small #recipes .single_list_recipe .col_confirmed_indicator div{ width:2px; height:57px; margin-top:3px; margin-bottom:3px; } #small #recipes .single_list_recipe .col_confirmed_indicator{ height:58px; width:2px; } #small #recipes .single_list_recipe .col_confirmed_indicator div{ width:2px; height:54px; margin-top:2px; margin-bottom:2px; /* also setting bottom helps prevent single recipe getter shorter if all tags are removed */ } #recipes .single_list_recipe.unconfirmed .col_confirmed_indicator div{ background:#CC0C47; } #recipes .single_list_recipe .recipe_cb .col_overflow { overflow: hidden; } #recipes .single_list_recipe .recipe_cb .icon_extender { position: absolute; width: 56px; left: 0; bottom: 0; background: transparent; height: 100%; } #small #recipes .single_list_recipe .recipe_cb .icon_extender { right: 0; left: auto; bottom: -25px; height: 55px; } #mob #recipes .single_list_recipe .recipe_cb .icon_extender { width:74px; } #recipes .single_list_recipe .recipe_orig_link_col, #recipes .single_list_recipe .recipe_orig_link_col .col_width { width: 48px; } #recipes .single_list_recipe .recipe_orig_link_col .col_overflow { overflow: hidden; } #recipes .single_list_recipe .recipe_orig_link_col .icon_extender { position: absolute; width: 48px; right: 0; bottom: 0; background: transparent; height: 100%; } #recipes .single_list_recipe.selected{ background:#FFFDE7; } #not_small #recipes .single_list_recipe .recipe_thumb_list{ float: left; margin: 0; background-position: center center; background-size: cover; width: 55px; height: 55px; margin-top: 4px; margin-bottom: 4px; } #small #recipes .single_list_recipe .recipe_thumb_list{ float: left; margin: 0; background-position: center center; background-size: cover; width: 52px; height: 52px; margin-top: 3px; margin-bottom:3px; } #not_small #recipes .single_list_recipe td, #not_small #recipes .single_list_recipe .recipe_cb .col_overflow, #not_small #recipes .single_list_recipe .recipe_orig_link_col .col_overflow, #not_small #recipes .single_list_recipe .recipe_info_left_margin_col div{ height:61px; } #recipes .single_list_recipe .recipe_info_col{ width:99%; } #recipes .single_list_recipe .recipe_info_left_margin_col{ width:4px; } #not_small #recipes .single_list_recipe .recipe_info_left_margin_col{ width:7px; } #recipes .single_list_recipe .image_col{ width:53px; vertical-align: top; } #not_small #recipes .single_list_recipe .recipe_title_div{ min-height: 23px; line-height: 23px; font-size: 17px; color: blue; color:#0000e6; } #not_small #recipes .single_list_recipe.clicked .recipe_title_div{ color:#6a00e6; } #small #recipes .single_list_recipe.clicked .recipe_title_div{ color:#450096; } #small #recipes .single_list_recipe .recipe_title_div{ min-height: 17px; line-height: 17px; font-size: 15px; color: rgb(72, 72, 72); font-weight: bold; padding: 2px 2px 1px 0; } #recipes .single_list_recipe .starred_wrapper, #recipes .single_list_recipe .madeit_wrapper, #recipes .single_list_recipe .rating_wrapper { height: 20px; width: 18px; position: relative; float: left; } #not_small #recipes .single_list_recipe .rating_wrapper{ width: auto; opacity:.7; padding-right: 2px; font-size:95%; } #small #recipes .single_list_recipe .starred_wrapper, #small #recipes .single_list_recipe .madeit_wrapper, #small #recipes .single_list_recipe .rating_wrapper{ height: 17px; width: 17px; } #small #recipes .single_list_recipe .rating_wrapper{ width: auto; text-align:left; padding-right: 2px; } #recipes .single_list_recipe .starred_wrapper .starred_image, #recipes .single_list_recipe .madeit_wrapper .madeit_image{ position: absolute; box-sizing: border-box; height: 15px; width: 15px; top: 3px; border: 1px solid white; } #small #recipes .single_list_recipe .starred_wrapper .starred_image, #small #recipes .single_list_recipe .madeit_wrapper .madeit_image{ height: 15px; width: 15px; top: 1px; } #small #recipes .single_list_recipe .madeit_wrapper .madeit_image{ height: 15px; width: 15px; top: 2px; } #recipes .single_list_recipe .starred_wrapper .starred_image{ background:#8d8d8d; background-image: url(https://cdn.copymethat.com/static/star_40_transparent.png); /* also preloaded */ background-position: center center; background-size: cover; } #recipes .single_list_recipe .madeit_wrapper .madeit_image{ background:#8d8d8d; background-image: url(https://cdn.copymethat.com/static/checkbox_28_checked_transparent.png); /* also preloaded */ background-position: center center; background-size: cover; } #recipes .single_list_recipe .recipe_origsite_div{ font-size: 16px; min-height:19px; line-height:19px; color: #4a4949; white-space: nowrap; } #small #recipes .single_list_recipe .recipe_origsite_div{ font-size: 15px; line-height:19px; /* if change, also update recipe_origsite_text */ } #small #recipes .single_list_recipe .recipe_origsite_div .recipe_origsite_text{ overflow:hidden; /** putting overflow on parent didn't work on iOS - if long link also had star or madeit, link disappeared */ min-height: 19px; /* same as parent recipe_origsite_div*/ } #recipes .single_list_recipe .recipe_tags_div{ font-size:16px; line-height: 21px; color:black; } #small #recipes .single_list_recipe .recipe_tags_div{ font-size:15px; line-height:19px; } #recipes .single_list_recipe .recipe_border_col{ height:1px; } #recipes .single_list_recipe .recipe_tags_div #recipes .single_list_recipe .made_this_tag{ color:#717171; } #recipes .single_list_recipe .recipe_tag, #recipes .single_list_recipe .recipe_tag_middot, #recipes .single_list_recipe .archived_tag { float:left; padding: 0 1px; } #recipes .single_list_recipe .archived_tag { color: red; } #recipes .single_list_recipe .recipe_orig_link_text{ font-size: 12px; line-height: 16px; text-align: center; color: black; margin-top: 14px; border-left: 1px gray dotted; } #recipes .single_list_recipe .recipe_cb .checkbox_wrapper, .tags_menu .cb_tag .checkbox_wrapper, .tags_menu #archive_recipe .checkbox_wrapper, .recipes_multiupdate_div #check_all_none_wrapper .checkbox_wrapper { position:relative; width: 20px; } #not_small .recipes_multiupdate_div #check_all_none_wrapper .checkbox_wrapper{ z-index:3; } .tags_menu .cb_tag .checkbox_wrapper, .tags_menu #archive_recipe .checkbox_wrapper { margin-top:4px; } #not_small #recipes .single_list_recipe .recipe_cb .checkbox_wrapper{ margin-left: 13px; margin-top:14px; } #small #recipes .single_list_recipe .recipe_cb .checkbox_wrapper{ height:26px; /* at least height of checkbox_border and its top */ margin-top:5px; } #recipes .single_list_recipe .recipe_cb .checkbox_border, .tags_menu .cb_tag .checkbox_border, .recipes_multiupdate_div #check_all_none_wrapper .checkbox_border, .tags_menu #archive_recipe .checkbox_border { position:absolute; box-sizing:border-box; background:white; height:20px; width:20px; top:6px; /* to vertically center*/ border:2px solid #cfcfcf; /* color of checkbox border. Visible border determined by height/width (extra px so background doesn't show)*/ border-radius:1px; } #recipes .single_list_recipe .recipe_cb.hover .checkbox_border, .tags_menu .cb_tag.hover .checkbox_border, .tags_menu #archive_recipe.hover .checkbox_border { border-color: #4a4a4a; } #recipes .single_list_recipe .recipe_cb .checkbox_image_check, .tags_menu .cb_tag .checkbox_image_check, .recipes_multiupdate_div #check_all_none_wrapper .checkbox_image_check, .tags_menu #archive_recipe .checkbox_image_check { display:block; position:absolute; top:7px; left:1px; height:18px; width:18px; background:white; } #recipes .single_list_recipe .recipe_cb.checked .checkbox_image_check, .tags_menu .cb_tag.has_all .checkbox_image_check, .recipes_multiupdate_div #check_all_none_wrapper.all_checked .checkbox_image_check, .tags_menu #archive_recipe.has_all .checkbox_image_check{ background: #292929; /* color of checkmark */ /* image also preloaded in html */ background-image: url(https://cdn.copymethat.com/static/checkbox_36_checked_transparent.png); background-position: center center; background-size: cover; } .tags_menu .cb_tag.has_some .checkbox_image_check, .recipes_multiupdate_div #check_all_none_wrapper.some_checked .checkbox_image_check, .tags_menu #archive_recipe.has_some .checkbox_image_check{ background: #292929; /* color of line */ /* image also preloaded in html */ background-image: url(https://cdn.copymethat.com/static/checkbox_36_indeterminate_transparent.png?v-2); background-position: center center; background-size: cover; } .tags_menu #archive_recipe.has_all .is_not_archived{ display:none; } .tags_menu #archive_recipe.has_some .is_archived{ display:none; } .tags_menu #archive_recipe.has_none .is_archived{ display:none; } .tags_menu #trigger_archive_info{ display: inline-block; vertical-align: top; line-height: 38px; cursor: pointer; } .tags_menu #trigger_archive_info div{ display: inline-block; height: 20px; line-height: 20px; width: 20px; border-radius: 20px; text-align: center; color: #505050; border: 1px solid #dbdbdb; } .tags_menu #archive_info{ margin-left: 12px; margin-right: 12px; background: #ffffc9; margin-top: -6px; padding-right: 10px; max-width: 500px; } #recipes_shared .people{ text-align:center; } #not_small #recipes_shared .people{ margin-top: 20px; } #small #recipes_shared .people{ margin-top: 48px; /* must be at least height of searchtype_wrapper */ } #recipes_shared .people .single_person, #follower_ing .single_person{ display:inline-block; color:black; font-size:14px; overflow:hidden; background:white; text-align:center; border-radius:10px; cursor:pointer; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); padding: 10px 0; } #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ margin:5px 3px 5px 3px; width:152px; } @media only screen and (min-width : 360px) { #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ width:170px; margin:5px 3px 5px 3px; } } @media only screen and (min-width : 375px) { #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ width:170px; margin: 5px 6px 5px 6px; } } @media only screen and (min-width : 411px) /* iphone 6+, Google Pixel 2, Nexus 6 */ { #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ width:190px; margin: 5px 6px 5px 6px; } } @media only screen and (min-width : 480px) { #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ width:152px; margin:5px 3px 5px 3px; } } @media only screen and (min-width : 568px) { #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ width:170px; margin: 5px 6px 5px 6px; } } @media only screen and (min-width : 667px) { #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ width:152px; margin: 5px 6px 5px 6px; } } @media only screen and (min-width : 732px) /* landscape iphone 6+, Google Pixel?, Nexus 6 */ { #small #recipes_shared .people .single_person, #small #follower_ing .single_person{ width:170px; margin: 5px 6px 5px 6px; } } #not_small #recipes_shared .people .single_person, #not_small #follower_ing .single_person{ cursor:pointer; width:231px; background: white; margin:0px 7px 14px 7px; position:relative; -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); text-align:center; display:inline-block; } #not_small #not_mob #recipes_shared .people .single_person:hover, #not_small #not_mob #follower_ing .single_person:hover{ -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); } @media screen and (min-width: 800px) and (max-width: 849px){ #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person { margin: 0px 9px 14px 9px; } } @media screen and (min-width : 900px) and (max-width: 1000px){ #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person { margin: 0px 12px 14px 12px; } } @media only screen and (max-width : 760px) { #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person{ width:260px; } } @media only screen and (min-width : 850px) and (max-width : 1000px) { #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person{ width:260px; } } #recipes_shared .people .profile_image_div, #follower_ing .single_person .profile_image_div{ margin: 5px auto; height:75px; width:75px; } #recipes_shared .people .profile_image_div img, #follower_ing .single_person .profile_image_div img{ height:75px; width:75px; } #recipes_shared .people .name_div, #follower_ing .single_person .name_div{ font-size:17px; line-height:20px; min-height:20px; white-space: nowrap; margin:0 4px; overflow:hidden; text-decoration:None; cursor:pointer; } #small #recipes_shared .people .name_div, #small #follower_ing .single_person .name_div{ font-size:14px; font-weight:bold; } #recipes_shared .people .name_div a, #follower_ing .single_person .name_div a{ text-decoration:None; color:black; } #recipes_shared .people .count_foll_div, #follower_ing .single_person .count_foll_div{ font-size:14px; line-height:23px; height:23px; } #follower_ing .single_person .follow_button_div{ height:32px; } #follower_ing .single_person .button_follow{ background-color: #2196F3; width:100px; height:34px; padding:17px 0; line-height:0px; text-align:center; font-size: 13px; color: #fff; border: none; border-radius: 3px; margin: 0 auto; cursor:pointer; margin-top:5px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } #not_small #recipe .content, #not_small #recipe_u .content, #not_small #recipe_edit .content{ padding-top:0; } #recipe_u .star{ display:inline-block; margin-bottom:-2px; height:16px; width:16px; cursor:pointer; /*uses sprite sheet sprite_sheet_for_star_only. */ background-position:-302px -2px; /* unselected/white star */ } #recipe_u .starred{ /*uses sprite sheet sprite_sheet_for_star_only*/ background-position:-262px -2px; /* selected/yellow star */ } #recipe_u .user_description_ta, #recipe_u .servings_ta, #recipe_u .title_ta { margin-top:7px; font-weight:normal; } #small #recipe_u .star_recipe { padding:8px; float:right; } #recipe_u #title_options_select { width:570px; padding:2px; border:none; height:32px; box-sizing:border-box; outline: none; background:transparent; background:url('https://cdn.copymethat.com/static/dropdown_arrow.png?v=2') 0 0 no-repeat; background-position: top right; -webkit-appearance: none; border-radius: 0; -webkit-border-radius:0; z-index:2; font-size:17px; color: transparent; width:100%; max-width:570px; position:absolute; top:0; left:0; } #small #recipe_u #title_options_select { width:300px; } #recipe_u .title_input_has_options{ width:525px; z-index:5; } #small #recipe_u .title_input_has_options{ width:255px; } @media screen and (min-width : 360px){ #small #recipe_u #title_options_select { width:340px; } #small #recipe_u .title_input_has_options{ width:295px; } } @media screen and (min-width : 375px){ #small #recipe_u #title_options_select { width:355px; } #small #recipe_u .title_input_has_options{ width:310px; } } @media screen and (min-width : 411px){ #small #recipe_u #title_options_select { width:390px; } #small #recipe_u .title_input_has_options{ width:345px; } } @media screen and (min-width : 568px){ #small #recipe_u #title_options_select { width:545px; } #small #recipe_u .title_input_has_options{ width:500px; } } #recipe_u .left_top{ width:570px; float:left; } #recipe_u .photo_container{ float: right; width: 300px; border: 1px none #ccc; font-size: 1em; background:white; margin:5px 0px 15px 15px; } #recipe_u .photo{ max-height:300px; max-width:300px; float:right; cursor:pointer; margin:5px 0px 5px 0px; } #recipe_u .image_change_trigger_div{ float: right; } #recipe_u .media_clear{ } @media screen and (max-width : 767px) { /* ipad portrait is 768 */ /* width of left_side + photo container */ #recipe_u .photo_container{ float:left; margin:15px 0px 0px 0px; } #recipe_u .photo{ float:left; margin:5px 0px 5px 0px; } #recipe_u .image_change_trigger_div{ float: left; } #recipe_u .left_top{ width:100%; } #recipe_u .media_clear{ clear:both; } } #not_small #recipe_u #images_choices_menu{ z-index:1000; background:black; position: absolute; box-sizing:border-box; } @media screen and (min-device-width : 900px){ #not_small #recipe_u #images_choices_menu{ width:825px; left: 50%; top:100px; /* changed in js */ margin: 0 0 0 -412px; margin-bottom:100px; } } @media screen and (max-device-width : 899px){ #not_small #recipe_u #images_choices_menu{ width:80%; top:100px; /* changed in js */ margin: 0 0 0 10px; margin-bottom:100px; } } #recipe_u #images_choices_menu .image_choice{ max-height: 150px; max-width: 150px; vertical-align: top; margin-bottom: 4px; } #not_small #recipe_u #images_choices_menu .image_choice{ max-height: 200px; max-width: 200px; vertical-align: top; margin-bottom: 4px; } #not_small #recipe_navi .navi_internal_more{ border-right:white 2px solid; border-radius:0 3px 3px 0; } #small #recipe_navi{ position:fixed; top:0; width:100%; height:44px; z-index:200; border-top: 1px white solid; } #small #recipe_u #recipe_navi{ background:rgb(228, 228, 228); } #small #recipe_navi .navi_internal{ display:block; float:left; width:20%; color:black; margin:0; height:44px; padding: 22px 0; line-height:0px; font-size:12px; box-sizing: border-box; background:rgb(228, 228, 228); text-align:center; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } #small #recipe_navi .navi_internal.side_menu_icon{ padding:0px; } #small #recipe_u .side_menu_icon{ height: 40px; float: left; padding: 0 14px; margin-right: 10px; } #small #small_main_navi .side_menu_icon{ overflow:hidden; display:inline-block; float:left; padding:6px 8px 2px 8px; margin-bottom:4px; } #small #small_main_navi .side_menu_icon{ overflow:hidden; display:inline-block; float:left; padding:6px 8px 2px 8px; margin-bottom:4px; } #small #recipes #small_main_navi .side_menu_icon, #small #recipes_shared #small_main_navi .side_menu_icon{ /* OK to extend into search field. Prevent accidentally clicking search field. */ /* extending it too far (22) interferred with iphone voiceover's ability to double-tap to select */ padding-bottom:16px; margin-bottom:0px; } #small #recipe_navi .navi_internal.triple{ width:40%; background: rgb(228, 228, 228); } #small #recipe_navi .navi_back_symbol{ font-size:28px; vertical-align:middle; position:relative; margin-top:-9px; display:inline-block; } #small #recipe_navi .navi_text{ } @media only screen and (max-width : 400px) { #small #recipe_navi .navi_text{ display:none; } } #small #recipe_navi .navi_internal_more, #small #recipe_navi .navi_internal_back, #small #recipe_u #recipe_navi .navi_internal_back{ background:rgb(213, 213, 213); } #small #recipe_navi .navi_internal_back, #small #recipe_u #recipe_navi .navi_internal_back{ border-left:white 2px solid; border-radius:3px 0 0 3px; } #small #recipe_navi .navi_internal_clicked{ background:rgb(167, 167, 167); } #small #recipe_navi .navi_internal_more{ border-right:white 2px solid; border-radius:0 3px 3px 0; } #small #recipe_navi .navi_internal_left{ border-left:#A80739 1px solid; } #small #recipe_navi .navi_internal_middle{ border-right:#A80739 1px solid; border-left:#A80739 1px solid; } #small #recipe_navi .navi_internal_right{ border-right:#A80739 1px solid; } #small #recipe_navi .navi_internal_left, #small #recipe_navi .navi_internal_middle, #small #recipe_navi .navi_internal_right{ border-color:white; } #small #recipe_navi .navi_internal_spacer{ width:0%; border:none; } #recipe #recipe_actions .recipe_option_icon, #recipe_u .recipe_option_icon, #not_small #recipe_actions .recipe_share_option_icon, #recipe .ic_recipe_view, #recipes .recipes_share_icon, #mealplan .calendar_action_icon, .spricon{ /* todo: instead of all these classes, switch all html to spricon (sprite icon) class */ background-image:url('https://cdn.copymethat.com/static/sprite_ic_14.png'); /* also preloaded in base */ /* Make sprite sheet width = number evenly divisible by 100 + width of 1 sprite */ /* Width = 51 sprites. This allows each sprite to be 2% because 100%/(51-1) = 2 */ background-size: 5100% 100%; /* 5100% because 51 sprites. */ } #recipe #recipe_actions .ic_placeholder, #recipe_u .ic_placeholder{ background-image:none; } .ic_facebook{ background-position: 0% 0; } .ic_list_checkbox{ background-position:2% 0; } .ic_delete{ background-position:6% 0; } .ic_mealplan{ background-position: 8% 0; } .ic_link{ background-position:10% 0; } .ic_tag{ background-position:12% 0; } .ic_email{ background-position:14% 0; } .ic_edit{ background-position:16% 0; } .ic_print{ background-position:18% 0; } .ic_share_arrow{ background-position: 20% 0; } .ic_cmt{ background-position: 26% 0; } .ic_mealpan_plus{ background-position: 38% 0; } .ic_edit_2{ background-position:40% 0; } .ic_shoppingcart_plus{ background-position: 44% 0; } .ic_shoppingcart_minus{ background-position: 42% 0; } .ic_share_arrow_outline{ background-position: 52% 0; } .ic_share_arrow_filled{ background-position: 54% 0; } .ic_cmt_plus{ background-position: 56% 0; } .ic_rightarrow{ background-position: 62% 0; } .ic_leftarrow{ background-position: 64% 0; } .ic_upchevron{ background-position: 74% 0; } .ic_downchevron{ background-position: 76% 0; } .ic_search{ background-position: 78% 0; } .ic_plus{ background-position: 80% 0; } .ic_opencircle{ background-position: 82% 0; } .ic_minus{ background-position: 84% 0; } .ic_r_align{ background-position: 86% 0; } .ic_x{ background-position: 88% 0; } .ic_copy{ background-position: 90% 0; } /* ic_recipe_view handled further down; two options */ #small #snapwrapper #recipe.current_showing #inner_recipe_container { xbackground:pink; } #small #snapwrapper{ overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; } #small #snapwrapper.disable_scroll{ overflow-x: hidden; } #small #snapwrapper.disable_snap{ scroll-snap-type: none; } #small #snapwrapper #recipe, #small #snapwrapper #recipe_u, #small #snapwrapper #recipe_edit, #small #snapwrapper #recipe_print { scroll-snap-align: start; display: inline-block; white-space: normal; } #small #snapwrapper #recipe #outer, #small #snapwrapper #recipe_u #outer, #small #snapwrapper #recipe_edit #outer, #small #snapwrapper #recipe_print #outer{ box-sizing: border-box; overflow: hidden; overflow-y: scroll; z-index: 201; position:static; /* height, width set in js */ margin-right: 0px; } #small #snapwrapper #recipe_navi{ position:static; } #not_small #recipe_actions{ float:right; } #not_small #recipe_actions .wrapper_recipe_option, #not_small #recipe_u .wrapper_recipe_option{ display: inline-block; overflow: hidden; padding: 8px; /* if change, also look at navi_action_icons */ float: left; margin-left: 0px; margin-right: 14px; /* delete gets extra margin in html */ background:transparent; cursor:pointer; } @media screen and (max-width : 639px) { #not_small #recipe_actions .wrapper_recipe_option, #not_small #recipe_u .wrapper_recipe_option{ margin-right: 8px; /* delete gets extra margin in html */ } } #not_small #not_mob #recipe_actions .wrapper_recipe_option:hover, #not_small #not_mob #recipe_u .wrapper_recipe_option:hover{ background:white; } #not_small #not_mob #recipe_actions .wrapper_recipe_option.clicked, #not_small #mob #recipe_actions .wrapper_recipe_option.clicked, #not_small #not_mob #recipe_u .wrapper_recipe_option.clicked, #not_small #mob #recipe_u .wrapper_recipe_option.clicked { background: #b1b8bc; } #not_small #recipe_actions .wrapper_recipe_option .action_text{ margin-left: 0px; color:black; font-size: 11px; line-height:28px; height:28px; display:inline-block; text-align:left; vertical-align: top; xxwidth:55px; width:42px; padding-left: 4px; } #not_small #recipe_actions .wrapper_recipe_option .action_text.narrow{ xxwidth:45px; /* shopping list add text shorter than mp's */ } #not_small #recipe_actions .recipe_share_option_icon{ /* uses sprite_ic */ cursor: pointer; float: left; margin-right: 6px; margin-left: 2px; height: 26px; width: 26px; margin-top: 7px; opacity:.7; } #small #recipe #recipe_actions .recipe_option, #small #recipe #recipe_actions #sharing_options .share_option{ border-bottom:1px solid gray; line-height: 40px; min-height:40px; text-align:left; padding-left:10px; font-weight:bold; } #small #recipe #recipe_actions .recipe_option.inactive, #small #recipe #recipe_actions .share_option.inactive{ color:gray; } #small #recipe #recipe_actions .recipe_option.clicked, #small #recipe #recipe_actions .share_option.clicked{ background:#A80739; color:white; } #small #recipe #recipe_actions .recipe_option_icon, #small #recipe_u .recipe_option_icon{ /* uses sprite_ic sheet */ height: 30px; width: 30px; margin-top: 4px; opacity: .65; display: inline-block; float: left; margin-right: 10px; } #not_small #recipe #recipe_actions .recipe_option_icon, #not_small #recipe_u .recipe_option_icon{ height: 28px; /* if change, also look at wrapper_recipe_option and .wrapper_recipe_option .action_text and navi_action_icons */ width: 28px; opacity: .7; float:left; } #small #recipe #recipe_actions .recipe_option_icon.inactive, #small #recipe_u .recipe_option_icon.inactive{ opacity: .5; } #not_small #recipe #recipe_actions #confirm_delete{ position: absolute; top: 4px; right: 5px; width: 100px; background: red; color: white; font-size: 12px; height: 36px; line-height: 36px; cursor: pointer; text-align: center; padding: 0 5px; box-shadow: 3px 3px 5px #888888; } #not_small #recipe #recipe_actions #confirm_delete.clicked{ background:#B60202; cursor:wait; } #small #recipe #recipe_actions #confirm_delete{ background: #A80739; color: white; } #not_small #recipe #recipe_actions #print_premium_msg{ position: absolute; z-index: 100; top: 38px; right: 20px; background-color: white; margin: 0; padding: 10px 10px 10px 10px; text-align: left; width: 250px; border-radius: 3px; border: solid 1px lightgray; } #not_small #recipe #recipe_actions #sharing_options .share_option .forced_private_line{ line-height:20px; overflow: hidden; white-space: nowrap; } #small #recipe #recipe_actions #sharing_options .share_option .forced_private_line{ line-height:18px; overflow: hidden; white-space: nowrap; } #small #recipe #recipe_actions #sharing_options .share_option .forced_private_line .forced_private_msg{ font-size:13px; } #recipe #recipe_actions #sharing_options #share_options_link_input{ width:248px; height: 24px; border: none; } #small #recipe #recipe_actions #sharing_options #share_options_link_input{ width: 95%; height: 30px; } #recipe #recipe_actions #sharing_options #share_options_link_href{ width:248px; height: 30px; display:block; text-decoration:None; color:black; } #small #recipe #recipe_actions #share_options_link_href{ width: 95%; height: 40px; } #not_small #recipe #recipe_actions #sharing_options .share_option img{ margin-top:10px; } #small #recipe #recipe_actions #sharing_options .share_option img{ float:left; cursor: pointer; margin-top:16px; margin-right:10px; } #small #recipe #recipe_actions #sharing_options .share_option_change_default_sharing { line-height:40px; cursor:pointer; text-align:left; } #small #recipe #recipe_actions #sharing_options .share_option_change_default_sharing a{ color:black; text-decoration:underline; padding-left:10px; } #small #recipe #recipe_actions #sharing_options #share_option_change_sharing{ min-height:40px; padding-left:10px; } #small #recipe #recipe_actions #sharing_options .view_sharing_settings{ text-decoration:underline; font-weight:bold; } #not_small #recipe #recipe_actions #sharing_options, #not_small #recipe #recipe_actions #recipe_copy_options { position:absolute;z-index:100; top:38px; right:20px; background-color:white; margin: 0; padding:10px 10px 10px 10px; text-align:left; width:250px; border-radius:3px; border:solid 1px lightgray; } #not_small #recipe #recipe_actions #recipe_copy_options .copy_option{ cursor:pointer; border-bottom:solid 1px gray; display:block; color:rgb(82, 82, 82); text-decoration:none; font-family:arial; font-size:15px; height:auto; line-height:20px; padding-top:9px; padding-bottom:9px; } #not_small #recipe #recipe_actions #recipe_copy_options .copy_option.first{ border-top:solid 1px gray; } #not_small #recipe #recipe_actions #recipe_copy_options .copy_option.clicked{ background:#ececec; } #not_small #recipe #recipe_actions #recipe_copy_options .copy_option.noaction{ cursor:default; } #not_small #recipe #recipe_actions .wrapper_recipe_option #did_copy_recipe{ position:absolute; top:5px; right:5px; width:130px; height:32px; line-height:32px; background:green; color:white; font-size:12px; cursor:default; text-align:center; padding:0 5px; box-shadow: 3px 3px 5px #888888; z-index: 2; } #not_small #recipe #recipe_actions #sharing_options .share_option{ cursor:pointer; height:40px; line-height:40px; border-bottom:solid 1px gray; display:block; color:rgb(82, 82, 82); text-decoration:none; font-family:arial; font-size:15px; } #not_small #not_mob #recipe #recipe_actions #sharing_options .share_option:not(.inactive):hover{ background:rgb(232, 232, 232); } #not_small #recipe #recipe_actions #sharing_options .share_option:not(.inactive).clicked{ background:rgb(232, 232, 232); } #not_small #recipe #recipe_actions #sharing_options .share_option .forced_private_line{ line-height:20px; overflow: hidden; white-space: nowrap; } #not_small #recipe #recipe_actions #sharing_options .share_option.first{ border-top:solid 1px gray; } #not_small #recipe #recipe_actions .view_sharing_settings{ color:#0267F8; cursor:pointer; } #not_small #not_mob #recipe #recipe_actions .view_sharing_settings:hover{ text-decoration:underline; } #not_small #recipe #recipe_actions .sharing_options_overlay{ position: absolute; background-color: white; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity:.6; top: 0; left: 0; width: 100%; min-height: 100%; } #recipe .ic_recipe_view{ /* uses sprite_ic */ /* on small, is in recipe navu menu. On not_small is in recipe itself*/ height: 30px; width: 30px; margin: 0 auto; float: none; margin-top: 6px; opacity:.3; } #small #recipe .ic_recipe_view{ /* uses sprite_ic */ /* on small, is in recipe navu menu. On not_small is in recipe itself*/ height: 30px; width: 30px; margin: 0 auto; float: none; margin-top: -13px; opacity:.3; } #recipe .ic_recipe_view{ background-position: 30% 0; cursor:pointer; } #recipe .side_by_side .ic_recipe_view{ background-position: 28% 0; cursor:pointer; } #not_small #recipe .ic_recipe_view{ opacity:.4; } #not_small #not_mob #recipe .ic_recipe_view:hover{ opacity:.5; } #recipe #rating_madethis_div{ height:32px; margin-bottom:4px; margin-top:6px; } #recipe #rating_div{ float:left; } #recipe .recipe_left{ max-width:800px; } #recipe .photo_container{ float: right; width: 300px; border: 1px none #ccc; font-size: 1em; background:white; } #small #recipe .photo_container{ margin:7px 0px 0px 0px; } #recipe #photo_tag_div{ float:right; margin:5px 0px 15px 25px; max-width:800px;/* same as left*/ } @media screen and (max-width : 666px) { #small #recipe .photo_container{ float:left; margin:0px 0px 0px 0px; } #small #recipe #photo_tag_div{ float:left; margin:5px 0px 0px 0px; } #small #recipe .recipe_left{ width:100%; } #small #recipe .media_clear{ clear:both; } } @media screen and (max-width : 415px) { #small #recipe .photo_container{ float:none; margin:0px auto; } #small #recipe #photo_tag_div{ float:none; margin:5px 0px 0px 0px; width:100%; } #small #recipe .recipe_left{ width:100%; } #small #recipe .media_clear{ clear:both; } } #not_small #mob #recipe #image_enlarged_frame { white-space: nowrap; text-align: center; border-radius: 3px; position: fixed; z-index: 1000; height: 100%; width: 100%; top:0; left: 0; } #not_small #mob #recipe #image_enlarged_frame img{ vertical-align: middle; max-width: 600px; } #not_small #mob #recipe #image_enlarged_frame .helper{ display: inline-block; height: 100%; vertical-align: middle; } #not_small #mob #recipe #image_enlarged_frame .image_close_x{ position: fixed; z-index: 1001; height: 60px; line-height:60px; width: 60px; background-color: #2d2d2d; color:white; font-size:18px; font-weight:bold; top: 0; right:0; } #not_small #not_mob #recipe #image_enlarged_frame{ white-space: nowrap; text-align: center; border-radius: 3px; position: absolute; z-index: 1000; height: 100%; width: 100%; top: -40px; left: 0; } #not_small #not_mob #recipe #image_enlarged_frame img{ vertical-align: middle; width: 600px; } #not_small #not_mob #recipe #image_enlarged_frame .helper{ display: inline-block; height: 100%; vertical-align: middle; } #not_small #not_mob #recipe #image_enlarged_frame .image_close_x{ position: fixed; z-index: 1001; height: 60px; line-height:60px; width: 60px; background-color: #2d2d2d; color:white; font-size:18px; font-weight:bold; top: 0; right:0; } @media screen and (min-width : 667px) { #recipe #tags_div{ width:300px; float:right; } } #small #recipe_image { display: inline-block; width: 300px; height: 224px; margin-top: 0px; background-position: center center; background-size: cover; position:relative; margin-left:0px; } #small #recipe_image.recipe_image_hidden{ display: none; } #small #recipe_image .corner_count{ position:absolute; right:0; bottom:0; height:42px; width:42px; line-height:42px; font-size:12px; text-align:center; background:rgba(255, 255, 255, 0.64); color:black; margin:2px; } #small #recipe_image #image_progress_circle, #not_small #image_container #image_progress_circle{ top:0; position:absolute; height:100%; width:100%; background:rgba(255, 255, 255, 0.79); text-align:center; color:black; line-height:224px; } #small #recipe .side_by_side #inner_recipe_container{ overflow:hidden; } #recipe .side_by_side #ingredient_section, #recipe .side_by_side #steps_section{ display:table-cell; } #recipe .side_by_side #ingredient_section{ width:180px; } @media screen and (min-width : 376px){ #recipe .side_by_side #ingredient_section{ width:200px; } } @media screen and (min-width : 667px){ #recipe .side_by_side #ingredient_section{ width:250px; } } @media screen and (min-width : 732px){ #recipe .side_by_side #ingredient_section{ width:260px; } } @media screen and (min-width : 768px){ #recipe .side_by_side #ingredient_section{ width:280px; } } @media screen and (min-width : 801px){ #recipe .side_by_side #ingredient_section{ width:350px; } } #recipe .side_by_side .left{ width:100%; max-width:none; } #recipe .side_by_side .ingreds, #recipe .side_by_side .notes{ padding-left:15px; } #not_small #recipe #recipe_scale_div{ float:left; } #not_small #recipe .servings_text { float:left; } #not_small #recipe #view_switch{ float:right; } #recipe .side_by_side #photo_tag_div{ float:none; } #small #recipe .side_by_side #photo_tag_div #tags_div{ max-width:300px; } #recipe .side_by_side #photo_tag_div #tags_div, #recipe .side_by_side #photo_tag_div .photo_container{ float:left; } #recipe .side_by_side #photo_tag_div .non_side_by_side{ display:none; } #recipe .side_by_side #photo_tag_div{ margin-left:30px; } #small #recipe .side_by_side #photo_tag_div{ margin-left:10px; } #recipe .side_by_side #tags_div{ margin-left:30px; } #not_small #recipe .side_by_side .servings{ margin-bottom:15px; } #recipe .side_by_side .ingredient_header, #recipe .side_by_side .step_header{ display:none; } #small #recipe .side_by_side #ingredient_section_inner ,#small #recipe .side_by_side #steps_section_inner{ overflow-y:scroll; margin-top: 10px; } #recipe_u .image_change_trigger{ display: inline-block; line-height: 0px; padding: 20px 0; background: rgb(66 66 66); width: 122px; margin-top: 0px; margin-bottom: 5px; text-align: center; color: white; font-size: 14px; font-weight: bold; cursor: pointer; border-radius:5px; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; overflow:hidden; } #small #recipe_u .image_change_trigger{ width: 142px; } #recipe_u .label{margin-bottom:1px;font-weight: bold;color: #323232;font-size: 16px;margin-top: 12px;} #recipe_u .title_label{margin-bottom:1px;display:inline-block;margin-top: 0px;} #recipe_u .header{font-size:21px;font-family:Georgia, 'Times New Roman', Times, serif;font-weight:normal; width:300px;} #recipe_u .expanding_area{ border: 1px solid #afafaf; } #not_small #recipe_u .tasks{ margin-top: 2px; margin-bottom: 2px; overflow:hidden; } #small #recipe_u .tasks{ margin-top:1px; text-align:left; margin:0 auto; padding-left:4px; text-align:left; margin-left:0px; padding-top:0px; overflow:hidden; } #recipe_u .already_copied_msg{ background:white; text-align:left; margin-top:4px; margin-bottom:4px; margin-left:3px; line-height: 1.2em; padding-left: 4px; padding: 8px 0; padding-left: 4px; } #small #recipe_u .already_copied_msg{ background: #e6e6e6; margin-left: 0px; margin-right: 4px; } #recipe_u .already_copied_msg a{ text-decoration:underline; color:black; } #recipe_u #weak_set_warning{ color:black; text-align:left; margin-top:2px; margin-bottom:2px; } #small #recipe_u #info_links{ text-align:left; } #recipe_u .extra_spacer2{height:5px;} #recipe_u .explanation{ margin-top:5px; margin-right:5px; padding:15px 2px 15px 7px; margin-bottom:10px; color:black; background:yellow;} #recipe_u .show_more_button{width:13px;height:13px; background-image: url('https://cdn.copymethat.com/static/expand.png'); display:inline-block; margin-left:5px; } #recipe_u .show_less_button{width:13px;height:13px; background-image: url('https://cdn.copymethat.com/static/collapse.png'); display:inline-block; margin-left:5px; } #recipe_u .show_more_less_link{cursor:pointer} #recipe_u .show_more_less_link:hover{text-decoration:underline;} #recipe_u #show_more_lines, #recipe_u #show_fewer_lines{ cursor:pointer; color:#A80739; text-decoration:underline; margin:10px 0px 10px 0px; font-weight:bold; max-width: 570px; } #recipe_u .info_link{line-height:35px; height:35px; vertical-align:middle;cursor:pointer; color:#A80739;font-weight:bold; margin-left:12px;} #recipe_u .info_link:hover{text-decoration:underline;} #recipe_u .info_line_divider{height:8px;} #recipe_u #tell_us_input { resize:vertical; max-width:375px; width:100%; height:20px; padding:3px 3px 3px 5px; border:solid 2px lightgray; font-family: verdana, helvetica, arial, sans-serif; margin-top:5px; } #recipe_u #form_tell_us{margin-left:10px;font-size:13px;} /* checkbox */ #recipe_u .td_cb{ vertical-align:top; } #recipe_u .td_line{ } #recipe_u .ingred_checkbox, #recipe_u .step_checkbox, #recipe_u .note_checkbox{ margin:0px; padding:0px; vertical-align:middle; } /* ingredient, step, note styles */ #recipe_u .header_steps, #recipe_u .header_notes{margin-top:15px;} #recipe_u .ingreds, #recipe_u .steps, #recipe_u .notes{ margin:0 0 4px 0px; border-collapse: collapse; table-layout:fixed; padding:0px; line-height:26px; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #small #recipe_u .ingreds, #small #recipe_u .steps, #small #recipe_u .notes{ } #recipe_u .ingred_container, #recipe_u .step_container, #recipe_u .note_container{ } #recipe_u .recipe_container ul, #recipe_u .recipe_container ol{ margin:0;padding: 0;} #recipe_u .recipe_container li { padding-left:0px; margin:0; margin-left:10px; margin-right: 5px; } #recipe_u .step li, #recipe_u .note li{ cursor:pointer; list-style-position: outside; } #recipe_u .ingred li, #recipe_u .note li{ cursor:pointer; list-style: none; margin-left:2px; } #recipe_u .step_after_line1 li{ list-style-type: none; margin-top:4px; list-style-position: inside; text-indent: 0; cursor:pointer; } #recipe_u .ingred_subheader li, #recipe_u .step_subheader li{ list-style-type: none; font-weight:bold; cursor:pointer; list-style-position: outside; margin-left:-10px; } #recipe_u .ingred_note li{ font-style:italic; list-style-type: none; cursor:pointer; list-style-position: outside; margin-left:-10px; } #recipe_u .sub_divider li{ list-style-type: none; } #recipe_u .not_ingred ul, #recipe_u .not_step ol, #recipe_u .not_note ul { display:block;} #recipe_u .not_ingred li, #recipe_u .not_step li, #recipe_u .not_note li{ color: #FD6F6F; list-style-type: none; text-overflow:ellipsis; /* surrounding text can be very long and don't want to include it all, just one line */ overflow:hidden; white-space:nowrap; margin-left:0px; max-width:250px; } #not_small #recipe_u .not_ingred li, #not_small #recipe_u .not_step li, #not_small #recipe_u .not_note li{ max-width:300px; } @media screen and (min-width : 800px){ #not_small #recipe_u .not_ingred li, #not_small #recipe_u .not_step li, #not_small #recipe_u .not_note li{ max-width:370px; } } #recipe .content{overflow:visible;margin-top:0px} #not_small #recipe_u .recipe_container{ font-size:15px; margin-top:0px; position:relative; margin-left:auto; margin-right:auto; overflow:visible; /*visible allows tag options to extend outside if necessary*/ background:white; text-align:left; border: 2px solid #A80739; border-radius: 5px; word-wrap: break-word; } #not_small #recipe .recipe_container{ font-size:15px; position:relative; margin-left:auto; margin-right:auto; overflow:visible; /*visible allows tag options to extend outside if necessary*/ background:white; text-align:left; border: 2px solid #A80739; border-radius: 5px; word-wrap: break-word; } #small #recipe .recipe_container, #small #recipe_u .recipe_container{ width:100%; box-sizing: border-box; overflow:visible; /*visible allows tag options to extend outside if necessary*/ padding:1px; word-wrap: break-word; } #small #inner_recipe_container{ padding:2px 5px 10px 7px; background:white; text-align:left; border: 2px solid #A80739; margin:0px; border-radius:5px; } #small #recipe .recipe_container, #small #recipe_u .recipe_container{ font-size:17px; } /* use mobile (instead of using max-width) to prevent font suddenly changing on laptop as screen becomes smaller */ #not_small #mob #recipe .recipe_container, #not_small #mob #recipe_u .recipe_container{ font-size:17px; } #recipe .recipe_container{ padding:7px 20px 10px 20px; } @media screen and (max-width : 767px){ #not_small #mob #recipe .recipe_container{ padding:7px 10px 10px 10px; } } #recipe_u .recipe_container{ padding:7px 20px 10px 20px; } #recipe .recipe_top{ border-bottom:2px solid #DADADA; overflow:hidden; margin-bottom:4px; } #small #recipe .recipe_top{ margin-bottom:0px; } #not_small #recipe .recipe_top_left{ float:left; padding-right:15px; width:540px; } #not_small #recipe .recipe_top_right{ float:right; } @media screen and (max-width : 920px){ #not_small #recipe .recipe_top_left{ width: 510px; } } @media screen and (max-width : 899px){ #not_small #recipe .recipe_top_left{ width: 410px; } } @media screen and (max-width : 799px){ #not_small #recipe .recipe_top_left{ width: 380px; } } @media screen and (max-width : 767px){ #not_small #recipe .recipe_top_right{ float:left; } #not_small #recipe .recipe_top_left{ width: 540px; } } #recipe .recipe_profile_wrapper{ padding: 0px 0px 0px 0px; height: 86px; margin-bottom:9px; width: 300px; } #recipe .recipe_profile_wrapper .link_in_recipe{text-decoration:None; color:#1d5de0;} /* class is added to element in tags.py*/ /* class also used in profile text on recipe and in community box */ #recipe .recipe_profile_wrapper_owner_name{ font-style: italic; font-weight: bold; color: #595959; font-size: 18px; line-height: 28px; margin: 0px; padding-top: 4px; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; padding-right:5px; margin-left: 2px; } #recipe .recipe_profile_wrapper.hover .recipe_profile_wrapper_owner_name{ text-decoration:underline; } #recipe .recipe_profile_picture{ width: 50px; height: 50px; border-radius: 200px; border: 2px solid #fff; float: left; margin-right: 10px; } #not_small #recipe .orig_link, #recipe_u .orig_link{margin:5px 0px 0px 0px;font-size:16px} #recipe .orig_link_a, #recipe_u .orig_link_a{cursor:pointer;text-decoration:none;color:#5A5A5A;} #recipe .orig_link_a:hover, #recipe_u .orig_link_a:hover{text-decoration:underline} #small #recipe .orig_link, #small #recipe_u .orig_link{ font-size:16px;line-height:34px;overflow:hidden;white-space: nowrap; } #recipe .orig_link{float:left; display:inline-block;} #recipe_u .orig_link_a:hover{text-decoration:underline} #recipe .star_recipe{ padding-right: 5px; padding-left: 10px; padding-top: 8px; position: absolute; padding-bottom: 20px; right: 2px; z-index: 2; } #recipe .star{float:right; margin-right:0px;height:24px;width:24px; /* favorite star */ background: url('https://cdn.copymethat.com/static/star_inner_deactive.png') ; cursor:pointer; display:table-cell; } #recipe .starred{ /* favorite star */ background: url('https://cdn.copymethat.com/static/star_inner.png') } #recipe #ratings_container{ display:inline-block; height:32px; } #recipe #ratings_container .star_wrapper, #review_ratings_container .star_wrapper{ position: relative; width: 24px; height:32px; display:inline-block; cursor:pointer; } #recipe #ratings_container .star_wrapper.editablestar, #review_ratings_container .star_wrapper.editablestar{ width: 38px; } #small #recipe #ratings_container .star_wrapper, #small #review_ratings_container .star_wrapper{ height: 32px; width: 22px; } #small #recipe #ratings_container .star_wrapper.editablestar, #small #review_ratings_container .star_wrapper.editablestar{ height: 32px; width: 36px; } #recipe #ratings_container .star_image, #review_ratings_container .star_image{ position: absolute; box-sizing: border-box; height: 20px; width: 20px; top: 6px; background:#d2d2d2; background-image: url(https://cdn.copymethat.com/static/star_40_transparent.png); /* also preloaded */ background-position: center center; background-size: cover; } #recipe #ratings_container .star_wrapper.done .star_image, #recipe #ratings_container .star_wrapper.action .star_image, #review_ratings_container .star_wrapper.done .star_image, #review_ratings_container .star_wrapper.action .star_image{ background: #f7c600; background-image: url(https://cdn.copymethat.com/static/star_40_transparent.png); background-position: center center; background-size: cover; } #recipe #ratings_container .star_wrapper.preload .star_image, #review_ratings_container .star_wrapper.preload .star_image{ background: transparent; /* prevent colored flash before star image loads. Class is removed when image loads.*/ } #not_small #recipe .recipe_title{ float:left;font-size:24px; padding-top:8px; margin-bottom:5px;color:black;font-weight:normal;font-family:Georgia, 'Times New Roman', Times, serif;display:table-cell; width: 85%; line-height: 24px; } #small #recipe .recipe_title{ font-size:20px; float:left; margin-bottom:0px; color:black; font-family:Georgia, 'Times New Roman', Times, serif; width: 85%; min-height: 24px; line-height: 24px; /* used to have max-height, but caused issues with Android when font was made bigger. Didn't increase height, even with em units (but used to) */ overflow: hidden; padding:8px 2px 0 0px; } #recipe .recipe_rating{ padding-top: 4px; padding-bottom: 4px; padding-right:2px; } #recipe #imadethis_wrapper{ line-height: 32px; min-height: 32px; padding: 0; cursor: pointer; display: inline-block; margin-bottom: 2px; float:left; } #recipe #imadethis_wrapper .label_for_imadethis{ font-size: 15px; margin-left:5px; margin-left:6px; max-width:82px; float:left; height: 32px; line-height: 0px; padding: 16px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } @media screen and (min-width : 360px){ #recipe #imadethis_wrapper .label_for_imadethis{ max-width:118px; } } /* #recipe #imadethis { background: url('https://cdn.copymethat.com/static/searchform_images/checkbox.png') no-repeat 0 0; display: block; height: 16px; padding-left: 20px; cursor: pointer; } #recipe #imadethis.checked { background-position: 0 -16px; } */ #recipe #tags_div{margin-top:3px; padding: 6px 0; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; margin-bottom:2px;} #small #recipe #tags_div{margin-top:5px;} #recipe_u #tags_div{margin-top:7px;} #recipe .tag, #recipe_u .tag, #recipe .tag_archived, #recipe_u .tag_archived{ float: left; background: #f4f5f6; border-radius: 5px; height: 32px; line-height: 30px; padding: 0 10px; font-size: 14px; margin: 2px 2px 2px 0; margin-bottom: 2px; cursor: pointer; height: 32px; line-height: 0px; padding: 16px 10px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #recipe .tag_archived, #recipe_u .tag_archived{ color:red; } #recipe_u #show_tag_menu_button{ float: left; background: #b1b8bc; padding: 20px 13px; margin-top: 2px; height: 0px; line-height: 0; color: #fff; cursor: pointer; border-radius:5px; } #not_mob #recipe_u #show_tag_menu_button:hover{ color: #000; } #recipe .image_upload_button{ position: relative; background: #b1b8bc; color: white; font-size: 17px; width: 300px; display: inline-block; cursor: pointer; margin-top: 5px; height: 36px; line-height: 0px; padding: 18px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #small #recipe .image_upload_button{ margin-top:0px; } #recipe .image_upload_button_text{ } #recipe .image_upload_button_image{ margin-top:-10px; margin-left:75px; margin-right:5px; float:left; width:38px; } #small.android_font_5plus #recipe .image_upload_button_image{ margin-left:15px; } #recipe .image_upload_input_wrapped{ position:absolute; top:0; left:0; height:100%; width:300px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index:2; cursor:pointer; } #not_mob #recipe .image_upload_button:hover{ color:black; } #recipe .description{margin-left:0px;margin-top:0px; padding: 5px 0;} #small #recipe .description{line-height:24.65px;} #not_small #recipe .description{line-height:22px;} #not_small #mob #recipe .description{line-height:25px;} #recipe .recipe_left .link_in_recipe{text-decoration:None; color:#009BD3;font-weight: bold;} /* class is added to element in tags.py*/ /* class also used in profile text on recipe and in community box */ #recipe .directions_src_link{ display: inline-block; background: white; padding: 6px 12px; overflow: hidden; box-sizing: border-box; border-radius: 3px; color: black; border: dotted 2px gray; margin-top: 9px; cursor:pointer; } #small #recipe .directions_src_link{ max-width: 300px; } #recipe .directions_src_link:hover{ border: dotted 2px #A80739; } #recipe .directions_src_cmt_info{ margin-top:10px; } #small #recipe .directions_src_cmt_info{ line-height:25px;; } #not_small #recipe .directions_src_cmt_info{ line-height:24px; } #recipe .directions_src_cmt_info span{ font-weight:bold; cursor:pointer; } #recipe .directions_src_cmt_info span:hover{ text-decoration:underline; } /*servings styles */ /* Servings determine whether the ingredients are below or next to the image */ #recipe .servings{ margin:5px 0; padding: 10px 0; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; line-height:21px; min-width:100px; } #not_small #recipe .servings{ overflow: hidden; position:relative; padding: 5px 0 3px 0; line-height:35px; height:35px; } @media screen and (max-width : 666px){ #small #recipe .servings{ display:table; width:100%; min-height:35px; } #small #recipe #recipe_scale_div{ display:table-cell; vertical-align:middle; padding-right:4px; width: 35px; } #small #recipe .servings_text{ display:table-cell; vertical-align:middle; } #small #recipe .servings{ padding: 2px 0; } } @media screen and (min-width : 667px){ #small #recipe .servings{ overflow: hidden; position:relative; } #small #recipe #recipe_scale_div{ position:absolute; top:3px; padding-right:4px; width: 35px; } #small #recipe .servings_text{ padding-left:40px; } } #not_small #recipe #recipe_scale_div{ position:absolute; top:3px; padding-right:4px; width: 35px; } #not_small #recipe .servings_text{ padding-left:40px; } #recipe #recipe_scale_ingred_input{ height: 35px; width: 35px; border: 1px solid #DADADA; box-sizing: border-box; text-align: center; } #small #recipe #recipe_scale_ingred_input{ padding-left:1px; padding-right:1px; } #recipe #recipe_scale_ingred_input.scaled{ color: brown; } #recipe #recipe_scale_submit{ position: absolute; left: 46px; background: #CC003F; color: white; line-height: 35px; vertical-align: middle; border-radius: 3px; cursor: pointer; height: 35px; width: 65px; text-align: center; top: 0px; } #recipe .recipe_scale_about_premium{ position: absolute; left: 46px; width: 130px; text-align: center; top: 0px; background: white; padding: 10px; border: black 1px solid; z-index:10; } #recipe #recipe_scale_submit.clicked{ background:#A80739; } #recipe #recipe_scale_bad_format{ color:red; margin:10px 0; } #recipe .ingred_amount_scaled{ color:brown; } #recipe .servings_text.light{ color:#a5a1a1; } /* make recipe text selectable */ #recipe .recipe_title, #recipe .orig_link, #recipe .ingreds, #recipe .servings, #recipe .steps, #recipe .notes, #recipe .header{ -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #recipe .header{ font-size: 18px; min-height: 28px; line-height: 28px; font-weight: bold; color: #363A3C; } /*ingredient styles */ #recipe .step_anchor{ padding-left:15px; border-left:3px solid white; } #small #recipe .step_anchor{ padding-left:26px; border-left:3px solid white; } #small #recipe .side_by_side #inner_recipe_container .step_anchor{ padding-left:5px; border-bottom: 1px solid #A80739; } #small #recipe .step_anchor.step_anchor_active{ border-left:3px solid #A80739; } #not_small #recipe .step_anchor.step_anchor_active{ border-left:3px solid #A80739; } #recipe li{list-style-position: outside;} #not_small #recipe .ingreds, #not_small #recipe .notes{padding-left:18px;} #recipe .steps{padding-left:5px;} /* less because steps_anchor has padding */ #small #recipe .notes{ padding-left:23px; padding-right:5px; } #small #recipe .ingreds{ padding-left:5px; padding-right:5px; list-style-type:none; } #small #recipe .steps{padding-left:0px;padding-right:5px; } #small #recipe .side_by_side #inner_recipe_container .ingreds{ padding-left: 3px; } #small #recipe .side_by_side #inner_recipe_container .notes{ padding-left: 3px; } #recipe .recipe_container ul, #recipe .recipe_container ol{margin-top:0px;} #recipe #scale_multiplier_msg{ font-weight:bold; } #not_small #recipe .ingred li{ margin: 2px 0 2px 0; list-style-image: url('https://cdn.copymethat.com/static/li-style.png'); } #small #recipe .ingred li{ line-height:24.65px; border-bottom:1px dotted #7eb348; padding-top:1px; padding-bottom:2px; color:black; vertical-align:middle; padding-left:2px; } #not_small #recipe .ingred li{line-height:22px;} #not_small #mob #recipe .ingred li{line-height:25px;} #small #recipe .side_by_side #inner_recipe_container .ingred li{ border-bottom: 1px #4f4f4f dotted; list-style-image: none; list-style-type: none; padding:1px 0 4px 0; } #not_small #recipe .ingred li span{ color:black; vertical-align:middle; margin-left:2px; } #small #recipe .ingred li.ingred_used{ background:rgb(226, 226, 226); } #not_small #recipe .ingred li.ingred_used span{ background:rgb(226, 226, 226); } .ingred_line{ color: #7eb348; } #recipe .ingred_subheader li{ /*text-decoration:underline;*/ font-weight:bold; list-style-type: none; margin-left:-15px; margin-top:10px; margin-bottom:10px; color: #363A3C; font-size: 17px; } #small #recipe .ingred_subheader li{ /*text-decoration:underline;*/ font-weight:bold; list-style-type: none; margin-left:0px; margin-top:10px; margin-bottom:4px; color: #363A3C; font-size: 17px; } #recipe .side_by_side .ingred_subheader li{ margin-left:0px; } #recipe .ingred_note li{ /*text-decoration:underline;*/ font-style:italic; list-style-type: none; margin-left:-22px; color:black; } #small #recipe .ingred_note li{ic; list-style-type: none; margin-left: 3px; color: black; line-height: 24.65px; border-bottom: 1px dotted #7eb348; padding-top: 4px; padding-bottom: 4px; } #recipe .sub_divider li{ list-style-type: none; margin-top:0px; margin-bottom:-5px; } /* step styles */ #recipe .step_subheader li{ font-weight:bold; list-style-type: none; margin-left:-20px; margin-top:15px; margin-bottom:15px; color: #363A3C; font-size: 17px; } #not_small #recipe .step_subheader li{ font-size: 16px; } #recipe .side_by_side .step_subheader li{ margin-left:0px; } #recipe .step li{ margin-top:5px; color: #7eb348; margin: 5px 0 8px 0; } #recipe .step li span{ color:black; } #recipe .step_after_line1 li{ list-style-type: none; margin-top:5px; } #small #recipe .step li, #small .step_after_line1 li{ line-height:24.65px } #not_small #recipe .step li, #not_small .step_after_line1 li{ line-height:22px; } #not_small #mob #recipe .step li, #not_small #mob .step_after_line1 li{ line-height:25px; } #small #recipe .side_by_side #inner_recipe_container .step li{ list-style-type: none; } /* note styles */ #recipe .note li { margin-top:5px; list-style-image: url('https://cdn.copymethat.com/static/li-style.png'); color: #7eb348; } #small #recipe .note li{ line-height:24.65px } #not_small #recipe .note li{ line-height:22px; } #not_small #mob #recipe .note li{ line-height:25px; } #small #recipe .side_by_side #inner_recipe_container .note li{ list-style-type: none; border-bottom: 1px dotted #4f4f4f; padding-bottom: 3px; } #recipe .note li span { color:black; vertical-align:middle; } #recipe .note_asterix{ color:#7eb348; } #not_small #recipes #ingreds_shopping_list_div, #not_small #recipe #ingreds_shopping_list_div { position:absolute; z-index:1000; top:38px; right:50px; background-color: white; border: solid gray 2px; margin: 0; padding: 20px 5px; text-align:left; width:289px; min-height:200px; border-radius:3px; width: 440px; border: 3px solid #A80739; } #not_small #recipes #ingreds_shopping_list_div { position:fixed; position: fixed; margin: 0 auto; right: 0; left: 0; } #not_small #mealplan #ingreds_shopping_list_div { border:none; padding: 20px 5px; } #small #mealplan #ingreds_shopping_list_div { padding: 10px 0; } #small #ingreds_shopping_list_div input[type="checkbox"] , #not_small #ingreds_shopping_list_div input[type="checkbox"]{ margin: 0px; } #small #recipe #ingreds_shopping_list_div { padding: 10px 0; } #ingreds_shopping_list_div #add_to_list_button, #ingreds_shopping_list_div #add_to_list_cancel, #ingreds_shopping_list_div #add_to_list_done { height: 42px; line-height: 42px; border-radius: 3px; border: 1px gray solid; width: 86px; cursor: pointer; float: left; text-align: center; margin-right:6px; margin-bottom: 10px; font-size: 16px; } #ingreds_shopping_list_div #sl_list_multiplier { text-align:center; margin:5px 0 5px 10px; height:32px; line-height:32px; border: 1px solid #d4d4d4; width:30px; } #ingreds_shopping_list_div #sl_list_select { margin: 0 5px 0 10px; height: 36px; line-height: 36px; width: 130px; font-size: 16px; } #ingreds_shopping_list_div #ingreds_for_sl { padding:0 5px 5px 5px; } #ingreds_shopping_list_div .single_ingred_for_sl { height:34px; line-height:34px; margin: 1px 0; } #not_mob #ingreds_shopping_list_div .single_ingred_for_sl { height:30px; line-height:30px; } #ingreds_shopping_list_div .sl_ingred_input{ padding: 0 2px; width: 380px; height: 32px; line-height:32px; font-size: 16px; padding-left: 3px; border: 1px solid #d4d4d4; } #not_mob #ingreds_shopping_list_div .sl_ingred_input{ height: 28px; line-height:28px; } @media screen and (max-width : 448px){ #ingreds_shopping_list_div .sl_ingred_input{ width: 345px; } } @media screen and (max-width : 410px){ /* Smaller than iPhone6+ and Nexus 5x */ #ingreds_shopping_list_div .sl_ingred_input{ width: 310px; } } @media screen and (max-width : 374px){ /* Smaller than iPhone6 */ #ingreds_shopping_list_div .sl_ingred_input{ width: 280px; } } @media screen and (max-width : 359px){ /* Smaller than Galaxa S5 */ #ingreds_shopping_list_div .sl_ingred_input{ width: 255px; } } #not_small #recipe #recipe_sharing_settings, #not_small #recipe_edit #recipe_sharing_settings { width:500px; top:70px; margin-left:-250px; left:50%; } #not_small #recipe_edit #recipe_sharing_settings{ } #small #recipe_edit #recipe_sharing_settings{ } #recipe_edit #community_visibility_label.alerted{ color:red; } #not_small #recipe_sharing_settings .menu_inner{ padding: 0px 5px; } #not_small #recipe_sharing_settings .menu_inner { padding: 0px 5px; max-height: 810px; /* changed in js */ overflow-y: auto; box-sizing:border-box; } #small #recipe_sharing_settings { /* scroll is on inner instead. is this necessary to set? */ overflow-y: hidden; text-align:left; } #small #recipe_sharing_settings .menu_inner { /* inner scrolling so close and save buttons stay on top */ overflow-y: auto; padding: 5px 0px 25px 10px; box-sizing:border-box; /* height set in js */ } #small #recipe_sharing_settings .sharing_all_inputs{padding:0px 2px 2px 2px;margin:3px 0px 3px 0px;} #recipe_sharing_settings input{margin:2px 3px 2px 0px;padding: 3px 0;} #not_small #recipe_sharing_settings .input_wrapper{display:block; } #small #recipe_sharing_settings .input_wrapper{display:block;padding:4px 0; } #recipe_sharing_settings #include_description_options{margin-left:20px;} #small #recipe_sharing_settings input{margin:6px 3px 2px 2px;padding:0} #recipe_sharing_settings .label_sharing{width:250px;display:block;font-weight:bold;margin-bottom:5px;} #recipe_sharing_settings .sharing_inputs{display:table-cell;padding-left:20px;} #small #recipe_sharing_settings .sharing_inputs{display:table-cell;padding-left:5px;} #recipe_sharing_settings .sharing_row{border-bottom:solid lightgray 1px;margin-top:5px;padding:3px 0px 8px 3px;} #recipe_sharing_settings #saving_msg{color:gray;padding-left:3px;margin-top:2px;} #recipe_sharing_settings .option_not_avail{color:gray} #recipe_sharing_settings .sharing_question_mark{display:inline-block;color:black;font-weight:bold;text-decoration:underline;font-size:11px;cursor:pointer;} #recipe_sharing_settings #share_description{border:none gray 1px; padding:3px;margin:3px;} #recipe_sharing_settings #member_chooser{overflow:hidden;padding:5px 0px 5px 5px;border:solid orange 1px;margin-top:4px;} #recipe_sharing_settings .member_option{margin-top:3px;width:300px; float:left;} #recipe_sharing_settings #link_show_member_options{font-size:11px;text-decoration:underline;cursor:pointer} #not_small #shopping_list .content{ width: 650px; /* match #shopping_list #sl_navi_menu.fixed */ margin:0 auto; padding-top:0px; } @media screen and (max-width : 650px){ #not_small #shopping_list .content{ width: auto; } } #shopping_list #content_inner{ -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #not_small #shopping_list #content_inner{ background:white; overflow:hidden; text-align:left; padding: 20px; min-height:450px; } @media screen and (max-width : 600px){ #not_small #shopping_list #content_inner{ padding: 20px 10px; } } #small #shopping_list .content{ min-height:450px; } #small #shopping_list #content_inner{ padding-top:10px; padding-left:2px; padding-right:2px; min-height:300px; } .button_look{ text-align:center; background:#4C4C4C; cursor: pointer; font-family: helvetica; color:white; font-size:13px; /*No border because border does not work. When wrapping, does not activate actual button on the border*/ border-radius:2px; } .button_look:hover{ background:#6f4a51; cursor:pointer; } .button_wrapper{ position:relative; top:0;left:0; height: 32px; line-height:32px; width:140px; display: block; overflow: hidden; } .button_is_wrapped { position:absolute; top:0; left:0; height: 32px; width:140px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index:2; } .button_wrapper_2{ position:relative; top:0;left:0; height: 32px; line-height:32px; width:100px; display: block; overflow: hidden; } .button_is_wrapped_2{ position:absolute; top:0; left:0; height: 32px; width:100px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index:2; } #recipe_edit #photo_upload .button_wrapper { position: relative; height: 38px; line-height:38px; width: 108px; overflow: hidden; } #recipe_edit #photo_upload .edit_add_image_button_look { text-align: center; background: #9DB0B1; cursor: pointer; font-family: Arial; color: white; font-size: 15px; border-radius: 5px; padding:0; display:inline-block; float:left; } #recipe_edit #photo_upload .edit_add_image_button_look:hover{ background: #839798; } #recipe_edit #photo_upload .button_is_wrapped { position: absolute; top: 0; left: 0; height: 38px; width: 108px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); z-index: 2; } #recipe_edit #photo_upload .url_input{ float:left; margin: 0 2px 0 0; height:38px; box-sizing:border-box; border:1px gray solid; padding-left:2px; width:130px; } #recipe_edit #photo_upload .photo { max-width: 80px; max-height: 80px; vertical-align: middle; } #recipe_edit #photo_upload #photo_form{ float:left; display:inline-block; margin-bottom:10px; } #recipe_edit #photo_upload.only_image_edit_trigger #photo_form{ display:none; } #recipe_edit #photo_upload #photo_list{float:left;margin-right:30px} #recipe_edit .photo_list_waiting{ background-image:url('https://cdn.copymethat.com/static/spinner_25.gif'); height:74px;width:74px; background-repeat:no-repeat; background-position:center; } #recipe_edit #photo_upload .photo_container{ text-align: center; width: 82px; height: 82px; margin: 1px; border: 1px solid #ccc; /* font-size: 1em; line-height: 80px; Used to vertical-align with line-height, but shifts down if user increases Android's defau't size. Now sits at top */ background:white; } #not_mob #recipe_edit #photo_upload .photo_container{ font-size: 1em; line-height: 80px; } #recipe_edit #photo_upload .photo_msg{color:red;margin:5px 0} #photo_upload .photo_div{float:left; padding-top:3px;background:white;} #not_mob #photo_upload #photo_list.ui-sortable .photo_div .photo_container:hover{ box-shadow: 1px 1px 3px black; } #not_mob #photo_upload #photo_list.ui-sortable-disabled .photo_div .photo_container:hover{ box-shadow: none; } #not_mob #photo_upload #photo_list.ui-sortable .photo_div .photo_container{ cursor:pointer; } #not_mob #photo_upload #photo_list.ui-sortable-disabled .photo_div .photo_container{ cursor:default; } #photo_upload .photo_div.dragging .photo_container { box-shadow: 1px 1px 3px black; } #recipe_edit #photo_upload .photo_remove{ color:black; cursor:pointer; height: 36px; background: rgba(255, 192, 203, 0.22); line-height: 36px; width: 84px; text-align: center; } #mob #recipe_edit #photo_upload .photo_remove{ height: 36px; line-height: 36px; background: rgba(255, 192, 203, 0.22); width: 84px; text-align: center; } #not_mob #photo_upload .photo_remove:hover{text-decoration:underline;} #recipe_edit #photo_upload.only_image_edit_trigger .photo_remove{ display:none; } #recipe_edit #photo_upload #image_reorder_option, #recipe_edit #photo_upload #image_reorder_done_option{ line-height:36px; cursor:pointer; border:1px solid gray; border-radius:5px; text-align:center; width:270px; margin-top:10px; overflow:hidden; } #recipe_edit #photo_upload.only_image_edit_trigger #image_reorder_option{ display:none; } #recipe_edit .content{ min-width:250px; } #recipe_edit .recipe_container{ padding-right:20px; padding-left:5px; margin-top:10px; } #small #recipe_edit .recipe_container{ padding-right:10px; margin-top:20px; } #recipe_edit #show_tag_menu_button, #recipe_edit #edit_show_sharing_options_trigger, #recipe_edit #photo_upload #image_edit_trigger { cursor:pointer; height:36px; line-height:0px; padding:18px 0; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; margin-top:4px; margin-bottom:4px; font-size:17px; font-weight: bold; color: #a80739; width: min-content; } #recipe_edit #photo_upload #image_edit_trigger{ display:none; } #recipe_edit #photo_upload.only_image_edit_trigger #image_edit_trigger{ display:block; } #recipe_edit #show_tag_menu_button{ margin-top:4px; margin-bottom:4px; } #recipe_edit .images{margin-bottom:0px;margin-top:8px;} #recipe_edit #styling_info{ border: #A80739 dotted 2px; padding:5px 10px 5px 5px; max-width:720px; overflow:hidden; margin-top:5px; width:100% } #small #recipe_edit #styling_info{ padding:5px 5px 5px 5px; width:95%; } #recipe_edit #styling_info ul{margin-top:15px; margin-bottom:5px;padding-left:25px;} #recipe_edit .style_info_line{margin-bottom:2px;} #recipe_edit #styling_tricks_link{ color: #A80739; margin: 10px 0px 0px 0px; cursor: pointer; font-weight: bold; font-size: 15px; text-decoration: underline; height: 36px; line-height: 36px; } #recipe_edit #styling_tricks_link:hover{ text-decoration:underline; } #recipe_edit .button_insert_str{ cursor:pointer; display:inline-block; font-weight:normal; vertical-align:center; height:22px; line-height:22px; width:22px; border:rgb(230, 230, 230) 1px solid; text-align:center; border-radius:3px; font-size:17px; background:rgb(252, 252, 252); padding:1px; margin-bottom:2px; font-family:arial; /* not all fractions/symbols available with open sans */ } #recipe_edit .more_symbols_trigger{ width:50px; font-size:15px; } @media screen and (min-width : 360px){ #small #mob #recipe_edit .button_insert_str{ height:28px; line-height:28px; width:28px; } #small #mob #recipe_edit .more_symbols_trigger{ width:50px; font-size:15px; } } @media screen and (min-width : 375px){ #mob #recipe_edit .button_insert_str{ height:30px; line-height:30px; width:30px; } #mob #recipe_edit .more_symbols_trigger{ width:50px; font-size:15px; } } #recipe_edit .header{ font-weight:bold; font-size:17px;margin-left:0px; color:black; margin-bottom:3px; margin-top:7px; height: 24px; line-height: 24px; max-width: 750px; } #recipe_edit #edit_symbol_wrapper{ max-width: 750px; } #recipe_edit .expanding_area { max-width:760px; } #recipe_edit .expanding_area textarea, #recipe_edit .expanding_area pre { padding: 5px 5px 15px 5px; } #ios #recipe_edit .expanding_area pre { /* padding: 5px 8px 15px 8px; */ /* this is no longer the case. */ /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */ } #not_small #mob .expanding_area textarea, #not_small #mob .expanding_area pre { font-size:17px; } /* below for js editor */ #recipe_edit pink{background:pink;} #recipe_edit .yellow{background:yellow;} #recipe_edit #ingredients{background:white;border:solid 2px lightgray; width:700px; overflow:hidden; padding:15px 15px 15px 40px; margin:5px 0px 10px 5px;} #recipe_edit #ingredients ul{font-weight:normal;list-style-type:disc;} #recipe_edit .ingred{font-weight:normal;} #recipe_edit .subheader{font-weight:bold;list-style-type:none; margin: 5px 0px 0px -18px;} #recipe_edit .ingred_note{font-style:italic; list-style-type:none; margin: 0px 0px 0px -18px;} #recipe_edit .blankline{list-style-type:none;} #recipe_edit #steps{background:white;border:solid 2px lightgray; width:700px; overflow:hidden;padding:15px 15px 15px 40px; margin:5px 0px 0px 5px;} #recipe_edit #steps li{margin-bottom:5px;} #recipe_edit .step_subheader{font-weight:bold;list-style-type:none; margin: 0px 0px 0px -18px;} #recipe_edit .step_line1{} #recipe_edit .step_line_non1{list-style-type:none;} #recipe_edit #notes{background:white;border:solid 2px lightgray; width:700px; overflow:hidden; padding:15px 15px 15px 40px; margin:5px 0px 10px 5px;} #recipe_edit #notes ul{font-weight:normal;list-style-type:disc;} #recipe_edit .note{font-weight:normal;} /* was interfering with non.js #recipe_edit b{font-weight:normal;} #recipe_edit i{font-style:normal} #recipe_edit .bold{font-weight:bold} */ #recipe_edit #form_recipe{} /* related to ajax loading */ .current_showing{ position:relative; /* overwritten by result spages. Necessary for side menu */ } /* #not_small #recipes, #not_small #recipes_shared, #recipe_u, #recipe_edit, #not_small #recipe{ box-sizing: border-box; overflow: hidden; overflow-y: scroll; position: fixed; height: 100%; width: 100%; top: 0; left: 0px; background:#eef2f4; } */ #small #recipe #outer, #small #recipe_u #outer, #small #recipe_edit #outer{ box-sizing: border-box; overflow: hidden; overflow-y: scroll; z-index:201; /* > content_top z-index to prevent flash when load recipe via ajax */ position: fixed; height: 100%; /* Is changed in JS */ width: 100%; top: 45px; /* must equal height of recipe navigation */ left: 0px } #small #recipe .side_by_side .content{ padding-bottom:0; } #small #recipe .side_by_side .footer{ display:none; } #small #recipes #small_main_navi, #small #recipes_shared #small_main_navi { background: white; height: 44px; /* if change height, change top of content_top, outer */ position: fixed; top: 0; width: 100%; z-index:201; /* more than content_top, allowing side_menu_icon to extend down, past */ } #small #recipes.left_for_side_menu #small_main_navi, #small #recipes_shared.left_for_side_menu #small_main_navi, #small .current_showing.left_for_side_menu { left:250px; } @media screen and (min-width : 360px){ #small #recipes.left_for_side_menu #small_main_navi, #small #recipes_shared.left_for_side_menu #small_main_navi, #small .current_showing.left_for_side_menu { left:280px; } } @media screen and (min-width : 375px){ #small #recipes.left_for_side_menu #small_main_navi, #small #recipes_shared.left_for_side_menu #small_main_navi, #small .current_showing.left_for_side_menu { left:295px; } } @media screen and (min-width : 411px){ #small #recipes.left_for_side_menu #small_main_navi, #small #recipes_shared.left_for_side_menu #small_main_navi, #small .current_showing.left_for_side_menu { left:350px; } } #small #recipes #content_top, #small #recipes_shared #content_top{ background: white; height: 44px; /* searchbar-height-dependent */ position: fixed; top: 44px; /* matches height of small_main_navi */ width: 100%; z-index: 200; /* more than #search_saved_searches and outer */ } #small #recipes.left_for_side_menu #content_top, #small #recipes_shared.left_for_side_menu #content_top{ left:250px; } #small #recipes #outer, #small #recipes_shared #outer{ box-sizing: border-box; overflow: hidden; overflow-y: scroll; z-index:1; position: fixed; height: 100%; /* Is changed in JS */ width: 100%; top: 88px; /* must equal height of small_main_navi + content_top searchbar-height-dependent */ left: 0px } #not_small #recipes.current_showing.noscroll{ overflow:hidden; /* to allow scrolling of generic_popup so doesn't scroll page benetah popup instead */ } #small #recipes.current_showing.noscroll #outer{ overflow:hidden; /* to allow scrolling of generic_popup so doesn't scroll page benetah popup instead */ } #small #recipes.left_for_side_menu #outer, #small #recipes_shared.left_for_side_menu #outer{ left:250px; } #recipe_navi{ box-sizing: border-box; overflow: hidden; position: fixed; height:45px; /* must equal #small #recipe #outer height */ width: 100%; top: 0; } #recipes.hidden_page, #recipes_shared.hidden_page, #recipe.hidden_page, #recipe_u.hidden_page, #recipe_edit.hidden_page, .hidden_page { position:fixed; left:-20000px; } #not_small .hidden_page #page_header, #not_small .hidden_page #header_navis_wrapper, #small .hidden_page #page_header, #small .hidden_page #header_navis_wrapper { width:0px; /* otherwise shows on print as are 100% wide and print page background:white doesn't always cover it (Edge) */ } #not_small .hidden_page .sort_trigger_wrapper { display:None; /* otherwise shows on print (Edge) */ } #small #recipe.left_for_side_menu{ left:250px; } #small #recipe.left_for_side_menu #outer{ left:250px; } #profile #content_inner{padding:15px 10px 30px 10px;} #not_small #profile #content_inner{padding:15px 30px 30px 30px;} #profile .header, #profile .header_no_border{font-weight:bold;padding-top:10px;margin-bottom:3px;border-top:gray 1px solid;} #profile .header_no_border{border:None} #profile #show_recipe_circle_options{cursor:pointer;font-weight:bold;color:gray;font-size:90%;text-decoration:underline;} #profile .insides{margin-left:10px} #profile .edit_icon{display:inline;color:gray;font-weight:bold;text-decoration:underline;font-size:13px;cursor:pointer;padding:3px 3px 3px 0} #profile .name{display:inline-block;} #profile .current_email{} #profile form{margin-top:10px;} #profile #email_input{float:left;width:150px;margin-right:2px;margin-top:2px;} #profile .space_divider{height:8px;} #profile .label{font-weight:bold} #profile .error_msg{color:red;} #profile .header_account_recovery{color:red} #profile .link_in_recipe {text-decoration:None; color:#1d5de0;} /* class is added to element in tags.py*/ /* class also used in recipe text , profile on recipe and community box*/ #profile .pageoption{ cursor:pointer; border-top: 1px solid black; padding: 10px 0; } #profile .pageoption_label{ font-weight:bold; } #profile .pageoption_description{ } #profile .profile_page_back{ font-weight: bold; padding-bottom: 5px; color: green; cursor: pointer; } #profile .profile_submit_button{ width: 120px; text-align: center; border-radius: 3px; background: rgb(218, 218, 218); cursor: pointer; line-height: 0px; padding: 16px 0; margin-top: 5px; } #profile .profile_submit_button.disabled{ color:gray; cursor:pointer; } #profile_sharing input{margin-top:5px;} #profile_sharing form{margin:0px;} #profile_sharing ul{margin:0px;} #profile_sharing #default_form_wrapper{border:none 1px gray;margin-top:5px;} #profile_sharing #add_form_wrapper{margin-top:10px;} #profile_sharing label{ display: block; padding-left: 1em; text-indent: -1em;} #profile_sharing .single_line_explanation{margin-bottom:10px;} #profile_sharing .explanation{margin-top:7px;} #profile_sharing .invite_link{text-decoration:none;color:blue;} #profile_sharing #link_show_members{font-size:11px;text-decoration:underline;cursor:pointer} #small #profile_sharing #link_show_members{font-size:13px;} #profile_sharing #personal_recipebox_link{margin-top:5px;margin-bottom:5px;} #profile_sharing #personal_recipebox_link_a{color:blue;text-decoration:none} #profile_sharing #my_members, #profile_sharing #people_who_added_me, #profile_sharing #user_search_results {overflow:hidden; border:solid orange 1px; max-width:400px;margin:3px 0px 3px 0px;} #profile_sharing #my_members{padding:5px 0px 5px 5px;} #profile_sharing #link_show_people_who_added_me{font-size:11px;text-decoration:underline;cursor:pointer;margin-bottom:3px;} #profile_sharing #link_show_people_who_added_me{font-size:13px;} #profile_sharing #people_who_added_me{padding:5px 0px 0px 5px;} #profile_sharing .i_am_member{display:inline-block;float:left;} #profile_sharing #msg_count_in_circle{margin:3px 0px 2px 0px} #profile_sharing #ul_people_who_added_me{overflow:hidden;padding:0px 0px 0px 0px;margin:6px 0px 0px 0px;} #profile_sharing #user_search_results{padding:5px 5px 5px 5px;} #profile_sharing .search_user_result{ display: block; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size:12px; font-weight:bold; height: auto; list-style-type: none; height:52px; padding-left:60px; padding-bottom:3px; padding-top:3px; } #profile_sharing .search_result_display_name{ padding-top:2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #profile_sharing .search_result_img{height: 50px;width: 50px;position:absolute;left:6px;} #profile_sharing .add_member_not_addable{color:black;margin-top:0px;font-weight:normal;} #profile_sharing .add_member{color:blue;cursor:pointer;margin-top:0px;font-weight:normal;text-decoration:underline;width:120px;} #profile_sharing .remove_member_not_addable{color:red;cursor:pointer;margin-top:0px;} #profile_sharing .remove_member{color:red;cursor:pointer;margin-top:0px;font-weight:normal;text-decoration:underline;width:90px;} #profile_sharing .remove_member_cannot{color:black;margin-top:0px;font-weight:normal;} #profile_sharing #checkbox_all_none_wrapper{ position:absolute; left:61px; margin:3px 3px 3px 3px; padding:0px; line-height:0px; } #profile_sharing .some_checked{ background:blue; } #profile_sharing #check_all_none{ margin:0px; /*overwritten by small*/ opacity:0.8; float:left; margin-top:0px; padding:0px; } /* set_password_form is on separate webpage, also with #profile ID*/ #profile #set_password_form .pw_show_hide{ width: 56px; position: absolute; height: 36px; line-height: 36px; right: 0; top: 0; font-size: 13px; font-weight: bold; color: #9c9999; text-align: center; cursor:pointer; } #profile #set_password_form .newuser_input{ width:260px; box-sizing:border-box; height:36px; border:#9d9d9d solid 1px; font-size:16px; color:#5c5c5c; padding:0 5px 0 5px; margin:0px; } #profile #set_password_form .error_msg{ color:red; margin-bottom:4px; } #profile #change_account_form_button{ width:170px; border:1px solid gray; height:38px; line-height:38px; text-align:center; border-radius:5px; cursor:pointer; } #profile #change_account_form_button:hover{ background:#f6f6f6; } #profile #change_account_form_button.clicked{ background:#cbcbcb; } #download #form_intro{font-weight:bold;margin-bottom:5px;} #download #form_wrapper{margin-left:10px;} #download #tag_input{ width:150px; /*overwritten by small*/ padding:1px 1px 1px 1px;} #small #download #tag_input{width:130px;} #download input[type=radio]{margin-top:5px;margin-right:5px;} #small #download #tag_search_type, #small #download optgroup{font-size:15px;} #small #download .line2{margin-left:50px;} #download #get_files_button{ margin-top:10px; font-size:15px; } #download .button_working{ background-image:url('https://cdn.copymethat.com/static/spinner_16.gif'); background-repeat:no-repeat; background-position:center; } #download #spinner{height:25px;width:25px;display:inline-block;} #download #tag_options{ z-index:2; position:absolute; border-bottom:1px solid black; top:27px; /*overwritten by small*/ cursor:default; } #small #download #tag_options{ top:29px; } #download .tag_option{ display:block; width:150px; border:1px solid black; border-bottom:none; background:white; padding-left:2px; overflow:hidden; padding-top:2px; /*overwritten by small*/ padding-bottom:2px; /*overwritten by small*/ } #small #download .tag_option{ padding-top:4px; padding-bottom:4px; } #download .hlight{ background:#FFC65F; } #about_tine .content{ padding-top:10px; } #about_tine #top_margin{ height:20px; } #about_tine .section{ } #about_tine .section div{ margin-top:10px; } #about_tine .section_title{font-weight:bold;font-size:15px;margin-bottom:3px;} #small #about_tine .section_title{margin-top:0px;} #about_tine .photo_div_right img, #about_tine .photo_div_left img{ } #about_tine .photo_div_left { float:left; margin:0 15px 10px 0px; } #about_tine .photo_div_right { float:right; margin:0 0px 10px 15px; } #about_tine .photo_div_right .caption, #about_tine .photo_div_left .caption{ font-size:11px;text-align:center; } #small #recipes_shared .content{ overflow:hidden; } #recipes_shared .app_download_div{ margin:0 auto; width:180px; border:solid #CC0C47 2px; text-align:center; color:#CC0C47; border-radius:5px; font-size:16px; margin-top: 5px; background:white; height:32px; line-height:32px; } #not_small #recipes_shared .app_download_div{ width:200px; position: absolute; top: -40px; left: 0; right: 0; margin-top:0px; } #recipes_shared .app_download_div_a{ text-decoration:None; } #recipes_shared .recipebox_name_small{text-align:center;color:#920732;font-size:16px;font-weight:bold;padding-top:3px;} #recipes_shared #add_people_to_circle_link{float:right} #small #recipes_shared #add_people_to_circle_link{float:none;margin-bottom:3px} #recipes_shared #add_people_to_circle_link_a{text-decoration:underline;color:#0034d4;font-size:11px;font-weight:bold;} #recipes_shared #from_user_div_public{position:relative;text-align:center;} #recipes_shared #page_title_recipe_box {display:inline-block;text-align:left;height:17px;line-height:17px;} #not_small #recipes_shared #follow_link_div{margin-top:3px;display:inline-block;color:gray;font-size:10px;cursor:pointer;position:absolute;margin-left:5px;height:17px;line-height:17px;font-weight:bold;} #not_small #recipes_shared #follow_link_div:hover{text-decoration:underline} #not_small #recipes_shared #sort_select_div{ float:right; color:gray; } #recipes_shared .sort_label{ display:inline-block; } #recipes_shared #sort_select_div .sort_option{ display:inline-block; cursor:pointer; color:gray; } #recipes_shared #sort_select_div .sort_option_chosen{ display:inline-block; color:black; } #recipes_shared #sort_select_div .sort_option:hover{ color:black; } #not_small #recipes_shared .recipe_count_msg{ color:black;margin-left:0px;float:left;font-size:13px; text-align: left; font-family: 'Georgia Sans, sans-serif;';margin-bottom:3px;} #small #recipes_shared .recipe_count_msg{margin: 2px 0 0px 0;color:black;font-size:11px;float:left} #recipes_shared .msg_special_case_when_none_found{ background:white; padding:10px; text-align:center; } #not_small #recipes_shared .msg_link_to_fb_friends{ color:#920732; text-align:left; background:white; width:100%; padding:5px 0px 5px 2px; font-size:13px; margin:2px 0px 2px 0px; } #not_small #recipes_shared .msg_link_to_fb_friends a{ color:#920732; text-decoration:underline; } #recipes_shared .legend_about_title{font-size:85%;margin-top:5px;text-align:left} #recipes_shared .legend_cmt_recipe_title_color{color:#0034d4;} #small #recipes_shared #sort_select_div{ float:right; } #small #recipes_shared #follow_link_div{display:block;color:gray;font-size:10px;margin-top:5px;cursor:pointer;text-align:center;font-weight:bold;} #small #recipes_shared #follow_link_div:hover{text-decoration:underline} #small #recipes_shared .owner_div{ padding: 0 3px; } #small #recipes_shared .owner_div_clicked{ background:#F7E8ED; } #small #recipes_shared .owner { font-size:12px; font-weight:normal; line-height: 22px; min-height: 22px; text-align:center; white-space:nowrap; overflow:hidden; width:100%; box-sizing:border-box; font-size: 12px; border-bottom:1px dotted gray; color:gray; } #small #recipes_shared .owner_a{ color:gray; text-decoration:None; } #recipes_shared .next_prev_bottom_page{ padding-top: 15px; padding-bottom: 10px; } #recipes_shared .next_prev_top_page{ margin-bottom:1px;margin-left:10px;font-size:11px;float:left } #recipes_shared .next_prev_top_page .previous_page, #recipes_shared .next_prev_top_page .next_page{ color:black;text-decoration:none } #tag_mgmt #more_explanation{ max-width:600px; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #tag_mgmt #tag_hints li{margin-top:4px;margin-bottom:4px} #tag_mgmt #create_tag_trigger{ width:192px; text-align: center; height: 36px; line-height: 36px; box-sizing: border-box; border: 1px gray solid; border-radius: 4px; padding: 0 5px; cursor: pointer; background:white; margin-top:10px; margin-right:10px; } #tag_mgmt #newtag_div { border: 2px #a70839 solid; padding:10px; width:316px; } #tag_mgmt #newtaginput{ width: 195px; box-sizing: border-box; border: solid gray 1px; margin: 0 0 0 0; height: 36px; line-height: 36px; padding: 0 2px; } #tag_mgmt #create_tag_submit, #tag_mgmt #cancel_tag_submit { display: inline-block; text-align: center; height: 36px; line-height: 36px; box-sizing: border-box; border: 1px gray solid; border-radius: 4px; padding: 0 5px; cursor: pointer; background:white; margin-top:10px; margin-right:10px; } #tag_mgmt #create_tag_submit.clicked{ background:#eeeeee; } #tag_mgmt #create_tag_submit.disabled{ color: gray; border-color: lightgray; } #tag_mgmt .single_tag{ border-bottom:dotted 1px black; border-top:dotted 1px black; width:320px; padding-top:4px;} #tag_mgmt .tag_name{ font-weight:bold; line-height:0; padding:18px 0; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #tag_mgmt .tag_option{ line-height:0; padding:18px 0; cursor:pointer; color:#3493e5; font-weight:bold; font-size:15px; float:left; } #small #tag_mgmt .tag_option{ font-size:16px; } #not_mob #tag_mgmt .tag_option{ cursor:pointer; font-weight:bold; float:left; } #tag_mgmt .tag_option.inactive{ /* while waiting for response */ color:#adadad; } #tag_mgmt .view_recipes_link{margin-left:0;margin-right:5px;float:left;} #tag_mgmt .view_recipes_link a{margin-left:0;float:right;text-decoration:none;font-size:15px;color:gray;font-weight:bold;} #small #tag_mgmt .view_recipes_link a{font-size:16px} #small #tag_mgmt .view_recipes_link .ahref{text-decoration:underline;} #not_small #tag_mgmt .view_recipes_link .ahref{text-decoration:underline;} #not_mob #tag_mgmt .view_recipes_link .ahref:hover{color:#484848;} #not_mob #tag_mgmt .tag_option:hover{ text-decoration:underline } #not_mob #tag_mgmt .tag_option.remove_tag_confirm, #mob #tag_mgmt .tag_option.remove_tag_confirm{ color:red } /* tine, to here checking line-height:0 */ #tag_mgmt .update_tag_input{ width: 195px; box-sizing: border-box; border: solid gray 1px; margin: 0 0 0 0; height: 0px; line-height: 0px; padding: 19px 2px; margin-top:5px; margin-bottom:5px; } #tag_mgmt .tag_form_button{ text-align: center; height: 36px; height: 0px; line-height: 0; box-sizing: border-box; border: 1px gray solid; border-radius: 4px; padding: 19px 8px; cursor: pointer; background: white; margin-top: 5px; margin-bottom: 5px; } #not_small .tag_form_button{ width:200px; margin-left: 10px; } #tag_mgmt .tag_form_button.edit_tag_submit{ width:80px; display:inline-block; } #tag_mgmt .edit_form{margin-top:7px} #tag_mgmt #more_explanation_link{color:#a70839;cursor:pointer;text-decoration:none;font-weight:bold;} #tag_mgmt .explanation_line_label{font-weight:bold;} #cookie_info #instructions li{margin:10px;} #cookie_info #instructions .little_space{margin-top:7px; margin-bottom:7px} #not_small .chevron_wrapper_next{ cursor:pointer; float: left; margin-right: 5px; padding: 8px 18px; background-color: white; margin: 0 2px;} #not_small .chevron_wrapper_prev{ cursor:pointer; float: left; padding: 8px 18px; background-color: white; margin: 0 2px;} #not_small .chevron { position: relative; padding: 2px; height:17px; width: 0px; opacity:0.8; } #not_small .chevron_wrapper_prev_inactive{ cursor:auto; background:transparent; } #not_small .chevron:before { content: ''; position: absolute;top: 0;left: 0;height: 50%;width: 100%;background: #adbcc3; -webkit-transform: skew(30deg, 0deg); -moz-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); } #not_small .chevron_white:before{ background:white; } #not_small .chevron_dark:before{ background:#6f6f6f; } #not_small .chevron_inactive:before{ background: transparent; } #not_small .chevron:after { content: ''; position: absolute; top: 50%; right: 0; height: 50%; width: 100%;background: #adbcc3; -webkit-transform: skew(-30deg, 0deg); -moz-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg);-o-transform: skew(-30deg, 0deg);transform: skew(-30deg, 0deg); } #not_small .chevron_white:after{ background:white; } #not_small .chevron_dark:after{ background:#6f6f6f; } #not_small .chevron_inactive:after{ background: transparent; } #not_small .chevron_hover{opacity:1.0} #not_small .chevron_rotate180{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);-ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #small .next_button{ display:inline-block; font-weight:bold; font-size:32px;line-height:32px; height:32px;padding:0px;width:32px;text-align:center; color:#5f0b1d; margin:2px; } #small #recipes .load_more_button, #small #recipes_shared .load_more_button{ background: #CC0C47; color: white; font-size: 15px; padding: 5px 18px; border-radius: 2px; margin: 2px auto; width: 200px; text-align:center; } #small #recipes .load_more_button.clicked, #small #recipes_shared .load_more_button.clicked{ background: #A80739; } #not_small #follower_ing #content_top { padding:0px 10px 0px 8px; } #recipes #outer #recipes_view table, #recipes #outer #sort_div table { /* may not include datepicker table */ border-collapse: collapse; table-layout: fixed; white-space: normal; word-wrap: break-word; border-spacing:0; width:100%; } #recipes #outer #recipes_view table td, #recipes #outer #sort_div table td { padding:0; margin:0; } #recipes #outer #recipes_view table td { vertical-align:top; } #recipes #recipes_view_top{ min-width:600px; height:46px; } #recipes #recipes_view #results_set{ width: 100%; } #not_small #recipes #sort_div{ width:210px; text-align:left; box-sizing:border-box; float:right; margin-right:10px; } #recipes #recipes_column, #recipes #recipes_column_div { width:100%; } #not_small #recipes .vertical_search_trigger .usesfilter{ color: #CC0C47; } #not_small #recipes .single_recipe, #not_small #recipes_shared .single_recipe{ cursor:pointer; width:231px; background: white; margin:0px 7px 14px 7px; position:relative; -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25); text-align:center; } #not_small #recipes .orig_recipe_link_div, #not_small #recipes_shared .orig_recipe_link_div, #not_small #recipes .orig_recipe_link_div a, #not_small #recipes_shared .orig_recipe_link_div a{ width:231px; } #not_small #recipes .single_recipe.clicked, #not_small #recipes_shared .single_recipe.clicked { -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); } #not_small #recipes .single_recipe, #not_small #recipes_shared .single_recipe{ display: inline-block; } #not_small #not_mob #recipes .single_recipe:hover, #not_small #not_mob #recipes_shared .single_recipe:hover{ -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6); } #not_small #recipes .recipe_thumb, #not_small #recipes_shared .recipe_thumb { display: inline-block; width: 231px; height: 226px; background-position: center center; background-size: cover; /* border:solid gray 1px; */ } @media screen and (min-width: 800px) and (max-width: 849px){ #not_small #mob #recipes .single_recipe, #not_small #mob #recipes_shared .single_recipe { width:247px; margin: 0px 4px 14px 4px; } #not_small #mob #recipes .recipe_thumb ,#not_small #mob #recipes_shared .recipe_thumb{ width: 247px; height: 240px; } #not_small #mob #recipes .orig_recipe_link_div, #not_small #mob #recipes_shared .orig_recipe_link_div, #not_small #mob #recipes .orig_recipe_link_div a, #not_small #mob #recipes_shared .orig_recipe_link_div a{ width:247px; } } @media screen and (min-width : 900px) and (max-width: 1000px){ #not_small #mob #recipes .single_recipe, #not_small #mob #recipes_shared .single_recipe { margin: 0px 12px 14px 12px; } } /* Used to be that it showed only 2 recipes across through 760px. However, changed to 750px because many Samsung tablets are 753px and want to show 3 across. Will with default width above. There are also a number of users using devices that are 760px who will also now see 3 recipes. - these devices are mobile, but user_agent is Mac. So probably iPad, but not sure why so many are 760px? Split screen? */ @media only screen and (max-width : 750px) { #not_small #mob #recipes .single_recipe, #not_small #mob #recipes_shared .single_recipe{ width:260px; } #not_small #mob #recipes .recipe_thumb, #not_small #mob #recipes_shared .recipe_thumb{ width: 260px; height: 254px; } #not_small #mob #recipes .orig_recipe_link_div, #not_small #mob #recipes_shared .orig_recipe_link_div, #not_small #mob #recipes .orig_recipe_link_div a, #not_small #mob #recipes_shared .orig_recipe_link_div a{ width:260px; } } @media screen and (min-width : 601px) and (max-width: 602px){ /* Kindle HD 8 is 601. For some reason needed to say 601, at least in emulator*/ #not_small #mob #recipes .single_recipe, #not_small #mob #recipes_shared .single_recipe{ width: 180px; margin: 0px 6px 14px 6px; } #not_small #mob #recipes .recipe_thumb, #not_small #mob #recipes_shared .recipe_thumb{ width: 180px; height: 146px; } #not_small #mob #recipes .orig_recipe_link_div, #not_small #mob #recipes_shared .orig_recipe_link_div, #not_small #mob #recipes .orig_recipe_link_div a, #not_small #mob #recipes_shared .orig_recipe_link_div a{ width:180px; } } @media screen and (min-width : 850px) and (max-width : 1000px) { #not_small #mob #recipes .single_recipe, #not_small #mob #recipes_shared .single_recipe{ width:260px; } #not_small #mob #recipes .recipe_thumb, #not_small #mob #recipes_shared .recipe_thumb{ width: 260px; height: 254px; } #not_small #mob #recipes .orig_recipe_link_div, #not_small #mob #recipes_shared .orig_recipe_link_div, #not_small #mob #recipes .orig_recipe_link_div a, #not_small #mob #recipes_shared .orig_recipe_link_div a{ width:260px; } } @media screen and (min-width : 961px) and (max-width: 963px){ /* Kindle HD 8 landscape width is 962. For some reason needs 1px bigger, at least in emulator */ #not_small #mob #recipes .single_recipe, #not_small #mob #recipes_shared .single_recipe{ width: 220px; margin: 0px 8px 14px 8px; } #not_small #mob #recipes .recipe_thumb, #not_small #mob #recipes_shared .recipe_thumb{ width: 220px; height: 214px; } #not_small #mob #recipes .orig_recipe_link_div, #not_small #mob #recipes_shared .orig_recipe_link_div, #not_small #mob #recipes .orig_recipe_link_div a, #not_small #mob #recipes_shared .orig_recipe_link_div a{ width:220px; } } #not_small #recipes_shared .owner_div{ text-align:center; height:18px; /* necessary for height to be correct in iPad when .owner_div a cuts off a third line */ line-height:18px; } #not_small #recipes_shared .owner_div_clicked{ background:#F7E8ED; } #not_small #recipes_shared .owner_div a{ color:#737373; text-decoration:None; display:inline-block; overflow: hidden; text-align: center; min-height: 16px; max-height: 16px; line-height: 16px; font-style: italic; font-size: 13px; font-family:arial; /* open sans doesn't work with italic. The last part of the last letter is cut off with overflow:hidden */ } #not_small #not_mob #recipes_shared .owner_div a:hover{ text-decoration:underline; } #not_small #recipes .recipe_info_column, #not_small #recipes_shared .recipe_info_column{ font-family:arial; padding-top:5px; overflow:hidden; min-height:32px; } #not_small #recipes .recipe_title, #not_small #recipes_shared .recipe_title{ height:50px; /* necessary for height to be correct in iPad when recipe_title_a cuts off a third line. */ border-bottom: 1px dashed #DDDDDD; } #not_small #recipes .recipe_title a, #not_small #recipes_shared .recipe_title a{ overflow: hidden; font-size: 17px; font-weight: normal; color: black; text-decoration: None; display: inline-block; text-align: center; min-height: 42px; max-height: 42px; line-height: 21px; padding: 0 3px; box-sizing: border-box; width: 100%; } #not_small #recipes .orig_recipe_link_div, #not_small #recipes_shared .orig_recipe_link_div{ font-size: 11px; text-align:center; line-height:21px; background-color: #FAFAFA; height: 21px; } #not_small #recipes .orig_recipe_link_div.haslink:hover, #not_small #recipes_shared .orig_recipe_link_div.haslink:hover{ background-color: #A60839; color: #fff; text-decoration: none; } #not_small #recipes .orig_recipe_link_div.haslink a, #not_small #recipes_shared .orig_recipe_link_div.haslink a{ color: #9A9A9A; text-decoration:None; display:inline-block; white-space: nowrap; overflow:hidden; text-decoration: none; } #not_small #recipes .orig_recipe_link_div.haslink a:hover, #not_small #recipes_shared .orig_recipe_link_div.haslink a:hover{ color: white; text-decoration: none; } #not_small #recipes .description_popup, #not_small #recipes_shared .description_popup{ position: absolute; z-index: 2; top: 50px; left: 5px; background: white; border: solid whitesmoke 1px; padding: 5px; width: 233px; max-height: 190px; overflow: hidden; box-shadow: 0 0 5px rgb(117, 117, 117); font-size:14px; } #TINE_FIX_DUPLICATE_NAME #not_small #recipes .star{ position:absolute; right:5px; margin:0px; height: 19px; width: 19px; cursor: pointer; top:5px; background: url('https://cdn.copymethat.com/static/star.png') no-repeat; } .triangle-topright { position: absolute; right: 0px; margin: 0px; cursor: pointer; top: 0px; background: url('https://cdn.copymethat.com/static/starred_corner_recipe.png') no-repeat; height: 55px; width: 55px; } #not_small #recipes .options_trig{ float:left; padding-right:8px; } #not_small #recipes .options_trig .spricon, #not_small #recipes .description_trigger .spricon{ height:18px; width:18px; opacity:.4; margin-right:8px; } #not_small #recipes .options_trig .spricon:hover, #not_small #recipes .description_trigger .spricon:hover{ opacity:.6; } #not_small #recipes .options_hidden .options_showing_ic{ display:none; } #not_small #recipes .options_trig .options_notshowing_ic{ display:none; } #not_small #recipes .options_hidden .options_notshowing_ic{ display:block; } #not_small #recipes .options{ position:absolute; bottom:55px; left:5px; background:#A60839; padding:5px 0px 15px 0px; font-size:12px; cursor:default; width: 210px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.48); border-radius:2px; z-index:1; } #not_small #recipes .options button{ margin-top:10px; cursor:pointer; background: white; border:solid 1px #C9C9C9; height: 42px; line-height: 42px; width: 190px; border-radius: 4px; font-size:13px; padding:0; color:black; } #not_small #recipes .options button:hover{ background: #DFDFDF; } #not_small #recipes .options .recipe_delete_confirm{ background:white; color:red; } #not_small #recipes .options .recipe_delete_confirm.clicked{ background:#a0a0a0; } #not_small #recipes .options .close_options{ float:right; font-weight:bold;padding:3px;margin-right:3px; } #not_small #recipes .options .close_options:hover{ cursor:pointer; } #not_small #recipes #recipes_cookbook_picker_div{ position:absolute; font-size:13px; z-index:100; padding:6px; border-radius:3px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.48); background: white; border: solid 2px #eeeeee; min-height: 70px; min-width: 120px; text-align: left; } #not_small #recipes #recipes_cookbook_picker_div .cb_project_name_can_add, #not_small #recipes #recipes_cookbook_picker_div .cb_project_name_added{ border: solid 1px gray; padding: 5px; height: 26px; line-height: 26px; margin: 3px 0; border-radius: 3px; overflow:hidden; } #not_small #recipes #recipes_cookbook_picker_div .cb_project_name_can_add:hover{ background:#eeeeee; cursor: pointer; } #not_small #recipes #recipes_cookbook_picker_div .cb_project_name_can_add .is_added{ display:none; } #not_small #recipes #recipes_cookbook_picker_div .cb_project_name_added .is_added{ display:inline-block; } #not_small #recipes #recipes_mp_datepicker_div{ position:absolute; font-size:16px; z-index:1000; padding:6px; background:#A60839; border-radius:3px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.48); margin-left: 0; } #not_small #recipes #recipes_mp_datepicker_div.menu_with_mp_quickview{ height:320px; } #not_small #recipes #recipes_mp_datepicker_div.menu_with_mp_quickview #mp_quickview{ height:305px; } #not_small #recipes #mp_datepicker_cancel{ background:white; margin-top:2px; height:30px; line-height:30px; border-radius:5px; text-align:center; } #not_small #recipes #mp_datepicker_cancel:hover{ background:#E6E6E6; cursor:pointer; } /* ------------------------------------- */ #mealplan #content_inner{ text-align:center; padding:5px 0px 20px 0px; background:transparent; } #small #mealplan #content_inner{ padding:0px 0px 20px 0px; } .generic_popup{ /* Only works if no need to scroll contents. Scrolling page only scrolls background page, not fixed menu. */ /* but, maybe with newer devices, does scroll popup properly, even if background can scroll? */ /* Code for base_extra_popups(in base.html) if .onload_popup does allow scrolling for those... */ position: fixed; width: 300px; box-sizing:border-box; right: 0; left: 0; margin-right: auto; margin-left: auto; background: white; min-height: 100px; padding: 30px 10px; border: #CC0C47 solid 3px; z-index: 1000; text-align:center; font-size:18px; line-height:24px; top:50px; } .generic_popup .generic_popup_link{ color:blue; } .generic_popup .generic_popup_link.clicked{ color:purple; } .generic_popup .generic_popup_link_err{ margin-bottom:15px; font-size:15px; } .generic_popup .generic_popup_ok{ width:60px; height:40px; border:gray 1px solid; /* border adds extra height, even with border-box, if padding takes up the full height */ border-radius:4px; text-align: center; line-height: 0px; padding:20px 0; margin: 0 auto; cursor:pointer; white-space: nowrap; word-wrap: break-word; box-sizing: border-box; } #person_info_wrapper{ background:white; overflow:hidden; } #not_small #person_info_wrapper{ min-width:580px; } #person_info_wrapper{ text-align:left; max-width:980px; margin:0 auto; padding: 10px 0px 0 0; overflow:hidden; width:100%; padding-left:5px; } #small #person_info_wrapper{ width:auto; padding: 10px; } #not_small #person_info_wrapper .profile_picture{ width:100px; height:100px; border-radius:200px; } #small #person_info_wrapper .profile_picture{ float:left; width:65px; height:65px; margin-right:5px; margin-bottom:4px; margin-bottom:1px; border-radius:200px; } #not_small #person_info_wrapper .owner_name { display: inline-block; font-size: 18px; font-weight: bold; line-height: 34px; overflow: hidden; margin-right: 10px; margin-top: 3px; margin-bottom: 3px; max-width: 460px; color: #313131; } #small #person_info_wrapper .owner_name{ display: block; font-size: 16px; line-height: 22px; overflow: hidden; max-width: 235px; margin: 5px 0 7px 0; font-weight: bold; color: #3a3a3a; } @media screen and (max-width : 1023px){ #not_small #person_info_wrapper .owner_name{ max-width:290px; } } @media screen and (max-width : 799px){ #not_small #person_info_wrapper .owner_name{ max-width:260px; } } @media screen and (max-width : 767px){ #not_small #person_info_wrapper .owner_name{ max-width:360px; } } @media screen and (min-width : 360px){ #small #person_info_wrapper .owner_name{ max-width:270px; } } @media screen and (min-width : 375px){ #small #person_info_wrapper .owner_name{ max-width:285px; } } @media screen and (min-width : 411px){ #small #person_info_wrapper .owner_name{ max-width:315px; } } @media screen and (min-width : 568px){ #small #person_info_wrapper .owner_name{ max-width:475px; } } #person_info_wrapper .button_follow{ overflow:hidden; background: #2196F3; color: white; height:34px; padding:17px 0; line-height:0px; margin-top:3px; margin-bottom:3px; width:70px; text-align:center; font-size: 12px; border-radius: 3px; cursor:pointer; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } #small #person_info_wrapper .button_follow{ height:32px; padding:16px 0; width:74px; margin:0; border-radius: 14px; } #not_small #person_info_wrapper #personal_recipebox_share_div{ overflow:hidden; margin: 8px 10px 4px 0; text-align:center; border-radius: 3px; cursor:pointer; background: #e8e8e8; float: left; height: 36px; line-height: 36px; width: 80px; border: 1px solid #e0e0e0; font-weight: bold; color: #797878; font-size: 13px; } #small #person_info_wrapper #personal_recipebox_share_div{ overflow:hidden; text-align:center; font-size: 12px; border-radius: 3px; cursor:pointer; background: #e8e8e8; color: black; height:32px; line-height:32px; width:64px; margin:0 0 0 2px; border-radius: 14px; } #not_small #person_info_wrapper .owner_profile_text{ width:500px; max-height: 80px; line-height: 20px; overflow:hidden; font-size:15px; padding-top: 7px; display:inline-block; } @media screen and (max-width : 767px){ #not_small #person_info_wrapper .owner_profile_text{ width:388px; } } #small #person_info_wrapper .owner_profile_text{ margin-left:0px; margin-top:0px; width:100%; max-height: 80px; line-height: 20px; overflow:hidden; font-size:16px; box-sizing: border-box; padding-left:3px; padding-right:3px; padding-top: 4px; margin-bottom:6px; } #person_info_wrapper .owner_profile_text .link_in_recipe{text-decoration:None; color:#1d5de0;} /* class is added to element in tags.py*/ /* class also used in recipe text */ #not_small #person_info_wrapper #category_wrapper{ float:right; margin-right:5px; } @media screen and (max-width : 767px){ #not_small #person_info_wrapper #category_wrapper{ float:none; } } #not_small #person_info_wrapper .category_button{ font-size:13px; padding:2px 10px; border-radius:5px; background: white; border: 1px solid #e0e0e0; font-weight: bold; color: #797878; cursor:pointer; line-height:16px; text-align:center; display:inline-block; margin-right:5px; } #small #person_info_wrapper .category_button{ font-size:13px; padding:2px 3px; border-radius:5px; background: white; border: 1px solid #e0e0e0; font-weight: bold; color: #606060; line-height:16px; text-align:center; display:inline-block; } @media screen and (min-width : 321px){ #small #person_info_wrapper .category_button{ padding:2px 8px; } } @media screen and (min-width : 411px){ #small #person_info_wrapper .category_button{ padding:2px 14px; } } #not_mob #person_info_wrapper .category_button:hover{ background:#E9E9E9; } #not_small #person_info_wrapper .category_button.active{ background:#f6f6f6; } #small #person_info_wrapper .category_button.active{ background:#f6f6f6; } #person_info_wrapper a{ color:black; text-decoration:none; } #small #shopping_list #button_show_sl_header{ position:fixed; padding:2px 15px 2px 5px; z-index:10; top:13px; right:0px; } #small #shopping_list #button_show_sl_header_inner{ font-size: 26px; font-weight: bold; cursor: pointer; color: black; background: #d4d4d4; height: 34px; width: 34px; line-height: 0; padding: 17px 0; border-radius: 17px; box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, .5); z-index: 10; top: 15px; right: 15px; text-align: center; white-space: nowrap; word-wrap: break-word; box-sizing: border-box; } #shopping_list #sl_items_layover.on, #shopping_list #sl_actions_layover.on{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.56); } #shopping_list #sl_page_error{ position: fixed; width: 400px; left: 50%; top: 100px; margin-left: -200px; z-index: 10; height: 40px; line-height: 40px; text-align: center; background: #FFEB3B; cursor:pointer; } #small #shopping_list #small_main_navi{ position: fixed; top:0; left:0; width: 100%; z-index: 4; height:88px; /* Should match heigth of small section_included_ingredients */ border-bottom: solid 1px #E6E6E6; background: #F6F6F6; overflow:visible; } #small #shopping_list #small_main_navi.minimized{ display:none; } #small #shopping_list #section_included_ingredients{ padding-top:88px; /* Should match heigth of fixed small_main_navi */ } #small #shopping_list #section_included_ingredients.minimized{ padding-top:0px; } #not_small #shopping_list #sl_navi_menu{ background: #eef2f4; padding: 6px 0px 6px 15px; margin: 0; z-index:4; border-bottom:2px solid #D1D1D1; } #not_small #shopping_list #header_border_fixed_sl.fixed{ width:100%; height:10px; /* must match js handle_sl_scroll_fix() and #sl_navi_menu.fixed top */ background:#A80739; position:fixed; top:0; left:0; z-index:4; cursor:pointer; } #not_small #shopping_list #sl_navi_menu.fixed{ position:fixed; width: 650px; /* match #shopping_list .content*/ top:10px; /* height of header_border_fixed_sl */ box-sizing: border-box; border-bottom:2px solid #D1D1D1; } @media screen and (max-width : 650px){ #not_small #shopping_list #sl_navi_menu.fixed{ width:100% } } #not_small #shopping_list #sl_navi_menu #item_edit_action_div{ margin-left:4px; } /* sl action / navi button */ #not_small #shopping_list .sl_more_trigger{ font-size:11px; font-weight:bold; float:right; height:45px; line-height:45px; cursor:pointer; color:rgb(82, 82, 82); margin-right:13px; } #not_small #shopping_list .sl_more_trigger:hover{ color:black; } #small #shopping_list .sl_button{ margin-right:8px; padding:17px 0; line-height:0px; float:left; background:white; font-size:13px; font-weight:bold; width:72px; border:1px gray solid; border-radius: 2px; color:#282828; font-family: arial; text-align:center; box-sizing:border-box; white-space:nowrap; word-wrap:break-word; } #small #shopping_list .sl_button.inactive{ color:gray; cursor:default; } #small #shopping_list .sl_button.narrow{ width:60px; } #small #shopping_list .sl_button.narrow .full_name{ display:none; } @media screen and (min-width : 375px){ #small #shopping_list .sl_button.narrow{ width:72px; } #small #shopping_list .sl_button.narrow .full_name{ display:inline-block; } #small #shopping_list .sl_button.narrow .short_name{ display:none; } } #not_small #shopping_list .sl_button.inactive{ color:gray; cursor:default; } #not_small #shopping_list .sl_button{ height:32px; line-height:32px; padding:0 10px; font-family:arial; font-size:13px; border:solid 1px rgb(172, 172, 172); border-radius:3px; font-weight:bold; color:rgb(50,50,50); box-sizing: content-box; float:left; margin-right:5px; cursor:pointer; background:white; } #small #shopping_list .sl_button.clicked, #not_small #shopping_list .sl_button.clicked{ background:lightgray; } #small #shopping_list .sl_button_select_option, #not_small #shopping_list .sl_button_select_option{ background:#B3E5FC; } #not_small #shopping_list .sl_button_confirm{ color:red; } #not_small #shopping_list #multi_mode_button{ margin-right:5px; float: left; } #small #shopping_list #multi_mode_button, #small #shopping_list #add_item_trigger { float: left; margin-right:5px; margin-left:5px; } @media screen and (min-width: 411px){ #small #shopping_list #multi_mode_button, #small #shopping_list #add_item_trigger { margin-right:10px; margin-left:10px; } } #shopping_list #cancel_edit{ background: white; border: 2px #151515 solid; /* border adds extra height, even with border-box, if padding takes up the full height */ border-radius: 2px; width: 40px; padding:16px 0; line-height: 0px; top: 6px; left: 5px; overflow: hidden; position: absolute; font-size: 13px; margin-right: 10px; font-weight: bold; color: #151515; font-family: arial; text-align:center; cursor:pointer; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; } #not_small #shopping_list #cancel_edit{ top:0; left:0; float:left; position: relative; } #shopping_list #cancel_edit.clicked{ background: #E1E1E1; } #not_small #shopping_list #check_all_none_wrapper, #small #shopping_list #check_all_none_wrapper{ position: relative; float: left; line-height: 32px; height: 34px; overflow: visible; border: 1px #D0CFCF solid; margin-right: 5px; border-radius: 2px; width: 41px; box-sizing: border-box; } #small #shopping_list #check_all_none_wrapper{ line-height: 34px; height: 36px; margin-left: 4px; margin-right: 8px; width: 42px; } #shopping_list .sl_check_allnone_options{ border:1px solid gray; position:absolute; top:36px; left:0; z-index:10; background:white; box-sizing: border-box; padding-left: 5px; padding-right: 5px; font-weight:bold; padding-bottom:5px; padding-top:5px; text-align:left; } #shopping_list .sl_checkallnone_option{ display:block; text-decoration:none; padding-left:5px; width:130px; height:40px; line-height:40px; margin:0px 5px; border-bottom:1px solid gray; color:rgb(82, 82, 82); cursor:pointer; font-family: arial; font-size: 13px; } #shopping_list .sl_checkallnone_option.first{ border-top:1px solid gray; } #shopping_list .sl_checkallnone_option:hover{ background:rgb(230, 230, 230); } #not_small #shopping_list .sl_filtertext{ line-height: 30px; height: 30px; margin-top: 2px; box-sizing: border-box; padding: 0 3px; width: 140px; border: 1px #aba8a8 solid; } @media screen and (min-width : 675px){ #not_small #shopping_list #sl_navi_menu.edit_mode .sl_filtertext{ width: 82px; } } #small #shopping_list .sl_filtertext{ height: 34px; line-height: 34px; padding: 0px 3px; border: 1px #aba8a8 solid; } #small #shopping_list .sl_filtertext{ width: 78px; } @media screen and (min-width : 360px){ #small #shopping_list .sl_filtertext{ width: 90px; } } @media screen and (min-width : 375px){ #small #shopping_list .sl_filtertext{ width: 90px; } } @media screen and (min-width : 411px){ #small #shopping_list .sl_filtertext{ width: 110px; } } #shopping_list #sl_list_view_trigger{ height: 34px; line-height: 34px; padding: 0 10px; font-family: arial; font-size: 13px; border-radius: 3px; font-weight: bold; float: left; margin-right: 5px; cursor: pointer; background: white; width: 145px; box-sizing: border-box; text-align: left; background:#CC0C47; color:white; } #shopping_list .sl_list_view_showing{ width: 110px; overflow: hidden; display: inline-block; line-height: 0; padding: 17px 0; word-break: break-all; white-space: nowrap; word-wrap: break-word; box-sizing: border-box; } #small #shopping_list #sl_list_view_trigger{ height: 36px; line-height: 36px; padding: 0 5px; width: 96px; } #small #shopping_list .sl_list_view_showing{ width:74px; } @media screen and (min-width : 360px){ #small #shopping_list #sl_list_view_trigger{ padding: 0 5px; width: 120px; } #small #shopping_list .sl_list_view_showing{ width:96px; } } @media screen and (min-width : 375px){ #small #shopping_list #sl_list_view_trigger{ padding: 0 5px; width: 136px; } #small #shopping_list .sl_list_view_showing{ width:110px; } } @media screen and (min-width : 411px){ #small #shopping_list #sl_list_view_trigger{ padding: 0 10px; width: 143px; } #small #shopping_list .sl_list_view_showing{ width:106px; } } #not_small #shopping_list #sl_list_view_options{ border: 1px solid gray; position: absolute; top: 36px; right: 0; z-index: 10; background: white; box-sizing: border-box; padding-top: 5px; font-weight: bold; padding-bottom: 5px; text-align: left; width: 200px; overflow-y:auto; max-height:350px; } @media screen and (min-height : 600px){ #not_small #shopping_list #sl_list_view_options{ max-height:420px; } } @media screen and (min-height : 700px){ #not_small #shopping_list #sl_list_view_options{ max-height:520px; } } #not_small #shopping_list .sl_list_view_option{ display: block; text-decoration: none; padding: 0 7px; min-height: 38px; /* if change, also for not_mob */ line-height: 38px; color: rgb(60, 60, 60); cursor: pointer; font-family: arial; font-size: 13px; width: 148px; box-sizing: border-box; overflow:hidden; border-bottom: 1px dotted gray; width:100%; } #small #shopping_list .sl_list_view_option{ border-bottom: 1px solid gray; line-height: 40px; min-height:40px; text-align: left; padding-left: 10px; font-weight: bold; } #small #shopping_list .sl_list_view_option.selected{ box-shadow: inset 0px 0px 0px 2px gray; } #not_small #shopping_list .sl_list_view_option.selected{ border: solid 2px black; padding-left: 5px; } #not_small #shopping_list .sl_list_view_option.temp_unselected{ border: none; } #not_mob #shopping_list .sl_list_view_option{ height:38px; /* set height to avoid hover weirdness with border. Still allows list to go to next line if font setting is bigger in Android */ } #not_mob #shopping_list .sl_list_view_option:hover{ border: solid 2px black; padding-left: 5px; } #shopping_list .select_box_wrapper{ float:left; width: 32px; border-radius: 2px; margin-left:1px; } #small #shopping_list .item_cb_taller_unchecked, #small #shopping_list .item_cb_taller_checked, #small #shopping_list .item_cb_taller_somechecked { padding-left: 26px; cursor: pointer; overflow: hidden; } #not_small #shopping_list .item_cb_taller_unchecked, #not_small #shopping_list .item_cb_taller_checked, #not_small #shopping_list .item_cb_taller_somechecked { padding-left: 26px; cursor: pointer; overflow: hidden; margin-left:4px; } #shopping_list .item_cb_taller_unchecked{ background: url('https://cdn.copymethat.com/static/checkbox_green_unchecked_26_34.png') no-repeat; } #shopping_list .item_cb_taller_checked{ background: url('https://cdn.copymethat.com/static/checkbox_green_checked_26_34.png') no-repeat; } #shopping_list .item_cb_taller_somechecked{ background: url('https://cdn.copymethat.com/static/checkbox_green_somechecked_26_34.png') no-repeat; } #not_small #shopping_list .item_cb_select_unchecked_forallnone, #not_small #shopping_list .item_cb_select_somechecked_forallnone, #not_small #shopping_list .item_cb_select_checked_forallnone { display: block; padding-left: 26px; cursor: pointer; overflow: hidden; background-position-x: 3px; } #small #shopping_list .item_cb_select_unchecked_forallnone, #small #shopping_list .item_cb_select_somechecked_forallnone, #small #shopping_list .item_cb_select_checked_forallnone { display: block; padding-left: 26px; cursor: pointer; overflow: hidden; background-position-x: 2px; } #shopping_list .item_cb_select_unchecked_forallnone{ background: url('https://cdn.copymethat.com/static/cb_select_unchecked_26_30.png?v=2') no-repeat; } #shopping_list .item_cb_select_somechecked_forallnone { background: url('https://cdn.copymethat.com/static/cb_select_somechecked_26_30.png?v=2') no-repeat; } #shopping_list .item_cb_select_checked_forallnone { background: url('https://cdn.copymethat.com/static/cb_select_checked_26_30.png?v=2') no-repeat; } #not_small #shopping_list #item_select_all_wrapper, #small #shopping_list #item_select_all_wrapper{ position:relative; float:left; line-height:34px; height:34px; overflow:visible; border: 1px #D0CFCF solid; margin-right:5px; border-radius:2px; } #small #shopping_list #item_select_all_wrapper{ margin-left:5px; } /* menu look */ #shopping_list .jump_to{ cursor:pointer; } #small #shopping_list .small_sl_menu_subheader{ max-height: 44px; min-height: 44px; line-height: 22px; overflow:hidden; text-align:left; font-weight:bold; padding-left:10px; border-bottom:solid gray 1px; padding-bottom:5px; padding-top:5px; } #shopping_list .menu_options_div, #sl_category_options_menu .menu_options_div{ padding: 10px 10px; width: 372px; margin: 0 auto; } #not_small #shopping_list .not_small_popup_menu{ max-height: 390px; overflow: hidden; } #not_small #shopping_list .not_small_popup_menu .not_small_menu_scroll{ max-height: 300px; } #not_small #add_item_menu{ max-height: none; } #not_small #add_item_menu.not_small_popup_menu .not_small_menu_scroll{ max-height: 180px; } @media screen and (min-height : 600px){ #not_small #shopping_list .not_small_popup_menu{ max-height: 520px; } #not_small #shopping_list .not_small_popup_menu .not_small_menu_scroll{ max-height: 400px; } #not_small #add_item_menu.not_small_popup_menu .not_small_menu_scroll{ max-height: 300px; } } @media screen and (min-height : 700px){ #not_small #shopping_list .not_small_popup_menu{ max-height: 620px; } #not_small #shopping_list .not_small_popup_menu .not_small_menu_scroll{ max-height: 500px; } #not_small #add_item_menu.not_small_popup_menu .not_small_menu_scroll{ max-height: 400px; } } @media screen and (min-height : 800px){ #not_small #shopping_list .not_small_popup_menu{ max-height: 720px; } #not_small #shopping_list .not_small_popup_menu .not_small_menu_scroll{ max-height: 600px; } #not_small #add_item_menu.not_small_popup_menu .not_small_menu_scroll{ max-height: 500px; } } @media screen and (min-height : 900px){ #not_small #shopping_list .not_small_popup_menu{ max-height: 840px; } #not_small #shopping_list .not_small_popup_menu .not_small_menu_scroll{ max-height: 700px; } #not_small #add_item_menu.not_small_popup_menu .not_small_menu_scroll{ max-height: 600px; } } #not_small #shopping_list #category_admin_menu.not_small_popup_menu{ max-height: none; } #not_small #shopping_list #list_admin_menu.not_small_popup_menu { max-height: none; } #shopping_list #list_admin_menu .list_color_chooser_div{ overflow:hidden; padding:1px; } #shopping_list #list_admin_menu .list_color_chooser{ height:32px; width:32px; border:solid 1px gray; float:left; margin:0 3px; cursor:pointer; } #shopping_list #list_admin_menu .list_color_chooser:hover{ border:solid 1px black; } #shopping_list #list_admin_menu .list_color_chooser.active{ border:solid 2px black; margin:-1px 2px 0 2px; } #shopping_list #list_admin_menu input[type=text], #shopping_list #category_admin_menu input[type=text]{ height: 32px; border: 1px gray solid; } #mob #shopping_list #list_admin_menu input[type=text], #mob #shopping_list #category_admin_menu input[type=text]{ max-width:180px; } @media screen and (min-width : 360px){ #mob #shopping_list #list_admin_menu input[type=text], #mob #shopping_list #category_admin_menu input[type=text]{ max-width:220px; } } @media screen and (min-width : 375px){ #mob #shopping_list #list_admin_menu input[type=text], #mob #shopping_list #category_admin_menu input[type=text]{ max-width:235px; } } @media screen and (min-width : 411px){ #mob #shopping_list #list_admin_menu input[type=text], #mob #shopping_list #category_admin_menu input[type=text]{ max-width:260px; } } #shopping_list #list_admin_menu .save_button, #shopping_list #category_admin_menu .save_button { line-height: 0; min-width: 60px; padding: 16px 8px; border: 1px solid gray; border-radius: 3px; display: inline-block; cursor: pointer; font-size: 15px; text-align:center; } #shopping_list .not_small_popup_menu .save_button.inactive{ color:#ABABAB; } #not_small .not_small_popup_menu .menu_close{ float:right; color:white; line-height:44px; height:44px; width:40px; text-align:center; font-weight:bold; cursor:pointer; } #not_small .not_small_popup_menu .menu_close:hover{ color:#C2C2C2; } #not_small .not_small_popup_menu input[type=text]{ height: 28px; line-height: 28px; padding: 0 2px; border: solid gray 1px; border-radius: 2px; } #small .not_small_popup_menu input[type=text]{ height: 38px; line-height: 38px; padding: 0 2px; border: solid gray 1px; border-radius: 2px; } #shopping_list .menu_update_msg, #add_item_menu .menu_update_msg, #sl_category_options_menu .menu_update_msg, #mealplan_others .menu_update_msg { position: absolute; width: 100%; height: 40px; line-height: 40px; left: 0; top: 40px; background: #FFF9C4; color: black; text-align: center; font-size: 16px; z-index:2; cursor:pointer; } #shopping_list .menu_update_msg.error, #add_item_menu .menu_update_msg.error, #sl_category_options_menu .menu_update_msg.error, #mealplan_others .menu_update_msg.error { background:#FFEB3B; } #small #shopping_list .menu_update_msg, #small #add_item_menu .menu_update_msg, #small #sl_category_options_menu .menu_update_msg, #small #mealplan_others .menu_update_msg { position: fixed; } /* More drop-down and sl more menu (called options menu)*/ #not_small #shopping_list #sl_more_options{ border:1px solid gray; position:absolute; top:36px; left:0; z-index:10; background:white; box-sizing: border-box; width: 216px; padding: 8px 10px } #not_small #shopping_list .sl_more_option, #not_small #shopping_list .sl_more_option_confirm{ text-decoration: none; padding:20px 0; padding-left: 5px; width: 196px; line-height: 0; margin: 0; border-bottom: 1px solid gray; color:rgb(50,50,50); cursor: pointer; font-family: arial; font-size: 14px; font-weight:bold; text-align:left; white-space: nowrap; word-wrap: break-word; box-sizing: border-box; overflow: hidden; } #not_small #shopping_list .sl_more_option_confirm{ font-size: 15px; white-space: normal; } #not_small #shopping_list .sl_more_option_confirm #clear_this_confirm_sl_name{ font-weight: bold; font-size: 90%; width: 100%; overflow: hidden; white-space: nowrap; word-wrap: break-word; } #not_small #shopping_list .sl_more_option.first_row{ border-top:1px solid gray; } #not_small .sl_more_option:hover{ background:rgb(230, 230, 230); } #not_small #shopping_list .sl_more_option a{ text-decoration:none; color:rgb(82, 82, 82); } #not_small #shopping_list .sl_more_option.inactive a, #not_small #shopping_list .sl_more_option.inactive { color:gray; } #not_small #shopping_list .sl_more_option_confirm{ line-height:19px; width:175px; padding-top:5px; font-weight: normal; height:auto; padding-bottom:10px; } #small #shopping_list .sl_options_menu_option, #small #shopping_list .sl_options_menu_option_confirm{ border-bottom: 1px solid gray; line-height: 40px; min-height:40px; text-align: left; padding-left: 10px; font-weight: bold; } #small #shopping_list .sl_options_menu_option_confirm #clear_this_confirm_sl_name{ font-weight: bold; width: 100%; overflow: hidden; white-space: nowrap; word-wrap: break-word; } #small #shopping_list .sl_options_menu_option a{ text-decoration:none; color:black; } #small #shopping_list .sl_options_menu_option.inactive, #small #shopping_list .sl_options_menu_option.inactive a{ color:gray; } #small #shopping_list .sl_options_menu_option_confirm{ line-height:21px; padding-top:5px; font-weight: normal; height:auto; padding-bottom:10px; } #small #shopping_list .sl_options_menu_option_clicked{ background:#A80739; color:white; } #small #shopping_list .sl_options_menu_option_clicked a{ color:white; } #shopping_list #clear_all_confirm_button_div{ position: absolute; background: white; width: 230px; top: 0; padding: 10px; text-align: left; border: solid 2px red; z-index:10; right:-120px; } /* Master menu: edit before copying */ #shopping_list #master_copyto_edit_menu .divider_line{ border-top: 2px #e2e2e2 solid; height: 0px; width:100%; } #small #shopping_list #master_copyto_edit_menu .edit_upper_div{ margin-left:20px; margin-right:20px; margin-top:10px; } #not_small #shopping_list #master_copyto_edit_menu .edit_upper_div{ margin-left:5px; margin-right:5px; margin-top:10px; } #not_small #master_copyto_edit_menu #edit_single_item_form{ margin:20px; } #shopping_list #master_copyto_edit_menu .expanding_area{ border: 1px solid black; } #shopping_list #master_copyto_edit_menu .expanding_area textarea, #shopping_list #master_copyto_edit_menu .expanding_area pre { /* width is set in JS or HTML */ padding: 5px 5px 7px 5px; } #ios #shopping_list #master_copyto_edit_menu .expanding_area pre { /* padding: 5px 8px 7px 8px; */ /* no longer true */ /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */ } /* Master action row */ #small #shopping_list #item_edit_master_row{ position: fixed; width: 100%; height: 34px; z-index: 3; padding-top: 5px; padding: 3px 0 3px 6px; background: #f6f6f6; } #shopping_list #master_list_trigger_wrapper{ background:white; float: left; height: 34px; line-height: 34px; margin-right: 5px; font-family: arial; font-size: 13px; font-weight: bold; box-sizing: border-box; border-radius: 3px; display:inline-block; color:rgb(50,50,50); padding:0 0 0 5px } #shopping_list #master_list_trigger{ height: 32px; line-height: 32px; margin-top: 1px; margin-right: 3px; padding: 0 5px; font-family: arial; font-size: 13px; border-radius: 3px; font-weight: bold; float: left; /* margin-right: 5px;*/ cursor: pointer; width: 150px; box-sizing: border-box; text-align: left; background:#f6d3de; border:1px solid rgb(172, 172, 172); color:rgb(50,50,50); word-break: break-all; } #shopping_list .master_list_copyto_selected{ width:125px; overflow:hidden; display:inline-block; height:32px; } #shopping_list #master_copyto_options{ border: 1px solid gray; position: absolute; top: 36px; right: 0; z-index: 10; background: white; box-sizing: border-box; padding-top: 5px; font-weight: bold; padding-bottom: 5px; text-align: left; width: 180px; } #not_small #shopping_list #master_copyto_options_scroll{ max-height:350px; overflow-y:auto; } #small #shopping_list #master_copyto_options_scroll{ max-height:280px; overflow-y:auto; } @media screen and (min-height : 568px){ #small #shopping_list #master_copyto_options_scroll{ max-height:380px; } } @media screen and (min-height : 667px){ #small #shopping_list #master_copyto_options_scroll{ max-height:470px; } } @media screen and (min-height : 732px){ /* iphone 6+, nexus 6 */ #small #shopping_list #master_copyto_options_scroll{ max-height:540px; } } @media screen and (min-height : 620px){ #not_small #shopping_list #master_copyto_options_scroll{ max-height:380px; } } @media screen and (min-height : 700px){ #not_small #shopping_list #master_copyto_options_scroll{ max-height:470px; } } #shopping_list .master_copyto_use_prev_checkbox_label{ float: left; display: inline-block; height: 38px; width: 155px; line-height: 18px; padding-left: 0px; font-weight: normal; font-size: 14px; } #shopping_list .master_copyto_option, #shopping_list .master_copyto_use_prev_checkbox_wrapper{ display: block; text-decoration: none; padding-left: 7px; padding-right: 7px; height: 38px; line-height: 38px; color: rgb(60, 60, 60); cursor: pointer; font-family: arial; font-size: 13px; width: 148px; box-sizing: border-box; overflow:hidden; border-bottom: 1px dotted gray; width:100%; word-break:normal; } #shopping_list .master_copyto_option.selected{ border: solid 2px black; padding-left: 5px; } #shopping_list .master_copyto_option.temp_unselected{ border: none; } #shopping_list .master_copyto_option:hover{ border: solid 2px black; padding-left: 5px; } /* Master msg, item copied to... */ #small #shopping_list #sl_master_copiedto_popup{ position: fixed; bottom: 0; left: 0; width: 100%; background: #fff176; height: 34px; line-height: 34px; z-index: 10; text-align: center; overflow:hidden; } #not_small #shopping_list #sl_master_copiedto_popup{ margin: 0 0 0 5px; padding: 0 5px; float: left; width: 235px; overflow:hidden; background: #FFF59D; height: 34px; line-height: 34px; z-index: 10; text-align: left; border-radius: 3px; } @media screen and (min-width : 768px){ #not_small #shopping_list #sl_master_copiedto_popup{ width: 290px; } } /* Master actions */ #shopping_list .master_copy_edit_first_wrapper { background:white; border:1px #D0CFCF solid; float: left; height: 34px; line-height: 34px; margin-right: 5px; font-family: arial; font-size: 13px; font-weight: bold; box-sizing: border-box; border-radius: 3px; display:inline-block; padding: 0 8px 0 2px; color:rgb(50,50,50) } #shopping_list #sl_master_info_popup{ position: fixed; width: 280px; right: 0; left: 0; margin-right: auto; margin-left: auto; background: white; min-height: 100px; padding: 30px 10px; border: #CC0C47 solid 3px; z-index: 10000001; text-align:left; top: 50px; overflow: hidden; } @media screen and (max-height : 568px){ #small #shopping_list #sl_master_info_popup{ max-height: 430px; top:48px; overflow-y: scroll; padding: 30px 10px 8px 10px; } } @media screen and (max-height : 480px){ #small #shopping_list #sl_master_info_popup{ max-height: 340px; top:48px; overflow-y: scroll; padding: 30px 10px 8px 10px; } } #shopping_list #list_admin_master_explanation_trigger{ cursor: pointer; padding-left: 6px; height: 34px; display: inline-block; line-height: 30px; margin-top: 2px; width:34px; } #shopping_list #list_admin_master_explanation_qm{ display: inline-block; height: 18px; line-height: 18px; width: 18px; text-align: center; background: #797777; border-radius: 18px; color: white; } /* Settings menu */ #not_small #shopping_list #sl_settings_menu{ width:280px; padding-bottom:20px; } #shopping_list #sl_settings_menu .sl_settings_subheader{ font-weight: bold; margin: 5px 0; } #shopping_list #sl_settings_menu .sl_settings_subheader .sub{ font-style:italic; font-weight:normal; font-size:90%; } #shopping_list #sl_settings_menu .radio_option{ margin: 5px 0; } /* category and list option menus */ /* had to write as sl_category_options_menu because now also opened from non sl module */ #shopping_list .category_option, #shopping_list .list_option, #sl_category_options_menu .category_option { border-radius: 6px; height: 34px; line-height: 0px; padding:17px 0; background: rgb(226, 226, 226); overflow: hidden; float: left; text-align: center; cursor: pointer; margin: 3px; font-size: 14px; border:solid #d0cdcd 2px; white-space: nowrap; word-wrap:break-word; box-sizing:border-box; } #shopping_list .category_option, #shopping_list .list_option, #sl_category_options_menu .category_option{ width: 145px; } #shopping_list .menu_options_div, #sl_category_options_menu .menu_options_div{ width: 340px; } @media screen and (min-width : 360px){ #shopping_list .category_option, #sl_category_options_menu .category_option, #shopping_list .list_option{ width: 164px; } #shopping_list .menu_options_div, #sl_category_options_menu .menu_options_div{ width: 360px; } } @media screen and (min-width : 375px){ #shopping_list .category_option, #shopping_list .list_option, #sl_category_options_menu .category_option{ width: 170px; } #shopping_list .menu_options_div, #sl_category_options_menu .menu_options_div{ width: 374px; } } @media screen and (min-width : 411px){ #shopping_list .category_option, #shopping_list .list_option, #sl_category_options_menu .category_option{ width: 180px; } #shopping_list .menu_options_div, #sl_category_options_menu .menu_options_div{ width: 374px; } } #not_small #shopping_list .category_option, #not_small #shopping_list .list_option{ width: 144px; font-size: 13px; } #not_small #shopping_list .menu_options_div{ width: 450px; padding:10px 10px; } #not_mob #shopping_list .list_option:hover, #not_mob #shopping_list .category_option:hover{ border:solid black 2px; } #shopping_list .list_option.chosen, #shopping_list .category_option.chosen, #sl_category_options_menu .category_option.chosen{ border:solid black 2px; font-weight:bold; } /* releated to recipe options in sl */ #small #shopping_list .small_recipe_option_clear_recipe{ height:32px; line-height:32px; text-align:center; border:solid gray 1px; width:180px; border-radius:5px; font-size:14px; padding: 0 6px; margin: 12px 0 2px 10px; } #shopping_list .small_recipe_option_clear_recipe.inactive{ color:gray; } #not_small #shopping_list .sl_button_for_recipe{ display:inline-block; height:25px; line-height:25px; font-family:arial; font-size:12px; border:solid 1px rgb(231, 231, 231); border-radius:3px; font-weight:bold; color:rgb(74, 74, 74); display:block; float:left; margin-top:3px; margin-right:5px; cursor:pointer; padding:0 5px; font-weight:normal; } #not_small #shopping_list .sl_button_for_recipe.inactive{ color:gray; cursor:default; } #shopping_list .multiply_recipe_update_button{ display: inline-block; border: solid gray 1px; border-radius: 4px; font-size: 13px; padding: 0 3px; margin-left: 3px; cursor:pointer; } #small #shopping_list .multiply_recipe_update_button{ font-size:14px; padding: 0 6px; height:32px; line-height:32px; } #shopping_list .multiply_recipe_update_button.active{ color:gray; } /* Add item menu */ #small #add_item_menu{ text-align: center; } #not_small #add_item_menu{ width:328px; } #add_item_menu .add_new_item_text_input, #tamove.asinput { margin-top:20px; width:250px; height:60px; margin:0 auto; padding:3px; resize: none; resize:vertical; outline:0; border:0; outline: 1px solid #b5b5b5; } #add_item_menu .add_new_item_text_input:hover { outline: 1px solid lightblue; } #add_item_menu .add_new_item_text_input:focus, #small #tamove.asinput:focus { outline: 2px solid lightblue; } @media screen and (min-width : 345px){ #small #add_item_menu .add_new_item_text_input, #small #tamove.asinput{ width:300px; } } @media screen and (min-height : 640px){ #small #add_item_menu .add_new_item_text_input, #small #tamove.asinput{ height:100px; } } @media screen and (min-height : 731px){ #small #add_item_menu .add_new_item_text_input, #small #tamove.asinput{ height:130px; } } #not_small #add_item_menu .add_new_item_text_input{ width:280px; height:85px; } #add_item_menu .add_item_form_button, #add_item_menu .adding_item_form_button, #shopping_list #edit_item_menu .edit_item_form_button, #shopping_list #master_copyto_edit_menu .edit_item_form_button, #shopping_list #sl_settings_menu .form_button { padding: 16px 0; line-height: 0px; width:100px; margin-top:5px; border:1px solid gray; border-radius:3px; cursor:pointer; font-size:14px; text-align:center; white-space: nowrap; word-wrap:break-word; box-sizing:border-box; } #add_item_menu .add_item_form_button { min-width: 100px; width:auto; } #small #shopping_list #edit_item_menu .edit_item_form_button, #small #shopping_list #master_copyto_edit_menu .edit_item_form_button { height:34px; padding: 17px 0; } #shopping_list #edit_item_menu .edit_item_form_button.inactive, #shopping_list #sl_settings_menu .form_button.inactive, #shopping_list #master_copyto_edit_menu .form_button.inactive{ cursor:default; color:lightgray; border-color:lightgray; } #shopping_list #edit_item_menu .edit_item_form_button.clicked, #shopping_list #sl_settings_menu .form_button.clicked, #shopping_list #master_copyto_edit_menu .form_button.clicked { border-color:black; background:#e4e4e4; } #add_item_menu .adding_item_form_button{ cursor:default; color:gray; } #add_item_menu #add_item_return_text{ text-align:left; margin-top:10px; } #add_item_menu #new_item_sl_id{ margin:5px 0; height:36px; line-height:36px; width:200px; font-size:16px; } #add_item_menu #add_item_return_text{ } #add_item_menu #add_item_return_text_div{ text-align:left; margin-top:10px; border-top:solid 1px #444444; padding-top: 5px; overflow: hidden; } #not_small #add_item_menu #add_item_return_text_div{ width:300px; } #add_item_menu #added_item_header{ font-weight:bold; height: 29px; line-height: 29px; } #add_item_menu #added_item_header_label_item{ width: 160px; } #add_item_menu .added_item{ overflow: hidden; border-bottom: 1px dotted gray; height: 29px; line-height: 29px; } #not_mob #add_item_menu .added_item.hover{ background:#f7f7f7; } #add_item_menu .item_added_line{ width: 155px; padding-right:5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #add_item_menu .item_added_cat{ text-decoration: underline; } #add_item_menu .added_item.hover .item_added_cat{ font-weight:bold; } #add_item_menu .added_item_col2{ width:100%; } #small #add_item_menu #added_item_header_label_item, #small #add_item_menu .item_added_line{ width: 150px; } #small #add_item_menu #add_item_return_text{ width:290px; } @media screen and (min-width : 360px){ #small #add_item_menu #added_item_header_label_item, #small #add_item_menu .item_added_line{ width: 165px; } #small #add_item_menu #add_item_return_text{ width:325px; } } @media screen and (min-width : 375px){ #small #add_item_menu #added_item_header_label_item, #small #add_item_menu .item_added_line{ width: 180px; } #small #add_item_menu #add_item_return_text{ width:335px; } } @media screen and (min-width : 411px){ #small #add_item_menu #added_item_header_label_item, #small #add_item_menu .item_added_line{ width: 200px; } #small #add_item_menu #add_item_return_text{ width:365px; } } /* Edit item menu */ #shopping_list #edit_item_menu #master_edit_uncopy{ border-radius: 6px; max-height: 36px; line-height: 18px; padding:8px 0; background: rgb(246, 211, 222); overflow: hidden; text-align: center; cursor: pointer; margin: 3px; font-size: 14px; border: solid 1px black; margin-bottom:10px; } #shopping_list #edit_item_menu #master_edit_uncopy.clicked{ background:#CC0C47; } #shopping_list #edit_item_menu .cat_list_header{ height:34px; line-height:34px; background:rgb(226, 226, 226); text-align:center; margin-top:5px; cursor:pointer; border-radius:2px; } #not_small #shopping_list #edit_item_menu .cat_list_header{ width: 270px; margin: 5px auto; } #not_small #shopping_list #edit_item_menu_item_text{ max-width:400px; margin-bottom:10px; } #shopping_list #edit_item_menu .divider_line{ border-top: 2px #e2e2e2 solid; height: 0px; width:100%; } #small #shopping_list #edit_item_menu .edit_upper_div{ margin-left:20px; margin-right:20px; margin-top:10px; } #not_small #shopping_list #edit_item_menu .edit_upper_div{ margin-left:5px; margin-right:5px; margin-top:10px; } #not_small #edit_item_menu #edit_single_item_form, #not_small #shopping_list #edit_item_menu #edit_single_item_div{ margin:20px; } #shopping_list #edit_item_menu .expanding_area{ border: 1px solid black; } #shopping_list #edit_item_menu .expanding_area textarea, #shopping_list #edit_item_menu .expanding_area pre { /* width is set in JS or HTML */ padding: 5px 5px 7px 5px; } #ios #shopping_list #edit_item_menu .expanding_area pre { /* padding: 5px 8px 7px 8px; */ /* no longer true */ /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */ } #small #shopping_list #edit_item_menu #merged_lines { margin-top: 10px; margin-left: 0px; } #small #shopping_list #edit_item_menu #item_recipes { margin-top: 10px; margin-left: 0px; list-style:None; } #not_small #shopping_list #edit_item_menu #merged_lines { margin-top: 10px; margin-left:20px; } #not_small #shopping_list #edit_item_menu #item_recipes { margin-top: 10px; margin-left:20px; list-style:None; } /* List admin menu and category admin menu */ #not_small #shopping_list #list_admin_menu .list_edit_trigger{ float:right; cursor:pointer; } #shopping_list #list_admin_menu #listadmin_lists{ padding-top:10px; } #not_small #shopping_list #list_admin_menu #listadmin_lists{ padding-bottom:20px; padding-right:0px; } #shopping_list #list_admin_menu .list_edit_n{ border-bottom: 1px solid #B8B8B8; height: 38px; line-height: 38px; } #shopping_list #list_admin_menu .new_list_radio_option{ height: 34px; display: inline-block; line-height: 34px; margin-right: 4px; margin-top: 8px; } @media screen and (max-width : 359px){ #shopping_list #list_admin_menu .new_list_radio_option{ margin-right:0; } } #shopping_list #category_admin_menu #catadmin_cat_list{ width: 322px; min-height: 200px; list-style-type: none; margin: 0; padding: 5px; } #not_small #mob #shopping_list #category_admin_menu #catadmin_cat_list{ width: 350px; /* wider to allow for space to scroll. Can't scroll on draggable option elements*/ } #shopping_list #category_admin_menu #catadmin_cat_list li { margin: 0 5px 5px 5px; padding: 2px 5px; cursor:pointer; width: 245px; /* width must leave blank space to side for scrolling */ height:25px; line-height:25px; border: 1px solid #E1E1E2; font-family: arial; font-size: 14px; background:aliceblue; position:relative; border-radius:3px; font-weight:bold; text-align:left; } #small #shopping_list #category_admin_menu #catadmin_cat_list li { height:31px; line-height:31px; } #shopping_list #category_admin_menu #catadmin_cat_list li:hover{ box-shadow: 1px 1px 3px black; } #shopping_list #category_admin_menu #catadmin_cat_list li .cat_name, #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{ display:inline-block; } #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{ border: gray 1px solid; position: absolute; right: 1px; height: 25px; line-height:25px; width: 32px; text-align: center; box-sizing: border-box; color: black; } #small #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{ height: 31px; line-height:31px; } #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete:hover{ color:red; font-weight:bold; border: red 1px solid; } /* list view itself */ #small #shopping_list .title_category_header, #small #shopping_list .title_recipe_header, #small #shopping_list .title_sl_name_header{ font-weight:normal; background:#CC0C47; color:white; padding-left:5px; margin-bottom:1px; min-height: 22px; line-height: 22px; font-size: 15px; } #small #shopping_list .title_sl_name_header{ background:#565656; color:white; border:solid 1px white; /* color set in html */ margin-bottom:0; } #small #shopping_list .title_recipe_header{ width:85%; float:left; box-sizing:border-box; height:auto; height:30px; /* if change, look at #small #shopping_list .title_recipe_header a */ line-height:30px; font-size: 17px; overflow:hidden; word-break:break-all; } #small #shopping_list .title_recipe_header.nonrecipe_header{ width:100%; /* extra items, checked items */ } #small #shopping_list .title_recipe_header a{ width:100%; display:block; color:white; text-decoration:none; height: 20px; /* make it shorter with margin so easier to tap items above and below */ margin-top: 5px; line-height:20px; } #small #shopping_list .title_category_header.checked_items, #small #shopping_list .title_recipe_header.checked_items{ background:gray; } #small #shopping_list .extra_items_title_recipe_header{ width:100%; } #not_small #shopping_list .title_category_header, #not_small #shopping_list .title_recipe_header, #not_small #shopping_list .title_sl_name_header{ font-weight:normal; height:28px; line-height:28px; background:white; font-size:15px; color:#A80739; font-weight:bold; padding-left:5px; margin-bottom:1px; } #not_small #shopping_list .title_sl_name_header{ color:black; margin-top:10px; margin-bottom:0; border-bottom: gray double 4px; /* background set in html */ } #not_small #shopping_list .title_category_header.checked_items, #not_small #shopping_list .title_recipe_header.checked_items{ color:#070707; } #not_small #shopping_list .title_recipe_header a{ color:#A80739; text-decoration:None; } #not_small #shopping_list .title_recipe_header a:hover{ text-decoration:underline; } #not_small #shopping_list .title_recipe_header{ height:auto; min-height:30px; } #not_small #shopping_list .item_div{ min-height:23px; border-bottom:dotted gray 1px; display:table; table-layout:fixed; cursor:pointer; } #small #shopping_list .item_div{ border-bottom:dotted 1px gray; overflow:hidden; display:table; table-layout:fixed; } #not_small #shopping_list .item_div.exists_on_other_list, #small #shopping_list .item_div.exists_on_other_list{ background:rgb(246, 211, 222); cursor:default; } #small #shopping_list .item_div.checked, #not_small #shopping_list .item_div.checked { background:#EBEBEB; border-bottom:dotted white 1px; } #not_small #shopping_list .item_div.ghost, #small #shopping_list .item_div.ghost{ display:none; } #shopping_list .item_row{ display:table-row; width:100% } #shopping_list .col_overflow{ overflow:hidden; /* allows elements inside to have margin without increasing col height */ height:30px; /* item line-height + padding = 1 line */ } #not_small #shopping_list .hover_col{ /* indicate hover over edit icon */ vertical-align:top; display:table-cell; } #not_small #shopping_list .hover_col .col_width{ width:3px; } #mob #shopping_list .hover_col, #small #shopping_list .hover_col{ display:none; } #not_small #shopping_list .hover_col.hover .hover_line{ border-right:1px #c1c0c0 dotted; border-left:1px #c1c0c0 dotted; height:22px; margin-top:3px; } #not_small #shopping_list .item_div.checked .hover_col.hover .hover_line{ border-color: gray; } #shopping_list .spacer_col{ vertical-align:top; display:table-cell; } #shopping_list .checkbox_col{ vertical-align:top; display:table-cell; } #shopping_list .checkbox_col .col_width{ width:28px; /* if change, consider spacer_col for master view */ } #shopping_list .text_col{ display:table-cell; width:99%; vertical-align:middle; } #shopping_list .item_row .checkbox_col, #shopping_list .item_row .text_col, #shopping_list .item_row .edit_icon_col, #shopping_list .item_row .select_col { padding-top:2px; padding-bottom:2px; } #mob #shopping_list .item_row.tall .checkbox_col, #mob #shopping_list .item_row.tall .text_col, #mob #shopping_list .item_row.tall .edit_icon_col, #mob #shopping_list .item_row.tall .select_col { padding-top:5px; padding-bottom:5px; } #shopping_list .edit_icon_col, #shopping_list .show_indiv_col, #shopping_list .master_edit_icon_col{ display:table-cell; vertical-align: top; text-align: center; cursor:pointer; } #shopping_list .show_indiv_col{ visibility:hidden; } #shopping_list .item_div.has_merged .show_indiv_col{ visibility:visible; } #shopping_list .edit_icon_col .col_width, #shopping_list .show_indiv_col .col_width, #shopping_list .master_edit_icon_col .col_width{ width:28px; } #not_small #mob #shopping_list .edit_icon_col .col_width, #not_small #mob #shopping_list .show_indiv_col .col_width, #not_small #mob #shopping_list .master_edit_icon_col .col_width{ width:42px; } #shopping_list .edit_icon_col .edit_icon_wrapper, #shopping_list .show_indiv_col .show_indiv_icon_wrapper, #shopping_list .master_edit_icon_col .master_edit_icon_wrapper{ height: 24px; width: 24px; margin: 3px auto 0 auto } #shopping_list .item_div.has_merged .edit_icon_col .edit_icon_wrapper, #shopping_list .item_div.has_merged .show_indiv_col .show_indiv_icon_wrapper{ background: #e4e3e3; border-radius: 7px; } #shopping_list .edit_icon_col .edit_icon, #shopping_list .show_indiv_col .icon, #shopping_list .master_edit_icon_col .icon{ height:24px; width:24px; opacity:.4; cursor:pointer; } #not_mob #shopping_list .edit_icon_col:hover .edit_icon, #not_mob #shopping_list .show_indiv_col:hover .icon, #not_mob #shopping_list .master_edit_icon_col:hover .icon{ opacity:.6; } #not_mob #shopping_list .edit_icon_col:hover, #not_mob #shopping_list .show_indiv_col:hover, #not_mob #shopping_list .master_edit_icon_col:hover{ background:rgb(245, 245, 245); } #shopping_list .edit_icon_col .edit_icon_extender{ /* invisibly extends width pass icon image. overlays some of text */ position:absolute; width:40px; right:0; bottom:0; background:transparent; height:100%; } #shopping_list .master_edit_icon_col .icon_extender{ /* invisibly extends width pass icon image. overlays some of text */ position:absolute; width:40px; left:0; bottom:0; background:transparent; height:100%; } #mob #shopping_list .edit_icon_col .edit_icon_extender, #mob #shopping_list .master_edit_icon_col .icon_extender{ width:62px; } #shopping_list .text_col .item_text{ line-height:26px } #shopping_list .text_col .item_text, #shopping_list .item_div .item_info{ font-size:14px; } #shopping_list .item_div .item_info{ width:400px; /* for non_small used to get width and height for edit item text area. Small uses actual element */ } #mob #shopping_list .text_col .item_text, #shopping_list .item_div .item_info{ font-size:17px; padding-left:2px; } #shopping_list .checkbox_col .checkbox{ height:26px; width:26px; margin:3px auto 0 auto; background-image: url("https://cdn.copymethat.com/static/checkbox_green_26_with_hover.png"); } #shopping_list .item_div .checkbox_col .checkbox{ /* unchecked. Overwritten below if checked */ background-position: 0px -26px; } #shopping_list .item_div.checked .checkbox_col .checkbox{ background-position: 0px 0px; } #shopping_list .item_div .checkbox_col.hover .checkbox{ /* unchecked. Overwritten below if checked */ background-position: 0px -78px; } #shopping_list .item_div.checked .checkbox_col.hover .checkbox{ background-position: 0px -52px; } #shopping_list .item_div .checkbox_col .icon_extender{ /* invisibly extends width pass icon image. overlays some of text */ position:absolute; width:40px; left:0; bottom:0; background:transparent; height:100%; z-index:1; /* necessary so is on top of text div */ } #mob #shopping_list .item_div .checkbox_col .icon_extender{ width:62px; } /* for edit mode */ #shopping_list .sl_color_col{ display:table-cell; vertical-align:top; } #shopping_list .sl_color_col .col_width{ width:6px; } #shopping_list .select_col{ display:table-cell; vertical-align:top; } #shopping_list .select_col .col_width{ width:28px; } #not_small #shopping_list .item_div.checked .select_col { background:#EBEBEB; } #not_small #shopping_list .show_ta .item_div { margin-bottom: 2px; padding-bottom: 2px; border-bottom: dashed gray 1px; } #not_small #shopping_list .show_ta .item_div.checked { background:white; } #shopping_list .show_ta .item_ta_edit{ resize: vertical; width: 100%; box-sizing: border-box; font-family: 'open sans', verdana; -webkit-appearance: none; outline: none; border: 1px solid white; overflow:hidden; width: 100%; padding: 0 2px; line-height:26px; height:28px; /* min height: line-height + border + padding */ vertical-align: top } #shopping_list .show_ta textarea:hover, #shopping_list .show_ta textarea:focus{ border: 1px solid lightblue; } #not_small #shopping_list .item_cb_select { width:26px; margin: 2px auto 0 auto; height:26px; opacity:.75; } #not_small #shopping_list .item_cb_select.hover { opacity:1; } #small #shopping_list .item_cb_select { width:26px; margin-top:2px; height:26px; } #shopping_list .item_cb_select_unchecked{ background: url('https://cdn.copymethat.com/static/cb_select_unchecked_26.png?v=2') no-repeat; } #shopping_list .item_cb_select_checked { background: url('https://cdn.copymethat.com/static/cb_select_checked_26.png?v=2') no-repeat; } #shop #content_inner{ padding: 0 50px 30px 50px; } #shop #amazon_affliate_info{ width: 730px; font-size:12px; margin: 40px auto 0; text-align: center; padding:0 10px; box-sizing:border-box; line-height:100%; } #shop #top_div{ line-height:140%; width: 730px; margin: 0px auto 0; } #not_small #shop #top_div{ margin-top:20px; } #shop .product_div { padding-top: 15px; border-top: solid #C1C1C1 1px; margin: 10px auto 0; } #shop .image_div { } #shop .main_img { } #shop .product_text_div { } #shop .product_title { font-weight: bold; } #shop .store_name{ font-style:italic; } #shop .product_price { margin-top: 1px; } #shop .product_description { margin-top: 7px; line-height:1.4em; } #shop .product_description_spacer { height: 10px; } #shop .in_text_link { text-decoration:underline; display: inline; } #shop #content_inner{ padding: 0; } #shop .product_div { width:730px; /* based on ipad */ padding-top: 15px; border-top: solid #C1C1C1 1px; margin: 10px auto 0; } #shop .product_div a{ display: table-row; } #shop .image_div, #shop .product_text_div{ display:table-cell; vertical-align:top; } #shop .image_div .main_img{ width:260px; padding-left:10px; } #shop .product_text_div{ padding-left:15px; width: 100%; } @media screen and (max-width : 767px){ #shop .product_div { width:100%; } #shop #amazon_affliate_info{ width: 100%; box-sizing:border-box; padding:0 20px; } #shop #top_div{ width: 100%; box-sizing:border-box; padding:0 20px; } #shop .product_text_div { padding-left: 15px; padding-right: 15px; width: 100%; box-sizing: border-box; } #shop .image_div .main_img{ width:240px; padding-left: 10px; } } @media screen and (max-width : 599px){ #shop .image_div, #shop .product_text_div{ display:block; } #shop .product_div { width:100%; } #shop #amazon_affliate_info{ padding:0 10px; } #shop #top_div{ padding:0 10px; } #shop .product_title, #shop .product_price{ text-align:center; } #shop .product_text_div { padding-left: 10px; padding-right: 10px; padding-top: 5px; } #shop .image_div { text-align: center; } #shop .image_div .main_img{ width:250px; margin:0; padding:0; } } #premium .content{ background:#eef2f4; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #premium #content_inner{ background:transparent; /* color of .content*/ padding: 0; } #not_small #premium #premium_description{ border: solid gray 1px; margin:0 auto; padding: 0 30px; width: 706px; background:white; padding-bottom: 20px; } @media screen and (max-width : 767px){ #not_small #premium #premium_description{ padding: 0 10px; width: 578px; } } #small #premium #premium_description{ margin:0 auto; padding: 10px 5px; width: 100%; background:white; box-sizing:border-box; } #premium #premium_description_layover.layover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(19, 19, 19, 0.09); z-index:1; } #premium #top, #premium #bottom{ overflow:hidden; background:white; } #premium #top{ border-bottom: double #CC0C47 4px; padding: 15px 20px 15px 20px; margin-bottom: 6px; } #small #premium #top{ border-bottom: double #CC0C47 4px; padding: 0px 0; margin-bottom: 6px; } #premium #premium_page_top_text{ margin-bottom:10px; text-align:center; font-size:15px; line-height:23px; } #small #premium #premium_page_top_text{ margin-bottom:10px; text-align:center; font-size:17px; line-height:23px; } #premium .premium_page_top_text_heading{ font-weight:bold; margin-bottom:7px; font-size:16px; } #small #premium .premium_page_top_text_heading{ font-size:18px; margin-bottom:10px; } #premium #option_buttons{ width:400px; margin:0 auto; } #small #premium #option_buttons{ width:100%; margin:0 auto; box-sizing:border-box; } @media screen and (min-width : 360px){ #small #premium #option_buttons{ padding:0 15px; } } @media screen and (min-width : 411px){ #small #premium #option_buttons{ padding:0 25px; } } #premium .premium_option_button{ width: 145px; border: solid 1px #E6E6E6; color: black; cursor: pointer; float: left; padding: 8px 20px; border-radius: 6px; font-size: 14px; text-align: center; font-weight: bold; color: white; background: #CC0C47; } #small #premium .premium_option_button{ width: 130px; padding: 8px 10px; } #not_small #premium .premium_option_button:hover{ background:#9C0835; } #premium #gift_link{ width:240px; border: solid 1px #E6E6E6; color: black; cursor: pointer; padding: 8px 20px; border-radius: 6px; font-size: 14px; text-align: center; font-weight: bold; color: white; background:green; margin:5px auto 10px auto; } #premium #price_currency_info{ width: 380px; margin: 0 auto; margin-top: 5px; font-size: 13px; color: #616161; background-color: white; } #premium #payment_error_msg{ color: red; margin-bottom: 20px; margin-top: 10px; font-weight: bold; } #not_small #premium .subsub_header{ font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px; padding-top: 10px; color:rgb(50, 50, 50); border-top: 1px dotted gray; } #small #premium .subsub_header{font-weight:bold;font-size:16px; color:#3B1E00;margin-left:5px;margin-top:15px;margin-bottom:2px;border-top: 1px solid gray;padding-top: 6px;} #small #premium .subsubsub_header{font-weight:bold;font-size:16px; color:#3B1E00;} #not_small #premium .subsubsub_header{font-weight:bold;color:rgb(50, 50, 50);} #not_small #premium .subsub_header_info_start{font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px; padding-top: 3px;} #small #premium .subsub_header_info_start{font-weight:bold;font-size:14px; color:#3B1E00;margin-left:5px;margin-top:15px;margin-bottom:2px;} #premium .text_line, #premium .text_line_non_indent { list-style-type: none; padding-left: 15px; padding-top: 13px; } #not_small #premium .features_overdesc{ margin-top:5px; margin-bottom:10px; } #small #premium .features_overdesc{ margin-top:5px; margin-bottom:10px; } #not_small #premium .features_overheader{ color:#464646; font-size:16px; font-weight:bold; margin-top:7px; } #small #premium .features_overheader{ color:#464646; font-weight:bold; } #premium #payment_options{ position: absolute; left: 108px; top: 20px; background: white; width: 550px; border: solid 1px gray; box-sizing: border-box; padding: 20px 15px 10px 20px; z-index:2; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #small #premium #payment_options{ left: 0; top:0; background: white; width: 100%; padding: 20px 5px 10px 5px; line-height: 16px; box-sizing: border-box; } #small #premium #payment_options_inside{ width:310px; margin:0 auto; } #premium #close_payment_options{ cursor: pointer; color: #5D5C5C; float: right; margin-top: 15px; margin-right: 20px; height: 38px; line-height: 38px; } #not_mob #premium #close_payment_options:hover{ text-decoration:underline; } #premium #pay_with_stripe_div{ float:left; } #premium #pay_with_paypal_div{ float: left; text-align: center; padding-top: 30px; margin-left: 5px; padding-right: 20px; } #small #premium #pay_with_paypal_div{ float: none; text-align: center; padding: 0; width: 160px; margin: 0 auto; margin-top: 15px; margin-bottom: 15px; } #premium #pay_with_paypal{ color: #000000; font-size: 14px; cursor: pointer; border: solid 1px #FFAF00; border-radius: 3px; background: #FFC520; width: 120px; padding: 7px 5px; } #small #premium #pay_with_paypal{ width: 120px; padding: 7px 10px; } #premium #pay_with_paypal.disabled{ background:orange; } #premium #payment_form_div { border: solid 2px #0C65C1; box-shadow: 5px 5px 5px gray; background: white; width: 320px; padding: 5px 10px 10px 15px; } #small #premium #payment_form_div { background: white; width: 310px; padding: 5px 5px 10px 5px; box-sizing: border-box; box-shadow: none; font-size:14px; } #premium .stripe_info{ margin-top:10px;color:gray;font-size:13px; } #premium .payment-errors{ /* Stripe adds a div with this at top of form if there is a validation error */ color:red; margin-bottom:3px; margin-top:10px; } #premium .placeholder { color: #aaa; } #premium #payment_form{ margin:0px; padding-top: 10px; text-align:left; } #premium #product_label{ font-weight: bold; font-size: 15px; margin-bottom: 20px; } #small #premium #product_label { font-weight: bold; font-size: 16px; margin-bottom: 15px; text-align: center; } #premium #payment_form #pay_with_credit_card_label{ font-weight:bold; margin-bottom:15px; } #small #premium #payment_form #pay_with_credit_card_label{ font-size:15px; } #premium #payment_form input[type=text]{ padding:3px; } #premium #payment_form .form_row{ margin:5px 0; } #premium #payment_form .form_row span{ display:inline-block; width:100px; } #small #premium #payment_form .form_row span{ width:90px; } #premium #payment_form button{ height: 38px; line-height: 38px; padding: 0 10px; background:#0B92E0; color: white; font-weight: bold; margin-top:10px; } #premium #payment_form button.disabled{ background: #90C5E4; color: gray; } #not_mob #premium #payment_form button:hover{ background:#3EA8E5; } #premium .claim_header{ margin-bottom:20px; font-weight:bold; } #premium .claim_text{ } #premium .claim_gift_button{ width:150px; background:#CC003F; color:white; text-align:center; height:42px; line-height:42px; cursor:pointer; border-radius:5px; margin-top:20px; font-weight:bold; } #premium .claim_gift_button.clicked{ background:#A80739; cursor:default; } #premium .purchased_claim_link{ margin-bottom:15px; color: #a80739; font-weight: bold; margin-bottom: 15px; word-break: break-all; text-align: center; } #small #premium .purchased_claim_link{ width: 250px; margin: 0 auto 15px auto; } #premium .giftlink{ display:inline-block } #small #premium .giftlink{ display:block; width: 250px; word-break: break-all; margin: 0 auto 15px auto; } #premium .link_to_premium{ color: #1565C0; font-weight: bold; margin-top: 10px; text-decoration: underline; } #small #premium .link_to_premium{ color: #2d83e4; font-weight: normal; text-decoration: none; font-weight: bold; margin:10px auto 10px auto; width:300px; text-align:center; font-size:16px; } #print_page_options{ margin:30px 0 10px 0; overflow: hidden; } @media screen and (min-width : 700px){ #print_page_options{ width:660px; margin:30px auto 10px auto; } } .print_page_option, .print_option_save{ /* print/ cancel / save buttons */ float: left; width: 100px; text-align: center; background: #464646; height: 34px; line-height: 34px; margin-left: 30px; border-radius: 5px; cursor:pointer; color:white; text-decoration:none; font-family:arial; font-size:13px; } .print_option_save{ float: none; margin-top:10px; margin-left:0px; } .print_option_save.inactive{ color:white; background:lightgray; } .print_option_save.active{ background:#CC0C47; } #not_mob .print_option_save.active:hover{ color:red; } #not_mob .print_page_option:hover{ background:black; } .print_page_option.clicked{ background:black; } @media print{ #print_page_options{ display:None; } } #recipe_print{ -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; position: relative; overflow: visible; box-sizing: border-box; background:white; } #recipe_print #print_page_options #print_style_options{ font-size: 15px; background: #FFFDE7; padding:10px 25px 10px 25px; margin: 5px 0; } @media screen and (max-width : 320px){ #recipe_print #print_page_options #print_style_options{ padding:10px 0px 10px 10px; } } #recipe_print #print_page_options #print_style_options .label_for_option{ display: block; height: 34px; line-height: 34px; cursor: pointer; float: left; margin-right: 9px; } #recipe_print #print_page_options.pp_mob #print_style_options .label_for_option{ height: 40px; line-height: 40px; } #recipe_print #print_page_options #print_style_options .radio_header{ font-weight:bold; } #not_small #recipe_print #outer{ width:auto; margin:0px; } #recipe_print .content{ box-sizing:border-box; width:900px; width:100%; padding: 0 10px; margin:0 auto; } @media print{ #recipe_print .content{ margin:0; padding: 0 30px; } } #recipe_print .container{ position: relative; min-height: 500px; overflow: visible; text-align: center; background: transparent; padding-top: 5px; overflow: visible; margin-top: 0px; } #recipe_print #recipe_container{ position: relative; width: 660px; box-sizing:border-box; margin: 5px auto; text-align: left; border: 2px solid #A80739; /* color can be changed in JS as print option */ border-radius: 5px; line-height:22px; /* changs with font size options */ padding: 28px 25px 10px 25px; font-family: georgia; color:black; } /* fonts can be changed in JS: classes further down are added */ #recipe_print #recipe_container{ font-family: georgia, "Times New Roman"; } #recipe_print #recipe_container.opt_font_handlee{ font-family: Handlee, "Times New Roman"; /* Also nice: "Delius Swash Caps" , "Delius" */ } #recipe_print #recipe_container.opt_font_roboto{ font-family: Roboto, "Times New Roman"; } #recipe_print #recipe_container{ font-size: 14px; } #recipe_print .recipe_title { font-size: 19px; } #recipe_print .header{ font-size:16px; } #recipe_print .ingred_subheader, #recipe_print .step_subheader{ font-size:15px; } @media print{ #recipe_print #recipe_container{ width:100%; } } #recipe_print .recipe_title { margin-bottom: 5px; font-weight:bold; } #recipe_print .orig_link{ margin: 3px 0px 2px 0px; } #recipe_print .description{ margin-left: 0px; margin-top: 0px; padding: 3px 0; } #recipe_print a.link_in_recipe{ color:black; text-decoration:underline; } #recipe_print .servings{ margin: 3px 0; padding: 3px 0; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; overflow: hidden; min-width: 100px; } #recipe_print #tags_div{ margin-top: 3px; padding: 3px 0; border-bottom: solid #eff1f2 1px; border-top: solid #eff1f2 1px; margin-bottom: 3px; display: inline-block; /* changed in JS with print options */ padding-right: 5px; } #recipe_print #photo_div{ float: right; margin: 5px 0px 15px 15px; } #recipe_print #photo_container{ float: right; width: 240px; font-size: 1em; background: white; } #recipe_print #photo_container img{ max-height:100%; max-width:100%; position:relative; display:block; } #recipe_print #scale_multiplier_msg{ margin-top:3px; } #recipe_print .header{ font-weight: normal; padding: 3px 0 3px 0; } #recipe_print li { list-style-position: outside; } #recipe_print .ingreds{ padding-left: 30px; margin: 0 0 0 0; } #recipe_print .ingred_subheader{ list-style-type: none; padding: 1px 0 1px 0; margin-left:-20px; } #recipe_print .ingred_sub_divider{ list-style-type: none; margin: 0px; padding:0px; height:12px; } #recipe_print .ingred{ padding: 1px 0 1px 0; list-style:circle; color: #7eb348; /* changed by js print options */ line-height: 19px; } #recipe_print .ingred li span{ color: black; /*vertical-align: middle;*/ } #recipe_print .ingred_note{ padding: 5px 0 1px 0px; margin-left:-17px; list-style:none; font-style: italic; color:black; } #recipe_print .ingred_note .note_asterix{ color:#7eb348; } #recipe_print .steps{ padding-left: 30px; padding-right:50px; margin: 0 0 0 0; } #recipe_print .step_subheader{ list-style-type: none; margin-left:-20px; padding: 0; } #recipe_print .step{ padding: 3px 0 3px 0; /* changed with font size */ color: #7eb348; /* bullet color. changed by class called from js print options */ } #recipe_print .step li span{ color: black; } #recipe_print .step_after_line1{ list-style-type: none; margin-top: 5px; } #recipe_print .notes{ padding-left: 30px; margin: 0; } #recipe_print .note{ padding: 3px 0 3px 0; color: #7eb348; list-style-type:circle; } #recipe_print .note li span{ color:black; } #recipe_print #recipe_container.opt_black_bullet .ingred, #recipe_print #recipe_container.opt_black_bullet .step, #recipe_print #recipe_container.opt_black_bullet .note{ color:black; } #recipe_print #recipe_container.opt_black_bullet .ingred_note .note_asterix{ color:black; } #recipe_print #recipe_container.opt_cmtred_bullet .ingred, #recipe_print #recipe_container.opt_cmtred_bullet .step, #recipe_print #recipe_container.opt_cmtred_bullet .note{ color:#A80739; } #recipe_print #recipe_container.opt_cmtred_bullet .ingred_note .note_asterix{ color:#A80739; } #recipe_print #recipe_container.opt_smaller_font { line-height:19px; } #recipe_print #recipe_container.opt_smaller_font .ingred{ line-height:17px; } #recipe_print #recipe_container.opt_smaller_font #recipe_container_fs, /*#recipe_print #recipe_container.opt_smaller_font .recipe_title span, keep title same size*/ #recipe_print #recipe_container.opt_smaller_font .header span, #recipe_print #recipe_container.opt_smaller_font .ingred_subheader span, #recipe_print #recipe_container.opt_smaller_font .step_subheader span { font-size: 90%; } #recipe_print #recipe_container.opt_bigger_font .ingred{ line-height:20px; } #recipe_print #recipe_container.opt_bigger_font .steps{ padding-right:25px; } #recipe_print #recipe_container.opt_bigger_font #recipe_container_fs, #recipe_print #recipe_container.opt_bigger_font .recipe_title span, #recipe_print #recipe_container.opt_bigger_font .header span, #recipe_print #recipe_container.opt_bigger_font .ingred_subheader span, #recipe_print #recipe_container.opt_bigger_font .step_subheader span { font-size: 114%; } #recipe_print #recipe_container.opt_biggest_font { line-height:26px; } #recipe_print #recipe_container.opt_biggest_font .ingred{ line-height:24px; } #recipe_print #recipe_container.opt_biggest_font .steps{ padding-right:15px; } #recipe_print #recipe_container.opt_biggest_font #recipe_container_fs, #recipe_print #recipe_container.opt_biggest_font .recipe_title span, #recipe_print #recipe_container.opt_biggest_font .header span, #recipe_print #recipe_container.opt_biggest_font .ingred_subheader span, #recipe_print #recipe_container.opt_biggest_font .step_subheader span { font-size: 140%; } #shopping_list_print{ -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #shopping_list_print #outer{ width:auto; margin:0px; } #shopping_list_print .content{ box-sizing:border-box; width:100%; padding: 0 30px; margin:0 auto; text-align:left; } @media print{ #shopping_list_print .content{ margin:0; padding: 0; } } #shopping_list_print #print_page_options{ margin:30px 0 10px 0; overflow: hidden; } @media screen and (min-width : 700px){ #shopping_list_print #print_page_options{ width:660px; margin:30px 0 10px 0; } } @media screen and (max-width : 500px){ #shopping_list_print #print_page_options{ margin:30px 0 10px -25px; } } #shopping_list_print #print_page_options #print_style_options{ font-size: 15px; background: #FFFDE7; padding:10px 25px 10px 25px; margin: 5px 0; overflow: hidden; } @media screen and (max-width : 375px){ #shopping_list_print #print_page_options #print_style_options{ padding:10px 0px 10px 10px; } } @media screen and (max-width : 320px){ #shopping_list_print #print_page_options #print_style_options{ padding:10px 0px 10px 10px; } } #shopping_list_print #print_page_options #print_style_options .label_for_option{ display: block; height: 34px; line-height: 34px; cursor: pointer; float: left; margin-right: 9px; } #shopping_list_print #print_page_options.pp_mob #print_style_options .label_for_option{ height: 40px; line-height: 40px; } #shopping_list_print #print_page_options #print_style_options .radio_header{ font-weight:bold; } #shopping_list_print{ font-family:verdana; font-size:12px; text-align:left; } #shopping_list_print table{ border-collapse:collapse; } #shopping_list_print #slprint_outer{ } #shopping_list_print #multi_col_view .item_col{ border-left:dotted gray 1px; margin-top:20px; height:900px; /* js makes it shorter if first page with title showing */ padding-right:5px; /* removed for print. make sure it still fits... */ } #shopping_list_print #multi_col_view.a4 .item_col{ height:980px; /* js makes it shorter if first page with title showing */ } #shopping_list_print #multi_col_view .print_sl_table{ width:672px; } #shopping_list_print #multi_col_view.twocol .print_sl_table .item_col{ width:336px; box-sizing:border-box; } #shopping_list_print #multi_col_view.threecol .print_sl_table .item_col{ width:224px; box-sizing:border-box; } #shopping_list_print #multi_col_view.a4 .print_sl_table{ width:660px; } #shopping_list_print #multi_col_view.a4.twocol .print_sl_table .item_col{ width:330px; box-sizing:border-box; } #shopping_list_print #multi_col_view.a4.threecol .print_sl_table .item_col{ width:220px; box-sizing:border-box; } #cshopping_list_print #multi_col_view .col1 .item_col{ border-left:none; } @media print{ #shopping_list_print #multi_col_view #item_col{ padding-right:0; } } #shopping_list_print #multi_col_view .print_sl_table td{ vertical-align:top; padding:0; margin:0; } #shopping_list_print #single_col_view td.col2, #shopping_list_print #single_col_view td.col3{ display:none; } #shopping_list_print #multi_col_view.twocol td.col3{ display:none; } #shopping_list_print #multi_col_view .pagebreak_after { page-break-after: always; } #shopping_list_print .sl_name{ font-weight:bold; font-size: 16px; margin: 0px 15px 0 15px; font-family:verdana, helvetica, arial, sans-serif; } #shopping_list_print .title{ font-weight:bold; margin:2px 15px; font-family:verdana, helvetica, arial, sans-serif; } #shopping_list_print .title_sl_name{ font-weight:bold; margin:3px 15px; font-family:verdana, helvetica, arial, sans-serif; text-decoration:underline; margin-top:20px; } #shopping_list_print .item{ font-weight:normal; margin:0px 20px; padding:2px 0; font-family:verdana, helvetica, arial, sans-serif; } #shopping_list_print #multi_col_view .item{ margin:0px 5px 0 20px; } #shopping_list_print .smaller_font .title, #shopping_list_print .smaller_font .title_sl_name, #shopping_list_print .smaller_font .item{ font-size:11px; line-height:16px; } #shopping_list_print .regular_font .title, #shopping_list_print .regular_font .title_sl_name, #shopping_list_print .regular_font .item{ font-size:13px; line-height:19px; } #shopping_list_print .bigger_font .title, #shopping_list_print .bigger_font .title_sl_name, #shopping_list_print .bigger_font .item{ font-size:15px; line-height:19px; } #shopping_list_print .smaller_font .item{ line-height:13px; } #shopping_list_print .regular_font .item{ line-height:15px; } #shopping_list_print .bigger_font .item{ line-height:17px; } /* meal plan */ #mealplan .transparent_glass{ z-index:99; } #mealplan #navi{ text-align:left; margin-left:20px; } @media screen and (max-width : 620px){ #not_small #mob #mealplan #navi{ margin-left:5px; } } #mealplan #move_recipe_hint { position: absolute; float: left; z-index:500; background:white; padding:10px; border:red 2px solid; } #mealplan #mp_settings_options { position: absolute; background: white; border: orange solid 2px; padding: 15px; color: black; width: 250px; right: 0px; top: 35px; z-index: 100; } #small #mealplan #mp_settings_options { left:0; } #mealplan #update_error_msg{ color:red; text-align:center; font-weight:bold; } #not_mob #mealplan #mp_grid .recipe_options{ position:fixed; /* top, left set in js */ width:260px; z-index:100; background:white; border: solid #5a5a5a 1px; box-shadow: #353535 2px 2px 8px; text-align: center; padding: 2px; } #mob #mealplan #mp_grid .recipe_options{ position:fixed; top:5px; width:380px; left:50%; margin-left:-193px; z-index:100; background:white; border: solid #5a5a5a 1px; box-shadow: #353535 2px 2px 8px; text-align: center; padding: 2px; } #mealplan .show_recipe_options, #mealplan .show_note_options{ font-size:12px; text-align:center; margin-bottom:2px; padding-top:2px; color:#0267F8; } #mealplan .show_note_options{ border-top:dotted gray 1px; } #not_small #mealplan .show_recipe_options:hover, #not_small #mealplan .show_note_options:hover{ text-decoration:underline; } #mealplan .mp_recipe_option{ height:42px; margin:0;padding:0; line-height:40px; font-size:14px; cursor:pointer; } #mealplan .mp_recipe_option_move{ height: 22px; line-height: 22px; background: #e8e8e8; } #small #mealplan .mp_recipe_option{ height:42px; line-height:42px; font-size:15px; } #small #mealplan .mp_recipe_option.shopping_div{ line-height:18px; } #not_small #mealplan .mp_recipe_option.shopping_div{ line-height:15px; } #mealplan .mp_recipe_option td{ border-bottom:dotted 1px black; } #not_mob #mealplan .mp_recipe_option:hover{ background:#f9f9f9; } #not_mob #mealplan .mp_recipe_option.option_clicked, #mob #mealplan .mp_recipe_option.option_clicked{ background:gray; } #mealplan .mp_recipe_option a{ color:black; text-decoration:none; } #mealplan #queue .calendar_only, #mealplan #queue .view_all_day_option, #mealplan #queue .copy_to_queue_option{ display:none; } #mealplan .pointer_cursor{ cursor:pointer; } #mealplan .calendar_section{ overflow:auto; white-space:nowrap; text-align:center; } #mealplan #shopping_list_div{ margin-right:10px; margin-top:0px; } #mealplan .day_div{ display:inline-block; border:solid rgb(185, 185, 185) 1px; border-right:none; margin:0px; vertical-align:top; white-space:normal; min-height:100px; /* taller for week view. js sets it */ background:white; } #not_mob #mealplan .day_div.mpset_hover{ background:#ffe1ea; } #not_mob #mealplan .day_div.mpset_selected{ background:pink; } #mealplan .day_div_last{ border-right:solid rgb(185, 185, 185) 1px; } #mealplan #calendar_day_header{ height:24px; line-height:24px; overflow:hidden; white-space: nowrap; text-align: center; } #mealplan .day_div_header{ overflow:hidden; display:inline-block; height:22px; line-height:22px; margin:0px; border:solid rgb(185, 185, 185) 1px; border-right:none; background:white; text-align:left; font-weight:bold; font-size:15px; } #not_mob #mealplan .day_div_header { float:left; } #mealplan .day_div_header_insides{ padding-left:8px; overflow:hidden; } #mealplan .day_div_header.last{ border-right:solid rgb(185, 185, 185) 1px; } #mealplan .day_label{ font-size:15px; font-weight:bold; text-align:left; width:100%; height:20px; /* must update update_day_height() is this is changed*/ line-height:20px; } #mealplan .day_label_insides{ padding-left:8px; } #mealplan .day_div.other_month .day_label{ color:gray; } #mealplan .day_div.today .day_label{ color:#3333f3; } #mealplan .single_recipe{ border:solid 1px #b5b3b3; box-shadow:1px 1px 1px #d6d6d6; margin:3px 0px 3px 0px; display:inline-block; background:white; white-space:normal; cursor:pointer; vertical-align: bottom; text-align:center; box-sizing: border-box; } #mealplan .single_recipe.single_note{ background:#f6f6f6; } #mealplan #queue .single_recipe.hover, #mealplan #calendar .single_recipe.hover{ box-shadow: 1px 1px 1px #929090; } #mealplan #queue .single_recipe.activated, #mealplan #calendar .single_recipe.activated{ background:#ffff4e; border:gray 1px solid; box-shadow: 5px 5px 6px -0px #717070, 0px 0 1px black; } #mealplan .recipe_thumb{ display: block; margin: 3px auto 0 auto; background-position: center center; background-size: cover; border: solid #bbbaba 1px; } #mealplan #mp_grid #calendar_list_wrapper.no_images .recipe_thumb{ display:none; } #mealplan .title, #mealplan .single_note .note_text { color:black; text-align:left; line-height: 16px; overflow: hidden; padding:0 2px; font-size:15px; font-family:arial; /*font-size:14px; font-family:verdana;*/ } #not_mob #mealplan .title{ max-height: 48px; min-height: 48px; margin:5px 2px 8px 2px; } #mob #mealplan .title{ max-height: 48px; min-height: 32px; margin:5px 2px 6px 2px; } #not_mob #mealplan .single_note .note_text { min-height: 32px; margin:5px 2px 8px 2px; } #mob #mealplan .single_note .note_text { min-height: 32px; margin:5px 2px 6px 2px; } #mealplan .date_range{ display:inline-block; height:36px; line-height:36px; overflow:hidden; margin-left:10px; float:left; font-size:14px; font-weight:bold; color: rgb(50,50,50); max-width:154px; } #mealplan .tips_trigger{ display:inline-block; height:32px; line-height:32px; overflow:hidden; margin-left:15px; font-size:11px; font-weight:bold; color:gray; cursor:pointer; float:left } #mealplan #meal_plan_tips{ max-width:400px; border:solid 2px gray; padding:10px 10px 10px 20px; margin:0 auto; } #mealplan #meal_plan_tips li{ margin-top:5px; text-align:left; } #not_small #mealplan .not_small_popup_menu{ width: 460px; left: 50%; margin-left: -230px; max-height: 350px; overflow-y: auto; top:100px; max-height:350px; } @media screen and (min-height : 600px){ #not_small #mealplan .not_small_popup_menu{ max-height: 450px; } } @media screen and (min-height : 768px){ #not_small #mealplan .not_small_popup_menu{ max-height: 600px; } } @media screen and (min-height : 850px){ #not_small #mealplan .not_small_popup_menu{ max-height: 650px; } } @media screen and (min-height : 1024px){ #not_small #mealplan .not_small_popup_menu{ max-height: 850px; } } #not_small #mealplan .not_small_popup_menu .submit_button, #small #mealplan .small_fullscreen_popup_menu .submit_button{ color: white; cursor: pointer; border-radius: 5px; padding: 17px 0; line-height: 0px; background: #295f2b; font-size: 15px; width: 150px; text-align: center; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; margin-top: 15px; } #small #mealplan .small_fullscreen_popup_menu .submit_button { padding: 20px 0; } #not_mob #mealplan .not_small_popup_menu .submit_button:hover { } #not_small #mealplan .not_small_popup_menu .submit_button.clicked, #small #mealplan .small_fullscreen_popup_menu .submit_button.clicked{ background: #367739; } #not_small #mealplan .not_small_popup_menu .submit_button .clicked_text, #small #mealplan .small_fullscreen_popup_menu .submit_button .clicked_text{ display:none; } #not_small #mealplan .not_small_popup_menu .submit_button.clicked .clicked_text, #small #mealplan .small_fullscreen_popup_menu .submit_button.clicked .clicked_text{ display:inline; } #not_small #mealplan .not_small_popup_menu .submit_button.clicked .not_clicked_text, #small #mealplan .small_fullscreen_popup_menu .submit_button.clicked .not_clicked_text{ display:none; } #not_small #mealplan .not_small_popup_menu .submit_button.inline, #small #mealplan .small_fullscreen_popup_menu .submit_button.inline{ /* cannot be hiddne with class hidden. doesn't override */ display:inline-block; width:120px; } #not_small #mealplan .not_small_popup_menu .submit_button.cancel, #small #mealplan .small_fullscreen_popup_menu .submit_button.cancel{ /* cannot be hiddne with class hidden. doesn't override */ background: #545454; } #mealplan #mp_shopping_list_menu .mp_sl_recipe, .mp_sl_note{ line-height:26px; margin:2px 0; overflow: hidden; } #mealplan #mp_shopping_list_menu .mp_sl_note{ color: #24A11C; } #mealplan #mp_shopping_list_menu .mp_sl_added_x{ line-height:16px; color:#525252; font-size:14px; } #mealplan #mp_shopping_list_menu .mp_sl_title{ height:26px; line-height:26px; overflow:hidden; display:block; } #mealplan #mp_shopping_list_menu .sl_menu_note{ font-size: 14px; line-height: 18px; margin-bottom:10px; } #mealplan #mp_more_trigger, #mealplan .show_queue, #mealplan .show_sets{ margin-top:0px; display:inline-block; float:left; width:62px; } #small #mealplan #mp_more_trigger, #small #mealplan .show_queue, #small #mealplan .show_sets{ float:right; } #mealplan #mp_list .show_queue, #mealplan #mp_list .show_sets{ width:48px; margin-left: 5px; margin-right: 5px; background: #C8E6C9; } #mealplan #mp_list .show_queue.showing, #mealplan #mp_list .show_sets.showing{ background: #548e56; } @media screen and (min-width : 360px){ #mealplan #mp_list .show_queue, #mealplan #mp_list .show_sets{ width:68px; } } @media screen and (min-width : 375px){ #mealplan #mp_list .show_queue{ margin-right:12px; } } #not_small #mealplan #mp_more_trigger{ float:left; width:70px; margin-right:15px; } @media screen and (max-width : 620px){ #not_small #mob #mealplan #mp_more_trigger{ margin-right:5px; } } #mealplan #mp_more_options{ /* if change, also look at #small #mealplan #mp_more_options #cal_range_options */ border:1px solid gray; position:absolute; top: 36px; right: 0; z-index:100; background:white; box-sizing: border-box; padding: 5px; font-weight:bold; text-align:left; width:230px; } #small #mealplan #mp_more_options{ right: -30px; left: auto; } #mealplan .mp_more_option, #mealplan .mp_more_option_showimage{ text-decoration:none; padding-left:5px; min-height:40px; line-height:40px; margin:0px 5px; border-bottom:1px solid gray; color:#323232; cursor:pointer; font-family: arial; font-size: 14px; white-space: nowrap; } #mealplan .mp_more_option.inactive{ color:gray; } #mealplan .mp_more_option.first_row{ border-top:1px solid gray; } #mealplan .mp_more_option:hover{ background:rgb(230, 230, 230); } #mealplan .mp_more_option.inactive:hover{ background:white; } #mealplan .mp_more_option.clicked{ background:#A80739; color:white; } #mealplan .mp_more_option.inactive.clicked{ background:white; color:gray; } /* show images either in more menu or main navi. only has main navi in non-mob */ @media screen and (min-width : 768px){ #mob #mealplan .mp_more_option_showimage{ display:none; } } @media screen and (max-width : 767px){ #mob #mealplan #showimage_div{ display:none; } } #mealplan .note_form_div{ position:fixed; width:300px; box-sizing: border-box; overflow:hidden; top: 100px; left: 50%; margin-left: -150px; z-index:100; background:white; border:gray 1px solid; box-shadow: 0 2px 4px rgba(0,0,0,.2); padding: 10px 25px; } #small #mealplan .note_form_div{ top: 100px; } #not_small #mob #mealplan .note_form_div{ top: 5px; } #mealplan .expanding_area textarea, #mealplan .expanding_area pre { padding: 5px 5px 15px 5px; min-height:55px; line-height:19px; } #ios #mealplan .expanding_area pre { /*padding: 5px 8px 15px 8px; */ /* no longer true */ /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */ } #not_small #mob .expanding_area textarea, #not_small #mob .expanding_area pre { font-size:15px; } #mealplan .note_form_button{ display:inline-block; width:60px; border:gray 1px solid; border-radius:5px; height:30px; line-height:30px; font-size:15px; text-align:center; margin-right:5px; cursor:pointer; } #mealplan .note_form_button:hover{ background:gray; color:white; } #mealplan .note_form_date_label{ margin-bottom: 2px; font-weight: bold; } #mealplan .note_form_date_label_date{ color: rgb(40, 40, 40); } #mealplan .note_form_date_label_text{ color:rgb(82, 82, 82); } #mealplan .note_info_text{ width:250px; margin-top:10px; font-size:14px; } #not_mob #mealplan .single_recipe .options_trigger_look{ width: 24px; background: white; height: 24px; overflow: hidden; position: absolute; bottom: 0; right: 0; } #not_mob #mealplan .single_recipe.single_note .options_trigger_look{ background: #f6f6f6; } #not_mob #mealplan .single_recipe.activated .options_trigger_look { background:transparent; } #not_mob #mealplan .single_recipe .options_trigger_look img{ width:24px; opacity:.5; } #not_mob #mealplan .single_recipe .options_trigger_look.hover img{ opacity:1; } #mealplan #prev_month_scroll, #mealplan #next_month_scroll{ height:38px; line-height:38px; text-align:center; } #mealplan #prev_month_scroll.active, #mealplan #next_month_scroll.active{ background:lightgray; } #mealplan #cal_range_options, #mealplan #copy_move_div, #mealplan #showimage_div{ float:left; background:white; text-align:center; font-size: 13px; color:rgb(50,50,50); font-weight:bold; } #small #mealplan #mp_more_options #cal_range_options{ margin-top:2px; } #mealplan .cal_range_option{ display: inline-block; width: 56px; height: 34px; padding:17px 0; line-height:0px; background: white; float: left; cursor:pointer; white-space: nowrap; word-wrap:break-word; box-sizing:border-box; } #mealplan .cal_range_option.left{ border: 1px rgb(160, 160, 160) solid; border-radius: 2px 0 0 2px; } #mealplan .cal_range_option.right{ border: 1px rgb(160, 160, 160) solid; border-left:none; border-radius: 0 2px 2px 0; } #mealplan .cal_range_option.selected{ background:#e9eef1; } #mealplan .mptopbutton{ background:white; height: 36px; padding:0px; line-height:0px; font-size:13px; font-weight:bold; border:1px rgb(160, 160, 160) solid; color:#151515; text-align:center; cursor:pointer; border-radius:2px; white-space: nowrap; word-wrap:break-word; box-sizing:border-box; } #mealplan .mptopbutton_inner{ height:0px; padding:17px 0; line-height:0; white-space: nowrap; word-wrap:break-word; } #mealplan #copy_move_div, #mealplan #showimage_div{ text-align:left; margin-right:5px; } #mealplan #showimage_div{ width:128px; width:72px; } #small #mealplan #copy_move_div{ float: right; margin-right: 5px; width: 126px; padding-left:4px; border-radius: 0px; } #not_small #mealplan #header_minimized_mp { width: 100%; height: 10px; background: #A80739; z-index: 4; cursor: pointer; } #not_small #mealplan #mp_minimize_header{ text-align: left; border: solid 1px rgb(160, 160, 160); margin-right: 5px; height: 34px; line-height: 34px; border-radius: 2px; cursor:pointer; background: white; margin-right: 17px; } @media screen and (max-width: 666px){ #not_small #mealplan #mp_minimize_header{ display:none; } /* todo: find a way for it to fit on smaller screen */ } #not_small #mealplan #mp_minimize_header.can_minimize #can_maximize{ display:none; } #not_small #mealplan #mp_minimize_header.can_maximize #can_minimize{ display:none; } @media screen and (min-width: 1024px){ #mealplan #outer{ width: 1024px; } } #mealplan #mp_email_options_menu .email_print_label { height:32px; line-height:32px; display:inline-block; } #mealplan #mp_help_menu .tips_subheader{ background: #dedede; color: black; padding: 3px 5px; font-weight:bold; } #mealplan #mp_help_menu ul{ -webkit-padding-start: 30px; } #mealplan #mp_shopping_list_menu #mp_sl_form .date_header{ background:#e0e0e0; font-weight:bold; } #mealplan #queue_and_calendar, #mealplan #queue_and_calendar table, #mp_quickview table{ border-collapse:collapse; table-layout:fixed; white-space: normal; word-wrap: break-word; width:100%; } #mealplan #mp_grid .queue_section{ overflow-x: hidden; overflow-y: scroll; text-align: center; } #not_mob #mealplan #mp_grid .queue_section{ overflow-y: auto; } #mealplan #mp_grid .calendar_section { overflow-x: auto; overflow-y: auto; } #not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar, #not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar { width: 14px; /* for vertical scrollbars Must be same as .scrollbar_spacer.os_chrome_safari */ height: 14px; /* for horizontal scrollbars */ } #not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-track { background: #649667; border-left:1px solid #459649; } #not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-thumb { background: #28542a; } #not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-thumb:hover { background: #214823; } #not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-thumb:active{ background: #203e22; } #not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-track { background:#649667; border-left:1px solid #459649; } #not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-thumb { background: #28542a; } #not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-thumb:hover { background: #214823; } #not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-thumb:active{ background: #203e22; } /* Handle scrollbar spacing. Necessary because scrollbar is within table and are handled differently */ #mealplan .scrollbar_spacer{ display:inline-block; } #mealplan .scrollbar_spacer.os_chrome_safari{ width: 14px; /* same as scrollbar styling */ } #mealplan .scrollbar_spacer.os_other{ width:15px; } #mealplan .scrollbar_spacer.w_chrome{ display:None; } #mealplan .scrollbar_spacer.w_edge{ width:12px; } #mealplan .scrollbar_spacer.o_other{ width:17px; } #mealplan #mp_grid #queue .single_recipe{ text-align: center; } #mealplan #mp_grid #queue_list_wrapper, #mealplan #mp_grid #queue{ background:#367739; } #not_mob #mealplan #mp_grid #calendar_list_wrapper{ vertical-align:top; } #not_mob #mealplan #mp_grid #calendar .recipe_thumb_default{ } #mealplan #mp_grid #mp_sets{ margin:6px 0 36px 0; } #mealplan #mp_grid #mp_sets .mp_set{ margin: 3px 0px; display: inline-block; white-space: normal; background:white; text-align:left; cursor:pointer; border-radius: 2px; } #not_mob #mealplan #mp_grid #mp_sets .mp_set{ float:left; margin-left:3px; } #not_mob #mealplan #mp_grid #mp_sets .mp_set.hover{ box-shadow: 0 0 3px white; } #mealplan #mp_grid #mp_sets .mp_set.activated{ background:#ffff4e; } #mealplan #mp_grid #mp_sets .mp_set_name{ padding:5px 5px 0 5px; font-weight:bold; color:#333333; } #mealplan #mp_grid #mp_sets .mp_set_info{ padding-left:5px; height:22px; line-height:22px; padding-bottom:3px; font-size: 12px; overflow: hidden; } #mealplan #mp_grid #mp_sets .mp_set .mp_set_howto, #mealplan #mp_list #mp_sets .mp_set .mp_set_howto{ background: #ffffda; margin-top: 2px; display:none; padding:3px; border-top: 1px #ffa000 solid; } #small #mealplan #mp_list #mp_sets .mp_set .mp_set_howto{ font-size: 15px; } #mealplan #mp_grid #mp_sets .mp_set.activated .mp_set_howto, #mealplan #mp_list #mp_sets .mp_set.activated .mp_set_howto{ display:block; } #mealplan #mp_list #mp_sets .mp_set{ margin: 5px 5px 5px 5px; white-space: normal; background:white; text-align:left; cursor:pointer; border-radius: 2px; } #not_mob #mealplan #mp_list #mp_sets .mp_set.hover{ box-shadow: 0 0 3px white; } #mealplan #mp_list #mp_sets .mp_set.activated{ background:#ffff4e; } #mealplan #mp_list #mp_sets .mp_set_name{ padding:5px 5px 0 5px; font-weight:bold; color:#333333; line-height:19px; } #mealplan #mp_list #mp_sets .mp_set_info{ padding-left:5px; height:22px; line-height:22px; padding-bottom:3px; font-size: 13px; overflow: hidden; } #mealplan #mp_list #mp_sets .create_set_trigger, #mealplan #mp_list #mp_sets .delete_set_trigger{ background: rgba(255, 255, 255, 0.11); color: white; border: solid white 1px; margin: 0 auto; height: 40px; line-height: 40px; width:90%; border-radius: 3px; text-align: center; margin-top: 5px; } #mealplan #mp_grid #queue_mpset_header{ background:#eef2f4; } #mealplan #mp_grid #queue_mpset_header_mpset_only { background:#367739; } #mealplan #mp_grid .queue_mpset_tab{ text-align:center; background:#295f2b; text-align:center; height:100%; font-size:13px; font-weight:bold; height:40px; line-height:40px; border-radius: 5px 5px 0 0; color:white; cursor:pointer; } @media screen and (min-width : 768px) and (max-width : 799px){ #mob #mealplan #mp_grid .queue_mpset_tab{ font-size:12px; } } #mealplan #mp_grid .queue_mpset_tab.selected{ background:#367739; } #mealplan #mp_grid .mp_set_button{ background: rgba(255, 255, 255, 0.11); color: white; border: solid white 1px; margin: 0 auto; height: 40px; line-height: 40px; max-width:70%; min-width:84px; border-radius: 3px; text-align: center; margin-top: 5px; cursor: pointer; overflow:hidden; } @media screen and (min-width : 768px) and (max-width : 768px){ #mealplan #mp_grid .mp_set_button{ width:84px; } } #mealplan #mp_grid .mp_set .mp_set_del{ display:none; position: absolute; right: 0; bottom: 0; height: 53px; width: 46px; line-height: 53px; text-align: center; background: red; color: white; font-weight: bold; cursor: pointer; } #mealplan #mp_grid .mp_set.deletable .mp_set_del{ display:block; } #mealplan #mp_list .mp_set .mp_set_del{ position: absolute; right: 0; bottom: 0; display:none; height: 36px; width: 36px; margin: 0px auto 0 auto; } #mealplan #mp_list .mp_set.deletable .mp_set_del{ display:block; } #mealplan #mp_list .mp_set .mp_set_del{ position: absolute; right: 0; bottom: 0; display:none; height: 100%; width: 40px; background:pink; } #mealplan #mp_list .mp_set .mp_set_del img{ height: 36px; width: 36px; margin-top: 6px; margin-left: 2px; } #mealplan #mp_grid .mp_set.clicked{ background:#ca0505; font-weight:bold; } /* WIDTH CALENDAR AND RECIPES */ #not_mob #mealplan #calendar .single_recipe{ width:108px; } #not_mob #mealplan #calendar .recipe_thumb{ width: 98px; height: 74px; } #not_mob #mealplan #mp_grid #queue .single_recipe{ width:auto; height:auto; float:left; margin-left:3px; } #not_mob #mealplan #queue .title{ height:48px; margin: 4px 2px 8px 2px; float: left; width: 100px; } #not_mob #mealplan #mp_grid #queue .recipe_thumb{ float:left; width: 56px; height: 50px; margin: 4px 2px 4px 2px; } #not_mob #mealplan #mp_grid #queue .single_note, #not_mob #mealplan #mp_grid #mp_sets .mp_set{ width:172px; } #not_mob #mealplan #mp_grid #queue_list_wrapper, #not_mob #mealplan #mp_grid #queue, #not_mob #mealplan #mp_grid #mp_sets{ width:192px; } #not_mob #mealplan #mp_grid #list_left_spacer, #not_mob #mealplan #mp_grid #list_left_spacer div{ width:5px; } #not_mob #mealplan #mp_grid #list_between_spacer, #not_mob #mealplan #mp_grid #list_between_spacer div{ width:5px; } #not_mob #mealplan #mp_grid #list_right_spacer, #not_mob #mealplan #mp_grid #list_right_spacer div{ width:0px; } #not_mob #mealplan #queue_and_calendar, #not_mob #mealplan #queue_and_calendar table{ width:auto; } #not_mob #mealplan #mp_grid #calendar_list_wrapper{ width:auto; } #not_mob #mealplan #mp_grid calendar_section{ min-width:820px; /* prevent scrollbar shifting over as table fills */ } #not_mob #mealplan #mp_grid .day_div, #not_mob #mealplan #mp_grid .day_div_header{ width:114px; } /* mobile */ #mob #mealplan #mp_grid #list_right_spacer, #mob #mealplan #mp_grid #list_right_spacer div{ width:0px; } #mob #mealplan #mp_grid #calendar_list_wrapper{ vertical-align:top; } @media screen and (max-width : 767px) { #mob #mealplan #mp_grid #calendar_list_wrapper{ width:99%; } #mob #mealplan #calendar .single_recipe{ width:118px; } #mob #mealplan #calendar .recipe_thumb{ width: 108px; height: 84px; } #mob #mealplan #mp_grid #queue .single_recipe{ width:auto; height:auto; } #mob #mealplan #mp_grid #queue .single_note, #mob #mealplan #mp_grid #mp_sets .mp_set{ width:180px; } #mob #mealplan #queue .title{ height:48px; margin: 4px 2px 8px 2px; float: left; width: 108px; } #mob #mealplan #mp_grid #queue .recipe_thumb{ float:left; width: 56px; height: 50px; margin: 4px 2px 4px 2px; display:block; } #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{ width:188px; } #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{ width:7px; } #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{ width:5px; } #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{ width:126px; } } @media screen and (min-width : 768px) { #mob #mealplan #queue_and_calendar, #mealplan #queue_and_calendar table{ width:100%; } #mob #mealplan #mp_grid #queue .recipe_thumb{ display:none; } #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{ width:3px; } #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{ width:2px; } #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{ width:94px; } #mob #mealplan #mp_grid #calendar_list_wrapper{ width:auto; } #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{ width:94px; } #mob #mealplan .single_recipe{ width:88px; } #mob #mealplan #mp_grid #queue .single_note, #mob #mealplan #mp_grid #mp_sets .mp_set{ width:88px; } #mob #mealplan .recipe_thumb{ width:80px; height:62px; } } @media screen and (min-width : 769px) and (max-width : 799px){ #mob #mealplan #queue_and_calendar, #mealplan #queue_and_calendar table{ width:auto; margin:0 auto; } } @media screen and (min-width : 800px) { #mob #mealplan #queue_and_calendar, #mealplan #queue_and_calendar table{ width:100%; } #mob #mealplan #mp_grid #queue .recipe_thumb{ display:none; } #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{ width:3px; } #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{ width:3px; } #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{ width:98px; } #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{ width:98px; } #mob #mealplan .single_recipe{ width:92px; } #mob #mealplan .recipe_thumb{ height:64px; } #mob #mealplan #mp_grid #queue .single_note, #mob #mealplan #mp_grid #mp_sets .mp_set{ width:92px; } } @media screen and (min-width : 801px) and (max-width : 959px){ #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{ width:auto; margin:0 auto; } } @media screen and (min-width : 960px) { #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{ width:100%; } #mob #mealplan #calendar .single_recipe{ width:104px; } #mob #mealplan #calendar .recipe_thumb{ width: 94px; height: 72px; } #mob #mealplan #mp_grid #queue .single_recipe{ width:auto; height:auto; } #mob #mealplan #mp_grid #queue .single_note, #mob #mealplan #mp_grid #mp_sets .mp_set{ width:166px; } #mob #mealplan #queue .title{ height:48px; margin: 4px 2px 8px 2px; float: left; width: 94px; } #mob #mealplan #mp_grid #queue .recipe_thumb{ float:left; width: 56px; height: 50px; margin: 4px 2px 4px 2px; display:block; } #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{ width:174px; } #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{ width:3px; } #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{ width:2px; } #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{ width:110px; } } @media screen and (min-width : 961px) and (max-width : 1023px){ #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{ width:auto; margin:0 auto; } } @media screen and (min-width : 1024px) { /* first exactly across if width = 1024. Calendar scrolls if smaller. If wider then 1024 table is centered */ #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{ width:auto; margin:0 auto; } #mob #mealplan #calendar .single_recipe{ width:108px; } #mob #mealplan #calendar .recipe_thumb{ width: 98px; height: 76px; } #mob #mealplan #mp_grid #queue .single_recipe{ width:auto; height:auto; } #mob #mealplan #mp_grid #queue .single_note, #mob #mealplan #mp_grid #mp_sets .mp_set{ width:170px; } #mob #mealplan #queue .title{ height:48px; margin: 4px 2px 8px 2px; float: left; width: 98px; } #mob #mealplan #mp_grid #queue .recipe_thumb{ float:left; width: 56px; height: 50px; margin: 4px 2px 4px 2px; display:block; } #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{ width:186px; } #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{ width:0px; } #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{ width:5px; } #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{ width:116px; } } #small #mealplan{ box-sizing: border-box; overflow: hidden; position: fixed; height: 100%; width: 100%; background:white; } #small #mealplan .mp_recipe_options_div{ font-size:14px; } #small #mealplan #small_main_navi{ position:fixed; background:white; z-index:2; padding-bottom: 5px; width:100%; background: #F6F6F6; height: 48px; /* match top of #navi */ } #small #mealplan #navi{ position:fixed; top: 48px; /* match heigth of small_main_navi */ z-index:2; /* less than z-index s_side_menu. Issue where this navi menu doesn't shift right and sits on top of side menu. At least in iOS 14 app. */ width:100%; box-sizing: border-box; padding-bottom:5px; background: #F6F6F6; border-bottom: solid 1px #E6E6E6; margin:0; } #small #mealplan #mp_msg_activated, #small #mealplan #mp_msg_completed{ background: #FFF9C4; position: absolute; z-index: 999; top: -40px; left: 0; width: 100%; height: 32px; line-height: 32px; box-sizing: border-box; padding: 0 10px 0 30px; } #small #mealplan .list_spacer{ height:90px; /* #navi top + height (from button height) + margin + padding */ /* Also used in js */ } #mealplan #mp_list .prev_scroll, #mp_quickview .prev_scroll{ min-height:40px; line-height:40px; white-space: nowrap; } #mealplan #mp_list .calendar_list_month_heading, #mp_quickview .calendar_list_month_heading{ min-height:32px; line-height:32px; background:#CC0C47; color:white; font-size:18px; text-align:center; } #mp_quickview .calendar_list_month_heading{ background:#dee3e5; color:black; font-size:18px; text-align:center; } #mealplan #queue_and_calendar td, #mealplan #queue_and_calendar table td, #mp_quickview td, #mp_quickview table td{ padding:0; } #mealplan #mp_list .main_vertical_table{ height:100vh; /* This is changed in js to px height. Not changing it caused issue on some devices where you couldn't scroll properly */ } #mealplan #mp_list .not_showing_queue_or_mpset #calendar_list_wrapper{ width:100%; } #mealplan #mp_list .not_showing_queue_or_mpset #queue_list_wrapper{ display:none; } #mealplan #mp_list .not_showing_queue_or_mpset #list_between_spacer{ display:none; } #mealplan #mp_list #queue, #mealplan #mp_list #mp_sets{ display:none; } #mealplan #mp_list .showing_queue #queue{ display:block; } #mealplan #mp_list .showing_mpsets #mp_sets{ display:block; } #mealplan #mp_list .showing_queue #calendar_list_wrapper{ width:120px; } @media screen and (min-width : 375px){ #mealplan #mp_list .showing_queue #calendar_list_wrapper{ width:130px; } } @media screen and (min-width : 411px){ #mealplan #mp_list .showing_queue #calendar_list_wrapper{ width:140px; } } @media screen and (min-width : 568px){ #mealplan #mp_list .showing_queue #calendar_list_wrapper{ width:270px; } } @media screen and (min-width : 667px){ #mealplan #mp_list .showing_queue #calendar_list_wrapper{ width:350px; } } #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{ width:140px; } @media screen and (min-width : 375px){ #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{ width:195px; } } @media screen and (min-width : 411px){ #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{ width:240px; } } @media screen and (min-width : 568px){ #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{ width:340px; } } @media screen and (min-width : 667px){ #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{ width:360px; } } #mealplan #mp_list .showing_queue #queue_list_wrapper, #mealplan #mp_list .showing_mpsets #queue_list_wrapper{ width:99%; box-shadow: -5px 0px 10px -5px black; background:#367739; } #mealplan #mp_list .showing_queue #list_between_spacer, #mealplan #mp_list .showing_mpsets #list_between_spacer{ width:5px; /* to show box-shadow of queue_list_wrapper. Otherwise looks weird */ } #mealplan #mp_list .showing_queue .calendar_section td.opt_col, #mealplan #mp_list .showing_mpsets .calendar_section td.opt_col{ display:none; } #mealplan #mp_list .queue_section, #mealplan #mp_list .calendar_section{ height:100%; /* changed in js */ overflow-x:hidden; overflow-y:scroll; } #mealplan #mp_list table.day_table, #mp_quickview table.day_table{ margin-top: 5px; margin-bottom: 5px; } #mealplan #mp_list .day_border, #mp_quickview .day_border{ border-top: 1px #dad7d7 dotted; height:0px; } #mealplan #mp_list td.day_table_label, #mp_quickview td.day_table_label{ width:44px; vertical-align:top; } #mealplan #mp_list td.day_table_label.today, #mp_quickview td.day_table_label.today { color:#3333f3; } #mealplan #mp_list td.title_col, #mp_quickview td.title_col{ text-align:left; width:99%; } #mealplan #mp_list td.opt_col, #mp_quickview td.opt_col{ vertical-align: middle; text-align: center; width:40px; } #mealplan #mp_list td.opt_col .note_opt_icon, #mp_quickview td.opt_col .note_opt_icon{ font-size:24px; /* edit icon seems much bigger than menu icon */ color:#525252; } #mealplan #mp_list table.day_recipe_list, #mp_quickview table.day_recipe_list{ width:100%; } #mealplan #mp_list .xday_label, #mp_quickview .xday_label{ text-align:center; font-weight:bold; min-height: 40px; font-size:13px; line-height: 18px; margin-top:3px; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #mealplan #mp_list .xday_label .xday_label_number, #mp_quickview .xday_label .xday_label_number{ font-size:19px; } #mp_quickview .day_table.other_month .xday_label{ opacity:50%; } #mealplan #mp_list .xrecipe_thumb, #mp_quickview .xrecipe_thumb{ display: block; margin: 1px; background-position: center center; background-size: cover; border: solid #c5c5c5 1px; width: 46px; height: 46px; } @media screen and (max-width : 567px){ #mealplan #mp_list .showing_queue #calendar .image_col, #mealplan #mp_list .showing_mpsets #calendar .image_col{ display:none; } } @media screen and (max-width : 374px){ #mealplan #mp_list #queue .image_col, #mp_quickview #queue .image_col{ display:none; } } #mealplan #mp_list .xtitle, #mealplan #mp_list .xnote, #mp_quickview .xtitle, #mp_quickview .xnote{ border:1px #e6e6e6 solid; box-shadow:#4a4a4a 1px 1px 1px; margin:3px 0 3px 0; padding: 0px; border-radius:3px; height:40px; line-height: 19px; overflow:hidden; background:white; } #mp_quickview .xtitle, #mp_quickview .xnote{ box-shadow: none; } #mealplan #mp_list .queue_section .xtitle, #mealplan #mp_list .queue_section .xnote, #mp_quickview .queue_section .xtitle, #mp_quickview .queue_section .xnote{ margin-left:4px; font-size: 16px; } #mealplan #mp_list .xtitle_inner, #mealplan #mp_list .xnote_inner, #mp_quickview .xtitle_inner, #mp_quickview .xnote_inner{ max-height:40px; overflow:hidden; padding: 0 5px; } #mealplan #mp_list .showing_queue .calendar_section .xtitle, #mealplan #mp_list .showing_queue .calendar_section .xnote, #mp_quickview .showing_queue .calendar_section .xtitle, #mp_quickview .showing_queue .calendar_section .xnote{ border-right: none; border-radius: 3px 0 0 3px; } #mealplan #mp_list .recipe_row.activated .xtitle, #mealplan #mp_list .recipe_row.activated .xnote, #mp_quickview .recipe_row.activated .xtitle, #mp_quickview .recipe_row.activated .xnote{ background:#ffff4e; box-shadow: black 1px 1px 3px; } #mealplan #mp_list .queue_section .view_all_this_day{ display:none; } #mealplan #mp_list .recipe_options { position: fixed; width: 200px; box-sizing: border-box; overflow: hidden; top: 100px; left: 50%; margin-left: -100px; z-index: 100; background: white; border: gray 1px solid; box-shadow: 0 2px 4px rgba(0,0,0,.2); padding: 0; text-align:center; } #mob #ios #mealplan #mp_list #queue .recipe_options { /* ios handles z-index differently so menu can't overlap the queue */ width:150px; left:auto; right:42px; } @media screen and (min-width : 375px){ #mob #ios #mealplan #mp_list #queue .recipe_options { /* ios handles z-index differently so menu can't overlap the queue */ width:180px; left:auto; right:48px; } } #mealplan #mp_list .options_icon_wrapper, #mp_quickview .options_icon_wrapper{ height: 36px; width: 36px; margin: 0px auto 0 auto; } #mealplan #mp_list .options_icon, #mp_quickview .options_icon{ height: 36px; width: 36px; opacity: .5; } #not_small #mealplan #mp_recipe_cal_menu{ margin: 0 auto; width:auto; left: 50%; margin-left: -155px; } #not_small #not_mob #mealplan #mp_recipe_cal_menu{ margin-left:0px; position:fixed; } #small #mealplan #mp_recipe_cal_menu .ui-datepicker { margin: 0 auto; } #small #mealplan #mp_recipe_cal_menu #recipecopymove_div { /* match .ui-datepicker */ margin: 10px auto; width: 306px; padding: 0; } #not_small #mealplan #mp_recipe_cal_menu #mp_recipe_cal_wrapper { margin: 0; padding: 15px 10px 5px; text-align: left; width: 289px; height: 370px; } #not_small #mealplan #mp_recipe_cal_menu #recipecopymove_div { margin-bottom: 8px; } #mealplan #mp_list #queue .options_icon{ opacity: .9; } #mealplan_print #outer { width: auto; margin: 0px; } #mealplan_print .content { width: auto; padding: 0 0px; margin: 0 auto; text-align: left; } #mealplan_print #content_inner { background: white; overflow: hidden; text-align: left; padding: 0 30px; margin:0; min-height: 450px; width:700px } @media print { #mealplan_print #content_inner { padding: 0; width:auto; } } #mealplan_print #print_page_options { margin: 30px 0 10px 0; overflow: hidden; } #mealplan_print #print_page_options label{ height:32px; line-height:32px; display:inline-block; } #mealplan_print .date_range{ display:inline-block; height:32px; line-height:32px; overflow:hidden; float:left; font-weight:bold; margin:20px 0px 15px 0px; font-size:17px } #mealplan_print .day_div{ display:inline-block; border:solid rgb(185, 185, 185) 1px; border-right:none; width:120px; width:90px; overflow:hidden; margin:0px; vertical-align:top; white-space:normal; min-height:80px; text-align: center; } #mealplan_print .day_div_last, #mealplan_print #print_calendar.exact_month_only .last_date_month{ border-right:solid rgb(185, 185, 185) 1px; } #mealplan_print .day_label{ font-weight:bold; font-size:13.5px; text-align:center; width:100%; height:18px; /* must update update_day_height() is this is changed*/ line-height:18px; border-bottom:solid rgb(185, 185, 185) 1px; } #print_calendar .other_month{ visibility:visible; } #print_calendar.exact_month_only .other_month{ visibility:hidden; } #mealplan_print .day_div.other_month .day_label { color: gray; } #mealplan_print .single_recipe{ border:solid 1px gray; margin:5px 0px 5px 0px; width:84px; display:inline-block; background:white; white-space:normal; vertical-align: bottom; text-align:center; } #mealplan_print .recipe_thumb{ display: inline-block; width: 74px; height: 58px; margin-top:2px; background-position: center center; background-size: cover; border:solid gray 1px; } #mealplan_print .recipe_thumb.no_show_image{ display: none; } #mealplan_print .title, #mealplan_print .single_note .note_text{ font-size:13px; line-height: 16px; color:black; text-align:left; overflow: hidden; } #mealplan_print .title{ min-height: 48px; max-height: 48px; margin:0 0 5px 0; padding:0 2px; } #mealplan_print .title.no_show_image{ margin:7px 0 5px 0; } #mealplan_print .single_note .note_text{ margin: 0; padding:5px 2px; text-align:left; } #features { -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #small #features .content{ padding:0px 0px 0px 0px; } #not_mob #features #signup_button_show{ display:none; /* is in header */ } #features #features_header{ background-position: center center; background-size: cover; } #not_small #features #features_header{ min-width:580px; height:180px; border-top: 4px white solid; background-color:#53566A; background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_h200.jpg?v=1'); /* for faster loading, also include this image as img in html with display:none */ } #small #features #features_header{ width: 100%; height:110px; background-color:#53566A; background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_small.jpg?v=2'); /* for faster loading, also include this image as img in html with display:none */ } #not_small #features #features_header #features_header_text_wrapper{ color:white; text-align:center; padding-top: 55px; } #small #features #features_header #features_header_text_wrapper{ color:white; text-align:center; padding-top: 50px; } #not_small #features #features_header #features_header_text_wrapper #features_header_text{ font-size: 18px; } #small #features #features_header #features_header_text_wrapper #features_header_text{ font-size: 18px; } #features #features_header .features_header_button{ width:160px; height:40px; line-height:40px; border: 2px white solid; color:white; font-size:16px; font-weight:bold; text-align:center; margin:0 auto; border-radius:16px; margin-top: 20px; cursor:pointer; } #small #features #features_header .features_header_button{ width:120px; border: 1px white solid; color: white; font-weight: bold; margin-top: 5px; } #features #outer{ width:100%; } #features #features_footer{ background:black; color:white; text-align:center; height:42px; line-height:42px; } #features #features_footer a{ color:white; text-decoration:none; } #features #features_menu_header{ width:600px; margin:50px auto 30px auto; } #features .features_menu_section{ display:inline-block; width:200px; cursor:pointer; } #features .features_menu_text{ text-align: center; font-weight: bold; padding-top: 10px; font-size:15px; color:black; } @media screen and (min-width:600px){ #not_small #features .features_menu_text .narrow_only{ display:none; } } #features .features_menu_text.active, #features .features_menu_text.hover{ color:#A80739; } #features .features_menu_icon, #features .features_menu_icon_wrapper{ width:80px; margin:0 auto; } @media screen and (max-width : 599px){ #features #features_menu_header{ width:336px; margin:0 auto; margin-top:20px; } #features .features_menu_section{ display:inline-block; width:112px; cursor:pointer; } #features .features_menu_icon, #features .features_menu_icon_wrapper { width: 50px; } #features .features_menu_text{ font-size:14px; line-height:16px; } } @media screen and (max-width : 374px){ #features #features_menu_header{ width:318px; } #features .features_menu_section{ width:106px; } } #features .section_wrapper.double_text{ /* shared features at bottom, add gray border at top when beow each other */ border-top:1px solid gray; } #features .bg_salmon{ background:#df6870; color:white; } #features .bg_white{ background:white; color:black; } #features .bg_gray{ background:#555555; color:white; } @media screen and (min-width : 980px){ #features .section_insides{ width:980px; margin:0 auto; } } /* iPhone 5 */ #features .section_image_wrapper, #features .section_image { width: 306px; } /* Android 360px */ @media screen and (min-width : 360px){ #features .section_image_wrapper, #features .section_image { width: 330px; } } /* iPhone 6, Pixel */ @media screen and (min-width : 375px){ #features .section_image_wrapper, #features .section_image { width: 340px; } } /* iPhone 6+, Pixel lg */ @media screen and (min-width : 411px){ #features .section_image_wrapper, #features .section_image { width: 360px; } } /* narrow tablets */ @media screen and (min-width : 600px){ #features .section_image_wrapper, #features .section_image { width: 550px; } } #features .section_image_wrapper, #features .section_image { margin: 0 auto 0 auto; } #features .section_image_wrapper { margin-top:0; } #features .image_section { padding: 20px 0 0 0; } #features .text_point_wrapper{ width:100%; } #features .text_section{ overflow:hidden; margin-top:0px; padding-top:30px; } #features .text_section_inner{ width:100%; margin:0 0 30px 0; } #features .text_header{ text-align:center; font-size:22px; font-weight:bold; letter-spacing: 5px; line-height: 29px; } #features .text_point{ font-size: 17px; line-height: 21px; margin: 12px 15px; } #features #features_top_text{ text-align: center; width: 100%; box-sizing: border-box; margin: 15px 0; font-size: 18px; color: #292929; line-height: 25px; padding: 0 10px; } @media screen and (min-width : 600px){ #features .image_section{ padding:30px 0 0 0; } #features .text_point_wrapper{ width:430px; margin:20px auto; } #features #features_top_text{ width:500px; margin:0 auto 20px auto; } } /* at 801 switches to side by side */ @media screen and (min-width : 801px){ /* if change when switch, also consider .gray_if_fp */ #features .text_section, #features .image_section{ float:left; width:50%; min-height:350px; overflow:hidden; margin-top:0px; } #features .image_section { padding: 0; } #features .rightside_image{ float:right; } #features .section_image_wrapper, #features .section_image { width: 380px; margin: 0 auto 0 auto; } #features .section_image_wrapper { margin-top:20px; } #features .text_point_wrapper{ width:400px; } #features .text_section_inner{ width:400px; margin:30px auto 30px auto; } } @media screen and (min-width : 980px){ #features .text_section, #features .image_section{ min-height:380px; } #features .section_image_wrapper, #features .section_image { width: 420px; } #features .section_image_wrapper { margin-top:20px; } } #features .double_text .text_section{ min-height:0; } #features .features_bottom_button{ width: 200px; margin: 20px auto 50px auto; text-align: center; padding: 15px 0; background:#CC0C47; color: white; border-radius: 5px; font-size: 17px; font-weight: bold; cursor:pointer; } #not_small #features #frontpage #search_wrapper{ width:423px; margin:20px auto; } #small #features #frontpage #search_wrapper{ width:300px; margin:20px auto 15px auto; } #features #frontpage #frontpage_search_input{ display: inline-block; font-size: 14px; line-height: 18px; height: 44px; padding: 11px 10px 11px 10px; border: 1px solid #D7D7D7; box-sizing: border-box; width: 380px; font-family: open sans; width:360px; } #small #features #frontpage #search_wrapper #frontpage_search_input{ width:100%; font-size:16px; } #features #frontpage #frontpage_search_submit{ color: #a7a7a7; box-sizing: border-box; font-size: 14px; font-weight: 800; display: inline-block; width: 60px; height: 44px; line-height: 43px; text-align: center; border: 1px solid #DBDBDB; background: #fdfdfd; border-radius: 2px; cursor: pointer; margin-left: 3px; } #features #frontpage .learn_more_button{ border:gray 2px solid; border-radius:5px; height:38px; line-height:38px; width:140px; margin:0 auto; font-size:16px; color:gray; text-align:center; cursor:pointer; margin-top:20px; } #features #frontpage .bg_salmon .learn_more_button{ border-color:white; color: white; } #features #frontpage .bg_white .learn_more_button{ border-color:black; color: black; } #features #frontpage .bg_gray .learn_more_button{ border-color:white; color: white; } #features #frontpage a{ text-decoration:none; } /* header css */ #login_signup_show_wrapper{ position: absolute; top: 10px; right: 0; } #small #login_signup_show_wrapper{ width:100px; /* force them beneath each other */ } #not_small #login_button_show, #not_small #signup_button_show, #not_small #logout_button{ height:36px; line-height:36px; box-sizing:border-box; text-align:center; font-size:15px; cursor:pointer; font-family: arial; padding:0 15px; float:right; margin-right:10px; border-radius:3px; background: rgba(255, 255, 255, 0.7); color: #35374c; border: 1px solid white; } #not_small #logout_button{ background: white; color: #35374c; border: 1px solid #e1e1e1; margin-top:5px; } #small #login_button_show, #small #signup_button_show, #small #logout_button{ background: #f9f9f9; border: 1px solid white; height: 36px; line-height: 36px; box-sizing:border-box; text-align: center; color: gray; font-size: 14px; cursor: pointer; font-family: arial; padding: 0 15px; float: right; margin-right: 10px; margin-top:5px; border-radius: 3px; } #small #logout_button{ background: #f9f9f9; border: 1px solid #e1e1e1; } @media screen and (max-width : 359px){ #small #login_button_show, #small #signup_button_show, #small #logout_button{ padding: 0 10px; } } #not_small .nli_results_back_button{ background:#b1b8bc; font-family:arial;float:left;width:170px; height:36px;line-height:36px;font-size:14px;font-weight:bold;cursor:pointer; text-align:center; margin: 6px 3px 0px 5px; } #not_small .nli_results_back_button span{ color:white; text-decoration:none; } #small .nli_results_back_button{ height:40px; line-height:40px; } #small #nli_page_top_recipe_back, #small #nli_page_top_results_back{ background: #4d5269; color: white; border: 1px solid white; height: 34px; line-height: 34px; text-align: center; font-size: 14px; cursor: pointer; font-family: arial; padding: 0 15px; border-radius: 3px; position: absolute; top: 10px; left: 10px; } #nli_page_top_morerecipes{ float: left; height: 36px; line-height: 36px; text-align: center; font-size: 14px; font-family: arial; padding: 0 15px; border-radius: 3px; margin-left: 10px; margin-top:8px; font-weight: bold; color: #4f4f4f; background: white; border: solid 1px #dddddd; cursor:pointer; } #small #nli_menu_icon{ position:absolute; top: 5px; right: 5px; } #small #nli_menu_icon div{ width: 32px; height: 4px; background: white; margin: 5px 0; border-radius: 2px; } #nli_header{ background-position: center center; background-size: cover; } #not_small #nli_header{ min-width:580px; height:180px; border-top: 4px white solid; background-color:#53566A; background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_h200.jpg?v=1'); /* for faster loading, also include this image as img in html with display:none */ } #small #nli_header{ width: 100%; height:164px; height:104px; overflow:hidden; box-sizing: border-box; background-color:#53566A; background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_small.jpg?v=2'); /* for faster loading, also include this image as img in html with display:none */ } #small #recipes_shared #nli_header, #small #recipe #nli_header { z-index: 4; } #not_small #nli_header #nli_header_text_wrapper{ color:white; text-align:center; padding-top: 38px; padding-top: 58px; } #small #nli_header #nli_header_text_wrapper{ color:white; text-align:center; padding-top: 50px; } #not_small #nli_header #nli_header_text_wrapper #nli_header_text{ font-size: 17px; } #small #nli_header #nli_header_text_wrapper #nli_header_text{ font-size: 16px; } #nli_header .nli_header_button{ width:160px; height:40px; line-height:40px; border: 2px white solid; color:white; font-size:16px; font-weight:bold; text-align:center; margin:0 auto; border-radius:16px; margin-top: 20px; cursor:pointer; margin-top: 15px; } #small #nli_header .nli_header_button{ width:120px; border: 1px white solid; color: white; font-weight: bold; margin-top: 10px; } #not_mob #nli_header .mob_only{ display:none; } #mob #nli_header .notmob_only{ display:none; } #small.not_logged_in #recipes_shared #content_top { /* not logged in has extra headers */ border-top:4px white solid; box-sizing:border-box; height:44px; /* searchbar-height-dependent */ top: 104px; } #small.not_logged_in #recipes_shared #outer { /* not logged in has extra headers */ top: 148px; /* searchbar-height-dependent */ } #small.not_logged_in #recipe #outer { /* not logged in has extra headers */ top: 104px; } #welcomebackdiv{ color:white; background:#A80739; text-align:center; padding-top:40px; padding-bottom:50px; margin-bottom:20px; } #welcomebackdiv a{ text-decoration:none; color:white; } #welcomebackdiv #welcometext{ font-size: 26px; } #welcomebackdiv #gototext{ font-size: 21px; padding-top: 25px; padding-bottom: 15px; } #welcomebackdiv .goto_option{ line-height: 46px; height: 46px; font-size: 20px; width: 170px; display: inline-block; margin-top: 20px; margin-left: 10px; margin-right: 10px; border-top: white solid 1px; border-bottom: white solid 1px; } @media screen and (max-width: 768px) { #welcomebackdiv .goto_option{ margin-left: 6px; margin-right: 6px; } } #small #welcomebackdiv .goto_option{ display: block; margin: 20px auto 0 auto; } #not_mob #welcomebackdiv .goto_option:hover{ text-decoration:underline; } /* slider is for sliding images in viewport beneath the recipe's main image. Now also when click image in small */ #slider_viewport{ width:240px; /* whole number times slider_image width */ height:60px; /* same as #slider_images */ padding:2px 0; overflow:hidden; float:left; box-shadow: 3px 3px 6px -1px rgba(140,140,140,1); margin: 10px 0 5px 0; /* top same as slider_arrow */ } #small #slider_wrapper.centered{ margin: 0 auto; width: 370px; /* slider_viewport + 2x slider_arrow */ } @media screen and (max-width : 374px){ #small #slider_wrapper.centered{ margin: 0 auto; width: 312px; /* slider_viewport + 2x slider_arrow */ } } #small #slider_viewport{ width:290px; /* whole number times slider_image width */ height:58px; } @media screen and (max-width : 374px){ #small #slider_viewport{ width:232px; /* whole number times slider_image width */ } } #slider_images { height:60px; width:2000%; } #small #slider_images { height:58px; } .slider_image{ height:60px; /* same as #slider_images */ width:60px; /* must fit exact number in slider_viewport */ float:left; overflow:hidden; } #small .slider_image{ height:58px; /* same as #slider_images */ width:58px; /* must fit exact number in slider_viewport */ } .slider_image img{ width:58px; /* a bit less than .slider_image */ } #small .slider_image img{ width:56px; /* a bit less than .slider_image */ } .slider_arrow{ width: 30px; box-sizing:border-box; float: left; padding-top: 20px; padding-left: 12px; padding-bottom: 22px; cursor:pointer; margin-top:10px; /* same as margin-top slider_viewport */ } #small .slider_arrow{ width: 40px; padding-left:17px; } .slider_inner_arrow { position: relative; padding: 2px; height: 17px; width: 0px; opacity: 0.8; } .slider_inner_arrow:after { content: ''; position: absolute; top: 50%; right: 0; height: 50%; width: 100%; background: #adbcc3; -webkit-transform: skew(-30deg, 0deg); -moz-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg); -o-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .slider_inner_arrow:before { content: ''; position: absolute; top: 0; left: 0; height: 50%; width: 100%; background: #adbcc3; -webkit-transform: skew(30deg, 0deg); -moz-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); } .left .slider_inner_arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .slider_arrow.invisible{ visibility:hidden; } /* Instead of making separate call: This is for Datapicker Removed css not used by Datepicker */ /*! jQuery UI - v1.10.4 - 2014-01-17 /* Layout helpers ----------------------------------*/ .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } /* Interaction Cues ----------------------------------*/ /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ /* workarounds */ /* reset extra padding in Firefox, see h5bp.com/l */ .ui-datepicker { width: 17em; /* if change, see recipecopymove_div */ padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; height: 36px; line-height: 0px; padding: 18px 0px; box-sizing: border-box; white-space: nowrap; word-wrap: break-word; overflow: hidden; } #small .ui-datepicker .ui-datepicker-header { height: 40px; padding: 20px 0px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { text-align: center; } #xnot_small .ui-datepicker .ui-datepicker-title { height: 34px; padding: 17px 0px; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } /* TR overrides */ /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x*/; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x*/; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x*/; font-weight: normal; color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x*/; font-weight: normal; color: #212121; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #212121; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x */; font-weight: normal; color: #212121; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { /* ui-state-highlight is today's date */ border: 1px solid #fcefa1; background: #fbf9ee; /* overwritten below*/ /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x*/; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #cd0a0a; background: #fef1ec url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* For IE8 - See #6059 */ } #recipe #recipe_actions #mealplan_options .ui-datepicker-current-day .ui-state-highlight, #recipes #multiupdate_mp_menu .ui-datepicker-current-day .ui-state-highlight, #recipes #recipes_mp_datepicker_div .ui-datepicker-current-day .ui-state-highlight, #mealplan #mp_recipe_cal_menu .ui-datepicker-current-day .ui-state-highlight { /* .ui-datepicker-current-day ui-state-highlight is today's date */ background: #fbf9ee; color:#555555; } #recipe #recipe_actions #mealplan_options .ui-datepicker td a.mp_cell_has_recipe, #recipes #recipes_mp_datepicker_div .ui-datepicker td a.mp_cell_has_recipe, #recipes #multiupdate_mp_menu .ui-datepicker td a.mp_cell_has_recipe, #mealplan #mp_recipe_cal_menu .ui-datepicker td a.mp_cell_has_recipe { /* color when recipe is on that mp date */ background: #f0b2c5; color:#555555; } #recipe #recipe_actions #mealplan_options .ui-datepicker td a.mp_cell_has_recipe.ui-state-highlight, #recipes #recipes_mp_datepicker_div .ui-datepicker td a.mp_cell_has_recipe.ui-state-highlight, #recipes #multiupdate_mp_menu .ui-datepicker td a.mp_cell_has_recipe.ui-state-highlight, #mealplan #mp_recipe_cal_menu .ui-datepicker td a.mp_cell_has_recipe.ui-state-highlight { /* color when recipe is on that mp date and is today's date */ background: #fd6493; color:white; } #recipe #recipe_actions #mealplan_options .ui-datepicker-current-day .ui-state-active, #recipes #recipes_mp_datepicker_div .ui-datepicker-current-day .ui-state-active, #recipes #multiupdate_mp_menu .ui-datepicker-current-day .ui-state-active, #mealplan #mp_recipe_cal_menu .ui-datepicker-current-day .ui-state-active { /* when clicked */ background: #CC0C47; color:white; } .sronly { /* read by screen readers, but not visible on page.*/ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); padding:0; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .srfocus:focus{ /* when set focus to move screenreader, don't show visible focus */ outline:none; /*background:red; text-decoration: underline; */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_222222_256x240.png); } .ui-widget-header .ui-icon { background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_222222_256x240.png); } .ui-state-default .ui-icon { background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_888888_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_454545_256x240.png); } .ui-state-active .ui-icon { background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_454545_256x240.png); } .ui-state-highlight .ui-icon { background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_2e83ff_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_cd0a0a_256x240.png); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 4px; } /* Overlays */