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 */